/* ==========================================================================
   WESTORX Mega-Menu
   Hover-activated full-width dropdown with columns + featured image.
   ========================================================================== */

/* The nav item that owns a mega-menu */
.nav-has-mega {
    position: static; /* mega-menu uses absolute positioning anchored to .site-header */
}

.nav-mega-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0; /* match plain nav links — same baseline */
    line-height: inherit;
}

/* Ensure all top-level nav items align on the same baseline */
.nav-list > li {
    display: flex;
    align-items: center;
}

/* The hover area for mega-menu items is extended via the ::after bridge below,
   not by inflating the link itself. */

/* Invisible "bridge" extending the hover area down to bridge the gap
   between the menu item and the dropdown — prevents accidental close
   while the cursor travels from the link to the dropdown. */
.nav-has-mega::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background: transparent;
    pointer-events: none;
    z-index: 99;
}
.nav-has-mega:hover::after,
.nav-has-mega:focus-within::after {
    pointer-events: auto;
}

/* Subtle underline animation on hover */
.nav-mega-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.nav-has-mega:hover .nav-mega-toggle::after,
.nav-has-mega:focus-within .nav-mega-toggle::after {
    transform: scaleX(1);
}

/* ── Mega panel ─────────────────────────────────────────────────────────── */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    z-index: 100;
    pointer-events: none;
}

/* Show on hover, focus, or explicit JS-driven open state */
.nav-has-mega:hover .mega-menu,
.nav-has-mega:focus-within .mega-menu,
.nav-has-mega.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* On hover: keep dropdown visible without flicker */
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 60px;
    padding: 40px 24px;
    align-items: start;
}

/* ── Columns of links ───────────────────────────────────────────────────── */
.mega-menu-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.mega-col {
    min-width: 0;
}

.mega-col-heading {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-2);
}

.mega-col-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-col-links a {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
    line-height: 1.4;
}

.mega-col-links a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

.mega-col-links .mega-link-highlight {
    font-weight: 700;
    color: var(--color-accent);
    position: relative;
    padding-left: 14px;
}
.mega-col-links .mega-link-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

/* ── Featured side image ────────────────────────────────────────────────── */
.mega-featured {
    position: relative;
    display: block;
    height: 320px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-white);
    background: var(--color-gray-1);
}

.mega-featured-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mega-featured:hover .mega-featured-image {
    transform: scale(1.05);
}

/* Dark overlay for legibility */
.mega-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

.mega-featured-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 24px 22px;
    z-index: 2;
}

.mega-featured-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px 0;
}

.mega-featured-title {
    font-family: var(--font-secondary);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.15;
    color: var(--color-white);
}

.mega-featured-cta {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease, padding-right .25s ease;
}
.mega-featured:hover .mega-featured-cta {
    color: var(--color-accent);
    padding-right: 6px;
}

/* Placeholder gradient if image fails to load / missing */
.mega-featured-image:empty,
.mega-featured-image[style*="undefined"] {
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mega-menu-inner {
        grid-template-columns: 1fr 280px;
        gap: 40px;
        padding: 32px 24px;
    }
    .mega-menu-cols {
        gap: 28px;
    }
    .mega-featured {
        height: 280px;
    }
    .mega-featured-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 900px) {
    .mega-menu-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 24px;
    }
    .mega-featured {
        height: 220px;
    }
}

/* ── Mobile: hide desktop mega-menu, drill-down lives in mobile-nav ─────── */
@media (max-width: 767px) {
    .mega-menu {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE DRILL-DOWN MENU
   Two-level stack: tap "Men" → sub-panel slides in from right.
   ========================================================================== */

/* The mobile-nav itself must clip overflowing sub-panels */
.mobile-nav {
    overflow-x: hidden !important;
}

.mobile-nav-inner {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

/* Trigger row in the root mobile-nav-list */
.mobile-has-drilldown .mobile-drilldown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 18px 0;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-black);
    text-align: left;
    cursor: pointer;
}
.mobile-has-drilldown .mobile-drilldown-toggle svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* The sliding sub-panel — covers the root list when open.
   Default: hidden. .open class shows it.
   Note: NO padding on the panel itself — header is sticky, body has its own padding. */
.mobile-subpanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    z-index: 9995;
    visibility: hidden;
    opacity: 0;
    transform: translateX(40px);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility .35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.mobile-subpanel.open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* Header with Back (left) + title (right) — STICKY at the top of the panel */
.mobile-subpanel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 40px 32px 26px;
    border-bottom: 1px solid var(--color-gray-2);
    margin-bottom: 0;
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 2;
    min-height: 86px;
}

.mobile-subpanel-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px 8px 0;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gray-3);
    transition: color var(--transition);
}
.mobile-subpanel-back:hover,
.mobile-subpanel-back:active {
    color: var(--color-black);
}

.mobile-subpanel-title {
    font-family: var(--font-secondary);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    line-height: 1;
}

/* Body — groups of links (panel-internal padding) */
.mobile-subpanel-body {
    padding: 16px 32px 40px;
}

.mobile-subpanel-heading {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 24px 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-2);
}
.mobile-subpanel-heading:first-child {
    margin-top: 0;
}

.mobile-subpanel-list {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}
.mobile-subpanel-list li {
    margin: 0;
    padding: 0;
}
.mobile-subpanel-list a {
    display: block;
    padding: 14px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-1);
    transition: color var(--transition), padding-left var(--transition);
}
.mobile-subpanel-list a:hover,
.mobile-subpanel-list a:active {
    color: var(--color-accent);
    padding-left: 4px;
}

.mobile-subpanel-list .mobile-subpanel-highlight {
    color: var(--color-accent);
    font-weight: 700;
}

/* Only show drilldown UI on mobile */
@media (min-width: 768px) {
    .mobile-has-drilldown,
    .mobile-subpanel {
        display: none !important;
    }
}