/* =============================================================================
   pages.css — SHARED INNER-PAGE STYLESHEET
   -----------------------------------------------------------------------------
   Linked AFTER /styles.css on every inner page (lesson pillars, Kāpiti/online
   hubs, About, blog). Owns ALL common inner-page chrome: header nav, breadcrumb,
   page hero, content sections, feature/list blocks, FAQ accordion, pricing line,
   CTA band. Reuses the homepage design tokens + base classes from /styles.css
   (--ink, --amber, --cream, .wrap, .btn, .eyebrow, .section-title, .frame …).

   CONTRACT — this file is OWNED by the template author. Other page agents LINK
   it and must NOT edit it. Anything truly page-specific belongs in a small
   page-local <style> block in that page. Keep selectors here generic + reusable.

   NOTE ON ANIMATION: the homepage's [data-anim]{opacity:0} reveal rule (in
   styles.css) is gated behind html.js AND relies on GSAP to reveal it. Inner
   pages DO NOT load GSAP, so they must NOT use [data-anim] (content would stay
   invisible). Instead we use a self-contained, JS-free CSS reveal driven by
   the .reveal class + IntersectionObserver-free fallback: elements are visible
   by default and only animate in if the browser supports scroll-driven /
   no-reduced-motion. See ".reveal" below.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PAGE SCAFFOLD
   -------------------------------------------------------------------------- */
/* Inner pages are simple top-to-bottom documents (no Lenis/pinning), so let the
   browser own smooth scrolling and keep anchored sections clear of the sticky
   header. */
html{ scroll-padding-top: 96px; }

.page-main{ display:block; }

/* A standard, comfortable content column for prose-led sections. */
.page-section{
  padding-block: clamp(64px, 11vh, 132px);
  position: relative;
}
.page-section--tight{ padding-block: clamp(44px, 7vh, 84px); }
.page-section--ink   { background: var(--ink); }
.page-section--ink-2 { background: var(--ink-2); }
.page-section--ink-3 { background: var(--ink-3); }

/* Soft amber/teal glow helper (decorative, pointer-safe) reused across bands. */
.page-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 55% at 50% 0%, rgba(21,48,46,.45), transparent 62%);
}
.page-section > .wrap{ position:relative; z-index:2; }

/* -----------------------------------------------------------------------------
   2. INNER-PAGE HEADER NAV (sticky)
   -----------------------------------------------------------------------------
   A lighter sibling of the homepage .nav. Solid translucent backdrop from the
   start (inner pages have no full-bleed hero behind the bar), brand wordmark +
   primary links + "Book a lesson" CTA + mobile burger.
   -------------------------------------------------------------------------- */
/* Mirror the homepage .nav.scrolled resting state (inner pages have no nav JS,
   so we adopt the translucent "scrolled" look as the permanent static bar). */
.site-header{
  position: sticky; top: 0; z-index: 9980;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 12px var(--gut);
  background: rgba(10,14,18,.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__brand{ display:inline-flex; align-items:center; gap:.7em; flex:none; }
/* Brand mark — CSS-only mirror of the homepage .nav__brand-mark (34px circle,
   grayscale image). Root-absolute path resolves on root AND /blog/ pages. */
.site-header__brand::before{
  content:""; flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--ink-3);
  background-image:url('/assets/images/brand-mark.jpg');
  background-size:cover; background-position:center;
  filter:grayscale(1) brightness(1.05) contrast(1.05);
}
.site-header__brand-name{
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: .03em; line-height: 1; color: var(--cream);
}
.site-header__brand-name span{ color: var(--amber); }
.site-header__brand:hover .site-header__brand-name{ color: var(--cream); }

.site-nav{ display:flex; align-items:center; gap: 34px; }
.site-nav a{
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim); position: relative; padding: 6px 0;
  transition: color .3s var(--ease); white-space: nowrap;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--amber); transition: width .35s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible{ color: var(--cream); }
.site-nav a:hover::after, .site-nav a:focus-visible::after{ width:100%; }
/* current page marker — add aria-current="page" on the active link */
.site-nav a[aria-current="page"]{ color: var(--amber); }
.site-nav a[aria-current="page"]::after{ width:100%; opacity:.6; }

.site-header__cta{ display:inline-flex; flex:none; }

