/* Header-specific settings. All pages load this stylesheet from one manifest. */
:root { --header-height: 64px; --header-surface: #ffffff; }
html[data-theme="dark"] { --header-surface: var(--surface-overlay); }
@media (max-width: 720px) { :root { --header-height: 58px; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  width: 100%;
  height: var(--header-height);

  background: var(--header-surface);
  border-bottom: 1px solid var(--line-strong);

  transition:
    background-color var(--motion-theme),
    border-color var(--motion-theme),
    box-shadow var(--motion-theme);
}

/* Only the background becomes translucent; text and icons keep full opacity.
   Without backdrop support the solid surface remains readable. */
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  html:not(.is-menu-open) .site-header.is-scrolled {
    background: color-mix(in srgb, var(--header-surface) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html:not(.is-menu-open) .site-header.is-scrolled {
    background: var(--header-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.header-inner {
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--page-width)
  );

  height: 100%;

  margin-inline: auto;

  display: flex;
  align-items: center;

  gap: 28px;
}

.header-brand {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  height: 100%;

}

.header-logo,
.header-brand .theme-logo-image {
  display: block;

  width: auto;
  height: 30px;

  max-width: 120px;
  max-height: 30px;

  object-fit: contain;
}

.header-nav {

  margin-left: auto;

  display: flex;
  align-items: center;

  gap: clamp(18px, 2vw, 30px);
}

.header-nav a {
  padding-block: 10px;

  white-space: nowrap;

  transition:
    color var(--motion-ui);
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--brand);
}

.header-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 4px;
}

.theme-toggle,
.header-menu {
  width: 40px;
  height: 40px;

  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: var(--radius-control);

  background: transparent;

  color: var(--text);

  cursor: pointer;

  transition:
    color var(--motion-ui);
}

.theme-toggle {
  display: grid;
  place-items: center;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.header-menu:hover,
.header-menu:focus-visible {
  color: var(--brand);
}

.theme-icon {
  grid-area: 1 / 1;

  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="light"] .theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-icon-moon {
  display: none;
}

.header-menu {
  display: none;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 6px;
}

.header-menu span {
  width: 18px;
  height: 1px;

  background: currentColor;

  transition:
    transform var(--motion-ui);
}

.header-menu[aria-expanded="true"] span:first-child {
  transform:
    translateY(3.5px)
    rotate(45deg);
}

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

@media (max-width: 1024px) {
  .header-inner {
    gap: 22px;
  }

  .header-nav {
    gap: 16px;
  }
}

html.is-preload .nav-dropdown,
html.is-preload .menu-backdrop {
  display: none;
}

.search-button {
  width: 40px;
  height: 40px;

  padding: 0;

  display: grid;
  place-items: center;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: var(--radius-control);

  background: transparent;

  color: var(--text);

  cursor: pointer;

  transition:
    color var(--motion-ui),
    background-color var(--motion-ui);
}

.search-button:hover,
.search-button:focus-visible {
  color: var(--brand);
}

.search-icon {
  display: block;

  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

/* DROPDOWN_SYSTEM_START */

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-trigger {
  min-height: 40px;

  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  background: transparent;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color var(--motion-ui);
}

.nav-trigger:hover,
.nav-trigger:focus-visible,
.nav-item.is-open > .nav-trigger {
  color: var(--brand);
}

/* DESKTOP DROPDOWN */

.nav-dropdown {
  position: absolute;

  top: calc(100% + 20px);
  left: 50%;
  right: auto;

  width: 248px;

  padding: 8px;

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, -6px);

  pointer-events: none;

  border:
    1px solid
    var(--line);

  border-radius: var(--radius-md);

  background: var(--surface-overlay);

  box-shadow: var(--shadow-md);

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 180ms ease,
    background-color var(--motion-theme),
    border-color var(--motion-theme);
}

/* Hover bridge */

.nav-dropdown::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: -22px;

  height: 22px;
}

.nav-item.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, 0);

  pointer-events: auto;
}

.nav-dropdown a {
  display: flex;
  align-items: center;

  min-height: 38px;

  padding: 9px 12px;

  border-radius: var(--radius-sm);

  white-space: normal;

  transition:
    color var(--motion-ui),
    background-color var(--motion-ui);
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--brand);

  background:
    color-mix(
      in srgb,
      var(--brand) 8%,
      transparent
    );
}

@media (max-width: 1024px) {

  .nav-dropdown {
    width: 232px;
  }
}

/* DROPDOWN_SYSTEM_END */

/* MOBILE_HEADER_REFINEMENT_START */

