/* Depends on panel-menu.css (enqueued first). Scoped under .mega-active. */

:root {
    --mega-container-width: 130rem;  /* Matches .header-inner max-width in style.css */
}

/* ============================================
   Mobile: hide mega-only elements
   ============================================ */

.mega-menu-chevron,
.mega-menu-column-image,
.mega-menu-column-title {
    display: none;
}

/* Panel-mode should behave like the original checkbox panel menu: the
   image-only drawer chrome is removed, and `title_only` rows expose the
   title span as the visible label so the submenu header can inherit it. */
#panel-menu-container:not(.mega-active) .mega-menu-column-image-link {
    display: none;
}

#panel-menu-container:not(.mega-active)[data-title-display="title_only"] .mega-menu-column-title {
    display: block;
    max-width: calc(100% - var(--menu-toggle-width, 40px));
    padding-right: var(--menu-toggle-width, 40px);
    color: var(--menu-item-color, inherit);
    font-weight: 600;
}

#panel-menu-container:not(.mega-active)[data-title-display="title_only"] .mega-menu-column-link {
    display: none;
}

#panel-menu-container:not(.mega-active):not([data-title-display="title_only"]) .mega-menu-column-link {
    display: block;
    max-width: calc(100% - var(--menu-toggle-width, 40px));
}

/* ============================================
   Desktop mega menu — activated by .mega-active
   JS toggles this class via matchMedia using
   the data-mega-breakpoint attribute.
   ============================================ */

/* Hide panel-only elements (scoped with ID to beat panel-menu.css specificity) */
#panel-menu-container.mega-active .menu-button,
#panel-menu-container.mega-active .menu-checkbox,
#panel-menu-container.mega-active .menu-overlay,
.mega-active #panel-menu .submenu-checkbox,
.mega-active #panel-menu .arrow-toggle,
.mega-active #panel-menu .menu-title {
    display: none;
}

/* Container — parent .header-inner is CSS Grid at desktop, so the 1fr
   column sizes this. Keep min-width: 0 to prevent grid blowout. */
.mega-active {
    min-width: 0;
}

/* Nav: visible, auto height. `position: static` (not relative) so the
   nearest positioned ancestor for drawers is .header-inner rather than
   #panel-menu — which lets Full Width drawers center on the header box
   (viewport-centered via max-width: 130rem; margin: 0 auto). */
.mega-active #panel-menu {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    overflow: visible;
    transform: none;
    top: 0;
}

/* Main menu: horizontal grid. Positioning context for drawers is hoisted
   to .header-inner so the drawer can span container width (or viewport
   width in Full Width mode) rather than the narrower menu column. */
.mega-active #panel-menu .main-menu {
    position: static;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
}

/* Hoist drawer positioning context to .header-inner (130rem max-width,
   centered via margin: 0 auto). Drawer becomes container-wide by default.
   #site-header is also set to relative so the drawer's `top: 100%` lands
   at the full header's bottom edge even if #site-header grows taller than
   .header-inner (e.g. for sibling content inside the header element). */
#site-header:has(.mega-active) {
    position: relative;
}

#site-header:has(.mega-active) .header-inner {
    position: relative;
}

/* Reset admin-bar top offset that becomes a relative offset in mega mode.
   body.admin-bar #panel-menu .main-menu (1-2-1) beats .mega-active (1-2-0). */
body.admin-bar .mega-active #panel-menu .main-menu,
body.admin-bar .mega-active #panel-menu .sub-menu {
    top: auto;
}

/* Depth-0 items: static so drawers position relative to .main-menu */
.mega-active #panel-menu .main-menu > .menu-item {
    position: static;
}

.mega-active #panel-menu .main-menu > .menu-item > a {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem clamp(0.6rem, 1vw, 1.2rem);
    font-size: clamp(1.3rem, 1.2vw, 1.5rem);
    white-space: nowrap;
}

/* Show mega-only elements */
.mega-active .mega-menu-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
}

.mega-active .parent.drawer-is-open > a .mega-menu-chevron {
    transform: rotate(180deg);
}

.mega-active .mega-menu-column-image {
    display: block;
}

