/* ==========================================================================
   STG Global — Loads on every page
   --------------------------------------------------------------------------
   Greenshift Stylebook token classes, Brand Manager overrides, and Header.
   ========================================================================== */

/* --- Greenshift Stylebook Token Classes --- */
.GlassEffect { backdrop-filter: blur(var(--glass-blur)); background-color: var(--glass-color); }
.stg-overlay-dark { background: var(--color-stg-overlay-dark-bg); }
.stg-background-gradient-1 { background: var(--color-stg-background-gradient-1-bg); }
.stg-card-glass-effect { background: var(--color-stg-card-glass-effect-bg); backdrop-filter: var(--effect-stg-card-glass-effect-blur); border-radius: var(--spacing-stg-card-glass-effect-radius); padding: var(--spacing-stg-card-glass-effect-padding); }
.stg-header-text { line-height: var(--size-stg-header-text-line-height); color: var(--color-stg-overlay-dark-bg); }
.gs-thumbsminus, .gs-thumbsplus {border:hidden !important}
/* --- Brand Manager Content Group Overrides --- */
.stg-more-about-brands-block { background: var(--stg-void) !important; }
.stg-more-about-brand { background: var(--stg-void) !important; }
.stg-more-about-brand-title { color: var(--stg-text-muted) !important; }
.stg-brand-content-group { background: var(--stg-surface) !important; border: 1px solid var(--stg-border-color) !important; border-radius: var(--stg-radius-xl) !important; }
.stg-brand-content-group-header { border-bottom-color: var(--stg-border-color) !important; }
.stg-brand-content-group-title { color: var(--stg-text-secondary) !important; }
.stg-collapse-toggle { color: var(--stg-text-muted) !important; background: var(--stg-elevated) !important; border: 1px solid var(--stg-border-color) !important; border-radius: var(--stg-radius-sm) !important; }
.stg-collapse-toggle:hover { border-color: var(--stg-electric-purple) !important; color: var(--stg-text-primary) !important; }
.stg-view-all-link { color: var(--stg-signal-green) !important; border-color: var(--stg-border-color) !important; background: transparent !important; }
.stg-view-all-link:hover { border-color: var(--stg-signal-green) !important; background: rgba(0, 208, 132, 0.08) !important; }
.stg-brand-content-group-content { background: var(--stg-surface) !important; }
.stg-content-type-list { background: var(--stg-elevated) !important; border: 1px solid var(--stg-border-color) !important; border-radius: var(--stg-radius-lg) !important; }
.stg-content-type-list-title { color: var(--stg-electric-purple) !important; border-bottom-color: var(--stg-border-color) !important; }
.stg-content-type-list-items { background: transparent !important; list-style: none !important; }
.stg-content-type-list-item { background: transparent !important; border-bottom-color: var(--stg-border-color) !important; }
.stg-content-item-thumbnail img { border-radius: var(--stg-radius-lg) !important; }
.stg-content-item-title { color: var(--stg-text-primary) !important; text-decoration: none !important; }
.stg-content-item-title:hover { color: var(--stg-signal-green) !important; }
.stg-content-item-date { color: var(--stg-text-muted) !important; }


/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Glass-morphism sticky header with logo, navigation, search, and CTA.
   BEM prefix: .stg-header__*
   ========================================================================== */

/* --- Header container --- */

.stg-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(13, 13, 26, 0.85) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--stg-border-color) !important;
    box-shadow: var(--stg-shadow-sm);
    padding: 0 clamp(1rem, 3vw, 2rem) !important;
    min-height: 64px;
    align-items: center !important;
    gap: 1.5rem !important;
}

.stg-header.gs-sticky-header {
    transition: transform 300ms ease, box-shadow 300ms ease !important;
}

.stg-header.gs-sticky-header-down {
    transform: translateY(-100%) !important;
}

.stg-header.gs-sticky-header-up {
    transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .stg-header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(13, 13, 26, 0.97) !important;
    }
}

.stg-header > * + * {
    margin-top: 0 !important;
}

/* --- Logo --- */

