/* ════════════════════════════════════════════════════════════════
   FMF GLOBAL — palette, film grain, card glows, flicker, back-to-top
   Loaded on every page of the site.
   ════════════════════════════════════════════════════════════════ */

/* ── FMF Palette — single source of truth ───────────────────────────
   Defined here in fmf-global.css because this file loads on EVERY page.
   All page-specific CSS files (forum, buddyboss, homepage, etc.) rely
   on these variables. Do NOT duplicate :root vars in other files.     */
:root {
    --fm-black:  #0A0804;
    --fm-dark:   #1A1A1A;
    --fm-paper:  #F2E8D5;
    /* RED FAMILY — 2026-05-06 sitewide pop pass: lifted from Hammer
       dried-blood #8B0000 to drugstore-monster-rag #E8362A. Cascade
       ripples to every var(--fm-red) reference site-wide. Surfaces that
       want gravitas can opt back into --fm-red-dark (#6b0000). Surfaces
       that explicitly want the popping red still call --fm-red-bright,
       which is now equal to --fm-red but kept for semantic clarity. */
    --fm-red:    #E8362A;
    --fm-amber:  #C9860A;
    --fm-muted:  #B5AC9C;
    /* Bumped 2026-05-05 from #9A8F7E for AAA contrast on --fm-black bg
       (9.0:1) and AA strong on --fm-dark bg (6.2:1). Per readability
       audit XC-4 — single-var change ripples to ~50 selectors that were
       silently failing AA on lighter dark backgrounds. */
    --fm-border: #2A2015;
    --fm-bone:   #E8DCC8;
    --fm-red-hover: #ff5a4d;  /* lifted from #a00000 — must stay ABOVE the new base #E8362A */
    --fm-red-dark:  #6b0000;
    --fm-red-bright: #e8362a;

    /* CGC label-type palette — mirrors physical CGC slab label colors.
       Powers the slab-band component (archive cards + single-book badge +
       fm_issue sibling-CGC panel) and the Label Types education panel
       swatches on the Collection archive. */
    --fm-cgc-universal: #2A52BE;  /* CGC blue */
    --fm-cgc-signature: #D4A017;  /* CGC yellow (gold-leaning) */
    --fm-cgc-qualified: #2E8B57;  /* CGC green */
    --fm-cgc-restored:  #6A0DAD;  /* CGC purple */
}

/* ── Shared buttons ──────────────────────────────────────────────
   Used across homepage, community, CL, collection, etc.
   Defined here so every page gets them without duplication.       */
.fmf-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease,
                border-color 200ms ease, box-shadow 200ms ease;
}
.fmf-btn-primary {
    background: var(--fm-red);
    color: #fff;
    border-color: var(--fm-red);
}
.fmf-btn-primary:hover {
    background: var(--fm-red-hover);
    border-color: var(--fm-red-hover);
    color: #fff;
    box-shadow: 0 0 16px rgba(139,0,0,0.55);
    text-decoration: none;
}
.fmf-btn-outline {
    background: transparent;
    color: var(--fm-bone);
    border-color: var(--fm-bone);
}
.fmf-btn-outline:hover {
    background: rgba(232,220,200,0.1);
    color: #fff;
    border-color: #fff;
    text-decoration: none;
}
.fmf-btn-ghost {
    background: transparent;
    color: var(--fm-bone);
    border-color: var(--fm-muted);
}
.fmf-btn-ghost:hover {
    color: #fff;
    border-color: #fff;
    text-decoration: none;
}

/* ── Film grain overlay ──────────────────────────────────────────
   Pure-CSS SVG noise tile, position:fixed so it floats above
   everything. pointer-events:none so it never blocks clicks.       */
.fmf-grain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
}
@media (prefers-reduced-motion: reduce) {
    .fmf-grain { display: none; }
    [class*="-hero-bg"] { animation: none !important; }
}

/* Disable Ken Burns on mobile — saves battery and avoids jank */
@media (max-width: 640px) {
    [class*="-hero-bg"] {
        animation: none !important;
        transform: scale(1.05);
    }
}

