/*
==========================================================================
STAGE 9.3D8C1 — HOTBBWS4YOU SHARED SITE SHELL
==========================================================================

Design system:
Dark:
    black / charcoal
    gold framing
    red/pink highlights

Light:
    pure white
    warm white secondary surfaces
    gold framing
    red/pink highlights

Large decorative flame artwork remains disabled.
Small flame accents are permitted.
*/


/* ======================================================================
   TOKENS
   ====================================================================== */

:root,
html[data-theme="dark"] {
    --h4u-bg: #090909;
    --h4u-bg-soft: #111111;
    --h4u-panel: #151515;
    --h4u-panel-alt: #1b1b1b;

    --h4u-text: #f8f5ee;
    --h4u-muted: #c9c1b2;

    --h4u-gold: #d4af37;
    --h4u-gold-soft: #a98728;

    --h4u-red: #c5162e;
    --h4u-pink: #e64b86;

    --h4u-border:
        rgba(212, 175, 55, 0.72);

    --h4u-border-soft:
        rgba(212, 175, 55, 0.28);

    --h4u-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

    --h4u-header-bg:
        rgba(9, 9, 9, 0.97);
}

html[data-theme="light"] {
    --h4u-bg: #ffffff;
    --h4u-bg-soft: #fffaf2;
    --h4u-panel: #ffffff;
    --h4u-panel-alt: #fff8ec;

    --h4u-text: #18120d;
    --h4u-muted: #665a4b;

    --h4u-gold: #b58a18;
    --h4u-gold-soft: #8d6a13;

    --h4u-red: #c5162e;
    --h4u-pink: #d92d72;

    --h4u-border:
        rgba(181, 138, 24, 0.78);

    --h4u-border-soft:
        rgba(181, 138, 24, 0.28);

    --h4u-shadow:
        0 10px 30px rgba(82, 57, 15, 0.12);

    --h4u-header-bg:
        rgba(255, 255, 255, 0.98);
}


/* ======================================================================
   DOCUMENT FOUNDATION
   ====================================================================== */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

body.h4u-themed-page {
    margin: 0;

    background:
        var(--h4u-bg);

    color:
        var(--h4u-text);
}


/* ======================================================================
   HEADER
   ====================================================================== */

.h4u-site-header {
    position: relative;
    z-index: 100;

    width: 100%;

    background:
        var(--h4u-header-bg);

    border-bottom:
        1px solid var(--h4u-border);

    color:
        var(--h4u-text);
}

.h4u-site-header-inner {
    width:
        min(1680px, calc(100% - 40px));

    min-height: 72px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        26px;
}

.h4u-site-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    text-decoration:
        none;
}

.h4u-site-brand img {
    display:
        block;

    width:
        180px;

    max-width:
        100%;

    max-height:
        48px;
}

.h4u-brand-accent {
    font-size:
        1.3rem;

    line-height:
        1;
}


/* ======================================================================
   PRIMARY NAV
   ====================================================================== */

.h4u-site-nav {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}

.h4u-site-nav-link {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        36px;

    padding:
        6px 10px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    color:
        var(--h4u-text);

    text-decoration:
        none;

    font-size:
        0.88rem;

    font-weight:
        650;

    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease;
}

.h4u-site-nav-link:hover,
.h4u-site-nav-link:focus-visible {
    border-color:
        var(--h4u-border);

    background:
        var(--h4u-panel-alt);

    color:
        var(--h4u-gold);
}

.h4u-site-nav-link.is-active {
    border-color:
        var(--h4u-border);

    color:
        var(--h4u-gold);

    background:
        var(--h4u-panel-alt);
}


/* ======================================================================
   HEADER ACTIONS
   ====================================================================== */

.h4u-header-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;

    white-space:
        nowrap;
}

.h4u-login-link,
.h4u-account-link,
.h4u-logout-link {
    color:
        var(--h4u-text);

    text-decoration:
        none;

    font-size:
        0.88rem;

    font-weight:
        650;
}

