/* =============================================================
   HotZeg — Theme Switcher (3 design variants).
   Only re-paints customer-facing pages by overriding CSS vars.
   Admin pages remain Maison-only.
   ============================================================= */

/* -----------------------------------------------------------
   HEAT LAB — dark, edgy, mono-pill
----------------------------------------------------------- */
html[data-theme="heatlab"] {
    --bg: #0c0c10;
    --paper: #16161d;
    --ink: #f5f3ee;
    --ink-soft: rgba(245, 243, 238, 0.65);
    --rule: rgba(255, 255, 255, 0.10);
    --magenta: #ea418e;
    --teal: #2ad7c2;
    --radius: 16px;
    --serif: 'Playfair Display', Georgia, serif;
}
/* Dark theme: invert orange/cream warn pills for readability */
html[data-theme="heatlab"] .cat-warn {
    background: rgba(234, 65, 142, 0.10);
    border-color: rgba(234, 65, 142, 0.45);
    color: #ffd1e3;
}
html[data-theme="heatlab"] .cat-card-draft {
    background: rgba(234, 179, 8, 0.18);
    color: #fde68a;
}

/* -----------------------------------------------------------
   GLOBAL BURN — bold comic, navy + amber
----------------------------------------------------------- */
html[data-theme="globalburn"] {
    --bg: #0a0f1e;
    --paper: #131a30;
    --ink: #f5f0e3;
    --ink-soft: rgba(245, 240, 227, 0.65);
    --rule: rgba(245, 240, 227, 0.18);
    --magenta: #f9b233;
    --teal: #ff5d3b;
    --radius: 0px;
    --serif: 'Playfair Display', Georgia, serif;
}
html[data-theme="globalburn"] .cat-warn {
    background: rgba(249, 178, 51, 0.12);
    border-color: rgba(249, 178, 51, 0.45);
    color: #fde7b0;
}
html[data-theme="globalburn"] .cat-card-draft {
    background: rgba(255, 93, 59, 0.18);
    color: #ffd2c1;
}
/* Sharp, bold buttons for the comic vibe */
html[data-theme="globalburn"] .cat-btn--primary {
    box-shadow: 4px 4px 0 var(--ink);
    border: 2px solid var(--ink);
}
html[data-theme="globalburn"] .cat-btn--primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

/* -----------------------------------------------------------
   DARK THEME CONTRAST FIXES (Heat Lab + Global Burn)
   These three blocks have hardcoded LIGHT backgrounds that don't
   follow the theme swap, but their text color uses var(--ink).
   In dark themes --ink becomes light cream → light-on-light = invisible.
   Fix: override their text/bg in dark themes only.
----------------------------------------------------------- */

/* 1) FOOTER ---------------------------------------------------
   .cat-foot uses background: var(--ink) → becomes cream in dark themes.
   But inner text uses rgba(255,255,255, X) hardcoded → invisible on cream.
   In dark themes we must invert the inner text colors to follow --paper. */
html[data-theme="heatlab"] .cat-foot h4,
html[data-theme="globalburn"] .cat-foot h4 {
    color: color-mix(in srgb, var(--paper) 60%, transparent);
}
html[data-theme="heatlab"] .cat-foot p,
html[data-theme="globalburn"] .cat-foot p {
    color: color-mix(in srgb, var(--paper) 86%, transparent);
}
html[data-theme="heatlab"] .cat-foot-pillars,
html[data-theme="globalburn"] .cat-foot-pillars {
    color: color-mix(in srgb, var(--paper) 60%, transparent) !important;
}
html[data-theme="heatlab"] .cat-foot-bottom,
html[data-theme="globalburn"] .cat-foot-bottom {
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    border-top-color: color-mix(in srgb, var(--paper) 12%, transparent);
}
html[data-theme="heatlab"] .cat-foot-grid,
html[data-theme="globalburn"] .cat-foot-grid {
    border-bottom-color: color-mix(in srgb, var(--paper) 12%, transparent);
}
html[data-theme="heatlab"] .cat-foot a:hover,
html[data-theme="globalburn"] .cat-foot a:hover {
    color: var(--magenta);
}

/* 2) FEATURED PRICE CHIP --------------------------------------
   .m-pick-price and .sd-price-pill both use
   background: var(--paper-warm, #FAF5EC) — always cream.
   In dark theme, --ink (text color) becomes cream → invisible.
   Re-define the chip with a dark-friendly background and keep --ink text. */
html[data-theme="heatlab"] .m-pick-price,
html[data-theme="globalburn"] .m-pick-price,
html[data-theme="heatlab"] .sd-price-pill,
html[data-theme="globalburn"] .sd-price-pill {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
    color: var(--ink);
}

/* 3) HERO POLAROID CAPTION ------------------------------------
   .m-hero-card has background: #fdfaf2 hardcoded (always cream).
   Caption uses var(--ink) → invisible in dark themes.
   Force a dark caption regardless of theme since polaroid bg is fixed. */
html[data-theme="heatlab"] .m-hero-card figcaption,
html[data-theme="globalburn"] .m-hero-card figcaption {
    color: #1f1b16;
}



/* -----------------------------------------------------------
   THEME SWITCHER — fixed top-right, always readable
   Uses its own palette (independent of theme) for guaranteed contrast.
----------------------------------------------------------- */
.hz-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(12, 12, 16, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
.hz-theme-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(8, 6, 4, 0.65);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* Push sticky header below the theme bar so they stack cleanly */
.cat-top { top: var(--hz-themebar-h) !important; }
.hz-theme-switch__label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0 10px 0 12px;
    user-select: none;
    line-height: 1;
}
.hz-theme-switch__btn {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.72);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 200ms ease, background 200ms ease, transform 200ms ease;
    line-height: 1;
}
.hz-theme-switch__btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
.hz-theme-switch__btn[aria-pressed="true"] {
    background: #ffffff;
    color: #0c0c10;
    font-weight: 700;
}
.hz-theme-switch__btn[aria-pressed="true"]:hover {
    background: #ffffff;
    color: #0c0c10;
}
@media (max-width: 640px) {
    .hz-theme-bar { padding: 4px 6px; }
    .hz-theme-switch__label { display: none; }
    .hz-theme-switch__btn { padding: 6px 10px; font-size: 10px; }
    /* Mobile: theme-bar is slightly shorter — JS will refresh --hz-themebar-h
       on resize so all sticky offsets follow automatically. */
}
@media print {
    .hz-theme-switch { display: none; }
}

/* =============================================================
   LANG SWITCHER — discrete pill group inside .cat-actions
============================================================= */
.hz-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--rule, rgba(0,0,0,0.14));
    border-radius: 999px;
    background: transparent;
    margin-right: 4px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
.hz-lang-switch__btn {
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft, rgba(0,0,0,0.6));
    border-radius: 999px;
    line-height: 1;
    transition: background 160ms ease, color 160ms ease;
    text-decoration: none;
}
.hz-lang-switch__btn:hover {
    color: var(--ink);
    background: var(--bg, rgba(0,0,0,0.04));
}
.hz-lang-switch__btn.is-active {
    background: var(--ink);
    color: var(--paper, #fff);
}
.hz-lang-switch__btn.is-active:hover {
    color: var(--paper, #fff);
}
@media (max-width: 640px) {
    .hz-lang-switch__btn { padding: 4px 7px; font-size: 9.5px; }
}