/* ==========================================================================
   DAYZ MODCAST — BRAND STYLESHEET
   Single source of truth for the site's identity. Matches the brand kit and
   the OBS overlays / YouTube artwork in Documents\ModCast_Overlays.

   Load AFTER the page's own <style> block so these values win.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
    /* surfaces (dark -> light) */
    --ground:    #0E1013;   /* deepest, page base            */
    --charcoal:  #14181C;   /* primary background            */
    --panel:     #171B1F;   /* cards                         */
    --panel2:    #1C2126;   /* raised cards                  */
    --line:      rgba(255, 255, 255, 0.08);
    --line2:     rgba(255, 255, 255, 0.14);

    /* brand accents */
    --olive:        #6B8E23;  /* primary                     */
    --olive-bright: #96B33D;  /* primary, on dark            */
    --gold:         #E8B23A;  /* highlight / call-to-action  */
    --gold-deep:    #D29A25;
    --steel:        #6FA9C7;  /* Big G' ToolZ signature      */
    --rust:         #B23A2A;  /* warnings, "don't" states    */

    /* text */
    --bone:  #F4F5EF;
    --ink:   #EBEEE4;
    --sage:  #C9D1B0;
    --dim:   rgba(201, 209, 176, 0.62);
    --faint: rgba(201, 209, 176, 0.40);

    --outline: #0B0D10;
    --shadow:  0 16px 46px rgba(0, 0, 0, 0.55);

    /* --- legacy aliases -------------------------------------------------
       The pages were built against the old teal/purple scheme. Re-pointing
       these three carries every existing var() reference over to the brand
       with no per-element editing. */
    --bg-deep:      #14181C;  /* was #0F172A navy   */
    --text-primary: #EBEEE4;  /* was #E2E8F0        */
    --teal:         #96B33D;  /* was #00D4B4 -> olive  */
    --purple:       #F4F5EF;  /* was #7C3AED -> bone.
                                 NOT steel: steel is the Big G' ToolZ signature
                                 and is reserved for the ToolZ banner and
                                 /biggtoolz/ only. */
    --gold-legacy:  #E8B23A;  /* was #FBBF24        */
}

/* --- 2. Typography ------------------------------------------------------- */
body {
    background: var(--charcoal);
    color: var(--ink);
    font-family: 'Oswald', system-ui, sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Anton', 'Oswald', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.95;
    text-transform: uppercase;
}

/* technical / label voice */
.mono, code, pre, .eyebrow, .kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.eyebrow, .kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--olive-bright);
}

/* --- 3. Brand motifs ----------------------------------------------------- */

