/*
 * Mega-menu panel — Figma "Navigation / Megamenu" (11644:3708).
 *
 * Single panel instance per top-level menu (Resources, Education) rendered
 * once in the layout and opened by any [data-megamenu-trigger="<key>"]
 * (top nav, fixed sticky-bar, in-hero sticky-bar). JS toggles `is-open`,
 * sets `data-position` to `below` or `above`, and sets `--megamenu-anchor`
 * pixels to position the panel relative to its trigger.
 *
 * Hidden on viewports ≤ 1024 px — those use the mobile drawer instead;
 * sticky-bar triggers fall through to opening the drawer (see redesign.js).
 */

.redesign .megamenu-panel {
    position: fixed;
    left: 50%;
    width: calc(100vw - 48px);
    max-width: var(--container-max);   /* 1312 px */
    z-index: 70;                        /* above sticky-bar (40) and nav (50) */
    background: var(--neutral-white);
    border-radius: 6px;
    /* Darker sea-green-tinted shadow for stronger separation from the page
     * (replaces the lighter --shadow-lg used on cards). */
    box-shadow: 0 18px 48px rgba(32, 52, 60, 0.22);
    pointer-events: auto;

    /* Hidden state: kept in DOM (so JS can position it before reveal)
     * but visually inert. `hidden` attribute also strips it on first paint.
     * Default rest position is `data-position="below"`-ready: the panel
     * sits 32 px above its final spot, so the open transition reads as
     * a clear drop-DOWN. The `above` variant overrides this to start
     * 32 px below for a slide-UP. 320ms feels comparable to the sticky
     * bar's 420ms reveal — readable without dragging. The `visibility`
     * delay matches the duration so when closing, the panel keeps
     * receiving pointer events until it's fully hidden, and on open
     * it becomes visible immediately so the slide is paintable from
     * the start frame. */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-32px);
    transition:
        opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms 320ms;
}

/* `hidden` attr beats display rules — JS removes it once at boot so CSS
 * controls visibility from then on. */
.redesign .megamenu-panel[hidden] { display: none; }

.redesign .megamenu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    /* When opening, fire visibility immediately (delay 0) so the panel
     * is paintable while opacity/transform animate. The closing rule
     * above keeps the delay at 320ms so the panel stays receiving
     * clicks until the slide-out completes. */
    transition:
        opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms 0ms;
}

/* Position anchors — JS sets either --megamenu-top or --megamenu-bottom
 * (in pixels) based on the trigger's bounding rect, then sets data-position. */
.redesign .megamenu-panel[data-position="below"] {
    top: var(--megamenu-top, 80px);
    bottom: auto;
}

.redesign .megamenu-panel[data-position="above"] {
    bottom: var(--megamenu-bottom, 96px);
    top: auto;
    /* Slide UP into view from below — 32 px matches the drop-down
     * distance for the `below` position so both directions feel the
     * same weight. */
    transform: translateX(-50%) translateY(32px);
}

.redesign .megamenu-panel[data-position="above"].is-open {
    transform: translateX(-50%) translateY(0);
}

.redesign .megamenu-panel__inner {
    display: grid;
    grid-template-columns: 217px 1fr;       /* Figma frame 11656:673 = 217 px */
    min-height: 360px;
}

/* ── Left rail — Figma node 11656:673 ────────────────────────────────
 * Solid offwhite-sea-green wash; items stack tightly (no gap), each
 * 45 px tall; active item is a solid sea-green rectangle with white
 * text; inactive items have transparent backgrounds with 60 % black
 * text so the rail wash shows through. Square corners on items. */
.redesign .megamenu-panel__rail {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 0;
    background: var(--brand-offwhite-seagreen);   /* #c2d2d8 */
    border-radius: 6px 0 0 6px;                    /* matches panel left edge */
}

.redesign .megamenu-panel__rail-item {
    display: flex;
    align-items: center;
    width: 100%;
    /* Horizontal inset trimmed from 16 → 12 px (Figma was 16) so the longest
     * Education-rail label "Frequently Asked Topics" fits on one line at the
     * 217 px rail width. The trim is visually negligible — the active block
     * still has plenty of left-of-text breathing room — but recovers ~8 px
     * of label width across the inset, which is the difference between
     * "…Topic" wrapping and "…Topics" fitting. */
    padding: 12px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;                              /* square per Figma */
    color: rgba(0, 0, 0, 0.6);                     /* Opacity/Black 60 */
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

/* Hover is not in Figma but is needed UX — lighten the wash subtly so
 * the row reads as interactive without competing with the active block. */
.redesign .megamenu-panel__rail-item:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--brand-sea-green-darker);
}

