/*
 * Brytesoft brand styling for Amasty Mega Menu Lite (Hyva).
 * Restores the production look — uppercase, semibold, balanced padding —
 * over the Lite-Hyva default which renders mixed-case text with extra height.
 */

/* Top-level nav: uppercase, semibold, smaller text to match production scale. */
[x-ref="nav-desktop"] nav > ul > li > a {
    padding: 0.5rem 0.75rem;
    gap: 6px;
    transition: color 0.18s ease;
}

[x-ref="nav-desktop"] nav > ul > li > a > span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 600 !important; /* override Lite-Hyva inline :style font-weight */
    white-space: nowrap;
}

/* Chevron indicator on items with a dropdown.
   :has([x-ref="amMenuSubmenuItemOpen"]) only matches WHILE the dropdown
   is open (Alpine renders the template into the DOM on itemOpen=true),
   so the chevron would only appear on hover. Switch to `li[data-item-id]`
   — Lite-Hyva only sets that attribute on LIs that have an open-able
   dropdown (Request a Quote has hide_content=1 → no data-item-id). */
[x-ref="nav-desktop"] nav > ul > li[data-item-id] > a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.22s ease, color 0.18s ease;
    flex-shrink: 0;
}

/* Flip chevron when item is hovered or the dropdown is open. */
[x-ref="nav-desktop"] nav > ul > li[data-item-id]:hover > a::after {
    transform: rotate(180deg);
    color: #e45926;
}

/* Smooth fade + slide-down for the dropdown panel. */
@keyframes bsm-menu-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] {
    animation: bsm-menu-fade-in 0.22s ease-out;
    transform-origin: top center;
}

/* Brand-tinted hover on the inner content links (smoother color transition). */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] a {
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover bg already wired to --ammenu-main-menu-background-hover via Alpine;
   ensure consistent border + spacing between items. */
[x-ref="nav-desktop"] nav > ul {
    align-items: center;
}

[x-ref="nav-desktop"] nav > ul > li {
    display: flex;
    align-items: center;
    position: relative; /* anchor the absolute submenu dropdown to its trigger */
}

/* Products / Resource top items are hover-only: the dropdown is the
   navigation, the parent anchor itself should not be clickable.
   pointer-events:none on the <a> blocks click + cursor while leaving
   @mouseenter on the parent <li> intact (Alpine listens on the LI). */
/* Products / Resource node ids differ per environment (staging 75/76,
   production 93/94) — list both so the hover-only behavior works on each. */
[x-ref="nav-desktop"] nav > ul > li[data-item-id="category-node-75"] > a,
[x-ref="nav-desktop"] nav > ul > li[data-item-id="category-node-76"] > a,
[x-ref="nav-desktop"] nav > ul > li[data-item-id="category-node-93"] > a,
[x-ref="nav-desktop"] nav > ul > li[data-item-id="category-node-94"] > a {
    pointer-events: none;
    cursor: default;
}

/* Submenu dropdown: anchor below the trigger, size to content, force
   solid white panel.
   - Override Lite-Hyva's `max-w-full` and inline `width: max-content`
     so the 4-col tile grid renders at intended size.
   - Force `background-image: none` because Lite-Hyva injects
     `--ammenu-submenu-background-image: url()` (empty arg → invalid CSS)
     which interferes with the white background fill.
   - Add subtle shadow so the panel reads above the hero band. */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] {
    top: 100%;
    left: 0;
    max-width: none !important;
    width: auto !important;
    min-width: 820px;
    background-image: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
}

/* Drop the rounded corners on the open submenu container to match brand. */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] {
    border-radius: 0 0 0.75rem 0.75rem;
}

/* End-of-row items: flip the dropdown so it doesn't run off the right edge. */
[x-ref="nav-desktop"] nav > ul > li:nth-last-child(-n+2) [x-ref="amMenuSubmenuItemOpen"] {
    left: auto;
    right: 0;
}

/* The dropdown panel sits inside <li class="cursor-pointer">, so the
   empty padding/whitespace inside the dropdown inherits the pointer
   cursor. Reset the panel to default and only restore the pointer on
   actual links so whitespace no longer looks clickable. */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] {
    cursor: default;
}

[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] a {
    cursor: pointer;
}

/* New top-level menu is 3 items: Products (mega), Resource (small dropdown),
   Request a Quote (no dropdown). The 'Request a Quote' item has hide_content=1
   so its dropdown wrapper is not rendered at all.

   The Lite-Hyva subcategory list (.grid.content-start) is no longer used
   for the new top-level categories — our hand-built content HTML in
   data-content="ammenu-content" is the entire dropdown. Hide the
   subcategory grid defensively in case the template still renders it. */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] .grid.content-start {
    display: none !important;
}

