/* ==========================================================================
   STILLMIND MENTAL HEALTH · HEADER
   A floating glass island, detached from the top edge, that compresses on
   scroll. Mobile first: the island is built for a phone and the full
   desktop row is added at 1280px, where it actually fits.

   Rules this file holds to:
   - The header never moves, never hides, never changes order. Someone who
     is anxious or distracted should never have to re-find the way out.
   - 988 is reachable from every viewport width without opening a menu.
   - backdrop-filter only on this fixed element, never on scrolling content.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--s-4) var(--gutter);
  pointer-events: none;   /* the island takes the pointer, not the gutter */

  /* The island settles closer to the top edge on scroll. Done with a
     translate rather than by animating padding: padding would relayout
     the header subtree on every frame of the transition, and it would
     do it while the page is scrolling, which is the worst moment. */
  transform: translate3d(0, 0, 0);
  transition: transform var(--d-slow) var(--ease-out-expo);
}

@media (min-width: 1240px) {
  .site-header {
    padding-top: var(--s-5);
    padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
  }
}

.site-header.is-scrolled { transform: translate3d(0, -5px, 0); }

/* --------------------------------------------------------------------
   The island
   -------------------------------------------------------------------- */

.nav-island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tight on a phone, where every pixel between the lockup and the
     actions is contested, and generous once there is room. */
  gap: var(--s-2);
  width: 100%;
  /* Deliberately wider than the page container on large screens. The full
     row does not fit inside 1220px any more, and widening the island is
     the only way to keep every destination without dropping one. The cost
     is that the logo no longer lines up with the content edge below it. */
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.625rem 0.85rem 0.625rem var(--s-4);
  border-radius: var(--r-pill);
  background: rgba(250, 248, 245, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--ring-hairline), var(--e-1);

  /* Colour and shadow only. Both are paint, neither triggers layout, so
     the island can change state mid-scroll without costing a frame. */
  transition:
    background-color var(--d-slow) var(--ease-out-expo),
    box-shadow var(--d-slow) var(--ease-out-expo);
}

/* Scrolled state reads through weight, not size: the glass turns more
   opaque and the shadow deepens, so the island separates from the page
   underneath it without the header ever changing height.

   Driven by a CSS scroll timeline rather than by JavaScript. No scroll
   events, no sentinel, no frame loop. Where animation-timeline is not
   supported the header simply keeps its resting appearance, which is a
   perfectly good header.

   The .is-scrolled class is kept as the manual equivalent so the states
   stay described in one place. */
.is-scrolled .nav-island {
  background: rgba(250, 248, 245, 0.9);
  box-shadow: var(--ring-hairline), var(--e-3);
}

@supports (animation-timeline: scroll()) {
  .nav-island {
    animation: island-settle linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 64px;
  }

  .site-header {
    animation: header-settle linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 64px;
  }
}

@keyframes island-settle {
  from {
    background-color: rgba(250, 248, 245, 0.72);
    box-shadow: var(--ring-hairline), var(--e-1);
  }
  to {
    background-color: rgba(250, 248, 245, 0.9);
    box-shadow: var(--ring-hairline), var(--e-3);
  }
}

@keyframes header-settle {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -5px, 0); }
}

/* With the menu open the island is transparent, so the timeline must not
   paint a background back onto it. */
.nav-open .nav-island { animation: none; }

/* Browsers without backdrop-filter get an opaque island rather than
   unreadable text over content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-island { background: var(--c-paper); }
  .is-scrolled .nav-island { background: var(--c-paper); }
}

/* With the menu open, the island sits on the overlay's own glass. Stacking
   two blurred surfaces goes muddy, so the island drops its background and
   simply floats. The lockup, 988 and the close button all stay put. */
