/*
 * PodXen Global Design System
 * --------------------------------------------------
 * Keep product-specific layouts out of this file.
 */

:root {
    --px-bg: #090a0a;
    --px-bg-deep: #050606;

    --px-surface: #121414;
    --px-surface-raised: #191c1b;
    --px-surface-hover: #202421;

    --px-text: #f3f4f2;
    --px-text-secondary: #c0c5c1;
    --px-text-muted: #8d9590;

    --px-accent: #b6ff00;
    --px-accent-hover: #c8ff40;
    --px-accent-text: #090a0a;

    --px-border: #292e2b;
    --px-border-light: #363d38;

    --px-radius-sm: 4px;
    --px-radius: 7px;
    --px-radius-lg: 12px;

    --px-content-width: 1280px;

    --px-transition: 160ms ease;
}


/* --------------------------------------------------
   Base
-------------------------------------------------- */

html {
    background: var(--px-bg);
}

body {
    background: var(--px-bg);
    color: var(--px-text);
}

body,
button,
input,
select,
textarea {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

a {
    color: var(--px-accent);
    transition: color var(--px-transition);
}

a:hover,
a:focus {
    color: var(--px-accent-hover);
}


/* --------------------------------------------------
   Typography
-------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--px-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    color: var(--px-text-secondary);
}


/* --------------------------------------------------
   Forms
-------------------------------------------------- */

input,
textarea,
select {
    background: var(--px-surface);
    color: var(--px-text);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--px-accent);
    outline: none;
}


/* --------------------------------------------------
   PodXen Components
-------------------------------------------------- */

.px-container {
    width: min(100% - 40px, var(--px-content-width));
    margin-inline: auto;
}

.px-surface {
    background: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-lg);
}

.px-muted {
    color: var(--px-text-muted);
}

.px-accent {
    color: var(--px-accent);
}


/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.px-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 22px;

    background: var(--px-accent);
    color: var(--px-accent-text);

    border: 1px solid var(--px-accent);
    border-radius: var(--px-radius);

    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--px-transition),
        border-color var(--px-transition),
        transform var(--px-transition);
}

.px-button:hover,
.px-button:focus {
    background: var(--px-accent-hover);
    border-color: var(--px-accent-hover);
    color: var(--px-accent-text);
}

.px-button-secondary {
    background: transparent;
    color: var(--px-text);
    border-color: var(--px-border-light);
}

.px-button-secondary:hover,
.px-button-secondary:focus {
    background: var(--px-surface-raised);
    color: var(--px-text);
    border-color: var(--px-accent);
}


/* --------------------------------------------------
   Selection
-------------------------------------------------- */

::selection {
    background: var(--px-accent);
    color: var(--px-accent-text);
}

/* =========================================================
   PODXEN HEADER
   -------------------------------------------------------
   BuddyX header anatomy (parent selectors we adapt, never
   edit):  .site-header-wrapper > .container > #masthead
   .site-header  >  .site-branding  +  #site-navigation
   .main-navigation   (flex, max-width:100%).
   Breakpoints: BuddyX switches at 767/768px.
   Colors flow from the BuddyX token cascade:
   --color-header-bg / --color-menu* / --bx-color-menu-fg
   drive the wrapper, nav links, dropdowns, profile menus
   and the off-canvas mobile menu. We retarget those tokens
   at the PodXen palette for BOTH color modes so the header
   stays PodXen-dark no matter what mode is active.
========================================================= */

/* --- 1. Header tokens: PodXen palette in light AND dark mode --- */
:root,
:root[data-bx-mode="light"],
:root[data-bx-mode="dark"] {
    --color-header-bg: #090a0a;
    --bx-color-header-bg: #090a0a;

    --color-menu: #f3f4f2;
    --bx-color-menu-fg: #f3f4f2;
    --color-menu-hover: #b6ff00;
    --bx-color-menu-hover: #b6ff00;
    --color-menu-active: #b6ff00;
    --bx-color-menu-active: #b6ff00;

    --color-site-title: #f3f4f2;
    --bx-color-site-title: #f3f4f2;
    --color-site-title-hover: #b6ff00;
    --bx-color-site-title-hover: #b6ff00;
}

/* --- 2. Wrapper: dark band, no BuddyX light-mode shadow ---
   The gray band under the old header was .site-header-wrapper's
   box-shadow, NOT the masthead's - target the right element. */
