/**
 * Header fix + polish (TEST).
 *
 * Two parts:
 * 1. On wide screens (>1366px) the desktop nav is taken out of its old absolute
 *    centering so it sits in flow and can't overlap the logo/actions.
 * 2. Below 1024px the full horizontal menu no longer fits next to the logo +
 *    action icons, so we show the clean hamburger. This matches the theme's own
 *    native mobile breakpoint (1024px, the "working" savepoint). Socials drop a
 *    little earlier (<=1200px) so the menu never crams before the collapse. We do
 *    NOT collapse at 1366px anymore: on scaled displays (Windows 125%/150%) a real
 *    1920px monitor reports a ~1280-1536px CSS viewport, and the old 1366 breakpoint
 *    wrongly forced the hamburger onto full desktops.
 *    IMPORTANT: it explicitly shows .mobile-menu-btn (display:flex). The button is
 *    display:none on desktop, and forgetting it is what made the menu "vanish"
 *    before (desktop nav hidden, hamburger button never shown).
 *
 * Loaded globally after the main stylesheet. Remove by dequeuing 'header-redesign'
 * in functions.php, or revert to the savepoint.
 */

/* ============================================================
   HEADER LAYOUT — flow-based flex, zoom & width proof.
   The base theme pins the logo (absolute left) and the actions
   (absolute right) and centers the nav with justify-content. That
   is what breaks on browser zoom: the absolute icons don't regroup
   next to the hamburger and can drift. Putting everything in normal
   flex flow (logo | nav | actions) lets the row adapt to any width
   or zoom level, the way Apple/Nvidia headers do.

   Three zones: logo (flex:1) and actions (flex:1) balance each side,
   so the nav stays centered. When the nav is hidden (collapsed), the
   actions + hamburger naturally sit together on the right.
   ============================================================ */
