/* ============================================================================
 * mega-nav.css — 12-category accessible mega-menu + dark-mode toggle button
 * Owned by the mega-nav lane. Uses design-system tokens (design-system.css).
 * Builds on the existing .has-dropdown / .dropdown-menu nav from layout.css:
 * we only add the mega-panel layout + the .theme-toggle button here.
 * Keyboard support: the panel opens on :hover AND :focus-within so it is
 * fully operable by Tab; JS in navigation.js mirrors aria-expanded.
 * ========================================================================= */

/* ---- Theme toggle button -------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: var(--space-sm, 0.5rem);
    padding: 0;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-subtle, #f9fafb);
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    font-size: var(--font-size-base, 1rem);
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover {
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}
/* Show the icon that represents the action available in the current theme:
 * light theme -> show moon (switch to dark); dark theme -> show sun. */
.theme-toggle .theme-toggle-icon-light { display: none; }
.theme-toggle .theme-toggle-icon-dark { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: none; }

/* ---- Mega trigger --------------------------------------------------------- */
/* The bundle draws its own CSS-triangle caret on .has-dropdown > a::after;
 * we use the FontAwesome chevron instead — hide the duplicate. */
.mega-nav .has-dropdown > a::after { display: none; }
.mega-nav .mega-caret {
    font-size: 0.7em;
    margin-left: 0.35em;
    transition: transform .2s ease;
}
.mega-nav .has-mega:hover .mega-caret,
.mega-nav .has-mega:focus-within .mega-caret {
    transform: rotate(180deg);
}

/* ---- Mega panel ----------------------------------------------------------- */
/* On desktop, override the narrow default .dropdown-menu width with a wide,
 * multi-column panel. We scope to .mega-panel so the small dropdowns elsewhere
 * are unaffected. */
