/* ==========================================================================
   site-header.css — sitewide header enhancements
   Loaded from includes/header.php on every page (after assets/style.css).

   This file ADDS to the existing .site-header styles in style.css. It does
   not redefine them; it layers on top. The existing mobile-bar markup in
   footer.php is untouched — these enhancements target the desktop header
   (≥992px), which is hidden on mobile by the existing breakpoint rules.

   Sections:
     1. Sticky positioning + scroll-elevation
     2. Glassmorphism background
     3. Active page indicator
     4. Inline desktop search bar
     5. Notification bell + badge
     6. User avatar (initials fallback)
     7. Polished dropdown (header section, dividers, slide-in)
     8. Compact language switcher
     9. Logged-out CTA pill
    10. Mobile menu animation
   ========================================================================== */


/* =========================================================================
   1. STICKY HEADER WITH SCROLL ELEVATION
   ========================================================================= */
.site-header {
    /* Override existing position: relative to make sticky */
    position: sticky;
    top: 0;
    /* Smooth shadow transition when scrolled past 10px (toggled via JS) */
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
    /* Stronger shadow + slightly more opacity once user has scrolled */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}


/* =========================================================================
   2. GLASSMORPHISM BACKGROUND
   ========================================================================= */
@media (min-width: 992px) {
    .site-header {
        /* Translucent white with backdrop blur — content shows through, blurred */
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
    }

    .site-header.is-scrolled {
        background-color: rgba(255, 255, 255, 0.95);
    }
}


/* =========================================================================
   3. ACTIVE PAGE INDICATOR
   ========================================================================= */
.main-nav a.is-active {
    color: var(--primary-color);
    position: relative;
}

.main-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -8px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    animation: navIndicatorIn 0.25s ease;
}

@keyframes navIndicatorIn {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}


/* =========================================================================
   4. NOTIFICATION BELL + BADGE
   ========================================================================= */
.header-bell {
    /* Size kept in sync with the alignment-normalization block (§11) so
       both rules produce the same 36×36 button. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-main);
    background: transparent;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    /* Allow the badge to overhang the corner without being clipped */
    overflow: visible;
}

.header-bell:hover {
    background: rgba(0, 115, 170, 0.08);
    color: var(--primary-color);
}

.header-bell:active {
    transform: scale(0.96);
}

.header-bell i {
    /* Reset the inherited line-height so the glyph centers on its own
       optical mid-line rather than the line-box mid-line. */
    font-size: 17px;
    line-height: 1;
    display: block;
}

.header-bell-badge {
    /* Sits at the TOP-RIGHT CORNER of the bell, overhanging like a real
       notification dot — does NOT cover the bell glyph. The negative
       offsets push the badge's centre roughly onto the corner of the
       button box. The 2px white ring visually separates it from the icon. */
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;        /* RTL-aware (right in LTR, left in RTL) */
    /* Sized to fit a 1- or 2-digit number cleanly without dwarfing the icon */
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--error-border, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    border: 2px solid var(--bg-container, #fff);
    box-sizing: content-box;
    pointer-events: none;
    /* Sit on top of any neighbouring elements just in case */
    z-index: 1;
}

/* Subtle pulse so a non-zero count actually catches the eye */
.header-bell-badge.has-count {
    animation: bellBadgePulse 2.4s ease-in-out infinite;
}

@keyframes bellBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}


/* =========================================================================
   6. USER AVATAR (initials fallback)
   ========================================================================= */
