:root{
  --brand-start:#0d6efd; --brand-end:#0b5ed7;
  --bg:#f6f8fb; --fg:#0f172a; --muted:#6b7280;
  --card:#ffffff; --border:rgba(0,0,0,.08);
  --chip-bg:rgba(13,110,253,.06);
}
.calci-navbar[data-theme="dark"], .calci-offcanvas[data-theme="dark"]{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#9aa4b2; --card:#0f172a;
  --border:rgba(255,255,255,.08); --chip-bg:rgba(13,110,253,.14);
}

/* Transparent bar */
.calci-navbar{
  position:sticky; top:0; z-index:1030;
  background: transparent;
  padding:.5rem 0;
  box-shadow:none;
}

/* Desktop menu */
.calci-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:1rem; /* increased spacing */
}
.calci-menu > li > a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--fg); text-decoration:none;
  padding:.6rem 1rem; border-radius:999px;
  transition:.2s ease; white-space:nowrap;
}
.calci-menu > li:hover > a{ background: rgba(13,110,253,.10); }
.calci-menu .current-menu-item > a,
.calci-menu .current-menu-ancestor > a{ background: rgba(13,110,253,.16); }

/* Dropdowns (desktop hover) */
.calci-menu li.menu-item-has-children{ position:relative; }
.calci-menu li.menu-item-has-children > a::after{
  content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.85em;
}
.calci-menu li .sub-menu{
  position:absolute; left:0; top:100%; min-width:220px; display:none;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:14px;
  margin-top:.15rem; padding:.4rem; box-shadow:0 16px 28px rgba(0,0,0,.18);
}
.calci-menu li:hover > .sub-menu{ display:block; }
.calci-menu li .sub-menu a{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border-radius:.6rem;
  color:var(--fg); text-decoration:none;
}
.calci-menu li .sub-menu a:hover{ background: var(--chip-bg); }

/* Offcanvas (mobile) */
.offcanvas.calci-offcanvas{
  background:var(--card); color:var(--fg);
  border-left:1px solid var(--border);
}
.calci-offcanvas .offcanvas-title{ font-weight:700; }
.calci-mobile-menu{ list-style:none; margin:0; padding:0; }
.calci-mobile-menu li a{
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 0; border-bottom:1px dashed var(--border);
  color:var(--fg); text-decoration:none;
}
.calci-mobile-menu li:last-child a{ border-bottom:0; }

/* Mobile submenus */
.calci-mobile-menu li.menu-item-has-children > a{ justify-content:space-between; }
.calci-mobile-menu .toggle-sub{
  border:none; background:transparent; padding:.25rem .35rem; margin-left:.5rem;
  color:var(--muted);
}
.calci-mobile-menu .sub-menu{
  display:none; padding-left:1rem; border-left:2px solid var(--border);
}
.calci-mobile-menu .sub-menu a{ padding:.65rem 0; }

/* Toggler visible on light background */
.calci-navbar .navbar-toggler{ border:1px solid var(--border); color:var(--fg); }
.calci-navbar .navbar-toggler-icon{ background-image:none; width:1.25rem; height:1.25rem; position:relative; display:inline-block; }
.calci-navbar .navbar-toggler-icon::before,
.calci-navbar .navbar-toggler-icon::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--fg); }
.calci-navbar .navbar-toggler-icon::before{ top:4px; box-shadow: 0 6px 0 0 var(--fg); }
.calci-navbar .navbar-toggler-icon::after{ top:16px; }


/* Fit hover exactly to the anchor (no overflow from li) */
.calci-menu > li{ margin:0; padding:0; }
.calci-menu > li > a{
  display:inline-flex; align-items:center;
  padding:.6rem 1rem; border-radius:9999px;
  line-height:1.25; text-underline-offset:3px;
  background-clip: padding-box; /* crisp edges */
}
.calci-menu > li > a:hover,
.calci-menu > li > a:focus-visible{
  background: rgba(13,110,253,.12);
}
.calci-menu .current-menu-item > a,
.calci-menu .current-menu-ancestor > a{
  background: rgba(13,110,253,.18);
}
/* Keep room between items */
.calci-menu{ gap:1rem; }


/* Force-hide any theme/site branding when used with this navbar */
.calci-navbar .navbar-brand,
.calci-navbar .site-branding,
.calci-navbar .site-title,
.calci-navbar .custom-logo-link,
.calci-navbar .brand,
.calci-navbar [class*="brand"] { display:none !important; }


