/* Transparent, text-only header that slowly slides away on scroll down and
   returns on scroll up (behaviour in /js/nav.js). Loaded on every page. */
header.site-header{
  transition: transform 1.1s cubic-bezier(.4,0,.2,1), opacity 1.1s ease, border-color .3s ease;
}
.site-header::before{
  background: transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  transition: background-color .7s ease;
}
.site-header.scrolled, .site-header.is-scrolled{ border-color:transparent !important; box-shadow:none !important; }
/* once the visitor has scrolled and the bar comes back, give the text a soft backdrop so it stays readable */
.site-header.has-bg::before{
  background: rgba(246,238,226,.92) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
.site-header.has-bg{ border-color: var(--line-soft) !important; }
header.site-header.is-hidden{
  transform: translateY(-115%); opacity:0; pointer-events:none;
  transition: transform 1.3s cubic-bezier(.4,0,.2,1), opacity 1.1s ease;
}
@media (prefers-reduced-motion: reduce){
  header.site-header, header.site-header.is-hidden, .site-header::before{ transition-duration:.01s !important; }
}

/* "only the text shows": the header call-to-action becomes a plain underlined text link */
header.site-header .header-cta{
  background:none !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-radius:0 !important; padding:4px 0 !important; min-height:0;
  color:var(--rose-deep) !important; font-weight:600;
  border-bottom:1.5px solid var(--rose-deep) !important;
}
header.site-header .header-cta:hover{ color:var(--charcoal) !important; border-bottom-color:var(--charcoal) !important; transform:none; }
header.site-header .header-cta::before, header.site-header .header-cta::after{ display:none !important; }
header.site-header:not(.has-bg){ border-color:transparent !important; }

/* mobile menu: no panel, only the text. A light frosted veil keeps the words readable over the page. */
@media (max-width:899.98px){
  .nav-backdrop{
    background: rgba(246,238,226,.72);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  header.site-header .main-nav{
    background: transparent !important; box-shadow:none !important;
    width:min(86vw, 340px);
    padding-top:8px;
  }
  header.site-header .mobile-nav-brand{ padding-bottom:12px; margin-bottom:4px; }
  header.site-header .mobile-nav-brand-mark{ height:54px; }
  header.site-header:has(.main-nav.open) .brand{ opacity:0; transition: opacity .3s ease; }
  header.site-header .header-actions{ position:relative; z-index:100; }
  header.site-header .main-nav a, header.site-header .nav-dropdown-toggle{ color:var(--charcoal); }
  header.site-header .mobile-nav-cta{
    background:none !important; border:0 !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-radius:0 !important; width:auto; align-self:flex-start; padding:4px 0 !important; margin-top:22px;
    color:var(--rose-deep) !important; font-weight:600; border-bottom:1.5px solid var(--rose-deep) !important;
  }
  header.site-header .mobile-nav-cta::before, header.site-header .mobile-nav-cta::after{ display:none !important; }
}