/* ==========================================================================
   Course detail pages (The Aligned Approach to ADHD, Money Mastery Method)
   --------------------------------------------------------------------------
   Fully self-contained component, scoped under the .ac-course wrapper.

   Two isolation rules keep it immune to the rest of the theme:
   1. Every design token is declared on .ac-course itself (NOT :root), so the
      custom properties inherit to every descendant and override the theme's
      own :root values inside this component. The theme only defines 7 of the
      tokens below; the rest (--serif, --paper, --gold-deep, --sage, etc.)
      exist nowhere else, so they MUST live here.
   2. Class names that also exist in the theme's main.css (.hero, .eyebrow,
      .btn, .prose, .step) are namespaced here as .ac-hero / .ac-eyebrow /
      .ac-btn / .ac-prose / .ac-step so main.css can never bleed into them.
      If you add a new class, check it is not already used in main.css.

   Shared verbatim by page-course-adhd.css and page-course-money.css.
   ========================================================================== */

/* ---------- design tokens (declared on the wrapper, not :root) ---------- */
.ac-course{
  --cream:#FAF6F1; --cream-deep:#F2EBE0; --sand:#F0E9DE; --paper:#FFFFFF;
  --gold:#C4A882; --gold-deep:#8A6E32; --gold-light:#D9C4A3;
  --sage:#7D8F76; --sage-deep:#5E6E57;
  --ink:#2A2520; --text:#3E372F; --muted:#8A8177; --border:#E7DECF;
  --shadow:24px 24px 60px rgba(120,96,54,.10); --lift:0 20px 44px rgba(120,96,54,.17);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Raleway','Helvetica Neue',Arial,sans-serif;

  box-sizing:border-box;
  background:var(--cream); color:var(--text);
  font-family:var(--sans); font-weight:300; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.ac-course *, .ac-course *::before, .ac-course *::after{ box-sizing:border-box; }
.ac-course img{ max-width:100%; }
.ac-course em{ font-style:italic; }

/* ---------- shared layout primitives ---------- */
.ac-course .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.ac-course .ac-eyebrow{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.30em; text-transform:uppercase; color:var(--gold-deep); display:block; }
.ac-course .diamond{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); display:block; margin:0 auto; }
.ac-course .rule{ display:flex; align-items:center; gap:16px; justify-content:center; padding:8px 0; }
.ac-course .rule::before, .ac-course .rule::after{ content:""; height:1px; width:60px; background:var(--border); }
.ac-course h1, .ac-course h2, .ac-course h3{ font-family:var(--serif); font-weight:300; color:var(--ink); text-wrap:balance; margin:0; }
.ac-course p{ max-width:64ch; }

/* ---------- hero ---------- */
.ac-course .ac-hero{ padding:44px 0 24px; background:linear-gradient(160deg,var(--cream-deep) 0%, var(--sand) 55%, var(--cream) 100%); }
.ac-course .ac-hero .wrap{ max-width:1180px; }
.ac-course .ac-hero .ac-eyebrow{ margin-bottom:22px; }
.ac-course .ac-hero h1{ font-size:clamp(2.5rem,5vw,4.15rem); line-height:1.03; }
.ac-course .ac-hero .lede-serif{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--sage-deep); margin:15px 0 20px; line-height:1.3; max-width:30ch; }
.ac-course .ac-hero p{ font-size:15.5px; color:var(--text); margin:0 0 24px; }
.ac-course .hero-grid{ display:grid; grid-template-columns:1.42fr 1fr; gap:46px; align-items:center; }
.ac-course .hero-text{ min-width:0; }
.ac-course .hero-visual{ display:flex; justify-content:center; }
.ac-course .hero-visual .cover{ width:100%; max-width:452px; aspect-ratio:1273 / 1309; object-fit:cover; object-position:center; border-radius:12px; box-shadow:0 30px 62px rgba(120,96,54,.22); }
.ac-adhd .hero-visual{ align-self:start; margin-top:6px; }
.ac-course .facts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; border-top:1px solid var(--border); padding-top:18px; }
.ac-course .fact{ flex:1 1 150px; }
.ac-course .fact .k{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px; }
.ac-course .fact .v{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); }