/* === Pill fit fix (v1.0.4) === */
.calci-navbar .calci-menu{ gap:1rem !important; }
.calci-navbar .calci-menu > li{ margin:0 !important; padding:0 !important; line-height:0 !important; list-style:none; }
.calci-navbar .calci-menu > li > a{
  box-sizing:border-box !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:.55rem 1rem !important; line-height:1 !important; border-radius:9999px !important;
  white-space:nowrap !important; background:transparent !important; color:var(--fg) !important;
  border:1px solid transparent !important; text-decoration:none !important;
  background-clip:padding-box !important;
}
.calci-navbar .calci-menu > li > a:hover,
.calci-navbar .calci-menu > li > a:focus-visible{
  background:rgba(13,110,253,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(13,110,253,.18) !important;
}
.calci-navbar .calci-menu .current-menu-item > a,
.calci-navbar .calci-menu .current-menu-ancestor > a{
  background:rgba(13,110,253,.18) !important;
  box-shadow:inset 0 0 0 1px rgba(13,110,253,.22) !important;
}
/* Neutralize theme nav link paddings that can break the oval */
.calci-navbar .calci-menu a.nav-link{ padding:0 !important; }


/* === Mega Menu (v1.1.0) === */
/* Add CSS class "calci-mega" to a top-level parent in WP Menus to enable mega layout.
   Structure: Parent (class: calci-mega) -> sub-menu (columns) -> sub-sub-menu (links)
*/

.calci-navbar .container-xxl{ position:relative; }

/* Parent positioning so panel spans container */
.calci-menu > li.calci-mega{ position:static; }

/* Mega panel */
.calci-menu > li.calci-mega > .sub-menu{
  position:absolute; left:0; right:0; top: calc(100% + .15rem);
  display:none;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:16px;
  margin-top:.75rem; padding:1rem;
  box-shadow:0 16px 28px rgba(0,0,0,.18);
  width:auto;
}

/* Show on hover */
.calci-menu > li.calci-mega:hover > .sub-menu{ display:block; }

/* Grid columns are first-level items inside the mega panel */
.calci-menu > li.calci-mega > .sub-menu{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 16px;
}

/* 3 or 5 columns helpers (optional) */
.calci-menu > li.calci-mega.columns-3 > .sub-menu{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.calci-menu > li.calci-mega.columns-5 > .sub-menu{ grid-template-columns: repeat(5, minmax(0,1fr)); }

/* Column header = the direct child link */
.calci-menu > li.calci-mega > .sub-menu > li > a{
  font-weight:700; color:var(--fg); padding:.5rem .6rem; border-radius:.6rem;
}
.calci-menu > li.calci-mega > .sub-menu > li > a:hover{ background: var(--chip-bg); }

/* Links inside each column: the next-level sub-menu */
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu{
  position:static; display:block; border:none; box-shadow:none; margin: .3rem 0 0 0; padding:0;
}
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border-radius:.5rem; color:var(--fg); text-decoration:none;
}
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a:hover{ background: var(--chip-bg); }

/* Responsive: collapse mega to single column on small screens (offcanvas handles UX) */
@media (max-width: 991.98px){
  .calci-menu > li.calci-mega > .sub-menu{ display:none !important; }
}


/* === Mega Menu Compatibility (v1.1.1) === */
/* Ensure the mega panel anchors to the navbar container and doesn't drift */
.calci-navbar{ position:relative; overflow:visible !important; }
.calci-navbar > .container-xxl,
.calci-navbar > .container,
.calci-navbar > .container-fluid{ position:relative; overflow:visible; }
.calci-navbar .calci-menu{ position:relative; z-index:2; }

/* Default: container-wide mega (spans the nav container) */
.calci-menu > li.calci-mega{ position:static; }
.calci-menu > li.calci-mega > .sub-menu{
  position:absolute; inset-inline: 0; top: calc(100% + .15rem);
  display:none;
  z-index:1005;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:16px;
  padding:1rem;
  box-shadow:0 16px 28px rgba(0,0,0,.18);
  width:auto;
}

/* Prevent hover gap when moving from the parent to the panel */
.calci-menu > li.calci-mega > .sub-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height: 8px; background:transparent;
}

