/* ==========================================================================
   R10b — Glass navbar: a compact floating bar instead of a full-width band.
   Dark glass over the hero, closing CTA and footer; light glass over light sections
   (state chosen in main.js → .scrolled). Logo swap, links and CTA unchanged.
   ========================================================================== */
.site-header,
.site-header.scrolled,
.site-header:not(.scrolled) {
  padding: 10px 0 0;
  background: none;
  box-shadow: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none; /* only the bar itself takes clicks */
}
.site-header .navbar {
  pointer-events: auto;
  width: calc(100% - 2rem);
  max-width: 980px;
  height: 60px;
  padding: 0 .5rem 0 1.15rem;
  border-radius: 18px;
  /* R10c: clear glass — light tint, short blur and a slight dim so the video stays visible and the text stays legible. */
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(18, 12, 10, .07);
  -webkit-backdrop-filter: blur(5px) saturate(150%) brightness(.85);
  backdrop-filter: blur(5px) saturate(150%) brightness(.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 22px rgba(15, 10, 9, .1);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled .navbar {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(250, 246, 242, .1);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 .5px rgba(107, 56, 44, .14), 0 4px 16px rgba(36, 28, 26, .05);
}
.site-header .brand-logo { --brand-logo-h: 38px; }
/* Over a photo in a light section the glass gains just enough body to keep dark text legible. */
.site-header.scrolled.over-media .navbar {
  background: rgba(250, 246, 242, .46);
  -webkit-backdrop-filter: blur(10px) saturate(130%) brightness(1.08);
  backdrop-filter: blur(10px) saturate(130%) brightness(1.08);
}
.site-header .navbar { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }

/* Links: no underline bar; a short colour/brightness change only. */
.site-header .nav-link::after { content: none; display: none; }
.site-header .nav-link { transition: color .18s ease, opacity .18s ease; }
.site-header:not(.scrolled) .nav-link { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.site-header .nav-link:focus-visible,
.site-header .brand-logo:focus-visible,
.site-header .mobile-toggle:focus-visible,
.site-header .header-cta .btn:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 4px;
  border-radius: 8px;
}
.site-header:not(.scrolled) .nav-link:focus-visible,
.site-header:not(.scrolled) .brand-logo:focus-visible,
.site-header:not(.scrolled) .mobile-toggle:focus-visible,
.site-header:not(.scrolled) .header-cta .btn:focus-visible { outline-color: #F8D3C5; }
.site-header .header-cta .btn {
  min-height: 44px;
  padding: .55rem 1.1rem !important;
  font-size: .85rem !important;
  box-shadow: none;
}
.site-header:not(.scrolled) .header-cta .btn {
  background: rgba(36, 22, 18, .34);
  border: 1px solid rgba(255, 255, 255, .5);
}

/* Without backdrop-filter the bar gets a denser fill so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .navbar { background: rgba(27, 21, 20, .78); }
  .site-header.scrolled .navbar { background: rgba(250, 246, 242, .96); }
}

@media (max-width: 1100px) {
  .site-header .navbar { max-width: 620px; height: 56px; padding-right: .3rem; }
}
@media (max-width: 767px) {
  .site-header,
  .site-header.scrolled,
  .site-header:not(.scrolled) { padding-top: 8px; }
  .site-header .navbar { width: calc(100% - 1.25rem); height: 54px; padding-left: .9rem; border-radius: 16px; }
  .site-header .brand-logo { --brand-logo-h: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .navbar { transition: none; }
}