/* ===========================
   /styles/header.css (final)
   =========================== */

/* ===== Force the thin top strip to NAVY (#0a2040) ===== */
:root { --brand-navy:#0a2040; }

.header-top,
.header_top,
.top-header,
.top_header,
.top-bar,
.topbar,
.header__top,
.top-nav,
.top_navigation,
.thin-bar,
.top-strip,
.top_strip,
.breadcrumbs,
.breadcrumb,
.breadcrumb-area,
.breadcrumbs-area,
.header-upper {
  background: var(--brand-navy) !important;
  color: #fff !important;
  border-color: var(--brand-navy) !important;
}

.header-top a,
.header_top a,
.top-header a,
.top_header a,
.top-bar a,
.topbar a,
.header__top a,
.top-nav a,
.top_navigation a,
.thin-bar a,
.top-strip a,
.top_strip a,
.breadcrumbs a,
.breadcrumb a,
.breadcrumb-area a,
.breadcrumbs-area a,
.header-upper a {
  color: #fff !important;
  text-decoration: none !important;
}

.breadcrumbs li::before,
.breadcrumb li::before { color:#fff !important; opacity:.85 }

/* ---- Theme tokens ---- */
:root{
  --topbar-fg: #ffffff;
  --nav-bg: #ffffff;
  --nav-fg: #0a2040;
  --btn-solid-bg: #0a2040;
  --btn-solid-fg: #ffffff;
  --btn-outline-fg: #0a2040;
  --border: rgba(0,0,0,.10);
  --shadow: 0 8px 18px rgba(0,0,0,.08);
  --header-h: 120px;
  --brand-size: 80px;
}

/* Utilities */
*{ box-sizing:border-box } body{ margin:0 }
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ======================
   TOP BAR (breadcrumb)
   ====================== */
.topbar{ background:var(--brand-navy)!important; color:var(--topbar-fg)!important; font-size:.93rem }
.topbar .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:.45rem 0 }
.topbar .top-links, .topbar .top-socials{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0 }
.topbar .top-links a, .topbar .top-socials a{
  color:var(--topbar-fg)!important; text-decoration:none; position:relative; display:inline-block; padding-bottom:.35rem
}
.topbar .top-links a::after, .topbar .top-socials a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.25rem; height:2px;
  background:var(--topbar-fg); transform:scaleX(0); transform-origin:left; transition:transform .22s ease
}
.topbar .top-links a:hover::after, .topbar .top-socials a:hover::after{ transform:scaleX(1) }

/* ======================
   MAIN HEADER
   ====================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--nav-bg); border-bottom:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.04); min-height:var(--header-h)
}
.site-header .container{
  max-width:1200px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; gap:16px
}

/* Logo */
.logo-m{ height:var(--brand-size); width:auto; display:block }

/* Nav layout */
.site-menu{ margin-left:auto; display:flex; align-items:center; gap:24px }
.menu-root{ list-style:none; margin:0; padding:0; display:flex; gap:24px }

/* Links + dropdown toggles */
.site-header .menu-root > .menu-item > a,
.site-header .menu-root > .menu-item > button.submenu-toggle{
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,Noto Sans;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--nav-fg) !important; text-decoration:none !important;
  display:flex; align-items:center; gap:6px;
  padding:28px 4px; cursor:pointer; background:none; border:0; appearance:none; opacity:1 !important
}

/* ★ Restore the 3-bar glyph before each TOP-LEVEL item (desktop only) */
.site-header .menu-root > .menu-item > a::before,
.site-header .menu-root > .menu-item > button.submenu-toggle::before{
  content:""; display:inline-block; width:14px; height:12px;
  margin:-2px .55rem 0 0; vertical-align:middle;
  background:
    linear-gradient(var(--nav-fg),var(--nav-fg)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--nav-fg),var(--nav-fg)) 0 5px/100% 2px no-repeat,
    linear-gradient(var(--nav-fg),var(--nav-fg)) 0 10px/100% 2px no-repeat;
  opacity:.95
}

/* Kill any theme/Bootstrap underline/caret */
.site-header .menu-root > .menu-item > a,
.site-header .menu-root > .menu-item > button.submenu-toggle{
  border:0 !important; box-shadow:none !important; background-image:none !important
}
.site-header .menu-root > .menu-item > a:hover,
.site-header .menu-root > .menu-item.is-active > a,
.site-header .menu-root > .menu-item > a:focus,
.site-header .menu-root > .menu-item > button.submenu-toggle:focus{
  color:var(--nav-fg) !important; text-decoration:none !important
}
.site-header .menu-root > .menu-item > button.submenu-toggle::after,
.dropdown-toggle::after{ display:none !important; content:none !important }