.nav-open .nav-island {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.nav-open .menu-btn { background: rgba(22, 48, 43, 0.07); }

/* --------------------------------------------------------------------
   Lockup in the header

   MENTAL HEALTH is tracked out to span exactly the width of STILLMIND
   above it, so the two lines form a block rather than a heading with a
   caption. Because it is matched to the wordmark it never makes the
   lockup any wider, which is why it can stay on a phone.

   It does run small on a phone, around 10px. That is the trade for
   having it there at all: the alternative is a wider lockup, and the
   header has no width to give.

   Manrope stops at 800 and the wordmark is already set there, so the
   weight in this lockup comes from size, not from a heavier cut.
   -------------------------------------------------------------------- */

.nav-island .lockup { font-size: 2.75rem; }

.nav-island .lockup__name {
  font-size: 0.5em;
  letter-spacing: 0.035em;
}

/* Under 375px there is not enough room for the wordmark beside the 988
   pill, language toggle, and menu button, so the mark stands alone, exactly
   as it does as an app icon. The name is still announced by the link's aria-label. */
@media (max-width: 374px) {
  .nav-island .lockup__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Phone: 36px mark, 18px wordmark, subline near 10px. */
.nav-island .lockup__sub {
  display: block;
  font-size: 0.28em;
  letter-spacing: 0.1655em;
  margin-right: -0.1655em;
  margin-top: 0.42em;
  opacity: 0.72;
}


/* The lockup steps up with the row, not 230px after it. */
@media (min-width: 1240px) {
  .nav-island .lockup { font-size: 2.25rem; }
}

@media (min-width: 1440px) {
  .nav-island .lockup { font-size: 2.65rem; }

  .nav-island .lockup__sub {
    font-size: 0.25em;
    /* Tuned so the subline measures the same as STILLMIND above it.
       Checked against the rendered box, not calculated. */
    letter-spacing: 0.1705em;
    /* Tracking adds a trailing gap after the final letter, which would
       push the block right by one step. This pulls it back. */
    margin-right: -0.1705em;
    margin-top: 0.5em;
    opacity: 0.72;
  }
}

/* --------------------------------------------------------------------
   Desktop links
   The breakpoint is 1240px. Getting there meant taking two things out of
   the row rather than squeezing it: Approach, and the Client portal
   link. Both still live in the overlay menu and in the footer, so
   nothing became unreachable, and the row now fits on essentially any
   laptop instead of only on a maximised window.

   Squeezing is what caused links to wrap the first time, so the rule
   stands: when the row runs out of room, something leaves it.
   -------------------------------------------------------------------- */

.nav-links {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

@media (min-width: 1240px) {
  .nav-links { display: flex; }
  .nav-island {
    /* Wider island so all links and actions fit smoothly without overflowing */
    max-width: min(1560px, 100%);
    padding: 0.45rem 0.65rem 0.45rem 1.15rem;
    gap: clamp(0.35rem, 0.8vw, 0.75rem);
  }
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 clamp(0.35rem, 0.5vw, 0.625rem);
  border-radius: var(--r-pill);
  font-size: clamp(0.84rem, 0.88vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-2);
  /* A wrapped nav link is always a bug, never a layout. */
  white-space: nowrap;
  transition:
    color var(--d-base) var(--ease-out-expo),
    background-color var(--d-base) var(--ease-out-expo);
}

.nav-link:hover { color: var(--c-text); background: rgba(22, 48, 43, 0.045); }

/* A touch device that is wide enough to show these links still needs a
   finger-sized target. A mouse does not. */
@media (pointer: coarse) {
  .nav-link { min-height: 2.75rem; }
}

/* The current section gets a dot rather than a filled pill, so it reads
   as a position marker instead of a second call to action. */
.nav-link[aria-current="page"],
.nav-link[aria-current="true"] { color: var(--c-brand); font-weight: 600; }

.nav-link[aria-current="page"]::after,
.nav-link[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: 0.28rem;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------
   Navigation dropdown (Insurance & Pricing Programs)
   -------------------------------------------------------------------- */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  font: inherit;
  font-size: clamp(0.84rem, 0.88vw, 0.9375rem);
  font-weight: 500;
  cursor: pointer;
  color: var(--c-text-2);
  padding: 0 clamp(0.35rem, 0.5vw, 0.625rem);
  min-height: 2.75rem;
  border-radius: var(--r-pill);
  transition:
    color var(--d-base) var(--ease-out-expo),
    background-color var(--d-base) var(--ease-out-expo);
}

.nav-dropdown__toggle:hover,
.nav-dropdown.is-open .nav-dropdown__toggle,
.nav-dropdown:focus-within .nav-dropdown__toggle {
  color: var(--c-text);
  background: rgba(22, 48, 43, 0.055);
}

.nav-dropdown__chevron {
  width: 10px;
  height: 6px;
  transition: transform var(--d-fast) var(--ease-out-expo);
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown.is-open .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translate3d(-50%, 8px, 0);
  width: max-content;
  min-width: 320px;
  max-width: 380px;
  padding: 0.5rem;
  background: rgba(250, 248, 245, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(22, 48, 43, 0.09);
  border-radius: var(--r-card, 16px);
  box-shadow: 0 16px 40px -8px rgba(15, 35, 31, 0.16), 0 4px 12px rgba(15, 35, 31, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s ease;
  z-index: 100;
}

/* Invisible hover bridge spanning the gap between toggle and menu so hover is never lost */
.nav-dropdown__menu::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  left: -1rem;
  right: -1rem;
  height: 1.5rem;
  background: transparent;
}

.nav-dropdown__menu--services {
  min-width: 350px;
  max-width: 420px;
}

.nav-dropdown__divider {
  height: 1px;
  background: rgba(22, 48, 43, 0.08);
  margin: 0.375rem 0.5rem;
}

.nav-dropdown__item--all {
  background: rgba(39, 100, 70, 0.04);
}

.nav-dropdown__item--all:hover {
  background: rgba(39, 100, 70, 0.09);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.nav-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-md, 10px);
  text-decoration: none;
  transition: background-color var(--d-fast) ease;
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background-color: rgba(22, 48, 43, 0.05);
}

.nav-dropdown__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm, 6px);
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

.nav-dropdown__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-dropdown__text {
  flex: 1;
  min-width: 0;
}

.nav-dropdown__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: var(--lh-tight);
}

.nav-dropdown__desc {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--c-text-2);
  line-height: 1.35;
  margin-top: 0.2rem;
  white-space: normal;
}

