/* ZOE 2026 — interior pages (FAQs, Scholarship).
   Still forest scene + veil, page hero, FAQ accordions (core/details),
   scholarship steps/form/sponsor, shared Instagram strip. */

body { font-size: 19px; }

/* still scene + veil */
.zoe-scene-still .zoe-veil-still { position: absolute; inset: 0; background: linear-gradient(rgba(6,12,5,.62), rgba(6,12,5,.82)); }

/* page hero */
.zoe-page-hero { position: relative; z-index: 2; min-height: 42vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 210px 24px 40px; }
.zoe-page-hero h1 { font-family: var(--zoe-display); font-size: clamp(2.8rem, 7vw, 5rem); color: var(--zoe-cream); line-height: 1.02; margin: 16px 0 46px; text-shadow: 0 4px 30px rgba(0,0,0,.6); }

/* content column */
.zoe-wrap { max-width: 880px; margin: 0 auto; padding: 0 40px 90px; }
.zoe-wrap-narrow { max-width: 840px; }

/* ═══ FAQ groups (core/details) ═══ */
.zoe-faq-group { margin-bottom: 56px; }
.zoe-faq-group > .zoe-eyebrow { text-align: center; margin-bottom: 26px; font-size: 1rem; }
.zoe-faq-group details {
  background: rgba(9,17,28,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(231,205,142,.26); border-radius: 4px; margin-bottom: 14px; overflow: hidden;
  transition: border-color .3s;
  /* WP flow layout injects ~19px margin-top on sibling cards — the mockup's
     rhythm is the 14px margin-bottom alone, so the gaps read uneven without this. */
  margin-top: 0 !important;
}
/* No focus ring on click/tap (comms feedback: the "white line"); the open
   card's gold border carries the active state. */
.zoe-faq-group summary:focus, .zoe-faq-group summary:focus-visible,
.zoe-faq-group details:focus, .zoe-faq-group details:focus-visible { outline: none; }
.zoe-faq-group summary { -webkit-tap-highlight-color: transparent; }
.zoe-faq-group details[open] { border-color: var(--zoe-gold-hi); }
.zoe-faq-group summary {
  list-style: none; cursor: pointer; padding: 24px 60px 24px 28px; position: relative;
  font-family: var(--zoe-serif); font-weight: 600; font-size: 1.42rem; color: var(--zoe-cream);
}
.zoe-faq-group summary::-webkit-details-marker { display: none; }
/* plus → minus marker */
.zoe-faq-group summary::before, .zoe-faq-group summary::after {
  content: ''; position: absolute; right: 28px; top: 50%; background: var(--zoe-gold-hi); transition: transform .3s;
}
.zoe-faq-group summary::before { width: 20px; height: 2px; margin-top: -1px; }
.zoe-faq-group summary::after { width: 2px; height: 20px; margin-top: -10px; right: 37px; }
.zoe-faq-group details[open] summary::after { transform: scaleY(0); }
.zoe-faq-group details > :not(summary) { padding: 0 28px 26px; font-family: var(--zoe-serif); font-size: 1.3rem; line-height: 1.6; color: var(--zoe-grain); margin: 0; }
.zoe-faq-group details a { color: var(--zoe-gold-hi); border-bottom: 1px solid rgba(231,205,142,.4); }

.zoe-faq-cta { text-align: center; margin-top: 24px; }
.zoe-faq-cta p { font-family: var(--zoe-serif); font-style: italic; font-size: 1.5rem; color: var(--zoe-gold-hi); margin: 0 0 24px; }
.zoe-faq-cta .wp-block-buttons { justify-content: center; }

/* ═══ Scholarship ═══ */
.zoe-intro { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.zoe-intro p { font-family: var(--zoe-serif); font-size: 1.5rem; line-height: 1.62; color: var(--zoe-cream); margin: 0; }
.zoe-intro .zoe-sub { margin-top: 14px; color: var(--zoe-gold-hi); font-style: italic; }

.zoe-steps { gap: 20px; margin-bottom: 64px; }
.zoe-step { background: rgba(9,17,28,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(231,205,142,.26); padding: 34px 22px; text-align: center; }
.zoe-step p { margin: 0; }
.zoe-step-n { font-family: var(--zoe-display) !important; font-size: 2.4rem !important; color: var(--zoe-gold-hi) !important; }
.zoe-step h3 { font-family: var(--zoe-serif); font-weight: 600; font-size: 1.28rem; color: var(--zoe-cream); margin: 6px 0 10px; }
.zoe-step-body { font-family: var(--zoe-serif); font-size: 1.16rem !important; line-height: 1.55; color: var(--zoe-grain); opacity: .9; }

.zoe-form-head { text-align: center; margin-bottom: 28px; }
.zoe-form-head h2 { font-family: var(--zoe-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--zoe-cream); margin: 12px 0 0; }
.zoe-form-embed {
  background: rgba(9,17,28,.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--zoe-gold-hi); min-height: 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 30px; gap: 20px;
}
/* Tall enough to show the whole scholarship form without inner scrolling
   (form measures ~1850px desktop / ~2050px at phone width). */
.zoe-form-embed iframe { width: 100%; border: 0; min-height: 1900px; }
@media (max-width: 760px) {
  .zoe-form-embed { padding: 24px 10px; }
  .zoe-form-embed iframe { min-height: 2150px; }
}
.zoe-form-embed p { font-family: var(--zoe-serif); font-style: italic; font-size: 1.32rem; color: var(--zoe-grain); max-width: 460px; margin: 0; }
.zoe-form-embed a { color: var(--zoe-gold-hi); border-bottom: 1px solid rgba(231,205,142,.4); }

.zoe-sponsor { margin-top: 60px; text-align: center; background: rgba(9,17,28,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(231,205,142,.26); padding: 54px 30px; }
.zoe-sponsor h2 { font-family: var(--zoe-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--zoe-cream); margin: 14px 0; }
.zoe-sponsor p { font-family: var(--zoe-serif); font-size: 1.3rem; color: var(--zoe-grain); max-width: 560px; margin: 0 auto 26px; }
.zoe-sponsor .wp-block-buttons { justify-content: center; }

/* ═══ Instagram strip (matches homepage) ═══ */
/* alignfull: WP's layout rules pin this section with negative side margins that
   beat margin:auto and shove the 1340px box past the viewport edge — force the
   mockup's centered strip back */
.zoe-insta { max-width: 1340px; margin: 70px auto 0 !important; padding: 0 20px 80px; text-align: center; }
.zoe-ig-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* WP flow layout injects sibling margins that skew grid rows — gap owns spacing. */
.zoe-ig-grid > * { margin: 0 !important; }
.zoe-ig-grid figure { aspect-ratio: 1 / 1; overflow: hidden; margin: 0; background: var(--zoe-green); }
.zoe-ig-grid figure a { display: block; width: 100%; height: 100%; }
.zoe-ig-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.zoe-ig-grid figure.zoe-contain img { object-fit: contain; padding: 12%; }
.zoe-ig-grid figure:hover img { transform: scale(1.06); }
.zoe-ig-follow { margin-top: 26px; justify-content: center; }

@media (max-width: 760px) {
  .zoe-wrap { padding: 0 22px 70px; }
  .zoe-page-hero { padding-top: 190px; }
  .zoe-faq-group summary { font-size: 1.24rem; padding: 20px 52px 20px 20px; }
  .zoe-faq-group summary::before { right: 20px; }
  .zoe-faq-group summary::after { right: 29px; }
  .zoe-faq-group details > :not(summary) { padding: 0 20px 22px; }

  .zoe-insta { padding: 0 0 60px; margin-top: 56px; }
  .zoe-ig-grid { display: flex; overflow-x: auto; gap: 10px; padding: 0 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .zoe-ig-grid::-webkit-scrollbar { display: none; }
  .zoe-ig-grid figure { flex: 0 0 74vw; scroll-snap-align: center; }
  .zoe-ig-follow .wp-block-button__link { padding: 13px 32px; font-size: .78rem; }
}