/* ========== EXTREME BRUTALIST HEADER ========== */
/* EVERYTHING BELOW THIS LINE IS EXACTLY AS PROVIDED - UNCHANGED */
.xbrutal-header {
    font-family: 'Courier New', Courier, monospace;
    background: #fff;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.xbrutal-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

/* Logo */
.xbrutal-logo-link {
    text-decoration: none;
    flex-shrink: 0;
}

.xbrutal-logo-box {
    background: #fff;
    
    
    padding: 0.45rem 0.9rem;
    display: flex;
    flex-direction: column;
    line-height: 1;
    transition: all 0.12s ease;
}

.xbrutal-logo-box span {
    font-weight: 900;
    font-size: 1.15rem;
    color: #111;
    letter-spacing: -1px;
}

.xbrutal-logo-link:hover .xbrutal-logo-box {
    transform: translate(-3px, -3px);
    
}

/* Desktop Nav */
.xbrutal-nav {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.xbrutal-nav a {
    color: #111;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border: 3px solid transparent;
    transition: all 0.1s ease;
}

.xbrutal-nav a:hover {
    background: #64D96F;
    color: #111;
    border-color: #000;
    box-shadow: 4px 4px 0 #000;
}

/* ========== MOBILE SEARCH (FIXED) ========== */
.xbrutal-mobile-search {
    display: flex;
    width: 100%;
    margin-bottom: 1.2rem;
}

.xbrutal-mobile-search input {
    flex: 1;
    min-width: 0;               /* critical for flex overflow */
    width: 100%;
    background: #f4efe6;
    border: 4px solid #000;
    border-right: none;
    padding: 0.95rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111;
    outline: none;
    box-sizing: border-box;
}

.xbrutal-mobile-search input::placeholder {
    color: #666;
    font-weight: 700;
}

.xbrutal-mobile-search button {
    background: #fff;
    color: #111;
    border: 4px solid #000;
    padding: 22px 22px 22px 22px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.xbrutal-mobile-search button:hover {
    background: #FFD600;
}

/* Stack on very small screens */
@media (max-width: 420px) {
    .xbrutal-mobile-search {
        flex-direction: column;
    }

    .xbrutal-mobile-search input {
        border: 4px solid #000;
        border-bottom: none;
        width: 100%;
    }

    .xbrutal-mobile-search button {
        width: 100%;
        padding: 1rem;
        text-align: center;
        font-size: 1rem;
    }
}

/* Right Actions */
.xbrutal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
}

.stamp-header {
    background: #FFD600;
    color: #000;
    border: 4px solid #000;
    padding: 0.4rem 0.7rem;
    font-weight: 900;
    font-size: 0.8rem;
    transform: rotate(-6deg);
    box-shadow: 4px 4px 0 #000;
}

.xbrutal-header-cta {
    background: #FFD600;
    color: #000;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
    border: 4px solid #000;
    box-shadow: 5px 5px 0 #000;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.xbrutal-header-cta:hover {
    background: #00A878;
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 #000;
}

/* Mobile Menu Button */
.xbrutal-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    padding: 9px 10px;
    cursor: pointer;
    
}

.xbrutal-menu-btn span {
    display: block;
    width: 22px;
    height: 3px;
    background: #111;
    transition: all 0.2s ease;
}

.xbrutal-menu-btn.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.xbrutal-menu-btn.open span:nth-child(2) {
    opacity: 0;
}
.xbrutal-menu-btn.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu */
.xbrutal-mobile-menu {
    display: none;
    background: #111;
    border-top: 5px solid #000;
    padding: 1.5rem;
    flex-direction: column;
    gap: 0.6rem;
}

.xbrutal-mobile-menu.active {
    display: flex;
}

.xbrutal-mobile-menu a {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.85rem 1.1rem;
    border: 3px solid #333;
    background: #0a0a0a;
}

.xbrutal-mobile-menu a:hover {
    background: #64D96F;
    color: #111;
    border-color: #000;
}

/* Mobile Search */
.xbrutal-mobile-search {
    display: flex;
    margin-bottom: 1rem;
}

.xbrutal-mobile-search input {
    flex: 1;
    background: #f4efe6;
    border: 4px solid #000;
    border-right: none;
    padding: 0.9rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    outline: none;
}

.xbrutal-mobile-search button {
    background: #64D96F;
    color: #111;
    border: 4px solid #000;
    padding: 8 1.3rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
}

.xbrutal-mobile-cta {
    margin-top: 1rem;
}

.xbrutal-mobile-cta .xbrutal-header-cta {
    display: block;
    text-align: center;
    padding: 1rem;
}

/* ============================================================
   DESKTOP SEARCH BAR - restyled to match .search-box from search.css
   exactly (the same pill-shaped search bar used on search.php), per
   request, rather than the header's own brutalist visual language.
   This is the one intentional visual departure from the brutalist
   theme in this file - everything else in the header stays brutalist.
   ============================================================ */
.xbrutal-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 340px;
    margin: 0 0.25rem;
    background: #fff;
    border: 2px solid var(--primary, #00A878);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 16px -4px rgba(0, 168, 120, 0.15);
    gap: 0.4rem;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.xbrutal-search:focus-within {
    box-shadow: 0 10px 28px -6px rgba(0, 168, 120, 0.3);
    border-color: var(--primary-dark, #065F46);
}

.xbrutal-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0.55rem 0.15rem;
    font-family: inherit;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-dark, #0F172A);
    outline: none;
    box-sizing: border-box;
}

.xbrutal-search-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.xbrutal-search-btn {
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #3ECF8E 100%));
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .xbrutal-search {
        display: none; /* hide desktop search on mobile */
    }
    
    .stamp-header {
        display: none;
    }
}

@media (max-width: 600px) {
    .xbrutal-header-inner {
        height: 70px;
        padding: 0 1rem;
        gap: 0.8rem;
    }
    
    .xbrutal-logo-box {
        padding: 0.35rem 0.7rem;
    }
    
    .xbrutal-logo-box span {
        font-size: 1rem;
    }
    
    .xbrutal-header-cta {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .xbrutal-header-cta {
        display: none; /* optional: hide CTA on very small screens */
    }
}
/* EVERYTHING ABOVE THIS LINE IS EXACTLY AS PROVIDED - UNCHANGED, except
   .xbrutal-nav a's color: changed from #fff to #111 - the header's own
   background is white (#fff), so white nav-link text was invisible
   against it. That's the entire "nav links not showing" bug - they were
   rendering, just as white-on-white.

   ALSO CHANGED: the inline .xbrutal-nav link row is now hidden on ALL
   screen sizes (moved out of the 900px media query into a permanent,
   unconditional rule below), and .xbrutal-menu-btn is now visible on
   ALL screen sizes too (same change, opposite direction) - this is the
   actual fix for the desktop nav breaking the header layout with too
   many items. The hamburger now opens the exact same slide-in drawer
   on desktop that already existed and worked well for mobile, rather
   than building a brand new desktop-specific menu component. */
.xbrutal-nav {
    display: none;
}
.xbrutal-menu-btn {
    display: flex;
}

/* ========================================================================
   NEW ADDITIONS BELOW - styling for the ported-in theme toggle and
   login/logout icon buttons from the previous header. Nothing above this
   line was modified, reordered, or removed to add these.
   ======================================================================== */
.xbrutal-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    color: #111;
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 50%;
}

.xbrutal-icon-btn:hover {
    background: transparent;
    
    color: #FFD600;
}

.xbrutal-icon-btn .icon-sun {
    display: none;
}

/* Convention: <html data-theme="dark"> - see the flag in the audit
   response about verifying this matches theme-dark.css's actual
   expected mechanism. */
html[data-theme="dark"] .xbrutal-icon-btn .icon-moon {
    display: none;
}
html[data-theme="dark"] .xbrutal-icon-btn .icon-sun {
    display: block;
}

@media (max-width: 600px) {
    .xbrutal-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* Mobile menu scrolls internally instead of the whole page scrolling -
   height capped to the remaining viewport below the 80px header (70px
   on the smaller mobile header height), with its own scrollbar. */
.xbrutal-mobile-menu.active {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .xbrutal-mobile-menu.active {
        max-height: calc(100vh - 70px);
    }
}

/* Applied to <body> via JS while the mobile menu is open, to prevent
   the page underneath from scrolling at the same time. */
body.xbrutal-menu-open {
    overflow: hidden;
}

/* ============================================================
   DRAWER MENU - fully restyled in the brutalist design language.
   No classes from the old site's drawer styling are reused here -
   built fresh to match the header's own look (thick black borders,
   offset box-shadows, Courier New, high-contrast blocks).
   ============================================================ */
.xbrutal-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1998;
}

.xbrutal-drawer-overlay.active {
    display: block;
}

.xbrutal-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: #0a0a0a;
    border-left: 6px solid #000;
    box-shadow: -8px 0 0 rgba(0,0,0,0.3);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
    transition: right 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.xbrutal-drawer.active {
    right: 0;
}

.xbrutal-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem;
    border-bottom: 5px solid #000;
    background: #40D04E;
    flex-shrink: 0;
}

.xbrutal-drawer-title {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -0.5px;
    color: #111;
}

.xbrutal-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #f4efe6;
    color: #111;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.xbrutal-drawer-close:hover {
    background: #FFD600;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000;
}