.site-header-wrapper {
    background: #090a0a;
    border-bottom: 1px solid #292e2b;
    box-shadow: none;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;

    /* Header-scoped surface tokens: search popup, dropdown
       panels, submenu arrows, off-canvas menu, BP badges. */
    --bx-color-bg-elevated: #121414;
    --bx-color-bg-muted: #050606;
    --bx-color-border: #292e2b;
    --bx-color-border-strong: #363d38;
    --global-border-color: #292e2b;
    --bx-color-shadow: rgba(0, 0, 0, 0.55);
    --bx-color-shadow-strong: rgba(0, 0, 0, 0.7);
    --bx-color-input-bg: #121414;
    --bx-color-input-border: #292e2b;
    --bx-color-input-fg: #f3f4f2;
    --bx-color-input-placeholder: #8d9590;
    --bx-color-input-focus-border: #b6ff00;
    --button-background-color: #b6ff00;
    --button-background-hover-color: #c8ff40;
    --button-text-color: #090a0a;
    --button-border-color: #b6ff00;
}

.sticky-header .site-header-wrapper.has-sticky-header {
    box-shadow: none;
}

/* --- 3. Masthead: one row, vertically centered --- */
#masthead.site-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 80px;
    padding: 0;
}

/* --- 4. Branding / logo --- */
#masthead .site-branding,
#masthead .site-branding-inner {
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;
}

.podxen-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.podxen-header-logo img {
    display: block;
    width: auto;
    height: 50px;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}


/* --- 5. Navigation: fill remaining space, items pushed right --- */
#site-navigation.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    clear: none;
    margin: 0;
    gap: 4px;
}

#site-navigation .primary-menu-container.buddyx-desktop-menu {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

#site-navigation .menu {
    float: none;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

#site-navigation ul#primary-menu > li {
    margin: 0;
}

#site-navigation ul#primary-menu > li > a {
    display: block;
    padding: 10px 12px;
    color: #f3f4f2;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--px-transition);
}

#site-navigation ul#primary-menu > li > a:hover,
#site-navigation ul#primary-menu > li > a:focus,
#site-navigation ul#primary-menu > li.current-menu-item > a,
#site-navigation ul#primary-menu > li.current-menu-item > a:hover {
    color: #b6ff00;
}

/* Desktop dropdowns (submenus, profile menu, notifications) */
#site-navigation .nav--toggle-sub ul.sub-menu li a:hover,
#site-navigation .nav--toggle-sub ul.sub-menu li a:focus,
#site-navigation .user-profile-menu li a:hover,
#site-navigation .bp-header-submenu li a:hover {
    background: #191c1b;
    color: #b6ff00;
}

/* --- 6. Header controls: search, color mode, BP icons, account --- */
#site-navigation .buddypress-icons-wrapper {
    float: none;
    margin-left: 8px;
    gap: 2px;
}

#site-navigation .menu-icons-wrapper {
    padding: 0;
}

#site-navigation .menu-icons-wrapper .search {
    margin: 0 4px;
}

#site-navigation .buddypress-icons-wrapper .bp-msg,
#site-navigation .buddypress-icons-wrapper .user-notifications,
#site-navigation .buddypress-icons-wrapper .user-link-wrap {
    margin: 0 6px;
    padding: 8px 0;
}

#site-navigation .buddypress-icons-wrapper a,
#site-navigation .buddypress-icons-wrapper button,
#site-navigation .menu-icons-wrapper a,
#site-navigation .menu-icons-wrapper button,
#site-navigation .bx-color-mode-toggle__btn {
    color: #f3f4f2;
    transition: color var(--px-transition);
}

#site-navigation .buddypress-icons-wrapper a:hover,
#site-navigation .buddypress-icons-wrapper a:focus,
#site-navigation .buddypress-icons-wrapper button:hover,
#site-navigation .menu-icons-wrapper a:hover,
#site-navigation .menu-icons-wrapper a:focus,
#site-navigation .bx-color-mode-toggle__btn:hover,
#site-navigation .bx-color-mode-toggle__btn:focus {
    color: #b6ff00;
}

/* Unread counters: chartreuse accent on dark */
#site-navigation .buddypress-icons-wrapper sup.count {
    background: #b6ff00;
    color: #090a0a;
}
/* Guest login / register pills */
#site-navigation .btn-login,
#site-navigation .btn-register {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* Header search popup */
#site-navigation .top-menu-search-container #searchform {
    background: #121414;
    border: 1px solid #292e2b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    padding: 6px 44px 6px 14px;
}

#site-navigation .top-menu-search-container #searchform input[type="search"] {
    color: #f3f4f2;
    text-transform: none;
}

#site-navigation .top-menu-search-container #searchform input[type="search"]::placeholder {
    color: #8d9590;
}

/* Hamburger */
#site-navigation .menu-toggle {
    color: #f3f4f2;
    padding: 8px;
}

