/* ==========================================================================
   FlagsExpo redesign V1 (Figma) — Mega-menu dropdown panel
   Reskins the existing legacy dropdown (nav > li.mainMenuItem > ul.fallback).
   Visibility is handled entirely here (desktop :hover, mobile .is-open) —
   js/main.js's legacy hover-driven slideDown/slideUp explicitly excludes
   .mainMenuItem so it never fights these rules with inline styles.
   Shares :root custom properties from Design/css/fx-redesign.css
   ========================================================================== */

.v2-nav-list { position: relative; }

.v2-nav-list li.mainMenuItem ul.v2-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(1240px, 100%);
  min-width: 420px;
  margin: 0;
  padding: 0;
  border: 1px solid #f3f3f3;
  border-top: 3px solid var(--v2-navy);
  background: #fff;
  box-shadow: 0 24px 48px rgba(2, 20, 51, 0.16);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  z-index: 9999;
}
.v2-nav-list li.mainMenuItem:hover ul.v2-mega { display: block; }
.v2-nav-list li.mainMenuItem ul.v2-mega > li { list-style: none; margin: 0; padding: 0; }

.v2-mega-panel, .v2-mega-panel * { box-sizing: border-box; font-family: var(--v2-font); }
.v2-mega-panel { display: flex; align-items: stretch; gap: 40px; padding: 40px; }

/* ---------- Subcategory columns ---------- */
.v2-mega-links { flex: 1 1 auto; min-width: 0; }
.v2-mega-cols { display: flex; flex-wrap: wrap; gap: 32px 40px; }
.v2-mega-col { width: 200px; flex: 0 0 200px; display: flex; flex-direction: column; gap: 16px; }

.v2-mega .v2-mega-col-title {
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--v2-navy) !important; text-decoration: none;
  padding-bottom: 12px; border-bottom: 1px solid var(--v2-border);
}
.v2-mega .v2-mega-col-title:hover { color: var(--v2-red) !important; }

.v2-mega-col-subs { display: flex; flex-direction: column; gap: 5px; }
.v2-mega-col-subs .v2-mega-col-more { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; }

/* Long subcategory lists (the ones with "Show More"): lay the links out in several columns
   across the panel instead of one tall vertical column. Desktop only; mobile hides them. */
@media (min-width: 1024px) {
  .v2-mega-col:has(.v2-mega-col-more) { width: auto; flex: 1 1 400px; }
  .v2-mega-col:has(.v2-mega-col-more) .v2-mega-col-subs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 20px; align-items: start;
  }
  .v2-mega .v2-mega-col-subs .v2-mega-col-more { display: contents; }
  .v2-mega-col-subs .v2-mega-showmore { grid-column: 1 / -1; }
}

.v2-mega .v2-mega-subitem {
  font-size: 13px; line-height: 1.3; color: #767676 !important; text-decoration: none;
}
.v2-mega .v2-mega-subitem:hover { color: var(--v2-red) !important; }

.v2-mega .v2-mega-showmore {
  font-size: 12px; font-weight: 600; color: var(--v2-navy) !important;
  text-decoration: underline; text-align: left; cursor: pointer;
}
.v2-mega .v2-mega-showmore:hover { color: var(--v2-red) !important; }

/* ---------- Featured product panel ---------- */
.v2-mega .v2-mega-feature {
  flex: 0 0 300px; position: relative; display: block; overflow: hidden;
  text-decoration: none; background: #f5f6f8; min-height: 320px;
}
.v2-mega-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-mega-feature-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(0,32,91,0) 0%, rgba(0,20,51,0.88) 100%);
}
.v2-mega .v2-mega-feature-name {
  font-family: var(--v2-font-display); font-weight: 500; font-size: 18px; line-height: 1.2; color: #fff !important;
}
.v2-mega .v2-mega-feature-cta {
  font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff !important; display: inline-flex; align-items: center; gap: 6px;
}
.v2-mega .v2-mega-feature-cta::after { content: '\2192'; }

/* "View All X" link — only needed on mobile, where tapping the item label
   toggles the accordion instead of navigating (see below). */
.v2-mega .v2-mega-viewall { display: none; }

/* Mobile/tablet: the mega panel becomes a tap-to-expand accordion (v2-nav-arrow
   or item label toggle) instead of the desktop hover flyout. */
@media (max-width: 1023px) {
  /* click-only on mobile: the desktop :hover reveal above is more specific
     than a plain override, so it must be beaten with !important here —
     visibility is driven exclusively by the .is-open class (nav-toggle.js). */
  .v2-nav-list li.mainMenuItem ul.v2-mega,
  .v2-nav-list li.mainMenuItem:hover ul.v2-mega {
    display: none !important;
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border: none;
    border-top: 1px solid var(--v2-border);
    box-shadow: none;
    background: #fafafa;
    max-height: none;
    overflow-y: visible;
  }
  .v2-nav-list li.mainMenuItem.is-open ul.v2-mega { display: block !important; }

  .v2-mega-panel { flex-direction: column; gap: 16px; padding: 16px 20px; }

  /* Force readable text on the light mobile panel, including on :hover/.active —
     css/default.css has `nav ul li.mainMenuItem:hover a { color:#FFF !important }`
     scoped to max-width:767px, which also matches these nested links while the
     item is open/hovered. Beat it with a higher class count (4-5 vs its 2). */
  .v2-mega-panel a,
  .v2-nav-list li.mainMenuItem:hover .v2-mega-panel a,
  .v2-nav-list li.mainMenuItem.active .v2-mega-panel a {
    color: var(--v2-navy) !important;
  }
  .v2-mega .v2-mega-col-title { font-size: 12px; padding-bottom: 8px; }
  .v2-mega .v2-mega-subitem,
  .v2-nav-list li.mainMenuItem:hover .v2-mega-subitem,
  .v2-nav-list li.mainMenuItem.active .v2-mega-subitem {
    font-size: 11px;
    color: #767676 !important;
  }
  .v2-mega .v2-mega-viewall { font-size: 13px; }
  .v2-mega .v2-mega-feature-name,
  .v2-mega .v2-mega-feature-cta,
  .v2-nav-list li.mainMenuItem:hover .v2-mega-feature-name,
  .v2-nav-list li.mainMenuItem:hover .v2-mega-feature-cta,
  .v2-nav-list li.mainMenuItem.active .v2-mega-feature-name,
  .v2-nav-list li.mainMenuItem.active .v2-mega-feature-cta {
    color: #fff !important;
  }

  .v2-mega .v2-mega-viewall {
    display: block;
    font-weight: 700;
    text-decoration: underline;
  }

  /* Mobile accordion only goes one level deep: category -> subcategory list.
     The third-level sub-subcategory links (and their now-pointless "Show More")
     are hidden to keep the panel short — tapping a subcategory title navigates
     straight to that page. */
  .v2-mega-col-subs.catSubcatsSubs,
  .v2-mega .v2-mega-showmore { display: none !important; }

  .v2-mega-cols { flex-direction: column; gap: 10px; }
  .v2-mega-col { width: 100%; flex: 0 0 auto; gap: 8px; }
  .v2-mega .v2-mega-feature { flex-basis: auto; width: 100%; min-height: 160px; background: var(--v2-navy); }
}