/* --------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  /* The actions group keeps its size. Only the links in the middle give
     way, and they are the ones that can afford to. */
  flex-shrink: 0;
}

.nav-actions > * { flex-shrink: 0; }

.nav-island .lockup { flex-shrink: 0; }

/* On a phone the crisis pill collapses to its dot and number, which is
   the part that matters, and never to an icon with no label. */
.nav-actions .crisis-pill {
  min-height: 2.75rem;
  font-size: 0.8125rem;
  padding-inline: clamp(0.6rem, 0.8vw, 0.85rem);
}
.crisis-pill__word { display: none; }

@media (min-width: 560px) {
  .crisis-pill__word { display: inline; }
}

@media (min-width: 1440px) {
  .nav-link,
  .nav-dropdown__toggle {
    padding: 0 0.625rem;
    font-size: 0.9375rem;
  }

  .nav-actions .crisis-pill {
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }
}

/* Language switch toggle pill in header actions */
.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0 0.65rem;
  border: 1px solid rgba(22, 48, 43, 0.12);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--d-fast) ease,
    border-color var(--d-fast) ease,
    color var(--d-fast) ease,
    transform var(--d-fast) var(--ease-out-expo);
}

.lang-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.lang-pill:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.lang-pill__globe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
}

.lang-pill__globe svg {
  width: 100%;
  height: 100%;
}