.mega-active .mega-menu-column-title {
    display: block;
}

.mega-active[data-title-display="title_only"] .mega-menu-column-link {
    display: none;
}

/* Override panel-menu.css width: 100% — let grid column size the container.
   Specificity 1-1-0 beats #panel-menu-container (1-0-0). */
#panel-menu-container.mega-active {
    width: auto;
}

/* ============================================
   Header grid — desktop (1000px+), all modes.
   Converts style.css flex header to 3-column CSS Grid:
   logo | (main menu / flexible spacer) | search.
   #site-header .header-inner (1-1-0) beats Customizer
   .header-inner { padding: 10px 0 !important } (0-1-0 +imp)
   and style.css .header-inner flex rules (0-1-0).
   ============================================ */

@media (min-width: 1000px) {
    #site-header .header-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding: 10px 2rem !important;
        z-index: 1000;
    }

    /* Reset logo wrapper spacing — grid columns handle this now */
    #site-header .header-titles-wrapper {
        margin-right: 0;
        max-width: none;
        padding: 0;
    }

    /* Reset search toggle negative margin that bleeds past content edge */
    #site-header .header-toggles {
        margin-right: 0;
    }

    /* Flow hamburger into grid column 2 (right-aligned via flex).
       Overrides panel-menu.css 600px+ position: fixed. */
    #site-header #panel-menu-container {
        position: relative;
        width: 100%;
        top: 0;
        right: auto;
    }

    /* In mega mode, release position so the drawer's nearest positioned
       ancestor is .header-inner (which is viewport-centered via
       max-width: 130rem; margin: 0 auto). Required for Full Width drawers
       to align to the viewport edges cleanly. */
    #site-header #panel-menu-container.mega-active {
        position: static;
    }

    /* When panel opens, overlay the viewport. z-index: 2 beats the
       search SVG's z-index: 1 (style.css:1817) that paints via
       #site-header's stacking context. */
    #site-header #panel-menu-container:has(.menu-checkbox:checked) {
        position: fixed;
        top: 0;
        z-index: 2;
    }
}

/* Remove panel-menu borders in mega mode (keep on panel menu) */
#site-header:has(.mega-active) {
    border-bottom: none;
}

.mega-active #panel-menu .menu-item {
    border-top: none;
}

.mega-active #panel-menu .menu-list li:last-child {
    border-bottom: none;
}

/* ============================================
   Sub-menu: dropdown drawer
   Container width by default (drawer = .header-inner box, 130rem max).
   Full width via [data-drawer-width="full"] override below.
   ============================================ */

.mega-active #panel-menu .main-menu > .parent > .sub-menu {
    --drawer-tx: 0;
    --drawer-ty: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(var(--drawer-tx), var(--drawer-ty));
    z-index: 100;
    display: grid;
    gap: 20px;
    padding: 30px;
    box-sizing: border-box;
}

/* Full-width drawer: break out of .header-inner box to span the viewport.
   Inner content still constrained to container width via symmetrical padding.
   Scoped to mega drawers only — standard dropdowns always size to content. */
[data-drawer-width="full"].mega-active #panel-menu .main-menu > .parent.mega-drawer > .sub-menu {
    --drawer-tx: -50%;
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: 100vw;
    padding-left:  calc(max(0px, (100vw - var(--mega-container-width)) / 2) + clamp(2rem, 5vw, 4rem));
    padding-right: calc(max(0px, (100vw - var(--mega-container-width)) / 2) + clamp(2rem, 5vw, 4rem));
}

/* Drawer open state — driven by native :hover / :focus-within on the
   parent <li>. `:hover` naturally stays true while the cursor is over
   the parent link OR any descendant (the drawer is a DOM descendant,
   so hovering the drawer counts). The `.drawer-open` class is still
   honoured for touch activation via JS.

   :hover is gated behind `@media (hover: hover)` so it does not stick
   on touch devices, which is where the JS two-tap pattern runs. */
