/* Concept 2: shared desktop capsule. Mobile declarations stay in components.css.
   75em = 1200px at the normal 16px browser default; JS uses the same threshold. */
@media (min-width: 75em) {
  header.site-header { top: 16px; padding-inline: 16px; }
  .site-header > .header-inner {
    width: 100%; max-width: 85rem; min-height: 84px;
    gap: 24px; padding: 14px 26px;
    border: 1px solid rgb(255 253 250 / 15%); border-radius: 999px;
    color: var(--paper); background: var(--forest-deep);
    box-shadow: 0 10px 28px rgb(19 47 45 / 16%);
  }
  .site-header .brand { min-height: 44px; color: var(--paper); }
  .site-header .brand img { filter: grayscale(1) brightness(0) invert(1); }
  .site-header .brand strong { font-size: 1.375rem; }
  .site-header .brand small { font-size: .75rem; }
  .site-header .desktop-nav { flex: 1; min-width: 0; }
  .site-header .desktop-nav ul { justify-content: center; align-items: center; gap: 4px; }
  .site-header .desktop-nav a {
    justify-content: center; min-width: 44px; min-height: 44px;
    padding: 10px 12px; border-radius: 999px;
    color: var(--paper); font-size: .8125rem; font-weight: 500; line-height: 1.3;
    transition: background-color .18s, color .18s;
  }
  .site-header .header-inner .desktop-nav a::after { content: none; }
  .site-header .desktop-nav a[aria-current="page"] {
    background: var(--sage); color: var(--forest-deep); font-weight: 700;
  }
  .site-header .header-actions { flex: 0 0 auto; gap: 20px; }
  .site-header .header-phone { display: none; min-height: 44px; color: var(--paper); }
  .site-header .header-phone .icon { border-color: rgb(255 253 250 / 40%); }
  .site-header .header-actions .button {
    min-height: 48px; gap: 12px; padding: 12px 23px;
    color: white; font-size: .8125rem; white-space: nowrap;
    background: var(--terracotta); transform: none;
  }
  .site-header .header-actions .button .icon { transition: transform .18s; }
  .site-header .header-demo { display: none; }
  .site-header a:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
}
@media (min-width: 90em) {
  .site-header .header-phone { display: inline-flex; padding-left: 20px; border-left: 1px solid rgb(255 253 250 / 22%); }
}
@media (min-width: 75em) and (hover: hover) {
  .site-header .desktop-nav a:not([aria-current="page"]):hover { background: rgb(234 240 231 / 14%); }
  .site-header .desktop-nav a[aria-current="page"]:hover { background: var(--paper); }
  .site-header .header-actions .button:hover { background: var(--terracotta-hover); transform: none; }
  .site-header .brand:hover, .site-header .header-phone:hover { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .header-actions .button .icon { transition: none; transform: none; }
}

@media (min-width: 75em) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-header .header-actions .button:hover .icon { transform: translateX(3px); }
}