/* ================= HEADER NAV ================= */
.topnav {
    background: #333;
    position: relative;
    z-index: 1000;
}

.topnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Social */
.social-icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-icons a {
    color: #fff;
    text-decoration: none;
}

/* Logo */
.logo-img {
    width: 260px;
}

/* Search */
.nav-search {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-search form {
    max-width: 420px;
    width: 100%;
}

.nav-search input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
}

/* Nav */
.main-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.main-nav a,
.info-toggle,
.language-toggle {
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

/* Dropdowns */
.info-menu,
.language-menu {
    position: relative;
}

.info-popup,
.language-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #444;
    min-width: 180px;
}

.info-popup a,
.language-popup a {
    display: block;
    padding: 10px 14px;
    color: #fff;
    text-decoration: none;
}

.language-popup.open,
.info-popup.open {
    display: block;
}

/* Desktop language */
.desktop-language {
    margin-left: auto;
}

.mobile-language {
    display: none;
}

/* Hamburger */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle-label span {
    width: 26px;
    height: 3px;
    background: #fff;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .topnav-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 14px;
        row-gap: 10px;
    }

    /* Hide social */
    .social-icons {
        display: none;
    }

    /* Row 1 */
    .logo-link {
        order: 1;
    }

    .nav-toggle-label {
        display: flex;
        order: 2;
    }

    .logo-img {
        width: 170px;
    }

    /* 🔑 FORCE SEARCH TO ROW 2 */
    .nav-search {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        display: block;
    }

    .nav-search form {
        max-width: none;
    }

    /* Mobile nav dropdown */
    .main-nav {
        display: none;
        flex-direction: column;
        background: #333;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
    }

    .nav-toggle:checked + .nav-toggle-label + .main-nav {
        display: flex;
    }

    .main-nav a,
    .info-toggle,
    .language-toggle {
        width: 100%;
        padding: 14px 0;
        font-size: 16px;
        border-top: 1px solid rgba(255,255,255,.1);
    }

    .desktop-language {
        display: none;
    }

    .mobile-language {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .info-popup,
    .language-popup {
        position: static;
        width: 100%;
    }
}