.lang-pill.is-active {
  background: var(--c-brand-soft);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

@media (max-width: 480px) {
  .site-header {
    padding: 0.5rem clamp(0.35rem, 2vw, 0.65rem);
  }

  .nav-island {
    padding: 0.35rem 0.4rem 0.35rem 0.65rem;
    gap: 0.25rem;
  }

  .nav-island .lockup {
    font-size: 1.85rem;
  }

  .nav-actions {
    gap: 0.25rem;
  }

  .nav-actions .crisis-pill {
    min-height: 2.25rem;
    padding-inline: 0.55rem;
    font-size: 0.8125rem;
  }

  .lang-pill {
    min-height: 2.25rem;
    padding: 0 0.45rem;
    font-size: 0.75rem;
  }

  .menu-btn {
    width: 2.375rem;
    height: 2.375rem;
  }
}

/* Booking is the only button in the header. The portal is a text link,
   because two pill buttons side by side read as two equally important
   choices, and there is only one thing a new visitor should do here.
   Below 760px both live in the overlay instead. */
.nav-actions .nav-portal,
.nav-actions .nav-book { display: none; }

@media (min-width: 760px) {
  .nav-actions .nav-book {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0 clamp(0.75rem, 1vw, 1.25rem);
    font-size: clamp(0.8125rem, 0.88vw, 0.9375rem);
  }
}

@media (min-width: 1440px) {
  .nav-actions .nav-book {
    padding: 0 1.25rem;
    font-size: 0.9375rem;
  }
}

/* Shows portal link on wider screens where room is plentiful */
@media (min-width: 1380px) {
  .nav-actions .nav-portal { display: inline-flex; }
}

.nav-portal {
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  white-space: nowrap;
  transition:
    color var(--d-base) var(--ease-out-expo),
    background-color var(--d-base) var(--ease-out-expo);
}

.nav-portal:hover { color: var(--c-brand); background: rgba(22, 48, 43, 0.045); }

.nav-portal__icon {
  font-size: 0.75em;
  opacity: 0.55;
  transition: transform var(--d-base) var(--ease-out-quart);
}

@media (hover: hover) {
  .nav-portal:hover .nav-portal__icon { transform: translate(2px, -1px); opacity: 1; }
}

/* A hairline between the links and the actions, so the row reads as two
   groups rather than one long undifferentiated strip. */
.nav-actions::before {
  content: "";
  display: none;
  width: 1px;
  height: 1.25rem;
  margin-right: 0.25rem;
  background: var(--c-stone);
}

@media (min-width: 1380px) {
  .nav-actions::before { display: block; }
}

/* --------------------------------------------------------------------
   Menu button
   Two bars that rotate into an X. Transform only, so it stays on the
   compositor.
   -------------------------------------------------------------------- */

.menu-btn {
  display: grid;
  place-items: center;
  width: 3.125rem;
  height: 3.125rem;
  flex: none;
  border-radius: 50%;
  background: rgba(22, 48, 43, 0.05);
  transition: background-color var(--d-base) var(--ease-out-expo);
}

.menu-btn:hover { background: rgba(22, 48, 43, 0.09); }

/* Hides exactly when the desktop row appears, never before. These were
   left at 960px when the row moved down to 1240px, which opened a window
   with no navigation at all: no menu button and no links. iPad
   landscape sat right in the middle of it. */
@media (min-width: 1240px) {
  .menu-btn { display: none; }
}

.menu-btn__bars {
  position: relative;
  width: 17px;
  height: 11px;
}

.menu-btn__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--c-text);
  transition: transform var(--d-base) var(--ease-out-expo);
}

.menu-btn__bar:first-child { top: 0; }
.menu-btn__bar:last-child  { bottom: 0; }

/* Both bars travel to the centre line, then rotate. */
[aria-expanded="true"] .menu-btn__bar:first-child {
  transform: translateY(4.75px) rotate(45deg);
}

[aria-expanded="true"] .menu-btn__bar:last-child {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* --------------------------------------------------------------------
   Overlay menu
   Fills the screen, glass over whatever is behind it, links reveal in
   sequence. Inert and unreachable by keyboard when closed.
   -------------------------------------------------------------------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  /* Top padding clears the island and no more. Bottom padding respects iOS home bar. */
  padding: clamp(5.25rem, 14vh, 7.5rem) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  overflow-y: auto;
  overscroll-behavior: contain;

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--d-base) var(--ease-out-expo),
    visibility 0s linear var(--d-base);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-overlay { background: var(--c-paper); }
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--d-base) var(--ease-out-expo),
    visibility 0s;
}

@media (min-width: 1240px) {
  .nav-overlay { display: none; }
}

.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: auto;
}

