/* ==========================================================================
   Bluebell Hospital — site header
   Concept: editorial masthead.
     Tier 1  masthead — logo · emergency · appointment CTA
     Tier 2  rail     — navigation, ruled top and bottom in the logo's own
                        periwinkle rather than grey
   On scroll the masthead collapses and the rail carries the brand, standing
   the petal mark in for the full lockup.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: var(--ground);
}

/* --------------------------------------------------------------------------
   1. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  height: var(--masthead-h);
  overflow: hidden;
  transition: height .32s var(--ease-out), opacity .2s var(--ease);
}

.site-header.is-stuck .masthead {
  height: 0;
  opacity: 0;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--masthead-h);
}

.masthead__brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
}

.brand img {
  height: 54px;
  width: auto;
}

/* NABH — a real certification, so it gets real space rather than being
   squeezed into the lockup where its wording is illegible. */
.accredit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.accredit img {
  height: 42px;
  width: auto;
}

.accredit__text { display: flex; flex-direction: column; gap: 2px; }

.accredit__label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}

.accredit__value {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}

.masthead__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
}

.masthead__rule {
  width: 1px;
  height: 38px;
  background: var(--rule);
}

.masthead__rule--brand { height: 44px; }

/* --------------------------------------------------------------------------
   2. Emergency — set as data, not as a button. A mono label over a tabular
      number reads as a fact you can rely on at 3am.
   -------------------------------------------------------------------------- */

.emergency {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emergency__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}

.emergency__pulse {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--green);
  border-radius: 50%;
}

.emergency__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.emergency__number {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  transition: color .18s var(--ease);
}

.emergency:hover .emergency__number { color: var(--indigo); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .22s var(--ease-out);
}

.btn:hover svg { transform: translateX(3px); }

/* The logo green (#00B657) only reaches 2.6:1 under white text; this deeper
   step of the same hue clears AA at 5.05:1 and reads more premium besides. */
.btn--book {
  background: var(--green-700);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 107, 49, .22);
}

.btn--book:hover {
  background: var(--green-800);
  box-shadow: 0 6px 18px -6px rgba(0, 128, 61, .5);
}

.btn--book:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   4. Nav rail
   -------------------------------------------------------------------------- */

.rail {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease);
}

.site-header.is-stuck .rail {
  border-top-color: transparent;
  box-shadow: var(--shadow-md);
}

/* No gap: the first nav item must sit flush with the container edge so it
   aligns dead-on with the logo above it. Spacing is set per item instead. */
.rail__inner {
  display: flex;
  align-items: center;
  height: var(--rail-h);
}

/* The petal mark stands in for the lockup once the masthead is gone. */
.rail__mark {
  flex: none;
  display: flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .32s var(--ease-out), opacity .24s var(--ease), margin .32s var(--ease-out);
}

.rail__mark img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.site-header.is-stuck .rail__mark {
  width: 34px;
  opacity: 1;
  margin-inline-end: 20px;
}

/* Never compress: shrinking the nav would let its list overflow and collide
   with whatever sits to its right. */
.nav { flex: 0 0 auto; }

.rail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
  padding-inline-start: 28px;
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: opacity .2s var(--ease);
}

.rail__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rail__item svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--indigo-400);
}

a.rail__item { transition: color .18s var(--ease); }
a.rail__item:hover { color: var(--indigo); }

/* The rail's only link. As plain grey text it was indistinguishable from the
   locality label beside it, so nothing marked cashless admission as something
   to click. The pill gives it a target's shape without competing with the
   Book Appointment CTA, which stays the rail's one solid button. */
a.rail__item--pill {
  padding: 4px 11px;
  border: 1px solid var(--indigo-100);
  border-radius: 999px;
  background: var(--indigo-50);
  color: var(--indigo);
  font-weight: 600;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

a.rail__item--pill:hover {
  background: var(--indigo-100);
  border-color: var(--indigo-200);
  color: var(--indigo-800);
}

.rail__call,
.rail__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity .24s var(--ease), transform .28s var(--ease-out), visibility .24s;
}

