/*
 * JetMenu compatibility layer — maps the new nav design onto JetMenu's real
 * rendered markup (which uses .jet-mega-menu-* classes, not .sslnav-*).
 * This lets the menu stay editable in WordPress/JetMenu while adopting the
 * new look. Loaded after the theme's style.css so it overrides the old header
 * styling; !important is needed to win over the existing _header.scss rules.
 *
 * SLICE 1: top-bar items — the "pill" treatment from .sslnav-top.
 * (Right-side actions and mega panels come in later slices.)
 */

/* Top-level link: font/colour only, no padding (spacing lives on the label) */
#header .jet-mega-menu-item__link--top-level {
  color: #191521 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 0 !important;
}

/* The pill sits on the label so it hugs the text. The negative margin cancels
   the horizontal padding, so the words keep their original spacing and the pill
   only extends visually on hover. */
#header .jet-mega-menu-item__link--top-level .jet-mega-menu-item__label {
  padding: 8px 12px !important;
  margin: 0 -12px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  transition: background-color .18s ease, color .18s ease !important;
}

/* Hover + keyboard focus + open state → accent pill */
#header .jet-mega-menu-item__link--top-level:hover .jet-mega-menu-item__label,
#header .jet-mega-menu-item--hover .jet-mega-menu-item__label {
  background-color: rgba(108, 75, 189, .07) !important;
  color: #6C4BBD !important;
}

/* ------------------------------------------------------------------ *
 * SLICE 2: mega panels — .sslnav-panel pasted into a JetMenu mega via
 * an Elementor HTML widget. Two problems to solve:
 *   1. The prototype hides the panel by default and absolutely-positions
 *      it under a .sslnav-has-panel parent that doesn't exist here.
 *   2. Elementor wraps the HTML in nested wrapper divs.
 * Fix: flatten the Elementor wrappers, and reveal + de-position the panel
 * so JetMenu's own mega container handles placement.
 * ------------------------------------------------------------------ */

/* Drop the old mega's gradient background image (menu-bg.jpg) — our panel
   brings its own card chrome, so the container should be transparent */
#header .jet-mega-menu-mega-container__inner {
  background: transparent !important;
  background-image: none !important;
  /* was a full-width fixed box with box-shadow: 0 10px 10px — now that it's
     transparent, that shadow showed as a faint line across the backdrop */
  box-shadow: none !important;
  /* the container's overflow:auto was clipping the panel's soft card shadow
     (abrupt cut-off); a little padding gives the shadow room to render */
  padding-bottom: 48px !important;
}

/* No backdrop dim/blur — the panel floats cleanly over the page
   (was solid rgb(0 0 0 / 50%)) */
#header .jet-mega-menu-mega-container .jet-mega-menu__backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Flatten the Elementor wrapper chain so the panel controls its own layout */
#header .jet-mega-menu-mega-container .elementor,
#header .jet-mega-menu-mega-container .elementor > .e-con,
#header .jet-mega-menu-mega-container .elementor .e-con-inner,
#header .jet-mega-menu-mega-container .elementor .elementor-widget-html,
#header .jet-mega-menu-mega-container .elementor .elementor-widget-container {
  display: contents !important;
}

/* Reveal + de-position the panel (prototype hides & absolutely-positions it;
   JetMenu's mega container positions the dropdown itself) */
#header .jet-mega-menu-mega-container .sslnav-panel {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  /* keep each panel's own designed width (.sslnav-flat = 1180, -wide = 920,
     -2col = 640), centre it, and sit ~10px below the bar like the prototype
     (top: calc(100% + 10px)) instead of Elementor's large container padding */
  margin: 10px auto !important;
}
/* Desktop only — the 2-column grid must not apply on mobile (it crushed the
   links into a 308px + tiny sliver). Below 900px the prototype's own mobile
   rules stack everything into one column. */
@media (min-width: 901px) {
  #header .jet-mega-menu-mega-container .sslnav-panel.sslnav-flat {
    display: grid !important;
    grid-template-columns: 308px 1fr !important;
    /* Put the white on the COLUMNS, not the card, so it can't peek through
       behind the purple intro at the rounded corners (the card's white was
       bleeding a thin white line/speck along the intro's rounded edges).
       Card border removed for the same reason. */
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
  }
  #header .jet-mega-menu-mega-container .sslnav-flat-intro {
    border-radius: 16px 0 0 16px !important;
  }
  #header .jet-mega-menu-mega-container .sslnav-flat-cols {
    background: #fff !important;
    border-radius: 0 16px 16px 0 !important;
  }
}