.nav-overlay__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-height: 2.75rem;
  padding-block: 0.625rem;
  font-family: var(--font-display);

  /* Keyed to height as well as width. The constraint on this menu is
     vertical: six links, two buttons and a crisis line have to fit above
     the fold, and the shortest phone in common use has 667px. Taking the
     smaller of a width-based and a height-based size means an iPhone SE
     gets 22px and a Pro Max gets 30px, and neither has to scroll. */
  font-size: clamp(1.125rem, min(7vw, 3.3vh), 2rem);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-stone);

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-slow) var(--ease-out-expo),
    transform var(--d-slow) var(--ease-out-expo);
  transition-delay: var(--stagger, 0ms);
}

.is-open .nav-overlay__link {
  opacity: 1;
  transform: none;
}

.nav-overlay__num {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}

.nav-overlay__link[aria-current="page"],
.nav-overlay__link[aria-current="true"] {
  color: var(--c-brand);
  font-weight: 600;
}

.nav-overlay__link[aria-current="page"] .nav-overlay__num,
.nav-overlay__link[aria-current="true"] .nav-overlay__num {
  color: var(--c-brand);
}

.nav-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: clamp(var(--s-5), 3vh, var(--s-7));

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-slow) var(--ease-out-expo),
    transform var(--d-slow) var(--ease-out-expo);
  transition-delay: var(--actions-delay, 400ms);
}

.is-open .nav-overlay__actions { opacity: 1; transform: none; }

.nav-overlay__actions .btn { justify-content: space-between; width: 100%; }

.nav-overlay__foot {
  margin-top: clamp(var(--s-4), 2.5vh, var(--s-6));
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--c-stone);
  font-size: var(--t-sm);
  color: var(--c-text-3);
}

/* Locks the page behind the overlay without the layout jumping when the
   scrollbar disappears. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay__link,
  .nav-overlay__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------
   Mobile drawer language selector
   -------------------------------------------------------------------- */
.nav-overlay__lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.75rem 1rem;
  background: rgba(22, 48, 43, 0.04);
  border-radius: var(--r-card, 16px);
  margin-bottom: var(--s-3);
}

.nav-overlay__lang-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
}

.nav-overlay__lang-btns {
  display: inline-flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.25rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(22, 48, 43, 0.08);
}

.lang-select-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all var(--d-fast) ease;
}

.lang-select-btn:hover {
  color: var(--c-text);
}

.lang-select-btn.is-active {
  background: var(--c-brand);
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Clinical Language Notice Banner (Bottom Floating Notification Card)
   -------------------------------------------------------------------- */
.clinical-lang-banner {
  position: fixed;
  bottom: calc(clamp(1rem, 3vh, 1.5rem) + env(safe-area-inset-bottom, 0px));
  left: var(--gutter);
  right: var(--gutter);
  max-width: 680px;
  margin-inline: auto;
  z-index: var(--z-overlay, 999);
  background: rgba(250, 248, 245, 0.98);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(39, 100, 70, 0.25);
  border-radius: var(--r-card, 16px);
  box-shadow: 0 12px 36px -6px rgba(15, 35, 31, 0.2), 0 4px 12px rgba(15, 35, 31, 0.08);
  padding: 0.875rem 1.125rem;
  animation: banner-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes banner-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.clinical-lang-banner.is-dismissing {
  animation: banner-fade-out 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes banner-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.clinical-lang-banner[hidden] {
  display: none !important;
}

.clinical-lang-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.clinical-lang-banner__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.clinical-lang-banner__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clinical-lang-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clinical-lang-banner__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
}

.clinical-lang-banner__text {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-text-2);
  margin: 0;
}

.clinical-lang-banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: rgba(22, 48, 43, 0.06);
  color: var(--c-text-2);
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--d-fast) ease;
}

.clinical-lang-banner__close:hover {
  background: rgba(22, 48, 43, 0.12);
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   Google Translate Overrides & Chrome Banner Suppression
   -------------------------------------------------------------------- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
.goog-te-banner,
iframe.skiptranslate,
iframe[class*="skiptranslate"],
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-xl07Ob-OEVmcd,
#goog-gt-tt,
body > .skiptranslate,
body > iframe.skiptranslate,
iframe[id^=":"][id*="container"],
div[id^=":"][id*="container"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html,
body {
  top: 0px !important;
  margin-top: 0px !important;
  position: static !important;
}

#google_translate_element {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}