/* Shared floating navigation. Keep the red/cream page palette beneath a white bar. */
:root {
  --nav-inset: clamp(20px, 4.45vw, 72px);
  --nav-top: max(18px, env(safe-area-inset-top));
  --nav-height: 80px;
}
#site-header {
  inset: var(--nav-top) var(--nav-inset) auto;
  width: auto;
  max-width: 1320px;
  height: var(--nav-height);
  margin-inline: auto;
  padding: 12px 24px;
  grid-template-columns: minmax(104px, 1fr) auto minmax(104px, 1fr);
  gap: 24px;
  z-index: 110;
  background: #fff;
  color: #171717;
  border: 1px solid #2210130a;
  border-radius: 12px;
  box-shadow: 0 4px 24px #22101312;
  backdrop-filter: none;
  transition: box-shadow .25s ease;
}
#site-header.scrolled { background: #fff; box-shadow: 0 6px 28px #2210131c; }
#site-header::after { display: none; }
#site-header .brand { width: 98px; }
#site-header .brand img { width: 100%; height: auto; }
#site-header .desktop-nav { gap: clamp(20px, 2.4vw, 34px); }
#site-header .desktop-nav a { padding-block: 15px; font-size: 13px; font-weight: 600; white-space: nowrap; }
#site-header .desktop-nav a::after { bottom: 7px; background: var(--red); height: 2px; }
#site-header .header-actions { gap: 10px; }
#site-header .button {
  min-height: 44px;
  padding: 12px 23px;
  border-radius: 7px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
#site-header .nav-toggle { display: none; }
#site-header a:focus-visible,
#site-header button:focus-visible,
#mobile-nav a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
#mobile-nav {
  inset: calc(var(--nav-top) + var(--nav-height) + 10px) var(--nav-inset) auto;
  z-index: 109;
  padding: 12px 22px 20px;
  max-height: calc(100dvh - var(--nav-top) - var(--nav-height) - 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #171717;
  border: 1px solid #2210130a;
  border-radius: 12px;
  box-shadow: 0 12px 32px #22101326;
  backdrop-filter: none;
}
#mobile-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 4px;
  font: 600 16px/1.5 JayaText, Arial, sans-serif;
  border-bottom: 1px solid #17171712;
}
#mobile-nav a:last-child { border-bottom: 0; }
#mobile-nav a[aria-current=page] { color: #171717; }
#mobile-nav a[aria-current=page]::after {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
@media (hover:hover) {
  #site-header .desktop-nav a:hover::after { transform: scaleX(1); }
  #site-header .button:hover { background: #a91226; }
  #site-header .nav-toggle:hover { background: #f6f3f3; }
  #mobile-nav a:hover { color: var(--red); }
}
@media (min-width:901px) { #mobile-nav { display: none; } }
@media (max-width:900px) {
  :root { --nav-inset: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); --nav-top: max(10px, env(safe-area-inset-top)); --nav-height: 68px; }
  #site-header { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 10px; }
  #site-header .brand { width: 80px; }
  #site-header .desktop-nav { display: none; }
  #site-header .header-actions { gap: 8px; }
  #site-header .button { min-height: 44px; padding: 12px 17px; font-size: 12px; }
  #site-header .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; }
  #site-header .nav-toggle span { display: block; width: 22px; height: 1px; background: #171717; transition: transform .2s ease; }
  #site-header .nav-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  #site-header .nav-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (prefers-reduced-motion:reduce) {
  #site-header, #site-header .nav-toggle span, #site-header .button, #site-header .desktop-nav a::after { transition: none; }
}