.redesign .megamenu-panel__rail-item.is-active {
    background: var(--brand-sea-green);            /* #28414b */
    color: var(--neutral-white);
}

.redesign .megamenu-panel__rail-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Right pane ───────────────────────────────────────────────────── */
.redesign .megamenu-panel__content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 32px 20px;
    min-height: 360px;
}

/* Only the active section is visible. We keep all sections in the DOM so
 * their content is preloaded and first-render is instant on rail switch. */
.redesign .megamenu-section {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 24px;
}

.redesign .megamenu-section.is-active {
    display: flex;
}

.redesign .megamenu-section__cols {
    display: grid;
    gap: 32px;
    flex: 1 1 auto;
}

.redesign .megamenu-section__cols--1 { grid-template-columns: minmax(0, 360px); }
.redesign .megamenu-section__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.redesign .megamenu-section__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Narrow desktop / large phone — once the panel content area shrinks
 * below the point where 3 columns can carry a useful link-row each
 * (~180 px per column), stack everything into a single column. The
 * column gap shrinks at the same time to keep the visual rhythm
 * compact, and the rail stays in place so users can still switch
 * sections. */
@media (max-width: 800px) {
    .redesign .megamenu-section__cols--2,
    .redesign .megamenu-section__cols--3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .redesign .megamenu-panel__content {
        padding: 24px 20px 16px;
    }
}

.redesign .megamenu-section__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.redesign .megamenu-section__col-heading {
    margin: 0 0 4px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    font-weight: 600;
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    color: var(--text-heading);
    text-transform: uppercase;
}

.redesign .megamenu-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Link row — Figma node 11659:704 ──────────────────────────────── */
/* Layout per Figma: 12 px row padding, 12 px gap between icon and
 * content, items-start so the icon stays at the top of the row when
 * the description wraps. The icon itself is nudged down a few pixels
 * (see .megamenu-link__icon below) so its TOP edge sits on the label's
 * cap-top rather than the line-box top — without that nudge the icons
 * read as floating above the title text. Icon, heading, and desc each
 * have their own colors (icon and heading both #554b4b; desc #776f6f).
 * Hover swaps the row background to a soft peach wash. */
.redesign .megamenu-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

.redesign .megamenu-link:hover,
.redesign .megamenu-link:focus-visible {
    background: var(--brand-offwhite-peach);
    text-decoration: none;
    /* Don't shift the heading/desc colors on hover — Figma keeps them
     * stable; only the row background animates. */
    color: var(--text-heading);
}

.redesign .megamenu-link__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-heading);   /* #554b4b — Figma "icon" color, reads as black */
    /* Push the icon down so its top edge sits on the label's cap-top
     * rather than the line-box top. With 14 px / 1.5 line-height the
     * line-box is 21 px and the cap top sits ~4 px below the line-box
     * top (Manrope-specific; tuned visually). Without this nudge the
     * icon looks like it hovers above the heading. */
    margin-top: 4px;
}

.redesign .megamenu-link__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Country flag <img> (lipis/flag-icons 1×1 SVGs, see _icon.blade.php).
 * Clip to a circle for the round-badge look. A 1 px hairline border
 * keeps light flags (e.g. white-heavy) from disappearing on the white
 * panel background; box-sizing: border-box keeps the total slot 24×24. */
.redesign .megamenu-link__icon img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Two-line content stack: heading on top, desc below, 2 px gap. */
.redesign .megamenu-link__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.5;
}

.redesign .megamenu-link__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
    /* Allow wrap for long labels rather than truncating with ellipsis;
     * the column has enough width and rows that wrap stay readable. */
    word-break: break-word;
}

.redesign .megamenu-link__desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-paragraph);
    word-break: break-word;
}

/* ── View-all link (bottom-right) ─────────────────────────────────── */
.redesign .megamenu-section__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: auto;
}

.redesign .megamenu-section__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-sea-green);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: gap 140ms ease, color var(--hover-dur) var(--hover-ease);
}