/* Grid layout inside panel */
.calci-menu > li.calci-mega > .sub-menu{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 16px;
}
.calci-menu > li.calci-mega.columns-3 > .sub-menu{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.calci-menu > li.calci-mega.columns-5 > .sub-menu{ grid-template-columns: repeat(5, minmax(0,1fr)); }

/* Column header + links styling */
.calci-menu > li.calci-mega > .sub-menu > li > a{
  font-weight:700; color:var(--fg); padding:.5rem .6rem; border-radius:.6rem;
}
.calci-menu > li.calci-mega > .sub-menu > li > a:hover{ background: var(--chip-bg); }
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu{
  position:static; display:block; border:none; box-shadow:none; margin:.3rem 0 0 0; padding:0;
}
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a{
  display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:.5rem; color:var(--fg); text-decoration:none;
}
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a:hover{ background: var(--chip-bg); }

/* Show on hover/focus */
.calci-menu > li.calci-mega:hover > .sub-menu,
.calci-menu > li.calci-mega:focus-within > .sub-menu{ display:block; }

/* Optional mode: item-aligned mega (align panel under the parent item) */
.calci-menu > li.calci-mega.align-item{ position:relative; }
.calci-menu > li.calci-mega.align-item > .sub-menu{
  left:0; right:auto; width: auto; min-width: min(90vw, 980px);
}

/* Mobile: mega hidden (offcanvas handles UX) */
@media (max-width: 991.98px){
  .calci-menu > li.calci-mega > .sub-menu{ display:none !important; }
}


/* === GeneratePress Compatibility (v1.1.2) === */
/* Anchor the mega panel to GP's navigation wrapper */
.main-navigation{ position:relative; overflow:visible; z-index: 50; }
.main-navigation .inside-navigation{ position:relative; overflow:visible; z-index: 51; }
.main-navigation .main-nav > ul{ position:relative; z-index: 52; }

/* Parent: allow full-width panel inside GP container */
.main-navigation .main-nav ul li.calci-mega{ position:static !important; }

/* Mega panel */
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu{
  position:absolute !important;
  left: 0; right: 0; top: calc(100% + .15rem) !important;
  display:none;
  background: var(--card); color: var(--fg);
  border:1px solid var(--border); border-radius:16px;
  padding:1rem; box-shadow:0 16px 28px rgba(0,0,0,.18);
  width:auto; max-width: 100%;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px 16px;
  display:grid;
}

/* Bridge the hover gap */
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height: 8px; background:transparent;
}

