/* =============================================================
   gp‑custom.css – Full Mega‑Menu & Styling Overrides for GeneratePress
   ------------------------------------------------------------
   • All menu styles that previously lived in the child theme have been
     moved here.
   • No reference to "SEJ".
   • Prefixed with .site-header to retain the same specificity.
   ============================================================= */

/* -----------------------------------------------------------------
   1. Core navigation setup – position the menu container.
   ----------------------------------------------------------------- */
.site-header .main-navigation {
    position: relative;
}
.site-header .main-navigation .main-nav {
    position: static;
}
.site-header .main-navigation .main-nav ul li.menu-item-has-children {
    position: static;
}

/* -----------------------------------------------------------------
   2. Mega‑menu container (desktop ≥769px)
   ----------------------------------------------------------------- */
@media (min-width: 769px) {
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu {
        position: absolute;
        width: 100%;
        left: 0 !important;
        right: 0;
        margin: 0 auto;
        max-width: 800px;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
        padding: 20px !important;
        background: var(--accent);
        backdrop-filter: blur(12px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.12);
        border-top: 3px solid #333333;
        border-radius: 0 0 8px 8px;
        z-index: 99999;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    }
    /* Show dropdown on hover */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children:hover > ul.sub-menu,
    .site-header .main-navigation .main-nav ul li.menu-item-has-children.sfHover > ul.sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
    /* Top‑level link hover – background & arrow */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > a {
        position: relative;
        z-index: 2;
        transition: color .3s ease, background-color .3s ease;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > a:hover {
        color: var(--accent-contrast) !important;
        background: var(--accent) !important;
        border-radius: 4px;
    }
    /* Custom arrow removed – relying on default dropdown-menu-toggle arrow */
    /* Hide any arrows that might appear in submenu items */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu li a::after {
        display: none !important;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children:hover > a::after,
    .site-header .main-navigation .main-nav ul li.menu-item-has-children.open > a::after {
        transform: rotate(-135deg);
    }
    /* Column header (first‑tier) */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu > li > a {
        background: transparent !important;
        font-family: 'Inter', sans-serif;
        color: var(--contrast) !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 0 0 12px 0 !important;
        border-bottom: 2px solid #eeeeee !important;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color .2s ease;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu > li:hover > a {
        color: var(--primary) !important;
    }
    /* Second‑tier links */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu > li > a {
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
        color: var(--accent-contrast) !important; /* hover contrast */
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu > li > a:hover {
        background: transparent !important;
        color: var(--accent-contrast) !important;
        transform: translateX(5px);
        text-decoration: underline;
    }
    /* Third‑tier links */
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu .sub-menu > li > a {
        font-weight: 400 !important;
        font-family: 'Inter', sans-serif;
        color: var(--primary) !important;
        font-size: 15px !important;
        padding: 8px 0 !important;
        background: transparent !important;
        transition: color .2s ease, padding-left .2s ease, transform .2s ease;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu .sub-menu > li > a:hover {
        background: rgba(255,255,255,0.15);
    }
    /* Sub‑menu default colour – pure white */
    .site-header .main-navigation .main-nav ul li ul.sub-menu a {
        color: #ffffff !important;
        background: transparent;
        border-bottom: 2px solid #fff;
        display: inline-block;
    }
    .site-header .main-navigation .main-nav ul li ul.sub-menu a:hover {
        color: var(--accent-contrast) !important;
        background: rgba(255,255,255,0.1);
        border-bottom: 2px solid #fff;
    }
}

/* -----------------------------------------------------------------
   3. Compact menu – smaller fonts & padding (applies to all viewports)
   ----------------------------------------------------------------- */
.site-header .main-navigation .main-nav > ul > li > a {
    font-size: 15px;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--contrast) !important; /* keep original top‑level colour */
    transition: background-color .3s ease, color .3s ease;
}
.site-header .main-navigation .main-nav ul li ul.sub-menu a {
    font-size: 13px;
    padding: 6px 10px;
}

/* -----------------------------------------------------------------
   4. Mobile accordion (≤768px)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        display: none !important; /* hidden by default, toggled by JS */
        background: var(--accent) !important;
        padding: 15px !important;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
        margin: 0 !important;
        border: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu.open {
        display: block !important; /* show when .open class added */
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu > li > a {
        font-size: 14px !important;
        padding-bottom: 8px !important;
    }
    .site-header .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu .sub-menu > li > a {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
}

/* -----------------------------------------------------------------
   5. Fallback CSS variables (for browsers without support)
   ----------------------------------------------------------------- */
:root {
    --accent-contrast: #ffffff;
    --header-background: #222222;
    --contrast: #333333; /* fallback for top‑level colour */
}

/* End of gp‑custom.css */