.header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
    background: var(--primary-color, #0073aa);
    overflow: hidden;
    /* Subtle ring */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
    transition: transform 0.2s;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Deterministic palette — assigned via .header-avatar.color-N (N = 0..7) */
.header-avatar.color-0 { background: linear-gradient(135deg, #0073aa, #1a2d5c); }
.header-avatar.color-1 { background: linear-gradient(135deg, #16a34a, #166534); }
.header-avatar.color-2 { background: linear-gradient(135deg, #f59e0b, #b45309); }
.header-avatar.color-3 { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.header-avatar.color-4 { background: linear-gradient(135deg, #8b5cf6, #6b21a8); }
.header-avatar.color-5 { background: linear-gradient(135deg, #ec4899, #be185d); }
.header-avatar.color-6 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.header-avatar.color-7 { background: linear-gradient(135deg, #14b8a6, #115e59); }

/* Larger size when used inside the polished dropdown header */
.user-dropdown-header .header-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* The user-menu trigger button: hide the old fa-user-circle, swap for avatar */
.user-menu-btn .header-avatar {
    margin-right: 8px;
}
html[dir="rtl"] .user-menu-btn .header-avatar {
    margin-right: 0;
    margin-left: 8px;
}

.user-menu-btn:hover .header-avatar {
    transform: scale(1.05);
}


/* =========================================================================
   7. POLISHED DROPDOWN
   ========================================================================= */

/* Slide-in animation when dropdown opens */
.user-menu-container:hover .user-dropdown,
.user-dropdown.active-mobile {
    animation: dropdownSlideIn 0.22s ease-out;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chevron rotation when dropdown is open (desktop hover or mobile active) */
.user-menu-btn .fa-chevron-down {
    transition: transform 0.22s ease;
}
.user-menu-container:hover .user-menu-btn .fa-chevron-down,
.user-menu-btn.is-open .fa-chevron-down {
    transform: rotate(180deg);
}

/* User info card at the top of the dropdown */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light, #e9ecef);
    background: linear-gradient(180deg, rgba(0, 115, 170, 0.04), transparent);
    /* Don't apply the per-link styles to this container */
    color: var(--text-main);
    text-decoration: none;
}

.user-dropdown-header .user-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 2px;
    /* Truncate if too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.user-dropdown-header .user-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section dividers between groups of links */
.user-dropdown .dropdown-divider {
    border-top: 1px solid var(--border-light, #e9ecef);
    margin: 4px 0;
    height: 0;
    pointer-events: none;
}

.user-dropdown .dropdown-section-label {
    display: block;
    padding: 6px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #999);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    pointer-events: none;
}


/* =========================================================================
   8. COMPACT LANGUAGE SWITCHER
   ========================================================================= */
.lang-btn.lang-btn-compact {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(0, 115, 170, 0.08);
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.lang-btn.lang-btn-compact:hover {
    background: var(--primary-color);
    color: #fff;
}

.lang-btn.lang-btn-compact i {
    font-size: 11px;
    margin-inline-end: 4px;
}


/* =========================================================================
   9. LOGGED-OUT CTA — give visitors a clear "Browse Jobs" entry point
   ========================================================================= */
.header-cta-browse {
    background: var(--accent-color, #f5cd60);
    color: var(--primary-color);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-cta-browse:hover {
    background: var(--accent-hover, #e6b94a);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}


/* =========================================================================
  10. MOBILE MENU ANIMATION (≤991px)
   The existing markup uses .header-actions.show-menu to toggle visibility.
   Smooth this with a slide-down + fade instead of an instant display toggle.
   ========================================================================= */
@media (max-width: 991px) {
    .header-actions {
        /* Don't use display:none — it would block the transition */
        display: flex !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition:
            max-height 0.28s ease,
            opacity 0.22s ease,
            transform 0.22s ease;
        /* Ensure the override for the existing absolute positioning still applies */
        pointer-events: none;
    }

    .header-actions.show-menu {
        max-height: 600px;     /* generous; collapses smoothly */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* =========================================================================
  11. VERTICAL ALIGNMENT NORMALIZATION (desktop ≥992px)
   The header used to mix elements with different intrinsic heights and
   line-heights, which caused subtle baseline drift — most visible inside
   the language button (globe icon + text) and between the avatar button
   and the round bell. We normalize every interactive item to:
     - same height (36px)
     - inline-flex centred children
     - line-height: 1 (so text + icon glyphs sit at the same vertical mid)
   ========================================================================= */
@media (min-width: 992px) {

    /* Parent rows — make sure flex centring is unambiguous */
    .header-actions,
    .header-actions .main-nav,
    .header-actions .lang-switcher {
        align-items: center;
    }

    /* Unified height + centring for every clickable item.
       The selector list intentionally covers everything in the right side
       of the header so newly-added items inherit the same baseline. */
    .header-actions .main-nav > a,
    .header-actions .header-bell,
    .header-actions .user-menu-btn,
    .header-actions .btn-accent.header-post-btn,
    .header-actions .header-cta-browse,
    .header-actions .lang-btn.lang-btn-compact {
        height: 36px;
        display: inline-flex;
        align-items: center;
        line-height: 1;          /* prevents text from inflating the box */
        box-sizing: border-box;
    }

    /* The bell stays a circle — keep its width = height */
    .header-actions .header-bell {
        width: 36px;
        padding: 0;
    }

    /* Pad the pill-shaped items consistently. The vertical padding goes
       away (height: 36px does the work), only horizontal padding matters. */
    .header-actions .btn-accent.header-post-btn,
    .header-actions .header-cta-browse,
    .header-actions .lang-btn.lang-btn-compact {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Icons inside header items: glyph fills its line-box, no extra leading */
    .header-actions .main-nav > a > i,
    .header-actions .header-bell i,
    .header-actions .btn-accent.header-post-btn i,
    .header-actions .header-cta-browse i,
    .header-actions .lang-btn.lang-btn-compact i {
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Language button: globe + 2-letter code centred to the millimetre.
       The previous .lang-btn rule has gap:6px; we reuse that, just add
       the line-height + flex bits so the glyph sits at the text mid-line. */
    .header-actions .lang-btn.lang-btn-compact {
        gap: 5px;
    }
    .header-actions .lang-btn.lang-btn-compact i {
        font-size: 12px;          /* matches the text size — was 11px */
        margin: 0;                /* override the 4px margin-inline-end set above */
        position: relative;
        top: 0;                   /* hard-reset any inherited vertical offset */
    }

    /* User-menu button: keep the avatar/text/chevron strictly centred */
    .header-actions .user-menu-btn {
        gap: 8px;
        padding: 0 4px;
    }
    .header-actions .user-menu-btn .header-avatar {
        margin: 0;                /* gap handles spacing now */
    }
    .header-actions .user-menu-btn .user-menu-name {
        line-height: 1;
    }
    .header-actions .user-menu-btn .fa-chevron-down {
        margin: 0;
        line-height: 1;
        font-size: 10px;
        opacity: 0.7;             /* subtle — chevron isn't the hero */
    }
}

/* --- End of site-header.css --- */