/* Hamburger button is hidden by default (desktop); mobile media query below turns it on. */
.nav-toggle {
    display: none;
}

@media (max-width: 860px) {
    /* ---------- Header & hamburger nav ---------- */
    .header .wrapper {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .header .logo,
    .header .logo img {
        height: 64px;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }

    .nav-toggle-bar {
        display: block;
        width: 26px;
        height: 3px;
        background-color: var(--color-text-inverse);
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .main-nav {
        display: none;
        order: 3;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .main-nav.is-open {
        display: block;
    }

    .main-nav ul {
        text-align: left;
        letter-spacing: normal;
    }

    .main-nav ul li {
        display: block;
    }

    .main-nav ul li a {
        padding: 0.85rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Flatten dropdowns: hover doesn't exist on touch, so submenus render inline instead */
    .main-nav ul li ul {
        position: static;
        display: block;
        background-color: transparent;
        padding: 0 0 0 1rem;
        border-radius: 0;
    }

    .main-nav .has-children > a:after {
        display: none;
    }

    .main-nav ul li.nav-cta {
        margin: 0.5rem 0.25rem;
        text-align: center;
    }

    .main-nav ul li.nav-cta > a.button {
        border-bottom: none;
        display: inline-block;
    }

    /* ---------- Hero ---------- */
    .hero-title {
        font-size: 2.75em;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-small { min-height: 25vh; }
    .hero-medium { min-height: 35vh; }
    .hero-large { min-height: 50vh; }
    .hero-fullscreen { min-height: 80vh; }

    /* ---------- Footer ---------- */
    #footer .wrapper {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-col {
        width: 100%;
        text-align: center;
    }

    .footer-logo {
        max-width: 200px;
    }

    /* ---------- General layout & spacing ---------- */
    .padding {
        padding: 2rem 1rem;
    }

    .header .padding {
        padding: 0.5rem 1rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .module-text-columns {
        gap: 1.25rem;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }

    .event-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .event-meta {
        gap: 1.25rem;
    }

    .module-carousel {
        padding: 0 2.25rem;
    }

    .exhibitor-card-image {
        height: 160px;
    }

    #_info-carousel img {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 4rem;
        text-align: center;
    }

    .hero-logo {
        max-width: 75%;
    }

    .header .logo,
    .header .logo img {
        height: 48px;
    }

    .footer-logo {
        max-width: 150px;
    }

    .events-section-title,
    .event-gallery-title,
    .event-exhibitors-title {
        font-size: 1.75em;
    }
}