/**
 * Mega Menu Block Styles
 * 
 * A full-width navigation bar with expandable catalogue dropdown
 */

/* CSS Custom Properties */
.ims-mega-menu-wrapper {
    --mega-menu-bg: var(--color-primary, #FAB000);
    --mega-menu-text: var(--color-dark, #111111);
    --mega-menu-dropdown-bg: #ffffff;
    --mega-menu-hover: rgba(0, 0, 0, 0.1);
    --mega-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --mega-menu-border: var(--color-border, #e5e7eb);
    --mega-menu-link-hover: var(--color-primary, #FAB000);
}

/* Main Navigation Bar */
.ims-mega-menu-wrapper {
    background-color: var(--mega-menu-bg);
    position: relative;
    z-index: 1100;
    width: 100%;
}

.mega-menu-container {
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 0 1.5rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation List */
.mega-menu-nav {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu Items */
.mega-menu-item {
    position: relative;
}

.mega-menu-link,
.mega-menu-trigger,
a.mega-menu-trigger {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    color: var(--mega-menu-text) !important;
    text-decoration: none !important;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

/* Ensure catalogue trigger is visible */
.mega-menu-item.has-dropdown .mega-menu-trigger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mega-menu-link:hover,
.mega-menu-trigger:hover,
.mega-menu-trigger[aria-expanded="true"] {
    background-color: var(--mega-menu-hover);
    color: var(--mega-menu-text);
    text-decoration: none;
}

/* Dropdown Arrow */
.dropdown-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.mega-menu-trigger[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Right Side Links */
.mega-menu-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mega-menu-right .mega-menu-link {
    font-weight: 500;
    text-transform: none;
}

/* ============================================
   MEGA DROPDOWN PANEL
   ============================================ */

.mega-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100vw;
    background: var(--mega-menu-dropdown-bg);
    box-shadow: var(--mega-menu-shadow);
    opacity: 0;
    visibility: hidden;
    /* Keep dropdown pinned to the bottom of the nav at all times.
       Prior translateY(-10px) created a 10px gap during the opening
       transition that caused hover flicker on the catalog trigger. */
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    z-index: 9999;
    /* Fixed height - content flows in columns */
    height: 70vh;
    max-height: 600px;
    min-height: 400px;
    overflow: hidden;
}

.mega-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.mega-dropdown-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dropdown Header */
.mega-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--mega-menu-border);
}

.catalogue-title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mega-menu-text);
    margin: 0;
}

.browse-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--mega-menu-bg);
    color: var(--mega-menu-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.browse-all-link:hover {
    background: var(--color-gold-accent);
    color: var(--mega-menu-text);
    text-decoration: none;
    transform: translateX(3px);
}

.browse-all-link svg {
    transition: transform 0.2s ease;
}

.browse-all-link:hover svg {
    transform: translateX(3px);
}

/* Close Button — prototype style: slim muted pill that turns red on hover */
.mega-dropdown-close {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--mega-menu-border, #e5e7eb);
    border-radius: 5px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mega-dropdown-close svg {
    width: 12px;
    height: 12px;
    color: currentColor;
    stroke-width: 2;
    transition: color 0.15s ease;
}

.mega-dropdown-close:hover,
.mega-dropdown-close:focus-visible {
    color: #dc2626;
    border-color: #dc2626;
    background: transparent;
}

/* ============================================
   CATEGORY GROUPS
   ============================================ */

.mega-dropdown-content {
    padding-top: 0.5rem;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* CSS columns for natural flow */
.category-groups {
    column-count: 3;
    column-gap: 2rem;
    column-fill: auto;
    height: 100%;
}

.category-group {
    margin-bottom: 1.25rem;
    break-inside: auto;
    transition: margin 0.3s ease-out;
}

/* Print-catalogue accent: a 5px coloured rule down the left margin of each
   top-level section, mirroring the margin colours of the printed IMS
   catalogue. Colour comes from --ims-cat-accent, set inline per section in
   render.php via the slug -> hex map in includes/category-accents.php
   (e.g. Engineered Components #FE5000, Industrial Equipment #007041,
   Molding & Extrusion Supplies #003DA5). */
.category-group.has-accent {
    border-left: 4px solid var(--ims-cat-accent);
    padding-left: 0.85rem;
}

.category-group-heading {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    break-after: avoid;
}

.category-group-heading a {
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--mega-menu-bg);
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}

.category-group-heading a:hover {
    color: var(--mega-menu-bg);
}

.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-item {
    margin: 0;
    padding: 0;
}

.category-item a {
    display: block;
    padding: 0.375rem 0;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    transition: color 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.category-item a:hover {
    color: var(--mega-menu-bg);
    text-decoration: none;
}

/* Row = [+] [name link]. The <ul class="category-children"> is a
   sibling below, stacking naturally as a block. */
.category-item.has-children {
    position: relative;
}

.category-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-item--level-2:not(.has-children) > .category-row > .category-link {
    font-weight: 500;
    color: #374151;
}

/* Toggle is now a compact standalone button — just the + square. */
.category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.category-toggle:focus { outline: none; }

/* The name link fills the rest of the row so the clickable target is
   wide; styles are otherwise inherited from .category-item a. */
.category-link {
    /* Shrink to text width so :focus / tap-highlight / active states only
       paint around the label, not the full row. Previously `flex: 1` made
       the anchor fill the remaining row width, which made clicks appear to
       highlight the entire line. */
    flex: 0 0 auto;
    min-width: 0;
    align-self: center;
}

/* Plus/minus icon — prototype style: gold-outlined white square,
   fills gold on hover / when the parent is expanded. */
.toggle-plus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 1.5px solid var(--mega-menu-bg, #FAB000);
    border-radius: 3px;
    background-color: #ffffff;
    color: var(--mega-menu-bg, #FAB000);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.category-toggle:hover .toggle-plus-icon,
.category-toggle[aria-expanded="true"] .toggle-plus-icon {
    background-color: var(--mega-menu-bg, #FAB000);
    color: #ffffff;
}

.category-toggle:focus-visible .toggle-plus-icon {
    outline: 2px solid var(--color-cta, var(--mega-menu-bg));
    outline-offset: 2px;
}

/* Arrow link to view category - hidden by request */
.category-link-icon {
    display: none !important;
}

/* Level-3+ smaller plus icon */
.category-item--level-3 .toggle-plus-icon,
.category-item--level-4 .toggle-plus-icon,
.category-item--level-5 .toggle-plus-icon,
.category-item--level-6 .toggle-plus-icon {
    width: 15px;
    height: 15px;
    font-size: 11px;
    border-width: 1px;
}

/* Collapsible children container - uses display for column reflow */
.category-children {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 0.4rem;
    width: 100%;
    display: none;
}

.category-children[aria-hidden="false"] {
    display: block;
}

/* Stagger animations removed — child items render instantly on expand so
   text never appears to lag behind the layout slot it occupies. */

/* Level 3+ styling - match level 2 */
.category-item--level-3 > .category-row > .category-link,
.category-item--level-4 > .category-row > .category-link,
.category-item--level-5 > .category-row > .category-link,
.category-item--level-6 > .category-row > .category-link {
    font-weight: 500;
    font-size: 0.875rem;
    color: #374151;
    padding: 0.375rem 0;
}

/* Nested category-children get more indentation */
.category-children .category-children {
    padding-left: 0.5rem;
}

.no-categories {
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
    text-align: center;
}

/* ============================================
   OVERLAY WHEN DROPDOWN IS OPEN
   ============================================ */

.mega-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 998;
}

.mega-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Body class when mega menu is open */
body.mega-menu-open {
    overflow: hidden;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1200px) {
    .category-groups {
        column-gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .mega-menu-container {
        padding: 0 1rem;
    }
    
    .mega-menu-link,
    .mega-menu-trigger {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .category-groups {
        column-count: 2;
        column-gap: 1.5rem;
    }
    
    .mega-dropdown-inner {
        padding: 1.25rem 1.5rem 1.5rem;
    }
    
    .catalogue-title {
        font-size: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .mega-menu-right {
        display: none;
    }
}

@media (max-width: 768px) {
    .mega-menu-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .mega-menu-nav::-webkit-scrollbar {
        display: none;
    }
    
    .mega-menu-link,
    .mega-menu-trigger {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .mega-dropdown {
        height: auto;
        max-height: calc(100vh - 150px);
        min-height: auto;
        overflow-y: auto;
    }
    
    .mega-dropdown-inner {
        padding: 1rem;
        height: auto;
    }
    
    .mega-dropdown-content {
        overflow: visible;
    }
    
    .category-groups {
        column-count: 1;
        height: auto;
    }
    
    .mega-dropdown-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .catalogue-title {
        font-size: 1.125rem;
        width: 100%;
    }
    
    .browse-all-link {
        width: 100%;
        justify-content: center;
    }
    
    .mega-dropdown-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .category-group {
        border-bottom: 1px solid var(--mega-menu-border);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .category-group:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .category-item a {
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }
}

/* ============================================
   ANIMATION EFFECTS
   ============================================ */

/* Expand highlight: when a leaf is opened the surrounding flow can reflow
   and shift the clicked row upward, making it hard to tell which node you
   just opened. Flash its row background twice so the eye can track it. */
@keyframes ims-mm-flash {
    0%   { background-color: transparent; }
    25%  { background-color: rgba(250, 176, 0, 0.55); }
    50%  { background-color: transparent; }
    75%  { background-color: rgba(250, 176, 0, 0.55); }
    100% { background-color: transparent; }
}

.ims-mega-menu-wrapper .category-row.is-flashing {
    border-radius: 4px;
    animation: ims-mm-flash 1.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .ims-mega-menu-wrapper .category-row.is-flashing {
        animation: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-dropdown[aria-hidden="false"] .category-groups {
    animation: fadeInDown 0.3s ease forwards;
}

/* ============================================
   ACCESSIBILITY FOCUS STATES
   ============================================ */

.mega-menu-link:focus,
.mega-menu-trigger:focus,
.browse-all-link:focus,
.mega-dropdown-close:focus,
.category-item a:focus {
    outline: none;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.06);
}

/* Visible focus for keyboard users */
.mega-menu-link:focus-visible,
.mega-menu-trigger:focus-visible,
.browse-all-link:focus-visible,
.mega-dropdown-close:focus-visible,
.category-item a:focus-visible {
    outline: none;
    background-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

/* ==========================================================================
   Prototype Parity — nav bar look & sticky behaviour
   ========================================================================== */

/* Sticky nav bar below compact header. Top value generous enough to
   account for any sub-pixel rendering / box-shadow so the nav can't
   drift under the header on scroll direction change. */
.ims-mega-menu-wrapper {
    position: sticky;
    top: 76px;
    z-index: 999; /* below .compact-header (1000), above .mega-menu-overlay (998) */
}

/* Max-width matches header: content area = 1440px at wide viewports, and
   inset = 24px once the viewport is narrower than 1440+48. The extra 48px
   on max-width accounts for the container's own horizontal padding so the
   *content* edges align with .compact-header's inner group (max-width 1440
   with no padding). */
.ims-mega-menu-wrapper .mega-menu-container {
    /* max-width: 1488px; */
    /* padding: 0 24px; */
    justify-content: flex-start;
}

/* Nav list takes full width so the right-side links can push to the end. */
.ims-mega-menu-wrapper .mega-menu-nav {
    flex: 1;
    align-items: stretch;
}

.ims-mega-menu-wrapper .mega-menu-item {
    display: flex;
    align-items: stretch;
}

/* Nav link typography + sizing to match prototype. */
.ims-mega-menu-wrapper .mega-menu-link,
.ims-mega-menu-wrapper .mega-menu-trigger,
.ims-mega-menu-wrapper a.mega-menu-trigger {
    height: 38px;
    padding: 0 14px !important;
    color: rgba(0, 0, 0, 0.82) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    gap: 5px;
}

/* Highlighted nav item: solid black "tab" with white text, leaving a
   thin sliver of the yellow nav bar visible at the bottom edge so the
   highlight reads as a tab dropping down from the dark header above. */
.ims-mega-menu-wrapper .mega-menu-link:hover,
.ims-mega-menu-wrapper .mega-menu-trigger:hover,
.ims-mega-menu-wrapper .mega-menu-trigger[aria-expanded="true"] {
    background-color: transparent !important;
    background-image: linear-gradient(
        to bottom,
        #111111 0,
        #111111 calc(100% - 3px),
        transparent calc(100% - 3px),
        transparent 100%
    ) !important;
    color: #ffffff !important;
}

.ims-mega-menu-wrapper .mega-menu-link:hover .dropdown-arrow,
.ims-mega-menu-wrapper .mega-menu-trigger:hover .dropdown-arrow,
.ims-mega-menu-wrapper .mega-menu-trigger[aria-expanded="true"] .dropdown-arrow {
    color: #ffffff;
}

/* Smaller chevron for the catalog trigger. */
.ims-mega-menu-wrapper .dropdown-arrow {
    width: 12px;
    height: 12px;
}

/* Right-side links pushed to the far end, styled like nav items. */
.ims-mega-menu-wrapper .mega-menu-right {
    margin-left: auto;
    align-items: stretch;
    gap: 0;
}

.ims-mega-menu-wrapper .mega-menu-right .mega-menu-link {
    height: 38px;
    padding: 0 14px !important;
    font-weight: 700 !important;
    font-size: 12.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase !important;
}

/* Sale! nav item — red pill badge, matches prototype */
.ims-mega-menu-wrapper .mega-menu-item.sale-item .mega-menu-link {
    display: inline-flex;
    align-items: center;
}
.ims-mega-menu-wrapper .mega-menu-item.sale-item .sale-badge {
    background: #DC2626;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
}
/* Sale! item shares the black "tab" hover with the other nav items —
   the red pill badge stays red and now sits on the black tab. */
.ims-mega-menu-wrapper .mega-menu-item.sale-item .mega-menu-link:hover .sale-badge {
    background: #b91c1c;
}

/* "+ NEW" nav item — green pill badge that mirrors the corner chip
   rendered on listing / PDP cards (see .ims-product-card-vm-badge--new
   in assets/css/product-listing.css) so the colour + typography read
   as the same component across nav and product cards. */
.ims-mega-menu-wrapper .mega-menu-item.new-item .mega-menu-link {
    display: inline-flex;
    align-items: center;
}
.ims-mega-menu-wrapper .mega-menu-item.new-item .new-badge {
    display: inline-flex;
    align-items: center;
    background: #16A34A;
    color: #ffffff;
    padding: 0.28rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ims-mega-menu-wrapper .mega-menu-item.new-item .mega-menu-link:hover .new-badge {
    background: #15803D;
}

/* Hover affordance: underline the category name so it's clearly a link.
   Lighter/thinner than the default browser underline — uses the text colour
   at reduced opacity and underline-offset to breathe. Applies to every
   clickable category name (top-level heading + nested link rows). */
.ims-mega-menu-wrapper .category-group-heading a:hover,
.ims-mega-menu-wrapper .category-link:hover {
    text-decoration: underline;
    text-decoration-color: rgba(17, 17, 17, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Hover hint: show "(N)" next to a category name when the term has products
   assigned directly to it (not counting descendants). Attribute is only
   rendered server-side when direct_count > 0, so the selector doubles as
   the conditional — no direct products = no attribute = no hint.

   Applies to both category-group headings (top-level parents in the grid)
   and category-link rows (children at every depth). */
.ims-mega-menu-wrapper .category-group-heading a[data-direct-label]:hover::after,
.ims-mega-menu-wrapper .category-link[data-direct-label]:hover::after {
    content: " (" attr(data-direct-label) ")";
    color: #888;
    font-weight: 400;
    margin-left: 0.25rem;
    /* Don't underline the "(N products)" hint itself — only the name. */
    text-decoration: none;
    display: inline-block;
}