/*
 * Romak — Minotti-style mega-menu (desktop) + image-card overlay (mobile).
 *
 * IMPORTANT: mega panels are controlled ONLY by JS (.is-open class).
 * No CSS :hover triggers — avoids the hidden-attribute/hover conflict.
 */

/* ─── Backdrop scrim ─────────────────────────────────────────────────────── */
.nav-backdrop {
    position: fixed;
    inset: 0;
    top: var(--h-nav, 72px);
    z-index: 885;
    background: rgba(14, 14, 12, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity  0.45s var(--ease, cubic-bezier(.22,1,.36,1)),
        visibility 0.45s;
}

.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Desktop — nav items ────────────────────────────────────────────────── */
@media (min-width: 769px) {

    /* Container for each top-level link (+ optional mega child) */
    .nav__item {
        position: static; /* mega is fixed/full-width */
        display: flex;
        align-items: center;
    }

    /* Underline on active parent */
    .nav__item.is-open > .nav__link::after {
        width: 100% !important;
    }

    /* ─── Mega panel ─────────────────────────────────────────────────── */
    .nav__mega {
        /* Rendered hidden by PHP (hidden attr), shown by JS adding .is-open to parent */
        display: none;

        position: fixed;
        top: var(--h-nav, 72px);
        left: 0;
        right: 0;
        z-index: 888;
        overflow-y: auto;
        max-height: calc(100svh - var(--h-nav, 72px));

        /* Entrance animation driven by opacity/transform on inner */
    }

    /* JS removes hidden attr first, then rAF adds .is-open to parent */
    .nav__mega.is-visible {
        display: block;
    }

    .nav__mega-inner {
        padding-block: clamp(2rem, 4vh, 3rem) clamp(2.5rem, 5vh, 3.75rem);
        background: var(--ivory, #faf8f5);
        color: var(--ink, #0e0e0c);
        opacity: 0;
        transform: translateY(-12px);
        transition:
            opacity  0.4s var(--ease, cubic-bezier(.22,1,.36,1)),
            transform 0.4s var(--ease, cubic-bezier(.22,1,.36,1));
    }

    .nav__item.is-open .nav__mega-inner {
        opacity: 1;
        transform: none;
    }

    /* ─── Mega header (eyebrow + serif title) ───────────────────────── */
    .nav__mega-head {
        margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--ink-10, rgba(14,14,12,.09));
    }

    .nav__mega-eyebrow {
        display: block;
        font-family: var(--ff-sc, sans-serif);
        font-size: 0.7rem;
        letter-spacing: 0.3em;
        color: var(--brand, #1e5548);
        font-weight: 500;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }

    .nav__mega-title {
        font-family: var(--ff-serif, serif);
        font-size: clamp(1.5rem, 2.6vw, 2.15rem);
        font-weight: 300;
        letter-spacing: 0.02em;
        line-height: 1.15;
        color: var(--ink, #0e0e0c);
    }

    /* ─── Card grid ──────────────────────────────────────────────────── */
    .nav__mega-grid {
        display: grid;
        gap: 1.1rem;
        align-items: start;
    }

    /* Asymmetric Minotti-style: first card wide+tall, rest equal */
    .nav__mega-grid--focus {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .nav__mega-grid--duo {
        grid-template-columns: 1fr 1fr;
        max-width: 52rem;
    }

    /* Single or many */
    .nav__mega-grid:not(.nav__mega-grid--focus):not(.nav__mega-grid--duo) {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    }

    /* Staggered card reveal */
    .nav__mega-group {
        min-width: 0;
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity  0.5s var(--ease, cubic-bezier(.22,1,.36,1)),
            transform 0.5s var(--ease, cubic-bezier(.22,1,.36,1));
    }

    .nav__item.is-open .nav__mega-group { opacity: 1; transform: none; }
    .nav__item.is-open .nav__mega-group:nth-child(1) { transition-delay: 0.05s; }
    .nav__item.is-open .nav__mega-group:nth-child(2) { transition-delay: 0.11s; }
    .nav__item.is-open .nav__mega-group:nth-child(3) { transition-delay: 0.17s; }
    .nav__item.is-open .nav__mega-group:nth-child(4) { transition-delay: 0.23s; }
    .nav__item.is-open .nav__mega-group:nth-child(5) { transition-delay: 0.29s; }

    /* Lead card (first in 3+ grid) — taller, portrait */
    .nav__mega-group--lead .nav__mega-card {
        height: clamp(260px, 38vh, 420px);
    }

    /* ─── L2 image card ──────────────────────────────────────────────── */
    .nav__mega-card {
        position: relative;
        display: block;
        width: 100%;
        /* Fixed height — no aspect-ratio so images never reflow */
        height: clamp(180px, 24vh, 280px);
        overflow: hidden;
        background: #d8d4ce;
        color: #fff;
        text-decoration: none;
        flex-shrink: 0;
    }

    .nav__mega-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.4s var(--ease, cubic-bezier(.22,1,.36,1));
    }

    .nav__mega-card-img--placeholder {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(145deg, #d8d4ce 0%, #b8b4ae 100%);
    }

    .nav__mega-card:hover .nav__mega-card-img,
    .nav__mega-card:focus-visible .nav__mega-card-img {
        transform: scale(1.04);
    }

    .nav__mega-card-info {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.4rem 1.5rem;
        background: linear-gradient(to top, rgba(14,14,12,.78) 0%, transparent 50%);
        pointer-events: none;
    }

    .nav__mega-card-name {
        font-family: var(--ff-serif, serif);
        font-size: clamp(1.1rem, 1.7vw, 1.55rem);
        font-weight: 400;
        line-height: 1.2;
        transform: translateY(5px);
        transition: transform 0.5s var(--ease, ease);
    }

    .nav__mega-card:hover .nav__mega-card-name,
    .nav__mega-card:focus-visible .nav__mega-card-name {
        transform: none;
    }

    .nav__mega-card-cta {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-family: var(--ff-sc, sans-serif);
        font-size: 0.58rem;
        letter-spacing: 0.22em;
        margin-top: 0.6rem;
        opacity: 0;
        transform: translateY(7px);
        transition: opacity 0.45s var(--ease, ease) 0.05s,
                    transform 0.45s var(--ease, ease) 0.05s;
    }

    .nav__mega-card-cta svg { width: 11px; height: 11px; }

    .nav__mega-card:hover .nav__mega-card-cta,
    .nav__mega-card:focus-visible .nav__mega-card-cta {
        opacity: 1;
        transform: none;
    }

    /* ─── L3 text links (Minotti: minimal, below card) ───────────────── */
    .nav__mega-l3 {
        margin-top: 0.8rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--ink-10, rgba(14,14,12,.09));
    }

    .nav__mega-l3-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.25rem;
    }

    .nav__mega-l3-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-family: var(--ff-sc, sans-serif);
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        color: rgba(14, 14, 12, 0.6);
        text-decoration: none;
        padding-block: 0.18rem;
        transition: color 0.3s, gap 0.35s var(--ease, ease);
    }

    .nav__mega-l3-link:hover,
    .nav__mega-l3-link:focus-visible {
        color: var(--brand, #1e5548);
        gap: 0.65rem;
    }

    .nav__mega-l3-thumb {
        flex: 0 0 34px;
        width: 34px;
        height: 25px;
        overflow: hidden;
        border-radius: 1px;
        background: #e8e4de;
    }

    .nav__mega-l3-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Tablet: collapse focus grid */
    @media (max-width: 1100px) {
        .nav__mega-grid--focus {
            grid-template-columns: 1fr 1fr;
        }
        .nav__mega-group--lead {
            grid-column: 1 / -1;
        }
        .nav__mega-group--lead .nav__mega-card {
            height: clamp(160px, 28vw, 260px);
        }
    }
}

/* ─── Mobile overlay ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Scrollable inner: full height, left-aligned */
    .overlay-menu__inner {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100%;
        padding-block: clamp(4.5rem, 14vh, 6.5rem) 2.5rem;
        padding-inline: var(--gutter, 1.5rem);
        overflow-y: auto;
        gap: 0 !important;
    }

    .overlay-menu__list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Each top-level item row */
    .overlay-menu__item {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity  0.55s var(--ease, ease),
            transform 0.55s var(--ease, ease);
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .overlay-menu.open .overlay-menu__item {
        opacity: 1;
        transform: none;
    }

    .overlay-menu.open .overlay-menu__item:nth-child(1) { transition-delay: 0.06s; }
    .overlay-menu.open .overlay-menu__item:nth-child(2) { transition-delay: 0.10s; }
    .overlay-menu.open .overlay-menu__item:nth-child(3) { transition-delay: 0.14s; }
    .overlay-menu.open .overlay-menu__item:nth-child(4) { transition-delay: 0.18s; }
    .overlay-menu.open .overlay-menu__item:nth-child(5) { transition-delay: 0.22s; }
    .overlay-menu.open .overlay-menu__item:nth-child(6) { transition-delay: 0.26s; }
    .overlay-menu.open .overlay-menu__item:nth-child(7) { transition-delay: 0.30s; }

    /* Row wrapper (button/link + direct-arrow) */
    .overlay-menu__row {
        display: flex;
        align-items: center;
        width: 100%;
        padding-block: 0.85rem;
    }

    /* Top-level links & toggle buttons */
    .overlay-menu__row > .overlay-menu__link,
    .overlay-menu__row > .overlay-menu__toggle {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        font-family: var(--ff-serif, serif);
        font-size: clamp(1.55rem, 5vw, 2.25rem);
        font-weight: 300;
        letter-spacing: 0.04em;
        color: #fff;
        background: none;
        border: none;
        padding: 0;
        text-align: right;
        cursor: pointer;
        transition: color 0.3s;
    }

    .overlay-menu__row > .overlay-menu__link:hover,
    .overlay-menu__row > .overlay-menu__toggle:hover {
        color: var(--gold-light, #3A8A75);
    }

    /* Chevron for items with children */
    .overlay-menu__caret {
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        border-inline-end: 1px solid rgba(255,255,255,.5);
        border-block-end: 1px solid rgba(255,255,255,.5);
        transform: rotate(-45deg);
        transition: transform 0.3s var(--ease, ease), border-color 0.3s;
        margin-inline-start: 0.5rem;
    }

    .overlay-menu__item.is-open > .overlay-menu__row .overlay-menu__caret {
        transform: rotate(45deg);
        border-color: var(--gold-light, #3A8A75);
    }

    /* Arrow: go directly to parent page */
    .overlay-menu__direct {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        color: rgba(255,255,255,.4);
        transition: color 0.3s;
    }

    .overlay-menu__direct:hover { color: var(--gold-light, #3A8A75); }
    .overlay-menu__direct svg { width: 1rem; height: 1rem; }

    /* ─── L2 sub: 2-column image card grid ───────────────────────────── */
    .overlay-menu__sub--cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        padding-block: 0.85rem 1.25rem;
    }

    .overlay-menu__card-wrap { min-width: 0; }

    .overlay-menu__card {
        position: relative;
        display: block;
        overflow: hidden;
        /* Fixed height — no layout shift */
        height: clamp(110px, 30vw, 160px);
        background: rgba(255,255,255,.06);
        color: #fff;
        text-decoration: none;
    }

    .overlay-menu__card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.8s var(--ease, ease);
    }

    .overlay-menu__card:active .overlay-menu__card-img,
    .overlay-menu__card:focus-visible .overlay-menu__card-img {
        transform: scale(1.04);
    }

    .overlay-menu__card-img--placeholder {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    }

    .overlay-menu__card-info {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0.75rem;
        background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 55%);
        pointer-events: none;
    }

    .overlay-menu__card-name {
        font-family: var(--ff-serif, serif);
        font-size: clamp(0.88rem, 2.8vw, 1rem);
        font-weight: 400;
        line-height: 1.25;
    }

    .overlay-menu__card-cta {
        font-family: var(--ff-sc, sans-serif);
        font-size: 0.52rem;
        letter-spacing: 0.2em;
        margin-top: 0.3rem;
        opacity: 0.7;
    }

    /* L3 text links below each card */
    .overlay-menu__card-l3 {
        list-style: none;
        margin: 0.4rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.65rem;
    }

    .overlay-menu__card-l3 a {
        font-family: var(--ff-sc, sans-serif);
        font-size: 0.56rem;
        letter-spacing: 0.12em;
        color: rgba(255,255,255,.55);
        text-decoration: none;
    }

    .overlay-menu__card-l3 a:hover,
    .overlay-menu__card-l3 a:active {
        color: var(--gold-light, #3A8A75);
    }

    /* Deeper accordion levels (depth ≥ 1) */
    .overlay-menu__sub:not(.overlay-menu__sub--cards) {
        padding-block: 0.5rem 0.85rem;
        padding-inline-start: 0.75rem;
        border-inline-start: 1px solid rgba(255,255,255,.1);
    }

    .overlay-menu__item--depth-1 {
        border-bottom: none;
    }

    .overlay-menu__item--depth-1 > .overlay-menu__row {
        padding-block: 0.55rem;
    }

    .overlay-menu__item--depth-1 > .overlay-menu__row > .overlay-menu__link,
    .overlay-menu__item--depth-1 > .overlay-menu__row > .overlay-menu__toggle {
        font-family: var(--ff-sc, sans-serif);
        font-size: clamp(0.9rem, 2.8vw, 1.05rem);
        letter-spacing: 0.12em;
        font-weight: 400;
    }

    /* Employer CTA bottom */
    .overlay-menu__link--employer {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.55s var(--ease, ease) 0.35s,
                    transform 0.55s var(--ease, ease) 0.35s;
    }

    .overlay-menu.open .overlay-menu__link--employer {
        opacity: 1;
        transform: none;
    }
}