/**
 * TransferJet — desktop navigation.
 *
 * The megamenu is one panel for the whole menu, anchored to the nav row and
 * spanning the container, with a pane per top-level category switched inside
 * it. Hover-only and above 1280 only; below that the panel does not exist and
 * the nav row is a plain row of links.
 *
 * Show/hide is a class on .navigation rather than Alpine's x-show — the CSP
 * build takes a property, never an expression — so the component in
 * desktop.phtml sets .is-open and .is-active itself and this file is the whole
 * of the styling.
 *
 * No current-item state, and no aria-expanded on the triggers: with no
 * keyboard path there is nothing to expand. setActiveMenu still writes
 * [data-has-current], but it matches the exact category node only, so it is
 * absent on the second-level pages where most browsing happens. Hover is the
 * only coloured state.
 */

/* Desktop only; below lg the mobile drawer takes over. */
.navigation {
    display: none;
}

@media (min-width: 1024px) {
    .navigation {
        display: block;
        /* The panel's containing block. Without it the shell resolves against
           #header, which is full viewport width, and inset-inline hangs it off
           the edges of the screen rather than the container. */
        position: relative;
    }

    /* The 2px divider lives on #header (masthead.css) so it reaches the
       viewport edges instead of stopping at the menu. */
    .navigation > ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navigation li.level0 {
        cursor: pointer;
        margin: 0;
        padding: 0 40px 0 0;
        /* static, so the panel anchors to the row rather than to this item. */
        position: static;
    }

    /* Matched on .level-top rather than a, so a <button> trigger would render
       identically; the button resets below are inert on an anchor. */
    .navigation li.level0 > span > .level-top,
    .navigation li.level0 > a {
        align-items: center;
        background: none;
        border: 0;
        color: var(--color-fg-secondary);
        cursor: pointer;
        display: inline-flex;
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        gap: 10px;
        /* Explicit, so the label box height does not depend on inheritance: a
           <button> takes line-height:normal from the UA `font` shorthand and
           would compute ~5px shorter, putting its underline off the divider. */
        line-height: 1.45;
        /* Solved against a capture of the live nav: at weight 400 this matches
           its label widths to within 1.5px. */
        letter-spacing: 0.04em;
        padding: 20px 0;
        position: relative;
        text-decoration: none;
        transition: color 0.12s;
        /* Above the panel (z-index 10). li.level0 is static and creates no
           stacking context, so without this the panel is drawn over the open
           item's underline. */
        z-index: 11;
    }

    /* The underline appears rather than grows. Every trigger is a link, so the
       width animation ran on through the page unload — most visibly on a
       tablet, where the sticky :hover fires on tap and that is the only way it
       is ever seen. */
    .navigation li.level0 > span > .level-top:after {
        background: var(--color-secondary);
        bottom: -2px;
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        width: 0;
    }

    /* .is-open alongside :hover, so the underline waits out the open delay and
       arrives with the panel rather than on pointer entry. */
    .navigation li.level0:hover > span > .level-top:after,
    .navigation li.level0.is-open > span > .level-top:after {
        width: 100%;
    }

    .navigation li.level0:hover > span > .level-top,
    .navigation li.level0.is-open > span > .level-top {
        color: var(--color-secondary);
    }

    /* The chevron sits inside the label, so spacing is the parent's gap. The
       5px trailing margin runs the underline a little past the glyph. */
    .navigation .amtheme-menu-toggle svg {
        display: block;
        height: 6px;
        margin-right: 5px;
        transition: transform 0.2s;
        width: 10px;
    }

    .navigation li.level0.is-open .amtheme-menu-toggle svg {
        transform: rotate(180deg);
    }

    /* --------------------------------------------------------------------
       The panel.

       One shell for the whole menu, mounted for the life of the page.
       inset-inline pulls it out to the container's padding edges (px-6 on
       #header's container) and the side padding carries the border, so the
       first tile lines up with the logo and the first nav label.

       top clears the divider. The 2px gap is not one the pointer can fall
       through: the shell is inside <nav>, and the nav's pointerleave is what
       closes the menu.

       Opening fades the shell; switching category fades one pane out and
       another in inside it. Nothing mounts or unmounts — two elements
       cross-fading, both part-transparent at once, read as a flash.

       The shadow is cast by a box deflated 10px and pushed down 14px, so its
       top edge falls below the shell's own and never bleeds over the trigger
       labels. clip-path did this too, and was removed: it is a grouping
       property and dropped every glyph in the panel to grayscale
       antialiasing.
       -------------------------------------------------------------------- */
    .navigation .tj-mega {
        background: #fff;
        border: 1px solid var(--color-border);
        border-top: 0;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        box-shadow: 0 14px 24px -10px rgb(0 0 0 / 0.14);
        inset-inline: -1.5rem;
        opacity: 0;
        padding: 1.5rem calc(1.5rem - 1px);
        pointer-events: none;
        position: absolute;
        top: calc(100% + 2px);
        /* Closing: fade, then flip visibility at the very end so the panel is
           not withdrawn mid-fade. The 0s duration with a 0.14s delay states
           that explicitly; `visibility 0.14s` left it to the discrete-step
           rule and read as though visibility itself were animating. */
        transition: opacity 0.14s ease-out, visibility 0s linear 0.14s;
        visibility: hidden;
        z-index: 10;
    }

    /* Opening is quicker than closing, and visibility flips at once — the
       panel must be hittable on the first frame. 100ms in, 140ms out. */
    .navigation.is-open .tj-mega {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.1s ease-out, visibility 0s;
        visibility: visible;
    }

    /* Panes are stacked, so the shell needs no height of its own and no
       measuring: above 1280 the grid is seven wide and no category here has
       more than seven children, so every pane is one tile row tall and the
       first pane in flow sizes the shell for all of them. */
    .navigation .tj-mega__viewport {
        position: relative;
    }

    .navigation .tj-mega__pane {
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 0.12s ease-out;
    }

    .navigation .tj-mega__pane:first-child {
        position: relative;
    }

    .navigation .tj-mega__pane.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    /* --------------------------------------------------------------------
       The tiles.

       The width ceiling is on the grid TRACK, not on the card. With 1fr
       tracks and a max-width on the card, the columns stay full width and each
       card shrinks inside its own column: the visible gutters then grow by
       different amounts and the row no longer ends flush with the panel. A
       capped track with justify-content:start keeps the gutter exact, collects
       the slack in one block at the right-hand end, and keeps a wrapped second
       row starting in track 1.
       -------------------------------------------------------------------- */
    .navigation .tj-mega__tiles {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(5, minmax(0, 174px));
        justify-content: start;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navigation .tj-mega__tiles > li {
        margin: 0;
        max-width: none;
        min-width: 0;
        padding: 0;
    }

    /* The card. height:100% so every card in a row matches the tallest,
       whatever its label does. */
    .navigation .category-item.parent.level1 > a {
        align-items: center;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        color: var(--color-fg);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: 100%;
        justify-content: center;
        padding: 0.75rem 0.5rem;
        text-align: center;
        text-decoration: none;
        /* 0.12s, matching the panel's fade and the nav label's colour, so the
           whole menu shares one tempo. */
        transition: background-color 0.12s ease, border-color 0.12s ease,
                    box-shadow 0.12s ease, color 0.12s ease;
    }

    /* #e3f1fd is hsl(206, 85%, 94%) — the brand hue at the brand saturation,
       carried up to near-white, not a grey with blue in it. The lightness is
       what keeps it a hint: the card barely darkens and the state change is
       almost entirely a change of hue.

       The border width stays 1px; growing it on hover reflows the card's
       contents, so any extra weight has to come from the shadow. */
    .navigation .category-item.parent.level1 > a:hover,
    .navigation .category-item.parent.level1 > a:focus-visible {
        background: #e3f1fd;
        border-color: var(--color-secondary);
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        color: var(--color-secondary);
    }

    .navigation .category-item.parent.level1 > a:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 2px;
    }

    /* A CSS rule beats the fill="currentColor" attribute on the SVG root. The
       duration matches the card's, so the glyph does not arrive after it. */
    .navigation .speed-menu-category-link .speed-menu-span-category-vector svg {
        fill: #1f1a16;
        transition: fill 0.12s ease-in-out;
    }

    .navigation .speed-menu-category-link:hover .speed-menu-span-category-vector svg,
    .navigation .speed-menu-category-link:focus-visible .speed-menu-span-category-vector svg {
        fill: var(--color-secondary);
    }

    .navigation .speed-menu-span-category-vector {
        display: block;
        margin-bottom: 0;
    }

    .navigation .speed-menu-span-category-vector svg {
        display: block;
        height: 72px;
        margin: 0 auto;
        width: 72px;
    }

    .navigation .speed-menu-span-category-text {
        display: block;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.025em;
        line-height: 1.3;
        /* Just enough to lift the label off the glyph. On the label rather
           than the card's flex gap so it holds if the label ever wraps. */
        padding-top: 3px;
    }

    /* The parent-category link, right-aligned to the panel's padding, which is
       also where the last tile ends. */
    .navigation .tj-mega__foot {
        display: flex;
        justify-content: flex-end;
        /* 21px, against the 24px of panel padding below the link. The space
           goes here rather than on the anchor: the row is flex-end, so padding
           on the anchor pins its box to the edge and pushes the text inwards
           instead. */
        padding-top: 1.3125rem;
    }

    .navigation .tj-mega__all {
        align-items: center;
        color: var(--color-secondary);
        display: inline-flex;
        font-size: 16px;
        /* 700, not 600: Roboto has no 600 in this theme. */
        font-weight: 700;
        gap: 0.375rem;
        text-decoration: none;
    }

    .navigation .tj-mega__all:hover {
        text-decoration: underline;
    }

    .navigation .tj-mega__all:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 3px;
    }

    .navigation .tj-mega__all svg {
        display: block;
        height: 11px;
        width: 7px;
    }
}

