:root{
  --nav-h: 92px;
  --nav-pad-x: clamp(16px, 4vw, 48px);
  --nav-border: #C9A84C;
  --nav-bg: rgba(255,255,255,0.92);
  --nav-text: var(--navy, #1B4276);
  --logo-overlap: 0px;
}

body.no-scroll{ overflow:hidden; }

nav.site-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:var(--nav-h);
  background:var(--nav-bg);
  border-bottom:3px solid var(--nav-border);
  backdrop-filter: blur(10px);
  display:block;
  padding:0;
  font-family:'Jost', sans-serif;
}

/* Metallic navy option: keeps the same base color but adds a subtle sheen.
   Enabled via `data-theme="metal-navy"` on the nav element. */
nav.site-nav[data-theme="metal-navy"]{
  --nav-text: rgba(255,255,255,0.92);
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.04) 22%,
      rgba(0,0,0,0.10) 52%,
      rgba(255,255,255,0.06) 78%,
      rgba(255,255,255,0.02) 100%),
    radial-gradient(120% 140% at 10% 0%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 90% 100%,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0) 60%),
    var(--navy, #1B4276);
}

nav.site-nav[data-theme="metal-navy"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  opacity:0.7;
  pointer-events:none;
}

.site-nav .nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 var(--nav-pad-x);
  position:relative;
  z-index:2;
}

.site-nav .nav-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  max-height:100%;
  position:relative;
  z-index:4;
}

.site-nav .nav-logo a{
  display:flex;
  align-items:center;
  text-decoration:none;
  max-height:100%;
}

.site-nav .nav-logo img{
  /* Bigger logo without increasing navbar height */
  height: min(96px, calc(var(--nav-h) - 18px));
  width:auto;
  display:block;
  image-rendering:crisp-edges;
}

.site-nav .nav-panel{
  display:flex;
  gap:28px;
  align-items:center;
  margin-left:auto;
  flex-wrap:nowrap;
  z-index:3;
}

.site-nav .nav-panel a{
  text-decoration:none;
  color:var(--nav-text);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:color 0.2s ease;
  outline-offset:4px;
}

.site-nav .nav-panel a:hover{ color:var(--gold-dark, #C9A84C); }
.site-nav .nav-panel a:focus-visible{
  outline:2px solid var(--gold-dark, #C9A84C);
}

.site-nav .nav-cta{
  background:var(--navy, #1B4276);
  color:#fff;
  padding:12px 18px;
}
.site-nav .nav-cta:hover{ background:var(--gold-dark, #C9A84C); color:#111; }

.site-nav .nav-toggle{
  margin-left:auto;
  display:none;
  align-items:center;
  gap:10px;
  background:transparent;
  border:1px solid rgba(27,66,118,0.25);
  border-radius:999px;
  padding:10px 14px;
  color:var(--nav-text);
  cursor:pointer;
  font:inherit;
}

/* Subtle “silver glass” backing to improve logo contrast on dark navs */
nav.site-nav[data-theme="metal-navy"] .nav-logo a{
  position:relative;
  padding:4px 10px;
  border-radius:14px;
}

nav.site-nav[data-theme="metal-navy"] .nav-logo a::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  /* Slightly stronger silver glass so small logo details (ESTB/2026) read on navy */
  background:linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22));
  border:1px solid rgba(255,255,255,0.26);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events:none;
}

nav.site-nav[data-theme="metal-navy"] .nav-logo img{
  position:relative;
  z-index:1;
  opacity:1;
  filter:
    saturate(1.22)
    contrast(1.18)
    brightness(1.04)
    drop-shadow(0 10px 18px rgba(0,0,0,0.22))
    drop-shadow(0 1px 0 rgba(255,255,255,0.20));
}

nav.site-nav[data-theme="metal-navy"] .nav-toggle{
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
  background: rgba(255,255,255,0.12);
}

/* Bigger logo without increasing navbar height (overlaps downward into the page).
   Enabled by adding `data-logo="overlap"` on the nav element. */
nav.site-nav[data-theme="metal-navy"][data-logo="overlap"]{
  /* More overlap = bigger logo while navbar height stays the same */
  --logo-overlap: 64px;
  --logo-max: 210px;
}

nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo{
  align-self:flex-end;
  padding-bottom:6px;
}

nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo a{
  transform: translateY(var(--logo-overlap));
}

nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo img{
  height: min(var(--logo-max), calc(var(--nav-h) + var(--logo-overlap)));
  filter:
    saturate(1.24)
    contrast(1.20)
    brightness(1.04)
    drop-shadow(0 18px 30px rgba(0,0,0,0.40))
    drop-shadow(0 2px 0 rgba(255,255,255,0.18));
}

@media (max-width: 860px){
  nav.site-nav[data-theme="metal-navy"][data-logo="overlap"]{
    --logo-overlap: 0px;
    --logo-max: 68px;
  }
  nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo{
    align-self: center;
    padding-bottom: 0;
  }
  nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo a{
    transform: translateY(0) !important;
  }
  nav.site-nav[data-theme="metal-navy"][data-logo="overlap"] .nav-logo img{
    height: 68px;
    width: auto;
  }
}

.site-nav .nav-toggle:focus-visible{
  outline:2px solid var(--gold-dark, #C9A84C);
  outline-offset:2px;
}

.site-nav .nav-toggle-icon{
  width:18px;
  height:12px;
  position:relative;
  display:inline-block;
}

.site-nav .nav-toggle-icon::before,
.site-nav .nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.site-nav .nav-toggle-icon::before{ top:0; }
.site-nav .nav-toggle-icon::after{ top:10px; }

.site-nav .nav-toggle-icon span{
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:opacity 0.2s ease;
}

.site-nav .nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.45);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:1001;
}

@media (max-width: 860px){
  :root{ --nav-h: 84px; }

  .site-nav .nav-toggle{ display:inline-flex; }

  .site-nav[data-open="true"] .nav-overlay{
    opacity:0;
    pointer-events:none;
  }

  .site-nav .nav-panel{
    display:flex;
    position:fixed;
    top:var(--nav-h);
    left:0;
    right:0;
    height:auto;
    width:100%;
    background:#fff;
    border-bottom:3px solid #C9A84C;
    padding:16px 24px 24px;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    transform:translateY(-110%);
    transition:transform 0.25s ease;
    overflow:hidden;
    z-index:1002;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    visibility:hidden;
    pointer-events:none;
  }

  .site-nav[data-open="true"] .nav-panel{
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }

  .site-nav .nav-panel a{
    font-size:12px;
    letter-spacing:0.12em;
    color: var(--navy, #1B4276);
    width:100%;
    padding:14px 0;
    border-bottom:1px solid rgba(27,66,118,0.1);
  }
  .site-nav .nav-panel a:last-child{ border-bottom:none; }
  .site-nav .nav-panel a.nav-cta{
    color: #fff;
    background: var(--navy, #1B4276);
    padding:12px 18px;
    margin-top:8px;
    width:auto;
    border-bottom:none;
  }
}

.site-nav[data-open="true"] .nav-toggle-icon span{ opacity:0; }
.site-nav[data-open="true"] .nav-toggle-icon::before{ top:5px; transform:rotate(45deg); }
.site-nav[data-open="true"] .nav-toggle-icon::after{ top:5px; transform:rotate(-45deg); }