/* =====================================================================
   Class pages (Care of Newborn Course, Antenatal Class / Harvesting Colostrum),
   extra chrome from the client's prototypes (24/09/2026). Loaded after
   clinic-proto.css on those two pages only.
   - skip link
   - course sub-header under the BMB site header: lockup, section links, WhatsApp button
     (the five-link newborn sub-nav hides at 1240px and below, the three-link one at 1060px)
   - fixed WhatsApp bar on phones
   - anchor offsets, recipient line weight
   ===================================================================== */

/* ---- skip link: hidden until it gets keyboard focus ---- */
.skip-link{position:fixed; left:1rem; top:-5rem; z-index:200; padding:.7rem 1rem; border-radius:8px;
  color:#5b405f; background:#fff; box-shadow:0 8px 24px rgba(64,47,67,.18); font-weight:700; text-decoration:none;}
.skip-link:focus, .skip-link:focus-visible{top:1rem; outline:2px solid #5b405f; outline-offset:2px;}

/* ---- course sub-header (sits below the site header, does not replace it) ---- */
.proto-page .class-subheader{display:flex; align-items:center; gap:2rem; min-height:76px;
  padding:.65rem clamp(1rem,4vw,4.5rem); background:rgba(255,253,251,.96); border-bottom:1px solid var(--line);}
.proto-page .class-lockup{display:flex; align-items:center; gap:.72rem; min-width:0; color:inherit; text-decoration:none;}
.proto-page .class-emblem{position:relative; flex:0 0 auto; width:52px; height:52px; overflow:hidden; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1px rgba(91,64,95,.1);}
.proto-page .class-emblem img{position:absolute; width:58px; max-width:none; height:auto; left:-4px; top:6px;}
.proto-page .class-lockup-copy{display:grid; line-height:1.08;}
.proto-page .class-lockup-copy strong{color:#147b9b; font-family:var(--serif); font-size:1.02rem; font-style:italic; font-weight:500;}
.proto-page .class-lockup-copy small{margin-top:.35rem; color:var(--plum); font-size:.61rem; font-weight:700; letter-spacing:.17em;}
.proto-page .class-subnav{display:flex; justify-content:center; gap:clamp(1rem,2.4vw,2rem); margin-left:auto;}
.proto-page .class-subnav a{color:#625963; font-size:.86rem; font-weight:600; line-height:1.3; text-decoration:none; white-space:nowrap;}
.proto-page .class-subnav a:hover, .proto-page .class-subnav a:focus-visible{color:var(--plum);}
.proto-page .class-subheader-cta{flex:0 0 auto;}

/* ---- fixed WhatsApp bar: phones only ---- */
.proto-page .class-mobile-bar{display:none;}

/* ---- in-page links land below the sticky site header ---- */
.proto-page #learn, .proto-page #details, .proto-page #registration-form, .proto-page #course-faq{scroll-margin-top:96px;}

/* ---- the whole recipient line reads bold, as the client asked ---- */
.proto-page .registration-intro > p.registration-contact{font-weight:600;}

/* ---- goodie-bag photo keeps its natural shape (the height="731" attribute
        was being used as a fixed pixel height, squashing the photo) ---- */
.proto-page .service-intro-figure img{height:auto; aspect-ratio:1300/731; object-fit:cover;}

/* ---- lockup keeps its two lines (name over small caps) on tablet and desktop:
        it does not shrink, and each line stays whole ---- */
@media (min-width:761px){
  .proto-page .class-lockup{flex:0 0 auto;}
  .proto-page .class-lockup-copy strong, .proto-page .class-lockup-copy small{white-space:nowrap;}
}

/* ---- the five-link newborn sub-nav needs more room, so it hides sooner ---- */
@media (max-width:1240px){
  .proto-page .class-subnav--long{display:none;}
  .proto-page .class-subnav--long + .class-subheader-cta{margin-left:auto;}
}

@media (max-width:1060px){
  .proto-page .class-subnav{display:none;}
  .proto-page .class-subheader-cta{margin-left:auto;}
}

@media (max-width:760px){
  .proto-page .class-subheader{gap:1rem; min-height:64px; padding:.5rem 1rem;}
  .proto-page .class-emblem{width:45px; height:45px;}
  .proto-page .class-emblem img{width:50px; left:-3px; top:5.5px;}
  .proto-page .class-lockup-copy strong{font-size:.89rem;}
  .proto-page .class-lockup-copy small{font-size:.51rem;}
  .proto-page .class-subheader-cta{display:none;}

  /* two-column content cards (fees, course details, goodie bag) stack on phones */
  .proto-page .service-prep-grid, .proto-page .service-faq-list,
  .proto-page .service-intro-body--with-figure{grid-template-columns:1fr;}
  .proto-page .service-prep-card, .proto-page .service-faq-list > li{padding:1.4rem 1.3rem;}
  .proto-page .service-course-meta{grid-template-columns:1fr; gap:.9rem;}

  /* hero photo: the caption card sits under the photo instead of covering its lower half */
  .proto-page .course-hero .hero-portrait{flex-direction:column; align-items:stretch; padding:1.35rem 1.35rem 1.6rem;}
  .proto-page .course-hero .hero-portrait figcaption{position:relative; left:auto; right:auto; bottom:auto; margin:-1.6rem .9rem 0;}

  .proto-page .class-mobile-bar{position:fixed; z-index:40; left:.8rem; right:.8rem; bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
    display:grid; place-items:center; min-height:50px; padding:.5rem 1rem; color:#fff; background:var(--plum);
    border:1px solid rgba(255,255,255,.4); border-radius:8px; font-size:.95rem; font-weight:700; text-decoration:none;
    box-shadow:0 12px 32px rgba(64,47,67,.22);}
  .proto-page .class-mobile-bar:hover, .proto-page .class-mobile-bar:focus-visible{background:var(--plum-deep); color:#fff;}
  body.mobile-nav-open .proto-page .class-mobile-bar{display:none;}

  /* the bar replaces the round WhatsApp button on these pages */
  body:has(.class-mobile-bar) .bmb-wa-fab{display:none !important;}

  /* keep the footer's last line clear of the bar */
  html body .site-footer > p.copyright:last-child{padding-bottom:calc(1rem + 70px + env(safe-area-inset-bottom, 0px)) !important;}
}

/* ---- registration and enquiry forms: final polish (24/09/2026) ----
   - the bronze of the small eyebrow labels goes one step darker so it passes WCAG AA
     on every band of these pages (4.9:1 on the cream band, was 4.1:1); same hue
   - a message under each field that still needs attention (written by the page script)
   - a stronger keyboard focus ring in soft plum
   - tick boxes and their labels are at least 44px tall to tap on phones */
.proto-page{--bronze:#8a5e3b;}
.proto-page .registration-form .field-error{display:block; margin-top:.4rem; color:#9f2f3c; font-size:.85rem; font-weight:600; line-height:1.4;}
.proto-page .registration-form .field-error[hidden]{display:none;}
.proto-page .date-choice > .field-error{grid-column:1 / -1; margin-top:0;}
.proto-page .consent-field + .field-error{margin:-.95rem 0 1.1rem 1.7rem;}
.proto-page .registration-form [aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]){border-color:#9f2f3c; box-shadow:inset 0 0 0 1px #9f2f3c;}
.proto-page .date-choice:has([aria-invalid="true"]) > label{border-color:rgba(159,47,60,.5);}
.proto-page .registration-form :is(input, select, textarea):focus-visible{outline:2px solid #7a6390; outline-offset:2px;}
@media (max-width:760px){
  .proto-page .attendance-choice label{min-height:44px;}
  .proto-page .consent-field{min-height:44px;}
}

/* ---- hero photo (tablet and desktop): the caption card sits just under the photo, as in the
        client's prototype, instead of being pinned to the bottom of the taller panel with an
        empty band between them ---- */
@media (min-width:761px){
  .proto-page .course-hero .hero-portrait{flex-direction:column; justify-content:center; align-items:stretch;}
  .proto-page .course-hero .hero-portrait figcaption{position:relative; left:auto; right:auto; bottom:auto; margin:1.8rem -1rem 0;}
}

/* ---- "what you will learn" cards stay in view beside the longer text column on large screens,
        instead of ending halfway down it and leaving an empty column ---- */
@media (min-width:1061px) and (min-height:860px){
  .proto-page .course-intro .course-benefits{position:sticky; top:110px;}
}

/* ---- form rows: fields in the same row keep the same height and line up. Labels no longer
        stretch their input to the row height; an optional field whose neighbour has a two-line
        label ("Expected delivery date or baby's date of birth") sits on the same baseline ---- */
.proto-page .form-grid > label{align-content:start;}
.proto-page .form-grid > label:not(:has([required])){align-content:end;}

/* ---- "Clinically grounded / Calm and practical / Made for real life" band: even space above and
        below the three columns (it sat flush against the top of its band with a deep gap below) ---- */
.proto-page .course-assurance{padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3rem,6vw,5rem);}

/* ---- final fix pass (24/09/2026) ----
   - text links underlined in plum, as on The Lactation Clinic page and in the client's prototype (R91)
   - phones: the standalone links under the buttons get a 44px tap height
   - the clinic contact strip above the site footer (R89 / R97), styled like the lactation page's strip */
html body main.proto-page .text-link{text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:.3em;}
html body main.proto-page .service-related-cta{text-decoration:underline; text-decoration-color:var(--plum); text-decoration-thickness:1px; text-underline-offset:.3em; border-bottom:0;}
html body main.proto-page .class-contact-strip{align-items:center; background:#f2edf3; border-top:1px solid var(--line); color:#6b626c;}
html body main.proto-page .class-contact-strip strong{font-size:.9rem;}
html body main.proto-page .class-contact-strip div:last-child{justify-items:end; text-align:right;}
html body main.proto-page .class-contact-strip a{color:#5f5660; text-decoration:underline; text-decoration-color:rgba(91,64,95,.35); text-underline-offset:.25em;}
html body main.proto-page .class-contact-strip a:hover, html body main.proto-page .class-contact-strip a:focus-visible{color:var(--plum);}
/* hero role line (28/09/2026): the specialist's name links to her full profile and credentials on
   The Lactation Clinic page, underlined softly so it reads as a link without shouting */
html body main.proto-page .course-hero .role a{text-decoration:underline; text-decoration-color:rgba(91,64,95,.4); text-decoration-thickness:1px; text-underline-offset:.28em;}
html body main.proto-page .course-hero .role a:hover, html body main.proto-page .course-hero .role a:focus-visible{text-decoration-color:currentColor;}
@media (max-width:760px){
  html body main.proto-page .hero-actions .text-link,
  html body main.proto-page .final-cta .text-link{padding-top:.6rem; padding-bottom:.6rem;}
  html body main.proto-page .course-return .text-link{display:inline-block; padding-top:.6rem; padding-bottom:.6rem;}
  html body main.proto-page .service-related-cta{display:inline-block; padding-top:.75rem; padding-bottom:.75rem;}
  html body main.proto-page .service-faq-list summary{min-height:44px;}
  html body main.proto-page .class-contact-strip{align-items:flex-start; gap:1rem;}
  html body main.proto-page .class-contact-strip div:last-child{justify-items:start; text-align:left;}
  html body main.proto-page .class-contact-strip a{display:inline-block; padding-top:.65rem; padding-bottom:.65rem;}
}

/* ---- course sub-header: sticky from 761px up, straight under the BMB header or its floating pill, as in the
        client's prototype and on The Lactation Clinic page (R97). The page script sets --lc-sub-top on <main>
        and lands the in-page links below both bars; the offsets here are the fallback without it.
        Phones keep the fixed bottom bar instead. ---- */
@media (min-width:761px){
  html body main.proto-page .class-subheader{position:sticky; top:var(--lc-sub-top,81px); z-index:40;
    background:rgba(255,253,251,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
  html body main.proto-page #learn, html body main.proto-page #details,
  html body main.proto-page #registration-form, html body main.proto-page #course-faq{scroll-margin-top:170px;}
  /* the registration intro that follows the page sits below the pinned bars, not under them */
  html body main.proto-page .registration-intro{top:calc(var(--lc-sub-top,81px) + 76px + 1.5rem);}
}
@media (min-width:1061px) and (min-height:860px){
  html body main.proto-page .course-intro .course-benefits{top:calc(var(--lc-sub-top,81px) + 76px + 1.5rem);}
}