/*
 * Mobile horizontal nav — replaces hamburger menu with always-visible
 * scrollable text links. Desktop styles are untouched; this file only
 * activates at ≤768px.
 */

@media (max-width: 768px) {
    /* Nav becomes a two-row flex container: logo row + links row */
    nav {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Logo row — full width, centered height */
    nav .logo {
        padding: 0 16px;
        height: 52px;
        display: flex;
        align-items: center;
        font-size: 20px !important;
    }

    /* Kill the hamburger button */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Links row — horizontal scroll, always visible */
    nav .nav-links,
    nav .nav-links.open {
        display: flex !important;
        flex-direction: row !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        padding: 0 4px 0 12px !important;
        height: 40px;
        align-items: center !important;
        border-top: 1px solid rgba(26, 22, 18, 0.06);
        border-bottom: none !important;
        box-shadow: none !important;
        background: transparent !important;
        flex-wrap: nowrap !important;
    }

    /* Hide scrollbar across browsers */
    nav .nav-links::-webkit-scrollbar {
        display: none;
    }
    nav .nav-links {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Individual link styling — compact, no-wrap */
    nav .nav-links a {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
        padding: 8px 10px !important;
        color: var(--warm-gray) !important;
    }

    /* Override inline gold/pink styles — keep them but tone down */
    nav .nav-links a[style*="color:var(--gold)"] {
        color: var(--gold) !important;
    }
    nav .nav-links a[style*="color:#C9737A"] {
        color: #C9737A !important;
    }

    /* CTA button — keep it subtle in the scroll strip */
    nav .nav-links .nav-cta {
        background: var(--dark) !important;
        color: var(--cream) !important;
        border-radius: 100px !important;
        padding: 6px 14px !important;
        font-size: 9px !important;
        margin-right: 12px;
    }
}