/* =============================== */
/* GLOBAL DEFAULTS (DESKTOP FIRST) */
/* =============================== */

/* Desktop nav visible on desktop */
.desktop-nav {
    display: block;
}

/* Mobile toggle button hidden on desktop */
.mobile-only {
    display: none;
}

/* Mobile nav hidden by default */
.mobile-nav {
    display: none;
    width: 100%;       /* prevents side-by-side glitches */
}

/* Breadcrumb hidden on desktop */
.breadcrumb {
    display: none;
}

/* Ensure breadcrumb never appears inside header */
.site-header .breadcrumb {
    display: none !important;
}


/* =============================== */
/* MOBILE VIEW BELOW 768px        */
/* =============================== */
@media (max-width: 768px) {

    /* Hide desktop navigation on mobile */
    .desktop-nav {
        display: none !important;
    }

    /* Show mobile menu button */
    .mobile-only {
        display: block !important;
        font-size: 26px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-primary);
    }

    /* Show mobile dropdown when active */
    .mobile-nav.active {
        display: block !important;
        background: #fafafa;
        border-top: 1px solid #ddd;
        padding-bottom: 10px;
        width: 100%;
    }

    /* Mobile menu structure */
    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .mobile-nav li a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: var(--color-text);
    }

    .mobile-nav li a:hover {
        background: var(--color-section);
    }

    /* Breadcrumb visible only on mobile */
    .breadcrumb {
        display: block !important;
    }
}