/* ── Shared breadcrumbs ─────────────────────────────────────────── */
.fmf-breadcrumbs {
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
    color: var(--fm-muted);
    background: var(--fm-dark);
    border-bottom: 1px solid var(--fm-border);
}
.fmf-breadcrumbs a {
    color: var(--fm-amber);
    text-decoration: none;
}
.fmf-breadcrumbs a:hover { text-decoration: underline; }
.fmf-breadcrumbs .fmf-bc-sep { margin: 0 0.4em; color: #555; }

/* ── Flicker keyframes ───────────────────────────────────────────
   Applied on hover to card glows and the back-to-top button.
   8-second cycle so it feels occasional, not distracting.          */
@keyframes fmf-flicker {
    0%, 88%, 100% { opacity: 1; }
    90%           { opacity: 0.82; }
    92%           { opacity: 1; }
    95%           { opacity: 0.88; }
}

/* ── Card hover — red glow ───────────────────────────────────────
   Applies to Cover Library cards, Collection cards, Issue of the
   Day cover link, and About resource cards.                        */
.fmf-issue-card,
.fmf-book-card,
.fmf-iotd-link,
.fmf-resource-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.fmf-issue-card:hover,
.fmf-book-card:hover,
.fmf-iotd-link:hover,
.fmf-resource-card:hover {
    box-shadow: 0 0 12px rgba(139, 0, 0, 0.6);
    animation: fmf-flicker 8s infinite;
}

/* ── Back-to-top button ──────────────────────────────────────────
   Hidden until JS adds .is-visible after 400px scroll.
   44×44px meets mobile touch target minimum.                       */
.fmf-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 28px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fm-dark);
    border: 1px solid var(--fm-red);
    color: var(--fm-bone);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, box-shadow 200ms ease;
}
.fmf-back-to-top.is-visible {
    opacity: 0.6;
    pointer-events: auto;
}
/* Yield to open Slab Lab autopsy panels — fixed button was eating text on phone. */
body.fmf-autopsy-open .fmf-back-to-top {
    opacity: 0;
    pointer-events: none;
}
/* Translucent at rest so it doesn't fully obscure text underneath; lifts to
   full opacity on hover/focus + when actively touched on mobile. */
.fmf-back-to-top.is-visible:hover,
.fmf-back-to-top.is-visible:focus,
.fmf-back-to-top.is-visible:focus-visible,
.fmf-back-to-top.is-visible:active {
    opacity: 1;
    color: var(--fm-bone);
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
    animation: fmf-flicker 8s infinite;
    outline: none;
}
@media (max-width: 480px) {
    .fmf-back-to-top {
        bottom: 20px;
        right: 16px;
    }
}

/* ── Login button — hide for logged-in users ─────────────────────────
   WordPress adds .logged-in to <body> when authenticated.
   The Login button is the only .header-button-inner-wrap in our header.
   Logged-out visitors still see it normally.                           */
body.logged-in .header-button-inner-wrap {
    display: none !important;
}

/* ── Header brand colors ─────────────────────────────────────────── */
body .fmf-name-line1 {
    color: var(--fm-red-bright) !important;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0 10px rgba(232, 54, 42, 0.55), 0 0 1px rgba(0, 0, 0, 0.7);
}  /* Famous Monsters — vivid red, halo glow (matches mission strip + CL hero) */
body .fmf-name-line2 { color: var(--fm-bone) !important; }  /* Forryever — bone           */
body .fmf-tagline    { color: var(--fm-bone) !important; }  /* Dying to Keep... — bone    */

/* ── Video logo → home link ─────────────────────────────────────── */
.fmf-logo-video-link {
    display: block;
    text-decoration: none;
    line-height: 0;
}
.fmf-logo-video-link:hover { text-decoration: none; }

/* ── Mobile header background + brand sizing ────────────────────── */
/* Kadence drops the row background color at mobile AND wraps the
   header in containers that have side padding. Force the dark
   rectangle to span edge-to-edge of the viewport, then re-apply
   breathing room INSIDE on the content sections so the avatar +
   hamburger don't crash to the screen edge. */