.redesign .megamenu-section__view-all:hover,
.redesign .megamenu-section__view-all:focus-visible {
    color: var(--brand-sea-green-darker);
    gap: 10px;
    text-decoration: none;
}

.redesign .megamenu-section__view-all-icon {
    width: 16px;
    height: 16px;
}

/* Section footer variant — App Store / Google Play badges instead of the
 * View-all link (used by the Calendar tab, see HeaderComposer). Sits in
 * the same right-aligned slot as the view-all link so the visual rhythm
 * across tabs stays consistent. Badges scale to a fixed 36 px height to
 * match the home-page download row. */
.redesign .megamenu-section__footer--badges {
    gap: 12px;
}

/* The App Store / Google Play PNGs in /images/redesign/app-stores/ are
 * the standard "white text on transparent" variants that Apple/Google
 * publish for use on dark surfaces. The mega-menu panel is white, so we
 * paint a black pill behind each badge — that matches the canonical
 * "dark capsule" look from the official guidelines and lets the white
 * text + colored play-triangle read against the panel.
 *
 * Padding is chosen so the pill hugs the badge artwork without leaving
 * obvious dead space, and the rounded corners (6 px) match the panel's
 * other interactive surfaces. */
.redesign .megamenu-section__badge {
    display: inline-flex;
    align-items: center;
    line-height: 0;                               /* kill descender gap so the
                                                     anchor's hit-box matches
                                                     the image height exactly */
    background: #000;
    border-radius: 6px;
    padding: 4px 10px;
    transition: opacity 140ms ease, transform 140ms ease;
}

.redesign .megamenu-section__badge:hover,
.redesign .megamenu-section__badge:focus-visible {
    opacity: 0.85;
    transform: translateY(-1px);
}

.redesign .megamenu-section__badge img {
    height: 28px;                                 /* slimmer than the 36 px
                                                     on the home page so the
                                                     pill stays in the same
                                                     vertical band as the
                                                     view-all link on other
                                                     tabs (~20 px tall) */
    width: auto;
    display: block;
}

/* ── Compact-only rail items & section panels ──────────────────────
 * Sections marked `compact_only` in HeaderComposer (the Resources >
 * Main Resources catch-all) only render in the rail/panel when the
 * viewport is in the compact range (641 px – 1100 px). At wider
 * widths the four links those sections cover (Shop, My Courses,
 * About us, Contact) live in the main nav row; below 640 px the
 * mobile drawer takes over the whole menu. */
.redesign .megamenu-panel__rail-item--compact-only,
.redesign .megamenu-section--compact-only {
    display: none;
}

@media (min-width: 641px) and (max-width: 1100px) {
    .redesign .megamenu-panel__rail-item--compact-only {
        display: flex;
    }
    .redesign .megamenu-section--compact-only.is-active {
        display: flex;
    }
}

/* Resources rail order — applies at every width (full desktop and
 * compact). DOM order has Find-a-Mikvah first because that's the
 * historical first section; the rail visually prioritizes Referrals
 * and TH Instructor Directory because those are higher-intent entry
 * points after Main Resources. Main Resources itself is order 0 (DOM
 * default) and is hidden at full desktop via display:none on the
 * --compact-only modifier, so it only physically appears in the
 * compact range — but its order assignment is harmless there.
 *
 * Section keys are unique to each panel, so these no-op on the
 * Education panel. */
.redesign .megamenu-panel__rail [data-megamenu-section="referrals"]               { order: 1; }
.redesign .megamenu-panel__rail [data-megamenu-section="th-instructor-directory"] { order: 2; }
.redesign .megamenu-panel__rail [data-megamenu-section="preparation-checklist"]   { order: 3; }
.redesign .megamenu-panel__rail [data-megamenu-section="find-a-mikvah"]           { order: 4; }
.redesign .megamenu-panel__rail [data-megamenu-section="calendar"]                { order: 5; }

/* ── Hide entirely on phone — drawer handles those viewports ───────
 * Matches the nav.css hamburger breakpoint (640 px). Between 641 px
 * and the old 1024 px threshold the mega-menu now stays on screen,
 * which is what enables the "Main Resources" tab to work. */
@media (max-width: 640px) {
    .redesign .megamenu-panel { display: none !important; }
}