/* ============================================================
   Colonial Aesthetics & Wellness — System overlay
   ============================================================
   Loaded AFTER site.css and AFTER every page-specific stylesheet
   (blog.css, treatment.css, patient.css, legal.css, shop.css,
   giftcards.css, payments.css). Its job is to enforce the locked
   design-system contract site-wide:

     1. TYPE SCALE  — Display/H1/H2/H3 may never be invented.
        site.css already defines the canonical values; this file
        overrides every page-specific selector that drifted from
        them and re-asserts the spec sizes.

     2. CLOSER BLOCK — the same end-of-page CTA was reimplemented
        six times (.cta-block / .pr-consult / .shop-consult /
        .gc-final / .pay-consult and blog.css's override). They
        are aliased here so they share one rule.

     3. SLIM HERO — four near-identical slim heroes (.pr-hero,
        .shop-hero, .pay-hero, .legal-hero) are aliased to a
        single shared rule. Page-specific class names stay so
        no JSX needs to change.

   Tokens come from site.css. No raw hex is introduced here.
   Sizing follows the locked Type Scale exactly:
     Display 64 / 42 · H1 56 / 38 · H2 40 / 30 · H3 24 / 20
   ============================================================ */


/* ============================================================
   1) TYPE SCALE LOCK
   ============================================================
   The spec says: "Never invent colors, spacing, or type styles
   not listed in this file." Every selector below was found
   using a size outside the locked scale (52, 60, 44, 36, 32,
   28). Each is brought back to the spec value.
   ============================================================ */

/* ---- H1 (56 / 38) — was 52, 60 ---- */
.article-hero h1,
.gc-hero h1 {
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
@media (max-width: 1023px) {
  .gc-hero h1 { font-size: 56px; }
}
@media (max-width: 767px) {
  .article-hero h1,
  .gc-hero h1 { font-size: 38px; }
}

/* ---- H2 (40 / 30) — every page-specific h2 that drifted ----
   Selectors grouped by file of origin. Every value below is
   brought to the locked Type Scale.

   Note: H2 is the section-level heading in the system. If a
   heading needs to read smaller than 40px (e.g. inside body
   prose), it should be tagged <h3> structurally — 24/20 — not
   shrunk visually.
*/
.article-body h2,                  /* blog.css   : was 32 */
.cta-block h2,                     /* blog.css   : was 44 */
.subscribe h2,                     /* blog.css   : was 36 */
.pr-section-head h2,               /* patient.css: was 36 */
.pr-consult h2,                    /* patient.css: was 36 */
.pr-membership-cross h2,           /* patient.css: was 28 */
.shop-consult h2,                  /* shop.css   : was 36 */
.gc-uses h2,                       /* giftcards  : was 36 */
.gc-final h2,                      /* giftcards  : was 44 */
.pay-accepted-head h2,             /* payments   : was 32 */
.pay-financing-head h2,            /* payments   : was 36 */
.pay-consult h2,                   /* payments   : was 36 */
.pay-membership-inner h2,          /* payments   : was 28 */
.legal-body h2 {                   /* legal.css  : was 32 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .article-body h2,
  .cta-block h2,
  .subscribe h2,
  .pr-section-head h2,
  .pr-consult h2,
  .pr-membership-cross h2,
  .shop-consult h2,
  .gc-uses h2,
  .gc-final h2,
  .pay-accepted-head h2,
  .pay-financing-head h2,
  .pay-consult h2,
  .pay-membership-inner h2,
  .legal-body h2 {
    font-size: 30px;
  }
}

/* ---- H2 within long-form body prose keeps locked scale but
        gets a tighter top margin so 40px doesn't shout over
        16px body. Article + legal pages only. ---- */
.article-body h2 { margin-top: 56px; margin-bottom: 20px; max-width: 28ch; }
.legal-body h2  { margin-top: 48px; margin-bottom: 16px; }
@media (max-width: 767px) {
  .article-body h2 { margin-top: 40px; }
  .legal-body h2  { margin-top: 40px; }
}

/* ---- Treatment menu sub-heading was 28px (display); now
        tagged structurally as H3-equivalent in the scale. ---- */
.t-menu-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--c-ink);
}
@media (max-width: 767px) {
  .t-menu-heading { font-size: 20px; line-height: 1.3; }
}

/* ---- Service-card heading was 28px Playfair (page-specific
        H3-display variant). Per locked Type Scale, H3 is the
        next step below H2 — Montserrat SemiBold 24/20. Bring
        it back so service cards across Aesthetics / Functional
        / Homepage all read at the same H3 weight. ---- */
.h3-card {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: var(--c-ink);
}
@media (max-width: 767px) {
  .h3-card { font-size: 20px; line-height: 1.3; }
}

