html { scroll-behavior: smooth; }
body.oles-has-hero #header { position: fixed; inset-inline: 0; background: rgb(38 38 38 / 15%); }
body.oles-has-hero #header.is-scrolled { background: rgb(48 35 27 / 97%); }
#header {
  position: sticky; top: var(--drupal-displace-offset-top, 0px); z-index: 490;
  background: var(--oles-dark); color: var(--oles-cream);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
#header #navbar-main {
  width: min(100%, calc(var(--content-width) + 2 * var(--page-gutter)));
  margin-inline: auto; padding: clamp(1rem, 1.97vw, 2.125rem) var(--page-gutter) clamp(1rem, 1.56vw, 1.6875rem);
  background: transparent !important; gap: var(--space-3);
  transition: padding 240ms ease;
}
#header .navbar-brand { display: flex; align-items: center; gap: 1rem; color: var(--oles-cream); font-size: 1.125rem; font-weight: 700; white-space: normal; margin: 0; max-width: 65%; }
#header .navbar-brand img { width: clamp(5rem, 8.1vw, 8.75rem); height: auto; max-height: 6.25rem; object-fit: contain; margin: 0; transition: width 240ms ease, max-height 240ms ease; }
#header .navbar-nav { gap: var(--space-3); position: relative; }
#header .navbar-nav.has-moving-underline::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: var(--nav-line-width); background: var(--oles-cream); transform: translate(var(--nav-line-x), var(--nav-line-y)); pointer-events: none; transition: transform 320ms cubic-bezier(.22, 1, .36, 1), width 320ms cubic-bezier(.22, 1, .36, 1); }
#header .nav-link { color: var(--oles-cream); font-size: clamp(1rem, 1.39vw, 1.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; min-height: 44px; display: flex; align-items: center; padding: .5rem; }
#header .nav-link:hover { color: var(--oles-gold); }
#header .nav-link[aria-current="location"] { color: var(--oles-cream); text-decoration: underline; text-underline-offset: .35em; }
#header .has-moving-underline .nav-link[aria-current="location"] { text-decoration: none; }
#header :focus-visible { outline: 2px solid var(--oles-gold); outline-offset: 5px; }
#header .navbar-toggler { border: 1px solid var(--oles-cream); min-width: 48px; min-height: 48px; }
#header .navbar-toggler-icon { filter: invert(1); }
#header.is-scrolled { background: rgb(48 35 25 / 97%); box-shadow: 0 3px 18px rgb(0 0 0 / 16%); }
#header.is-scrolled #navbar-main { padding-block: .75rem; }
#header.is-scrolled .navbar-brand img { width: 4.5rem; max-height: 4rem; }
.oles-section { scroll-margin-top: calc(var(--drupal-displace-offset-top, 0px) + 7rem); }
@media (max-width: 767px) {
  #header #navbar-main { padding-block: .75rem; }
  #header .navbar-brand { font-size: .9rem; }
  #header .navbar-brand img { width: 4.5rem; max-height: 4rem; }
  #header.is-scrolled .navbar-brand img { width: 4rem; max-height: 3.5rem; }
  #header .navbar-collapse { width: 100%; }
  #header .navbar-collapse.show, #header .navbar-collapse.collapsing { background: var(--oles-dark); padding-inline: 1rem; }
  #header .navbar-nav { padding-top: 1rem; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #header .navbar-nav.has-moving-underline::after { transition: none; }
  #header, #header #navbar-main, #header .navbar-brand img { transition: none; }
}