.xbrutal-drawer-search {
    margin: 1.25rem 1.25rem 0;
    width: auto;
}

/* Desktop already has its own dedicated search icon/bar in the header
   actions now - showing a second search field inside the drawer too
   is redundant there. Mobile still needs it, since the header's own
   search bar is hidden below 900px with no other search access. */
@media (min-width: 901px) {
    .xbrutal-drawer-search {
        display: none;
    }
}

.xbrutal-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    flex: 1;
}

.xbrutal-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border: 3px solid #333;
    background: #111;
    transition: all 0.1s ease;
}

.xbrutal-drawer-link:hover {
    background: #FFD600;
    color: #111;
    border-color: #000;
}

.xbrutal-drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 5px solid #000;
    flex-shrink: 0;
}

.xbrutal-drawer-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    border: 4px solid #000;
    box-shadow: 4px 4px 0 #000;
    transition: all 0.12s ease;
}

.xbrutal-drawer-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
}

.xbrutal-drawer-btn-primary {
    background: #FFD600;
    color: #000;
}

.xbrutal-drawer-btn-primary:hover {
    background:#40D04E;
}

.xbrutal-drawer-btn-outline {
    background: #f4efe6;
    color: #111;
}

.xbrutal-drawer-btn-outline:hover {
    background: #fff;
}