.rail__call {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding-inline-end: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.rail__call svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--indigo);
}

.rail__call:hover { color: var(--indigo); }

.rail__cta {
  flex: none;
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
}

/* Without a call element beside it, the button takes the auto margin. */
.rail__call + .rail__cta { margin-inline-start: 0; }

.site-header.is-stuck .rail__meta { display: none; }

.site-header.is-stuck .rail__call,
.site-header.is-stuck .rail__cta {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

.nav { min-width: 0; }

.nav__head,
.nav__foot { display: none; }

.nav__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item { display: flex; align-items: stretch; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  height: var(--rail-h);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .18s var(--ease);
}

.nav__item:first-child .nav__link { padding-inline-start: 0; }

.nav__link:hover,
.nav__item.is-open > .nav__link { color: var(--indigo); }

/* A 2px periwinkle rule that draws out from the centre — the only motion in
   the rail, and it belongs to the brand. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 15px;
  bottom: -1px;
  height: 2px;
  background: var(--indigo);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--ease-out);
}

.nav__item:first-child .nav__link::after { inset-inline-start: 0; }

.nav__link:hover::after,
.nav__item.is-open > .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--indigo);
  font-weight: 600;
}

.nav__caret {
  width: 11px;
  height: 11px;
  flex: none;
  opacity: .6;
  transition: transform .24s var(--ease);
}

.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   6. Panels
   -------------------------------------------------------------------------- */

.panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .26s var(--ease-out), visibility .2s;
}

.nav__item.is-open > .panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panel--mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
}

.panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 40px;
  padding-block: 30px 0;
}

.panel__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 28px;
}

.panel__heading {
  margin: 0 0 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.panel__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel__link {
  display: block;
  padding: 7px 10px;
  margin-inline-start: -10px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.panel__link:hover {
  background: var(--indigo-50);
  color: var(--indigo);
}

/* Featured department — a quiet block, not a card. */
.feature {
  position: relative;
  align-self: start;
  padding: 22px 24px 20px;
  background: var(--indigo-50);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.feature__mark {
  position: absolute;
  top: -26px;
  inset-inline-end: -26px;
  width: 116px;
  height: 116px;
  opacity: .11;
  pointer-events: none;
}

.feature__eyebrow {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo-600);
}

.feature__title {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
}

.feature__text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.feature__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.feature__stat strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
}

.feature__stat span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--indigo);
}

.feature__link svg {
  width: 14px;
  height: 14px;
  transition: transform .22s var(--ease-out);
}

.feature__link:hover svg { transform: translateX(3px); }

.panel__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding-block: 15px;
  border-top: 1px solid var(--rule-soft);
}

.panel__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
}

.panel__all svg {
  width: 15px;
  height: 15px;
  transition: transform .22s var(--ease-out);
}

.panel__all:hover svg { transform: translateX(3px); }

.panel__aside-link {
  font-size: 13.5px;
  color: var(--ink-3);
  transition: color .18s var(--ease);
}

.panel__aside-link:hover { color: var(--indigo); }

