/* Surfaces only. The controls keep their own action colors and text contrast. */
:root {
  --nav-glass-bg: var(--surface, white);
  --nav-glass-filter: none;
  --nav-glass-radius: 22px;
  --nav-glass-shadow: 0 4px 30px rgb(0 0 0 / 10%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --nav-glass-bg: rgb(255 255 255 / 67%);
    --nav-glass-filter: blur(12px);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  :root {
    --nav-glass-bg: var(--surface, white);
    --nav-glass-filter: none;
  }
}
@media (forced-colors: active) {
  :root { --nav-glass-outline: 1px solid CanvasText; }
}

@media (max-width: 1023px) {
  /* Inset the sticky box itself so Safari does not extend it into the browser chrome. */
  html .mobile-header-enabled.mobile-header-home :is(#siteHeader, .mobile-article-header) {
    top: var(--mobile-header-gap);
  }

  .mobile-header-enabled.mobile-header-home.mobile-header-scrolled .mobile-header-row {
    transform: none;
  }

  #appRoot > .tabbar,
  .mobile-header-enabled.mobile-header-home :is(.mobile-header-row, .mobile-callbar, .mobile-article-menu) {
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: var(--nav-glass-filter);
    backdrop-filter: var(--nav-glass-filter);
  }

  .mobile-header-enabled.mobile-header-home :is(.mobile-header-row, .mobile-callbar, .mobile-article-menu) {
    border: 0;
    border-radius: var(--nav-glass-radius);
    box-shadow: var(--nav-glass-shadow);
    outline: var(--nav-glass-outline, revert);
  }
}

@media (min-width: 1024px) {
  :root {
    --header-panel-gap: var(--space-2);
    --header-panel-gutter: var(--space-4);
    --header-panel-padding: var(--space-6, 24px);
    --header-panel-max: calc(var(--desktop-max, 1180px) + 2 * var(--header-panel-padding));
    --header-panel-top: var(--header-panel-gap);
  }

  html:has(#homeView.active) {
    scroll-padding-top: calc(var(--header-panel-top) + var(--desktop-header-h) + var(--header-panel-gap));
  }

  :is(#scroll:has(> #homeView.active) > #siteHeader, body > header),
  :is(#scroll, body) > .autumn-top-banner,
  body:has(#homeView.active) #desktopMenuPanel,
  #appRoot:has(#homeView.active) > .desktop-action-dock {
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: var(--nav-glass-filter);
    backdrop-filter: var(--nav-glass-filter);
    border: 0;
    border-radius: var(--nav-glass-radius);
    box-shadow: var(--nav-glass-shadow);
    outline: var(--nav-glass-outline, revert);
  }

  #appRoot:has(#homeView.active) > .desktop-action-dock {
    min-height: var(--desktop-header-h);
  }

  :is(#scroll:has(> #homeView.active) > #siteHeader, body > header),
  :is(#scroll, body) > .autumn-top-banner {
    width: calc(100% - 2 * var(--header-panel-gutter));
    max-width: var(--header-panel-max);
    margin: var(--header-panel-gap) auto 0;
    padding-inline: var(--header-panel-padding);
  }

  :is(#scroll, body) > .autumn-top-banner {
    position: static;
    z-index: auto;
  }

  :is(#scroll:has(> #homeView.active) > #siteHeader, body > header) {
    position: sticky;
    top: var(--header-panel-top);
  }

  /* The three editorial templates keep their own narrower reading column. */
  body > :is(header, .autumn-top-banner) {
    --header-panel-max: var(--content-max);
  }
  body > header {
    z-index: 60;
  }
  html:has(body > main#content) {
    scroll-padding-top: calc(var(--header-panel-top) + var(--desktop-header-h, 76px) + var(--space-4));
  }
  body:has(> main#content) > .skip:focus {
    z-index: 66;
  }

  /* Keep the sticky header attached to the root scroll container while the menu is open. */
  html.desktop-menu-open body:has(#homeView.active) { overflow: clip; }
  body:has(#homeView.active) #desktopMenuOverlay:not([hidden]) {
    visibility: visible;
    transition-property: none;
  }

  body:has(#homeView.active) #desktopMenuPanel {
    --menu-panel-top: calc(var(--menu-header-bottom, calc(var(--header-panel-top) + var(--desktop-header-h))) + var(--header-panel-gap));
    top: var(--menu-panel-top);
    right: calc(max(var(--header-panel-gutter), (100% - var(--header-panel-max)) / 2) + var(--header-panel-padding));
    max-height: calc(100dvh - var(--menu-panel-top) - var(--header-panel-gap));
  }
}