/* Mobile: JetMenu collapses the whole mega on small screens (the container is
   ~68px tall with overflow:hidden, and the panel is max-height:0/opacity:0 from
   the prototype's mobile accordion CSS whose reveal is gated on a
   .sslnav-has-panel[data-open] parent that doesn't exist here). When JetMenu
   opens an item (--hover), un-collapse the container AND the panel so it shows
   as a single-column accordion. Closed items stay collapsed. */
@media (max-width: 900px) {
  #header .jet-mega-menu-item--hover .jet-mega-menu-mega-container,
  #header .jet-mega-menu-item--hover .jet-mega-menu-mega-container__inner {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* the 48px desktop card-shadow padding isn't needed on mobile — it left a
       big empty gap before the next menu item */
    padding-bottom: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-panel {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-panel.sslnav-flat {
    display: block !important;
    grid-template-columns: none !important;
  }
  /* The prototype hides the whole intro on mobile, but it holds the primary
     link (e.g. "About SSL.com", "Knowledge Base"). Show that link, drop the
     decorative card (title/lede/gradient), and recolor from white → ink. */
  #header .jet-mega-menu-item--hover .sslnav-flat-intro {
    display: block !important;
    background: none !important;
    padding: 0 !important;
  }
  #header .sslnav-flat-intro .sslnav-flat-title,
  #header .sslnav-flat-intro .sslnav-flat-lede,
  #header .sslnav-flat-intro .sslnav-flat-rule {
    display: none !important;
  }
  /* match the intro quick-link to the regular link style (weight/size/padding
     + the 28px chip icon) instead of the intro's bold, bare-icon treatment */
  #header .jet-mega-menu-item--hover .sslnav-flat-quick a {
    color: var(--nav-ink) !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    padding: 9px 6px !important;
    gap: 11px !important;
    /* remove the prototype's -10px intro-card offset so it aligns with the
       regular links on mobile */
    margin-left: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-quick a > i {
    flex: none !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(108, 75, 189, .09) !important;
    border-radius: 8px !important;
    color: var(--nav-accent) !important;
    font-size: 15px !important;
  }
}

/* The panel's colours use --nav-* custom properties that the prototype defines
   on .sslnav. Inside JetMenu the panel isn't within .sslnav, so those vars are
   undefined and the icons/hover text fall back to gray. Redefine them here. */
#header .jet-mega-menu-mega-container .sslnav-panel {
  --nav-ink: #191521;
  --nav-accent: #6C4BBD;
  --nav-muted: rgba(25, 21, 33, .62);
}

/* Panel type weights — the prototype's 800 title / 700 category heads /
   600 quick-links read as too heavy; flatten to a clean medium (500).
   Applies on desktop and mobile. */
#header .jet-mega-menu-mega-container .sslnav-flat-title,
#header .jet-mega-menu-mega-container .sslnav-flat-head,
#header .jet-mega-menu-mega-container .sslnav-flat-head-t,
#header .jet-mega-menu-mega-container .sslnav-flat-quick a {
  font-weight: 500 !important;
}

