/**
 * File: header-top-nav-desktop.css
 * Purpose: Styles for the desktop version of the top navigation bar.
 * Usage: Applies at viewport widths ≥ 821px (set by `header-visibility-helper.css`)
 * Dependencies:
 *   - Divi for icon styling (`.et-pb-icon`)
 *   - Global CSS variables for colors, typography, spacing
 *   - Optional layout helper files (`header-visibility-helper.css`)
 *
 * Layout Overview:
 * - Flexbox-based layout with `.desktop-nav-left` and `.desktop-nav-right` sections
 * - Enforces uppercase, bold navigation links for branding consistency
 * - Icons use Font Awesome and Divi’s built-in sets
 * - Supports mini-cart dropdown container layout
 *
 * Notes:
 * - Shared styles (e.g., dropdowns, cart wrappers) live in `header-top-nav-shared.css`
 * - Mobile-specific styles are handled in `header-top-nav-mobile.css`
 */


/* ---------------------------- */
/* ----- Scoped Variables ----- */
/* ---------------------------- */
.desktop-top-nav {
    --desktop-top-nav-bar-bg-color: var(--top-nav-bar-bg-color);
    --desktop-top-nav-link-color: var(--top-nav-link-color);
    --desktop-top-nav-link-hover-color: var(--top-nav-link-hover-color);
    --desktop-top-nav-regular-icon-set: var(--top-nav-regular-icon-set);
    --desktop-top-nav-social-icon-set: var(--top-nav-social-icon-set);

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




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

.desktop-top-nav {
    background-color: var(--desktop-top-nav-bar-bg-color);
    /* display is handled by header-visibility-helper.css */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5px 20px;
    font-size: 0.84em !important;
    font-weight: 700;
    letter-spacing: 1px;
}

.desktop-top-nav ul {
    display: flex;
    flex-direction: row;
}

.desktop-top-nav .desktop-nav-left,
.desktop-top-nav .desktop-nav-right {
    display: flex;
    flex-direction: row;
}


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

.desktop-top-nav li {
    padding: 4px 0;
}

.desktop-top-nav a,
.desktop-top-nav span.label {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 10px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--desktop-top-nav-link-color);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

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


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

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

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

span.et-pb-icon.desktop-top-menu-icon.social {
    font-family: var(--desktop-top-nav-social-icon-set);
    font-size: 17px;
    font-weight: 400;
    padding: 2px 0;
    padding-right: 0.25em;
    width: 100%;
    text-align: right;
}


/* ===================================================== */
/* === Mini Cart Wrapper (Override for Desktop) ======== */
/* ===================================================== */

.desktop-top-nav .custom-cart-icon .dwe_mini_cart_wrapper {
    position: absolute;
    flex-direction: column;
    right: -13em;
    top: calc(0.4em + var(--top-offset, 0px));
    background: var(--desktop-top-nav-dwe-bg-color);
    padding: 20px 15px 15px 15px;
    z-index: 1000;
    border: solid var(--desktop-top-nav-dwe-border-color);
    border-width: 0 2px 8px 2px;
    box-shadow: 0 2px 6px 0px var(--desktop-top-nav-dwe-box-shadow-color);
}