/* SL Primary Navigation — v2 spec 2026-03-11
   Colors: Warm Cream #F5F0EB bg, Deep Plum #5B2E5A text, Midnight Plum #352040 accents
   Font: Mazzard Soft M / Mazzard H (already loaded via purple.theme.css)
   Author: CC — built 2026-03-12 */

/* === OLD NAV HIDE === */
.main-menu {
    display: none !important;
}

/* === NAV BAR === */
.sl-primary-nav {
    display: block !important; /* override byo-visibility hide */
    background: #F5F0EB;
    border-bottom: 1px solid #E8DDD4;
    position: relative;
    z-index: 998;
    font-family: "Mazzard H", "Mazzard Soft M", -apple-system, sans-serif;
}

.sl-primary-nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* === NAV ITEMS ROW === */
.sl-nav-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.sl-nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* === NAV LINKS === */
.sl-nav-link {
    display: block;
    padding: 14px 16px;
    color: #5B2E5A;
    text-decoration: none;
    font-family: "Mazzard H", "Mazzard Soft M", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.sl-nav-link:hover,
.sl-nav-link:focus {
    background: #5B2E5A;
    color: #fff;
    text-decoration: none;
}

.sl-nav-link[aria-expanded="true"] {
    background: #5B2E5A;
    color: #fff;
}

/* Arrow indicator */
.sl-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 5px;
    vertical-align: middle;
    transition: transform 0.2s;
}

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

/* === CTA BUTTON (BUILD YOUR OWN) === */
.sl-nav-cta .sl-nav-cta-link {
    background: #C8963E;
    color: #fff !important;
    border-radius: 4px;
    padding: 10px 18px;
    margin: 4px 0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.sl-nav-cta .sl-nav-cta-link:hover {
    background: #B8862E;
    color: #fff !important;
}

/* === DROPDOWNS === */
.sl-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 0 0 8px 8px;
    border-top: 3px solid #5B2E5A;
    z-index: 1001;
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.sl-dropdown:not([hidden]) {
    display: block;
}

.sl-dropdown li {
    margin: 0;
    padding: 0;
}

.sl-dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-family: "Mazzard H", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    transition: background 0.15s, color 0.15s;
}

.sl-dropdown li a:hover {
    background: #F5F0EB;
    color: #5B2E5A;
}

.sl-dropdown li a strong {
    color: #5B2E5A;
}

.sl-dropdown-divider {
    border-top: 1px solid #E8DDD4;
    margin: 4px 16px;
}

/* === MEGA MENUS === */
.sl-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 580px;
    max-width: 700px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14);
    border-radius: 0 0 10px 10px;
    border-top: 3px solid #5B2E5A;
    z-index: 1001;
    padding: 0;
}

.sl-mega:not([hidden]) {
    display: block;
}

/* I'M A mega is wider (3-col) */
.sl-mega--ima {
    min-width: 680px;
    max-width: 780px;
}

.sl-mega-inner {
    display: flex;
    padding: 20px 24px 24px;
    gap: 28px;
}

.sl-mega-col {
    flex: 1;
    min-width: 0;
}

.sl-mega-heading {
    font-family: "Mazzard H", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5B2E5A;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #E8DDD4;
}

.sl-mega-col + .sl-mega-col .sl-mega-heading:first-child {
    /* already styled */
}

.sl-mega-col ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.sl-mega-col ul:last-child {
    margin-bottom: 0;
}

.sl-mega-col li {
    margin: 0;
    padding: 0;
}

.sl-mega-col li a {
    display: block;
    padding: 6px 8px;
    color: #444;
    font-family: "Mazzard H", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.sl-mega-col li a:hover {
    background: #F5F0EB;
    color: #5B2E5A;
}

.sl-mega-col li a strong {
    color: #5B2E5A;
}

/* === TRUST STRIP === */
.sl-trust-strip {
    background: #352040;
    color: #fff;
    font-family: "Mazzard H", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 6px 15px;
}

.sl-trust-strip .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* === RESPONSIVE: TABLET === */
@media (max-width: 1200px) {
    .sl-nav-link {
        padding: 12px 10px;
        font-size: 12px;
    }
    .sl-nav-cta .sl-nav-cta-link {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* === RESPONSIVE: MOBILE === */
@media (max-width: 768px) {
    .sl-nav-items {
        flex-direction: column;
        align-items: stretch;
        display: none;
    }

    /* Mobile: show nav items when hamburger is open */
    .sl-primary-nav.mobile-open .sl-nav-items {
        display: flex;
    }

    .sl-nav-link {
        padding: 12px 16px;
        font-size: 14px;
        border-bottom: 1px solid #E8DDD4;
    }

    .sl-nav-cta .sl-nav-cta-link {
        margin: 8px 16px;
        text-align: center;
        border-radius: 6px;
    }

    .sl-mega,
    .sl-dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        border-top: none;
        min-width: 0;
        max-width: none;
        background: #faf7f4;
    }

    .sl-mega-inner {
        flex-direction: column;
        padding: 12px 16px;
        gap: 16px;
    }

    .sl-trust-strip {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* === HIDE ON MOBILE (nav items) — show hamburger via existing mobile-menu === */
@media (max-width: 768px) {
    .sl-primary-nav .sl-nav-items {
        /* Hidden by default on mobile; toggled by hamburger */
    }
}