/* ============================================================
   Family & Lifestyle Medicine — Utility bar, sticky header, primary nav and mobile bottom bar
   Part 04 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--slate-deep);
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; flex-wrap: wrap;
}
.utility-bar__contacts { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.utility-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: inherit; transition: color .2s var(--ease);
}
.utility-link svg { width: 15px; height: 15px; fill: currentColor; opacity: .7; }
a.utility-link:hover { color: #fff; }
.utility-bar__social { display: flex; align-items: center; gap: 1.1rem; }
.utility-bar__social a { color: rgba(255, 255, 255, .78); transition: color .2s var(--ease); }
.utility-bar__social svg { width: 19px; height: 19px; fill: currentColor; }
.utility-bar__social a:hover { color: #fff; }

/* Portal login reads as an action, not another phone number. */
.utility-link--portal {
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: .22rem .85rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.utility-bar__social .utility-link--portal svg { width: 14px; height: 14px; opacity: .75; }
.utility-link--portal:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .09);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
/* The glass layer lives on a pseudo-element deliberately: backdrop-filter on
   the header itself would make it the containing block for the position:fixed
   mobile drawer, trapping the drawer inside the header's box. */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(250, 247, 242, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header.is-stuck::before {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .85rem;
  transition: padding .3s var(--ease);
}
.site-header.is-stuck .site-header__inner { padding-block: .55rem; }

/* Horizontal lockup (~4.7:1), so it needs far less height than the stacked
   mark did — height drives width here, and the nav needs the room. */
.brand img {
  height: clamp(34px, 3.6vw, 46px); width: auto;
  transition: height .3s var(--ease);
}
.site-header.is-stuck .brand img { height: clamp(30px, 3.1vw, 40px); }

/* Three-part header: logo left, links centred in the space between, actions right.
   Six top-level links leave roughly 150px spare at 1280px, so the gaps are fluid —
   they tighten on smaller laptops and keep the flat nav intact down to ~1064px.
   Below the drawer breakpoint none of this applies. */
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.5rem); flex: 1; }
.nav__list {
  display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.6rem); flex-wrap: nowrap;
  flex: 1; justify-content: center;
}
/* The logo must never be squeezed to make room for links. */
.brand { flex: none; }
.nav__list a {
  color: var(--slate-deep);
  font-weight: 500;
  font-size: .88rem;
  white-space: nowrap;
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__list a:hover { color: var(--crimson); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.nav__cta .btn { white-space: nowrap; }

.nav__donate {
  color: var(--slate-deep);
  font-weight: 500;
  font-size: .88rem;
  white-space: nowrap;
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
.nav__donate::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__donate:hover { color: var(--crimson); }
.nav__donate:hover::after { transform: scaleX(1); transform-origin: left; }


/* Current page marker, so the nav shows where you are across the site. A filled
   block rather than a rule under the word: the text stays upright while the
   block behind it skews, which is what produces the diagonal edges. */
.nav__list a[aria-current="page"],
.nav__donate[aria-current="page"] {
  color: #fff;
  /* Own stacking context, so the z-index: -1 fill sits behind the label without
     dropping behind the header's glass layer. */
  isolation: isolate;
}
/* Hover turns every other link crimson; here that would be crimson on crimson. */
.nav__list a[aria-current="page"]:hover,
.nav__donate[aria-current="page"]:hover { color: #fff; }
/* The sliding underline is the cue for the other links; the fill replaces it. */
.nav__list a[aria-current="page"]::after,
.nav__donate[aria-current="page"]::after { display: none; }
.nav__list a[aria-current="page"]::before,
.nav__donate[aria-current="page"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Bleeds past the label into the gap. The skew adds roughly 3px of reach at
     each corner on top of the inset, so both are kept small enough that the
     block still clears its neighbours at 1081px — the tightest the row gets
     before it collapses into the drawer. */
  inset: -.34rem -.5rem;
  background: var(--grad-crimson);
  border-radius: 5px;
  transform: skewX(-12deg);
  box-shadow: 0 7px 16px -9px rgba(155, 27, 47, .6);
}

/* ============================================================
   Mobile bottom navigation
   Replaces the side drawer below 1081px. The drawer put every destination two
   taps away behind a hamburger in the top corner — the far end of the screen
   from where a thumb rests. A fixed bar puts five of them one tap away in the
   reachable zone, and it is always on screen, so the nav is a persistent part
   of the page rather than something you have to go and open.

   Five slots is the ceiling before targets fall under 44px on a 320px screen,
   so the bar carries the two things a clinic is actually asked for — joining
   and phoning — plus Home and Services. The remaining six pages live in the
   More sheet. That sheet is deliberately not the old drawer wearing a new
   coat: it opens from the same edge the thumb is already at, it sits on the
   bar rather than covering it, and the button that opened it stays visible
   and live so the same tap closes it.

   The bar is hidden entirely at desktop widths (10-responsive.css), where the
   inline header nav takes over.
   ============================================================ */
/* Both are mobile-only, and every rule that gives them layout lives inside the
   media query below. Without these two the sheet's markup would render as a
   loose list of links under the footer at desktop widths. */
.tabbar, .sheet { display: none; }

@media (max-width: 1080px) {
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 110;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* The inset keeps the row above the iPhone home indicator. It resolves to
       0px on every other device, so the bar is exactly --tabbar-h there.
       Requires viewport-fit=cover on the viewport meta, which every page sets. */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -20px rgba(41, 68, 81, .6);
  }

  .tabbar__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem;
    background: none; border: 0;
    font-family: var(--font-body);
    font-size: .66rem; font-weight: 600; letter-spacing: .015em;
    line-height: 1.1;
    color: var(--muted);
    text-align: center;
    /* Grey flash on tap reads as a bug next to the scale-down below. */
    -webkit-tap-highlight-color: transparent;
    transition: color .22s var(--ease);
  }
  .tabbar__icon {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    transition: transform .25s var(--ease);
  }
  .tabbar__icon svg {
    width: 23px; height: 23px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* Three round caps on a zero-length path, so the "More" glyph is dots rather
     than another set of bars — a stack of lines here would read as the
     hamburger this bar exists to replace. */
  .tabbar__icon--dots svg { stroke-width: 2.9; }
  /* The only press feedback available on a device with no hover state. */
  .tabbar__item:active .tabbar__icon { transform: scale(.86); }

  /* Current page. .is-active is for the More button, which stands in for
     whichever of its six pages you are on; [aria-expanded] colours it while
     its sheet is open, so the control you just pressed stays lit and reads as
     the thing the panel belongs to. */
  .tabbar__item[aria-current="page"],
  .tabbar__item[aria-expanded="true"],
  .tabbar__item.is-active { color: var(--crimson); }
  /* The row of dots turns upright as the sheet opens. It is the same trick the
     hamburger used — the glyph itself reports the state — and it means the
     button reads as "pressed, press again" rather than as an inert label. */
  .tabbar__item[aria-expanded="true"] .tabbar__icon { transform: rotate(90deg); }
  .tabbar__item[aria-current="page"]::before,
  .tabbar__item.is-active::before {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: 28px; height: 3px; margin-left: -14px;
    background: var(--grad-crimson);
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
    animation: tab-mark .5s var(--ease) .12s both;
  }
  @keyframes tab-mark { to { transform: scaleX(1); } }

  /* --- The join CTA ---
     Raised out of the row because it is the one slot that is a conversion
     rather than a destination, and because a bar of five identical glyphs has
     no focal point. outline rather than border draws the ring without adding
     to the box, so the circle stays centred in its column. */
  .tabbar__item--cta { color: var(--crimson-deep); }
  .tabbar__item--cta .tabbar__icon {
    width: 52px; height: 52px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--grad-crimson);
    color: #fff;
    box-shadow: var(--shadow-crimson);
    outline: 4px solid rgba(255, 255, 255, .94);
  }
  .tabbar__item--cta .tabbar__icon svg { width: 24px; height: 24px; stroke-width: 1.85; }
  .tabbar__item--cta:active .tabbar__icon { transform: scale(.93); }

  /* Arrives with the page instead of being there before it. */
  @media (prefers-reduced-motion: no-preference) {
    .tabbar { animation: tabbar-in .55s var(--ease) .2s both; }
    @keyframes tabbar-in { from { transform: translateY(105%); } to { transform: translateY(0); } }
  }

  /* ---------- More sheet ---------- */
  .sheet {
    display: block;
    position: fixed; inset: 0;
    z-index: 108;
    visibility: hidden;
    /* Delayed so the panel can slide back down before the sheet is taken out
       of the accessibility tree; zeroed again when open so it appears at once. */
    transition: visibility 0s linear .38s;
  }
  .sheet.is-open { visibility: visible; transition-delay: 0s; }

  .sheet__scrim {
    position: absolute; inset: 0;
    background: rgba(28, 51, 61, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .sheet.is-open .sheet__scrim { opacity: 1; }

  .sheet__panel {
    position: absolute; left: 0; right: 0;
    /* Rests on the bar's top edge rather than over it, so the More button that
       opened the sheet stays visible and live to close it again. */
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    padding: .8rem 1.15rem 1.4rem;
    background: var(--white);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -24px 50px -30px rgba(41, 68, 81, .55);
    transform: translateY(100%);
    transition: transform .38s var(--ease);
  }
  .sheet.is-open .sheet__panel { transform: translateY(0); }
  /* Takes focus on open so the keyboard follows the sheet. The sheet appearing
     is the visual feedback; a ring around the whole panel would only be noise. */
  .sheet__panel:focus { outline: none; }

  .sheet__grip {
    display: block; width: 42px; height: 4px;
    margin: 0 auto .9rem;
    border-radius: 999px;
    background: var(--line);
  }
  .sheet__title {
    font-family: var(--font-display);
    font-size: 1.3rem; font-weight: 600; color: var(--ink);
    margin-bottom: .85rem;
  }

  .sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .sheet__grid a {
    display: flex; align-items: center;
    min-height: 54px;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--grad-surface);
    color: var(--slate-deep);
    font-weight: 600; font-size: .92rem; line-height: 1.25;
    transition: transform .2s var(--ease), border-color .2s var(--ease);
  }
  .sheet__grid a:active { transform: scale(.97); }
  .sheet__grid a[aria-current="page"] {
    background: var(--grad-crimson);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-crimson);
  }
  /* Walks the tiles in behind the panel, on the same `rise` the rest of the
     site uses, so the sheet unpacks rather than appearing fully formed. */
  @media (prefers-reduced-motion: no-preference) {
    .sheet.is-open .sheet__grid a { animation: rise .5s var(--ease) both; }
    .sheet.is-open .sheet__grid a:nth-child(1) { animation-delay: .10s; }
    .sheet.is-open .sheet__grid a:nth-child(2) { animation-delay: .15s; }
    .sheet.is-open .sheet__grid a:nth-child(3) { animation-delay: .20s; }
    .sheet.is-open .sheet__grid a:nth-child(4) { animation-delay: .25s; }
    .sheet.is-open .sheet__grid a:nth-child(5) { animation-delay: .30s; }
    .sheet.is-open .sheet__grid a:nth-child(6) { animation-delay: .35s; }
  }

  .sheet__portal {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: .9rem; padding-top: .95rem;
    border-top: 1px solid var(--line);
    color: var(--crimson); font-weight: 600; font-size: .92rem;
    min-height: 44px;
  }
  .sheet__portal svg { width: 17px; height: 17px; fill: currentColor; opacity: .8; }
}