/* =========================================================
   FAQ PAGE — SUMMITGATE (FINAL / LOGO-COLOR LOCK)
   Logo Navy: #041834  (RGB 4,24,52)
   Logo Gold: #C8A848  (RGB 200,168,72)
========================================================= */

:root{
  --sg-navy: #041834;
  --sg-gold: #C8A848;

  --sg-white: #ffffff;
  --sg-text: rgba(255,255,255,.92);
  --sg-muted: rgba(255,255,255,.78);

  --sg-card: rgba(255,255,255,.03);
  --sg-card-2: rgba(255,255,255,.045);
  --sg-border: rgba(200,168,72,.28);
  --sg-shadow: 0 20px 55px rgba(0,0,0,.48);
}

/* Hard lock page background (prevents any inherited “green”) */
html,
body{
  background: var(--sg-navy) !important;
}

.page-faq{
  background: var(--sg-navy) !important;
  color: var(--sg-white);
}

/* =========================================================
   HERO — BRAND NAVY ONLY (NO TEAL/GREEN)
========================================================= */

.page-faq .hero-faq{
  position: relative;
  min-height: 520px;
  padding: 6rem 0;

  /* HARD LOCK */
  background: var(--sg-navy) !important;
}

/* Subtle gold + white texture ONLY (no other hues) */
.page-faq .hero-faq::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 18% 28%, rgba(200,168,72,.16), transparent 46%),
    radial-gradient(circle at 78% 58%, rgba(255,255,255,.05), transparent 52%);
  opacity: 1;
  z-index: 1;
}

.page-faq .hero-inner{
  position: relative;
  z-index: 2;
}

.page-faq .hero-content{
  max-width: 640px;
  padding: 2.75rem 2.5rem;
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(200,168,72,.18);
  border-radius: 10px;
  box-shadow: var(--sg-shadow);
}

.page-faq .eyebrow{
  color: rgba(255,255,255,.9);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 .65rem;
}

.page-faq .hero-faq h1{
  color: var(--sg-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  margin: 0 0 .9rem;
}

/* Gold underline accent */
.page-faq .hero-faq h1::after{
  content:"";
  display:block;
  width: 76px;
  height: 3px;
  margin-top: .8rem;
  background: linear-gradient(90deg, var(--sg-gold), rgba(200,168,72,.55));
  border-radius: 3px;
}

.page-faq .hero-subhead{
  color: var(--sg-text);
  max-width: 60ch;
  margin: 0 0 1.25rem;
}

.page-faq .hero-trust{
  margin: 1.25rem 0 0;
  padding-left: 1.15rem;
}

.page-faq .hero-trust li{
  color: rgba(255,255,255,.95);
  font-weight: 650;
}

.page-faq .hero-trust li::marker{
  color: var(--sg-gold);
}

/* =========================================================
   SECTIONS
========================================================= */

.page-faq .section{
  padding: 4.5rem 0;
}

.page-faq .section-muted{
  background: rgba(255,255,255,.03);
}

.page-faq .section-soft{
  background: rgba(200,168,72,.06);
}

.page-faq .section-head h2{
  color: var(--sg-white);
  margin-bottom: .6rem;
}

.page-faq .section-head p{
  max-width: 62ch;
  color: var(--sg-muted);
}

/* =========================================================
   FAQ LIST — COLLAPSIBLE CARDS
========================================================= */

.page-faq .faq-list{
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

.page-faq .faq-item{
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Clickable question row */
.page-faq .faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3.25rem 1.25rem 1.25rem;
  font-weight: 750;
  color: var(--sg-white);
  position: relative;
  user-select: none;
}

.page-faq .faq-item summary::-webkit-details-marker{
  display: none;
}

/* Gold triangle indicator */
.page-faq .faq-item summary::after{
  content: "▸";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sg-gold);
  font-size: 1.25rem;
  transition: transform .22s ease;
}

.page-faq .faq-item[open] summary::after{
  transform: translateY(-50%) rotate(90deg);
}

/* Focus ring */
.page-faq .faq-item summary:focus{
  outline: none;
}

.page-faq .faq-item summary:focus-visible{
  outline: 2px solid rgba(200,168,72,.65);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Answer panel */
.page-faq .faq-answer{
  padding: 1.25rem 1.5rem 1.75rem;
  border-top: 1px solid rgba(200,168,72,.22);
  background: rgba(0,0,0,.10);
  display: grid;
  gap: .8rem;
}

/* Gold bullet (your “dot”) */
.page-faq .faq-bullet{
  width: 8px;
  height: 8px;
  background: var(--sg-gold);
  border-radius: 50%;
  display: inline-block;
  margin-top: .45rem;
}

/* If you want bullet aligned next to first paragraph nicely */
.page-faq .faq-answer p{
  color: var(--sg-text);
  line-height: 1.65;
  margin: 0;
}

/* Optional micro-CTA inside answers */
.page-faq .faq-cta{
  margin-top: .25rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.page-faq .faq-cta a{
  color: var(--sg-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   BUTTONS — GOLD ONLY
========================================================= */

.page-faq .btn-primary{
  background: linear-gradient(135deg, var(--sg-gold), rgba(200,168,72,.70));
  color: var(--sg-navy);
  font-weight: 800;
  border: none;
}

.page-faq .btn-primary:hover{
  filter: brightness(1.05);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px){
  .page-faq .hero-faq{
    padding: 4rem 0;
    min-height: 0;
  }

  .page-faq .hero-content{
    max-width: 100%;
    padding: 2rem;
  }

  .page-faq .faq-item summary{
    padding-right: 3.75rem;
  }
}