/* Burger (hidden until the links collapse) */
.site-header__burger{
  display:none; width:42px; height:42px; border:1px solid var(--line);
  border-radius:50%; background:transparent; place-items:center;
  gap:5px; flex-direction:column; cursor:pointer; flex:none;
}
.site-header__burger i{ width:18px; height:1.5px; background:var(--cream); transition:.3s var(--ease); display:block; }
.site-header__burger.open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.site-header__burger.open i:nth-child(2){ opacity:0; }
.site-header__burger.open i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu sheet (toggled by the tiny inline script in each page) */
.site-menu{
  position:fixed; inset:0; z-index:9970;
  background:rgba(10,14,18,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding:var(--gut);
  transform:translateY(-100%); transition:transform .55s var(--ease);
  pointer-events:none; visibility:hidden;
}
.site-menu.open{ transform:translateY(0); pointer-events:auto; visibility:visible; }
.site-menu a{
  font-family:var(--font-display); font-size:clamp(2rem,8vw,2.6rem);
  color:var(--cream); font-weight:500; display:flex; align-items:baseline; gap:.7em;
}
.site-menu a em{
  color:var(--amber); font-style:normal; font-size:.9rem; letter-spacing:.2em;
  font-family:var(--font-body);
}
.site-menu a[aria-current="page"]{ color:var(--amber); }
.site-menu .btn{ margin-top:1em; align-self:flex-start; }
.site-menu__close{
  position:absolute; top:18px; right:var(--gut); width:42px; height:42px;
  border:1px solid var(--line); border-radius:50%; background:transparent;
  color:var(--cream); cursor:pointer; display:grid; place-items:center;
}
.site-menu__close svg{ width:18px; height:18px; stroke:currentColor; fill:none; }

/* -----------------------------------------------------------------------------
   3. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb{
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 14px;
}
.breadcrumb__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--cream-faint);
}
.breadcrumb__list li{ display:inline-flex; align-items:center; gap:.55em; }
.breadcrumb__list a{ color: var(--cream-dim); transition: color .3s; }
.breadcrumb__list a:hover, .breadcrumb__list a:focus-visible{ color: var(--amber); }
.breadcrumb__sep{ color: var(--cream-faint); opacity:.7; }
.breadcrumb__list [aria-current="page"]{ color: var(--amber); }

/* -----------------------------------------------------------------------------
   4. PAGE HERO  (compact, text-led — no WebGL)
   -------------------------------------------------------------------------- */
.page-hero{
  position: relative; overflow: hidden;
  background: var(--ink);
  padding-block: clamp(64px, 13vh, 150px) clamp(56px, 10vh, 120px);
}
.page-hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 70% at 78% 8%, rgba(233,162,59,.16), transparent 58%),
    radial-gradient(90% 80% at 12% 100%, rgba(21,48,46,.5), transparent 60%);
}
/* Optional treated photo strip for the hero, sits behind the dark veil. */
.page-hero__photo{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:.5; }
.page-hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  filter: grayscale(.75) contrast(1.05) brightness(.5) saturate(.9);
}
.page-hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,14,18,.55) 0%, rgba(10,14,18,.30) 40%, var(--ink) 100%);
}
.page-hero__inner{ position:relative; z-index:2; max-width: 60ch; }
.page-hero__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.02;
  letter-spacing: -.01em; margin: .35em 0 0;
}
.page-hero__title em{ font-style: italic; color: var(--amber); font-weight: 400; }
.page-hero__lead{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem); color: var(--cream-dim);
  line-height: 1.4; margin: 1.3rem 0 0; max-width: 50ch;
}
.page-hero__row{ margin-top: 2.2rem; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* -----------------------------------------------------------------------------
   5. CONTENT TYPOGRAPHY + BLOCKS
   -------------------------------------------------------------------------- */
.page-h2{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: 0 0 .5em;
}
.page-h2 em{ font-style: italic; color: var(--amber); }
.page-h3{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 .5em;
}
.page-h3 em{ font-style: italic; color: var(--amber); }

.prose{ max-width: 66ch; }
.prose p{
  font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--cream-dim);
  line-height: 1.75; margin: 0 0 1.1em;
}
.prose p:last-child{ margin-bottom: 0; }
.prose p em{ font-style: italic; color: var(--cream); }
.prose strong{ color: var(--cream); font-weight: 500; }
.prose a{ color: var(--amber); border-bottom: 1px solid rgba(233,162,59,.35); transition: border-color .3s; }
.prose a:hover, .prose a:focus-visible{ border-color: var(--amber); }
.lead-text{ font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--cream); line-height: 1.6; }

