/* Register the two existing header colors so the browser can interpolate
   them while retaining one continuously painted background surface. */
@property --apak-interior-header-left-color {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(29 29 27 / 90%);
}
@property --apak-interior-header-right-color {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(24.374 24.374 22.655 / 90%);
}

/* Shared interior header. Defaults retain the D29 composed tint. */
.apak-header--interior {
  position: sticky;
  z-index: 80;
  padding-block-end: 26px;
  background: linear-gradient(
    to right,
    var(--apak-interior-header-left-color) 50%,
    var(--apak-interior-header-right-color) 50%
  );
  transition:
    padding-block 0.22s ease,
    box-shadow 0.22s ease,
    -webkit-backdrop-filter 0.22s ease,
    backdrop-filter 0.22s ease,
    --apak-interior-header-left-color 0.22s ease,
    --apak-interior-header-right-color 0.22s ease;
}
.apak-header--interior[data-apak-sticky="true"] {
  --apak-interior-header-left-color: rgb(29 29 27 / 92%);
  --apak-interior-header-right-color: rgb(29 29 27 / 92%);
  background: linear-gradient(
    to right,
    var(--apak-interior-header-left-color) 50%,
    var(--apak-interior-header-right-color) 50%
  );
}
/* The source photo tint also covers the desktop header's right half. These
   composed colors preserve that default appearance without tinting focus. */
.apak-header--interior .apak-navigation__link { color: var(--apak-interior-header-link, rgb(214.32 214.32 213.96)); }
.apak-header--interior .apak-navigation__link--contact { border-color: var(--apak-interior-header-border, rgb(199.19 205.08 65.45)); }
.apak-header--interior .apak-navigation__link[aria-current="page"]::after { inset-inline: var(--apak-current-line-start, -4px) var(--apak-current-line-end, -4px); inset-block-end: 1px; border-radius: 0; border-block-end: 1px solid var(--apak-lime); }
.apak-header--interior .apak-navigation__link:focus-visible { color: var(--apak-ink); }
.apak-header--interior .apak-navigation__link[aria-current="page"]:focus-visible::after { border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .apak-header--interior .apak-navigation__link:hover { color: var(--apak-ink); }
  .apak-header--interior .apak-navigation__link[aria-current="page"]:hover::after { border-radius: inherit; }
}

@media (max-width: 1000px) {
  .apak-header--interior {
    --apak-interior-header-left-color: rgb(51 51 49);
    --apak-interior-header-right-color: rgb(51 51 49);
  }
}

@media (max-width: 960px) {
  /* Match the mobile Home header without altering the approved desktop
     composition. The interior SVG contains 14px of additional transparent
     canvas; crop only that canvas so the visible logo uses Home's bounds. */
  .apak-header--interior:not([data-apak-sticky="true"]) {
    padding-block: 24px;
  }
  .apak-header--interior .apak-header__brand {
    aspect-ratio: 183 / 46;
    overflow: hidden;
  }
  .apak-header--interior .apak-header__brand img {
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
  .apak-header--interior .apak-navigation__link[aria-current="page"]::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .apak-header--interior .apak-header__toggle {
    width: 45px;
    height: 45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apak-header--interior {
    transition: none;
  }
}