/* ------------------------------------------------------------------ *
 * MOBILE ACCORDION POLISH (pure CSS — no drill-down JS).
 * Layered on top of the mobile reveal above. Adds a side gutter, tighter
 * list spacing with category dividers, inline-kid alignment, and restores
 * the intro as a light-purple card (title + description + quick-links) at
 * the top of each open panel. Scoped to the open mega (--hover) so it
 * out-specifies / follows the plain intro reset above, and only affects an
 * expanded panel. Font Awesome icons unchanged. No JavaScript involved
 * (deliberately not the drill-down that caused the 2026-08-27 freeze).
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Mobile logo: show only the SSL "X" mark, not the full logo-with-text.
     The logo SVG is viewBox 0 0 75 31 with the X mark at x:0-31 and the "SSL"
     letters at x:37-75; crop the container to 33px to clip the letters. */
  #header #menu a.logo {
    width: 26px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #header #menu a.logo svg {
    width: 58px !important;
    height: 24px !important;
    max-width: none !important;
    flex: none !important;
  }

  /* Top-bar declutter: drop the chat icon (the floating Intercom bubble already
     provides chat) and pull the language selector out of the crowded bar. */
  #header #phone { display: none !important; }
  #header #lang-bar { display: none !important; }
  /* Language shows as a utility link pinned to the bottom of the OPEN menu,
     using :has on the menu's open-state class — no JS involved. */
  #header:has(.jet-mega-menu--dropdown-open) #lang-bar {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483000 !important;
    background: #fff !important;
    border-top: 1px solid rgba(25, 21, 33, .12) !important;
    padding: 16px 22px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  #header:has(.jet-mega-menu--dropdown-open) #lang-bar .icon {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #191521 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    cursor: pointer !important;
  }
  #header:has(.jet-mega-menu--dropdown-open) #lang-bar .icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  #header:has(.jet-mega-menu--dropdown-open) #lang-bar .icon::after {
    content: "Language" !important;
    font: inherit !important;
  }

  /* Mobile search: the field's wrapper is built to slide out sideways on desktop
     and ends up parked off-screen above the header on mobile (position:absolute,
     top:-11px). Instead, drop it down as a full-width bar under the header when
     the search input is focused (tapping the icon focuses it). */
  #header #search-bar .search-form-wrapper {
    position: fixed !important;
    top: 63px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    background: #fff !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 2147483000 !important;
    border-bottom: 1px solid rgba(25, 21, 33, .12) !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height .2s ease, opacity .2s ease !important;
  }
  #header #search-bar:focus-within .search-form-wrapper {
    max-height: 80px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 12px 16px !important;
  }
  #header #search-bar:focus-within .search-field {
    width: 100% !important;
  }

  /* top-level rows: full-width, label on the left with the dropdown chevron
     pinned to the right edge (via flex + margin-left:auto on the existing
     caret — keeps its background-image/rotation intact), and a roomier pill. */
  #header .jet-mega-menu-item--top-level .jet-mega-menu-item__link {
    width: 100% !important;
  }
  #header .jet-mega-menu-item--top-level .jet-mega-menu-item__title {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  #header .jet-mega-menu-item--top-level .jet-mega-menu-item__label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 11px 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* smaller than JetMenu's 24px mobile default; no highlight pill on mobile */
    font-size: 17px !important;
    background: none !important;
    border-radius: 0 !important;
  }
  #header .jet-mega-menu-item--top-level .jet-mega-menu-item__label::after {
    margin-left: auto !important;
    /* smaller chevron to match the smaller label text */
    width: 12px !important;
    height: 8px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  /* no highlight pill on mobile — kill the open/hover background too */
  #header .jet-mega-menu-item__link--top-level:hover .jet-mega-menu-item__label,
  #header .jet-mega-menu-item--top-level.jet-mega-menu-item--hover .jet-mega-menu-item__label {
    background: none !important;
    background-color: transparent !important;
  }
  /* divider between each top-level section */
  #header .jet-mega-menu-item--top-level {
    border-bottom: 1px solid rgba(25, 21, 33, .1) !important;
  }
  #header .jet-mega-menu-item--top-level:last-child {
    border-bottom: 0 !important;
  }

  /* side gutter so links/icons aren't flush to the screen edges */
  #header .jet-mega-menu-item--hover .sslnav-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* tighter category rhythm + a subtle divider between categories */
  #header .jet-mega-menu-item--hover .sslnav-flat-group {
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(25, 21, 33, .08) !important;
    padding-bottom: 8px !important;
  }
  /* trim the trailing space at the bottom of the panel */
  #header .jet-mega-menu-item--hover .sslnav-flat-cols {
    padding-bottom: 2px !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-col {
    margin-bottom: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-cols > .sslnav-flat-group:last-child {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-head {
    min-height: 0 !important;
    padding: 4px 6px !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-links > li > a {
    min-height: 0 !important;
    padding: 6px 6px !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-kids {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }
  /* align the inline kids (IV/OV/EV…) under the parent link's text */
  #header .jet-mega-menu-item--hover .sslnav-flat-kids-inline {
    margin-left: 0 !important;
    padding-left: 6px !important;
  }
  /* inline kids (IV/OV/EV…) hug their comma separators — the a's horizontal
     padding was pushing each label away from its comma */
  #header .jet-mega-menu-item--hover .sslnav-flat-kids-inline > li > a {
    padding: 4px 0 !important;
  }

  /* intro card — matches the desktop dark-purple gradient + white text */
  #header .jet-mega-menu-item--hover .sslnav-flat-intro {
    display: block !important;
    background: linear-gradient(160deg, #5a3fa6 0%, #3d2a70 100%) !important;
    background-image: linear-gradient(160deg, #5a3fa6 0%, #3d2a70 100%) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin: 0 0 12px !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-intro .sslnav-flat-title {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    color: #fff !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-intro .sslnav-flat-lede {
    display: block !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, .78) !important;
    margin: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-intro .sslnav-flat-rule {
    display: none !important;
  }
  /* quick-links sit inside the card */
  #header .jet-mega-menu-item--hover .sslnav-flat-quick {
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-quick a {
    display: flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, .94) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 7px 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  #header .jet-mega-menu-item--hover .sslnav-flat-quick a > i {
    flex: none !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .14) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
  }
}