/* Header: language toggle (EN | ES) and spacing that holds up with longer Spanish labels. */

.header-actions {
    gap: 16px;
    margin-left: 28px;
}

/* Compact segmented toggle, same height as the header button */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
}

.lang-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #475569;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.lang-toggle a:hover {
    color: #0B1D3A;
    background: #F1F5F9;
}

.lang-toggle a.is-active {
    background: #0B1D3A;
    color: #fff;
}

.lang-toggle a:focus-visible {
    outline: 2px solid #93C5FD;
    outline-offset: 2px;
}

.header-actions .btn {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

/* Keep each header item on one line, so Spanish labels never wrap into two rows */
.header-nav li,
.header-nav a {
    white-space: nowrap;
}

/* Spanish labels are longer, so the nav needs less space between items on mid-size screens */
@media (max-width: 1280px) {
    .header-nav ul {
        gap: 18px;
    }
}

@media (max-width: 1100px) {
    .header-nav ul {
        gap: 14px;
    }

    .header-actions {
        margin-left: 16px;
    }

    /* Tablets: the nav, language toggle and CTA must fit one row, so the CTA gets tighter padding */
    .header-logo img {
        height: 40px;
    }

    .header-actions {
        gap: 10px;
    }

    .header-actions .btn-success {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Phones: Spanish header labels are wider than English. The CTA may wrap to two lines and is capped in width,
   so the language toggle and the menu button always stay on screen. */
@media (max-width: 767px) {
    .header-actions {
        margin-left: 0;
        gap: 8px;
    }

    .header-actions .btn {
        white-space: normal;
        height: auto;
        min-height: 40px;
        max-width: 180px;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
    }

    .lang-toggle,
    .btn-hamburger {
        flex-shrink: 0;
    }
}

/* Very narrow phones (320px): tighten the CTA so the menu button still fits */
@media (max-width: 360px) {
    .header-actions {
        gap: 6px;
    }

    .header-actions .btn {
        max-width: 150px;
        padding: 8px 10px;
    }
}

/* Small tablets: the nav with Spanish labels no longer fits beside the logo and CTA, so it collapses into the menu button
   a little earlier than the phone breakpoint. Same open/close behaviour as phones (style.css .nav-open). */
@media (max-width: 900px) {
    .header-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-nav {
        display: none;
    }

    .btn-hamburger {
        display: flex;
    }
}