/**
 * header_style_desktop.css
 * Desktop navigation: horizontal nav links and mega-dropdown.
 * Active above 1300 px.
 */

@media (min-width: 1300px) {

    /* Wider header padding on desktop */
    .site-header {
        padding: 0 50px;
    }

    /* Hide hamburger on desktop */
    .hamburger {
        display: none;
    }

    /* Hide mobile overlay on desktop */
    .overlay {
        display: none;
    }

    /* Navigation fills remaining header space, aligned right */
    .navigation {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    /* Horizontal nav list */
    .nav-links {
        display: flex;
        list-style: none;
    }

    /* Each nav item is a flex container for vertical centering */
    .nav-links li {
        display: flex;
        align-items: center;
    }

    /* Nav link text */
    .nav-links a {
        text-decoration: none;
        color: #333;
        font-size: 20px;
        font-weight: 500;
        padding: 32px 22px;
        transition: color 0.2s;
    }

    .nav-links a:hover {
        color: var(--color-primary-mid);
    }

    /* =========================
       MEGA-DROPDOWN
    ========================= */

    .nav-links li.dropdown {
        position: static;
    }

    /* Full-width panel, hidden by default */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        background: var(--color-bg-white);
        border-bottom: 2px solid var(--color-border);
        padding: 32px 60px;

        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);

        transition:
            opacity 0s linear 0.15s,
            visibility 0s linear 0.15s,
            transform 0s linear 0.15s;

        z-index: 999;
    }

    .nav-links li.dropdown:hover .dropdown-menu,
    .nav-links li.dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0s, visibility 0s, transform 0.25s ease;
    }

    .nav-links li.dropdown:hover > a,
    .nav-links li.dropdown:focus-within > a {
        color: var(--color-primary-mid);
    }

    /* Three-column grid inside dropdown */
    .dropdown-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: var(--inner-max-width);
        margin: 0 auto;
    }

    .dropdown-column h4,
    .dropdown-feature h4 {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-muted);
        margin-bottom: 12px;
    }

    .dropdown-column a {
        display: block;
        padding: 6px 0;
        font-size: 18px;
        color: #333;
        text-decoration: none;
        transition: color 0.2s, transform 0.2s;
    }

    .dropdown-column a:hover {
        color: var(--color-primary-mid);
        transform: translateX(4px);
    }

    .dropdown-feature {
        background: var(--color-bg-light);
        padding: 20px;
        border-radius: var(--radius-md);
    }

    .dropdown-feature p {
        font-size: 14px;
        color: #555;
        line-height: 1.65;
        margin-bottom: 0;
    }
}


/* =========================
   LANGUAGE SWITCHER – DESKTOP (≥ 1300px)
   Merged from lang_switcher.css
========================= */

@media (min-width: 1300px) {

    /* Hide mobile bar entirely */
    .mobile-lang-bar { display: none !important; }

    /* li that wraps the lang switcher – same as li.dropdown */
    li.lang-dropdown {
        position: static;
        display: flex;
        align-items: center;
    }

    /* Trigger button – styled to match nav link feel */
    .lang-dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 20px;
        font-weight: 500;
        color: #333;
        padding: 32px 22px;
        transition: color 0.2s;
        white-space: nowrap;
    }

    li.lang-dropdown:hover .lang-dropdown-trigger,
    li.lang-dropdown:focus-within .lang-dropdown-trigger {
        color: var(--color-primary-mid, #2a6db5);
    }

    .lang-dropdown-current { letter-spacing: 0.4px; }

    /* Panel – mirrors .dropdown-menu sizing but compact (not full-width) */
    .lang-dropdown-panel {
        position: absolute;
        top: 100%;
        right: 50px;
        left: auto;
        width: 160px;
        background: var(--color-bg-white, #fff);
        border-bottom: 2px solid var(--color-border, #e5e7eb);
        border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);

        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);

        transition:
            opacity 0s linear 0.15s,
            visibility 0s linear 0.15s,
            transform 0s linear 0.15s;

        z-index: 999;
        overflow: hidden;
    }

    li.lang-dropdown:hover .lang-dropdown-panel,
    li.lang-dropdown:focus-within .lang-dropdown-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0s, visibility 0s, transform 0.25s ease;
    }

    /* Individual option */
    .lang-dropdown-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 24px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        color: #333;
        text-align: left;
        transition: color 0.2s, background 0.2s;
    }
    .lang-dropdown-option:last-child { border-bottom: none; }
    .lang-dropdown-option:hover {
        color: var(--color-primary-mid, #2a6db5);
        background: var(--color-bg-light, #f9fafb);
    }
    .lang-dropdown-option.lang-option-active {
        color: var(--color-primary-mid, #2a6db5);
        font-weight: 700;
    }
    .lang-opt-code {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--color-muted, #888);
    }
    .lang-dropdown-option.lang-option-active .lang-opt-code {
        color: var(--color-primary-mid, #2a6db5);
    }
}