.mega-active #panel-menu .main-menu > .parent:focus-within > .sub-menu,
.mega-active #panel-menu .main-menu > .parent > .sub-menu.drawer-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (hover: hover) {
    .mega-active #panel-menu .main-menu > .parent:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Hover-bridge — an invisible extension of the parent link that fills
   the gap between the link's bottom and the drawer's top, so moving
   the cursor down keeps `.parent:hover` true. The bridge is scoped
   to the link itself (not the drawer) so each parent has its own
   bridge aligned to its own horizontal column — neighbouring parents
   never steal hover. */
.mega-active .main-menu > .parent > a {
    position: relative;
}

.mega-active .main-menu > .parent > a::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Covers gap from link bottom through .header-inner bottom padding
       to the drawer top (around 40px in practice). Over-extends slightly
       into the drawer so there is no hairline gap. */
    height: 5rem;
}

/* Rotate the chevron for CSS-hover / focus as well — mirrors the JS
   `.drawer-is-open` rotation so no JS is needed for the visual cue. */
.mega-active .main-menu > .parent:focus-within > a .mega-menu-chevron {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .mega-active .main-menu > .parent:hover > a .mega-menu-chevron {
        transform: rotate(180deg);
    }
}

/* Column grid driven by data attribute */
.mega-active .sub-menu[data-columns="1"] {
    grid-template-columns: 1fr;
}

.mega-active .sub-menu[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.mega-active .sub-menu[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.mega-active .sub-menu[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid-blowout guard: drawer children carry intrinsic min-content from
   images + long labels, which expands `1fr` tracks past the drawer width.
   Allow tracks to shrink below their content size. Stack the column's
   own content (image, link, title, inner sub-menu) as a vertical grid so
   the 10px gap rhythm continues inside the column. */
.mega-active #panel-menu .main-menu > .parent > .sub-menu > .menu-item {
    min-width: 0;
    display: grid;
    gap: 10px;
    align-content: start;
}

/* ============================================
   Sub-menu Alignment (data-submenu-align)
   Scoped to depth-2 items inside mega drawers — standard dropdowns are
   already a flat list, so indentation would be meaningless there.
   `flush` (default) leaves the padding at 0 set below; `indented` offsets
   the items horizontally from the column title to signal hierarchy.
   ============================================ */

.mega-active[data-submenu-align="indented"] #panel-menu .main-menu > .parent.mega-drawer > .sub-menu .sub-menu {
    padding-inline-start: 1em;
}

/* ============================================
   Level-2 sub-menus: plain list inside column
   ============================================ */

/* Nested sub-menus (depth-2) — always laid out as a grid regardless of
   open state, so the drawer's dimensions stay stable and only opacity +
   transform animate on open. If we toggled `display: none → grid` here,
   the outer drawer would abruptly grow mid-fade and items would pop in
   before the container finished animating. */
.mega-active #panel-menu .main-menu > .parent > .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: inherit;
    pointer-events: auto;
    height: auto;
    max-height: none;
    width: auto;
    overflow: visible;
    top: auto;
    left: auto;
    border: none;
    box-shadow: none;
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    background: transparent;
}

.mega-active #panel-menu .sub-menu .sub-menu .menu-item {
    padding: 0;
    margin: 0;
}

.mega-active #panel-menu .sub-menu .sub-menu .menu-item a {
    padding: 0;
    display: block;
}

/* ============================================
   Column image and title styling
   ============================================ */

/* Image link controls the box — aspect-ratio on the <a> is more predictable
   than on the <img> (which can be disturbed by `sizes="auto"` on lazy images
   or intrinsic ratios before natural dimensions resolve). */
.mega-active .mega-menu-column-image-link {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
}

.mega-active .mega-menu-column-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Column title is a heading for a column — keep the 600 weight to mark it
   as a header, but match the link font-size / line-height so the overall
   sub-menu typography stays consistent. */
.mega-active .mega-menu-column-title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.4rem;
    color: var(--menu-panel-title-color, #000);
    margin: 0;
}

/* ============================================
   Unified sub-menu typography — applies to every link inside any sub-menu
   (mega drawer or standard dropdown, depth-1 or depth-2) so sizing, weight,
   line-height and padding are identical across the system.
   ============================================ */

.mega-active #panel-menu .sub-menu a {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
    padding: 0;
}

.mega-active #panel-menu .sub-menu .menu-item {
    padding: 0;
    margin: 0;
}

