/**
 * Omega Design - Mega Menu Pattern Styles
 */

/* ── Header ──────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 200;
}

/* ── Panels container: sits flush below the header bar ───── */
.omega-megamenu-panels {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 199;
    pointer-events: none; /* passthrough when nothing is open */
}

/* ── Individual panel: hidden by default ─────────────────── */
.omega-megamenu-panel {
    display: none;
    pointer-events: none;
}

.omega-megamenu-panel.is-active {
    display: block;
    pointer-events: auto;
    animation: omega-panel-in 0.18s ease;
}

@keyframes omega-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Activate pointer events on the container when a panel is open */
.omega-megamenu-panels:has(.omega-megamenu-panel.is-active) {
    pointer-events: auto;
}

/* ── Nav trigger item indicator ──────────────────────────── */
.site-navigation .omega-megamenu-trigger > .wp-block-navigation-item__content::after {
    content: ' ▾';
    font-size: 0.7em;
    opacity: 0.7;
}

/* A Navigation Submenu with a mega-menu panel attached shows the mega
   panel instead of its own native child-link dropdown. */
.wp-block-navigation-item.omega-megamenu-trigger > .wp-block-navigation__submenu-container {
    display: none !important;
}

/* ── Pattern styles ──────────────────────────────────────── */
.omega-megamenu {
    width: 100%;
}

/* Mega Menu content's own top padding (--wp--preset--spacing--xl, 3rem -
   see theme.json) is sized for it as a full standalone page section, not
   for appearing right below a nav item it's already visually anchored
   to - inside a dropdown panel that reads as noticeably too far below
   the header. Only the top edge needs tightening; left/right/bottom stay
   whatever each Mega Menu's own content sets. !important is required to
   win over that inline style (the block editor always writes spacing as
   inline styles, not a class). Lives here rather than only in
   classic-header.css since block-based Navigation panels
   (.omega-megamenu-panels) show the exact same content the exact same
   way, not just the classic header. */
.omega-megamenu-panel .omega-megamenu {
    padding-top: 1.25rem !important;
}

.omega-megamenu a {
    text-decoration: none;
    transition: color .18s ease, opacity .18s ease;
}

.omega-megamenu .wp-block-list.is-style-none {
    list-style: none;
    margin: 0;
    padding: 0;
}

.omega-megamenu .wp-block-list.is-style-none li {
    margin: .35rem 0;
}

.omega-megamenu .wp-block-list a:hover,
.omega-megamenu .wp-block-group a:hover,
.omega-megamenu .wp-block-heading a:hover {
    color: var(--wp--preset--color--primary);
    opacity: 1;
}

/* Icon grid tiles */
.omega-megamenu--icon-grid .wp-block-column > .wp-block-group {
    height: 100%;
    transition: background-color .2s ease, transform .2s ease;
}

.omega-megamenu--icon-grid .wp-block-column > .wp-block-group:hover {
    background-color: rgba(31, 187, 0, .08);
    transform: translateY(-2px);
}

/* Featured promo card */
.omega-megamenu--featured .wp-block-cover {
    overflow: hidden;
}

.omega-megamenu--featured .wp-block-cover .wp-block-button__link {
    transition: filter .18s ease;
}

.omega-megamenu--featured .wp-block-cover .wp-block-button__link:hover {
    filter: brightness(1.08);
}

/* Simple inline bar */
.omega-megamenu--simple .wp-block-group p {
    margin: 0;
}

/* Latest posts query thumbnails */
.omega-megamenu--posts .wp-block-post-featured-image img {
    border-radius: 8px;
}

@media (max-width: 781px) {
    .omega-megamenu .wp-block-columns {
        gap: var(--wp--preset--spacing--m, 1rem);
    }
    .omega-megamenu--simple .wp-block-group {
        justify-content: center !important;
        text-align: center;
    }

    /* Force equal left/right edges on mobile regardless of whatever
       horizontal padding each Mega Menu's own content sets for desktop -
       an admin's desktop-only spacing choice (e.g. aligning under a wide
       nav bar) reads as a lopsided, broken layout once the panel goes
       full-width and edge-to-edge on a phone screen. !important for the
       same reason as the padding-top override above - this is always
       fighting an inline style. */
    .omega-megamenu-panel .omega-megamenu {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}