@media (max-width: 1024px) {
    #masthead,
    #masthead > div,
    #masthead .site-container,
    .site-header-wrap,
    .site-header-inner-wrap,
    .site-main-header-inner-wrap,
    .main-header-row-container,
    .main-header-row-container-inner,
    .site-header-row-container-inner,
    .site-header-row {
        background-color: var(--fm-dark) !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* Restore breathing room ON THE CONTENT, not the wrapper.
       Avatar carries a 3px red border + soft box-shadow; the wrapper
       padding has to be wide enough to clear that ring without clipping
       on phones with a tight safe-area-inset (Z-Flip5, etc). */
    .site-header-main-section-left,
    .site-header-main-section-right,
    .site-header-main-section-center {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    .site-header-main-section-left .fmf-header-brand {
        padding-left: 0.25rem !important;
    }
    .site-header-main-section-left {
        display: flex !important;
        flex: 1 1 auto;
    }
    .site-header-main-section-left .fmf-header-brand {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .site-header-main-section-left .fmf-logo-video-wrap {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border: 3px solid var(--fm-red-bright);
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(232, 54, 42, 0.55);
        overflow: hidden;
    }
    .site-header-main-section-left .fmf-logo-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .site-header-main-section-left .fmf-tagline {
        display: none;
    }
    .site-header-main-section-left .fmf-name-line1 {
        font-size: 1.4rem;
        line-height: 1;
        white-space: nowrap;
    }
    .site-header-main-section-left .fmf-name-line2 {
        font-size: 1.05rem;
        line-height: 1.2;
    }
}

/* ── Mission tagline strip — sits just below #masthead, all viewports ──
   Injected by fmf_inject_mission_strip() in functions.php. Small typewriter
   red on charcoal — restores the "DYING TO KEEP THE MEMORY..." mission line
   that the old portal carried, in a much quieter treatment so it doesn't
   eat the fold on phone. */
.fmf-mission-strip {
    background: linear-gradient(180deg, #0a0804 0%, var(--fm-dark) 100%);
    border-bottom: 1px solid var(--fm-border);
    color: var(--fm-red-bright);
    text-shadow: 0 0 6px rgba(232, 54, 42, 0.55), 0 0 1px rgba(0, 0, 0, 0.7);
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.875rem; /* 14px floor — info-bearing tagline, was 0.78rem */
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0.35rem 1rem;
    line-height: 1.3;
}
.fmf-mission-strip .fmf-mission-line2 {
    display: block;
}
@media (max-width: 640px) {
    .fmf-mission-strip {
        /* Keep the 14px floor on mobile too — older readers, smaller screens.
           Was font-size: 0.7rem (11.2px), failed mobile-readability rubric. */
        padding: 0.3rem 0.75rem;
        letter-spacing: 0.02em;
    }
}
/* Desktop header carries its own .fmf-tagline inside the brand block,
   so the strip would render as a duplicate. Hide above the Kadence
   desktop-header breakpoint (1024px default). */
@media (min-width: 1024px) {
    .fmf-mission-strip {
        display: none;
    }
}

/* ── Header nav dropdown — dark theme ───────────────────────────────────
   Kadence renders sub-items in .sub-menu <ul>.  Override the white
   default so the Community dropdown matches the FMF dark palette.        */
body.fmf-page .header-navigation .sub-menu {
    background: var(--fm-dark) !important;
    border: 1px solid var(--fm-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
body.fmf-page .header-navigation .sub-menu li {
    border-bottom: 1px solid var(--fm-border);
}
body.fmf-page .header-navigation .sub-menu li:last-child {
    border-bottom: none;
}
body.fmf-page .header-navigation .sub-menu a {
    color: var(--fm-bone) !important;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}
body.fmf-page .header-navigation .sub-menu a:hover {
    background: rgba(139, 0, 0, 0.25) !important;
    color: var(--fm-amber) !important;
}
/* Dropdown arrow indicator on parent "Community" link */
body.fmf-page .header-navigation .menu-item-has-children > a::after {
    content: ' \25BE';
    font-size: 0.7em;
    opacity: 0.6;
}

/* ── Viewport gutter — dark stone texture at wide screens ───────────────
   Body background is only visible in the flanking gutters when the
   viewport exceeds 1400px. Coarser noise than the film grain overlay
   (baseFrequency 0.50 vs 0.65) gives a worn stone/weathered feel.      */
body.fmf-page {
    background-color: #181412;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
    background-size: 250px 250px;
    background-repeat: repeat;
}

/* ── Site wrapper — 1400px max-width, centered ──────────────────────────
   #page is Kadence's outermost div wrapping header + content + footer.
   Constraining it here caps everything in one shot — no per-page rules. */
body.fmf-page #page {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--fm-black);
}

/* ── Dev warning strip (admin-only, parser anomalies) ───────────────────
   Visible only when current_user_can('manage_options') emits the element.
   High-contrast amber so it's impossible to miss during QA.              */
.fmf-dev-warning {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1.25rem;
    background: var(--fm-amber);
    color: var(--fm-black);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.04em;
}
.fmf-dev-warning-label {
    font-size: 0.85rem;
    white-space: nowrap;
}
.fmf-dev-warning-item {
    background: rgba(0, 0, 0, 0.18);
    padding: 0.15em 0.5em;
    font-weight: 400;
}

/* ── Kill Kadence/WP content wrapper backgrounds on all FMF pages ────────
   Kadence adds background-color (white or beige palette values) on several
   nested wrappers. .content-bg fires on singular CPT templates; .site-main
   / #primary / #content fire on archive and forum list templates. All must
   be transparent so body.fmf-page #page (#0A0804) shows through.          */
body.fmf-page .content-bg,
body.fmf-page .site-main,
body.fmf-page #main,
body.fmf-page #primary,
body.fmf-page #content {
    background: transparent !important;
}

/* ── Sitewide width constraint ───────────────────────────────────────────
   Kadence renders header and footer as siblings of #page (outside it).
   All three must be constrained independently. #inner-wrap targets the
   content container inside #page in case a Kadence rule beats #page.     */
body.fmf-page .site-header,
body.fmf-page #page,
body.fmf-page #inner-wrap,
body.fmf-page .site-footer {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.fmf-page .fmf-footer-nav {
    text-align: center;
}

/* ── Swipe page transition — fade to black / rise from black ─────────────
   .fmf-page-exit   added by JS on swipe; body fades to black before navigate
   .fmf-swipe-enter added by JS on the new page if arrived via swipe;
                    body starts black and transitions to normal opacity.      */
body.fmf-page-exit {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
body.fmf-swipe-enter {
    opacity: 0;
    transition: opacity 0.5s ease;
}
body.fmf-swipe-enter.fmf-swipe-visible {
    opacity: 1;
}

/* ── Hide header search magnifier (2026-05-09) ───────────────────────────
   Kadence #search-drawer was repositioned via Customizer Additional CSS
   into a 320px floating dropdown, but the override doesn't restore
   pointer-events when the drawer is in the open state — input renders
   visible but is unclickable. Pre-existing config bug; cosmetic header
   search isn't worth fixing pre-launch when the footer search works fine
   and is universally reachable. Hide the header magnifier sitewide until
   post-launch when we can move the customizer CSS into version control
   and rebuild the drawer state machine properly. */
.search-toggle-open-container {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CGC SLAB BAND — colored label band component
   Used on:
     - Archive cards (.fmf-book-card)              → context: card
     - Single-book detail badge (.fmf-bd-grade-badge) → context: detail
     - Single-fm_issue sibling-CGC panel           → context: sibling
     - Label Types education table (swatches)      → .fmf-label-swatch
   Color via --fm-cgc-{universal|signature|qualified|restored} (defined in :root).
   ════════════════════════════════════════════════════════════════════════ */
.fmf-slab-band {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.45rem 0.85rem;
    background: var(--fmf-slab-band-bg, var(--fm-cgc-universal));
    color: #fff;
    font-family: 'Special Elite', 'Courier New', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    border-top: 2px solid rgba(255,255,255,0.18);
    border-bottom: 2px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                inset 0 -1px 0 rgba(0,0,0,0.18);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.fmf-slab-band--universal { --fmf-slab-band-bg: var(--fm-cgc-universal); }
.fmf-slab-band--signature { --fmf-slab-band-bg: var(--fm-cgc-signature); color: #1a0e00; text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
.fmf-slab-band--qualified { --fmf-slab-band-bg: var(--fm-cgc-qualified); }
.fmf-slab-band--restored  { --fmf-slab-band-bg: var(--fm-cgc-restored); }

.fmf-slab-band__cgc {
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.12em;
    opacity: 0.9;
}
.fmf-slab-band__grade {
    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: 0.06em;
}
.fmf-slab-band__type {
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.14em;
    padding: 0 0.4em;
    border-left: 1px solid rgba(255,255,255,0.35);
    border-right: 1px solid rgba(255,255,255,0.35);
}
.fmf-slab-band--signature .fmf-slab-band__type {
    border-left-color: rgba(0,0,0,0.35);
    border-right-color: rgba(0,0,0,0.35);
}
.fmf-slab-band__tier {
    font-weight: 700;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

/* Context: archive card — band sits at top of card, full width */
.fmf-slab-band--card {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-radius: 4px 4px 0 0;
    margin: 0;
}

/* Context: single-book detail — larger, more prominent */
.fmf-slab-band--detail {
    font-size: 1.05rem;
    padding: 0.65rem 1.1rem;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                inset 0 -1px 0 rgba(0,0,0,0.18),
                0 2px 8px rgba(0,0,0,0.35);
}
.fmf-slab-band--detail .fmf-slab-band__grade {
    font-size: 1.35em;
}

/* Context: sibling-CGC panel on fm_issue — compact inline pill */
.fmf-slab-band--sibling {
    font-size: 0.75rem;
    padding: 0.3rem 0.55rem;
    border-radius: 3px;
    gap: 0.3em;
}

/* Label-type swatches — used in Label Types education tab */
.fmf-label-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fmf-swatch-bg, var(--fm-cgc-universal));
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),
                0 1px 2px rgba(0,0,0,0.3);
}
.fmf-label-swatch--universal { --fmf-swatch-bg: var(--fm-cgc-universal); }
.fmf-label-swatch--signature { --fmf-swatch-bg: var(--fm-cgc-signature); }
.fmf-label-swatch--qualified { --fmf-swatch-bg: var(--fm-cgc-qualified); }
.fmf-label-swatch--restored  { --fmf-swatch-bg: var(--fm-cgc-restored); }

/* Label Types tab table — swatch column is narrow */
.fmf-grade-guide-table--labels .fmf-gg-col-swatch { width: 48px; }
.fmf-grade-guide-table--labels .fmf-grade-guide-swatch {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.5rem;
}