/* Resource (small dropdown): override the 820px min-width on the dropdown
   so it sizes naturally to the link list. */
[x-ref="nav-desktop"] [data-item-id="category-node-76"] [x-ref="amMenuSubmenuItemOpen"],
[x-ref="nav-desktop"] [data-item-id="category-node-94"] [x-ref="amMenuSubmenuItemOpen"] {
    min-width: 220px;
}

/* Request a Quote: target the LI by category-node id and ensure no
   dropdown panel renders even if Lite-Hyva injects one. */
[x-ref="nav-desktop"] [data-item-id="category-node-77"] [x-ref="amMenuSubmenuItemOpen"],
[x-ref="nav-desktop"] [data-item-id="category-node-95"] [x-ref="amMenuSubmenuItemOpen"] {
    display: none !important;
}

/* Products mega menu: brand-tinted hover background on each link tile so
   active items stand out, matching the small Resource dropdown feel.
   Overrides the inline <style> block injected with the seeded content. */
[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] .bsm-mega-list a {
    padding: 4px 8px !important;
    border-radius: 6px;
    margin: 0 -8px;
}

[x-ref="nav-desktop"] [x-ref="amMenuSubmenuItemOpen"] .bsm-mega-list a:hover {
    background: #fff5f0 !important;
    color: #e45926 !important;
}

/*
 * Mobile menu drawer (Lite-Hyva).
 * Hyva's in-browser Tailwind JIT does not compile arbitrary classes that
 * use CSS variables (e.g. `bg-[var(--ammenu-main-menu-background)]`), so
 * the drawer's <aside> renders transparent on staging — the page shows
 * through the menu. Force the background and brand-tinted hover here
 * via explicit CSS that does not depend on the JIT.
 */
#ammenu-sidebar aside {
    background-color: #ffffff !important;
    max-width: 100vw !important; /* override Lite-Hyva's max-w-lg cap so the drawer is full width on mobile */
    width: 100vw !important;
}

/* Hide the hamburger button by default until Alpine evaluates `x-show`.
   The upstream button has `x-show="is_hamburger || isMobile"` but no
   x-cloak, so it flashes visible on desktop during initial paint.
   Hide it at >=1024px (the Hyva desktop breakpoint) until JS toggles
   visibility on resize/mobile UA. */
@media (min-width: 1024px) {
    button.-hamburger.-trigger {
        display: none;
    }
}

#ammenu-sidebar aside h2 span {
    color: #161616 !important;
}

#ammenu-sidebar aside a,
#ammenu-sidebar aside button[role="tab"] {
    color: #333;
}

#ammenu-sidebar aside a:hover,
#ammenu-sidebar aside button[role="tab"]:hover {
    color: #e45926;
}

/* Mobile tab strip (Menu / Account): brand the active tab. */
#ammenu-sidebar aside [role="tablist"] {
    background-color: #f6f6f6 !important;
}

#ammenu-sidebar aside [role="tab"][aria-selected="true"],
#ammenu-sidebar aside [role="tab"].active {
    background-color: #ffffff !important;
    color: #e45926 !important;
}

/* Category list rows in the mobile drawer */
#ammenu-sidebar aside ul li > div,
#ammenu-sidebar aside ul li > a {
    padding: 0.75rem 1rem;
}

#ammenu-sidebar aside ul li {
    border-bottom: 1px solid #f0f0f0;
}

/* The custom mobile_content HTML is rendered inside a wrapper that
   Lite-Hyva forces to `flex justify-between border-t mx-4`. Reset it
   so our accordion (`.bsm-mob`) can use the full drawer width and
   start flush against the side. */
#ammenu-sidebar aside [data-content="ammenu-content"] {
    display: block !important;
    margin: 0 !important;
    border-top: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#ammenu-sidebar aside [data-content="ammenu-content"] > .bsm-mob {
    width: 100%;
}

/* Suppress the default li bottom-border under accordion rows (the rows
   already have a border-top via .bsm-mob-group). */
#ammenu-sidebar aside .bsm-mob li {
    border-bottom: none;
}

/* Inner accordion item rows: shrink the inherited 0.75rem padding so
   our compact 8/12 spacing wins. */
#ammenu-sidebar aside .bsm-mob-items a,
#ammenu-sidebar aside .bsm-mob-items .bsm-mob-soon {
    padding: 8px 12px;
}