/* ---------- buttons ---------- */
.ac-course .ac-btn{ display:inline-block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#FBF8F3; background:var(--gold); border:1px solid var(--gold); border-radius:100px; padding:16px 34px; text-decoration:none; cursor:pointer; transition:all .3s ease; }
.ac-course .ac-btn:hover{ background:var(--sage); border-color:var(--sage); transform:translateY(-2px); box-shadow:0 14px 34px rgba(125,143,118,.34); }
.ac-course .ac-btn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
.ac-course .ac-btn.ghost{ background:transparent; color:var(--gold-deep); border-color:var(--gold); }
.ac-course .ac-btn.ghost:hover{ background:var(--gold); color:#FBF8F3; }

/* ---------- generic section ---------- */
.ac-course .blk{ padding:72px 0; }
.ac-course .blk.blk-pb-sm{ padding-bottom:30px; }
.ac-course .blk.blk-pt-sm{ padding-top:32px; }
.ac-course .blk-head{ margin-bottom:40px; }
.ac-course .blk-head .ac-eyebrow{ margin-bottom:16px; }
.ac-course .blk-head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; }
.ac-course .blk-head p{ font-size:15.5px; color:var(--muted); margin:14px 0 0; }

/* ---------- recognise list ---------- */
.ac-course .recog{ background:var(--paper); border:1px solid var(--border); border-radius:20px; padding:40px 44px; box-shadow:var(--shadow); }
.ac-course .recog ul{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.ac-course .recog li{ display:flex; gap:16px; align-items:flex-start; font-size:15.5px; color:var(--text); max-width:none; }
.ac-course .recog li .dot{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); margin-top:9px; flex:none; }
.ac-course .recog .close{ margin:30px 0 0; font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--sage-deep); max-width:none; }

/* ---------- what this really is: prose + gold note side by side ---------- */
.ac-course .whatis-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; }
.ac-course .ac-prose{ max-width:66ch; }
.ac-course .whatis-grid .ac-prose{ max-width:none; }
.ac-course .ac-prose p{ font-size:16.5px; color:var(--text); margin:0 0 20px; }
.ac-course .note{ display:flex; gap:12px; align-items:flex-start; background:var(--cream-deep); border-left:3px solid var(--gold); border-radius:0 12px 12px 0; padding:16px 20px; margin-top:14px; }
.ac-course .note .diamond{ margin:11px 0 0; flex:none; }
.ac-course .whatis-grid .note{ margin-top:0; }
.ac-course .note p{ font-size:13.5px; color:var(--muted); margin:0; font-style:italic; }

/* ---------- outcomes grid ---------- */
.ac-course .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.ac-course .oc{ background:var(--paper); border:1px solid var(--border); border-radius:16px; padding:26px 26px 28px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.ac-course .oc:hover{ transform:translateY(-5px); border-color:var(--gold-light); box-shadow:var(--lift); }
.ac-course .oc .ic{ display:block; margin-bottom:14px; line-height:0; }
.ac-course .oc .ic svg{ width:44px; height:44px; display:block; transition:transform .3s ease; }
.ac-course .oc:hover .ic svg{ transform:scale(1.12); }
.ac-course .oc p{ font-size:14.5px; color:var(--text); margin:0; }

/* ---------- journey timeline ---------- */
.ac-course .journey{ display:grid; gap:2px; border-radius:18px; overflow:hidden; border:1px solid var(--border); }
.ac-course .ac-step{ position:relative; display:grid; grid-template-columns:76px 1fr; gap:22px; background:var(--paper); padding:26px 30px; align-items:baseline; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.ac-course .ac-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); transform:scaleY(0); transition:transform .3s ease; }
.ac-course .ac-step:hover{ background:var(--cream-deep); }
.ac-course .ac-step:hover::before{ transform:scaleY(1); }
.ac-course .ac-step .num{ font-family:var(--serif); font-size:2.1rem; font-weight:400; color:var(--gold-light); line-height:1; transition:color .3s ease; }
.ac-course .ac-step:hover .num{ color:var(--gold); }
.ac-course .ac-step h3{ font-size:1.5rem; margin-bottom:6px; }
.ac-course .ac-step p{ font-size:14.5px; color:var(--muted); margin:0; }
.ac-course .journey-note{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--sage-deep); text-align:center; margin:24px auto 0; max-width:52ch; }

/* ---------- meet abigail ---------- */
.ac-course .meet{ display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:center; background:var(--cream-deep); border-radius:22px; padding:46px 50px; }
.ac-course .portrait{ width:230px; height:300px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream-deep); }
.ac-course .portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block; }
.ac-course .meet .ac-eyebrow{ margin-bottom:14px; }
.ac-course .meet h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:16px; }
.ac-course .meet p{ font-size:15.5px; color:var(--text); margin:0 0 14px; }

