/**
 * Maxt Offroad Theme — Mega Menu Styles
 *
 * Styles for the three mega-panel types:
 *   1. Vehicle grid (mega-menu-vehicle)
 *   2. Shop category dropdown (mega-menu-shop)
 *   3. Generic multi-column dropdown (mega-menu-dropdown)
 *
 * Desktop-only: mega panels are hidden below 1024px. Mobile menu
 * is handled separately in main.css via .mxo-mobile-menu.
 *
 * @package  maxtoffroad
 * @since    1.0.0
 * @see      inc/mega-menu.php
 */

/* ===================================================================
   1. TRIGGER BUTTONS (top-level nav items that open panels)
=================================================================== */

/* List item wrapper — position context for the panel */
.mxo-mega-trigger {
    position: static;       /* panel is positioned relative to nav-bar, not li */
}

/* The button that opens the mega panel */
.mxo-mega-trigger__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground);
    cursor: pointer;
    white-space: nowrap;
    line-height: inherit;
    transition: color 0.15s ease;
}

.mxo-mega-trigger__btn:hover,
.mxo-mega-trigger__btn:focus-visible {
    color: var(--primary);
}

.mxo-mega-trigger__btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* Chevron icon — rotates when panel is open */
.mxo-mega-trigger__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mxo-mega-trigger__btn[aria-expanded="true"] .mxo-mega-trigger__chevron {
    transform: rotate(180deg);
}


/* ===================================================================
   2. MEGA PANEL — shared container
=================================================================== */

.mxo-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;             /* drops below the nav-bar */
    z-index: calc(var(--z-header) - 1);
    background: var(--background);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding-block: 1.5rem;
    /* hidden by default via [hidden] attribute in HTML */
}

/* When revealed (JS removes hidden attribute) */
.mxo-mega-panel:not([hidden]) {
    display: block;
    animation: mxo-mega-fade-in 0.15s ease-out;
}

@keyframes mxo-mega-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The nav-bar needs to be the positioning context */
.mxo-header__nav-bar {
    position: relative;
}


/* ===================================================================
   3. VEHICLE GRID PANEL
=================================================================== */

.mxo-mega-vehicle__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

/* Major makes get a little more room */
.mxo-mega-vehicle__column--major {
    min-width: 180px;
}

/* Other makes column */
.mxo-mega-vehicle__column--other {
    min-width: 160px;
}

/* Make heading — Oswald, uppercase, orange link */
.mxo-mega-vehicle__make-heading {
    font-family: var(--font-display);
    font-size: 0.9375rem;      /* 15px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--primary);
}

.mxo-mega-vehicle__make-heading a {
    /* Reset the global link display/font so linked make headings match the
       text-only "Other Makes" heading exactly. A global rule was rendering this
       <a> as display:block in Inter, making the heading ~11px taller so its
       bottom border sat lower than the text-only column. Inline + inherit keeps
       every make heading (and its divider) the same height. */
    display: inline;
    font: inherit;
    line-height: inherit;
    padding: 0;
    color: var(--foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mxo-mega-vehicle__make-heading a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Model list */
.mxo-mega-vehicle__model-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mxo-mega-vehicle__model-list li {
    margin-bottom: 0.25rem;
}

.mxo-mega-vehicle__model-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;      /* 13px */
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 0.1875rem 0;
    transition: color 0.15s ease;
}

.mxo-mega-vehicle__model-list a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Arrow icon in "Other Makes" column */
.mxo-mega-vehicle__arrow {
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.mxo-mega-vehicle__model-list a:hover .mxo-mega-vehicle__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Footer — "View All Vehicles" */
.mxo-mega-vehicle__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.mxo-mega-vehicle__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.15s ease;
}

.mxo-mega-vehicle__view-all:hover {
    gap: 0.625rem;
    text-decoration: none;
}


/* ===================================================================
   4. SHOP CATEGORY DROPDOWN
=================================================================== */

.mxo-mega-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* Category heading — matches vehicle heading style */
.mxo-mega-shop__cat-heading {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--primary);
    /* Fixed two-line band so a heading that wraps ("Cargo & Racks") and one
       that does not ("Mounts", "Other Categories") keep their underline and
       sub-list at the same height across the row. Text bottom-aligns in the
       band. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 2.9em;
    box-sizing: border-box;
}

.mxo-mega-shop__cat-heading a {
    /* Reset the global mega-panel link display so the linked hub heading matches
       the text-only "Other Categories" heading. Without this the global rule
       renders this <a> as display:block inside the flex heading, pushing the text
       right (indented) instead of full-left. Mirrors the vehicle make-heading fix. */
    display: inline;
    font: inherit;
    line-height: inherit;
    padding: 0;
    color: var(--foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mxo-mega-shop__cat-heading a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Sub-category list */
.mxo-mega-shop__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mxo-mega-shop__sub-list li {
    margin-bottom: 0.25rem;
}

.mxo-mega-shop__sub-list a {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 0.1875rem 0;
    display: inline-block;
    transition: color 0.15s ease;
}

.mxo-mega-shop__sub-list a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Footer — "View All Categories" / "Shop All Products" */
.mxo-mega-shop__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.mxo-mega-shop__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.15s ease;
}

.mxo-mega-shop__view-all:hover {
    gap: 0.625rem;
    text-decoration: none;
}


/* ===================================================================
   5. GENERIC DROPDOWN (mega-menu-dropdown)
   Compact panel anchored to its trigger (Resources, Company) —
   the walker adds .mxo-mega-trigger--dropdown to the <li> and
   .mxo-mega-panel--compact to the panel.
=================================================================== */

.mxo-mega-panel .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1.5rem;
}

.mxo-mega-panel .sub-menu a {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
    transition: color 0.15s ease;
}

.mxo-mega-panel .sub-menu a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Dropdown trigger anchors its own panel (not the full nav-bar) */
.mxo-mega-trigger--dropdown {
    position: relative;
}

.mxo-mega-panel--compact {
    left: 0;
    right: auto;
    min-width: 13rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding-block: 0.5rem;
}

.mxo-mega-panel--compact .sub-menu {
    display: block;
}

.mxo-mega-panel--compact .sub-menu a {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    white-space: nowrap;
}


/* ===================================================================
   6. RESPONSIVE — hide mega panels below desktop
=================================================================== */

@media (max-width: 1023px) {
    .mxo-mega-panel,
    .mxo-mega-trigger__chevron {
        display: none !important;
    }

    /* On mobile, mega trigger buttons should look like regular links */
    .mxo-mega-trigger__btn {
        pointer-events: none;
    }
}

/* Large screens — give the grid more breathing room */
@media (min-width: 1280px) {
    .mxo-mega-vehicle__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .mxo-mega-shop__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}


/* ===================================================================
   7. BRAND LOGOS IN VEHICLE PANEL (inc/brand-logos.php)
   Major make headings render the manufacturer mark; the make name
   travels as the img alt (link accessible name). Text fallback keeps
   the original heading styles.
=================================================================== */

.mxo-mega-vehicle__make-heading--logo {
    display: flex;
    align-items: flex-end;
    min-height: 2.25rem;
}

.mxo-mega-vehicle__make-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 3rem;   /* 48px cap in the menu */
    object-fit: contain;
}

/* "Other Categories" column in the shop dropdown — leaf/low-subcategory
   top-levels grouped as links, mirroring the vehicle grid's Other Makes. */
.mxo-mega-shop__sub-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.mxo-mega-shop__arrow {
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.mxo-mega-shop__sub-list a:hover .mxo-mega-shop__arrow {
    opacity: 1;
    transform: translateX(0);
}