/* hazard stripe — the signature divider (see thumbnails / stream overlays) */
.hazard {
    height: 12px;
    border-radius: 2px;
    opacity: 0.6;
    background-image: repeating-linear-gradient(
        -45deg, var(--olive) 0 22px, #12140E 22px 44px);
}
.hazard.steel {
    opacity: 0.5;
    background-image: repeating-linear-gradient(
        -45deg, var(--steel) 0 22px, #12140E 22px 44px);
}
.hazard.gold {
    opacity: 0.55;
    background-image: repeating-linear-gradient(
        -45deg, var(--gold) 0 22px, #12140E 22px 44px);
}

/* stamped metal plate */
.plate {
    background: linear-gradient(158deg, #272D36, #14181C 80%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08),
                inset 0 0 0 2px rgba(0, 0, 0, 0.5);
}

/* film grit */
.grit {
    background-color: #181C20;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --- 4. Re-skin of the existing components ------------------------------- */
/* These hardcoded the old rgba() values, so var() alone can't reach them. */

.bg-grid {
    background-image:
        linear-gradient(to right,  rgba(107, 142, 35, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(107, 142, 35, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.glow-teal   { box-shadow: 0 0 20px rgba(150, 179, 61, 0.30), 0 0 40px rgba(150, 179, 61, 0.10); }
.glow-purple { box-shadow: 0 0 20px rgba(111, 169, 199, 0.35), 0 0 60px rgba(111, 169, 199, 0.18); }
.glow-gold   { box-shadow: 0 0 20px rgba(232, 178, 58, 0.40), 0 0 40px rgba(232, 178, 58, 0.20); }

.card-hover {
    border: 1px solid var(--line);
    background: var(--panel);
}
.card-hover:hover {
    transform: translateY(-6px);
    border-color: var(--olive);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

.btn-primary {
    background: var(--olive);
    color: var(--bone);
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover {
    background: var(--olive-bright);
    color: #11140E;
    box-shadow: 0 8px 25px rgba(107, 142, 35, 0.40);
}

.btn-gold {
    background: var(--gold);
    color: #16130C;
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(232, 178, 58, 0.35);
}
.btn-gold:hover {
    background: #F0C25C;
    box-shadow: 0 10px 30px rgba(232, 178, 58, 0.55);
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 6px 20px rgba(232, 178, 58, 0.35); }
    50%      { box-shadow: 0 8px 30px rgba(232, 178, 58, 0.55); }
}

nav {
    background: rgba(20, 24, 28, 0.95);
    border-bottom: 1px solid rgba(107, 142, 35, 0.28);
}
.nav-link {
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.nav-link::after     { background: var(--olive-bright); }
.nav-link:hover      { color: var(--olive-bright); }

/* hero wash — olive from above, steel from below, matching the brand kit */
.hero::before {
    background:
        radial-gradient(115% 75% at 15% 0%,   rgba(107, 142, 35, 0.14), transparent 55%),
        radial-gradient(120% 90% at 100% 100%, rgba(111, 169, 199, 0.10), transparent 55%);
}

.distressed { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85); }

/* The hero was pinned to min-height:90vh, which left a large empty band under
   the buttons on tall screens. Let it size to its content instead.
   The nav is position:fixed and ~73px tall, so the top padding must clear it
   or the wordmark gets clipped. !important is required — the page carries a
   Tailwind .pt-1 utility that would otherwise win. */
.hero {
    min-height: 0 !important;
    padding-top: clamp(96px, 9vw, 128px) !important;
    padding-bottom: clamp(28px, 4vw, 56px) !important;
}

/* footer column headings sit quieter than page headings — site-wide, so this
   needs no per-page editing */
/* !important is needed: the pages set these with an inline style="color:…",
   which outranks a plain stylesheet rule. */
footer h4 { color: var(--sage) !important; letter-spacing: 0.14em; }

/* --- 5. Big G' ToolZ ------------------------------------------------------
   The ONE place steel is allowed on the show's pages. It's what makes ToolZ
   read as "the product" rather than another section of the podcast. */
.toolz-banner {
    background: linear-gradient(135deg,
                rgba(232, 178, 58, 0.13),
                rgba(111, 169, 199, 0.16)) !important;
    border: 1px solid rgba(232, 178, 58, 0.45) !important;
}
.toolz-banner:hover { border-color: var(--steel) !important; }

/* Big Grampa stands in the ToolZ band. He belongs to the product, not the
   show, so he appears here and on /biggtoolz/ — not in the podcast sections. */
.toolz-portrait img {
    height: clamp(190px, 22vw, 260px);
    width: auto;
    display: block;
    margin: -28px 0 -28px 0;   /* let him break the band's padding slightly */
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.65));
}
@media (max-width: 767px) {
    .toolz-portrait img { height: 170px; margin: -16px auto -8px; }
}

/* --- 6a. "Not out yet" buttons -------------------------------------------
   Cards for tutorials that aren't published show one of these instead of a
   Watch button, so nobody clicks through to an empty player. */
.cta-locked {
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px 14px;
    border-radius: 6px;
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px dashed var(--line2);
    background: rgba(255, 255, 255, .04);
    color: var(--dim);
    cursor: default;
}
.cta-locked.cta-coming-soon { border-color: rgba(232,178,58,.5);  color: var(--gold); cursor: help; }
.cta-locked.cta-in-dev      { border-color: rgba(150,179,61,.5);  color: var(--olive-bright); cursor: help; }
.cta-locked.cta-notes       { border-style: solid; }
.cta-locked.cta-patreon {
    border: 1px solid var(--gold);
    background: rgba(232,178,58,.14);
    color: var(--gold);
    cursor: pointer;
}
.cta-locked.cta-patreon:hover { background: var(--gold); color: #16130C; }
.cta-locked:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }

/* the explanation that appears when one of them is clicked */
.cta-note {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    border-left: 3px solid var(--gold);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sage);
    text-transform: none;
    letter-spacing: 0;
}

/* parts inside the series pop-up */
.series-part-locked { opacity: .62; }
.series-part-status {
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .92em;
}

/* --- 6b. Floating Ko-fi button --------------------------------------------
   Stays visible while scrolling, on every page. Collapsed to a coffee disc,
   expands to show the label on hover/focus. */
.kofi-float {
    position: fixed;
    right: clamp(14px, 2.5vw, 28px);
    bottom: clamp(14px, 2.5vw, 28px);
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 18px;
    max-width: 56px;                 /* collapsed: just the cup */
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #16130C;
    text-decoration: none;
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 178, 58, 0.35);
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s ease, box-shadow 0.2s ease;
}
.kofi-float .cup {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
    margin-left: -4px;
}
.kofi-float:hover,
.kofi-float:focus-visible {
    max-width: 260px;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--gold);
    color: #16130C;
}
.kofi-float:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }

/* on small screens there is no hover, so keep it a plain tappable disc */
@media (max-width: 640px) {
    .kofi-float { height: 52px; padding: 0 15px; max-width: 52px; }
    .kofi-float:hover { max-width: 52px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kofi-float { transition: none; }
}

/* --- 6. Status ribbons ----------------------------------------------------
   These carried leftover stock blues from before the rebrand. */
.status-in-dev        { background: linear-gradient(135deg, #5E7130, #36411C) !important; }
.status-patreon-only  { background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important; color: #16130C !important; }