/*
 * Simple Mega Menu – Frontend Styles
 * File: assets/css/mega-menu.css
 *
 * CHANGES IN THIS VERSION
 * ───────────────────────
 * Interaction layer rebuilt to match modern institutional nav behavior:
 *
 * 1. HOVER MECHANISM
 *    - Was: display:none → display:inline-grid (abrupt, no transition)
 *    - Now: opacity + translateY fade-slide (smooth, polished)
 *    - A 120ms activation delay prevents accidental drive-by triggers
 *    - A 220ms ease-out covers open; a faster 160ms covers close
 *    - pointer-events:none while hidden prevents ghost hover zones
 *    - visibility:hidden removes the panel from the a11y tree when closed
 *
 * 2. PARENT <li> POSITIONING
 *    - Was: relied on theme to set position:relative
 *    - Now: explicitly set on .has-mega-menu so it works out-of-the-box
 *
 * 3. has-mega-menu CLASS (PHP fix)
 *    - Was: class was referenced in CSS but never reliably set by PHP
 *    - Now: explicitly added in class-mega-walker.php via nav_menu_css_class
 *
 * 4. TOP-LEVEL LINK SPACING
 *    - Was: no default padding defined in plugin CSS
 *    - Now: padding:12px 18px on .has-mega-menu > a
 *
 * 5. PANEL SPACING
 *    - Was: flat padding:20px, shallow shadow
 *    - Now: padding:24px 28px, deeper shadow (0 8px 28px)
 *
 * 6. COLUMN CONTENT SPACING
 *    - Was: no internal padding on .mega-col
 *    - Now: padding:0 12px with subtle border-right dividers
 *
 * 7. LINK HOVER STATE
 *    - Was: text-decoration:underline only
 *    - Now: animated left-border accent + color shift
 *
 * 8. CSS CUSTOM PROPERTIES
 *    - New: all key values exposed as --smm-* variables for easy theming
 *
 * Grid system unchanged: repeat(3, 300px), spans 1-3.
 * ==========================================================================
 */

/* ── CSS custom properties (easy theming) ────────────────────────────────── */