/* ============================================
   Standard hover dropdown (Customize Drawer = No)
   Small, auto-width panel that drops directly under the parent link.
   Level-2 items render as an indented sub-list inside the same panel
   (moderncss.dev tree-style), not as a flyout.
   ============================================ */

/* Override the depth-0 `position: static` above — standard dropdowns need
   their parent <li> to be the positioning context so `left: 0` anchors
   under the hovered link, not under .header-inner. Mega drawers keep
   position: static so they can span container / viewport width.

   The <li> is vertically centered inside .header-inner (whose height is
   driven by the logo, not the menu). To land the dropdown at the same
   vertical as the mega drawer (which anchors to .header-inner's bottom),
   offset `top` by the gap between the <li>'s bottom and .header-inner's
   bottom. --std-dropdown-offset is tunable if the header padding or logo
   height changes. */
.mega-active #panel-menu .main-menu > .parent.standard-dropdown {
    position: relative;
    --std-dropdown-offset: 2.875rem;
}

.mega-active #panel-menu .main-menu > .parent.standard-dropdown > .sub-menu {
    --drawer-tx: 0;
    --drawer-ty: 0;
    position: absolute;
    top: calc(100% + var(--std-dropdown-offset));
    left: 0;
    right: auto;
    width: max-content;
    min-width: 18rem;
    max-width: min(36rem, 100vw);
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 30px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(var(--drawer-tx), var(--drawer-ty));
    z-index: 100;
    box-sizing: border-box;
}

/* Open-state: same specificity as the generic opener rules above, but defined
   after the standard-dropdown baseline so the cascade re-opens the dropdown
   on focus-within / touch-open / hover. */
.mega-active #panel-menu .main-menu > .parent.standard-dropdown:focus-within > .sub-menu,
.mega-active #panel-menu .main-menu > .parent.standard-dropdown > .sub-menu.drawer-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (hover: hover) {
    .mega-active #panel-menu .main-menu > .parent.standard-dropdown:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Depth-1 rows inside a standard dropdown — plain list items, full-width link */
.mega-active #panel-menu .parent.standard-dropdown > .sub-menu > .menu-item {
    display: block;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.mega-active #panel-menu .parent.standard-dropdown > .sub-menu > .menu-item > a {
    display: block;
    white-space: nowrap;
}

/* ============================================
   Effect variants via data-effect on container
   ============================================ */

/* All effect transitions are scoped with `#panel-menu` to beat the
   (1,1,0) `#panel-menu .sub-menu { transition: all 0.175s }` rule in
   panel-menu.css. Without the id, the `all` shorthand wins and transitions
   `visibility` discretely at ~50% of the run — which makes the drawer
   contents "pop in" mid-fade rather than fading smoothly. */

/* Fade */
.mega-active[data-effect="fade"] #panel-menu .main-menu > .parent > .sub-menu {
    transition: opacity var(--mega-close-duration, 150ms) ease,
                visibility 0s linear var(--mega-close-duration, 150ms);
}

.mega-active[data-effect="fade"] #panel-menu .main-menu > .parent:focus-within > .sub-menu,
.mega-active[data-effect="fade"] #panel-menu .main-menu > .parent > .sub-menu.drawer-open {
    transition: opacity var(--mega-open-duration, 200ms) ease,
                visibility 0s;
}

/* Hover-open variants carry --mega-hover-delay as transition-delay so the
   drawer only starts opening once the cursor has dwelled on the parent for
   the configured hover-intent window. Keyboard (:focus-within) and touch
   (.drawer-open) should still open immediately, so the delay lives only on
   the :hover rules. */
@media (hover: hover) {
    .mega-active[data-effect="fade"] #panel-menu .main-menu > .parent:hover > .sub-menu {
        transition: opacity var(--mega-open-duration, 200ms) ease var(--mega-hover-delay, 0ms),
                    visibility 0s linear var(--mega-hover-delay, 0ms);
    }
}