.site-header .header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
}
.site-header .site-branding {
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.site-header .site-nav.desktop-only {
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
}
.site-header .header-right {
    position: static !important;
    right: auto !important;
    transform: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}
.site-header .mobile-header-actions {
    position: static !important; /* base theme pins this absolute <=1024px, which
                                    collided with the now-in-flow theme button */
    right: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}

/* ============================================================
   MODERN NAV UNDERLINE (portfolio feel) — same colors, same font
   ============================================================ */
.site-header .site-nav a {
    position: relative;
    transition: color 0.25s ease;
}
.site-header .site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent, #ff0d0d), #ff4d4d);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-header .site-nav a:hover { color: #fff; }
.site-header .site-nav a:hover::after,
.site-header .site-nav .current-menu-item > a::after,
.site-header .site-nav .current_page_item > a::after {
    transform: scaleX(1);
}

/* ============================================================
   HEADER POLISH — hairline + refined icon hovers
   ============================================================ */
.site-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.light-theme .site-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
.site-header .header-search-toggle,
.site-header .theme-toggle,
.site-header .social-icon {
    transition: color 0.25s ease, transform 0.25s ease;
}
.site-header .header-search-toggle:hover,
.site-header .social-icon:hover {
    color: var(--accent, #ff0d0d);
    transform: translateY(-1px);
}

/* ============================================================
   SOCIALS: drop before the menu ever crams (they also live in the
   footer). Keeps the top bar to logo + nav + actions on mid-size
   screens, the way Apple/Nvidia headers stay clean.
   ============================================================ */
@media (max-width: 1200px) {
    .site-header .social-links { display: none !important; }
}

/* ============================================================
   BELOW 1024px: the horizontal menu no longer fits beside the logo
   and actions, so collapse to the hamburger. Matches the theme's
   native mobile breakpoint. We style the button + lines here because
   the base theme only styles them <=900px (empty button otherwise).
   ============================================================ */
@media (max-width: 1024px) {
    /* Top bar: logo CENTERED, hamburger in the right corner. Both use the
       same absolute mechanism the base theme already uses, so there is no
       rule conflict to fight, the result is deterministic at any width/zoom.
       (Nav, socials, search and theme toggle all live in the menu overlay.) */
    .site-header .header-wrap {
        position: relative !important;
        gap: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .site-header .site-nav.desktop-only,
    .site-header nav.site-nav.desktop-only,
    .site-header .social-links,
    .site-header .header-right {
        display: none !important;
    }

    /* Logo dead-center. */
    .site-header .header-wrap .site-branding {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 5 !important;
    }

    /* Hamburger fixed to the right corner. */
    .site-header .mobile-header-actions {
        position: absolute !important;
        right: 20px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* The hamburger button itself (display:none on desktop, so it must be shown) */
    .site-header .mobile-menu-btn {
        display: flex !important;
        width: 42px;
        height: 42px;
        background: rgba(255, 13, 13, 0.1);
        border: 2px solid rgba(255, 13, 13, 0.3);
        border-radius: 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
    }

    /* The 3 hamburger lines (theme only styled these at <=900px, so the button
       looked empty in the 901-1366px range). */
    .site-header .mobile-menu-btn .hamburger-line {
        display: block !important;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .site-header .mobile-menu-btn.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-header .mobile-menu-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
    .site-header .mobile-menu-btn.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   MOBILE MENU OVERLAY — glassmorphism, portfolio feel
   ============================================================ */
.mobile-nav-overlay {
    background: rgba(7, 8, 12, 0.86) !important;
    backdrop-filter: blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

/* Search at the top */
.mobile-nav-overlay .mobile-menu-search {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto 22px !important;
    padding: 0 16px !important;
}
.mobile-nav-overlay .mobile-search-form {
    display: flex !important;
    gap: 10px !important;
}
.mobile-nav-overlay .mobile-search-form input {
    flex: 1 !important;
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 0.95rem !important;
}
.mobile-nav-overlay .mobile-search-form input::placeholder { color: #8b909b !important; }
.mobile-nav-overlay .mobile-search-form input:focus {
    outline: none !important;
    border-color: var(--accent, #ff0d0d) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}
.mobile-nav-overlay .mobile-search-form button {
    width: 50px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--accent, #ff0d0d), #c40000) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Menu list */
.mobile-nav-overlay .mobile-nav-links {
    width: 100% !important;
    max-width: 380px !important;
    padding: 16px !important;
}
.mobile-nav-overlay .mobile-nav-links .menu {
    gap: 10px !important;
}

/* Each item = glass card (rounded rectangle, not a pill) */
.mobile-nav-overlay .mobile-nav-links .menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 17px 22px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #f2f4f8 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.mobile-nav-overlay .mobile-nav-links .menu > li > a:hover,
.mobile-nav-overlay .mobile-nav-links .menu > li > a:active {
    background: rgba(255, 13, 13, 0.10) !important;
    border-color: var(--accent, #ff0d0d) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px -14px rgba(255, 13, 13, 0.45) !important;
}

/* Dropdown arrow on items with children */
.mobile-nav-overlay .mobile-nav-links .menu-item-has-children > a::after,
.mobile-nav-overlay .mobile-nav-links li.has-submenu > a::after {
    color: var(--accent, #ff0d0d) !important;
    opacity: 1 !important;
}

/* Submenu items: indented, lighter glass */
.mobile-nav-overlay .mobile-nav-links .sub-menu {
    gap: 8px !important;
    margin-top: 8px !important;
}
.mobile-nav-overlay .mobile-nav-links .sub-menu a {
    width: 88% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 13px 20px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #aeb3bd !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
}
.mobile-nav-overlay .mobile-nav-links .sub-menu a:hover {
    color: #fff !important;
    background: rgba(255, 13, 13, 0.10) !important;
    border-color: var(--accent, #ff0d0d) !important;
}

/* Close button */
.mobile-nav-overlay .close-btn {
    color: #f2f4f8 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.mobile-nav-overlay .close-btn:hover {
    color: var(--accent, #ff0d0d) !important;
    transform: rotate(90deg) !important;
}

/* ============================================================
   THEME SWITCH inside the menu — subtle on/off pill, no round
   button. State is driven purely by body.light-theme (CSS only),
   so it stays in sync with toggleTheme() without extra JS.
   ============================================================ */
.menu-theme-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    margin: 22px auto 4px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: #aeb3bd;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.menu-theme-switch .mts-track {
    position: relative;
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    flex: 0 0 auto;
    transition: background 0.25s ease;
}
.menu-theme-switch .mts-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #ff0d0d), #ff4d4d);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Dark is the default (thumb left, "Dark" highlighted). */
.menu-theme-switch .mts-label-dark { color: #f2f4f8; }
/* Light active: thumb slides right, labels swap emphasis. */
body.light-theme .menu-theme-switch .mts-thumb { transform: translateX(22px); }
body.light-theme .menu-theme-switch .mts-track { background: rgba(255, 255, 255, 0.28); }
body.light-theme .menu-theme-switch .mts-label-dark { color: #aeb3bd; }
body.light-theme .menu-theme-switch .mts-label-light { color: #f2f4f8; }