/* ============================================================
   FREE EYE — HEADER CSS
   Site Header · Navigation · Language Switcher · Mobile Nav
   ============================================================ */

/* ── BASE HEADER ────────────────────────────────────────── */
.fe-header {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: var(--fe-z-header);
    height: var(--fe-header-h);
    background: var(--fe-dark);
    transition:
        background var(--fe-transition),
        box-shadow var(--fe-transition);
    will-change: background;
}

/* WP admin bar offset (development / logged-in preview only) */
.admin-bar .fe-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .fe-header { top: 46px; }
}

/* Subtle gradient on hero pages — keeps nav readable */
body.has-hero .fe-header {
    background: linear-gradient(to bottom, rgba(5,15,45,.55) 0%, transparent 100%);
}

body.has-hero .fe-header.is-scrolled {
    background: rgba(13,27,62,.96);
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Scrolled state (non-hero pages) */
.fe-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

/* ── HEADER INNER ───────────────────────────────────────── */
.fe-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--fe-space-6);
}

/* ── LOGO ───────────────────────────────────────────────── */
.fe-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.fe-logo__img {
    height: 42px;
    width: auto;
    display: block;
    /* logo.png is white/transparent — always visible on dark header */
    filter: brightness(0) invert(1);
    transition: opacity var(--fe-transition-fast);
}

.fe-logo:hover .fe-logo__img { opacity: .85; }

/* ── PRIMARY NAV ────────────────────────────────────────── */
.fe-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* WP nav_menu outputs: ul.fe-nav__menu > li.menu-item > a */
.fe-nav__menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fe-nav__menu .menu-item { position: relative; }

.fe-nav__menu .menu-item > a {
    display: block;
    padding: var(--fe-space-2) var(--fe-space-3);
    font-size: var(--fe-text-sm);
    font-weight: var(--fe-weight-medium);
    color: rgba(255,255,255,.82);
    border-radius: var(--fe-radius);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--fe-transition-fast),
        background var(--fe-transition-fast);
}

.fe-nav__menu .menu-item > a:hover,
.fe-nav__menu .menu-item.current-menu-item > a,
.fe-nav__menu .menu-item.current-menu-ancestor > a,
.fe-nav__menu .menu-item.current-page-ancestor > a {
    color: var(--fe-white);
    background: rgba(255,255,255,.1);
}

/* Active accent underline */
.fe-nav__menu .menu-item.current-menu-item > a::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--fe-accent);
    border-radius: var(--fe-radius-full);
    margin-block-start: 2px;
}

/* ── HEADER ACTIONS ─────────────────────────────────────── */
.fe-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--fe-space-4);
}

/* Social icons in header */
.fe-header__socials {
    display: flex;
    align-items: center;
    gap: var(--fe-space-2);
}

.fe-header-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255,255,255,.65);
    border-radius: var(--fe-radius);
    text-decoration: none;
    transition:
        color var(--fe-transition-fast),
        background var(--fe-transition-fast);
}

.fe-header-social-icon:hover {
    color: var(--fe-white);
    background: rgba(255,255,255,.1);
}

.fe-header-social-icon svg { width: 16px; height: 16px; }

/* ── LANGUAGE SWITCHER ──────────────────────────────────── */
/* Polylang 3.8 outputs bare <li> items — we wrap them in <ul> in PHP */
.fe-lang-switcher-wrap ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fe-lang-switcher-wrap .lang-item a {
    display: block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: var(--fe-weight-semibold);
    color: rgba(255,255,255,.60);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--fe-radius-full);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition:
        color var(--fe-transition-fast),
        background var(--fe-transition-fast),
        border-color var(--fe-transition-fast);
}

.fe-lang-switcher-wrap .lang-item-current a,
.fe-lang-switcher-wrap .lang-item a:hover {
    color: var(--fe-white);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.38);
}

/* ── MOBILE TOGGLE ──────────────────────────────────────── */
.fe-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: var(--fe-radius);
    cursor: pointer;
    transition: background var(--fe-transition-fast);
    flex-shrink: 0;
}

.fe-menu-toggle:hover { background: rgba(255,255,255,.1); }

.fe-menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--fe-white);
    border-radius: 2px;
    transition: transform var(--fe-transition), opacity var(--fe-transition);
    transform-origin: center;
}

/* Hamburger → X */
.fe-menu-toggle[aria-expanded="true"] .fe-menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.fe-menu-toggle[aria-expanded="true"] .fe-menu-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.fe-menu-toggle[aria-expanded="true"] .fe-menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── NAV OVERLAY (mobile) ───────────────────────────────── */
.fe-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: var(--fe-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fe-transition), visibility var(--fe-transition);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.fe-nav-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Mobile-only extras — hidden on desktop */
.fe-nav__mobile-extras { display: none; }

/* ── MOBILE BREAKPOINT ──────────────────────────────────── */
@media (max-width: 1023px) {

    /* Show toggle */
    .fe-menu-toggle { display: flex; }

    /* Hide desktop elements */
    .fe-header__socials { display: none; }

    /* Nav becomes a fixed drawer */
    .fe-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(300px, 85vw);
        height: 100dvh;
        background: var(--fe-dark);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-block-start: calc(var(--fe-header-h) + var(--fe-space-6));
        padding-block-end: var(--fe-space-10);
        padding-inline: var(--fe-space-5);
        transform: translateX(100%);
        transition: transform var(--fe-transition);
        overflow-y: auto;
        z-index: var(--fe-z-nav);
        box-shadow: -8px 0 40px rgba(0,0,0,.3);
    }

    /* RTL: drawer from right side (visual right = Arabic start) */
    [dir="rtl"] .fe-nav {
        right: auto;
        left: 0;
        transform: translateX(-100%);
        box-shadow: 8px 0 40px rgba(0,0,0,.3);
    }

    .fe-nav.is-open {
        transform: translateX(0);
    }

    /* Mobile menu items */
    .fe-nav__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .fe-nav__menu .menu-item > a {
        padding: var(--fe-space-3) var(--fe-space-4);
        font-size: var(--fe-text-base);
        border-radius: var(--fe-radius);
        display: block;
    }

    .fe-nav__menu .menu-item.current-menu-item > a::after {
        display: none;
    }

    /* Mobile-only: social icons + lang switcher inside drawer */
    .fe-nav__mobile-extras {
        margin-block-start: var(--fe-space-8);
        padding-block-start: var(--fe-space-6);
        border-block-start: 1px solid rgba(255,255,255,.1);
        display: flex;
        flex-direction: column;
        gap: var(--fe-space-6);
    }

    .fe-nav__mobile-socials {
        display: flex;
        gap: var(--fe-space-3);
    }

    /* Move lang switcher into drawer on mobile */
    .fe-header__actions .fe-lang-switcher-wrap {
        display: none;
    }

    .fe-nav__mobile-extras .fe-lang-switcher-wrap { display: block; }
    .fe-nav__mobile-extras .fe-lang-switcher-wrap ul {
        flex-wrap: wrap;
        gap: var(--fe-space-2);
    }
    .fe-nav__mobile-extras .fe-lang-switcher-wrap .lang-item a {
        padding: 6px 14px;
        font-size: var(--fe-text-xs);
    }
}

@media (max-width: 767px) {
    .fe-header__inner { gap: var(--fe-space-4); }
    .fe-logo__img { height: 36px; }
}