/**
 * NovaTheme — Header
 *
 * From child theme header-template.php inline CSS, cleaned up.
 * Zero !important. Vanilla JS for collapse/dropdown (.show toggle).
 *
 * @version 2.4.7
 *
 * Sections:
 *   1. Interactive states (collapse, dropdown)
 *   2. Desktop header (>=992px)
 *   3. Mobile header (<992px)
 *   4. Bottom bar (mobile fixed)
 *   5. Responsive show/hide
 */


/* ==========================================================================
   1. INTERACTIVE STATES (collapse, dropdown)
   nf-interactive.js toggles .show class — same mechanism as before.
   ========================================================================== */

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

/* Inline SVG icons — base class */
.nf-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Footer accordion chevron rotation */
.nf-footer-accordion-chevron {
    transition: transform var(--nt-transition);
}

[aria-expanded="true"] .nf-footer-accordion-chevron {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 180px;
    padding: 10px 0;
    background: var(--nt-white);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 0;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--nt-text);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
}

.dropdown-item:hover {
    background: var(--nt-gray-50);
    color: var(--nt-green);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}


/* ==========================================================================
   2. DESKTOP HEADER (>=992px)
   ========================================================================== */

.nf-header-desktop {
    max-width: 100%;
    margin-top: 15px;
}

.nf-desktop-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    position: relative;
}

.nf-desktop-left,
.nf-desktop-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nf-desktop-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Logo */
.nf-logo,
.nf-logo {
    text-decoration: none;
    color: var(--nt-text);
}

.nf-logo img {
    max-height: 60px;
    width: auto;
}

/* ---- NovaFlow button (desktop — LEFT/N side → green outline) ---- */
.nf-novaflow-btn {
    border: 2px solid var(--nt-green);
    color: var(--nt-green);
    background: transparent;
    padding: 0 20px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--nt-transition);
}

.nf-novaflow-btn:hover {
    text-decoration: none;
}

/* ---- Language flags ---- */
.nf-flags .wpml-ls-legacy-list-horizontal {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.nf-flags .wpml-ls-legacy-list-horizontal li {
    list-style: none;
    margin: 0;
}

.nf-flags .wpml-ls-flag {
    width: 32px;
    height: auto;
}

/* ---- Header buttons (RIGHT/F side → black) ---- */
.nf-btn {
    padding: 0 20px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    transition: all var(--nt-transition);
}

/* Outline button — black border (right side: NovaFeed, Login, Register) */
.nf-btn-outline {
    border: 2px solid var(--nt-dark);
    color: var(--nt-dark);
    background: transparent;
}

.nf-btn-outline:hover {
    text-decoration: none;
}

/* ---- User avatar dropdown (logged in — RIGHT/F side → black border) ---- */
.nf-user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nf-user-avatar-btn {
    background: none;
    border: 2px solid var(--nt-dark);
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color var(--nt-transition);
    vertical-align: middle;
}

.nf-user-avatar-btn:hover {
    border-color: var(--nt-black);
}

/* dropdown-toggle: kill the default caret (nav-walker adds this class) */
.nf-user-avatar-btn.dropdown-toggle::after {
    display: none;
}

/* Force avatar image to fill the button — override WP inline width/height attrs */
.nf-user-avatar-btn .nf-header-avatar,
.nf-user-avatar-btn img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    border-radius: 0;
    object-fit: cover;
}

/* User dropdown menu — vertical, same feel as main menu */
.nf-user-dropdown-menu {
    min-width: 200px;
    padding: 8px 0;
    background: var(--nt-gray-50);
    border-top: none;
    box-shadow: var(--nt-shadow-md);
    border-radius: 0;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
}

.nf-user-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nf-user-menu-list li {
    margin: 0;
    width: 100%;
}

.nf-user-menu-list a,
.nf-user-menu-link {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nt-text);
    text-decoration: none;
    transition: color var(--nt-transition), background var(--nt-transition);
}

.nf-user-menu-list a:hover,
.nf-user-menu-link:hover {
    color: var(--nt-green);
    background: var(--nt-white);
}

/* Logout link in dropdown */
.nf-logout {
    color: var(--nt-danger);
    border-top: 1px solid var(--nt-border);
    margin-top: 4px;
    padding-top: 12px;
}