/* ---------------------------------------------------------------------------
   No megamenu below 1280, and none without hover at any width. The comma is
   an OR.

   The nav row stays — every top-level item is a link — so a tap is simple
   navigation to the category page, where the tiles do the job the panel would
   have done. (hover: none) covers the tablet that is wide enough for the width
   rule but has no pointer: it asks the browser about the primary input rather
   than guessing, and a hybrid laptop with a mouse reports (hover: hover) and
   keeps the menu.

   This governs the component for free: megaEnabled() asks whether the shell is
   display:none rather than deciding for itself.
   --------------------------------------------------------------------------- */
@media (max-width: 1279.98px), (hover: none) {
    .navigation .tj-mega,
    .tj-mega-scrim {
        display: none;
    }

    .navigation .amtheme-menu-toggle svg {
        display: none;
    }
}

@media (min-width: 1280px) {
    .navigation .tj-mega__tiles {
        grid-template-columns: repeat(7, minmax(0, 174px));
    }
}

/* ---------------------------------------------------------------------------
   The megamenu backdrop.

   Rendered beside #header by header.phtml, which is what lets it sit under the
   header and over the page: #header is z-30, this is z-20, so the panel —
   which lives inside #header — stays above it.

   It starts at the divider rather than the top of the viewport. inset:0 looks
   identical in Chrome and is not: Safari tints its own toolbar and tab bar
   from the rendered page, so a full-viewport dark layer behind the header
   dimmed the browser chrome along with the page. Declaring a theme-color does
   not help — macOS Safari samples rather than honouring it.

   --tj-scrim-top is the one measurement in this menu, set on open by
   desktop.phtml, which is also why the menu closes on scroll.
   --------------------------------------------------------------------------- */

