/* Shared primary navigation: readable labels without shrinking on narrow screens. */
html { scroll-padding-top:calc(var(--site-header-height,148px) + var(--header-wave-height) + 12px); --header-wave-height:64px; --header-surface:var(--site-color-071a30,#071a30); }
.hdr {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px; width: 100%;
  min-height: 64px; padding: 4px clamp(20px,3vw,48px); margin: 0;
  top: auto; border-radius: 0;
}
.hdr-logo { gap: 10px; min-width: 0; }
.hdr-logo img { width: 40px; height: 40px; flex: 0 0 40px; }
.hdr-logo span { font-size: 16px; line-height: 1.4; letter-spacing: .03em; white-space: nowrap; }
.hdr-nav {
  display: flex; justify-content: flex-start; flex-wrap: nowrap;
  justify-self: center; width: max-content; max-width: 100%; min-width: 0; gap: 2px;
  overflow-x: auto; padding: 6px; scrollbar-width: thin;
  scrollbar-color: #9fc9e8 transparent;
}
.hdr-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 8px; flex: 0 0 auto;
  font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0;
  color: var(--site-color-365c76,#365c76); border-radius: 10px;
}
.hdr-actions { display: flex; gap: 8px; }
.hdr-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 12px; font-size: 13px;
  line-height: 1.4; letter-spacing: 0;
}
.hdr-actions a { border:1px solid var(--site-color-365d85,#365d85); border-radius:999px; }
.hdr a:focus-visible { outline: 2px solid var(--site-color-245f86,#245f86); outline-offset: 3px; }
@media (max-width: 1180px) {
  .hdr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; border-radius: 0; }
  .hdr-nav {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: auto; max-width: none;
    border-top: 1px solid rgba(30,136,229,.12);
  }
}
@media (max-width: 600px) {
  .hdr { width: 100%; padding: 2px 16px; gap: 6px 8px; top: auto; border-radius: 0; }
  .hdr-logo img { width: 36px; height: 36px; flex-basis: 36px; }
  .hdr-logo span { font-size: 15px; }
  .hdr-actions { display: flex; gap:4px; }
  .hdr-actions .hdr-btn-support { display: none; }
  .hdr-actions a { font-size: 12px; padding: 10px 6px; }
}

/* Keep the full-width navigation and its water edge visible while scrolling. */
header.site-navigation,
.quick-ring-page header.site-navigation {
  position:sticky; top:0; inset-inline:auto; width:100%; max-width:none;
  margin:0 0 var(--header-wave-height); border:0; border-radius:0;
  overflow:visible; box-shadow:none; backdrop-filter:none; z-index:100;
  background:var(--header-surface); color:#edf3ff;
}
header.site-navigation:not(.hdr) { padding:8px clamp(20px,3vw,48px); align-items:center; }
header.site-navigation a { color:inherit; }
html.ocean-theme header.site-navigation { background:var(--header-surface); border:0; box-shadow:none; }
.header-tide { position:absolute; top:calc(100% - 1px); left:0; width:100%; height:var(--header-wave-height); display:block; overflow:visible; pointer-events:none; }
.header-tide-surface { fill:var(--header-surface); }
.header-tide-edge { fill:none; stroke:#48729b; stroke-opacity:.45; stroke-width:1; vector-effect:non-scaling-stroke; }
@media (max-width:600px) { html { --header-wave-height:48px; } }

/* One masked glass layer covers the navigation and the wave without a seam. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html header.site-navigation,
  html.ocean-theme header.site-navigation {
    background:transparent;
    --header-wave-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%2032.93%20Q0%2032.93%2015%2033.98%20Q30%2035.03%2045%2035.99%20Q60%2036.96%2075%2037.79%20Q90%2038.61%20105%2039.25%20Q120%2039.88%20135%2040.29%20Q150%2040.69%20165%2040.84%20Q180%2040.99%20195%2040.87%20Q210%2040.76%20225%2040.39%20Q240%2040.02%20255%2039.41%20Q270%2038.81%20285%2038.01%20Q300%2037.22%20315%2036.28%20Q330%2035.34%20345%2034.32%20Q360%2033.29%20375%2032.25%20Q390%2031.21%20405%2030.21%20Q420%2029.22%20435%2028.32%20Q450%2027.43%20465%2026.69%20Q480%2025.96%20495%2025.42%20Q510%2024.88%20525%2024.57%20Q540%2024.26%20555%2024.18%20Q570%2024.10%20585%2024.26%20Q600%2024.41%20615%2024.78%20Q630%2025.14%20645%2025.68%20Q660%2026.23%20675%2026.90%20Q690%2027.57%20705%2028.32%20Q720%2029.07%20735%2029.83%20Q750%2030.60%20765%2031.32%20Q780%2032.04%20795%2032.66%20Q810%2033.29%20825%2033.76%20Q840%2034.24%20855%2034.54%20Q870%2034.83%20885%2034.92%20Q900%2035.01%20915%2034.89%20Q930%2034.76%20945%2034.44%20Q960%2034.11%20975%2033.60%20Q990%2033.09%201005%2032.44%20Q1020%2031.78%201035%2031.03%20Q1050%2030.28%201065%2029.50%20Q1080%2028.71%201095%2027.94%20Q1110%2027.17%201125%2026.47%20Q1140%2025.78%201155%2025.23%20Q1170%2024.67%201185%2024.29%20Q1200%2023.92%201215%2023.76%20Q1230%2023.59%201245%2023.67%20Q1260%2023.74%201275%2024.06%20Q1290%2024.37%201305%2024.92%20Q1320%2025.46%201335%2026.21%20Q1350%2026.96%201365%2027.87%20Q1380%2028.77%201395%2029.79%20Q1410%2030.80%201425%2031.87%20T1440%2032.93%20L1440%200%20H0%20Z%22%2F%3E%3C%2Fsvg%3E");
  }
  header.site-navigation::before {
    content:""; position:absolute; inset:0 0 calc(1px - var(--header-wave-height));
    z-index:-1; pointer-events:none;
    background:color-mix(in srgb,var(--header-surface) 56%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    backdrop-filter:blur(10px) saturate(1.1);
    mask-image:linear-gradient(#fff,#fff),var(--header-wave-mask);
    mask-size:100% calc(100% - var(--header-wave-height) + 1px),100% var(--header-wave-height);
    mask-position:top,bottom; mask-repeat:no-repeat;
  }
  header.site-navigation .header-tide-surface { fill:transparent; }
}

/* Text navigation with stationary hit areas; mobile opens a compact menu. */
html .site-navigation .hdr-nav a,
html .site-navigation .hdr-actions a { translate:none; transform:none; scale:none; white-space:nowrap; }
html .site-navigation .hdr-nav a::after { display:none; }
.header-menu { display:contents; }
.header-menu-toggle { display:none; }
@media (max-width:600px) {
  html .site-navigation.has-header-menu { grid-template-columns:minmax(0,1fr) auto; min-height:52px; }
  .has-header-menu .header-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; border:1px solid #ffffff26; border-radius:10px; padding:9px; background:#ffffff0a; color:inherit; cursor:pointer; }
  .header-menu-toggle svg { width:24px; height:24px; }
  .has-header-menu .header-menu { display:none; position:absolute; top:calc(100% + 8px); left:12px; right:12px; padding:12px; border:1px solid #ffffff24; border-radius:16px; background:color-mix(in srgb,var(--header-surface) 90%,transparent); backdrop-filter:blur(14px); box-shadow:0 12px 30px #00000030; }
  .has-header-menu.is-menu-open .header-menu { display:grid; gap:12px; }
  .has-header-menu .hdr-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-column:auto; grid-row:auto; width:auto; max-width:none; gap:6px; padding:0; border:0; overflow:visible; }
  html .has-header-menu .hdr-nav a { min-height:44px; padding:8px 4px; font-size:13px; border-radius:10px; background:#ffffff07; }
  .has-header-menu .hdr-actions { display:grid; grid-template-columns:1fr; gap:5px; padding-top:10px; border-top:1px solid #ffffff20; }
  .has-header-menu .hdr-actions .hdr-btn-support { display:inline-flex; }
  html .has-header-menu .hdr-actions a { padding:8px; font-size:13px; justify-content:center; }
}

.header-link-icon { width:15px; height:15px; flex:0 0 15px; margin-right:6px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }

.site-navigation .brand-label { display:inline-flex; align-items:center; gap:6px; }
.site-navigation .brand-moon { width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.site-navigation .brand-label .brand-role { font-size:11px; letter-spacing:0; font-weight:500; }
@media(max-width:600px) { .site-navigation .hdr-logo .brand-label { font-size:13px; gap:4px; } .site-navigation .brand-label .brand-role { font-size:10px; } .site-navigation .brand-moon { width:12px; height:12px; flex-basis:12px; } }

header.site-navigation.has-wave-clip::before { mask-image:none; clip-path:url(#header-glass-shape); }

@media(max-width:600px) {
  header.site-navigation:not(.hdr) { padding:4px 12px;gap:8px;flex-wrap:nowrap; }
  header.site-navigation:not(.hdr) > a { display:inline-flex;align-items:center;min-height:44px;font-size:13px; }
  header.site-navigation:not(.hdr) .brand-label { font-size:13px;gap:4px; }
}