/* Xivo — Header (v3.16.0)
   Full-width, edge-to-edge dark bar in the SAME colour as the footer (#101319),
   with the same soft blue glow. No floating pill, no side/top gaps, no rounded corners.
   Loaded after base.min.css and uses !important so it wins over the older header rules. */

.site-header{
  position:sticky!important;top:0!important;left:0!important;right:0!important;
  width:100%!important;max-width:none!important;margin:0!important;
  height:84px!important;padding:0 clamp(18px,4vw,64px)!important;
  border-radius:0!important;border:0!important;
  border-bottom:1px solid rgba(143,190,238,.16)!important;
  background:
    radial-gradient(38% 220% at 92% -60%,rgba(37,99,235,.26),transparent 70%),
    #101319!important;
  color:#fff!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  z-index:50;animation:none!important;
}
/* if the "transparent header" option is switched on in the Customizer, keep the solid bar anyway */
.xivo-bookkeeping-transparent-header .site-header{position:sticky!important;background-color:#101319!important}

/* logo → white on the dark bar */
.site-header .brand-link,.site-header .mobile-nav-brand{color:#fff!important}
.site-header .brand-link img,.site-header .xivo-theme-logo img,.site-header .custom-logo-wrap img,.site-header .custom-logo:not(.xivo-logo-mask){
  filter:brightness(0) invert(1)!important;
}
.site-header .xivo-logo-mask,.site-header .custom-logo.xivo-logo-mask{background-color:#fff!important;filter:none!important}

/* menu links */
.site-header nav>a,
.site-header .xivo-bookkeeping-menu>li>a,
.site-header .header-search-toggle,
.site-header .menu{color:rgba(255,255,255,.90)!important}
.site-header nav>a:hover,.site-header nav>a:focus-visible,
.site-header .xivo-bookkeeping-menu>li>a:hover,.site-header .xivo-bookkeeping-menu>li>a:focus-visible,
.site-header .header-search-toggle:hover{color:#8FBEEE!important}
.site-header .header-search-toggle svg{stroke:currentColor!important}

/* call-to-action stays blue so it pops on the dark bar */
.site-header .header-cta{
  background:linear-gradient(135deg,#3C7ABC,#2F6AA8)!important;color:#fff!important;
  box-shadow:0 10px 26px rgba(37,99,235,.28)!important;
}
.site-header .header-cta:hover,.site-header .header-cta:focus-visible{
  background:linear-gradient(135deg,#4B8CD0,#3C7ABC)!important;color:#fff!important;
  box-shadow:0 14px 32px rgba(37,99,235,.38)!important;
}

/* dropdowns */
.site-header .fallback-services-dropdown,
.site-header .fallback-resources-dropdown,
.site-header .xivo-bookkeeping-menu>li>.sub-menu{
  background:#101319!important;border:1px solid rgba(143,190,238,.20)!important;
  border-radius:14px!important;box-shadow:0 26px 60px rgba(0,0,0,.45)!important;
}
.site-header .fallback-services-dropdown a,
.site-header .fallback-resources-dropdown a,
.site-header .xivo-bookkeeping-menu>li>.sub-menu a{color:rgba(255,255,255,.88)!important}
.site-header .fallback-services-dropdown a:hover,.site-header .fallback-services-dropdown a:focus-visible,
.site-header .fallback-resources-dropdown a:hover,.site-header .fallback-resources-dropdown a:focus-visible,
.site-header .xivo-bookkeeping-menu>li>.sub-menu a:hover{background:rgba(255,255,255,.07)!important;color:#8FBEEE!important}

/* search panel keeps its own light look; only the header itself changes */

/* mobile / tablet menu panel */
.site-header.open nav{background:#101319!important;color:#fff!important}
.site-header.open nav>a,
.site-header.open .xivo-bookkeeping-menu>li>a{color:#fff!important;border-bottom-color:rgba(255,255,255,.12)!important}
.site-header.open nav>a:hover,
.site-header.open .xivo-bookkeeping-menu>li>a:hover{color:#8FBEEE!important}
.site-header.open .mobile-nav-head{border-bottom-color:rgba(255,255,255,.12)!important}
.site-header.open .mobile-nav-close{background:#3C7ABC!important;color:#fff!important}
.site-header.open .xivo-bookkeeping-menu .menu-chevron,
.site-header.open .fallback-services-menu .menu-chevron,
.site-header.open .fallback-resources-menu .menu-chevron{border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.site-header.open .xivo-bookkeeping-menu .sub-menu a{color:rgba(255,255,255,.85)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.site-header.open .mobile-nav-cta{background:linear-gradient(135deg,#3C7ABC,#2F6AA8)!important;color:#fff!important}

@media(max-width:1200px){
  .site-header{width:100%!important;padding:0 clamp(18px,3.5vw,40px)!important}
}
@media(max-width:900px){
  .site-header{height:72px!important;margin:0!important;top:0!important;border-radius:0!important;padding:0 20px!important}
}
@media(max-width:600px){
  .site-header{width:100%!important;padding:0 16px!important}
}

/* ── States We Serve nav item (always shown, after WP primary menu) ── */
.xivo-states-nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,.90) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  padding: 0; background: none; border: none;
  white-space: nowrap;
  transition: color .2s;
}
.xivo-states-nav-item:hover,
.xivo-states-nav-item:focus-visible { color: #8FBEEE !important; outline: none; }

/* Invisible bridge over the gap between the trigger and the dropdown, so
   moving the mouse straight down doesn't pass through empty space and
   drop the :hover state before reaching the menu. */
.xivo-states-nav-item::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 100%; min-width: 210px; height: 16px;
}

.xivo-states-dropdown {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: #101319 !important;
  border: 1px solid rgba(143,190,238,.20) !important;
  border-radius: 14px !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.45) !important;
  padding: 8px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  transform: translateX(-50%) translateY(6px);
  z-index: 999;
}
.xivo-states-nav-item:hover .xivo-states-dropdown,
.xivo-states-nav-item:focus-within .xivo-states-dropdown,
.xivo-states-nav-item.open .xivo-states-dropdown {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.xivo-states-dropdown a {
  display: flex !important; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 9px;
  color: rgba(255,255,255,.88) !important;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.xivo-states-dropdown a:hover {
  background: rgba(255,255,255,.07) !important;
  color: #8FBEEE !important;
}
.xsp-state-flag { font-size: 20px; line-height: 1; flex: none; }
.xsp-state-info small {
  display: block; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 2px;
}
.xsp-state-info strong {
  display: block; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9);
}

/* Mobile: show inline in open nav */
@media (max-width: 900px) {
  .xivo-states-nav-item {
    display: flex; width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    flex-direction: column; align-items: flex-start; gap: 0;
  }
  .xivo-states-dropdown {
    position: static; opacity: 1; pointer-events: auto; visibility: visible;
    transform: none; background: transparent !important;
    border: none !important; box-shadow: none !important;
    padding: 8px 0 0 16px;
    display: none;
  }
  .xivo-states-nav-item.open .xivo-states-dropdown { display: block; }
  .xivo-states-dropdown a { padding: 8px 0; color: rgba(255,255,255,.85) !important; }
  .xivo-states-nav-item::after { content: none; }
}

/* About fallback dropdown — used only when no WordPress Primary Menu is assigned. */
.fallback-about-menu{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.fallback-about-dropdown{position:absolute;left:-16px;top:calc(100% + 16px);min-width:360px;padding:10px;border:1px solid rgba(143,190,238,.20);border-radius:14px;background:#101319;box-shadow:0 26px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:1000}
.fallback-about-menu:hover .fallback-about-dropdown,.fallback-about-menu:focus-within .fallback-about-dropdown,.fallback-about-menu.open .fallback-about-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:900px){
.fallback-about-menu{display:block!important;padding:12px 0!important}
.fallback-about-dropdown{position:static;display:none;min-width:0;margin:8px 0 0;padding:4px;background:rgba(255,255,255,.05);box-shadow:none;opacity:1;visibility:visible;transform:none}
.fallback-about-menu.open .fallback-about-dropdown{display:block}
}

/* ── About Us mega-menu (icon + title + description) ──
   Shared by both the WordPress-menu path (.xivo-bookkeeping-menu li.has-mega-menu > .sub-menu.xvam)
   and the fallback path (.fallback-about-dropdown.xvam) when no Primary Menu is assigned. */
.site-header .xivo-bookkeeping-menu>li.has-mega-menu>.sub-menu.xvam,
.site-header .fallback-about-dropdown.xvam,
.site-header .fallback-services-dropdown.xvam,
.site-header .fallback-resources-dropdown.xvam{
  min-width:360px!important;
  max-width:calc(100vw - 32px);
  padding:10px!important;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
.site-header .xivo-bookkeeping-menu>li.has-mega-menu>.sub-menu.xvam:has(> li:nth-child(5)),
.site-header .xvam:has(> .xvam-item:nth-child(5)){
  width:min(680px,calc(100vw - 32px));
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.xvam-item{display:flex!important;align-items:flex-start;gap:14px;padding:12px!important;border-radius:12px;text-decoration:none;white-space:normal!important;transition:background .18s ease}
.xvam-item:hover,.xvam-item:focus-visible{background:rgba(255,255,255,.07)!important}
.site-header .xivo-bookkeeping-menu>li.has-mega-menu>.sub-menu.xvam>li{padding:0!important;min-width:0}
.xvam-item{min-width:0}
.xvam-icon{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(60,122,188,.20);color:#8FBEEE}
.xvam-icon svg{width:19px;height:19px;display:block}
.xvam-text strong{display:block;color:#fff!important;font-size:14px;font-weight:700;line-height:1.3;margin-bottom:3px}
.xvam-text small{display:block;color:rgba(255,255,255,.55)!important;font-size:12px;font-weight:400;line-height:1.45}
@media(max-width:900px){
.site-header.open .xivo-bookkeeping-menu>li.has-mega-menu>.sub-menu.xvam,
.site-header .fallback-about-dropdown.xvam,
.site-header .fallback-services-dropdown.xvam,
.site-header .fallback-resources-dropdown.xvam{
  min-width:0!important;
  width:100%!important;
  max-width:none;
  grid-template-columns:1fr;
}
.xvam-icon{width:34px;height:34px}
.xvam-icon svg{width:17px;height:17px}
}

/* ── Mobile drawer fix ──
   On mobile the nav is moved under <body> (.xivo-bookkeeping-mobile-nav-portal) with a white
   background, so the dark-header rules scoped to `.site-header.open` don't match it, while the
   white submenu text rules still do. Give submenu text dark colours inside the portal. */
@media (max-width: 900px) {
  .xivo-bookkeeping-mobile-nav-portal .xivo-bookkeeping-menu .sub-menu a,
  .xivo-bookkeeping-mobile-nav-portal .xivo-states-dropdown a,
  .xivo-bookkeeping-mobile-nav-portal .fallback-about-dropdown a,
  .xivo-bookkeeping-mobile-nav-portal .fallback-services-dropdown a,
  .xivo-bookkeeping-mobile-nav-portal .fallback-resources-dropdown a{color:#10231f!important}
  .xivo-bookkeeping-mobile-nav-portal .xvam-text strong,
  .xivo-bookkeeping-mobile-nav-portal .xsp-state-info strong{color:#10231f!important}
  .xivo-bookkeeping-mobile-nav-portal .xvam-text small,
  .xivo-bookkeeping-mobile-nav-portal .xsp-state-info small{color:rgba(16,35,31,.6)!important}
  .xivo-bookkeeping-mobile-nav-portal .xivo-states-nav-item{color:#10231f!important;border-bottom-color:rgba(16,35,31,.08)!important}
  .xivo-bookkeeping-mobile-nav-portal .xivo-states-dropdown a:hover,
  .xivo-bookkeeping-mobile-nav-portal .xivo-bookkeeping-menu .sub-menu a:hover{color:#155EEF!important;background:rgba(21,94,239,.06)!important}
  .xivo-bookkeeping-mobile-nav-portal .xvam-icon{background:rgba(21,94,239,.10)!important;color:#155EEF!important}
}