/* ---- Featured-article H2 in the blog featured card uses
        the canonical H2 size already (40) but with letter
        spacing -0.005em. The locked spec has H2 letter-spacing
        at 0 — re-assert. ---- */
.featured-body h2 {
  font-size: 40px;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .featured-body h2 { font-size: 30px; }
}

/* ---- Edit masthead H1: spec H1 is regular, not italic.
        Italic was a page-specific stylization that fights
        the rest of the site. Re-assert regular weight. ---- */
.edit-masthead h1 {
  font-size: 56px;
  font-style: normal;
}
@media (max-width: 767px) { .edit-masthead h1 { font-size: 38px; } }


/* ============================================================
   2) CLOSER BLOCK — unified end-of-page CTA
   ============================================================
   Six page-specific implementations of the same component, now
   sharing one rule. Class aliases:

     .cta-block      (site.css default — Soft Mint)
     .pr-consult     (patient.css)
     .shop-consult   (shop.css)
     .pay-consult    (payments.css — Deep Teal variant)
     .gc-final       (giftcards.css — Deep Teal variant)
     .closer         (canonical name for new pages)

   Surface variant is controlled by the existing background:
     - Mint (default)
     - Deep Teal (.pay-consult, .gc-final, .pr-consult--deep)
   Both already set their own background; this rule normalizes
   padding, the Soft Gold rule, headline scale, lead width,
   action spacing, and motion.

   No structural changes — JSX stays put.
   ============================================================ */

.cta-block,
.pr-consult,
.shop-consult,
.pay-consult,
.gc-final,
.closer {
  /* Padding: locked at 128/96 desktop, 96/24 mobile.
     This matches the spec's CTA block component note
     ("96×96 padding") at the inner-content edge while
     allowing larger vertical breathing on tall blocks. */
  padding-top: 128px;
  padding-bottom: 128px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}
@media (max-width: 767px) {
  .cta-block,
  .pr-consult,
  .shop-consult,
  .pay-consult,
  .gc-final,
  .closer {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* Lead paragraph max width — same across all closers */
.cta-block .lead,
.cta-block p:not(.cta-sub):not(.sms),
.pr-consult p,
.shop-consult p,
.pay-consult p,
.gc-final p,
.closer p {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

/* Action row alignment + spacing */
.cta-block .cta-actions,
.pr-consult-actions,
.shop-consult-actions,
.pay-consult-actions,
.gc-final-actions,
.closer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}

/* The Soft Gold 40×2px rule above the headline — spec component:
   "CTA blocks: ... 1 Soft Gold 40×2px line above headline".
   Multiple page builds spelled it as .gold-line and .goldline;
   normalize both. */
.cta-block .gold-line,
.cta-block .goldline,
.pr-consult .gold-line,
.shop-consult .gold-line,
.pay-consult .gold-line,
.gc-final .gold-line,
.closer .gold-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-gold);
  margin: 0 auto 32px;
  border: 0;
}


/* ============================================================
   3) SLIM HERO — unified top-of-page banner
   ============================================================
   Four implementations were near-identical: a 96-tall Deep Teal
   (or Ivory) band with a thin vertical rule, eyebrow, H1, sub.
   Aliased to one rule:

     .pr-hero       (patient pages)
     .shop-hero     (Shop)
     .pay-hero      (Payments)
     .legal-hero    (Legal — Ivory bg variant)
     .slim-hero     (canonical for new pages)

   Background and rule color stay per-page (set in their own
   CSS). This rule unifies padding, max-width, vertical rule
   geometry, H1 scale, and sub width.
   ============================================================ */

.pr-hero,
.shop-hero,
.pay-hero,
.legal-hero,
.slim-hero {
  padding-top: 96px;
  padding-bottom: 64px;
}
@media (max-width: 767px) {
  .pr-hero,
  .shop-hero,
  .pay-hero,
  .legal-hero,
  .slim-hero {
    padding-top: 64px;
    padding-bottom: 48px;
  }
}

.pr-hero-inner,
.shop-hero-inner,
.pay-hero-inner,
.legal-hero-inner,
.slim-hero-inner {
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  /* Gutters match .section-inner (24 / 48 / 80) so hero copy lines up with
     the body copy below it instead of sitting 56px further left. */
  padding-left: 80px;
  padding-right: 80px;
  position: relative;
}
@media (max-width: 1023px) {
  .pr-hero-inner,
  .shop-hero-inner,
  .pay-hero-inner,
  .legal-hero-inner,
  .slim-hero-inner { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 767px) {
  .pr-hero-inner,
  .shop-hero-inner,
  .pay-hero-inner,
  .legal-hero-inner,
  .slim-hero-inner { padding-left: 24px; padding-right: 24px; }
}

.pr-hero h1,
.shop-hero h1,
.pay-hero h1,
.legal-hero h1,
.slim-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 20px;
  max-width: 22ch;
}
@media (max-width: 767px) {
  .pr-hero h1,
  .shop-hero h1,
  .pay-hero h1,
  .legal-hero h1,
  .slim-hero h1 {
    font-size: 38px;
    line-height: 1.1;
  }
}