@media (min-width: 993px) {
    .mega-nav .has-mega {
        position: relative;
    }
    .mega-nav .dropdown-menu.mega-panel {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        width: min(880px, 92vw);
        max-width: 92vw;
        padding: var(--space-lg, 1.5rem);
        background: var(--color-bg-page, #fff);
        border: 1px solid var(--color-gray-200, #e5e7eb);
        border-radius: var(--radius-lg, 12px);
        box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
        z-index: var(--z-dropdown, 1000);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .mega-nav .has-mega:hover > .mega-panel,
    .mega-nav .has-mega:focus-within > .mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(4px);
    }
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md, 1rem) var(--space-lg, 1.5rem);
}

.mega-col { min-width: 0; }

.mega-col-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-primary, #111827);
    text-decoration: none;
}
.mega-col-head:hover,
.mega-col-head:focus-visible {
    color: var(--color-primary, #2563eb);
}
.mega-col-icon {
    color: var(--color-primary, #2563eb);
    width: 1.1em;
    text-align: center;
    flex: none;
}
.mega-col-label { flex: 1 1 auto; }
.mega-col-count {
    flex: none;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted, #6b7280);
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: var(--radius-full, 9999px);
    padding: 0.05rem 0.45rem;
}

.mega-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-col-list li { margin: 0; }
.mega-col-list a {
    display: block;
    padding: 0.28rem 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #4b5563);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color .15s ease, padding-left .15s ease;
}
.mega-col-list a:hover,
.mega-col-list a:focus-visible {
    color: var(--color-primary, #2563eb);
    padding-left: 0.35rem;
}

.mega-footer {
    margin-top: var(--space-md, 1rem);
    padding-top: var(--space-sm, 0.75rem);
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    text-align: right;
}
.mega-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}
.mega-all-link:hover,
.mega-all-link:focus-visible {
    text-decoration: underline;
}
.mega-all-link i { transition: transform .15s ease; }
.mega-all-link:hover i { transform: translateX(3px); }

/* ---- Category row + accordion toggle --------------------------------------
 * The category head link and its mobile accordion chevron share a row. On
 * desktop the chevron is hidden and the head behaves exactly as before. */
.mega-col-row { display: flex; align-items: stretch; }
.mega-col-row .mega-col-head { flex: 1 1 auto; min-width: 0; }
.mega-col-toggle { display: none; }

/* ---- Drawer chrome (mobile-only bits, hidden on desktop) ------------------ */
.drawer-head, .nav-scrim { display: none; }

/* ---- Mobile / tablet: right-hand drawer ------------------------------------
 * The bundle (app.min.css) styles #mainNav as a push-down absolute panel.
 * These rules (nav#mainNav.mega-nav — higher specificity, loaded later)
 * convert it into an off-canvas drawer with a scrim. The bundle's
 * `display:none → .active{display:block}` is neutralised with a transform
 * animation instead so it can transition. */
@media (max-width: 992px) {
    nav#mainNav.mega-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(330px, 88vw);
        height: 100dvh;
        max-height: none;
        display: block;
        margin: 0;
        padding: 0 0 2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-bg-page, #fff);
        transform: translateX(102%);
        visibility: hidden; /* keep off-screen links out of the tab order */
        /* visibility flips instantly on open (so focus can land) but waits for
         * the slide-out to finish on close */
        transition: transform .25s ease, visibility 0s linear .25s;
        box-shadow: none;
        z-index: calc(var(--z-fixed, 1030) + 2);
    }
    nav#mainNav.mega-nav.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform .25s ease, visibility 0s;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .2);
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 18, 25, .45);
        z-index: calc(var(--z-fixed, 1030) + 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }

    /* Drawer header: title + a real close button (44px). */
    nav#mainNav .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .5rem .5rem 1rem;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
        position: sticky;
        top: 0;
        background: var(--color-bg-page, #fff);
        z-index: 1;
    }
    nav#mainNav .drawer-head-label {
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-text-primary, #111827);
    }
    nav#mainNav .drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: var(--color-text-secondary, #4b5563);
        font-size: 1.25rem;
        cursor: pointer;
        border-radius: var(--radius-base, 8px);
    }
    nav#mainNav .drawer-close:hover,
    nav#mainNav .drawer-close:focus-visible {
        background: var(--color-bg-muted, #f3f4f6);
        color: var(--color-text-primary, #111827);
    }

    /* Comfortable 44px+ tap targets, 16px text (no iOS zoom) in the drawer. */
    nav#mainNav ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 1rem;
        padding: .6rem var(--space-md, 1rem);
    }

    .mega-nav .dropdown-menu.mega-panel {
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
        padding: 0;
        background: var(--color-bg-subtle, #f9fafb);
    }
    .mega-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Category rows: head link + 44px chevron toggle; tool lists collapsed by
     * default (the id-strength selector is required — the bundle's
     * `nav#mainNav ul` display rule otherwise re-reveals them). */
    nav#mainNav .mega-col-row { border-bottom: 1px solid var(--color-gray-200, #e5e7eb); }
    nav#mainNav .mega-col-head {
        border-bottom: none;
        margin: 0;
        padding: .55rem var(--space-md, 1rem);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    nav#mainNav .mega-col-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 48px;
        border: 0;
        border-left: 1px solid var(--color-gray-200, #e5e7eb);
        background: none;
        color: var(--color-text-secondary, #4b5563);
        cursor: pointer;
    }
    nav#mainNav .mega-col-toggle i { transition: transform .2s ease; }
    nav#mainNav .mega-col.open .mega-col-toggle i { transform: rotate(180deg); }

    nav#mainNav .mega-col-list { display: none; }
    nav#mainNav .mega-col.open .mega-col-list {
        display: block;
        background: var(--color-bg-page, #fff);
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    }
    nav#mainNav .mega-col-list a {
        min-height: 42px;
        display: flex;
        align-items: center;
        font-size: .95rem;
        padding: .45rem var(--space-md, 1rem) .45rem 2.25rem;
        border-bottom: 0;
    }

    .mega-footer {
        text-align: left;
        padding: var(--space-sm, .75rem) var(--space-md, 1rem);
        margin-top: 0;
        border-top: 0;
    }

    /* Hamburger: the bundle sets display:flex (row), which lays the three bars
     * side-by-side and breaks the X animation — stack them again. */
    .hamburger-menu {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    .theme-toggle {
        margin-left: auto;
        margin-right: var(--space-sm, 0.5rem);
        width: 44px;
        height: 44px;
    }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mega-nav .dropdown-menu.mega-panel,
    .mega-nav .mega-caret,
    .mega-col-list a,
    .mega-all-link i,
    .theme-toggle,
    nav#mainNav.mega-nav,
    .nav-scrim,
    nav#mainNav .mega-col-toggle i {
        transition: none;
    }
}