.h4u-login-link:hover,
.h4u-account-link:hover,
.h4u-logout-link:hover {
    color:
        var(--h4u-gold);
}

.h4u-header-cta {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        7px 15px;

    border:
        1px solid var(--h4u-red);

    border-radius:
        999px;

    background:
        var(--h4u-pink);

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        0.84rem;

    font-weight:
        750;
}


/* ======================================================================
   REUSABLE PANELS
   ====================================================================== */

.h4u-panel {
    background:
        var(--h4u-panel);

    border:
        1px solid var(--h4u-border);

    border-radius:
        10px;

    box-shadow:
        var(--h4u-shadow);

    color:
        var(--h4u-text);
}

.h4u-panel-title {
    color:
        var(--h4u-gold);

    font-weight:
        750;
}


/* ======================================================================
   FOOTER
   ====================================================================== */

.h4u-site-footer {
    margin-top:
        36px;

    border-top:
        1px solid var(--h4u-border-soft);

    background:
        var(--h4u-bg-soft);

    color:
        var(--h4u-muted);
}

.h4u-site-footer-inner {
    width:
        min(1680px, calc(100% - 40px));

    min-height:
        84px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}

.h4u-footer-brand img {
    display:
        block;

    width:
        150px;

    max-height:
        42px;
}

.h4u-footer-copy {
    font-size:
        0.82rem;
}


/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (min-width:2560px) {

    .h4u-site-header-inner,
    .h4u-site-footer-inner {
        width:
            min(1920px, calc(100% - 64px));

        max-width:
            1920px;
    }

    .h4u-site-brand img {
        width:
            205px;
    }
}

@media (max-width:1180px) {

    .h4u-site-header-inner {
        grid-template-columns:
            auto
            1fr;

        gap:
            12px 18px;

        padding:
            12px 0;
    }

    .h4u-site-nav {
        grid-column:
            1 / -1;

        grid-row:
            2;

        justify-content:
            flex-start;
    }

    .h4u-header-actions {
        justify-self:
            end;
    }
}

@media (max-width:760px) {

    .h4u-site-header-inner,
    .h4u-site-footer-inner {
        width:
            min(100% - 24px, 100%);
    }

    .h4u-site-header-inner {
        display:
            flex;

        flex-wrap:
            wrap;
    }

    .h4u-site-brand img {
        width:
            150px;
    }

    .h4u-site-nav {
        order:
            3;

        width:
            100%;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            3px;
    }

    .h4u-header-actions {
        margin-left:
            auto;
    }

    .h4u-header-cta {
        display:
            none;
    }

    .h4u-site-footer-inner {
        min-height:
            100px;

        flex-direction:
            column;

        justify-content:
            center;
    }
}


/* =========================================================
   STAGE 9.3D8C2C6 CREATOR DIRECTORY
   Shared public creator-directory presentation.
   ========================================================= */

.creator-directory {
    width: min(1680px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 60px;
}

.creator-directory-heading {
    margin: 0 0 30px;
}

.creator-directory-heading h1 {
    margin: 0 0 10px;
    color: var(--h4u-text);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
}

.creator-directory-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--h4u-muted);
    line-height: 1.6;
}

.creator-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.creator-directory-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--h4u-border);
    border-radius: 18px;
    background: var(--h4u-panel);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .14);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.creator-directory-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            var(--h4u-red),
            var(--h4u-gold),
            var(--h4u-red)
        );
}

.creator-directory-card:hover {
    transform: translateY(-3px);
    border-color: var(--h4u-gold);
    box-shadow:
        0 17px 40px rgba(0, 0, 0, .20);
}

.creator-directory-photo-link {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--h4u-panel-alt);
    text-decoration: none;
}

.creator-directory-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.creator-directory-card:hover
.creator-directory-photo {
    transform: scale(1.025);
}

