/* Shared by compiled and fallback frontend assets. Keep the header in flow. */
:root {
  --site-header-height: 6rem;
  --admin-bar-offset: 0px;
  --header-height: calc(var(--site-header-height) + var(--admin-bar-offset));
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

:root:has(body.admin-bar) { --admin-bar-offset: 32px; }

.site-header {
  position: sticky;
  top: var(--admin-bar-offset);
  z-index: 100;
  background: #fff;
  transition: box-shadow 180ms ease, margin-bottom 180ms ease;
}

.site-header__inner { transition: min-height 180ms ease; }
.site-header__brand img { transition: width 180ms ease; }

.site-header.is-scrolled {
  /* Compensate the shorter header in document flow, avoiding a content jump. */
  margin-bottom: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgb(14 34 56 / 10%);
}
.site-header.is-scrolled .site-header__inner { min-height: 4.5rem; }
.site-header.is-scrolled .site-header__brand img { width: 8.5rem; }

.mega-menu__surface {
  max-height: calc(100dvh - var(--header-height) - 1.5rem);
}

.method-faq-nav { top: var(--header-height); }

/* Six menu groups stay legible before the mobile navigation takes over. */
@media (min-width: 64.001rem) and (max-width: 78rem) {
  .site-header__brand img { width: 8.5rem; }
  .primary-nav { gap: 0.8rem; }
  .primary-nav__list { gap: 0.35rem; }
  .primary-nav__trigger { padding-inline: 0.2rem; font-size: 0.875rem; white-space: nowrap; }
  .primary-nav__client-area { font-size: 0.875rem; white-space: nowrap; }
  .primary-nav__cta { padding-inline: 1rem; font-size: 0.875rem; white-space: nowrap; }
}

.back-to-top,
.cookie-preferences {
  position: fixed;
  z-index: 90;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: var(--color-brand-navy, #0e2238);
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgb(14 34 56 / 18%);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.back-to-top {
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.875rem + env(safe-area-inset-right, 0px));
}
.cookie-preferences {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: calc(1.5rem + env(safe-area-inset-left, 0px));
  border-color: rgb(14 34 56 / 15%);
  background: #fff;
  color: var(--color-brand-navy, #0e2238);
}
.back-to-top[hidden], .cookie-preferences[hidden] { display: none; }
.back-to-top:hover { background: #087b90; transform: translateY(-2px); }
.cookie-preferences:hover { background: #e8f8fc; transform: translateY(-2px); }
.back-to-top:focus-visible, .cookie-preferences:focus-visible { outline: 3px solid var(--color-focus, #087b90); outline-offset: 4px; }
.back-to-top svg, .cookie-preferences svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 64rem) {
  :root { --site-header-height: 4.75rem; }
  .site-header.is-scrolled { margin-bottom: 0.5rem; }
  .site-header.is-scrolled .site-header__inner { min-height: 4.25rem; }
  .site-header.is-scrolled .site-header__brand img { width: 7.5rem; }
  .primary-nav { max-height: calc(100dvh - var(--header-height)); }
  .mega-menu__surface { max-height: none; }
  .site-search-panel { top: calc(var(--header-height) + 0.5rem); }
}

@media (max-width: 782px) { :root:has(body.admin-bar) { --admin-bar-offset: 46px; } }
@media (max-width: 600px) {
  :root:has(body.admin-bar) { --admin-bar-offset: 0px; }
  .back-to-top { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); right: calc(1.25rem + env(safe-area-inset-right, 0px)); }
  .cookie-preferences { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: calc(1rem + env(safe-area-inset-left, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto !important; }
  .site-header, .site-header__inner, .site-header__brand img, .back-to-top, .cookie-preferences { transition: none; }
  .back-to-top:hover, .cookie-preferences:hover { transform: none; }
}

/* One destination for each group's icon and title, shared by desktop and mobile. */
.mega-menu__resource-heading { display: block; width: fit-content; max-width: 100%; color: inherit; text-decoration: none; border-radius: 0.35rem; }
.mega-menu__group-title { color: inherit; text-decoration: none; border-radius: 0.35rem; }
.mega-menu__resource-heading:hover h3, .mega-menu__group-title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mega-menu__resource-heading:focus-visible, .mega-menu__group-title:focus-visible { outline: 3px solid var(--color-focus, #087b90); outline-offset: 4px; }