/* ---------- included ---------- */
.ac-course .incl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.ac-course .incl li{ display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:20px 22px; font-size:14.5px; color:var(--text); }
.ac-course .incl li .tick{ width:22px; height:22px; border-radius:50%; background:var(--sage); flex:none; position:relative; margin-top:1px; }
.ac-course .incl li .tick::after{ content:""; position:absolute; left:7px; top:4px; width:6px; height:11px; border:solid #FBF8F3; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ---------- faq ---------- */
.ac-course .faq{ border-top:1px solid var(--border); }
.ac-course .qa{ border-bottom:1px solid var(--border); padding:24px 0; }
.ac-course .qa h3{ font-size:1.4rem; margin-bottom:8px; color:var(--ink); }
.ac-course .qa p{ font-size:14.5px; color:var(--muted); margin:0; }

/* ---------- testimonials ---------- */
.ac-course .quote{ max-width:720px; margin:0 auto; background:var(--paper); border:1px solid var(--border); border-radius:20px; padding:40px 46px 36px; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.ac-course .quote:hover{ transform:translateY(-4px); border-color:var(--gold-light); box-shadow:var(--lift); }
.ac-course .qmark{ font-family:var(--serif); font-size:4.4rem; line-height:.4; color:var(--gold-light); height:30px; }
.ac-course .quote blockquote{ margin:0; padding:0; }
.ac-course .quote blockquote p{ font-family:var(--serif); font-size:1.16rem; font-style:italic; font-weight:400; line-height:1.62; color:var(--text); max-width:none; margin:0 0 15px; }
.ac-course .quote figcaption{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.ac-course .quotes-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; max-width:none; }
.ac-course .quotes-2 .quote{ max-width:none; margin:0; padding:34px 34px 30px; }
.ac-course .quotes-2 .quote blockquote p{ font-size:1.08rem; }

/* ---------- expandable review ---------- */
.ac-course .more{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .4s ease; }
.ac-course .more.open{ max-height:640px; opacity:1; }
.ac-course .more-btn{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--gold-deep); background:none; border:none; cursor:pointer; padding:0; margin-top:14px; display:inline-flex; align-items:center; gap:7px; }
.ac-course .more-btn:hover{ color:var(--sage-deep); }
.ac-course .more-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.ac-course .mb-cv{ transition:transform .3s ease; }
.ac-course .more-btn[aria-expanded="true"] .mb-cv{ transform:rotate(180deg); }

/* ---------- google reviews link ---------- */
.ac-course .grev{ text-align:center; margin-top:32px; }
.ac-course .grev a{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); text-decoration:none; display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid var(--gold-light); padding-bottom:4px; transition:color .25s ease, border-color .25s ease; }
.ac-course .grev a:hover{ color:var(--sage-deep); border-color:var(--sage); }
.ac-course .grev .grev-star{ color:var(--gold); font-size:13px; }
.ac-course .grev .grev-ar{ font-size:15px; line-height:1; }

/* ---------- final cta ---------- */
.ac-course .final{ background:linear-gradient(140deg,var(--sage) 0%, var(--sage-deep) 100%); border-radius:26px; padding:70px 40px; text-align:center; margin:10px 0 0; }
.ac-course .final .ac-eyebrow{ color:#EAF0E6; margin-bottom:18px; }
.ac-course .final h2{ color:#FBF8F3; font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.ac-course .final p{ color:#EAF0E6; font-size:15.5px; margin:0 auto 34px; max-width:50ch; }
.ac-course .final .ac-btn{ background:#FBF8F3; color:var(--sage-deep); border-color:#FBF8F3; }
.ac-course .final .ac-btn:hover{ background:var(--gold); color:#FBF8F3; border-color:var(--gold); }
/* "Prefer to talk first" link sits on the green block here, so it goes light
   (the global gold treatment would vanish against the sage). Money page only. */
.ac-money .final .enrol-help{ color:#EAF0E6; }
.ac-money .final .enrol-help a{ color:#FBF8F3; border-bottom-color:rgba(251,248,243,.55); }
.ac-money .final .enrol-help a:hover{ color:#FBF8F3; border-bottom-color:#FBF8F3; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .ac-course .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .ac-course .hero-visual .cover{ max-width:340px; }
  .ac-adhd .hero-visual{ align-self:center; margin-top:0; }
}
@media (max-width:720px){
  .ac-course .meet{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:38px 26px; }
  .ac-course .ac-step{ grid-template-columns:56px 1fr; gap:16px; padding:22px 22px; }
  .ac-course .recog{ padding:30px 26px; }
  .ac-course .quotes-2{ grid-template-columns:1fr; }
  .ac-course .whatis-grid{ grid-template-columns:1fr; gap:22px; }
}
@media (prefers-reduced-motion:reduce){
  .ac-course *{ animation:none !important; transition:none !important; }
  .ac-course .ac-btn:hover, .ac-course .oc:hover, .ac-course .quote:hover{ transform:none; }
  .ac-course .oc:hover .ic svg{ transform:none; }
}