#site-navigation .menu-toggle:hover,
#site-navigation .menu-toggle:focus {
    color: #b6ff00;
}

/* --- 7. Off-canvas menu panel (shared by tablet + mobile) --- */
#site-navigation .primary-menu-container.buddyx-mobile-menu .mobile-menu-heading .menu-title {
    color: #f3f4f2;
}

#site-navigation .primary-menu-container.buddyx-mobile-menu .menu-close {
    color: #b6ff00;
    border: 1px solid #292e2b;
    border-radius: var(--px-radius);
    padding: 6px 14px;
}

#site-navigation .primary-menu-container.buddyx-mobile-menu .menu-close:hover {
    background: #191c1b;
}


/* --- 8. Tablet/small laptop: 768-1151px uses hamburger + off-canvas ---
   Seven nav items + logo + BP controls do not fit on one row
   below ~1152px, so the compact pattern stays until 1151px and
   the full horizontal menu takes over at 1152px+.
   BuddyX's off-canvas styles only exist in its <=767px block,
   so the panel rules are mirrored here. JS (custom.js) is
   width-independent: it toggles body.mobile-menu-opened. */
@media (min-width: 768px) and (max-width: 1151px) {
    #masthead.site-header {
        min-height: 76px;
    }

    #site-navigation .menu-toggle {
        display: block;
    }

    #site-navigation .primary-menu-container.buddyx-desktop-menu {
        display: none;
    }

    #site-navigation .buddypress-icons-wrapper:not(.buddyx-mobile-icon) {
        display: none;
    }

    #site-navigation .buddypress-icons-wrapper.buddyx-mobile-icon {
        display: flex;
        margin-left: 0;
    }

    #site-navigation .primary-menu-container.buddyx-mobile-menu {
        display: block;
        background-color: #090a0a;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        width: 340px;
        transition: all 0.2s;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        transform: translateX(340px);
        border-left: 1px solid #292e2b;
    }

    body.mobile-menu-opened #site-navigation .primary-menu-container.buddyx-mobile-menu {
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
        transition: transform 0.3s;
    }
}


/* --- 9. Mobile: single compact row, ~72px --- */
@media (max-width: 767px) {
    #masthead.site-header {
        min-height: 72px;
        gap: 8px;
    }

    #masthead .site-branding {
        flex: 1 1 auto;
        min-width: 0;
    }

    .podxen-header-logo img {
        height: 38px;
        max-width: 160px;
    }

    #site-navigation {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 2px;
    }

    /* Re-assert against BuddyX's <=480px hide rule so the
       mobile control cluster never disappears. */
    #site-navigation .buddypress-icons-wrapper.buddyx-mobile-icon {
        display: flex;
        margin-left: 0;
    }

    #site-navigation .menu-icons-wrapper .search {
        margin: 0 3px;
    }

    #site-navigation .btn-login,
    #site-navigation .btn-register {
        font-size: 12px;
        gap: 5px;
        padding: 8px 6px;
    }
}

/* Small phones: keep everything on one line without crushing
   icons. The color-mode toggle still lives in the off-canvas
   menu, so hiding the header copy here loses no function. */
@media (max-width: 420px) {
    .podxen-header-logo img {
        height: 34px;
        max-width: 140px;
    }

    #site-navigation .bx-color-mode-toggle.bx-color-mode-toggle-header {
        display: none;
    }
}

/* =========================================================
   PODXEN PHASE 3 — DARK PAGE SURFACES
   -------------------------------------------------------
   BuddyX paints article cards, sidebar widgets, footer and
   copyright bar from a token cascade rooted in
   _custom-properties.css and applied via global.min.css:

     --color-theme-white-box   article cards, widgets, calendar
     --global-border-color     card/widget borders (aliases
                               --bx-color-border)
     --color-theme-body        page body wash
     --global-font-color       body copy (#505050 -> unreadable)
     --global-title-color      headings inside cards (undefined in
                               :root, falls back per-component)
     --color-link              entry titles, widget links
     --button-background-color BuddyX red (#c92a2b) buttons
     --color-copyright-bg      bottom bar
     --color-footer-*          footer title/content/link

   Retargeting the tokens covers the core templates AND every
   plugin-compat stylesheet that references them, so we only
   need component rules where BuddyX hard-codes a color or a
   token has no dark value of its own.
   Accent rule: chartreuse is reserved for links, hovers,
   active states and primary actions — never body copy.
   ========================================================= */