.creator-directory-info {
    padding: 17px 18px 21px;
}

.creator-directory-name,
.creator-directory-name:visited {
    display: inline-block;
    color: var(--h4u-text);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.creator-directory-name:hover {
    color: var(--h4u-gold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.creator-directory-handle {
    margin-top: 5px;
    color: var(--h4u-muted);
    font-size: .9rem;
}

.creator-directory-photo-link:focus-visible,
.creator-directory-name:focus-visible {
    outline: 3px solid var(--h4u-gold);
    outline-offset: 3px;
}

.creator-directory-empty {
    padding: 38px;
    border: 1px solid var(--h4u-border);
    border-radius: 18px;
    background: var(--h4u-panel);
    color: var(--h4u-text);
    text-align: center;
}

/*
 * Explicit light-mode finishing.
 * Keep the directory white and clean with gold/red framing.
 */

html[data-theme="light"]
.creator-directory-card {
    background: #ffffff;
    box-shadow:
        0 10px 28px rgba(32, 20, 22, .10);
}

html[data-theme="light"]
.creator-directory-photo-link {
    background: #f7f4f2;
}

html[data-theme="light"]
.creator-directory-card:hover {
    box-shadow:
        0 16px 34px rgba(32, 20, 22, .15);
}

html[data-theme="light"]
.creator-directory-empty {
    background: #ffffff;
}

/*
 * Explicit dark-mode finishing.
 */

html[data-theme="dark"]
.creator-directory-card {
    background: var(--h4u-panel);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, .32);
}

html[data-theme="dark"]
.creator-directory-card:hover {
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .42);
}

@media (max-width: 640px) {
    .creator-directory {
        width: min(100% - 20px, 1680px);
        padding-top: 24px;
        padding-bottom: 42px;
    }

    .creator-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .creator-directory-info {
        padding: 13px 13px 17px;
    }

    .creator-directory-name {
        font-size: 1rem;
    }
}

@media (max-width: 390px) {
    .creator-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 2560px) {
    .creator-directory {
        max-width: 1920px;
    }

    .creator-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* END STAGE 9.3D8C2C6 CREATOR DIRECTORY */


/* =========================================================
   BEGIN 9.3D8C2C6E LIGHT HEADER CONTRAST
   Exact shared-shell selectors verified by structural audit.
   ========================================================= */

/*
 * Header base.
 */

html[data-theme="light"] .h4u-site-header {
    color: #18120d;
}

/*
 * Normal primary navigation.
 * Use dark charcoal rather than red/pink for ordinary links.
 */

html[data-theme="light"] .h4u-site-nav-link,
html[data-theme="light"] .h4u-site-nav-link:link,
html[data-theme="light"] .h4u-site-nav-link:visited {
    color: #2b2020 !important;
    text-shadow: none !important;
}

/*
 * Navigation hover/focus.
 */

html[data-theme="light"] .h4u-site-nav-link:hover,
html[data-theme="light"] .h4u-site-nav-link:focus-visible {
    color: #8f0e2a !important;
    background: #fff0f2 !important;
    border-color: #b58a18 !important;
}

/*
 * Current page.
 */

html[data-theme="light"] .h4u-site-nav-link.is-active,
html[data-theme="light"] .h4u-site-nav-link.is-active:link,
html[data-theme="light"] .h4u-site-nav-link.is-active:visited {
    color: #8f0e2a !important;
    background: #fff0f2 !important;
    border-color: #b58a18 !important;
}

/*
 * Log-in / account utility links.
 */

html[data-theme="light"] .h4u-login-link,
html[data-theme="light"] .h4u-login-link:link,
html[data-theme="light"] .h4u-login-link:visited,
html[data-theme="light"] .h4u-account-link,
html[data-theme="light"] .h4u-account-link:link,
html[data-theme="light"] .h4u-account-link:visited,
html[data-theme="light"] .h4u-logout-link,
html[data-theme="light"] .h4u-logout-link:link,
html[data-theme="light"] .h4u-logout-link:visited {
    color: #2b2020 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .h4u-login-link:hover,
html[data-theme="light"] .h4u-login-link:focus-visible,
html[data-theme="light"] .h4u-account-link:hover,
html[data-theme="light"] .h4u-account-link:focus-visible,
html[data-theme="light"] .h4u-logout-link:hover,
html[data-theme="light"] .h4u-logout-link:focus-visible {
    color: #8f0e2a !important;
}

/*
 * Filled account/register CTA.
 * This is the important contrast correction:
 *
 * OLD visual:
 *     red text on pink
 *
 * NEW visual:
 *     white text on dark red
 */

html[data-theme="light"] .h4u-header-cta,
html[data-theme="light"] .h4u-header-cta:link,
html[data-theme="light"] .h4u-header-cta:visited {
    color: #ffffff !important;
    background: #a9102a !important;
    border-color: #820b20 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .h4u-header-cta:hover,
html[data-theme="light"] .h4u-header-cta:focus-visible {
    color: #ffffff !important;
    background: #820b20 !important;
    border-color: #650817 !important;
}

/*
 * Keyboard focus.
 */

html[data-theme="light"] .h4u-site-nav-link:focus-visible,
html[data-theme="light"] .h4u-login-link:focus-visible,
html[data-theme="light"] .h4u-account-link:focus-visible,
html[data-theme="light"] .h4u-logout-link:focus-visible,
html[data-theme="light"] .h4u-header-cta:focus-visible {
    outline: 3px solid #b58a18 !important;
    outline-offset: 2px;
}

/* END 9.3D8C2C6E LIGHT HEADER CONTRAST */


/* =========================================================
   BEGIN 9.3D8C2C6F LIGHT LOGO

   Dark theme:
       existing logo colors remain unchanged.

   Light theme:
       normal/white wordmark text becomes near-black.
       branded accent remains its existing accent color.
   ========================================================= */

html[data-theme="light"] .h4u-site-brand,
html[data-theme="light"] .h4u-site-brand:link,
html[data-theme="light"] .h4u-site-brand:visited {
    color: #18120d !important;
    text-shadow: none !important;
}

/*
 * Preserve the separately marked branded accent instead of
 * forcing the entire logo to black.
 */

html[data-theme="light"] .h4u-site-brand .h4u-brand-accent {
    color: var(--h4u-red) !important;
}

/*
 * Keep logo readable on hover/focus without changing its
 * identity.
 */

html[data-theme="light"] .h4u-site-brand:hover,
html[data-theme="light"] .h4u-site-brand:focus-visible {
    color: #000000 !important;
}

html[data-theme="light"] .h4u-site-brand:focus-visible {
    outline: 3px solid var(--h4u-gold);
    outline-offset: 4px;
}

/* END 9.3D8C2C6F LIGHT LOGO */


/* =========================================================
   BEGIN 9.3D8C2C6I THEME LOGO

   Dark:
       original logo.svg

   Light:
       logo-light.svg

   Large decorative flames remain OFF.
   ========================================================= */

.h4u-site-brand .h4u-logo-dark {
    display: block;
}

.h4u-site-brand .h4u-logo-light {
    display: none;
}

html[data-theme="light"] .h4u-site-brand .h4u-logo-dark {
    display: none;
}

html[data-theme="light"] .h4u-site-brand .h4u-logo-light {
    display: block;
}

/* END 9.3D8C2C6I THEME LOGO */

/* =========================================================
   BEGIN 9.3D8C2C6M DARK BUTTON CONTRAST

   Dark-mode public/shared actions only.

   Primary:
       white text
       deep red surface
       gold border

   Secondary:
       warm white text
       charcoal surface
       gold border

   Generic action:
       white text
       dark red/pink surface
       gold border

   Light mode is intentionally untouched.
   ========================================================= */

html[data-theme="dark"] .h4u-header-cta,
html[data-theme="dark"] .h4u-header-cta:link,
html[data-theme="dark"] .h4u-header-cta:visited {
    color: #ffffff !important;
    background: #a9102a !important;
    border-color: #d4af37 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .h4u-header-cta:hover,
html[data-theme="dark"] .h4u-header-cta:focus-visible {
    color: #ffffff !important;
    background: #c5162e !important;
    border-color: #e0bd4f !important;
}


/*
 * Standard public action buttons.
 */

html[data-theme="dark"] .button,
html[data-theme="dark"] a.button,
html[data-theme="dark"] button:not(.site-theme-toggle) {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #a9102a,
            #c5162e
        ) !important;
    border: 1px solid #d4af37 !important;
    text-shadow: none !important;
}


/*
 * Explicit primary actions.
 */

html[data-theme="dark"] .button.primary,
html[data-theme="dark"] a.button.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .cta.primary,
html[data-theme="dark"] a.cta.primary {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #a9102a,
            #c5162e
        ) !important;
    border: 1px solid #d4af37 !important;
    text-shadow: none !important;
}


/*
 * Secondary actions remain visually secondary.
 */

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] a.button.secondary,
html[data-theme="dark"] button.secondary {
    color: #f8f5ee !important;
    background: #1b1b1b !important;
    border: 1px solid #a98728 !important;
    text-shadow: none !important;
}


/*
 * Home page CTA base.
 */

html[data-theme="dark"] .cta,
html[data-theme="dark"] a.cta {
    color: #ffffff !important;
    border-color: #d4af37 !important;
}


/*
 * Hover/focus for primary and generic actions.
 */

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] a.button:hover,
html[data-theme="dark"] button:not(.site-theme-toggle):hover,
html[data-theme="dark"] .cta.primary:hover,
html[data-theme="dark"] a.cta.primary:hover {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #c5162e,
            #e31b36
        ) !important;
    border-color: #e0bd4f !important;
}