/* Sub-paragraph width unified at 60ch */
.pr-hero-sub,
.shop-hero-sub,
.pay-hero-sub,
.legal-hero .last-updated,
.slim-hero-sub {
  max-width: 60ch;
}


/* ============================================================
   4) EYEBROW ON LIGHT SURFACES — flagged contrast contradiction
   ============================================================
   The spec lists "accent/aqua #7FC0C4" as the eyebrow color.
   #7FC0C4 on Ivory measures 1.91:1 — below WCAG AA Large (3:1)
   and well below the spec's own 4.5:1 minimum. The spec also
   says "Sea Teal #2D7F83 on Ivory = 4.45:1 → AA Large + UI
   only" — explicitly allowed for UI labels.

   Most pages already silently swap eyebrow color to Sea Teal
   on light surfaces. We formalize it here:

     On Ivory / Pearl / Mint surfaces  → Sea Teal
     On Deep Teal surfaces             → Aqua Mist (per spec)

   The Deep-Teal-background heroes (.pr-hero, .shop-hero,
   .pay-hero, .gc-hero) already set color: var(--c-aqua) on
   their eyebrows — leave them alone.
   ============================================================ */

/* DEFAULT eyebrow color is now Sea Teal. The site's surfaces are
   light (Ivory/Pearl/Mint) almost everywhere; Aqua Mist at 1.91:1
   fails AA on all of them. The audited exceptions below re-assert
   Aqua on the Deep-Teal surfaces, and gold/photo-card eyebrows
   keep their higher-specificity page rules. */
.eyebrow { color: var(--c-sea-text); }
.eyebrow::before { background: var(--c-sea-text); }

/* Deep-Teal surfaces keep Aqua Mist (per spec: aqua on deep teal). */
.footer .eyebrow,
.nl-bottom .eyebrow,
.au-quote .eyebrow,
.gc-final .eyebrow,
.pay-consult .eyebrow,
.pr-consult .eyebrow,
.pr-section--deep .eyebrow,
.closer .eyebrow {
  color: var(--c-aqua);
}
.footer .eyebrow::before,
.nl-bottom .eyebrow::before,
.au-quote .eyebrow::before,
.gc-final .eyebrow::before,
.pay-consult .eyebrow::before,
.pr-consult .eyebrow::before,
.pr-section--deep .eyebrow::before,
.closer .eyebrow::before {
  background: var(--c-aqua);
}

/* Light-surface section eyebrows get Sea Teal — this matches
   the AA-compliant production behavior already in use on
   blog featured cards, legal hero, and gc-how. */
/* --c-sea measures 4.34:1 on Ivory, 4.21:1 on Pearl and 3.75:1 on Mint —
   all short of the 4.5:1 these 13px labels need. --c-sea-text (set as the
   default at the top of this section) clears it on every light surface;
   these selectors were overriding it back down. Rule keeps --c-sea, which
   is decorative and only needs 3:1. */
.section-head .eyebrow,
.pr-section-head .eyebrow,
.pay-accepted-head .eyebrow,
.pay-financing-head .eyebrow,
.gc-how-head .eyebrow,
.gc-uses .eyebrow,
.t-about-head .eyebrow,
.t-faqs-head .eyebrow,
.t-pairs-head .eyebrow,
.t-expect-head .eyebrow,
.t-menu-section-head .eyebrow {
  color: var(--c-sea-text);
}
.section-head .eyebrow::before,
.pr-section-head .eyebrow::before,
.pay-accepted-head .eyebrow::before,
.pay-financing-head .eyebrow::before,
.gc-how-head .eyebrow::before,
.gc-uses .eyebrow::before,
.t-about-head .eyebrow::before,
.t-faqs-head .eyebrow::before,
.t-pairs-head .eyebrow::before,
.t-expect-head .eyebrow::before,
.t-menu-section-head .eyebrow::before {
  background: var(--c-sea);
}


/* ============================================================
   5) SECTION-LEVEL HEADER REGULARITY
   ============================================================
   Section heads across the site had drifting margin-bottoms
   (40, 48, 56, 64, 80). The site.css canonical .section-head
   uses no explicit gap; page-specific heads added their own.
   Lock to one cadence: 56px desktop, 40px mobile.
   ============================================================ */
