/* Unified site navigation bar — the branded homepage header, made reusable and
 * sticky, for interior (base_modern) and legacy (base.html) pages. The homepage
 * keeps its own copy of these rules in homepage.css; this file is self-contained
 * (var fallbacks) so it renders identically on pages that don't load homepage.css.
 * Markup is produced by navbar.generator.render_site_navigation(). */

/* ---- base bar ---------------------------------------------------------------*/
.header {
  background-color: var(--blue-soft, #F6FAFF);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header__container {
  max-width: 85.875rem;
  margin: 0 auto;
  padding: .625rem 1.25rem;
  min-height: 9.125rem;
  display: flex;
  align-items: center;
}
.header__logo {
  position: relative;
  z-index: 4;
  display: inline-block;
}
.header__logo img { width: 100%; display: block; }

.menu { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.menu__list { display: flex; flex-wrap: wrap; row-gap: .3125rem; column-gap: 1rem; align-items: center; }
.menu__item { position: relative; list-style: none; }
.menu__link {
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--black, #3b3b3b);
  text-decoration: none;
  transition: color .3s;
  display: inline-flex;
  align-items: center;
  gap: .25em;
  white-space: nowrap;
}
.menu__caret { font-size: .7em; opacity: .7; }

/* ---- dropdown submenus (new) ------------------------------------------------*/
.menu__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  margin: 0;
  padding: .4rem 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  display: none;
  z-index: 1001;
}
.menu__submenu li { list-style: none; }
.menu__submenu a {
  display: block;
  padding: .45rem 1rem;
  color: var(--black, #3b3b3b);
  text-decoration: none;
  white-space: nowrap;
}
.menu__submenu a:hover { background: var(--blue-soft, #F6FAFF); }
@media (any-hover: hover) {
  .menu__item--has-children:hover > .menu__submenu { display: block; }
  .menu__link:hover { color: var(--blue, #0075ff); }
}
.menu__item.open > .menu__submenu { display: block; }

/* ---- search + support actions ----------------------------------------------*/
.header__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  color: #444; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.12);
  text-decoration: none; margin: 0 .5rem;
}
.support-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  background: linear-gradient(180deg, #f6c252 0%, #e6a432 50%, #c9851d 100%);
  color: #fff !important; font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  text-decoration: none; border: 1px solid rgba(0,0,0,.18); border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: filter .2s ease, transform .1s ease; white-space: nowrap; line-height: 1.15; text-align: center;
}
.support-btn:hover { filter: brightness(1.06); color: #fff !important; text-decoration: none; }
.support-btn:active { transform: translateY(1px); filter: brightness(.97); }
.support-btn svg { flex: 0 0 auto; }

.icon-menu { display: none; }

/* ---- fluid sizing (mirrors homepage.css) -----------------------------------*/
@media (min-width: 83.375em) {
  .menu__list { column-gap: 1.625rem; }
  .menu__link { font-size: 1.25rem; }
}
@media (min-width: 85.875em) {
  .header__container { gap: 2rem; }
  .header__logo { width: 17.625rem; }
}
@media (min-width: 20em) and (max-width: 85.875em) {
  .header__container { gap: clamp(.9375rem, .6149193548rem + 1.6129032258vw, 2rem); }
  .header__logo { width: clamp(11.25rem, 9.314516129rem + 9.6774193548vw, 17.625rem); }
}
@media (min-width: 47.99875em) and (max-width: 83.375em) {
  .menu__list { column-gap: clamp(.625rem, -.73180718rem + 2.8267552383vw, 1.625rem); }
  .menu__link { font-size: clamp(1.125rem, .9553991025rem + .3533444048vw, 1.25rem); }
}
@media (max-width: 20em) {
  .header__container { gap: .9375rem; }
  .header__logo { width: 11.25rem; }
}

/* ---- mobile: burger + slide-in menu ----------------------------------------*/
@media (max-width: 47.99875em) {
  .menu__body {
    position: fixed; width: 100%; height: 100%; right: -100%; top: 0;
    overflow: auto; padding: 5.3125rem .9375rem 1.875rem .9375rem;
    background-color: var(--blue-soft, #F6FAFF); transition: right .3s; z-index: 3;
  }
  .menu__body::before {
    content: ""; background-color: var(--blue-soft, #F6FAFF); position: fixed;
    width: 100%; height: 4.375rem; right: -100%; top: 0; transition: right .3s; z-index: 2;
  }
  .menu-open .menu__body, .menu-open .menu__body::before { right: 0; }
  .menu__list { flex-direction: column; row-gap: 1.25rem; align-items: flex-end; column-gap: .625rem; }
  .menu__link { font-size: 1.5rem; }
  .menu__item { width: 100%; text-align: right; }
  .menu__submenu {
    position: static; display: none; box-shadow: none; border: none; background: transparent;
    min-width: 0; padding: .25rem 0 0; text-align: right;
  }
  .menu__item.open > .menu__submenu { display: block; }
  .menu__submenu a { padding: .3rem .5rem; color: var(--black, #3b3b3b); }
  .icon-menu {
    display: block; position: relative; width: 1.875rem; height: 1.125rem; z-index: 5;
    background: none; border: 0; cursor: pointer;
  }
  .icon-menu span, .icon-menu::after, .icon-menu::before {
    content: ""; transition: all .3s ease 0s; right: 0; position: absolute;
    width: 100%; height: .125rem; background-color: #000;
  }
  .icon-menu::before { top: 0; }
  .icon-menu::after { bottom: 0; }
  .icon-menu span { top: calc(50% - .0625rem); }
  .menu-open .icon-menu span { width: 0; }
  .menu-open .icon-menu::before { top: calc(50% - .0625rem); transform: rotate(-45deg); }
  .menu-open .icon-menu::after { bottom: calc(50% - .0625rem); transform: rotate(45deg); }
  .header__container { min-height: 4.375rem; }
}
@media (max-width: 47.99875em) and (any-hover: none) { .icon-menu { cursor: default; } }