/**
 * File: header-top-nav-mobile.css
 * Purpose: Styles for the mobile/tablet version of the top navigation bar
 * Usage: Applies when the viewport is ≤ 820px wide (set by `header-visibility-helper.css`)
 * Dependencies:
 *   - Divi for icon rendering (`.et-pb-icon`)
 *   - Font Awesome (via `--fa-style-family-*` variables)
 *   - Global CSS variables for brand styling and spacing
 *
 * Layout Overview:
 * - Horizontal icon-based menu with vertical stacked labels
 * - Submenus appear on hover/tap and are positioned below the top nav
 * - Cart UI container styled inline with top nav
 *
 * Notes:
 * - Tablet-specific styles handled via a narrow-range media query
 * - Some cart styles duplicated from shared layout but adjusted for relative positioning
 * - Word-break and alignment tweaked for icon + label stacking
 */


/* ---------------------------- */
/* ----- Scoped Variables ----- */
/* ---------------------------- */

.mobile-top-nav {
    --mobile-top-nav-bar-bg-color: var(--top-nav-bar-bg-color);
    --mobile-top-nav-link-color: var(--top-nav-link-color);
    --mobile-top-nav-link-hover-color: var(--top-nav-link-hover-color);
    --mobile-top-nav-sub-link-color: var(--top-nav-sub-link-color);
    --mobile-top-nav-regular-icon-set: var(--top-nav-regular-icon-set);
    --mobile-top-nav-bg-color: var(--tan-lighter);
    --mobile-top-nav-border-color: var(--tan-medium);
    --mobile-top-nav-border-top-color: var(--brand-yellow);
    --mobile-top-nav-box-shadow-color: var(--black-trans-highest);

    /*dwe mini cart plugin*/
    --mobile-top-nav-dwe-bg-color: var(--top-nav-dwe-bg-color); 
    --mobile-top-nav-dwe-border-color: var(--top-nav-dwe-border-color);
    --mobile-top-nav-dwe-box-shadow-color: var(--top-nav-dwe-box-shadow-color);
}





/* ===================================================== */
/* === Container Layout ================================ */
/* ===================================================== */

.mobile-top-nav {
    background-color: var(--mobile-top-nav-bar-bg-color);
    /* display handled in header-visibility-helper.css */
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 0.84em !important;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 0;
    max-height: 60px;
}

.mobile-top-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 2px;
    width: 100%;
    word-break: break-all;
}


/* ===================================================== */
/* === Link and Label Styling ========================== */
/* ===================================================== */

.mobile-top-nav a,
.mobile-top-nav span.label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mobile-top-nav-link-color);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.7em;
    text-align: center;
    text-transform: uppercase;
    margin: 0 6px;
    vertical-align: middle;
    word-break: keep-all;
}

.mobile-top-nav a:hover {
    color: var(--mobile-top-nav-link-hover-color);
}

.mobile-top-nav .brands a {
    width: 50px;
}

.mobile-top-nav a span.text {
    display: none;
}


/* ==================================================== */
/* === Icon Styling (Font Awesome + Divi) ============= */
/* ==================================================== */

.mobile-top-nav .et-pb-icon {
    font-weight: 500;
}

span.et-pb-icon.mobile-top-menu-icon {
    font-family: var(--mobile-top-nav-regular-icon-set);
    font-size: 16px;
    font-weight: 600;
    padding: 2px 0;
    width: 100%;
    text-align: center;
}


/* ===================================================== */
/* === Submenu Layout and Behavior ===================== */
/* ===================================================== */

.mobile-top-menu-container {
    width: 100%;
}

.mobile-top-menu-container > ul li:hover > .sub-menu {
    display: flex;
}

.mobile-top-menu-container > ul li:hover > .sub-menu:before {
    opacity: 1;
}

.mobile-top-menu-container > ul .sub-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    font-size: 16px;
    white-space: nowrap;
    background: var(--mobile-top-nav-bg-color);
    padding: 20px 10px 15px 10px;
    z-index: 1000;
    border-top: 3px solid var(--mobile-top-nav-border-top-color);
    border-bottom: 5px solid var(--mobile-top-nav-border-color);
    box-shadow: 0 2px 5px var(--mobile-top-nav-box-shadow-color);
}

.mobile-top-menu-container > ul .sub-menu li {
    padding: 0.5em 0;
}

.mobile-top-menu-container > ul .sub-menu a {
    color: var(--mobile-top-nav-sub-link-color);
    line-height: 2.2em;
    font-size: 9px;
    font-weight: 700;
}

/* Tablet offset */
@media all and (max-width: 820px) and (min-width: 769px) {
    .mobile-top-nav {
        padding: 15px 20px;
    }

    .mobile-top-menu-container > ul .sub-menu {
        top: calc(48px + var(--top-offset, 0px));
    }
}

/* Mobile offset */
@media all and (max-width: 768px) {
    .mobile-top-menu-container > ul .sub-menu {
        top: calc(48px + var(--top-offset, 0px));
    }
}


/* ===================================================== */
/* === Mini Cart Wrapper =============================== */
/* ===================================================== */

.mobile-top-nav .custom-cart-icon .dwe_mini_cart_wrapper {
    position: relative;
    flex-direction: column;
    background: var(--mobile-top-nav-dwe-bg-color);
    padding: 20px 15px 15px 15px;
    z-index: 1000;
    border: solid var(--mobile-top-nav-dwe-border-color);
    border-width: 0px 2px 8px 2px;
    box-shadow: 0 2px 6px 0px var(--mobile-top-nav-dwe-box-shadow-color);
}

.mobile-top-nav .custom-cart-icon .dwe_mini_cart_wrapper::before {
    display: none;
}