/* Dropdown (desktop) */
.menu-item.has-children{ position:relative }
.menu-item .submenu{
  position:absolute; left:0; top:100%; min-width:240px; background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:8px; box-shadow:var(--shadow); display:none
}
.menu-item:hover > .submenu{ display:block }
.submenu{ list-style:none; margin:0 }
.submenu-item > a{
  display:block; padding:11px 12px; border-radius:8px; color:var(--nav-fg) !important;
  text-decoration:none; font-weight:600; text-transform:uppercase
}
.submenu-item > a:hover{ background:#f4f6fb }

/* Right rail */
.menu-rail{ display:flex; align-items:center; gap:18px }
.auth-cta{ display:flex; gap:10px }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:12px; font-weight:700; text-decoration:none; border:2px solid transparent
}
.btn-solid{ background:var(--btn-solid-bg); color:var(--btn-solid-fg) }
.btn-outline{ color:var(--btn-outline-fg); border-color:var(--btn-outline-fg); background:#fff }
.btn:hover{ transform:translateY(-1px) }

/* Hide socials inside main header (they’re already in the top bar) */
.site-header .menu-rail .socials{ display:none !important }

/* Generic socials (if used elsewhere) */
.socials a{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border); color:var(--brand-navy); text-decoration:none
}
.socials a:hover{ box-shadow:var(--shadow) }

/* ======================
   Mobile / Tablet
   ====================== */
.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:10px;
  border:1px solid var(--border); background:#fff; cursor:pointer
}
.nav-toggle .bar{ display:block; width:22px; height:2px; margin:4px auto; background:#111 }

@media (max-width: 992px){
  :root{ --header-h:68px; --brand-size:46px }
  .menu-item:hover > .submenu{ display:none }
  .nav-toggle{ display:inline-block }

  .site-menu{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    background:#fff; transform:translateX(100%); transition:transform .3s ease;
    flex-direction:column; align-items:flex-start; padding:18px 16px; gap:18px;
    border-left:1px solid var(--border); box-shadow:var(--shadow)
  }
  .site-menu.is-open{ transform:translateX(0) }
  .menu-root{ flex-direction:column; align-items:stretch; gap:6px; width:100% }
  .menu-item > a, .menu-item > button.submenu-toggle{ padding:12px 6px; width:100%; justify-content:space-between }

  .menu-item.has-children .submenu{ position:static; display:none; border:none; padding:0; box-shadow:none; margin:6px 0 8px }
  .menu-item.has-children.open > .submenu{ display:block }
  .submenu-item > a{ padding:10px 10px 10px 16px }

  /* Hide the 3-bar glyph inside the slide-in menu */
  .site-header .menu-root > .menu-item > a::before,
  .site-header .menu-root > .menu-item > button.submenu-toggle::before{ display:none }
}

/* Sticky shadow */
.site-header[data-sticky="true"].is-scrolled{ box-shadow:0 10px 24px rgba(0,0,0,.08) }

/* “Nuke from orbit” color backup */
.site-header .menu-root > .menu-item > a,
.site-header .menu-root > .menu-item > button.submenu-toggle,
.site-header .submenu a{ color:#0a2040 !important }

/* new code */
/* ===== Remove the gap under the header ===== */
.site-header{ margin-bottom:0 !important; } /* just in case */

/* If the first block in the page has spacing, kill it */
/* main, #main, #content, .content-area, .page-content, .page-wrapper{
  margin-top:0 !important;
  padding-top:0 !important;
} */

main, #main, #content, .content-area, .page-content, .page-wrapper{
   margin-top:1% !important;
  padding-top:1% !important;
}
main > *:first-child,
#main > *:first-child,
#content > *:first-child,
.content-area > *:first-child,
.page-content > *:first-child,
.page-wrapper > *:first-child,
.container:first-child,          /* common Bootstrap wrapper */
.section:first-child {           /* many themes use .section */
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Some themes add utility spacers like mt-5/pt-5 – neutralize them when first */
main [class*="mt-"]:first-child{ margin-top:0 !important; }
main [class*="pt-"]:first-child{ padding-top:0 !important; }

/* Optional: drop this class on any section that still sits low */
.tight-top{ margin-top:0 !important; padding-top:0 !important; }
/* If you want it absolutely flush, you can pull it up a bit: */
/* .tight-top--n8{ margin-top:-8px !important; } */