.stg-header__logo {
    flex-shrink: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.stg-header__logo-img {
    margin: 0 !important;
}

.stg-header__logo-img img {
    max-width: 240px !important;
    width: auto !important;
    height: auto !important;
    max-height: 40px !important;
    object-fit: contain !important;
    display: block !important;
}

.stg-header__logo-img a {
    display: block !important;
    line-height: 0 !important;
    text-decoration: none !important;
}

/* --- Navigation --- */

.stg-header__nav {
    flex: 1 !important;
    justify-content: flex-end !important;
    gap: 0.25rem !important;
}

.stg-header__nav .wp-block-navigation-item__content {
    text-transform: uppercase !important;
    font-family: MonaSansVar, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--stg-text-secondary) !important;
    padding: 8px 12px !important;
    transition: color var(--stg-transition-fast) !important;
    text-decoration: none !important;
}

.stg-header__nav .wp-block-navigation-item__content:hover {
    color: var(--stg-signal-green) !important;
    text-decoration: none !important;
}

.stg-header__nav .current-menu-item > .wp-block-navigation-item__content,
.stg-header__nav .current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--stg-signal-green) !important;
}

.stg-header__nav .wp-block-navigation__submenu-icon {
    color: var(--stg-text-muted) !important;
    width: 10px !important;
    height: 10px !important;
}

.stg-header__nav .wp-block-navigation__submenu-container {
    background: rgba(26, 26, 46, 0.95) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--stg-border-color) !important;
    border-radius: var(--stg-radius-lg) !important;
    box-shadow: var(--stg-shadow-lg) !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
}

.stg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--stg-text-secondary) !important;
    padding: 8px 16px !important;
    transition: color var(--stg-transition-fast),
                background var(--stg-transition-fast) !important;
}

.stg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--stg-signal-green) !important;
    background: var(--stg-elevated) !important;
}

/* --- Search --- */

