html,
body {
    font-family: var(--wp--preset--font-family--open-sans,
            var(--wp--preset--font-family--open-sans-1,
                "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif));
}

.fi-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: transparent;
}

.fi-header *,
.fi-header *::before,
.fi-header *::after {
    box-sizing: border-box;
}

/* ===== Nav bar layout ===== */
.fi-header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px clamp(12px, 3vw, 28px);
    position: relative;
}

.fi-header,
.fi-header .nav,
.fi-header .brand {
    overflow: visible;
}

.fi-header .brand {
    height: 50px;
    position: relative;
    align-items: center;
}

/* Make the logo larger than the bar, center it, and let it overflow */
.fi-header .brand img.custom-logo,
.fi-header .brand img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 70px;
    width: auto;
    max-height: none;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* Centered tab group (desktop) */
.fi-header .tabs {
    margin-top: 5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--light-pill);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px rgba(0, 0, 0, .25);
    font-size: 16px;
}

.fi-header .tab {
    border: 0;
    background: transparent;
    color: #233340;
    padding: 5px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
    text-decoration: none;
    /* anchor reset */
    display: inline-block;
}

.fi-header .tab[aria-current="page"] {
    background: #fff;
    color: #0B1520;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.fi-header .tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Right side controls */
.fi-header .right-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fi-header .pll-switcher-select {
    appearance: none;
    background: var(--dark-glass);
    color: #E8F5FF;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    padding: 10px 34px 10px 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.fi-header .lang-wrap {
    position: relative;
}

.fi-header .lang-wrap:after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #BDDFFF;
    opacity: .9;
    font-size: 12px;
    pointer-events: none;
}

.fi-header .cta {
    background: #0A76B5;
    color: #fff;
    border: 0;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(4, 113, 166, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .15s ease;
    height: 36.8px;
    font-size: 13.33px;
}

.fi-header .cta:hover {
    transform: translateY(-1px);
}

.fi-header .menu-btn {
    display: none;
    place-items: center;
    width: 42px;
    height: 40px;
    border-radius: 6px;
    background: var(--dark-glass);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #E8F5FF;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.fi-header .cta-mobile {
    display: none;
}

/* ===== Mobile: tabs become fixed dropdown under header ===== */
@media (max-width:900px) {
    .fi-header .menu-btn {
        display: grid;
    }

    .fi-header .cta {
        display: none;
    }

    .fi-header .cta-mobile {
        background: #0A76B5;
        color: #fff;
        border: 0;
        padding: 10px 16px;
        border-radius: 4px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 10px 24px rgba(4, 113, 166, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
        transition: transform .15s ease;
        height: 36.8px;
        font-size: 13.33px;
        display: inline;
    }

    .fi-header .cta-mobile:hover {
        transform: translateY(-1px);
    }

    .fi-header .brand {
        height: 44px;
    }

    .fi-header .brand img.custom-logo,
    .fi-header .brand img {
        height: 60px;
    }

    .fi-header .tabs {
        position: fixed;
        left: 12px;
        right: 12px;
        transform: none;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px;
        border-radius: 14px;
        background: rgba(238, 248, 255, .95);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
        z-index: 999;
        /* above content, below header controls */
    }

    .fi-header .tabs.open {
        display: flex;
        animation: pop .15s ease-out;
    }

    @keyframes pop {
        from {
            opacity: .6;
            transform: scale(.98);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}