.nf-logout:hover {
    color: var(--nt-danger);
    background: var(--nt-white);
}

.nf-logout .nf-icon {
    margin-right: 8px;
}

/* ---- Notification bell (desktop — RIGHT/F side → black border) ---- */
.nf-header-bell {
    display: flex;
    align-items: center;
}

.nf-header-bell .nvf-bell-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60px;
    height: 60px;
    border: 2px solid var(--nt-dark);
    color: var(--nt-dark);
    background: transparent;
    text-decoration: none;
    transition: all var(--nt-transition);
}

.nf-header-bell .nvf-bell-link:hover {
    background: var(--nt-dark);
    color: var(--nt-white);
}

.nf-header-bell .nvf-bell-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
}

.nf-header-bell .nvf-bell-count.nvf-has-notifs {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nf-header-bell .nvf-bell-count:not(.nvf-has-notifs) {
    display: none;
}


/* ---- Desktop menu bar — always visible ---- */
.nf-menu-bar {
    background: var(--nt-gray-50);
    border-top: 1px solid var(--nt-border);
}

.nf-menu-bar .nf-menu-inner {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-desktop-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nf-desktop-nav .nav-item {
    margin: 0;
}

.nf-desktop-nav .nav-link {
    padding: 12px 0;
    color: var(--nt-text);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.nf-desktop-nav .nav-link:hover {
    color: var(--nt-green);
}

/* Active menu item */
.nf-active-menu-item > .nav-link {
    color: var(--nt-green);
}

.nf-desktop-nav .nf-active-menu-item > .nav-link {
    color: var(--nt-green);
}

/* Search icon in top bar — after flags */
.nf-search-btn {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity var(--nt-transition);
}

.nf-search-btn:hover {
    opacity: 1;
}

.nf-search-btn img {
    width: 32px;
    height: 32px;
}

/* Tor icon in desktop menu */
.nf-tor-desktop {
    display: inline-flex;
    align-items: center;
    margin-left: 40px;
    opacity: 0.8;
    transition: opacity var(--nt-transition);
}

.nf-tor-desktop:hover {
    opacity: 1;
}

.nf-tor-desktop img {
    width: 32px;
    height: 32px;
}


/* ==========================================================================
   3. MOBILE HEADER (<992px)
   ========================================================================== */

.nf-header-mobile {
    background: var(--nt-green);
    position: relative;
}

.nf-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    height: 56px;
    position: relative;
}

.nf-mobile-toggle {
    background: transparent;
    border: none;
    color: var(--nt-white);
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nf-mobile-toggle .nf-icon-menu {
    vertical-align: -2px;
}

/* NovaFlow button mobile variant */
.nf-novaflow-btn-mobile {
    height: auto;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
}

.nf-novaflow-btn-mobile .fa {
    margin-right: 6px;
    font-size: 14px;
}

.nf-mobile-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: var(--nt-white);
    line-height: 0;
}

.nf-mobile-logo img {
    height: 40px;
    width: auto;
    max-height: 40px;
}

.nf-mobile-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nf-user-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: var(--nt-white);
    font-size: 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

/* Guest user icon — SVG image, propre et rond */
.nf-user-btn-guest {
    border: none;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border-radius: 50%;
    overflow: hidden;
}

.nf-user-btn-guest .nf-guest-icon {
    display: block;
    width: 36px;
    height: 36px;
}

/* Mobile avatar button — round, no border */
.nf-user-avatar-btn.nf-user-avatar-btn-mobile {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: none;
    overflow: hidden;
}

.nf-user-avatar-btn.nf-user-avatar-btn-mobile:hover {
    border: none;
}

.nf-user-avatar-btn.nf-user-avatar-btn-mobile .nf-header-avatar,
.nf-user-avatar-btn.nf-user-avatar-btn-mobile img {
    width: 40px;
    height: 40px;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

/* ---- Notification bell (mobile) — white, bigger, spaced from avatar ---- */
.nf-mobile-bell {
    display: flex;
    align-items: center;
    margin-right: 14px;
}

.nf-mobile-bell .nvf-bell-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: var(--nt-white);
    text-decoration: none;
    padding: 6px;
}

.nf-mobile-bell .nvf-bell-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    stroke: var(--nt-white);
}

.nf-mobile-bell .nvf-bell-count.nvf-has-notifs {
    position: absolute;
    top: 0;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nf-mobile-bell .nvf-bell-count:not(.nvf-has-notifs) {
    display: none;
}

/* Mobile dropdown menu */
.nf-mobile-collapse {
    background: var(--nt-white);
}

/* Mobile user menu collapse — aligned right under user icon */
.nf-mobile-user-collapse {
    background: var(--nt-gray-50);
    border-top: 2px solid var(--nt-green);
    text-align: left;
    position: absolute;
    right: 0;
    top: 100%;
    width: 240px;
    z-index: 1000;
    box-shadow: var(--nt-shadow-md);
}

.nf-mobile-user-collapse .nf-mobile-nav {
    padding: 4px 0;
}

/* User mobile nav links — wp_nav_menu sans walker = <a> sans .nav-link */
.nf-mobile-user-collapse .nf-mobile-nav li {
    margin: 0;
    list-style: none;
}

.nf-mobile-user-collapse .nf-mobile-nav li a {
    display: block;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nt-text);
    text-decoration: none;
    border-bottom: 1px solid var(--nt-gray-100);
    transition: color var(--nt-transition), background var(--nt-transition);
}

.nf-mobile-user-collapse .nf-mobile-nav li:last-child a {
    border-bottom: none;
}

.nf-mobile-user-collapse .nf-mobile-nav li a:hover {
    color: var(--nt-green);
    background: var(--nt-white);
}

/* Mobile user toggle button */
.nf-mobile-user-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nf-mobile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.nf-mobile-nav {
    flex-direction: column;
    width: 100%;
}

.nf-mobile-nav .nav-link {
    padding: 12px 15px;
    border-bottom: 1px solid var(--nt-gray-100);
    color: var(--nt-text);
    text-decoration: none;
    display: block;
}

.nf-mobile-nav .nav-link:hover {
    color: var(--nt-green);
}

/* Tor in mobile menu */
.nf-tor-mobile-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--nt-gray-100);
    color: var(--nt-text);
    text-decoration: none;
    font-weight: 500;
}

