/* BCB global site footer
   Loaded sitewide via bcb_enqueue_footer_assets() in functions.php.
   Targets footer.php markup. Five stacked regions inside a
   1180px container on a navy band (#293448). */

.site-foot {
  background: #293448;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 28px 32px 18px;
}
.site-foot__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Reset list styling */
.site-foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Link defaults */
.site-foot a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: color 120ms ease;
}
.site-foot a:hover,
.site-foot a:focus {
  color: #ffffff;
}
.site-foot a:focus-visible {
  outline: 3px solid rgba(194, 99, 138, 0.35);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Region 1: brand + contact column | CTA column ─── */
.site-foot__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 720px) {
  .site-foot__top { grid-template-columns: 1fr; }
}

.site-foot__brand { max-width: 520px; }
.site-foot__logo {
  width: auto; height: 68px;
  max-width: 300px;
  display: block;
  margin: 0 0 14px;
}
.site-foot__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
}
.site-foot__subtitle {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 4px 0 0;
}
.site-foot__desc {
  margin: 12px 0 16px;
  max-width: 460px;
}
/* Full-width variant: brand description spans the container,
   independent of the brand/CTA two-column row above it. */
.site-foot__desc--full {
  margin: 14px 0 0;
  max-width: none;
  text-align: left;
  padding: 2px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* Contact phone row — 4 columns on desktop, stacked label+value */
.site-foot__contact {
  margin: 0;
  display: grid;
  gap: 4px;
}
.site-foot__contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 12px;
}
.site-foot__contact-row dt {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.83);
}
.site-foot__contact-row dd {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.site-foot__contact-row a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
/* qa: phone block hugs the right edge and drops toward the divider (desktop) */
@media (min-width: 721px) {
  .site-foot__top .site-foot__contact { justify-self: end; align-self: end; }
  .site-foot__top .site-foot__contact-row { grid-template-columns: auto auto; column-gap: 14px; justify-content: end; }
}
/* --row modifier: 4-column desktop, 2-column tablet, 1-column phone.
   Each phone row's label sits ABOVE the value (stacked) so the
   row reads as a column. */
.site-foot__contact--row {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}
.site-foot__contact--row .site-foot__contact-row {
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: start;
}
.site-foot__contact--row .site-foot__contact-row dt {
  color: rgba(255, 255, 255, 0.83);
}
@media (max-width: 860px) {
  .site-foot__contact--row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site-foot__contact--row { grid-template-columns: 1fr; gap: 8px; }
}

.site-foot__secure { margin: 0; }
.site-foot__secure a {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
}
.site-foot__secure a:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.83); }