/*
 * Keep secondary hover dark rather than turning red.
 */

html[data-theme="dark"] .button.secondary:hover,
html[data-theme="dark"] a.button.secondary:hover,
html[data-theme="dark"] button.secondary:hover {
    color: #ffffff !important;
    background: #252525 !important;
    border-color: #d4af37 !important;
}


/*
 * Keyboard accessibility.
 */

html[data-theme="dark"] .button:focus-visible,
html[data-theme="dark"] button:not(.site-theme-toggle):focus-visible,
html[data-theme="dark"] .cta:focus-visible,
html[data-theme="dark"] .h4u-header-cta:focus-visible {
    outline: 3px solid #d4af37 !important;
    outline-offset: 2px;
}

/* END 9.3D8C2C6M DARK BUTTON CONTRAST */

/* SEARCH PAGE BUTTON CONTRAST FINAL */
html[data-theme="light"] body a.button[href="/search.php"],
html[data-theme="light"] body .tag-result-card a.button,
html[data-theme="light"] body #open-tag-popup,
html[data-theme="light"] body #clear-selected-tags {
  background: #fff7e8 !important;
  color: #8f0e2a !important;
  border: 1px solid #d4af37 !important;
}
html[data-theme="light"] body #content-search-q ~ button[type="submit"],
html[data-theme="light"] body #apply-selected-tags {
  background: #a9102a !important;
  color: #ffffff !important;
  border: 1px solid #d4af37 !important;
}
html[data-theme="light"] body a.button[href="/search.php"]:hover,
html[data-theme="light"] body .tag-result-card a.button:hover,
html[data-theme="light"] body #open-tag-popup:hover,
html[data-theme="light"] body #clear-selected-tags:hover {
  background: #f8e8cd !important;
  color: #720b22 !important;
}