@media (max-width: 1024px) {

  .site-header {
    height: var(--header-height);
  }

  .header-inner {
    width: calc(100% - (var(--page-padding) * 2));

    height: 100%;

    margin-inline: auto;

    display: flex;
    align-items: center;

    gap: 0;
  }

  /* BRAND */

  .header-brand {
    flex: 0 0 auto;

    height: 100%;

    display: flex;
    align-items: center;
  }

  .header-logo,
.header-brand .theme-logo-image {
    width: auto;

    height: 26px;
    max-height: 26px;
    max-width: 112px;
  }

  /* RIGHT-SIDE ACTIONS */

  .header-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 2px;
  }

  .search-button,
  .header-menu {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: var(--text);

    box-shadow: none;

    display: grid;
    place-items: center;
  }

  .header-menu:hover,
  .header-menu:focus-visible,
  .header-menu[aria-expanded="true"] {
    background: transparent;

    color: var(--brand);

    box-shadow: none;
  }

  /* HAMBURGER */

  .header-menu {
    position: relative;

    gap: 0;
  }

  .header-menu span {
    position: absolute;

    width: 19px;
    height: 1.5px;

    margin: 0;

    background: currentColor;

    border-radius: 999px;

    transform-origin: center;

    transition:
      transform var(--motion-ui),
      opacity var(--motion-ui),
      color var(--motion-ui);
  }

  .header-menu span:first-child {
    transform: translateY(-4px);
  }

  .header-menu span:last-child {
    transform: translateY(4px);
  }

  .header-menu[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }

  .header-menu[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }

  /* MOBILE NAV PANEL */

  .header-nav {
    position: absolute;

    top: var(--header-height);
    left: 0;
    right: 0;

    width: 100%;

    margin: 0;

    padding:
      8px
      var(--page-padding)
      18px;

    display: none;

    max-height:
      calc(100dvh - var(--header-height));

    overflow-y: auto;

    background: var(--header-surface);

    border-top:
      1px solid
      var(--line);

    border-bottom:
      1px solid
      var(--line);
  }

  .header-nav.is-open {
    display: block;
  }

  /* The page must not scroll behind the open panel. Hiding the document
     overflow hands back the width the scrollbar occupied, so exactly that
     width is reserved again as padding and no column moves while the menu
     is open. js/header.js measures it and sets --scrollbar-gutter; it stays
     0 where scrollbars overlay the content, so nothing shifts there either. */

  html.is-menu-open,
  html.is-menu-open body {
    overflow: hidden;
  }

  html.is-menu-open {
    padding-right: var(--scrollbar-gutter, 0px);
  }

  /* MAIN MOBILE CATEGORIES */

  .nav-item {
    width: 100%;

    border-bottom:
      1px solid
      var(--line);
  }

  .nav-item:last-child {
    border-bottom: 0;
  }

  .nav-trigger,
  .nav-item > a {
    width: 100%;
    min-height: 54px;

    padding:
      0
      34px
      0
      0;

    display: flex;
    align-items: center;

    position: relative;

    text-align: left;
  }

  .nav-trigger::after {
    content: "+";

    position: absolute;

    right: 2px;
    top: 50%;

    transform:
      translateY(-50%);

    color: var(--text-secondary);
  }

  .nav-item.is-open > .nav-trigger {
    color: var(--brand);
  }

  .nav-item.is-open > .nav-trigger::after {
    content: "−";

    color: var(--brand);
  }

  /* MOBILE SUBCATEGORIES */

  .nav-dropdown {
    position: static;

    width: 100%;

    padding:
      0
      0
      12px
      14px;

    display: none;

    opacity: 1;
    visibility: visible;

    transform: none;

    pointer-events: auto;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-item.is-open > .nav-dropdown {
    display: block;

    transform: none;
  }

  .nav-dropdown a {
    min-height: 42px;

    padding:
      9px
      8px;

    display: flex;
    align-items: center;

    border-radius: var(--radius-xs);
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible {
    color: var(--brand);

    background: transparent;
  }
}

/* SMALL PHONE */

@media (max-width: 560px) {

  .header-logo,
.header-brand .theme-logo-image {
    height: 25px;
    max-height: 25px;
    max-width: 108px;
  }

  .header-actions {
    gap: 0;
  }

  .search-button,
  .header-menu {
    width: 40px;
    height: 40px;

    flex-basis: 40px;
  }

  .header-nav {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

}

/* MOBILE_HEADER_REFINEMENT_END */

.menu-backdrop {
  position: fixed;

  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 90;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  /* Anchored to the dark end, not --text: the scrim must darken
     in both themes. --text flips and would whiten the dark page. */

  background:
    color-mix(in srgb, var(--ink) 32%, transparent);

  transition:
    opacity var(--motion-ui),
    visibility var(--motion-ui);
}

.menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}

/* Comfortable touch targets, including landscape tablets. */
.search-button, .theme-toggle, .header-menu { min-width: 44px; min-height: 44px; }
.nav-dropdown a { min-height: 44px; }
.header-nav { overscroll-behavior: contain; }
@media (min-width: 1025px) {
  .header-inner { gap: var(--space-5); }
  .header-nav { gap: clamp(12px, 1.3vw, 24px); }
}

/* Progressive enhancement fallback is owned by the header. */
html.no-js .nav-dropdown { display: block; }
html.no-js .nav-item:focus-within > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
html.no-js :is(.header-menu, .search-button, .theme-toggle) { display: none !important; }
@media (max-width: 1024px) {
  html.no-js .site-header { height: auto; position: relative; }
  html.no-js .header-inner { flex-wrap: wrap; padding-block: var(--space-4); }
  html.no-js .header-nav { display: block; position: static; order: 3; max-height: none; }
  html.no-js .nav-item:focus-within > .nav-dropdown { transform: none; }
}

.nav-dropdown a:focus-visible { outline-offset: -3px; }

@media print { .site-header, .menu-backdrop { display: none !important; } }