.tj-mega-scrim {
    background: rgb(0 0 0 / 0.25);
    /* Fixed, not absolute: a box tall enough to cover the viewport would hang
       below #header and lengthen the document. */
    inset: var(--tj-scrim-top, 0) 0 0 0;
    position: fixed;
    z-index: 20;
}

/* ---------------------------------------------------------------------------
   Mobile drawer — the submenu's back row.

   The rows below it carry a 40px icon, so their 12px py reads as a generous
   row; the back row has only a chevron and a label and reads tighter at the
   same value. The chevron goes 20 -> 24 in the template for the same reason.

   Qualified by element because $itemClasses puts py-3 on the same node: with
   equal specificity the winner would depend on stylesheet order.
   --------------------------------------------------------------------------- */

button.tj-mobile-menu__back {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Mobile drawer — row typography. Icons and labels grow; the ink stays at
   near-black, since a larger glyph in a paler grey reads washed out rather
   than lighter. The weight is a real 500 now that Roboto Medium is self-hosted.

   Two selectors because the icon sits in the label span on a level-0 row and
   is a direct child of the link on a child row.
   --------------------------------------------------------------------------- */

.tj-mobile-menu dialog li > a > svg,
.tj-mobile-menu dialog li > button > span:first-child > svg {
    color: #1f1a16;
    height: 44px;
    width: 44px;
}

.tj-mobile-menu dialog li > a,
.tj-mobile-menu dialog li > button {
    color: #1f1a16;
    font-size: 18px;
    font-weight: 500;
}