:root{
  --bg: #0f1720;
  --nav-bg: linear-gradient(180deg,#0b1220 0%, #0e1830 100%);
  --accent: #004177;
  /* Header color set to Finnoy brand blue */
  --header-bg: #0088ff;
  --muted: #ffffff;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --radius: 10px;
  /* Reduced header shadow for a subtler, less heavy look */
  --shadow: 0 3px 10px rgba(2,6,23,0.28);
  --transition: 200ms cubic-bezier(.2,.9,.2,1);
  --nav-height: 72px;
}

/* Prevent page horizontal scroll caused by header/nav */
html,body{
  height:100%;
  overflow-x: hidden;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  width:100%;
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  /* use a header-specific variable so it can be themed independently */
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
  overflow: visible;
}

/* Light-mode header: match the site's light surface */
body.light-mode .site-header,
html.light-mode .site-header {
  /* Use the brand blue for the header in light mode as requested. A subtle
     gradient gives a bit of depth while keeping the exact brand color. */
  background: linear-gradient(180deg,var(--header-bg), #0086bb);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Dark-mode explicit override (if other CSS forces dark) */
body:not(.light-mode) .site-header,
html:not(.light-mode) .site-header {
  background: var(--header-bg);
}
.header-inner{
  position: relative;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  height:var(--nav-height);
  gap:18px;
  padding:0 12px;
  justify-content: space-between;
  box-sizing:border-box;
  min-width: 0;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  flex: 0 0 auto;
  min-width: 0;
}
.brand-logo{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}
.brand-text{
  font-weight:700;
  font-style:italic;
  font-family: "Canva Sans", "Canva Sans Display", "Helvetica Neue", Arial, sans-serif;
  letter-spacing:0.4px;
  display:inline-block;
  color: #e6eef6;
  font-size:32px;
  transform: translateY(-1px);
}

/* Ensure the brand/logo text never renders with an underline or border in
   any page (fixes News page header where it appeared underlined). */
.brand, .brand a, .brand-text {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Remove any underline/border from navigation links in all states. This
   covers link/visited/hover/focus/active and ensures no unexpected
   underlines show on pages like News. */
.nav-list .nav-link,
.nav-list .nav-link:link,
.nav-list .nav-link:visited,
.nav-list .nav-link:hover,
.nav-list .nav-link:focus,
.nav-list .nav-link:active {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Nav toggle (mobile) */
.nav-toggle{
  background:transparent;
  border:0;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  flex: 0 0 auto;
}
.nav-toggle:focus{outline:2px solid rgba(14,165,233,0.18); box-shadow:0 0 0 4px rgba(14,165,233,0.06)}

/* Main nav -- keep to the right */
.main-nav{
  margin-left:auto;
  flex: 0 1 auto;
  min-width: 0;
}

/* Nav-list: wrap instead of scrolling; prevents horizontal overflow */
.nav-list{
  list-style:none;
  display:flex;
  gap:6px;
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap: wrap;
  min-width: 0;
}

/* Desktop links */
.nav-item{ position:relative; overflow: visible; }
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  color:var(--muted);
  text-decoration:none;
  background:transparent;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  border: none;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus{
  color:var(--accent);
  background:var(--glass);
  transform:translateY(-1px);
}

/* Active state */
.nav-link.active,
.dropdown.open > .nav-link.active {
  color: var(--accent);
  background: linear-gradient(180deg, rgba(14,165,233,0.06), rgba(14,165,233,0.03));
  box-shadow: inset 0 -2px 0 rgba(14,165,233,0.12);
  transform: none;
}

/* Light-mode: keep active/hover links visible against the brand-blue header */
html.light-mode .nav-link:hover,
body.light-mode .nav-link:hover,
html.light-mode .nav-link:focus,
body.light-mode .nav-link:focus,
html[data-theme="light"] .nav-link:hover,
body[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link:focus,
body[data-theme="light"] .nav-link:focus {
  color: #ffffff !important;
  background: rgba(255,255,255,0.04) !important;
}

html.light-mode .nav-link.active,
body.light-mode .nav-link.active,
html.light-mode .dropdown.open > .nav-link.active,
body.light-mode .dropdown.open > .nav-link.active,
html[data-theme="light"] .nav-link.active,
body[data-theme="light"] .nav-link.active,
html[data-theme="light"] .dropdown.open > .nav-link.active,
body[data-theme="light"] .dropdown.open > .nav-link.active {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06) !important;
}

/* Ensure non-active nav links remain white in light-mode.
   This prevents the Home link from rendering blue on other pages
   (for example when header injection/timing causes a transient highlight). */
html.light-mode .nav-list .nav-link,
body.light-mode .nav-list .nav-link,
html[data-theme="light"] .nav-list .nav-link,
body[data-theme="light"] .nav-list .nav-link {
  color: #ffffff !important;
}

/* Dropdown menu: absolute and allowed to overflow (reparented on desktop) */
.dropdown-menu{
  position:absolute;
  top:calc(var(--nav-height) - 8px);
  left:0;
  min-width:220px;
  background:linear-gradient(180deg, rgba(12,18,30,0.95), rgba(8,14,26,0.95));
  border-radius:10px;
  padding:8px;
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
  transform-origin:top;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.98);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  border: 1px solid rgba(255,255,255,0.03);
  z-index:2000;

  display: block;
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* NEW: show dropdown only when .open is present (JS-driven). This removes :hover conflict. */
.nav-item.dropdown.open > .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* ensure dropdown items are full-width block elements stacked vertically */
.dropdown-menu .dropdown-item{
  display:block;
  width:100%;
  box-sizing: border-box;
  color:#e6eef6;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  transition: background 150ms, color 150ms;
  font-weight:500;
  white-space: normal; /* wrap long labels */
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background: rgba(255,255,255,0.03);
  color:var(--accent);
}

/* Light-mode: ensure dropdown menus and items are readable on white backgrounds */
html.light-mode .dropdown-menu,
body.light-mode .dropdown-menu {
  background: linear-gradient(180deg,#ffffff,#f4f7fb);
  border: 1px solid rgba(3,20,30,0.04);
  color: #0f1724;
}
html.light-mode .dropdown-menu .dropdown-item,
body.light-mode .dropdown-menu .dropdown-item {
  color: #0f1724;
}
html.light-mode .dropdown-menu .dropdown-item:hover,
body.light-mode .dropdown-menu .dropdown-item:hover {
  background: rgba(3,20,30,0.04);
  color: var(--accent);
}

/* Mobile layout: sliding panel from right */
@media (max-width: 880px){
  .brand-text{display:none}
  .nav-toggle{display:inline-flex}

  .main-nav{
    position:fixed;
    right:0;
    top:var(--nav-height);
    height:calc(100vh - var(--nav-height));
    width:320px;
    max-width:92vw;
  /* Mobile nav: use the subtler site nav background (less saturated than full brand-blue) */
  background: var(--nav-bg);
    box-shadow:0 20px 50px rgba(2,6,23,0.7);
    transform:translateX(110%);
    transition:transform 260ms cubic-bezier(.2,.9,.2,1);
    border-left: 1px solid rgba(255,255,255,0.02);
    padding:20px;
    display:block;
    overflow-y: auto;
  }
  .main-nav.open{ transform:translateX(0%); }

  .nav-list{
    flex-direction:column;
    gap:3px;
    align-items:stretch;
    overflow: visible;
  }
  .nav-link{
    justify-content:space-between;
    width:100%;
    text-align:left;
    white-space: normal;
    padding:10px 12px;
  }
  .dropdown-menu{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    opacity:1;
    visibility:visible;
    padding:6px;
    margin-top:8px;
    display:none;
    max-height:none;
    overflow: visible;
  }
  .dropdown.open > .dropdown-menu{ display:block; }
}

/* Mobile: adapt nav panel colors to light/dark mode for correct contrast */
@media (max-width: 880px) {
  html.light-mode .main-nav,
  body.light-mode .main-nav {
    background: linear-gradient(180deg,#ffffff,#f4f7fb) !important;
    color: #0f1724;
    border-left: 1px solid rgba(3,20,30,0.04);
  }
  /* Support dataset-based theme toggles (documentElement.dataset.theme = 'light') */
  html[data-theme="light"] .main-nav,
  body[data-theme="light"] .main-nav {
    background: linear-gradient(180deg,#ffffff,#f4f7fb) !important;
    color: #0f1724;
    border-left: 1px solid rgba(3,20,30,0.04);
  }
  /* More specific strong overrides to ensure injected header/nav always follows light theme
     (targets header-scoped nav and the open panel state). Uses explicit background-color to
     defeat any other gradient or variable-based rules that may be applied later. */
  html.light-mode header .main-nav,
  body.light-mode header .main-nav,
  html[data-theme="light"] header .main-nav,
  body[data-theme="light"] header .main-nav,
  html.light-mode .main-nav.open,
  body.light-mode .main-nav.open,
  html[data-theme="light"] .main-nav.open,
  body[data-theme="light"] .main-nav.open {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #0f1724 !important;
    border-left: 1px solid rgba(3,20,30,0.04) !important;
  }
  html.light-mode .main-nav .nav-link,
  body.light-mode .main-nav .nav-link {
    color: #0f1724 !important;
  }
  html[data-theme="light"] .main-nav .nav-link,
  body[data-theme="light"] .main-nav .nav-link {
    color: #0f1724 !important;
  }
  html.light-mode .main-nav .nav-link:hover,
  body.light-mode .main-nav .nav-link:hover {
    background: rgba(3,20,30,0.04);
    color: #004a6b;
  }
  html.light-mode .main-nav .dropdown-menu,
  body.light-mode .main-nav .dropdown-menu {
    background: linear-gradient(180deg,#ffffff,#f4f7fb);
    border: 1px solid rgba(3,20,30,0.04);
  }

  /* Dark mode explicit mobile panel override to ensure contrast */
  html:not(.light-mode) .main-nav,
  body:not(.light-mode) .main-nav {
    /* use the site's nav-bg (muted gradient) instead of the saturated brand-blue */
    background: var(--nav-bg) !important;
    color: var(--muted);
  }
  /* dataset-based dark theme support */
  html[data-theme="dark"] .main-nav,
  body[data-theme="dark"] .main-nav {
    background: var(--nav-bg) !important;
    color: var(--muted);
  }
  html:not(.light-mode) .main-nav .nav-link,
  body:not(.light-mode) .main-nav .nav-link {
    color: var(--muted);
  }
  html[data-theme="dark"] .main-nav .nav-link,
  body[data-theme="dark"] .main-nav .nav-link {
    color: var(--muted);
  }
}

/* Desktop polish */
@media (min-width: 881px){
  .nav-toggle{display:none}
  .brand-text{display:inline-block}
  .main-nav{ display:block; }
}

/* small visual helper: generate no arrow glyph — removed per design preference */
.dropdown-toggle::after{
  content: none;
  margin-left: 0;
}