/* ==========================================================================
   V3 Navbar restyle — match the template's sizing.
   ONLY visual sizing is changed (logo size, menu font size, button size,
   bar height/spacing). The menu content/structure is left untouched.
   Applies site-wide (the navbar is global).
   Targets the WebGurus mega-menu markup: .main-header / .wg-mm-primary /
   .header-logo / .navbar-brand.
   ========================================================================== */

/* ---- Logo: 32px -> 22px tall (template) ---- */
.main-header .header-logo,
.main-header .navbar-brand img {
  height: 22px !important;
  width: auto !important;
}

/* ---- Top-level menu links: 16px/600 -> 14px/500 (template) ---- */
.main-header .wg-mm-primary > li > a,
.main-header .wg-mm-primary > .wg-mm-link-mega > a,
.main-header .navbar-nav > li > a,
.main-header .navbar-nav .nav-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: #25252d !important;
  /* shrink the oversized bottom hover-bridge padding (was 4px 0 32px) so the
     white bar isn't so tall; keep a small bridge to the dropdown */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* keep the brand-blue accent on the open/hovered top item */
.main-header .wg-mm-primary > li:hover > a,
.main-header .wg-mm-primary > li > a:hover,
.main-header .wg-mm-primary > li.wg-mm-active > a {
  color: #2b7cff !important;
}

/* dropdown caret a touch smaller to match the lighter type */
.main-header .wg-mm-primary > li > a svg,
.main-header .wg-mm-primary .wg-mm-arrow {
  transform: scale(0.85);
}

/* ---- Header buttons (Log in / Try free): smaller, template sizing ---- */
.main-header .btn.btn-lg,
.main-header .btn.btn-xl,
.main-header .btn-secondary-gray,
.main-header .btn-black {
  font-size: 13.5px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
}

/* ---- Mega-menu dropdown items: match the smaller nav scale (16/600 -> 14) ---- */
.main-header .wg-mm-col-modules .mm-module-link > a,
.main-header .mm-module-link > a,
.main-header .mm-module-link a,
.main-header .mm-lie-title {            /* the actual visible title span (was 16px/600) */
  font-size: 14px !important;
  font-weight: 500 !important;          /* match the top-nav links (were 600) */
  letter-spacing: -0.005em;
  color: #25252d !important;            /* same color as the nav links */
}
/* any excerpt/description line under the title stays smaller + muted */
.main-header .mm-lie-excerpt,
.main-header .mm-li-header__content p {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #7d8199 !important;
}
/* tighten the dropdown's vertical spacing so it isn't so tall */
.main-header .wg-mm-col-modules .mm-module-link {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.main-header .wg-mm-col-modules .mm-module-link a { padding-top: 4px !important; padding-bottom: 4px !important; }
.main-header .wg-mm-submenu,
.main-header .wg-mm-panel,
.main-header .wg-mm-dropdown,
.main-header .wg-mm-content { padding-top: 12px !important; padding-bottom: 12px !important; }

/* ---- Hover bridge (desktop only) ----
   The dropdown (ul.sub-menu) sits ~7px below the menu item and only shows on
   li:hover. Shrinking the nav-link padding removed the old hover bridge, so the
   cursor would leave the hovered item while crossing that gap and the dropdown
   closed. This transparent strip extends the dropdown up to the link (it's a
   child of the <li>, so the cursor stays within li:hover the whole way).

   MUST stay gated to the desktop breakpoint (>=1200px). Below 1200px the menu
   is a click-driven accordion (see wg_mega-menu.js) and the submenu must remain
   in normal flow so it pushes the following items down. An unconditional
   position:absolute here took the expanded submenu out of flow on mobile, so it
   overlaid the menu items below it. */
@media (min-width: 1200px) {
  .main-header .wg-mm-primary > li > ul.sub-menu,
  .main-header .wg-mm-primary > li > .sub-menu { position: absolute; }
  .main-header .wg-mm-primary > li > ul.sub-menu::before,
  .main-header .wg-mm-primary > li > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
  }
}
/* any excerpt/description line under the title stays a touch smaller */
.main-header .mm-module-link .mm-module-excerpt,
.main-header .mm-module-link p {
  font-size: 12.5px !important;
}

/* ---- Tighten the bar toward the template's ~76px ----
   The theme hard-codes height:94px on .navbar and height:117px + 20px
   top/bottom padding on the white .main-header wrapper. Collapse the wrapper's
   padding/height so the white bar is ~76px. Sizing only — the fixed
   positioning, sticky behavior, and content offset are NOT touched. */
.main-header {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header .navbar {
  height: 76px !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header .navbar > .container,
.main-header .navbar > .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Mobile overlay menu: stop the panel from overlapping the logo ----
   The open mobile menu panel (#menu-collapse-main) is position:fixed with a
   top offset that is supposed to equal the header's bottom edge. Two things
   broke that alignment:
     1. The offset in the theme SCSS is a stale 73px from before this file
        shrank .navbar to 76px — so it no longer matched the header height.
     2. The toggler JS only adds body.menu-open; it never PINS the header. If
        the sticky-scroll header was offset (mid-scroll / sps state) when the
        menu was opened, the viewport-fixed panel floated up over the logo.
   Fix: while the menu is open, pin the header to the top and align the panel
   to the real 76px navbar height. Scoped below the xl breakpoint — the overlay
   menu only exists on mobile (the desktop nav is inline and never .menu-open). */
@media (max-width: 1199.98px) {
  body.menu-open .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1001 !important; /* keep logo + close button above the panel */
  }
  body.menu-open .main-header #menu-collapse-main {
    top: 76px !important; /* = navbar height set above */
    min-height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    min-height: calc(100dvh - 76px) !important;
    max-height: calc(100dvh - 76px) !important;
  }
  /* Logged-in: keep the pinned header below the WP admin bar (46px on mobile),
     and the panel below the header (46 + 76). */
  body.admin-bar.menu-open .main-header { top: 46px !important; }
  body.admin-bar.menu-open .main-header #menu-collapse-main {
    top: 122px !important;
    min-height: calc(100vh - 122px) !important;
    max-height: calc(100vh - 122px) !important;
    min-height: calc(100dvh - 122px) !important;
    max-height: calc(100dvh - 122px) !important;
  }
}
/* Admin bar is 32px tall from 783px up; the menu is still an overlay to 1200px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.admin-bar.menu-open .main-header { top: 32px !important; }
  body.admin-bar.menu-open .main-header #menu-collapse-main {
    top: 108px !important;
    min-height: calc(100vh - 108px) !important;
    max-height: calc(100vh - 108px) !important;
    min-height: calc(100dvh - 108px) !important;
    max-height: calc(100dvh - 108px) !important;
  }
}