/**
 * TransferJet — desktop navigation.
 *
 * A direct port of the SpeedTheme megamenu CSS. Selectors, class names and
 * values are kept as they were so this file can be diffed against the source:
 *
 *   J = JetTheme  web/css/source/am-lib/_navigation.less
 *                 web/css/source/am-lib/variables/_navigation.less
 *   S = SpeedTheme web/css/source/_am-jet-extend.less
 *
 * LESS variables resolved to literals, with design tokens used where the
 * theme already defines one:
 *
 *   @amtheme__secondary__color          #0f94c9   var(--color-secondary)
 *   @amtheme__border__color             #dfdedd   var(--color-border)
 *   @amtheme__text-secondary__color     #4a4948   var(--color-fg-secondary)
 *   @amtheme__background-secondary__color #f7f7f7  darken(#fff, 3%)
 *   lighten(@amtheme__text-primary__color, 8%)  #1f1a16
 *   @amtheme__border-radius__s          4px
 *   @screen__l / @screen__xl            1024px / 1440px
 *
 * Differences from the original, and why:
 *
 * 1. li.level0 is position:relative so each submenu anchors under its own item.
 *    The original relied on jQuery UI writing inline left/top values
 *    (data-mage-init: position my "left top", at "left bottom").
 * 2. The dropdown arrow is a real <button> rather than an a:before background
 *    image, so the menu is keyboard operable. Spacing is unchanged: 10px before
 *    the arrow, 5px after, then the 40px item gap — 65px total, matching
 *    @amasty-navigation-desktop-item-arrow__padding-right.
 * 3. Show/hide is Alpine x-show (which sets inline display:none) instead of
 *    jQuery UI, so .submenu defaults to display:flex here rather than none.
 * 4. There is no current-item state. The port carried J's underline and bold
 *    for the active category, keyed on [data-has-current], but that attribute
 *    matches the exact category node only: it fires on /motordeler and not on
 *    /motordeler/eksos, so on the second-level pages where most browsing
 *    happens the indicator is simply absent. speedoptions.no shows no
 *    persistent current-category state either, so both the underline and the
 *    font-weight:700 are dropped and hover is the only coloured state.
 *    The .amtheme-active-item selectors went with them; nothing in this theme
 *    ever set that class — desktop.phtml only writes data-has-current.
 * 5. The dropdown panel carries a border, a small shadow and wider side
 *    padding, none of which speedoptions.no has. On the reference the panel
 *    never sits against anything sharing its grey. Here the Amasty finder is
 *    directly beneath it on category pages using --color-bg-alt, close enough
 *    to the panel's #f7f7f7 that the two merge into one surface. The border
 *    separates them and the shadow lifts the panel; the 4px radius was already
 *    present and only becomes visible once the border is drawn.
 * 6. A top-level item with children renders as a <button>, not an <a>, and the
 *    chevron is inside it rather than beside it. See the note in
 *    desktop.phtml. Selectors here therefore match .level-top rather than a,
 *    so both element types are styled identically, and the level-top rule
 *    carries the resets a button needs to stop looking like one.
 */

/* J: .navigation is desktop only; mobile is handled by the mobile menu block. */
.navigation {
    display: none;
}

