/* File: faq-hero.css */
/* -----------------------------------------------------------
   Fonts (project rule #10 — only provided WOFF2 assets)
----------------------------------------------------------- */
@font-face{
  font-family:"Arizona Flare";
  src:url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Arizona Flare";
  src:url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight:300;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Helveesti";
  src:url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* -----------------------------------------------------------
   Section tokens (namespaced) — project palette only (#11)
----------------------------------------------------------- */
.faq-hero{
  --faq-hero-bg: #F8F2E9;   /* light/neutral background */
  --faq-hero-ink: #170B01;  /* primary text */
  --faq-hero-accent: #1C1BAE; /* action color */
  --faq-hero-support-1: #BDCFFB;
  --faq-hero-support-2: #EAFD8B;
}

/* -----------------------------------------------------------
   Layout
----------------------------------------------------------- */
.faq-hero{
  background: var(--faq-hero-bg);
  padding: clamp(40px, 2vw, 72px) 16px;
  display: flex;
  justify-content: center;
}

.faq-hero__wrap{
  /* Reference image: centered beige band with the heading */
  width: auto;
  margin: 0 auto;
  background: #BDCFFB;
  /* Hairline inset to visually separate the band without new colors */
  box-shadow: 0 0 0 0.5px var(--faq-hero-ink) inset;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 6vw, 64px);
  text-align: center;
}

/* -----------------------------------------------------------
   Typography
----------------------------------------------------------- */
.faq-hero__title{
  margin: 0;
  color: var(--faq-hero-ink);
  font-family: "Arizona Flare", serif;
  font-weight: 300;
  font-size: 30px; /* matches visual scale from reference */
  line-height: 1.08;
  letter-spacing: 0;
}

/* -----------------------------------------------------------
   CTA Button (below title)
----------------------------------------------------------- */
.faq-hero__cta{
  margin-top: clamp(16px, 2.4vw, 24px);
  display: inline-block;
  background: var(--faq-hero-accent);
  color: var(--faq-hero-bg);
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400; /* labels */
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transform: translateZ(0); /* avoid blurriness on some GPUs */
  text-decoration: none;
}

.faq-hero__cta:focus-visible{
  outline: 2px solid var(--faq-hero-ink);
  outline-offset: 3px;
}

.faq-hero__cta:active{
  transform: translateY(1px);
}

/* -----------------------------------------------------------
   Responsive fine-tuning
----------------------------------------------------------- */
@media (max-width: 640px){
  .faq-hero__wrap{
    width: 100%;
    padding: 28px 16px;
  }
  .faq-hero__cta{
    font-size: 14px;
  }
  .faq-hero__title {
    font-size: 25px;
  }
  .faq-hero{
    padding: clamp(20px, 2vw, 72px) 0px;
  }
}