:root {
    --smm-col-width:       290px;
    --smm-gap:              20px;
    --smm-panel-pad-v:      10px;
    --smm-panel-pad-h:      18px;
    --smm-col-pad:          12px;
    --smm-bg:           #ffffff;
    --smm-border-top:   #e8e8e8;
    --smm-divider:      #f0f0f0;
    --smm-shadow:       0 8px 28px rgba(0, 0, 0, 0.10);
    --smm-link-accent:  #0073aa;
    --smm-open-dur:     220ms;
    --smm-close-dur:    160ms;
    --smm-delay:        120ms;
    --smm-ease:         ease-out;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARENT MENU ITEM  (.has-mega-menu)
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Positioning context for the absolute panel.
 * overflow:visible is critical — an ancestor with overflow:hidden would
 * otherwise clip the dropdown.
 */

.has-mega-menu {
    overflow: visible;
}

/* ── Top-level trigger link ──────────────────────────────────────────────── */

.has-mega-menu > a {
    display: inline-block;
    padding: 12px 18px;
    text-decoration: none;
    white-space: nowrap;
}

.has-mega-menu > a:hover,
.has-mega-menu > a:focus-visible {
    text-decoration: none;
    opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   MEGA PANEL  (.simple-mega-menu)
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Hidden state.
 *
 * opacity + translateY + pointer-events instead of display:none/block so
 * CSS transitions work correctly.
 *
 * translateY(-6px): panel starts slightly above resting position and slides
 * down on open — a subtle lift effect common in institutional navbars.
 */

.simple-mega-menu {
    /* Grid layout */
    display: grid;
    grid-template-columns: repeat(3, var(--smm-col-width));
    gap: 0;

    /* Positioning */
    position: absolute;
    top: 100%;
    left: 178px;
    z-index: 9999;

    /* Sizing */
    box-sizing: border-box;
    padding: var(--smm-panel-pad-v) var(--smm-panel-pad-h);

    /* Visual */
    background: var(--smm-bg);
    border-top: 2px solid var(--smm-border-top);
    box-shadow: var(--smm-shadow);

    /* Hidden state */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;

    /* Close transition — no delay, snappy */
    transition:
        opacity    var(--smm-close-dur) var(--smm-ease),
        transform  var(--smm-close-dur) var(--smm-ease),
        visibility 0s linear var(--smm-close-dur);
}
.width_fixed .simple-mega-menu{
    left: 0;
    display: block;
    width: 300px;    
}
.nav-event .simple-mega-menu .columns{
    text-align: center;
    clear: both;
}
.nav-event .simple-mega-menu .columns a {
    width: 16% !important;
    display: inline-block;
    text-align: center;
    margin: 0 20px !important;
    float: none !important;
    vertical-align: top;
}
/* ── Open state ──────────────────────────────────────────────────────────── */

/*
 * :hover        — mouse / pointer users
 * :focus-within — keyboard / AT users
 *
 * var(--smm-delay) on open acts as a hover-intent guard: slow drive-by
 * cursors won't trigger the menu, intentional hovers will.
 */

.has-mega-menu:hover        > .simple-mega-menu,
.has-mega-menu:focus-within > .simple-mega-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;

    /* Open transition — slightly longer, with hover-intent delay */
    transition:
        opacity    var(--smm-open-dur) var(--smm-ease) var(--smm-delay),
        transform  var(--smm-open-dur) var(--smm-ease) var(--smm-delay),
        visibility 0s linear var(--smm-delay);
}

/* ══════════════════════════════════════════════════════════════════════════
   ROWS  (.mega-row)
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * display:contents makes each row transparent to the grid engine — its
 * children flow directly into the parent 3x300px grid, keeping column
 * alignment consistent across all rows without extra wrapper math.
 */

.mega-row {
    display: contents;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLUMNS  (.mega-col)
   ══════════════════════════════════════════════════════════════════════════ */

.mega-col {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 var(--smm-col-pad);
    border-right: 0 solid var(--smm-divider);
}

.mega-col:last-child,
.mega-col.span-3 {
    border-right: none;
}

/* Span classes: each unit = 300px */
.mega-col.span-1 { grid-column: span 1; } /*  300px */
.mega-col.span-2 { grid-column: span 2; } /*  600px */
.mega-col.span-3 { grid-column: span 3; } /*  900px */

/* ══════════════════════════════════════════════════════════════════════════
   COLUMN CONTENT STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* Links */
.mega-col a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding: 3px 0 3px 6px;
}

.mega-col a:hover,
.mega-col a:focus-visible {
    text-decoration: none;
    color: var(--smm-link-accent);
    outline: none;
}

/* Lists */
.mega-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-col ul li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.mega-col ul li:last-child {
    margin-bottom: 0;
}

/* Images */
.mega-col img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text blocks */
.mega-col p {
    margin: 0 0 10px;
    line-height: 1.5;
}

.mega-col p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

/* Respect reduced-motion: skip the slide, keep the fade */
@media (prefers-reduced-motion: reduce) {
    .simple-mega-menu,
    .has-mega-menu:hover        > .simple-mega-menu,
    .has-mega-menu:focus-within > .simple-mega-menu {
        transform: none;
        transition-property: opacity, visibility;
        transition-duration: 120ms;
        transition-delay: 0s;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE  (<=782px)
   ══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 782px) {

    .has-mega-menu {
        overflow: visible;
    }

    .has-mega-menu > a {
        padding: 10px 14px;
    }

    /* Always visible on touch screens, single fluid column */
    .simple-mega-menu {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
        transition: none !important;

        display: grid;
        grid-template-columns: 1fr;
        position: static;
        box-shadow: none;
        border-top: 1px solid var(--smm-border-top);
        padding: 12px 16px;
    }

    /* All spans collapse to full width */
    .mega-col.span-1,
    .mega-col.span-2,
    .mega-col.span-3 {
        grid-column: span 1;
        border-right: none;
        border-bottom: 1px solid var(--smm-divider);
        padding: 12px 0;
    }

    .mega-col:last-child {
        border-bottom: none;
    }
}