/* Gallery dropdown */
.panel--drop {
  position: absolute;
  top: 100%;
  inset-inline-start: 4px;
  min-width: 286px;
  padding: 8px;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.drop__list { margin: 0; padding: 0; list-style: none; }

.drop__link {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.drop__link small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}

.drop__link:hover { background: var(--indigo-50); color: var(--indigo); }
.drop__link:hover small { color: var(--indigo-600); }

/* --------------------------------------------------------------------------
   7. Mobile controls
   -------------------------------------------------------------------------- */

.icon-btn {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}

.icon-btn:hover {
  border-color: var(--indigo-400);
  color: var(--indigo);
  background: var(--indigo-50);
}

.icon-btn svg { width: 19px; height: 19px; }

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(27, 25, 80, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}

.nav-scrim.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   8. Below 1080 — purpose-built mobile navigation
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {

  /* One bar only. The masthead's contents move into the rail and the panel. */
  .masthead { display: none; }

  .rail {
    border-top: 0;
    box-shadow: var(--shadow-sm);
  }

  .rail__inner {
    gap: 10px;
    height: var(--header-h);
  }

  .rail__mark,
  .rail__meta,
  .rail__call,
  .rail__cta { display: none; }

  .icon-btn { display: grid; }
  .icon-btn--call { margin-inline-start: auto; }

  /* The lockup returns to the bar, since the masthead is gone. */
  .rail__inner::before {
    content: "";
    display: block;
    flex: none;
    width: 148px;
    height: 44px;
    background: url("../images/logo-lockup.png") left center / contain no-repeat;
  }

  /* Slide-in panel, wide enough to be a place rather than a strip. */
  .nav {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    width: min(430px, 92vw);
    height: 100dvh;
    background: var(--ground);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .34s var(--ease-out);
  }

  .nav.is-open { transform: translateX(0); }

  .nav__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 20px var(--gutter);
    border-bottom: 1px solid var(--rule);
  }

  .nav__head img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  .nav__head span {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.015em;
  }

  .nav__list {
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px var(--gutter) 24px;
  }

  .nav__item {
    display: block;
    border-bottom: 1px solid var(--rule-soft);
  }

  /* Serif at this size turns a list of links into a contents page. */
  .nav__link {
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 17px 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--ink);
  }

  .nav__item:first-child .nav__link { padding-inline-start: 0; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--indigo); }

  .nav__caret {
    width: 17px;
    height: 17px;
    opacity: .45;
  }

  /* Accordion. Collapsed panels have no height, so their links stay out of
     the tab order and the panel keeps scrolling normally. */
  .panel {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows .3s var(--ease-out);
  }

  .nav__item.is-open > .panel { grid-template-rows: 1fr; }

  /* No padding here. `overflow: hidden` clips to the padding box, so any
     bottom padding survives the collapse as a gap that leaks the first rows
     of the panel. Bottom spacing goes on the last child instead, where it
     gets clipped with everything else. */
  .panel__inner,
  .drop__list {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .panel__inner > :last-child,
  .drop__list > li:last-child { margin-bottom: 18px; }

  .panel__cols { display: block; }
  .panel__group + .panel__group { margin-top: 22px; }
  .panel__link { font-size: 15px; padding: 9px 10px; }
  .feature { display: none; }

  .panel__foot {
    display: block;
    margin-top: 22px;
    padding-bottom: 0;
  }

  .panel__aside-link { display: none; }

  .nav__foot {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: none;
    padding: 22px var(--gutter) 30px;
    border-top: 1px solid var(--rule);
    background: var(--ground-2);
  }

  .nav__foot .btn { width: 100%; height: 50px; }

  .nav__call {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .nav__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: center;
  }

  .nav__meta a { color: var(--indigo); font-weight: 500; }
}

@media (min-width: 1000px) {
  /* The mega spans the rail, so it measures against .rail; the small
     dropdown measures against its own item. */
  .nav__item--panel { position: relative; }
  .nav__item--panel:has(.panel--mega) { position: static; }
}

/* Tablet and small laptop — trim the rail before the breakpoint bites. */
@media (max-width: 1360px) and (min-width: 1000px) {
  /* Keep the icon, drop the digits: the link still dials. */
  .rail__call span { display: none; }
  .rail__call { padding-inline-end: 14px; }
}

@media (max-width: 1240px) and (min-width: 1000px) {
  .rail__meta { display: none; }
  .nav__link { padding-inline: 12px; font-size: 14px; }
  .brand img { height: 46px; }
  .accredit__text { display: none; }
}

@media (max-width: 560px) {
  .rail__inner::before { width: 128px; height: 38px; }
  .icon-btn { width: 40px; height: 40px; }
  .nav__link { font-size: 20px; }
}

@media (max-width: 380px) {
  .rail__inner::before { width: 114px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn + .icon-btn { margin-inline-start: 6px; }
}