/* ==========================================================================
   FLOWW Media — marketing and policy pages
   How it works, For schools, Contact.

   Additions only. Everything these pages can borrow from app.css — .wrap,
   .section, .step-card, .value-band, .cta-band, .card, .field, .btn — is
   borrowed rather than restated here.
   ========================================================================== */

/* -- page hero ------------------------------------------------------------- */
/* Deliberately not the photographic .hero: these pages are read, not browsed,
   and a full-bleed image above a FAQ just pushes the answers below the fold.
   Cream band, hairline foot, and the type does the work. */
.page-hero {
  padding-block: clamp(40px, 6vw, 76px) clamp(28px, 4vw, 48px);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  margin-bottom: .32em;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}

.page-hero-lede {
  max-width: 62ch;
  margin-bottom: 0;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* The "Book your media day" button jumps down the page, and the nav is sticky —
   without this the heading lands underneath it. */
.section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* -- tick lists ------------------------------------------------------------ */
/* Used for "what's included" and "what the school gets". The mark is a
   background image on the ::before rather than an inline SVG per item, so the
   markup stays a plain <ul>. */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.check-list li {
  position: relative;
  padding-left: 27px;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .28em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* -- FAQ ------------------------------------------------------------------- */
/* Hairline separators rather than a stack of cards: seven boxed questions read
   as seven interruptions, where seven rules read as one list. */
.faq {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item > summary {
  position: relative;
  display: block;            /* kills the default disclosure triangle */
  padding: 20px 44px 20px 0;
  font-size: 1.03rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ease);
}

/* Safari draws its marker through `display: block` — this is the only thing
   that removes it. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }

.faq-item > summary:hover { color: var(--accent); }

.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The chevron. A masked box rather than a border trick, so it stays crisp at
   any zoom and inherits the heading colour on hover. */
.faq-item > summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}

.faq-item[open] > summary::after {
  transform: rotate(180deg);
  opacity: .8;
}

.faq-item[open] > summary { color: var(--accent); }

.faq-body {
  padding: 0 44px 24px 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.68;
}

/* -- enquiry layout -------------------------------------------------------- */
.enquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}

.enquiry-main { min-width: 0; }

.enquiry-aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.enquiry-detail h3 {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}

.enquiry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .88rem;
  color: var(--muted);
}

.enquiry-list li {
  position: relative;
  padding-left: 15px;
}

.enquiry-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* -- the form itself ------------------------------------------------------- */
.enquiry-form {
  padding: clamp(22px, 3.4vw, 34px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.enquiry-form-title {
  font-size: 1.45rem;
  margin-bottom: .3em;
}

.enquiry-form-note {
  margin-bottom: 24px;
  max-width: 52ch;
}

/* Two short fields side by side; they stack before the input gets cramped. */
.enquiry-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 18px;
}

.enquiry-form-foot {
  margin-top: 16px;
  margin-bottom: 0;
  text-align: center;
}

/* -- honeypot -------------------------------------------------------------- */
/* Off-screen, not `display: none`. Plenty of bots skip fields they can see are
   hidden, but happily fill one that is merely parked outside the viewport.
   Paired with tabindex="-1" and aria-hidden in the markup, no keyboard or
   screen-reader user ever reaches it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- success panel --------------------------------------------------------- */
/* Same amber as the gallery's sneak-peek banner — "this worked" in this app is
   always accent-tinted, never green. */
.success-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 30px;
  background: var(--accent-soft);
  border: 1px solid rgba(180, 83, 9, .18);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.success-panel svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.success-panel strong {
  color: var(--accent);
  font-weight: 600;
}

/* -- policy prose ---------------------------------------------------------- */
/* Terms and Privacy are long-form running text rather than sections of cards,
   so they get one measure and one rhythm instead of per-element classes. */
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-top: 2.2em;
  margin-bottom: .5em;
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.12rem;
  font-weight: 500;
  margin-top: 1.7em;
  margin-bottom: .45em;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.72;
}

.prose ul,
.prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }

.prose > :last-child { margin-bottom: 0; }

.prose strong { color: var(--ink); font-weight: 600; }
.prose li::marker { color: var(--border-strong); }

.prose code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
}

.policy-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 48px;
  padding: 22px 26px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* The details column becomes a footnote under the form rather than a
     squeezed sidebar beside it. */
  .enquiry-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
  .enquiry-detail { flex: 1 1 240px; min-width: 0; }
}

@media (max-width: 560px) {
  .enquiry-aside { flex-direction: column; gap: 22px; }
  .enquiry-detail { flex: 1 1 auto; }

  /* Full-width buttons beat two half-width ones that wrap mid-label. */
  .page-hero-actions { flex-direction: column; align-items: stretch; }
  .page-hero-actions .btn { width: 100%; }

  .faq-item > summary { padding-right: 36px; font-size: .98rem; }
  .faq-body { padding-right: 0; }
}

/* -- reduced motion -------------------------------------------------------- */
/* app.css already clamps transition-duration globally, but the chevron is the
   one piece of state on these pages that a reader might rely on, so it is
   stated explicitly: the rotation still happens, it just stops animating. */
@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after {
    transition: none;
  }
}