.xbrutal-drawer-btn-danger {
    background: #DC2626;
    color: #fff;
}

.xbrutal-drawer-btn-danger:hover {
    background: #991B1B;
    color: #fff;
}

@media (max-width: 420px) {
    .xbrutal-drawer {
        width: 100%;
        max-width: 100vw;
        border-left: none;
    }
}

.xbrutal-search-btn:hover {
    filter: brightness(0.95);
}

@media (max-width: 1100px) {
    .xbrutal-search {
        max-width: 260px;
    }
}

/* ============================================================
   SEARCH TOGGLE - collapses the search bar to a single circular icon
   by default; xbrutal-header.js adds/removes .is-open on click. Grows
   in place via width + opacity, not a translateX slide like the mobile
   drawer uses - a different, more compact interaction for a header
   element rather than a full off-canvas panel.

   Pure addition - your existing rule hiding .xbrutal-search below 900px
   is untouched and still does its job on the form itself; this adds a
   second, new rule hiding the wrapper (icon button included) at the
   same breakpoint, since mobile already has its own separate search
   field in the drawer and doesn't need this icon lingering too.
   ============================================================ */
.xbrutal-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.xbrutal-search-wrap .xbrutal-search {
    display: flex;
    align-items: center;
    width: 0;
    max-width: none;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    transition: width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.xbrutal-search-wrap.is-open .xbrutal-search {
    width: 240px;
    opacity: 1;
    pointer-events: auto;
    margin-left: 0.5rem;
}

.xbrutal-search-wrap.is-open .xbrutal-search-toggle {
    display: none;
}

@media (max-width: 900px) {
    .xbrutal-search-wrap {
        display: none;
    }
}

/* ============================================
   SMART STICKY HEADER - hides on scroll down, reappears on scroll up,
   matching the common pattern used on Medium, many news sites, etc.
   Applies to all devices/screen sizes. xbrutal-header.js adds/removes
   the .xbrutal-header-hidden class based on scroll direction.
   ============================================ */
.xbrutal-header {
    transition: transform 0.25s ease;
}
.xbrutal-header.xbrutal-header-hidden {
    /* Switching to fixed specifically while hidden - this is the real
       fix, confirmed by direct on-device debug output showing the
       class WAS being applied correctly on mobile, but the transform
       simply didn't render visually. Some mobile browsers don't
       reliably support transform on a position:sticky element, even
       though the class logic itself works fine. fixed+transform is
       far more consistently supported. The normal visible state above
       stays exactly as sticky, completely untouched. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

/* ============================================================
   DESKTOP HAMBURGER LABEL - a small "MENU" text next to the hamburger
   icon, visible on desktop only (mobile keeps the bare icon, which is
   already a familiar, self-explanatory pattern there). Small, clean
   touch matching what many larger sites do for a desktop-only
   hamburger trigger.
   ============================================================ */
/* ============================================================
   DESKTOP HAMBURGER LABEL - a small "MENU" text next to the hamburger
   icon, visible on desktop only. Kept as a SEPARATE element next to
   the button (not inside it) - the button's own internal layout
   (flex-direction: column, stacking its 3 line-spans into a hamburger
   icon) is untouched, avoiding the risk of breaking that existing,
   working open/close animation by nesting new content inside it.
   ============================================================ */
.xbrutal-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.xbrutal-menu-btn-label {
    display: none;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #111;
}
@media (min-width: 901px) {
    .xbrutal-menu-btn-label {
        display: inline-block;
    }
}