.stg-header__actions {
    flex-shrink: 0 !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.stg-header__actions .gspbsearch-box {
    flex-shrink: 0 !important;
}

.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096 .gspbsearch_btn svg,
.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096 .gspbsearch_btn svg path {
    fill: var(--stg-text-primary) !important;
    transition: fill 200ms ease !important;
}

.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096 .gspbsearch_btn:hover svg,
.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096 .gspbsearch_btn:hover svg path {
    fill: var(--stg-signal-green) !important;
}

.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096.expanded .gspbsearch_btn svg,
.stg-header .stg-header__actions .gspb-search-gsbp-2ac6096.expanded .gspbsearch_btn svg path {
    fill: var(--stg-signal-green) !important;
}

/* Remove any Greenshift background/circle on the search block itself */
.stg-header__actions .gspb-search-gsbp-2ac6096,
.stg-header__actions .gspb-search-gsbp-2ac6096 .gspbsearch-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.stg-header__actions .gspbsearch_btn {
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.stg-header__actions .gspbsearch_btn .gspbsearch_btn_icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.stg-header__actions .gspbsearch_btn svg {
    vertical-align: middle !important;
    display: block !important;
}

.stg-header__actions .gspbsearch_input {
    background: var(--stg-elevated) !important;
    color: var(--stg-text-primary) !important;
    border-color: var(--stg-border-color) !important;
    font-family: MonaSansVar, system-ui, sans-serif !important;
    font-size: 14px !important;
    left: auto !important;
    right: 0 !important;
}

.stg-header__actions .gspb-search-gsbp-2ac6096.expanded .gspbsearch_input {
    left: auto !important;
    right: 0 !important;
}

.stg-header__actions .gspbsearch_input::placeholder {
    color: var(--stg-text-muted) !important;
}

.stg-header__actions .gspbsearch_input:focus {
    border-color: var(--stg-signal-green) !important;
    box-shadow: 0 0 0 2px rgba(0, 208, 132, 0.2) !important;
    outline: 2px solid transparent !important;
}

.stg-header__actions .gspbsearch_results_items {
    background: var(--stg-surface) !important;
    border: 1px solid var(--stg-border-color) !important;
    border-radius: var(--stg-radius-lg) !important;
    box-shadow: var(--stg-shadow-lg) !important;
    left: auto !important;
    right: 0 !important;
}

.stg-header__actions .gspbsearch_results_items .gsbp-4aa8509 {
    border-bottom-color: var(--stg-border-color) !important;
    padding: 16px 20px !important;
}

.stg-header__actions .gspbsearch_results_items h2.gspb-dynamic-title-element {
    color: var(--stg-text-primary) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

.stg-header__actions .gspbsearch_results_items h2.gspb-dynamic-title-element a {
    color: var(--stg-text-primary) !important;
    text-decoration: none !important;
}

.stg-header__actions .gspbsearch_results_items h2.gspb-dynamic-title-element a:hover {
    color: var(--stg-signal-green) !important;
}

.stg-header__actions .gspbsearch_results_items .gspb_meta_value {
    color: var(--stg-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.stg-header__actions .gspbsearch_results_items {
    color: var(--stg-text-secondary) !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
}


/* --- Brand Index + CTA buttons --- */

.stg-header__brand-index .wp-block-button__link {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: MonaSansVar, system-ui, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 8px 20px !important;
    border: 1.5px solid var(--stg-electric-purple) !important;
    border-radius: var(--stg-radius-full) !important;
    color: var(--stg-electric-purple) !important;
    background: transparent !important;
    transition: background var(--stg-transition-fast),
                color var(--stg-transition-fast),
                box-shadow var(--stg-transition-fast) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.stg-header__brand-index .wp-block-button__link:hover {
    background: var(--stg-electric-purple) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(123, 97, 255, 0.3) !important;
    text-decoration: none !important;
}

.stg-header__cta .wp-block-button__link {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: MonaSansVar, system-ui, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 8px 20px !important;
    border: 1.5px solid var(--stg-signal-green) !important;
    border-radius: var(--stg-radius-full) !important;
    color: var(--stg-signal-green) !important;
    background: transparent !important;
    transition: background var(--stg-transition-fast),
                color var(--stg-transition-fast),
                box-shadow var(--stg-transition-fast) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.stg-header__cta .wp-block-button__link:hover {
    background: var(--stg-signal-green) !important;
    color: var(--stg-void) !important;
    box-shadow: 0 0 16px rgba(0, 208, 132, 0.3) !important;
    text-decoration: none !important;
}

/* --- Header responsive --- */

@media (max-width: 1100px) {
    .stg-header {
        padding: 0 clamp(0.75rem, 2vw, 1.25rem) !important;
        min-height: 56px;
        gap: 1rem !important;
    }

    .stg-header__logo-img img {
        max-width: 200px !important;
        max-height: 34px !important;
    }

    .stg-header__nav .wp-block-navigation-item__content {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}

@media (max-width: 800px) {
    .stg-header {
        min-height: 52px;
        gap: 0.75rem !important;
    }

    .stg-header__logo {
        margin-right: auto !important;
    }

    .stg-header__logo-img img {
        max-width: 170px !important;
        max-height: 30px !important;
    }

    .stg-header__cta,
    .stg-header__brand-index {
        display: none !important;
    }

    .stg-header__nav {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    .stg-header__actions {
        order: 1 !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 575px) {
    .stg-header__logo-img img {
        max-width: 150px !important;
        max-height: 28px !important;
    }
}


/* --- Mobile menu overlay --- */
.wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(13, 13, 26, 0.98) !important;
    z-index: 100000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
    background: transparent !important;
    padding: 4rem 2rem 2rem !important;
    flex: 1 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
    text-transform: none !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 14px 0 !important;
    color: var(--stg-text-primary) !important;
    border-bottom: 1px solid var(--stg-border-color) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
    color: var(--stg-signal-green) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
    color: var(--stg-text-primary) !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    z-index: 100001 !important;
}

.stg-header__nav .wp-block-navigation__responsive-container-open {
    color: var(--stg-text-primary) !important;
}

.stg-header__nav .wp-block-navigation__responsive-container-open:hover {
    color: var(--stg-signal-green) !important;
}