/* PEMKO header finish. Enqueue after navigation.css and polish.css.
 * Behaviour remains in navigation.js: native details, Escape, outside click,
 * focus restoration, and the no-JavaScript navigation remain unchanged.
 */
.site-header.navigation-header {
  position: sticky;
  top: var(--navigation-admin-offset, 0px);
  z-index: 100;
  color: #f4f6f0;
  background: #101713;
  border-bottom: 1px solid rgba(221, 230, 214, .14);
  box-shadow: inset 0 1px 0 rgba(229, 241, 218, .025), 0 1px 0 rgba(5, 10, 5, .16), 0 8px 26px rgba(5, 10, 5, .08);
  isolation: isolate;
}

/* A strong dark tint keeps the initial surface dark over the light body.
 * A single blur with restrained saturation retains the frosted effect as
 * content moves underneath, without an additional brightness filter.
 * Text and controls are not filtered. No scroll class, height change, or
 * JavaScript is involved.
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.navigation-header {
    background: rgba(8, 13, 9, .93);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
  }
}

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

.navigation-header .navigation-main > .navigation-link,
.navigation-header .navigation-services > summary {
  color: #e9eee5;
  transition: color 160ms ease;
}

.navigation-header .navigation-main > .navigation-link:hover,
.navigation-header .navigation-main > .navigation-link[aria-current="page"],
.navigation-header .navigation-services > summary:hover,
.navigation-header .navigation-services[open] > summary,
.navigation-header .navigation-services.navigation-current > summary {
  color: var(--navigation-lime);
}

.navigation-header .navigation-main > .navigation-contact {
  border-color: rgba(215, 255, 98, .78);
  border-radius: 7px;
  background: rgba(215, 255, 98, .045);
  color: #f0f6e7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.navigation-header .navigation-main > .navigation-contact:hover {
  border-color: var(--navigation-lime);
  background: var(--navigation-lime);
  color: var(--navigation-ink);
}

.navigation-header .navigation-main > .navigation-contact:focus-visible {
  outline: 2px solid var(--navigation-lime);
  outline-offset: 4px;
}

.navigation-header .brand:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--navigation-lime);
  outline-offset: 7px;
}

@media (min-width: 961px) {
  .navigation-header .navigation-services-panel {
    top: calc(100% + 16px);
    border: 1px solid #d6dccc;
    border-radius: 9px;
    background: #f3f5ee;
    box-shadow: 0 22px 55px rgba(8, 16, 9, .17), 0 2px 6px rgba(8, 16, 9, .06);
  }

  .navigation-header .navigation-services-list a {
    border-radius: 5px;
  }

  .navigation-header .navigation-services-panel .navigation-overview {
    border-color: #d6dccc;
  }
}

@media (max-width: 960px) {
  /* With JavaScript unavailable, every navigation link stays in normal flow.
   * Do not pin that expanded fallback over the page's content.
   */
  .site-header.navigation-header:not([data-navigation-ready="true"]) {
    position: relative;
    top: auto;
  }

  .navigation-header[data-navigation-ready="true"] .navigation-toggle {
    border: 1px solid rgba(217, 230, 199, .45);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
    color: #f2f5ec;
    transition: background-color 160ms ease, border-color 160ms ease;
  }

  .navigation-header[data-navigation-ready="true"] .navigation-toggle:hover,
  .navigation-header[data-navigation-open="true"] .navigation-toggle {
    border-color: rgba(215, 255, 98, .8);
    background: rgba(215, 255, 98, .065);
  }

  .navigation-header[data-navigation-ready="true"] .navigation-main {
    /* A nearly opaque menu preserves contrast over moving page content. */
    background: #111914;
    border-top-color: rgba(221, 230, 214, .14);
    border-bottom-color: rgba(221, 230, 214, .22);
    box-shadow: 0 18px 28px rgba(5, 10, 5, .16);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .navigation-header .navigation-services-panel {
    border-radius: 0;
  }

  .navigation-header .navigation-main > .navigation-contact {
    color: var(--navigation-lime);
  }

  .navigation-header .navigation-main > .navigation-contact:hover {
    color: var(--navigation-ink);
  }
}

/* WordPress uses 32px and 46px fixed toolbar heights. On small phones its
 * toolbar is absolute and scrolls away; the document already has its space.
 */
.admin-bar .navigation-header { --navigation-admin-offset: 32px; }
@media (max-width: 782px) {
  .admin-bar .navigation-header { --navigation-admin-offset: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .navigation-header { --navigation-admin-offset: 0px; }
}

/* Keep link targets below the now-sticky desktop header as well as on mobile.
 * Existing mobile scroll-margin rules remain intentionally unchanged.
 */
@media (min-width: 961px) {
  html { scroll-padding-top: 112px; }
  html:has(body.admin-bar) { scroll-padding-top: 144px; }
  body { --pemko-sticky-content-top: 120px; }
  body.admin-bar { --pemko-sticky-content-top: 152px; }
  body :is(.detail-aside, .article-outline, .about-project-pair, .city-layout-rail, .reading-rail) {
    top: var(--pemko-sticky-content-top);
  }
}
@media (min-width: 1920px) {
  html { scroll-padding-top: 124px; }
  html:has(body.admin-bar) { scroll-padding-top: 156px; }
  body { --pemko-sticky-content-top: 132px; }
  body.admin-bar { --pemko-sticky-content-top: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-header *,
  .navigation-header *::before,
  .navigation-header *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.navigation-header {
    background: #101713;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .site-header.navigation-header {
    background: Canvas;
    color: CanvasText;
    border-bottom-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navigation-header .navigation-main > .navigation-contact,
  .navigation-header[data-navigation-ready="true"] .navigation-toggle {
    border-color: ButtonText;
    box-shadow: none;
  }
  .navigation-header .brand {
    background: #101713;
    forced-color-adjust: none;
  }
}