/* Slide — drawer slides out from behind the header. A ::before mask on
   #site-header hides the drawer's closed-state starting edge; clip-path
   does the hard clip so tall drawers cannot overflow above the header
   (the mask only covers the header area itself); transform adds the
   visible spatial slide. --drawer-ty composes with --drawer-tx's Full
   Width -50% offset via the existing translate() shorthand on .sub-menu
   (see :207 and :473) — no transform is overwritten. */
.mega-active[data-effect="slide"] #panel-menu .main-menu > .parent > .sub-menu {
    --drawer-ty: -1rem;
    clip-path: inset(0 0 100% 0);
    transition: transform var(--mega-close-duration, 150ms) ease,
                clip-path var(--mega-close-duration, 150ms) ease,
                opacity var(--mega-close-duration, 150ms) ease,
                visibility 0s linear var(--mega-close-duration, 150ms);
}

.mega-active[data-effect="slide"] #panel-menu .main-menu > .parent:focus-within > .sub-menu,
.mega-active[data-effect="slide"] #panel-menu .main-menu > .parent > .sub-menu.drawer-open {
    --drawer-ty: 0;
    clip-path: inset(0 0 0 0);
    transition: transform var(--mega-open-duration, 200ms) ease,
                clip-path var(--mega-open-duration, 200ms) ease,
                opacity var(--mega-open-duration, 200ms) ease,
                visibility 0s;
}

@media (hover: hover) {
    .mega-active[data-effect="slide"] #panel-menu .main-menu > .parent:hover > .sub-menu {
        --drawer-ty: 0;
        clip-path: inset(0 0 0 0);
        transition: transform var(--mega-open-duration, 200ms) ease var(--mega-hover-delay, 0ms),
                    clip-path var(--mega-open-duration, 200ms) ease var(--mega-hover-delay, 0ms),
                    opacity var(--mega-open-duration, 200ms) ease var(--mega-hover-delay, 0ms),
                    visibility 0s linear var(--mega-hover-delay, 0ms);
    }
}

/* Slide mask — a ::before on #site-header that sits above the drawer
   (z 100) and below the header's content (z 300). `background: inherit`
   tracks #site-header's Customizer-controlled background (style.css:1683
   and customize-preview.js:97) so the mask always blends with the
   header. Guarded by :has() so only Slide mode incurs the isolation +
   pseudo — Fade and None remain untouched. */
#site-header:has(.mega-active[data-effect="slide"]) {
    isolation: isolate;
}

#site-header:has(.mega-active[data-effect="slide"])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    background: inherit;
}

/* Hoist header content above the mask. Top-level menu links are siblings
   of .sub-menu (not ancestors), so raising them to z-index 300 does not
   drag the drawer along with them — the drawer stays at layer 100,
   behind the mask. */
#site-header:has(.mega-active[data-effect="slide"]) .header-titles-wrapper,
#site-header:has(.mega-active[data-effect="slide"]) .header-toggles {
    position: relative;
    z-index: 300;
}

.mega-active[data-effect="slide"] .main-menu > .menu-item > a {
    position: relative;
    z-index: 300;
}

@media (prefers-reduced-motion: reduce) {
    .mega-active[data-effect="slide"] #panel-menu .main-menu > .parent > .sub-menu {
        --drawer-ty: 0;
        clip-path: none;
        transition: opacity var(--mega-close-duration, 150ms) ease,
                    visibility 0s linear var(--mega-close-duration, 150ms);
    }

    .mega-active[data-effect="slide"] #panel-menu .main-menu > .parent:focus-within > .sub-menu,
    .mega-active[data-effect="slide"] #panel-menu .main-menu > .parent > .sub-menu.drawer-open {
        transition: opacity var(--mega-open-duration, 200ms) ease,
                    visibility 0s;
    }
}

/* None */
.mega-active[data-effect="none"] #panel-menu .main-menu > .parent > .sub-menu {
    transition: none;
}

/* ============================================
   No-JS fallback — minimal 1100px activation
   ============================================ */

@media (min-width: 1100px) {
    #panel-menu-container:not(.mega-active):not(.mega-inactive) .mega-menu-chevron {
        display: inline-block;
    }

    #panel-menu-container:not(.mega-active):not(.mega-inactive) #panel-menu .main-menu {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: auto;
        align-items: center;
    }
}