/* Sitewide navbar / mega-menu stylesheet
 *
 * Extracted verbatim from partials/navbar.html (1 inline <style> blocks,
 * 26KB) on 2026-09-24. It was being re-sent inside the HTML of every
 * response — uncacheable, uncompressed, and counted against the
 * MAX_INLINE_STYLE_BLOCKS ratchet in tests/architecture/test_csp_readiness.py.
 *
 * As a hashed static file it is served immutable with a 10-year max-age and
 * brotli'd by WhiteNoise, so repeat visits pay nothing for it.
 *
 * Rules are in their original source order — cascade order is load-bearing here
 * (several later blocks deliberately override earlier ones), so do not sort or
 * dedupe without checking what still wins.
 */

/* ── block 1 of 1 ─────────────────────────── */
/* ═══════════════════════════════════════
   Navbar — white / light
   Matches the original Digalu theme look with a clean white bar.
   ═══════════════════════════════════════ */
nav.navbar.validnavs.navbar-fixed {
  background: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Nav-link text — dark navy on white, matching screenshot blue tone */
nav.navbar.validnavs.navbar-fixed ul.nav > li > a {
  color: #0c4a6e !important;
}
nav.navbar.validnavs.navbar-fixed ul.nav > li > a:hover {
  color: #0ea5e9 !important;
}

/* ── User email — blue gradient pill, stands out on white navbar ── */
nav.navbar.validnavs.navbar-fixed .attr-right .nav-link.dropdown-toggle {
  background: linear-gradient(135deg, #0369a1, #0ea5e9) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em !important;
  transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
}
nav.navbar.validnavs.navbar-fixed .attr-right .nav-link.dropdown-toggle:hover {
  opacity: 0.88 !important;
  box-shadow: 0 2px 12px rgba(14,165,233,0.4) !important;
}

/* ── AI Studio (staff-only) — light outlined pill, left of the email pill ── */
nav.navbar.validnavs.navbar-fixed .attr-right .nav-link.ai-studio-navlink {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(14,165,233,0.08) !important;
  border: 1px solid rgba(3,105,161,0.3) !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
  color: #0369a1 !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
nav.navbar.validnavs.navbar-fixed .attr-right .nav-link.ai-studio-navlink:hover {
  background: rgba(14,165,233,0.16) !important;
  border-color: rgba(3,105,161,0.5) !important;
  color: #0c4a6e !important;
}
nav.navbar.validnavs.navbar-fixed .attr-right .nav-link.ai-studio-navlink i {
  color: #0ea5e9 !important;
}

/* Sign-in / Create account buttons — dark outlined on white */
nav.navbar.validnavs.navbar-fixed .attr-right .btn-outline-secondary {
  border-color: #0369a1 !important;
  color: #0369a1 !important;
}
nav.navbar.validnavs.navbar-fixed .attr-right .btn-outline-secondary:hover {
  background: #0369a1 !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════
   Home Mega-Menu with Image Preview
   ═══════════════════════════════════════ */
.home-mega-menu {
  min-width: 820px !important;
  width: 820px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

.home-mega-inner {
  display: flex !important;
  align-items: stretch !important;
  min-height: 370px !important;
  max-height: min(520px, 80vh) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* Left: item list — ~30% narrower than before */
.home-mega-items {
  flex: 0 0 310px !important;
  width: 310px !important;
  padding: 0.6rem !important;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}
.home-mega-items::-webkit-scrollbar {
  width: 5px !important;
}
.home-mega-items::-webkit-scrollbar-track {
  background: transparent !important;
}
.home-mega-items::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 99px !important;
}
.home-mega-items::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Individual item */
.home-mega-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0.55rem 0.7rem !important;
  margin-bottom: 0.15rem !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.18s ease, padding-left 0.18s ease !important;
  cursor: pointer !important;
}

.home-mega-item:hover,
.home-mega-item.is-active {
  background: #eef2ff !important;
  padding-left: 0.95rem !important;
}

/* Icon circle */
.home-item-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s ease !important;
}

.home-mega-item:hover .home-item-icon,
.home-mega-item.is-active .home-item-icon {
  transform: scale(1.08) !important;
}

.home-item-icon i {
  font-size: 0.88rem !important;
  color: #ffffff !important;
}

/* Text info */
.home-item-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.home-item-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  transition: color 0.18s ease !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.home-mega-item:hover .home-item-name,
.home-mega-item.is-active .home-item-name {
  color: #4f46e5 !important;
}

.home-item-desc {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right: image preview panel */
.home-mega-preview {
  flex: 1 1 auto !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
  overflow: hidden !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

/* ── 2×2 grid (Main Home) ── */
.home-preview-grid {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 7px !important;
  min-height: 0 !important;
}

.home-grid-cell {
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  text-decoration: none !important;
  min-height: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.home-grid-cell:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
}

.home-grid-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.home-grid-label {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 5px 8px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Single image (all other items) ── */
.home-preview-single {
  flex: 1 !important;
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14) !important;
}

.home-mega-preview-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity 0.2s ease !important;
}

.home-mega-preview-img.fading {
  opacity: 0 !important;
}

.home-mega-preview-label {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 10px 14px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%) !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* ═══════════════════════════════════════
   Mobile Hamburger Menu
   ═══════════════════════════════════════ */
.mobile-nav-link {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  display: block;
  padding: .45rem 0;
  transition: color .15s ease, padding-left .15s ease;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover { color: #60a5fa; padding-left: 4px; }

/* Accordion overrides for dark offcanvas */
#mobileNav .accordion-button {
  color: #fff !important;
  font-size: .95rem;
}
#mobileNav .accordion-button::after {
  filter: invert(1);
}
#mobileNav .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,.06) !important;
  color: #60a5fa !important;
}
#mobileNav .accordion-button:not(.collapsed)::after {
  filter: invert(0.4) sepia(1) saturate(3) hue-rotate(190deg);
}

/* Drawer auth buttons. Digalu's style.css loads after Bootstrap and sets
   `.btn { background: #E7EDF8; border: 2px solid transparent }` (plus a
   16px/50px .btn-sm and its own :focus/:hover), which erases the fills and
   borders of btn-outline-light / btn-danger / btn-primary while their white
   text survives — white on pale blue. Restore each variant for the dark drawer. */
.mobile-nav-auth .btn {
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.mobile-nav-auth .btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.mobile-nav-auth .btn-outline-light,
.mobile-nav-auth .btn-outline-light:focus { background: transparent; border-color: rgba(255,255,255,.55); }
.mobile-nav-auth .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.mobile-nav-auth .btn-danger,
.mobile-nav-auth .btn-danger:focus { background: #dc3545; }
.mobile-nav-auth .btn-danger:hover { background: #bb2d3b; color: #fff; }
.mobile-nav-auth .btn-primary,
.mobile-nav-auth .btn-primary:focus { background: #0c5adb; }
.mobile-nav-auth .btn-primary:hover { background: #0a4bb8; color: #fff; }

/* ═══════════════════════════════════════
   Corporate Nav — Chevron Toggle
   The <a> navigates; the chevron <span> opens the dropdown.
   ═══════════════════════════════════════ */
.corp-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: 0.7;
  cursor: pointer;
  position: relative;
  /* Expand the clickable hit area without changing visual size */
  padding: 8px 6px;
  margin: -8px -6px -8px 0;
}

/* ═══════════════════════════════════════
   Blog dropdown — top-level link navigates to /blog/, submenu opens on
   hover / keyboard focus (the click-toggle was removed so the link works).
   Scoped to .blog-nav-dropdown so other dropdowns keep their click behaviour.
   ═══════════════════════════════════════ */
@media (min-width: 992px) {
  .blog-nav-dropdown:hover > .dropdown-menu,
  .blog-nav-dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}

/* ═══════════════════════════════════════
   Generic Nav Active State
   Applied to any menu item when its section is currently open.
   Corporate, AI Workflows, Blog, Products, SME Portal, Home, Pages.
   ═══════════════════════════════════════ */

.nav-link-active {
  color: #0ea5e9 !important;
  font-weight: 700 !important;
  text-shadow: none;
  position: relative;
}

/* Accent bar under active link — sky-blue gradient on white navbar.
   Uses ::before to avoid conflict with Bootstrap's .dropdown-toggle::after caret. */
.nav-link-active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0369a1, #38bdf8, #0369a1, transparent);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(14,165,233,0.45);
}

/* Corporate aliases — keep existing class names working */
.corp-nav-active-link { color: #0ea5e9 !important; font-weight: 700 !important; text-shadow: none; position: relative; }
.corp-nav-active-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0369a1, #38bdf8, #0369a1, transparent);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(14,165,233,0.45);
}
.corp-nav-active { position: relative; }

/* ═══════════════════════════════════════
   Corporate Dropdown - Color Banded
   ═══════════════════════════════════════ */
.corp-mega-menu {
  min-width: 520px;
  max-width: 580px;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px;
  overflow: visible;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Header */
.corp-mega-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, #0f0c29, #302b63);
  text-decoration: none !important;
  transition: all 0.2s ease;
  border-radius: 16px 16px 0 0;
}

.corp-mega-header:hover {
  filter: brightness(1.1);
}

.corp-mega-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(102, 126, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.corp-mega-header-icon i {
  font-size: 1.1rem;
  color: #a5b4fc;
}

.corp-mega-header-text {
  flex: 1;
}

.corp-mega-header-text strong {
  display: block;
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 700;
}

.corp-mega-header-text small {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

.corp-mega-header-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.corp-mega-header:hover .corp-mega-header-arrow {
  color: #a5b4fc;
  transform: translateX(2px);
}

/* Items container */
.corp-mega-items {
  padding: 0.5rem;
}

/* Individual item */
.corp-mega-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.corp-mega-item:last-child {
  margin-bottom: 0;
}

.corp-mega-item:hover {
  padding-left: 1rem;
}

/* Color band (left accent) */
.corp-item-band {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  transition: width 0.2s ease;
}

.corp-mega-item:hover .corp-item-band {
  width: 5px;
}

/* Icon circle */
.corp-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.corp-item-icon i {
  font-size: 0.9rem;
  color: #ffffff;
}

/* Info text */
.corp-item-info {
  flex: 1;
}

.corp-item-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1e293b;
  transition: color 0.2s ease;
}

.corp-item-desc {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.3;
}

/* ── Color Bands Per Item ── */

/* 0: Indigo - Build AI Strategy */
.corp-mega-item[data-corp-index="0"] .corp-item-band {
  background: #667eea;
}
.corp-mega-item[data-corp-index="0"] .corp-item-icon {
  background: linear-gradient(135deg, #667eea, #4f46e5);
}
.corp-mega-item[data-corp-index="0"] {
  background: linear-gradient(90deg, #eef2ff 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="0"]:hover {
  background: linear-gradient(90deg, #e0e7ff 0%, #eef2ff 60%);
}
.corp-mega-item[data-corp-index="0"]:hover .corp-item-name {
  color: #4338ca;
}

/* 1: Sky - AI Strategy Samples */
.corp-mega-item[data-corp-index="1"] .corp-item-band {
  background: #0ea5e9;
}
.corp-mega-item[data-corp-index="1"] .corp-item-icon {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}
.corp-mega-item[data-corp-index="1"] {
  background: linear-gradient(90deg, #e0f2fe 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="1"]:hover {
  background: linear-gradient(90deg, #bae6fd 0%, #e0f2fe 60%);
}
.corp-mega-item[data-corp-index="1"]:hover .corp-item-name {
  color: #0369a1;
}

/* 2: Teal - AI Score Card Report */
.corp-mega-item[data-corp-index="2"] .corp-item-band {
  background: #14b8a6;
}
.corp-mega-item[data-corp-index="2"] .corp-item-icon {
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
}
.corp-mega-item[data-corp-index="2"] {
  background: linear-gradient(90deg, #ccfbf1 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="2"]:hover {
  background: linear-gradient(90deg, #99f6e4 0%, #ccfbf1 60%);
}
.corp-mega-item[data-corp-index="2"]:hover .corp-item-name {
  color: #0f766e;
}

/* 3: Amber - Market Analysis */
.corp-mega-item[data-corp-index="3"] .corp-item-band {
  background: #f59e0b;
}
.corp-mega-item[data-corp-index="3"] .corp-item-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.corp-mega-item[data-corp-index="3"] {
  background: linear-gradient(90deg, #fef3c7 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="3"]:hover {
  background: linear-gradient(90deg, #fde68a 0%, #fef3c7 60%);
}
.corp-mega-item[data-corp-index="3"]:hover .corp-item-name {
  color: #b45309;
}

/* 4: Pink - Competitor Analysis */
.corp-mega-item[data-corp-index="4"] .corp-item-band {
  background: #ec4899;
}
.corp-mega-item[data-corp-index="4"] .corp-item-icon {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.corp-mega-item[data-corp-index="4"] {
  background: linear-gradient(90deg, #fce7f3 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="4"]:hover {
  background: linear-gradient(90deg, #fbcfe8 0%, #fce7f3 60%);
}
.corp-mega-item[data-corp-index="4"]:hover .corp-item-name {
  color: #be185d;
}

/* 5: Emerald - Consulting */
.corp-mega-item[data-corp-index="5"] .corp-item-band {
  background: #10b981;
}
.corp-mega-item[data-corp-index="5"] .corp-item-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}
.corp-mega-item[data-corp-index="5"] {
  background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 40%);
}
.corp-mega-item[data-corp-index="5"]:hover {
  background: linear-gradient(90deg, #d1fae5 0%, #ecfdf5 60%);
}
.corp-mega-item[data-corp-index="5"]:hover .corp-item-name {
  color: #047857;
}

/* ── Business Package (index 6) — violet + flyout ── */
.corp-bp-trigger { overflow: visible !important; }
.corp-bp-trigger .corp-item-band { background: #7c3aed; }
.corp-bp-trigger .corp-item-icon { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.corp-bp-trigger { background: linear-gradient(90deg,#f5f3ff 0%,#ffffff 40%); position: relative; cursor: pointer; }
.corp-bp-trigger:hover, .corp-bp-trigger.corp-bp-open {
  background: linear-gradient(90deg,#ede9fe 0%,#f5f3ff 60%);
  padding-left: 1rem;
}
.corp-bp-trigger:hover .corp-item-name, .corp-bp-trigger.corp-bp-open .corp-item-name { color: #5b21b6; }

.corp-bp-arrow { font-size: .75rem; color: #a78bfa; margin-left: auto; flex-shrink: 0; transition: transform .2s, color .2s; }
.corp-bp-trigger:hover .corp-bp-arrow, .corp-bp-trigger.corp-bp-open .corp-bp-arrow { transform: translateX(2px); color: #7c3aed; }

.corp-bp-flyout {
  position: absolute; left: calc(100% + 6px); top: -8px;
  width: 290px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.18); padding: 6px;
  opacity: 0; pointer-events: none; transform: translateX(-8px);
  transition: opacity .18s ease, transform .18s ease; z-index: 1100;
}
.corp-bp-trigger:hover .corp-bp-flyout,
.corp-bp-trigger.corp-bp-open .corp-bp-flyout {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}

.corp-bp-sub {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; text-decoration: none; margin-bottom: 2px;
  transition: background .15s, padding-left .15s;
}
.corp-bp-sub:hover { background: #f5f3ff; padding-left: 14px; }
.corp-bp-sub-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.corp-bp-sub-icon i { font-size: .9rem; color: #fff; }
.corp-bp-sub-info { display: flex; flex-direction: column; }
.corp-bp-sub-name { font-size: .82rem; font-weight: 700; color: #1e293b; transition: color .15s; }
.corp-bp-sub:hover .corp-bp-sub-name { color: #7c3aed; }
.corp-bp-sub-desc { font-size: .7rem; color: #94a3b8; margin-top: 1px; }

/* ═══════════════════════════════════════
   Dropdown hover bridge
   When the mouse travels downward from a nav trigger toward its dropdown
   menu, it briefly exits the <li> bounding box (the <li> is only as tall
   as the trigger link). Without a bridge, mouseleave fires on <li> and the
   close-timer starts before the mouse reaches the menu.

   The ::after pseudo-element on li.dropdown (active state only) fills that
   gap. While the mouse is over this invisible band it is still considered
   "inside" the <li> by the browser hit-tester, so mouseleave never fires.
   ═══════════════════════════════════════ */
nav.validnavs ul.nav > li.dropdown {
  position: relative; /* required for absolute ::after */
}
nav.validnavs ul.nav > li.dropdown.on::after {
  content: '';
  position: absolute;
  left:   0;
  right:  0;
  top:    100%;      /* starts exactly at the li bottom edge */
  height: 14px;      /* covers the gap between li bottom and dropdown top */
  background: transparent;
  /* pointer-events default (auto) — mouse stays "inside" li while here */
}

/* ═══════════════════════════════════════
   Pages Mega-Menu — containing-block fix (2026-09-10)
   Reported live: hovering "Pages" showed the dropdown's first column cut
   off past the browser's left edge.

   `nav.validnavs ul.nav > li.dropdown { position: relative; }` above
   (needed for the hover-bridge ::after) has higher specificity than the
   vendor's own `nav.validnavs .dropdown.megamenu-fw { position: static; }`
   (validnavs.css) — three classes vs. three classes+3 tags beats
   three classes+1 tag — so it wins and makes the LI itself the containing
   block for this absolutely-positioned menu, instead of <nav> (already
   positioned, full navbar width) as the vendor intended. The <li> is only
   as wide as the "Pages" text (~88px) and sits wherever that item happens
   to fall in the nav, so centering the 1060px-wide menu under it via
   left:50%/translateX(-50%) below can push the menu's left edge well
   past x=0.

   Restoring position: static for .megamenu-fw specifically (below) makes
   <nav> the containing block again, so left:50%/translateX(-50%) centers
   the menu on the navbar's own width instead of the narrow toggle — which
   is what the "4-column grid fix" further below already assumed and
   requires to work correctly. The hover-bridge is unaffected for regular
   (non-mega) dropdowns, which keep li.dropdown's position: relative;
   megamenu-fw's own ::after simply falls through to <nav> as its
   containing block instead, which is harmless (a wider invisible hover
   strip, not a narrower one).
   ═══════════════════════════════════════ */
nav.validnavs ul.nav > li.dropdown.megamenu-fw {
  position: static !important;
}

/* ═══════════════════════════════════════
   Pages Mega-Menu — 4-column grid fix
   The theme's left:0/right:0 resolves against a narrower containing block
   than the full nav, cramming all 4 columns into ~540px. Override with an
   explicit width, centre it under the trigger, and force proper columns.
   ═══════════════════════════════════════ */

/* Wrapper: widened to 1060px so all items fit without overflow */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content {
  min-width: 1060px !important;
  width:     1060px !important;
  left:      50%    !important;
  right:     auto   !important;
  transform: translateX(-50%) !important;
  top:       100%   !important;
  margin-top: 0     !important;
  padding:   20px 10px !important;
}

/* The outer <li> inside the dropdown-menu — remove excess spacing */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content > li {
  padding: 0 !important;
}

/* .row — force horizontal flex so columns sit side by side */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content > li > .row {
  display:   flex      !important;
  flex-wrap: nowrap    !important;
  margin:    0         !important;
  width:     100%      !important;
}

/* Each .col-menu — equal-width column with modest horizontal padding */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .col-menu {
  flex:      1 1 0    !important;
  width:     25%      !important;
  max-width: 25%      !important;
  min-width: 0        !important;
  padding:   0 16px   !important;
  margin:    0        !important;
  border-left: 1px solid #f0f0f0 !important;
  box-sizing: border-box !important;
}
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .col-menu:first-child {
  border-left: none !important;
}

/* Column heading */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .col-menu h6.title {
  font-size:      11px  !important;
  font-weight:    700   !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color:          #0369a1 !important;
  margin-bottom:  8px   !important;
  padding-bottom: 4px   !important;
  white-space:    nowrap !important;
}

/* Content area — always visible on desktop */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .content {
  display: block  !important;
  height:  auto   !important;
}

/* Link list */
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .content ul.menu-col {
  padding-left: 0    !important;
  list-style:   none !important;
  margin:       0    !important;
}

nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .content ul.menu-col li a {
  display:     flex   !important;
  align-items: center !important;
  gap:         0      !important;
  padding:     6px 0  !important;
  font-size:   14.5px !important;
  color:       #374151 !important;
  text-decoration: none !important;
  white-space: nowrap  !important;
  transition:  color 0.15s !important;
}
nav.validnavs ul.nav li.dropdown.megamenu-fw > ul.dropdown-menu.megamenu-content .content ul.menu-col li a:hover {
  color: #0ea5e9 !important;
}

/* Icon badge shared by all Pages menu items */
.pmenu-icon {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  width:           30px        !important;
  height:          30px        !important;
  border-radius:   7px         !important;
  margin-right:    9px         !important;
  flex-shrink:     0           !important;
  color:           #fff        !important;
  font-size:       14px        !important;
  line-height:     1           !important;
}
.pmenu-icon i {
  color:       #fff !important;
  font-size:   14px !important;
  line-height: 1    !important;
}