/* --- 1. Surface + text tokens: PodXen palette, both modes --- */
:root,
:root[data-bx-mode="light"],
:root[data-bx-mode="dark"] {
    --color-theme-body: #090a0a;
    --color-layout-boxed: #090a0a;
    --color-theme-white-box: #121414;
    --global-body-lightcolor: #050606;

    --global-border-color: #292e2b;
    --bx-color-border: #292e2b;
    --bx-color-border-strong: #363d38;
    --bx-color-divider: #292e2b;

    --global-font-color: #c0c5c1;
    --global-title-color: #f3f4f2;
    --color-h1: #f3f4f2;
    --color-h2: #f3f4f2;
    --color-h3: #f3f4f2;
    --color-h4: #f3f4f2;
    --color-h5: #f3f4f2;
    --color-h6: #f3f4f2;

    --color-link: #f3f4f2;
    --color-link-hover: #b6ff00;
    --color-link-active: #b6ff00;

    --color-block-bg-subtle: #191c1b;

    --button-background-color: #b6ff00;
    --button-background-hover-color: #c8ff40;
    --button-border-color: #b6ff00;
    --button-border-hover-color: #c8ff40;
    --button-text-color: #090a0a;
    --button-text-hover-color: #090a0a;

    --color-copyright-bg: #050606;
    --color-copyright-content: #8d9590;
    --color-copyright-link: #f3f4f2;
    --color-copyright-link-hover: #b6ff00;
    --color-footer-title: #f3f4f2;
    --color-footer-content: #c0c5c1;
    --color-footer-link: #c0c5c1;
    --color-footer-link-hover: #b6ff00;
}

/* --- 2. Page canvas --- */
body {
    background-color: #090a0a;
    color: #c0c5c1;
}

#page,
.site-content,
.content-area,
.site-main {
    background-color: transparent;
}

/* --- 3. Article cards --- */
.buddyx-article--default .buddyx-article,
.buddyx-article--list .buddyx-article,
.buddyx-article--masonry .buddyx-article {
    background: #121414;
    border-color: #292e2b;
}

.entry-title,
.entry-title a {
    color: #f3f4f2;
}

.entry-title a:hover,
.entry-title a:focus {
    color: #b6ff00;
}

.entry-meta,
.entry-meta a,
.entry-meta .posted-by,
.entry-meta .posted-on a,
.entry-content,
.entry-content p {
    color: #c0c5c1;
}

.entry-meta a:hover,
.entry-content a {
    color: #b6ff00;
}

/* Category eyebrow above the title */
.post-meta-category .post-meta-category__link,
.buddyx-article .cat-links,
.buddyx-article .cat-links a,
.entry-header .cat-links,
.entry-header .cat-links a {
    color: #8d9590;
}

.post-meta-category .post-meta-category__link:hover,
.buddyx-article .cat-links a:hover {
    color: #b6ff00;
}

/* --- 4. Sidebar widgets --- */
.widget-area .widget {
    background: #121414;
    border-color: #292e2b;
    color: #c0c5c1;
}

.widget-area .widget-title,
.widget-area .widget h2 {
    color: #f3f4f2;
}

.widget-area a {
    color: #f3f4f2;
}

.widget-area a:hover,
.widget-area a:focus {
    color: #b6ff00;
}

/* Search widget: dark field, chartreuse button.
   Extra class repetition beats WP core block-library
   background without resorting to !important. */
.wp-block-search.wp-block-search .wp-block-search__input,
input[type="search"].wp-block-search__input {
    background-color: #050606;
    border-color: #292e2b;
    color: #f3f4f2;
}

.wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
    color: #8d9590;
}

.wp-block-search__button,
.widget_search .search-submit,
.widget-area .search-form .search-submit {
    background: #b6ff00;
    border-color: #b6ff00;
    color: #090a0a;
}

.wp-block-search__button:hover,
.widget_search .search-submit:hover,
.widget-area .search-form .search-submit:hover {
    background: #c8ff40;
    border-color: #c8ff40;
    color: #090a0a;
}

/* --- 5. Footer + copyright bar --- */
.site-footer-wrapper,
.site-footer {
    background-color: #050606;
    border-top: 1px solid #292e2b;
    color: #c0c5c1;
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
    color: #f3f4f2;
}

.site-footer a {
    color: #c0c5c1;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #b6ff00;
}

.site-copyright,
.copyright-bar,
.site-info {
    background-color: #050606;
    border-top: 1px solid #292e2b;
    color: #8d9590;
}

.site-copyright a,
.copyright-bar a,
.site-info a {
    color: #f3f4f2;
}

.site-copyright a:hover,
.copyright-bar a:hover,
.site-info a:hover {
    color: #b6ff00;
}