/* CTA column */
.site-foot__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 721px) {
  .site-foot__cta { align-items: flex-end; }
}
.site-foot__cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c2638a;
  color: #ffffff !important;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 120ms ease, transform 120ms ease;
}
.site-foot__cta-pill:hover,
.site-foot__cta-pill:focus { background: #a85478; transform: translateY(-1px); }
.site-foot__cta-sub {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ─── Region 2: link columns (legacy — kept for compat) ─── */
.site-foot__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-foot__col-title {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 10px;
}
.site-foot__col ul { display: grid; gap: 6px; }
.site-foot__col li { margin: 0; }
.site-foot__col a { font-size: 13.5px; }

/* ─── Region 2 (menu variant): category disclosure ───────────
   4 native <details>/<summary> elements in a row on desktop.
   Each summary is the category title; click to expand items
   beneath it. Independent toggles (multi-open). No JS needed. */
.site-foot__nav--menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-foot__nav-cat {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 16px;
}
.site-foot__nav-cat:first-child { padding-left: 0; }
.site-foot__nav-cat:last-child { border-right: 0; padding-right: 0; }
.site-foot__nav-cat-title {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  transition: color 120ms ease;
}
.site-foot__nav-cat-title::-webkit-details-marker { display: none; }
.site-foot__nav-cat-title::marker { content: ''; }
.site-foot__nav-cat-title::after {
  content: '+';
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.83);
  transition: transform 200ms ease, color 120ms ease;
  line-height: 1;
}
.site-foot__nav-cat[open] > .site-foot__nav-cat-title::after {
  transform: rotate(45deg);
  color: var(--pink-300, #f3b5c8);
}
.site-foot__nav-cat-title:hover { color: #ffffff; }
.site-foot__nav-cat-title:hover::after { color: #ffffff; }
.site-foot__nav-cat-title:focus-visible {
  outline: 2px solid rgba(194, 99, 138, 0.5);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-foot__nav-cat-list {
  list-style: none;
  padding: 8px 0 4px;
  margin: 0;
  display: grid;
  gap: 6px;
}
.site-foot__nav-cat-list li { margin: 0; }
.site-foot__nav-cat-list a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.site-foot__nav-cat-list a:hover { color: #ffffff; }

@media (max-width: 720px) {
  .site-foot__nav--menu {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .site-foot__nav-cat {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
  }
  .site-foot__nav-cat:last-child { border-bottom: 0; }
}

/* ─── Region 3: office locations grid ─── */
.site-foot__offices {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-foot__offices-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.site-foot__offices-eyebrow {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}
.site-foot__offices-see-all {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.site-foot__offices-see-all:hover { color: #ffffff; }
.site-foot__offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.site-foot__office {
  display: block;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
a.site-foot__office:hover,
a.site-foot__office:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(194, 99, 138, 0.4);
  transform: translateY(-1px);
}
.site-foot__office-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 3px;
  line-height: 1.25;
}
.site-foot__office-sub {
  display: inline-block;
  margin-left: 6px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.83);
}
.site-foot__office-addr {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.site-foot__office-addr em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.83);
}
.site-foot__office--also {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
}
.site-foot__office--also .site-foot__office-name { color: rgba(255, 255, 255, 0.85); }

/* ─── Region 4: legal strip + version ─── */
.site-foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-foot__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.site-foot__legal-links li { margin: 0; position: relative; padding-right: 14px; }
.site-foot__legal-links li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: 0;
  color: rgba(255, 255, 255, 0.78);
}
.site-foot__legal-links a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}
.site-foot__legal-links a:hover { color: #ffffff; }
.site-foot__version {
  font-family: var(--font-accent);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* ─── Region 5: copyright + brand reset ─── */
.site-foot__copy {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.83);
  margin: 0;
  padding-top: 8px;
}
.site-foot__brand-reset-wrap {
  text-align: center;
  margin: 4px 0 0;
}
.site-foot__brand-reset {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.83);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 2px;
}
.site-foot__brand-reset:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.5); }

/* Mobile tightening */
@media (max-width: 720px) {
  .site-foot { padding: 32px 24px 20px; }
  .site-foot__inner { gap: 20px; }
  .site-foot__top { padding-bottom: 20px; }
  .site-foot__nav { padding-bottom: 20px; gap: 20px; }
  .site-foot__offices { padding-bottom: 20px; }
  .site-foot__offices-grid { grid-template-columns: 1fr; }
  .site-foot__legal { justify-content: center; }
  .site-foot__legal-links { justify-content: center; }
  .site-foot__version { width: 100%; text-align: center; }
}

/* Remove the placeholder fallback markup from the prior footer
   in case any cached page still emits it. */
.site-footer__fallback { display: none; }

/* Shared footer-ombré tokens — ONE source of truth for the page→footer
   dissolve, reused by (a) the global Case-A band (.footer-ombre-blend) and
   (b) the per-page Case-B closer bands (each spoke's .<closer>::before).
   Ramp ends --navy-700 (#293448) = the LIVE footer; alpha-fades the navy,
   never the `transparent` keyword (that greys the ramp). L-044. */
:root {
  --footer-ombre-ramp: linear-gradient(180deg,
    rgba(41, 52, 72, 0)    0%,
    rgba(41, 52, 72, 0.30) 40%,
    rgba(41, 52, 72, 0.62) 68%,
    rgba(41, 52, 72, 0.90) 86%,
    var(--navy-700)        100%);
  --footer-ombre-band-h: clamp(240px, 30vh, 380px);  /* Case-B closer band height */
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER OMBRÉ — sitewide page→footer dissolve (canonical mechanism)
   ─────────────────────────────────────────────────────────────────
   Replaces the hard edge where page content meets the navy footer with
   a transparent→navy ramp, so every page dissolves into .site-foot.

   MECHANISM: footer.php emits ONE <div class="footer-ombre-blend"
   aria-hidden> immediately before <footer class="site-foot">. It sits in
   normal flow after #content and is pulled UP with a negative margin so
   its transparent→navy ramp overlaps the tail of the page. #content is
   lifted to z-index:1 so the page's own (opaque) cards and text paint
   ABOVE the blend and stay readable; the blend shows through the
   transparent gutters between them, darkening to navy at the footer.

   Generalizes the proven page-scoped LMS treatment
   (low-milk-supply.css .lms-footer-blend) — same in-flow + negative
   margin model, de-scoped via the template + a generic wrapper lift.

   TARGET-ENV: the ramp ends at --navy-700 (#293448) = the LIVE
   .site-foot color, NOT the handoff prototype #1F2D40, or it seams
   (L-044). One navy hue throughout (no muddy grey midpoint).

   NOT every page wants it — the blend is OPT-IN (default off; enabled
   per slug below). See the OPT-IN block further down for the Case A /
   Case B / content-heavy reasoning learned on staging.
   ═══════════════════════════════════════════════════════════════════ */

/* Generic content lift: the page's real (opaque) content paints above
   the blend; transparent gutters let the ramp show through behind it. */
#content {
  position: relative;
  z-index: 1;
}

/* The dissolve band. Full-bleed, behind #content, pulled up to overlap
   the page tail; ramps from transparent into the live footer navy. */
.footer-ombre-blend {
  position: relative;
  z-index: 0;                                 /* behind the lifted #content */
  height: clamp(385px, 53vh, 700px);
  margin-top: clamp(-300px, -35vh, -470px);   /* pull up behind the page tail */
  margin-bottom: -1px;                        /* sit flush on the footer, no seam */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(41, 52, 72, 0)    0%,
    rgba(41, 52, 72, 0.30) 40%,
    rgba(41, 52, 72, 0.62) 68%,
    rgba(41, 52, 72, 0.90) 86%,
    var(--navy-700)        100%
  );
}

/* Footer hairline + paint order: a 1px light rule so the dark blend and
   the dark footer read as two related-but-distinct zones. Additive to
   the .site-foot rule above; now global (was page-scoped on LMS). */
.site-foot {
  position: relative;
  z-index: 2;                                 /* footer paints above the blend */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── OPT-IN model (the blend is page-structure-dependent) ──────────
   Staging review (2026-06-05) showed one always-on global blend can't
   serve every page:
     • Case A, light ending (low-milk-supply, founder) → looks great.
     • Case B, navy .gs/CTA closer (services, feeding-lactation-care, the
       insurance spokes) → the closer already ramps to --navy-700 and
       meets the footer seamlessly; the blend's transparent top, sitting
       AFTER the closer, reveals the lighter fixed body gradient and makes
       a navy→light→navy RIPPLE. The closer IS the dissolve; no blend.
     • Case A but content-heavy bottom (homepage: offices grid + art
       teaser) → the -35vh reach darkens real content. Needs bespoke tuning.
   So the blend is OFF by default and ENABLED per page after a staging
   eyeball. Add a slug to the enable list below as each page is verified.
   Un-enabled pages keep their existing clean ending (no regression). */
.footer-ombre-blend { display: none; }
body.page-low-milk-supply        .footer-ombre-blend,
body.page-plugged-ducts-mastitis .footer-ombre-blend,  /* Case A, light ending (2026-06-06) */
body.page-painful-breastfeeding  .footer-ombre-blend,   /* Case A, light ending (2026-06-07) */
body.page-providers              .footer-ombre-blend,   /* Case A, light ending (2026-06-07) */
body.page-founder                .footer-ombre-blend,
body.page-inside-our-offices     .footer-ombre-blend,
body.page-home-visits            .footer-ombre-blend,
body.page-locations              .footer-ombre-blend,   /* Case A, light closer (2026-06-08) */
body.page-houston-area           .footer-ombre-blend,   /* Case A, light closer (2026-06-08) */
body.page-homepage               .footer-ombre-blend,   /* Case A, light bottom (2026-06-15: offices+M&C flipped light) */
body.fs-page                     .footer-ombre-blend {  /* family-stories hub + 5 children */
  display: block;
}
/* CASE B (page ends in a CTA) does NOT use this global after-content band.
   Those pages keep the band IN-PAGE, directly above a flat navy CTA block
   (per the claude.ai/design "dark fade into the footer" spec) — see each
   spoke's own .gs closer CSS (e.g. feeding-lactation-care.css). The global
   band stays hidden on them (they're simply not in the enable list above). */

/* ── Shared carrier/fullscript CTA (WP synced pattern ref:497, `.bcb-final-cta`) ──
   The 9 carrier pages + fullscript embed one synced pattern whose navy styling
   lives in the block's OWN inline <style>. Flip it to a LIGHT frosted card here
   (loaded sitewide; only matches where the pattern renders). Higher specificity
   than the block's `.bcb-final-cta` rules, so this wins without touching WP.
   Blend is enabled on those pages from insurance-carrier.css + fullscript.css. */
body .bcb-final-cta { background: transparent; color: var(--navy-500); padding: clamp(48px,7vw,80px) 24px; }
body .bcb-final-cta__inner {
  max-width: 720px; margin: 0 auto;
  background: var(--card-lift-bg); -webkit-backdrop-filter: var(--card-lift-blur); backdrop-filter: var(--card-lift-blur);
  border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-xl);
  padding: clamp(40px,5.5vw,60px) clamp(28px,4vw,48px); box-shadow: 0 18px 50px -28px rgba(41,52,72,0.35);
}
body .bcb-final-cta__title { color: var(--navy-700); }
body .bcb-final-cta__body { color: var(--navy-500); }
body .bcb-final-cta .btn { background: var(--pink-500); color: #fff; }
body .bcb-final-cta .btn:hover { background: var(--pink-600); color: #fff; }
body .bcb-final-cta__sub { color: var(--navy-400); }
/* Enable the Case-A fade on any page that renders the synced CTA (carriers,
   fullscript) — keyed off the pattern itself, since carrier slugs vary
   (page-cigna, page-bcbs, …) and don't share a class prefix. */
body:has(.bcb-final-cta) .footer-ombre-blend { display: block; }
/* Location detail pages (9 CPT pages) — light .lc-final closer flipped from navy
   2026-06-08; keyed off the closer itself since each page's slug body class
   varies (page-lactation-consultant-kingwood, …). */
body:has(.lc-final) .footer-ombre-blend { display: block; }