/*
 * BastionGuard 1.11.48 — Menu "pill" state
 * ------------------------------------------------------------
 * Top-level items and dropdown items get the same light-blue pill
 * (background #eaf4ff, text #1c77ed) when:
 *   - the mouse is over them (hover / keyboard focus),
 *   - their panel is open,
 *   - they are the current page, or a parent of the current page.
 *
 * Loaded after bastionguard-blue.css. Works with:
 *   - the Blue header (.bg-site-header / .bg-mega-*)
 *   - the classic Bootstrap header (.bsg-header .navbar-nav / .dropdown-item / .bsg-mega-link)
 * Colours are variables: change them here to restyle everything.
 */
:root{
  --bsg-pill-bg:#eaf4ff;
  --bsg-pill-color:#1c77ed;
  --bsg-pill-radius:8px;
}
[data-bs-theme="dark"]{
  --bsg-pill-bg:rgba(28,119,237,.2);
  --bsg-pill-color:#7db8ff;
}

/* ===== Blue header — top-level items (desktop) ===== */
@media (min-width:1025px){
  /* Same bar height as before (20px top/bottom): the pill sits inside it.
     The gap between items is reduced because the pill already adds side space. */
  html body .bg-site-header .bg-mega-list{gap:clamp(4px,.7vw,12px)!important}
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item>.bg-mega-simple{
    padding:8px 12px!important;
    margin:12px 0!important;
    border-radius:var(--bsg-pill-radius)!important;
    transition:background-color .17s ease,color .17s ease!important;
  }
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger:hover,
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger:focus-visible,
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger[aria-expanded="true"],
  html body .bg-site-header .bg-mega-item.is-open>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item>.bg-mega-simple:hover,
  html body .bg-site-header .bg-mega-item>.bg-mega-simple:focus-visible,
  html body .bg-site-header .bg-mega-item:is(.is-active,.current-menu-item)>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item:is(.is-active,.current-menu-item)>.bg-mega-simple{
    background:var(--bsg-pill-bg)!important;
    color:var(--bsg-pill-color)!important;
  }
}

/* ===== Blue header — top-level items (mobile sheet) ===== */
@media (max-width:1024px){
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item>.bg-mega-simple{
    padding:0 12px!important;
    border-radius:var(--bsg-pill-radius)!important;
  }
  html body .bg-site-header .bg-mega-item.is-open>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item:is(.is-active,.current-menu-item)>.bg-mega-trigger,
  html body .bg-site-header .bg-mega-item:is(.is-active,.current-menu-item)>.bg-mega-simple,
  html body .bg-site-header .bg-mega-item>.bg-mega-trigger:active,
  html body .bg-site-header .bg-mega-item>.bg-mega-simple:active{
    background:var(--bsg-pill-bg)!important;
    color:var(--bsg-pill-color)!important;
  }
}

/* ===== Blue header — dropdown (mega panel) items ===== */
html body .bg-site-header .bg-native-card-title,
html body .bg-site-header .bg-native-card-link,
html body .bg-site-header .bg-menu-link{
  border-radius:var(--bsg-pill-radius)!important;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease!important;
}
html body .bg-site-header .bg-native-card-link{display:block;padding:6px 10px!important;margin:1px -10px!important}
html body .bg-site-header a.bg-native-card-title:is(:hover,:focus-visible,.is-active),
html body .bg-site-header a.bg-native-card-link:is(:hover,:focus-visible,.is-active),
html body .bg-site-header a.bg-menu-link:is(:hover,:focus-visible,.is-active){
  background:var(--bsg-pill-bg)!important;
  color:var(--bsg-pill-color)!important;
}
html body .bg-site-header a:is(.bg-native-card-title,.bg-native-card-link,.bg-menu-link):is(:hover,:focus-visible,.is-active) :is(.bg-menu-link-label,.bg-native-card-title,.bg-menu-link-title){
  color:var(--bsg-pill-color)!important;
}
/* 1.11.48 — the highlight fills the WHOLE card, not only the title link. */
html body .bg-site-header .bg-native-card{
  position:relative;
  transition:background-color .16s ease,border-color .16s ease!important;
}
html body .bg-site-header .bg-native-card:is(:hover,:focus-within,.is-active){
  background:var(--bsg-pill-bg)!important;
  border-color:color-mix(in srgb,var(--bsg-pill-color) 35%,transparent)!important;
}
html body .bg-site-header .bg-native-card.is-active{border-color:var(--bsg-pill-color)!important}
/* Inside the card the title has no pill of its own: the card is the pill. */
html body .bg-site-header .bg-native-card>.bg-native-card-title{background:transparent!important}
html body .bg-site-header .bg-native-card:is(:hover,:focus-within,.is-active)>.bg-native-card-title,
html body .bg-site-header .bg-native-card:is(:hover,:focus-within,.is-active)>.bg-native-card-title .bg-menu-link-label{color:var(--bsg-pill-color)!important}
/* Cards without sub-links: the whole card is clickable. */
html body .bg-site-header .bg-native-card:not(:has(.bg-native-card-subitems))>a.bg-native-card-title::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
}
html body .bg-site-header .bg-native-card:not(:has(.bg-native-card-subitems)){cursor:pointer}
/* Sub-links on a highlighted card: white pill so they stay visible. */
html body .bg-site-header .bg-native-card a.bg-native-card-link:is(:hover,:focus-visible,.is-active){background:#fff!important}
[data-bs-theme="dark"] .bg-site-header .bg-native-card a.bg-native-card-link:is(:hover,:focus-visible,.is-active){background:rgba(255,255,255,.08)!important}

/* ===== Classic Bootstrap header (fallback) ===== */
html body .site-header.bsg-header .navbar-nav>li>:is(a,button.nav-link,span.nav-link){border-radius:var(--bsg-pill-radius)!important}
html body .site-header.bsg-header .navbar-nav>li>:is(a,button.nav-link,span.nav-link):is(:hover,:focus-visible,.active,.show),
html body .site-header.bsg-header .navbar-nav>li:is(.show,.bsg-menu-open,.active,.current-menu-item,.current-menu-parent,.current-menu-ancestor)>:is(a,button.nav-link,span.nav-link){
  background:var(--bsg-pill-bg)!important;
  color:var(--bsg-pill-color)!important;
}
/* The pill replaces the old underline. */
html body .site-header.bsg-header .navbar-nav>li>:is(a,button.nav-link,span.nav-link)::before{opacity:0!important}
html body .site-header.bsg-header .dropdown-menu .dropdown-item,
html body .site-header.bsg-header .bsg-mega-menu .bsg-mega-link{border-radius:var(--bsg-pill-radius)!important}
html body .site-header.bsg-header .dropdown-menu .dropdown-item:is(:hover,:focus-visible,.active),
html body .site-header.bsg-header .dropdown-menu li:is(.active,.current-menu-item)>.dropdown-item,
html body .site-header.bsg-header .bsg-mega-menu .bsg-mega-link:is(:hover,:focus-visible,.active){
  background:var(--bsg-pill-bg)!important;
  color:var(--bsg-pill-color)!important;
}
html body .site-header.bsg-header .bsg-mega-menu .bsg-mega-link:is(:hover,:focus-visible,.active) .bsg-mega-title{color:var(--bsg-pill-color)!important}