@media (min-width: 1024px) {
    .navigation {
        display: block;
    }

    /* J: .navigation > ul */
    .navigation > ul {
        border-bottom: 2px solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* J: li.level0 — 40px item gap. relative is ours (see note 1). */
    .navigation li.level0 {
        cursor: pointer;
        margin: 0;
        padding: 0 40px 0 0;
        position: relative;
    }

    /* J: .category-item > a, .level-top > a

       Matches .level-top rather than a, because an item with children renders
       as a <button> (see the note in desktop.phtml) and must be visually
       identical to an item without. The resets below are what a button needs
       to stop looking like one; they are inert on the 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;
        padding: 20px 0;
        position: relative;
        text-decoration: none;
        transition: color 0.3s;
    }

    /* J: li.level0 > a:after — the growing underline, width 0 -> 100%. */
    .navigation li.level0 > span > .level-top:after {
        background: var(--color-secondary);
        bottom: -2px;
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        transition: width 0.2s linear;
        width: 0;
    }

    .navigation li.level0:hover > span > .level-top:after {
        width: 100%;
    }

    /* J: hover colour. See note 4 — the active-item variants are gone. */
    .navigation li.level0:hover > span > .level-top {
        color: var(--color-secondary);
    }

    /* The chevron. Once its own button (note 2); now part of the label button,
       so the spacing is the parent's gap and only the glyph is described here.
       The 5px trailing margin is kept so the underline still runs a little past
       the chevron, as it did when the two were separate. */
    .navigation .amtheme-menu-toggle svg {
        display: block;
        height: 6px;
        margin-right: 5px;
        transition: transform 0.2s;
        width: 10px;
    }

    .navigation .amtheme-menu-toggle[aria-expanded='true'] svg {
        transform: rotate(180deg);
    }

    /* J: li.level0 > .submenu — 10px gap + 2px line = 12px below the nav line.
       The offset is transparent padding, not a margin, so the pointer can cross
       it without leaving the <li> and closing the panel. */
    .navigation li.level0 > .submenu {
        border-radius: 4px;
        cursor: default;
        left: 0;
        list-style: none;
        margin: 0;
        max-width: 90vw;
        /* 28px sides against J's 20px: see note 5. */
        padding: 37px 36px 25px;
        position: absolute;
        top: 100%;
        /* Without this the panel shrink-to-fits against its containing block,
           which is now li.level0 (see note 1) and only as wide as that item's
           label, so the flex columns shrink below their content and the labels
           wrap. The original avoided this because jQuery UI wrote explicit
           inline positioning rather than using a relative ancestor. */
        width: max-content;
        z-index: 10;
    }

    /* J: the grey panel is a :before layer starting below the 12px gap. */
    .navigation li.level0 > .submenu:before {
        background: #f7f7f7;
        /* See note 5 — border and shadow are a deliberate deviation. */
        border: 1px solid var(--color-border);
        border-radius: 4px;
        box-shadow: 0 3px 9px rgb(0 0 0 / 0.06);
        content: '';
        display: block;
        height: calc(100% - 12px);
        left: 0;
        position: absolute;
        top: 12px;
        width: 100%;
        z-index: -1;
    }

    .navigation li.level0 > .submenu.amtheme-menu-flex {
        display: flex;
    }

    /* S: column separation — padding-right and margin-right, divider between. */
    .navigation li.level0 > .submenu > li {
        flex: 0 0 auto;
        margin: 0;
        max-width: 300px;
        min-width: 80px;
        padding: 0 20px 0 0;
    }

    .navigation li.level0 > .submenu.amtheme-menu-flex > li:not(:last-child) {
        border-right: 1px solid var(--color-border);
        margin: 0 20px 0 0;
    }

    .navigation li.level0 > .submenu > li:last-child {
        padding: 0;
    }

    /* S: .category-item.parent.level1 > a */
    .navigation .category-item.parent.level1 > a {
        color: var(--color-fg-secondary);
        display: block;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        transition: color 0.4s ease-in-out;
    }

    .navigation .category-item.parent.level1 > a:hover {
        color: var(--color-secondary);
    }

    /* S: icon fill lighten(@amtheme__text-primary__color, 8%), hover secondary.
       A CSS rule beats the fill="currentColor" attribute on the SVG root. */
    .navigation .speed-menu-category-link .speed-menu-span-category-vector svg {
        fill: #1f1a16;
        transition: fill 0.3s ease-in-out;
    }

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

    /* S: .speed-menu-span-category-vector / -text */
    .navigation .speed-menu-span-category-vector {
        display: block;
        margin-bottom: 0.4rem;
    }

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

    .navigation .speed-menu-span-category-text {
        display: block;
    }
}

/* S: at @screen__xl the column gaps widen to 30px and min-width to 100px. */
@media (min-width: 1440px) {
    .navigation li.level0 > .submenu > li {
        min-width: 100px;
        padding: 0 30px 0 0;
    }

    .navigation li.level0 > .submenu.amtheme-menu-flex > li:not(:last-child) {
        margin: 0 30px 0 0;
    }

    .navigation li.level0 > .submenu > li:last-child {
        padding: 0;
    }
}

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

   The item rows below it carry a 40px category icon, so their 12px py reads as
   a generous row. The back row has only a chevron and a label, so the same
   padding leaves it visibly tighter than everything under it. 20px evens the
   rhythm; the chevron goes 20 -> 24 in the template for the same reason.

   The selector is button.tj-mobile-menu__back rather than the class alone.
   $itemClasses puts py-3 on the same element, which is also a single class, so
   with equal specificity the winner would depend on stylesheet order. The
   element qualifier settles it.

   Outside the desktop media query above: the drawer is lg:hidden, so it never
   meets these rules at desktop widths anyway.
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Mobile drawer — row typography.

   Icons and labels grow; the ink stays where it was.

   An earlier pass lightened these to #6b6866 and #4a4948 on the theory that
   growing them at near-black would read heavy. That was wrong. A larger glyph
   in a paler grey does not read heavier, it reads washed out, and the labels
   lost legibility for nothing in return. Size and weight carry the emphasis on
   their own. If the 44px icons ever do read too heavy, the lever is their
   size, not their colour.

   The weight is a real 500 now that Roboto Medium is self-hosted — before that
   the browser fell back to 400 and this rule did nothing.

   The two selectors separate the category icon from the chevron: on a level-0
   row the icon sits inside the label span while the chevron is in its own
   button, and on a child row the icon is a direct child of the link.
   --------------------------------------------------------------------------- */

.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;
}