/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* ─── Sniper Marketing - Global Design System ─────────────────────────── */

:root {
  --skyblue: #ADF9FF;
  --dark: #141516;
  --bg: #050607;
  --glow-blue: rgba(2, 82, 162, 0.25);
}

/* ─── HEADER FIX ─────────────────────────────────────────────────────── */
/* Bricks section defaults to flex-direction:column - override for header */

#brx-header .brxe-section {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Add top padding to body so content isn't hidden behind fixed header */
#brx-content {
  padding-top: 80px;
}

/* Nav link hover */
#brx-header .brxe-div .brxe-text-basic {
  cursor: pointer;
  transition: color 0.3s ease;
}
#brx-header .brxe-div .brxe-text-basic:hover {
  color: var(--skyblue) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────── */

#brx-footer .brxe-section {
  flex-direction: column !important;
  background-color: #000 !important;
}

/* ─── Background Glows (matching Figma) ───────────────────────────────── */

#brx-content > .brxe-container {
  position: relative;
}

/* Main moon arc behind hero (~5% of page) */
#brx-content > .brxe-container::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 1830px;
  height: 1349px;
  background: url('/wp-content/uploads/2026/03/moon-arc.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* All sections sit above backgrounds */
#brx-content > .brxe-container > .brxe-container {
  position: relative;
  z-index: 1;
}

/* First 3 sections transparent (moon shows through) */
/* Section 4+ opaque dark background */
#brx-content > .brxe-container > .brxe-container:nth-child(n+4) {
  background-color: #050607;
}

/* Mid-page glow (~46% - stats/results area) */
#brx-content > .brxe-container > .brxe-container:nth-child(5)::before,
#brx-content > .brxe-container > .brxe-container:nth-child(6)::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -100px;
  width: 516px;
  height: 526px;
  background: url('/wp-content/uploads/2026/03/glow-mid.png') center/contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

#brx-content > .brxe-container > .brxe-container:nth-child(6)::before {
  right: auto;
  left: -100px;
  top: -150px;
}

/* Bottom glows (~75-80% - CTA/FAQ area) */
#brx-content > .brxe-container > .brxe-container:nth-child(8)::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -80px;
  width: 261px;
  height: 261px;
  background: url('/wp-content/uploads/2026/03/glow-bottom-left.png') center/contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

#brx-content > .brxe-container > .brxe-container:nth-child(9)::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -60px;
  width: 261px;
  height: 261px;
  background: url('/wp-content/uploads/2026/03/glow-bottom-right.png') center/contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Small accent glow near FAQ */
#brx-content > .brxe-container > .brxe-container:nth-child(10)::before,
#brx-content > .brxe-container > .brxe-container:nth-child(11)::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 338px;
  height: 104px;
  background: url('/wp-content/uploads/2026/03/glow-small.png') center/contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ─── Card Glow ──────────────────────────────────────────────────────── */

.brxe-div {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ─── Image styles ───────────────────────────────────────────────────── */
/* Shadows are controlled per-image via Bricks builder settings only */

/* ─── Button Hover ───────────────────────────────────────────────────── */

.brxe-button.bricks-button {
  transition: all 0.3s ease;
}

.brxe-button.bricks-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(173, 249, 255, 0.2);
}

/* ─── Accordion / FAQ ────────────────────────────────────────────────── */

.brxe-accordion .accordion-title-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 20px 0 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.brxe-accordion .accordion-title-wrapper:hover {
  color: var(--skyblue) !important;
}

.brxe-accordion .accordion-content-wrapper {
  color: #c5c5c5;
  padding: 16px 0;
  line-height: 1.6;
}

.brxe-accordion .accordion-icon {
  color: var(--skyblue);
}

/* ─── Typography ─────────────────────────────────────────────────────── */

.brxe-heading {
  letter-spacing: -0.02em;
}

.brxe-text-basic p {
  line-height: 1.7;
}

/* ─── Sections are transparent so moon background shows through ─────── */

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  #brx-header .brxe-section {
    flex-wrap: wrap !important;
    padding: 14px 24px !important;
  }
  #brx-content {
    padding-top: 70px;
  }
  #brx-content > .brxe-container > .brxe-container::before {
    width: 250px;
    height: 250px;
    filter: blur(60px);
  }
}

@media (max-width: 478px) {
  #brx-content > .brxe-container > .brxe-container::before {
    display: none;
  }
  #brx-content {
    padding-top: 60px;
  }
}

/* ─── Root overflow clip ─────────────────────────────────────────────── */

#brx-content > .brxe-container {
  overflow-x: hidden;
}