/**
 * StrongMag Header & Navigation — v1.4.0
 *
 * Layer 2: WoodMart Header Builder presentation. The layout itself remains
 * editable in WoodMart > Header Builder; this file supplies StrongMag's visual
 * hierarchy, search treatment, navigation states and mobile polish.
 */

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header {
    --sm-header-border: rgba(148, 163, 184, 0.34);
    --sm-header-hover: var(--sm-surface-soft);
    font-family: var(--sm-font-sans);
}

.strongmag-site .whb-header :where(.whb-row, .whb-general-header, .whb-header-bottom) {
    background-color: var(--sm-surface);
}

.strongmag-site .whb-header .whb-general-header {
    border-bottom: 1px solid var(--sm-header-border);
}

.strongmag-site .whb-header .whb-header-bottom {
    border-bottom: 1px solid var(--sm-border);
}

.strongmag-site .whb-sticky-header,
.strongmag-site .whb-sticked .whb-main-header {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.strongmag-site .whb-header .container {
    width: min(100% - 32px, 1440px);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header :where(.site-logo, .wd-logo) img {
    width: auto;
    max-height: 50px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Search: high-prominence product discovery
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header [class*="wd-header-search-form"] {
    width: min(100%, 720px);
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) .searchform {
    min-height: 46px;
    overflow: hidden;
    background: var(--sm-surface-soft);
    border: 1px solid var(--sm-border-strong);
    border-radius: var(--sm-radius-sm);
    box-shadow: none;
    transition: border-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast), background-color var(--sm-transition-fast);
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) .searchform:focus-within {
    background: var(--sm-surface);
    border-color: var(--sm-accent);
    box-shadow: var(--sm-focus-ring);
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) input[type="text"],
.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) input[type="search"] {
    min-width: 0 !important;
    min-height: 46px;
    color: var(--sm-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) input::placeholder {
    color: var(--sm-ink-500);
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) :where(.searchsubmit, button[type="submit"]) {
    min-width: 48px;
    min-height: 46px;
    color: #fff;
    background: var(--sm-primary);
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

.strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) :where(.searchsubmit, button[type="submit"]):hover {
    color: #fff;
    background: var(--sm-primary-hover);
}

.strongmag-site .whb-header .search-by-category {
    color: var(--sm-text-muted);
    background: transparent;
    border-inline-start: 1px solid var(--sm-border);
}

/* --------------------------------------------------------------------------
   Main navigation
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header .wd-nav-main > li > a {
    min-height: 44px;
    padding-inline: 13px;
    color: var(--sm-ink-700);
    border-radius: var(--sm-radius-xs);
    box-shadow: inset 0 -2px 0 transparent;
    font-size: 14px;
    font-weight: 680;
    letter-spacing: -0.005em;
    text-transform: none;
    transition: color var(--sm-transition-fast), background-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast);
}

.strongmag-site .whb-header .wd-nav-main > li:hover > a,
.strongmag-site .whb-header .wd-nav-main > li.current-menu-item > a,
.strongmag-site .whb-header .wd-nav-main > li.current-menu-ancestor > a,
.strongmag-site .whb-header .wd-nav-main > li.current-product_cat-ancestor > a {
    color: var(--sm-primary);
    background: var(--sm-green-50);
    box-shadow: inset 0 -2px 0 var(--sm-primary);
}

.strongmag-site .whb-header :where(.wd-dropdown, .wd-dropdown-menu, .wd-sub-menu) {
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-md);
    box-shadow: var(--sm-shadow-md);
}

.strongmag-site .whb-header :where(.wd-dropdown, .wd-dropdown-menu, .wd-sub-menu) a {
    border-radius: var(--sm-radius-xs);
    text-transform: none;
}

.strongmag-site .whb-header :where(.wd-dropdown, .wd-dropdown-menu, .wd-sub-menu) li:hover > a {
    color: var(--sm-primary);
    background-color: var(--sm-green-50);
}

/* --------------------------------------------------------------------------
   Product categories trigger
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header .wd-header-cats .menu-opener {
    min-height: 44px;
    padding-inline: 18px;
    color: #fff;
    background: var(--sm-primary);
    border: 1px solid var(--sm-primary);
    border-radius: var(--sm-radius-sm);
    box-shadow: none;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color var(--sm-transition-fast), border-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast), transform var(--sm-transition-fast);
}

.strongmag-site .whb-header .wd-header-cats .menu-opener:hover,
.strongmag-site .whb-header .wd-header-cats.wd-opened .menu-opener {
    color: #fff;
    background: var(--sm-primary-hover);
    border-color: var(--sm-primary-hover);
    box-shadow: var(--sm-shadow-sm);
}

.strongmag-site .whb-header .wd-header-cats .menu-opener :where(.menu-open-label, .wd-tools-text) {
    color: inherit;
    font-weight: inherit;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Account, wishlist, compare and cart controls
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header .wd-tools-element > a {
    min-height: 44px;
    padding-inline: 9px;
    color: var(--sm-ink-700);
    border-radius: var(--sm-radius-sm);
    transition: color var(--sm-transition-fast), background-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast);
}

.strongmag-site .whb-header .wd-tools-element > a:hover {
    color: var(--sm-accent);
    background: var(--sm-purple-50);
}

.strongmag-site .whb-header .wd-tools-element :where(.wd-tools-text, .wd-tools-icon) {
    color: inherit;
}

.strongmag-site .whb-header :where(.wd-tools-count, .wd-cart-number) {
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    color: #fff;
    background: var(--sm-accent);
    border-radius: var(--sm-radius-pill);
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
}

/* --------------------------------------------------------------------------
   StrongMag B2B accent CTA
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header .strongmag-nav-b2b > a,
.strongmag-site .whb-header .sm-header-b2b > a,
.strongmag-site .whb-header a.sm-header-b2b,
.strongmag-site .whb-header .sm-header-b2b .btn {
    min-height: 40px;
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: var(--sm-accent) !important;
    border: 1px solid var(--sm-accent) !important;
    border-radius: var(--sm-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 750 !important;
    line-height: 1.2;
    text-transform: none !important;
}

.strongmag-site .whb-header .strongmag-nav-b2b > a:hover,
.strongmag-site .whb-header .sm-header-b2b > a:hover,
.strongmag-site .whb-header a.sm-header-b2b:hover,
.strongmag-site .whb-header .sm-header-b2b .btn:hover {
    color: #fff !important;
    background: var(--sm-accent-hover) !important;
    border-color: var(--sm-accent-hover) !important;
    box-shadow: 0 8px 18px rgba(91, 33, 182, 0.18) !important;
}

.strongmag-site .whb-header .strongmag-nav-b2b.current-menu-item > a {
    color: #fff !important;
    background: var(--sm-accent-hover) !important;
    box-shadow: none;
}



/* --------------------------------------------------------------------------
   My Account dropdown

   WoodMart renders the account dropdown as a card that contains another
   `.wd-sub-menu`. The generic dropdown styling above would otherwise give
   both layers their own border/radius/shadow, producing the visible
   "card-inside-a-card" effect. Keep one clean surface and make every account
   destination a full-width, easy-to-scan row.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    /*
     * Hover bridge between the account trigger and its dropdown. WoodMart
     * places the dropdown a little below the trigger, leaving a dead zone
     * that can cancel :hover before the pointer reaches the menu. This
     * transparent bridge exists only while the account control is hovered
     * (or keyboard-focused), so it does not block the header normally.
     */
    .strongmag-site .whb-header .wd-header-my-account {
        position: relative;
    }

    .strongmag-site .whb-header .wd-header-my-account:hover::after,
    .strongmag-site .whb-header .wd-header-my-account:focus-within::after {
        content: "";
        position: absolute;
        z-index: 9999;
        top: 100%;
        inset-inline-end: 0;
        width: 260px;
        height: 42px;
        background: transparent;
        pointer-events: auto;
    }

    .strongmag-site .whb-header .wd-header-my-account > .wd-dropdown-my-account {
        box-sizing: border-box;
        width: 260px;
        min-width: 260px;
        padding: 8px !important;
        background: var(--sm-surface) !important;
        border: 1px solid var(--sm-border) !important;
        border-radius: var(--sm-radius-md) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13) !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        overflow: hidden;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li
        > a {
        display: flex;
        align-items: center;
        min-height: 42px;
        margin: 0 !important;
        padding: 10px 12px !important;
        color: var(--sm-ink-700) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: var(--sm-radius-xs) !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 620;
        line-height: 1.3;
        text-transform: none;
        transition: color var(--sm-transition-fast), background-color var(--sm-transition-fast);
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li
        > a:hover,
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.is-active
        > a {
        color: var(--sm-accent) !important;
        background: var(--sm-purple-50) !important;
    }

    /* Visually separate the destructive action from normal account navigation. */
    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--sm-border) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout
        > a {
        color: var(--sm-danger) !important;
    }

    .strongmag-site .whb-header .wd-header-my-account
        > .wd-dropdown-my-account
        > ul.wd-sub-menu
        > li.woocommerce-MyAccount-navigation-link--customer-logout
        > a:hover {
        color: var(--sm-danger) !important;
        background: #fef2f2 !important;
    }
}

/* --------------------------------------------------------------------------
   Optional compact trust strip for a Header Builder Text/HTML element.
   Add class `sm-header-trust` to the element/container.
   -------------------------------------------------------------------------- */

.strongmag-site .whb-header .sm-header-trust {
    color: var(--sm-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.strongmag-site .whb-header .sm-header-trust strong {
    color: var(--sm-heading);
}

/* --------------------------------------------------------------------------
   Mobile header/navigation
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .strongmag-site .whb-header .container {
        width: min(100% - 20px, 100%);
    }

    .strongmag-site .whb-header :where(.site-logo, .wd-logo) img {
        max-width: min(150px, 38vw);
        max-height: 42px;
    }

    .strongmag-site .whb-header .wd-tools-element > a,
    .strongmag-site .whb-header :where(.wd-header-mobile-nav, .mobile-nav-icon) > a {
        min-width: 44px;
        min-height: 44px;
        padding-inline: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--sm-radius-sm);
    }

    .strongmag-site .whb-header :where(.wd-header-mobile-nav, .mobile-nav-icon) > a:hover {
        color: var(--sm-primary);
        background: var(--sm-green-50);
    }

    .strongmag-site .whb-header [class*="wd-header-search-form"] {
        width: 100%;
    }

    .strongmag-site .mobile-nav .wd-nav-mobile > li > a,
    .strongmag-site .wd-side-hidden .wd-nav-mobile > li > a {
        min-height: 48px;
        color: var(--sm-ink-700);
        font-weight: 680;
        text-transform: none;
    }

    .strongmag-site .mobile-nav .wd-nav-mobile > li.current-menu-item > a,
    .strongmag-site .mobile-nav .wd-nav-mobile > li.current-menu-ancestor > a,
    .strongmag-site .wd-side-hidden .wd-nav-mobile > li.current-menu-item > a,
    .strongmag-site .wd-side-hidden .wd-nav-mobile > li.current-menu-ancestor > a {
        color: var(--sm-primary);
        background: var(--sm-green-50);
    }

    .strongmag-site .mobile-nav .strongmag-nav-b2b > a,
    .strongmag-site .wd-side-hidden .strongmag-nav-b2b > a {
        margin: 8px 12px;
        color: #fff !important;
        background: var(--sm-accent) !important;
        border-radius: var(--sm-radius-sm);
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .strongmag-site .whb-header :where(.site-logo, .wd-logo) img {
        max-width: min(132px, 36vw);
    }

    .strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) .searchform {
        min-height: 44px;
    }

    .strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) input[type="text"],
    .strongmag-site .whb-header :where(.wd-search-form, [class*="wd-header-search-form"]) input[type="search"] {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS input zoom. */
    }
}

/* --------------------------------------------------------------------------
   Aside mega-menu content cards — exact WoodMart Extra Menu List markup

   The menu cards in this demo are Elementor `wd_extra_menu_list` widgets:
   .elementor-widget-wd_extra_menu_list > .elementor-widget-container
   > ul.wd-sub-menu.mega-menu-list > li > a + ul.sub-sub-menu

   Keep these selectors independent of .whb-header because WoodMart can render
   HTML-block mega-menu content outside the visible header DOM subtree.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    /* The visible rounded card itself. */
    .strongmag-site .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list {
        box-sizing: border-box;
        margin: 0 !important;
        padding: 22px 26px 20px !important;
    }

    /* Card heading: CLOCKS / TABLETOP / KITCHEN / LIGHTING. */
    .strongmag-site .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list
        > li.item-with-label
        > a {
        display: block;
        margin: 0 0 8px !important;
        padding: 0 !important;
        line-height: 1.3 !important;
        font-weight: 750;
    }

    /* Reset the nested list so all horizontal breathing room comes from card padding. */
    .strongmag-site .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list
        > li
        > ul.sub-sub-menu {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Give each subcategory a calmer, more touch-friendly rhythm. */
    .strongmag-site .elementor-widget-wd_extra_menu_list
        > .elementor-widget-container
        > ul.wd-sub-menu.mega-menu-list
        > li
        > ul.sub-sub-menu
        > li
        > a {
        display: block;
        padding: 6px 0 !important;
        line-height: 1.45 !important;
    }
}

/* --------------------------------------------------------------------------
   Desktop category-menu hover intent

   WoodMart marks the top-level category rows as `wd-event-hover`, so its
   default hover styling swaps mega-menus immediately. Once the StrongMag JS
   initialises successfully it adds `.strongmag-menu-intent-ready` to <body>.
   From that point the explicit `.strongmag-menu-intent-active` class controls
   which direct mega-menu is visible.

   This is desktop/fine-pointer only. Touch and mobile keep native WoodMart
   behaviour, and if JavaScript ever fails the body class is never added, so
   WoodMart's original hover behaviour remains as a safe fallback.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .strongmag-site.strongmag-menu-intent-ready
        .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li.menu-item-has-children.wd-event-hover
        > .wd-dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(20px, 9px) !important;
        transition:
            opacity 140ms ease,
            transform 140ms ease,
            visibility 0s linear 140ms !important;
    }

    .strongmag-site.strongmag-menu-intent-ready
        .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li.menu-item-has-children.wd-event-hover.strongmag-menu-intent-active
        > .wd-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(12px, 9px) !important;
        transition-delay: 0s !important;
    }
}


/* --------------------------------------------------------------------------
   v1.4.7 — Mega-menu shell spacing

   Give the entire mega-menu a little more breathing room around Elementor
   content. WoodMart normally gives this HTML-block dropdown effectively zero
   padding, so the first/last tiles can sit too close to the frosted edge.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        > .container.wd-entry-content {
        box-sizing: border-box;
        padding: 22px 24px 20px !important;
    }

    /* Compensate for the added shell padding so the useful Elementor area
       does not become narrower and start wrapping prematurely. */
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu {
        width: calc(var(--wd-dropdown-width, 835px) + 48px) !important;
        max-width: calc(100vw - 470px);
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   v1.4.6 — Mega-menu breathing room + invisible hover corridor

   The panel sits slightly right/down from the category rail so the two glass
   surfaces read as separate layers. JS positions this transparent bridge only
   in the narrow visual gap while a category mega-menu is active.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .strongmag-category-hover-bridge {
        position: fixed;
        z-index: 9997;
        display: none;
        background: transparent;
        pointer-events: auto;
    }

    .strongmag-category-hover-bridge.is-active {
        display: block;
    }
}


/* --------------------------------------------------------------------------
   v1.4.8 — Mega-menu inner-content alignment

   Keep the frosted shell itself exactly where v1.4.7 positioned it, but move
   the Elementor content cluster closer to the shell's upper-left corner. This
   removes the oversized empty gutter visible above/left of the menu cards
   without changing WoodMart's dropdown geometry or the JS hover bridge.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .strongmag-site .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li
        > .wd-dropdown-menu
        > .container.wd-entry-content
        > .elementor {
        transform: translate(-44px, -22px);
        width: calc(100% + 44px);
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   v1.4.11 — Lower the left category rail by 10px

   The rail gets a little more breathing room below the green Categories
   opener. The mega-menu keeps its existing viewport alignment by compensating
   for the rail offset, and the transparent hover bridge prevents the new gap
   from breaking pointer travel between the opener and the rail.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .strongmag-site .whb-header .wd-header-cats {
        position: relative;
    }

    /* Invisible 10px hover bridge created by the same trigger element. */
    .strongmag-site .whb-header .wd-header-cats::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 12px;
        background: transparent;
        pointer-events: auto;
    }

    /* Move only the left dropdown shell down. */
    .strongmag-site .whb-header .wd-header-cats > .wd-dropdown-cats {
        margin-top: 10px !important;
    }

    /* The mega-menu is nested inside the moved rail; subtract the same 10px
       from its vertical transform so its current screen position is preserved. */
    .strongmag-site.strongmag-menu-intent-ready
        .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li.menu-item-has-children.wd-event-hover
        > .wd-dropdown-menu {
        transform: translate(20px, -1px) !important;
    }

    .strongmag-site.strongmag-menu-intent-ready
        .wd-dropdown-cats
        > ul.wd-nav-vertical
        > li.menu-item-has-children.wd-event-hover.strongmag-menu-intent-active
        > .wd-dropdown-menu {
        transform: translate(12px, -1px) !important;
    }
}