/* Columns count helpers */
.main-navigation .main-nav ul li.calci-mega.columns-3 > ul.sub-menu{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.main-navigation .main-nav ul li.calci-mega.columns-5 > ul.sub-menu{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }

/* Column header & links */
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu > li > a{
  font-weight:700; color:var(--fg); padding:.5rem .6rem; border-radius:.6rem;
}
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu > li > a:hover{ background: var(--chip-bg); }
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu > li > ul.sub-menu{
  position:static !important; display:block !important; border:none !important; box-shadow:none !important;
  margin:.3rem 0 0 0; padding:0;
}
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu > li > ul.sub-menu > li > a{
  display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:.5rem; color:var(--fg); text-decoration:none;
}
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover{ background: var(--chip-bg); }

/* Show on hover/focus */
.main-navigation .main-nav ul li.calci-mega:hover > ul.sub-menu,
.main-navigation .main-nav ul li.calci-mega:focus-within > ul.sub-menu{ display:grid !important; }

/* Optional: item-aligned panel directly under Finance */
.main-navigation .main-nav ul li.calci-mega.align-item{ position:relative !important; }
.main-navigation .main-nav ul li.calci-mega.align-item > ul.sub-menu{
  right:auto !important; width: auto; min-width: min(90vw, 980px);
}

/* Disable GP default dropdown positioning for the mega parent only */
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu ul.sub-menu{ left: auto !important; top: auto !important; }


/* === Mega polish & hover intent (v1.2.0) === */

/* Reveal animation & nicer background */
.calci-menu > li.calci-mega > .sub-menu{
  background: linear-gradient(180deg, var(--card) 0%, rgba(13,110,253,.04) 100%);
  }
.calci-menu > li.calci-mega:hover > .sub-menu,
.calci-menu > li.calci-mega:focus-within > .sub-menu{
  opacity: 1;
  display: grid;
}

/* Make diagonal travel safe (bigger bridge) */
.calci-menu > li.calci-mega > .sub-menu::before{
  height: 8px;
}

/* Featured item card (add class "featured" to menu item) */
.calci-menu > li.calci-mega > .sub-menu > li.featured > a{
  border:1px solid var(--border);
  background: rgba(13,110,253,.06);
  border-radius: 12px;
  padding:.65rem .7rem;
}
.calci-menu > li.calci-mega > .sub-menu > li.featured > a:hover{
  background: rgba(13,110,253,.12);
}

/* Badges: add class on menu item like "badge-new" or "badge-hot" */
.calci-menu > li.calci-mega .badge-new > a::after,
.calci-menu > li.calci-mega .badge-hot > a::after,
.calci-menu > li.calci-mega .badge-beta > a::after{
  content: attr(data-badge);
  margin-left:.5rem; font-size:.72em; font-weight:700;
  padding:.15rem .4rem; border-radius:.5rem;
  background: rgba(13,110,253,.18);
  color: var(--fg);
}
.calci-menu > li.calci-mega .badge-hot > a::after{ background: rgba(255,99,71,.25); }
.calci-menu > li.calci-mega .badge-beta > a::after{ background: rgba(255,206,86,.25); }

/* Link micro-motion */
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a{
  transition: transform .12s ease, background-color .12s ease;
}
.calci-menu > li.calci-mega > .sub-menu > li > .sub-menu > li > a:hover{
  transform: translateX(3px);
}

/* GP selectors mirror (hover intent + animation) */
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu{
  background: linear-gradient(180deg, var(--card) 0%, rgba(13,110,253,.04) 100%);
  }
.main-navigation .main-nav ul li.calci-mega:hover > ul.sub-menu,
.main-navigation .main-nav ul li.calci-mega:focus-within > ul.sub-menu{
  opacity: 1;
  display: grid !important;
}
.main-navigation .main-nav ul li.calci-mega > ul.sub-menu::before{ height: 8px; }


/* Mobile accordion: smooth expand/collapse */
.calci-mobile-menu .sub-menu{
  display:block !important; /* manage visibility via max-height */
  overflow:hidden;
  max-height:0;
  transition:max-height .22s ease;
}
.calci-mobile-menu .sub-menu.open{ max-height: 1200px; } /* sufficiently large */


/* === v1.2.2: Force pure white submenu backgrounds (desktop) === */
.calci-menu li .sub-menu{ background:#ffffff !important; color:var(--fg) !important; }
.calci-menu > li.calci-mega > .sub-menu{ background:#ffffff !important; color:var(--fg) !important; }
.main-navigation .main-nav ul li .sub-menu{ background:#ffffff !important; color:var(--fg) !important; }
/* Keep borders subtle */
.calci-menu li .sub-menu,
.calci-menu > li.calci-mega > .sub-menu,
.main-navigation .main-nav ul li .sub-menu{ border:1px solid var(--border) !important; }

.main-navigation .main-nav ul li .sub-menu{ margin-top:.15rem !important; }

/* Search button – override GeneratePress global button bg */
.calci-nav-search-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 1.15rem;
  padding: 4px 8px;
  color: var(--fg);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.calci-nav-search-btn:hover {
  background: rgba(13,110,253,.10) !important;
  border-radius: 999px;
}
.calci-nav-search-btn:focus {
  outline: 2px solid var(--brand-start);
  border-radius: 999px;
}


/* Sticky ad (fixed-position, so hiding it never affects flow/other content):
   use visibility:hidden instead of display:none while waiting on fill status.
   display:none gave AdSense a 0-width container to measure -> "No slot size
   for availableWidth=0" error -> data-ad-status never set -> stuck hidden
   forever on every screen size. visibility:hidden keeps real width, so
   AdSense can size it; JS then flips visibility once status resolves. */
#calci-sticky-ad{visibility:hidden!important;pointer-events:none!important}
body>#calci-sticky-spacer{display:none!important}

/* === Mobile: expand-in-place category dropdown instead of navigating (v1.3.0) === */
@media (max-width: 991.98px){
  .calci-menu > li.calci-mega > a{ display:flex; align-items:center; justify-content:space-between; width:100%; }
  .calci-menu > li.calci-mega > a::after{ transition:transform .2s ease; }
  .calci-menu > li.calci-mega.mm-open > a::after{ transform:rotate(180deg); }
  .calci-menu > li.calci-mega.mm-open > .sub-menu{
    display:block !important;
    position:static !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    margin:0 0 .3rem !important;
    padding:0 0 0 .8rem !important;
    background:transparent !important;
  }
  .calci-menu > li.calci-mega.mm-open > .sub-menu > li{ display:block !important; width:100% !important; }
  .calci-menu > li.calci-mega.mm-open > .sub-menu a{
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem 0; border-bottom:1px dashed var(--border);
  }
}