.pr-section-head,
.pay-accepted-head,
.pay-financing-head,
.gc-how-head,
.gc-uses-inner,
.t-about-head,
.t-faqs-head,
.t-pairs-head,
.t-expect-head,
.t-menu-section-head {
  margin-bottom: 56px;
}
@media (max-width: 767px) {
  .pr-section-head,
  .pay-accepted-head,
  .pay-financing-head,
  .gc-how-head,
  .gc-uses-inner,
  .t-about-head,
  .t-faqs-head,
  .t-pairs-head,
  .t-expect-head,
  .t-menu-section-head {
    margin-bottom: 40px;
  }
}


/* ============================================================
   6) HEADER — centered-logo, two-row layout
   ============================================================
   Sits over site.css's header. Restructures the bar from
   [logo · flat nav · button] (single row, justify-between)
   to:

     Row 1  [ tagline ......................... Book a Visit ]
            ─────────────────── hairline ───────────────────
     Row 2  [ nav-left  ····  LOGO  ····  nav-right          ]

   The header itself stays sticky + Ivory + hairline-bottom
   (per spec; no glassmorphism). Increased z-index, no blur.

   Mobile (<1024px): the top row collapses entirely and the
   bottom row falls back to logo + hamburger. Mobile sticky
   CTA bar continues to host "Book a Visit" + "Text Us".
   ============================================================ */

/* --- Top row ------------------------------------------------ */
.header-top {
  border-bottom: 1px solid var(--c-stone);
  background: var(--c-ivory);
}
.header-top-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* The tagline — Playfair italic, not eyebrow caps. Spec allows
   Sea Teal for UI labels (4.45:1 on Ivory). */
.header-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--c-sea-text);
}

/* Compact the Book a Visit button in the top row so the row
   reads as a slim ledger, not a CTA strip.

   It also renders as an outline rather than a fill: the hero already
   carries a filled "Book a Visit" and the floating rail carries a filled
   Book orb, so three identical primaries competed above the fold and none
   of them won. Same action, still one tap away — just visually
   subordinate to the hero. */
.header-top .btn,
.header-top .btn-primary {
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.header-top .btn-primary {
  background: transparent;
  color: var(--c-deep);
  box-shadow: inset 0 0 0 1.5px var(--c-deep);
}
@media (hover: hover) and (pointer: fine) {
  .header-top .btn-primary:hover {
    background: var(--c-deep);
    color: var(--c-ivory);
  }
}

/* --- Bottom row (centered logo) ----------------------------- */
/* Override site.css's flex layout with a 3-column grid so the
   logo lands in the optical center regardless of nav width. */
.header .header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 144px;
}

/* Both halves of nav use the existing .nav flex rules from
   site.css; we just constrain their alignment so they hug the
   logo. */
.nav.nav-left {
  justify-self: end;
  gap: 28px;
  flex-wrap: nowrap;
}
.nav.nav-right {
  justify-self: start;
  gap: 28px;
  flex-wrap: nowrap;
}

/* Logo sits in the center column, prominently sized so it
   carries the brand on every page without needing copy under
   it. The height here is the final word — site.css's smaller
   default is overridden via the body-selector specificity. */
.header .logo {
  justify-self: center;
}
body .header .logo img.logo-img {
  height: 120px;
}

/* Hamburger lives in the right grid cell on mobile only.
   On desktop it stays hidden (per site.css). */

/* --- Tablet (1024–1279): scale the nav text down a hair so
       8 items + logo fit without wrapping. ----------------- */
@media (max-width: 1279px) {
  .nav.nav-left,
  .nav.nav-right { gap: 20px; }
  .nav.nav-left .nav-item,
  .nav.nav-right .nav-item { font-size: 14px; }
  body .header .logo img.logo-img { height: 96px; }
  .header .header-inner { padding: 0 32px; }
}

/* --- Mobile (<1024px): collapse to logo + hamburger -------- */
@media (max-width: 1023px) {
  .header-top { display: none; }
  .header .header-inner {
    grid-template-columns: 1fr auto;
    height: 88px;
    padding: 0 20px;
  }
  /* Left and right nav blocks are already display:none via
     site.css's `.nav { display: none }` mobile rule — re-assert
     to be safe and also clear their justify-self so they don't
     reserve grid cells. */
  .nav.nav-left,
  .nav.nav-right { display: none; }
  .header .logo { justify-self: start; }
  body .header .logo img.logo-img { height: 64px; }
  .header .hamburger { justify-self: end; }
}

/* Dropdown anchored from a nav-right item opens with its right
   edge aligned to the trigger so it never slides off-screen.
   site.css's .dropdown uses left:0 — flip on nav-right. */
.nav.nav-right .nav-group .dropdown {
  left: auto;
  right: 0;
}
.nav.nav-right .nav-group .dropdown::before {
  left: auto;
  right: 24px;
}