.nf-tor-mobile-menu:hover {
    background: var(--nt-gray-50);
    color: var(--nt-green);
}

.nf-tor-mobile-menu img {
    width: 28px;
    height: 28px;
}


/* ==========================================================================
   4. BOTTOM BAR (mobile fixed)
   ========================================================================== */

.nf-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--nt-green);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 9999;
}

.nf-bottom-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nf-bottom-left .wpml-ls-legacy-list-horizontal {
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.nf-bottom-left .wpml-ls-legacy-list-horizontal li {
    list-style: none;
    margin: 0;
}

.nf-bottom-left .wpml-ls-flag {
    width: 36px;
    height: auto;
}

.nf-bottom-right {
    display: flex;
    gap: 8px;
}

/* Search icon in mobile bottom bar — after flags */
.nf-bottom-search {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.nf-bottom-search img {
    width: 28px;
    height: 28px;
}

.nf-bottom-btn {
    padding: 5px 10px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: var(--nt-white);
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--nt-font-body);
    letter-spacing: 0.5px;
    transition: background var(--nt-transition);
}

.nf-bottom-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--nt-white);
}


/* ==========================================================================
   5. RESPONSIVE — show/hide desktop vs mobile
   ========================================================================== */

/* Mobile first: show mobile, hide desktop */
.nf-header-desktop {
    display: none;
}

.nf-header-mobile {
    display: block;
}

.nf-bottom-bar {
    display: flex;
}

/* Desktop (>=992px): show desktop, hide mobile + bottom bar */
@media (min-width: 992px) {
    .nf-header-desktop {
        display: block;
    }

    .nf-header-mobile {
        display: none;
    }

    .nf-bottom-bar {
        display: none;
    }
}

/* Body padding for bottom bar on mobile — dark bg to match footer */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 50px;
    }

    /* Dark strip behind the fixed bottom bar so no gray body shows */
    body::after {
        content: '';
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: var(--nt-footer-bg);
        z-index: 9998;
        pointer-events: none;
    }
}