/* Two-column "statement + body" layout (heading left, prose right) */
.split{
  display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split__aside{ position: relative; }
.split--media{ grid-template-columns: 1.05fr 1fr; align-items: center; }
.split--media.split--reverse .split__media{ order: 2; }
.split__media .frame{ aspect-ratio: 4/3; border-radius: 10px; }

/* -----------------------------------------------------------------------------
   6. FEATURE GRID  ("What you'll learn", "Who it's for" cards)
   -------------------------------------------------------------------------- */
.feature-grid{
  list-style:none; margin: clamp(28px,4vh,44px) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 12px; overflow:hidden;
}
.feature-grid li{
  background: var(--ink); padding: clamp(22px, 2.6vw, 32px);
  display:flex; flex-direction: column; gap: .55em;
}
.feature-grid h3, .feature-grid .feature-grid__t{
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500;
  color: var(--cream); margin: 0; line-height: 1.2;
}
.feature-grid p{ margin: 0; color: var(--cream-dim); font-size: .95rem; line-height: 1.55; }
.feature-grid__ico{ width: 22px; height: 22px; stroke: var(--amber); fill: none; stroke-width: 1.6; }

/* Simple amber-tick list for inline "what you'll learn" runs */
.tick-list{ list-style:none; margin: 1.2em 0 0; padding:0; display:grid; gap: .8em; }
.tick-list li{
  display:flex; align-items:flex-start; gap:.7em;
  color: var(--cream-dim); font-size: 1rem; line-height: 1.55;
}
.tick-list li::before{
  content:""; flex:none; width: 18px; height: 18px; margin-top:.25em;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9A23B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.tick-list li strong{ color: var(--cream); font-weight: 500; }

/* -----------------------------------------------------------------------------
   7. FORMAT / AREAS CARDS (in-person vs online)
   -------------------------------------------------------------------------- */
.format-cards{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(24px,4vh,40px);
}
.format-card{
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  padding: clamp(24px, 2.6vw, 34px);
  transition: border-color .5s var(--ease);
}
.format-card:hover{ border-color: rgba(233,162,59,.35); }
.format-card__tag{
  display:inline-flex; align-items:center; gap:.55em;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 1em;
}
.format-card__tag svg{ width: 16px; height: 16px; stroke: var(--amber); fill:none; stroke-width:1.6; }
.format-card h3{ font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin: 0 0 .45em; }
.format-card p{ margin: 0; color: var(--cream-dim); font-size: .96rem; line-height: 1.65; }

/* -----------------------------------------------------------------------------
   8. PRICING LINE
   -------------------------------------------------------------------------- */
.pricing-line{
  display:flex; flex-wrap:wrap; align-items: baseline; gap:.6em 1.1em;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(22px, 3vh, 32px); margin-top: clamp(24px,4vh,40px);
}
.pricing-line__amount{
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500; color: var(--cream); line-height: 1;
}
.pricing-line__amount .placeholder-note{ color: var(--amber); }
.pricing-line__detail{ color: var(--cream-dim); font-size: .98rem; }
.pricing-line__note{ width:100%; color: var(--cream-faint); font-size: .82rem; letter-spacing: .04em; }

/* -----------------------------------------------------------------------------
   9. RELATED / INTERNAL LINK CARDS
   -------------------------------------------------------------------------- */
.related-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px,4vh,44px);
}
.related-card{
  display:flex; flex-direction:column; gap:.5em;
  border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.related-card:hover, .related-card:focus-visible{
  border-color: rgba(233,162,59,.4); transform: translateY(-3px);
}
.related-card__eyebrow{
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}
.related-card__title{
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500;
  color: var(--cream); line-height: 1.15; display:flex; align-items:center; gap:.4em;
}
.related-card__title svg{ width: 16px; height: 16px; stroke: var(--amber); fill:none; stroke-width:1.6; transition: transform .35s var(--ease); }
.related-card:hover .related-card__title svg{ transform: translateX(4px); }
.related-card p{ margin:0; color: var(--cream-dim); font-size: .92rem; line-height: 1.55; }

/* -----------------------------------------------------------------------------
   10. FAQ  (native <details> accordion — JS-free, mirrors FAQPage schema)
   -------------------------------------------------------------------------- */
.faq-list{ margin: clamp(28px,4vh,44px) 0 0; padding:0; border-top: 1px solid var(--line); }
.faq-entry{ border-bottom: 1px solid var(--line); }
.faq-entry > summary{
  list-style: none; cursor: pointer;
  display:flex; align-items: flex-start; justify-content: space-between; gap: 1.2em;
  padding: clamp(20px, 2.8vh, 30px) 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.25; color: var(--cream);
  transition: color .3s;
}
.faq-entry > summary::-webkit-details-marker{ display:none; }
.faq-entry > summary:hover{ color: var(--amber); }
.faq-entry > summary:focus-visible{ outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
.faq-entry__icon{
  flex:none; width: 26px; height: 26px; margin-top: .15em;
  border: 1px solid var(--line); border-radius: 50%;
  display:grid; place-items:center; position: relative; transition: border-color .3s, background .3s;
}
.faq-entry__icon::before,
.faq-entry__icon::after{
  content:""; position:absolute; background: var(--amber);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-entry__icon::before{ width: 11px; height: 1.5px; }
.faq-entry__icon::after{ width: 1.5px; height: 11px; }
.faq-entry[open] .faq-entry__icon{ border-color: rgba(233,162,59,.5); background: rgba(233,162,59,.08); }
.faq-entry[open] .faq-entry__icon::after{ transform: scaleY(0); opacity: 0; }
.faq-entry__a{
  margin: 0; padding: 0 0 clamp(22px, 3vh, 32px); max-width: 72ch;
  color: var(--cream-dim); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.75;
}
.faq-entry__a .placeholder-note{ font-weight: 500; }
@media (prefers-reduced-motion: no-preference){
  .faq-entry[open] .faq-entry__a{ animation: faqReveal .4s var(--ease) both; }
}
@keyframes faqReveal{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }

/* -----------------------------------------------------------------------------
   11. CTA BAND  (conversion prompt → /#book)
   -------------------------------------------------------------------------- */
.cta-band{
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding-block: clamp(70px, 12vh, 150px);
}
.cta-band__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(55% 60% at 50% 110%, rgba(233,162,59,.16), transparent 60%);
}
.cta-band .wrap{ position: relative; z-index: 2; }
.cta-band__head{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.02; margin: .25em 0 .4em;
}
.cta-band__head em{ font-style: italic; color: var(--amber); }
.cta-band__sub{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--cream-dim);
  max-width: 46ch; margin: 0 auto 2rem;
}
.cta-band__row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.cta-band__alt{ margin-top: 1.6rem; font-size: .9rem; color: var(--cream-faint); }
.cta-band__alt a{ color: var(--amber); }

/* -----------------------------------------------------------------------------
   12. FOOTER  (mirrors homepage .foot — re-declared so inner pages need no JS
       and stay self-contained; class names match the homepage for consistency)
   -------------------------------------------------------------------------- */
/* Footer styling is inherited from /styles.css (.foot, .foot__*). Inner pages
   reuse those classes verbatim, so no duplication is needed here. */

/* -----------------------------------------------------------------------------
   13. CSS-ONLY SCROLL REVEAL  (progressive enhancement, never hides content)
   -----------------------------------------------------------------------------
   Elements tagged .reveal are fully visible by default. Where the browser
   supports animation-timeline:view() AND the user hasn't asked for reduced
   motion, they gently rise in as they enter the viewport. No JS, no FOUC risk:
   if the feature is unsupported the element simply stays visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{
      opacity: 0;
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes revealUp{
  from{ opacity: 0; transform: translateY(24px); }
  to  { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .split, .split--media{ grid-template-columns: 1fr; gap: clamp(20px,4vh,36px); }
  .split--media.split--reverse .split__media{ order: 0; }
  .format-cards{ grid-template-columns: 1fr; }
}
/* Match the homepage nav's collapse point (.nav__links hide at 760px). */
@media (max-width: 760px){
  .site-nav{ display: none; }
  .site-header__cta{ display: none; }
  .site-header__burger{ display: inline-grid; }
}
@media (max-width: 520px){
  html{ scroll-padding-top: 72px; }
}