/*
Theme Name: dadchecks-techdad-v2
Theme URI: https://dadchecks.tech
Description: Self-contained WordPress theme v2 for dadchecks.tech. Dark + neon brand system. Native Gutenberg only. No parent theme.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Author: Tech Dad OS
Author URI: https://dadchecks.tech
License: MIT
Text Domain: dadchecks
*/

/* =========================================================================
   DESIGN TOKENS — single source of truth.
   Mirrors memories/techdad/global/dadchecks-brand.md → design_tokens.
   Token change = major change → Awaiting Your Approval (per daddesign §10).
   ========================================================================= */
:root {
    /* ---- Color: backgrounds ---- */
    --dc-color-bg:        #0a0a14;   /* page background, dark mode */
    --dc-color-bg-elev:   #12121f;   /* cards, panels (1 step up) */
    --dc-color-bg-elev-2: #1a1a2a;   /* sticky header, dialogs (2 steps up) */
    --dc-color-surface:   #161624;   /* generic surface, alt cards */
    --dc-color-border:    #2a2a3e;   /* dividers, hairlines */
    --dc-color-border-strong: #3a3a55;

    /* ---- Color: brand neons ---- */
    --dc-neon-cyan:       #00f0ff;   /* Smart Home, primary accent */
    --dc-neon-pink:       #ff2d8e;   /* TECH DAD wordmark, Dad Gaming */
    --dc-neon-lime:       #aaff00;   /* Home Lab, REAL HOMES highlight */
    --dc-neon-magenta:    #ff3ea0;   /* tagline box stroke, DAD CHECKED display */

    /* ---- Color: text ---- */
    --dc-text-white:      #f5f5f7;   /* primary body text on dark */
    --dc-text-muted:      #8a8a9a;   /* secondary text, captions */
    --dc-text-faint:      #5a5a6e;   /* tertiary, meta */

    /* ---- Color: state ---- */
    --dc-state-success:   #10B981;
    --dc-state-warning:   #F59E0B;
    --dc-state-error:     #EF4444;

    /* ---- Color: scrim / overlays ---- */
    --dc-scrim:           rgba(10, 10, 20, 0.72);
    --dc-glow-cyan:       rgba(0, 240, 255, 0.35);
    --dc-glow-pink:       rgba(255, 45, 142, 0.35);
    --dc-glow-lime:       rgba(170, 255, 0, 0.35);
    --dc-glow-magenta:    rgba(255, 62, 160, 0.35);

    /* ---- Typography: families (Google Fonts) ---- */
    --dc-font-display:    "Anton", "Impact", "Arial Narrow", sans-serif;     /* big, condensed */
    --dc-font-script:     "Permanent Marker", "Brush Script MT", cursive;     /* handwritten / signed */
    --dc-font-pixel:      "Press Start 2P", "Courier New", monospace;         /* retro arcade */
    --dc-font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --dc-font-mono:       "JetBrains Mono", "Fira Code", Consolas, monospace;

    /* ---- Typography: scale (modular, 1.25 major third) ---- */
    --dc-fs-small:        0.85rem;
    --dc-fs-body:         1rem;       /* 16px */
    --dc-fs-lead:         1.25rem;
    --dc-fs-h4:           1.25rem;
    --dc-fs-h3:           1.563rem;
    --dc-fs-h2:           1.953rem;
    --dc-fs-h1:           2.441rem;
    --dc-fs-display:      4.768rem;   /* homepage hero */

    --dc-lh-tight:        1.1;
    --dc-lh-snug:         1.25;
    --dc-lh-normal:       1.5;
    --dc-lh-relaxed:      1.65;

    /* ---- Spacing ---- */
    --dc-space-1:         4px;
    --dc-space-2:         8px;
    --dc-space-3:         12px;
    --dc-space-4:         16px;
    --dc-space-6:         24px;
    --dc-space-8:         32px;
    --dc-space-12:        48px;
    --dc-space-16:        64px;
    --dc-space-24:        96px;

    /* ---- Layout ---- */
    --dc-container-max:   1200px;
    --dc-container-pad:   24px;
    --dc-content-max:     760px;       /* prose column */

    /* ---- Radii ---- */
    --dc-radius-sm:       4px;
    --dc-radius-md:       8px;
    --dc-radius-lg:       16px;
    --dc-radius-pill:     9999px;

    /* ---- Shadows / glows ---- */
    --dc-shadow-sm:       0 1px 2px rgba(0,0,0,0.4);
    --dc-shadow-md:       0 4px 12px rgba(0,0,0,0.5);
    --dc-shadow-lg:       0 10px 30px rgba(0,0,0,0.6);
    --dc-glow-cyan-soft:  0 0 12px var(--dc-glow-cyan);
    --dc-glow-pink-soft:  0 0 12px var(--dc-glow-pink);
    --dc-glow-lime-soft:  0 0 12px var(--dc-glow-lime);

    /* ---- Motion ---- */
    --dc-ease:            cubic-bezier(0.2, 0.8, 0.2, 1);
    --dc-dur-fast:        120ms;
    --dc-dur:             200ms;
    --dc-dur-slow:        360ms;

    /* ---- Z-index ---- */
    --dc-z-header:        100;
    --dc-z-overlay:       200;
    --dc-z-modal:         300;
}

/* =========================================================================
   RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* =========================================================================
   BASE
   ========================================================================= */
html { background: var(--dc-color-bg); }

body {
    background: var(--dc-color-bg);
    color: var(--dc-text-white);
    font-family: var(--dc-font-body);
    font-size: var(--dc-fs-body);
    line-height: var(--dc-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Subtle neon grid background — kept very faint so it doesn't fight content. */
    background-image:
        radial-gradient(circle at 20% 0%, rgba(0, 240, 255, 0.04) 0, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(255, 45, 142, 0.04) 0, transparent 40%);
    background-attachment: fixed;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--dc-neon-cyan);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--dc-dur) var(--dc-ease);
}
a:hover { color: var(--dc-text-white); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dc-font-display);
    color: var(--dc-text-white);
    line-height: var(--dc-lh-tight);
    margin: 1.5em 0 0.5em;
    letter-spacing: 0.01em;
}
h1 { font-size: var(--dc-fs-h1); }
h2 { font-size: var(--dc-fs-h2); }
h3 { font-size: var(--dc-fs-h3); }
h4 { font-size: var(--dc-fs-h4); }

.display {
    font-family: var(--dc-font-display);
    font-size: var(--dc-fs-display);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.script {
    font-family: var(--dc-font-script);
    color: var(--dc-neon-pink);
    text-shadow: 0 0 18px var(--dc-glow-pink);
}
.pixel {
    font-family: var(--dc-font-pixel);
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

p { margin: 0 0 1.2em; }

hr {
    border: 0;
    height: 1px;
    background: var(--dc-color-border);
    margin: var(--dc-space-8) 0;
}

code, pre, kbd, samp {
    font-family: var(--dc-font-mono);
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-sm);
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--dc-neon-lime);
}
pre { padding: 16px; overflow-x: auto; border-radius: var(--dc-radius-md); }
pre code { padding: 0; border: 0; background: transparent; color: inherit; }

blockquote {
    border-left: 4px solid var(--dc-neon-magenta);
    background: var(--dc-color-bg-elev);
    padding: 16px 20px;
    margin: 24px 0;
    border-radius: 0 var(--dc-radius-md) var(--dc-radius-md) 0;
    color: var(--dc-text-muted);
    font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
    background: rgba(18, 18, 31, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dc-color-border);
    padding: var(--dc-space-4) 0;
    position: sticky;
    top: 0;
    z-index: var(--dc-z-header);
}
.site-header__inner {
    max-width: var(--dc-container-max);
    margin: 0 auto;
    padding: 0 var(--dc-container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dc-space-6);
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-3);
    color: var(--dc-text-white);
    text-decoration: none;
}
.site-header__wordmark {
    font-family: var(--dc-font-display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.site-header__wordmark .accent {
    color: var(--dc-neon-pink);
    text-shadow: 0 0 12px var(--dc-glow-pink);
}
.site-header__mark {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 0;       /* kill the inline-SVG gap */
}
.site-header__mark svg { width: 100%; height: 100%; display: block; }
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--dc-space-6);
    flex-wrap: wrap;
}
.site-nav a {
    color: var(--dc-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color var(--dc-dur) var(--dc-ease);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--dc-neon-cyan); }

.site-nav__cat--smart-home  a:hover { color: var(--dc-neon-cyan);    text-shadow: 0 0 8px var(--dc-glow-cyan); }
.site-nav__cat--home-lab    a:hover { color: var(--dc-neon-lime);    text-shadow: 0 0 8px var(--dc-glow-lime); }
.site-nav__cat--dad-gaming  a:hover { color: var(--dc-neon-pink);    text-shadow: 0 0 8px var(--dc-glow-pink); }

/* =========================================================================
   MAIN
   ========================================================================= */
.site-main {
    flex: 1;
    max-width: var(--dc-container-max);
    margin: 0 auto;
    padding: var(--dc-space-12) var(--dc-container-pad);
    width: 100%;
}

.entry-content, .entry-header, .entry-footer { max-width: var(--dc-content-max); margin-left: auto; margin-right: auto; }

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--dc-color-bg-elev);
    color: var(--dc-text-white);
    padding: 8px 12px;
    border-radius: var(--dc-radius-sm);
}
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; z-index: var(--dc-z-modal); }

/* =========================================================================
   HERO (homepage)
   ========================================================================= */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: var(--dc-space-24) var(--dc-container-pad);
    background: var(--dc-color-bg);
    overflow: hidden;
    isolation: isolate;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: -2;
    filter: saturate(1.1) contrast(1.05);
}
.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,20,0.4) 0%, var(--dc-color-bg) 100%);
    z-index: -1;
}
.hero__inner {
    max-width: var(--dc-container-max);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-8);
}
@media (min-width: 900px) {
    .hero__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.hero__eyebrow {
    font-family: var(--dc-font-pixel);
    font-size: 0.7rem;
    color: var(--dc-neon-cyan);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--dc-space-4);
    text-shadow: 0 0 10px var(--dc-glow-cyan);
}
.hero__title {
    font-family: var(--dc-font-display);
    font-size: var(--dc-fs-display);
    line-height: 0.92;
    text-transform: uppercase;
    margin: 0 0 var(--dc-space-4);
    color: var(--dc-text-white);
}
.hero__title .pink { color: var(--dc-neon-pink); text-shadow: 0 0 20px var(--dc-glow-pink); }
.hero__lead {
    font-size: var(--dc-fs-lead);
    color: var(--dc-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--dc-space-8);
}

.hero__sign {
    /* "DAD CHECKED" sign: 1:1 square check-in-box, magenta-ink.
       Matches the cup.JPG reference (the brand seal rendered as an
       inline SVG, no border / no rounded frame). */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dc-space-3);
    padding: var(--dc-space-4);
    background: transparent;
    transform: rotate(-2deg);
    text-align: center;
    width: 280px;
    max-width: 100%;
}
.hero__sign > svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 24px rgba(255, 62, 160, 0.35));
}
.hero__sign-meta {
    font-family: var(--dc-font-mono);
    font-size: var(--dc-fs-small);
    color: var(--dc-text-faint);
    letter-spacing: 0.05em;
}

.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--dc-space-3); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
    display: inline-block;
    font-family: var(--dc-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: var(--dc-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--dc-dur) var(--dc-ease);
    min-height: 48px;        /* touch-target floor per daddesign §9 */
    line-height: 1;
}
.btn--primary {
    background: var(--dc-neon-cyan);
    color: #0a0a14;
    box-shadow: 0 0 18px var(--dc-glow-cyan);
}
.btn--primary:hover {
    background: var(--dc-text-white);
    color: #0a0a14;
    transform: translateY(-1px);
    box-shadow: 0 0 28px var(--dc-glow-cyan);
}
.btn--ghost {
    background: transparent;
    color: var(--dc-text-white);
    border-color: var(--dc-color-border-strong);
}
.btn--ghost:hover {
    border-color: var(--dc-neon-cyan);
    color: var(--dc-neon-cyan);
}
.btn--pink {
    background: var(--dc-neon-pink);
    color: #0a0a14;
    box-shadow: 0 0 18px var(--dc-glow-pink);
}
.btn--pink:hover {
    background: var(--dc-text-white);
    color: #0a0a14;
}

/* =========================================================================
   CATEGORY GRID (3 categories — fill full content width)
   ========================================================================= */
.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-6);
    margin: var(--dc-space-12) 0;
    width: 100%;
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card {
    position: relative;
    display: block;
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-lg);
    padding: var(--dc-space-6);
    text-decoration: none;
    color: var(--dc-text-white);
    overflow: hidden;
    transition: transform var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease);
    min-height: 220px;
}
.cat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--cat-color, var(--dc-neon-cyan));
    box-shadow: 0 0 12px var(--cat-color, var(--dc-glow-cyan));
    transition: height var(--dc-dur) var(--dc-ease);
}
.cat-card:hover {
    transform: translateY(-3px);
    border-color: var(--cat-color, var(--dc-neon-cyan));
    box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 24px var(--cat-glow, var(--dc-glow-cyan));
}
.cat-card:hover::after { height: 6px; }
.cat-card__icon {
    width: 64px; height: 64px;
    margin-bottom: var(--dc-space-4);
    color: var(--cat-color, var(--dc-neon-cyan));
    filter: drop-shadow(0 0 8px var(--cat-glow, var(--dc-glow-cyan)));
}
.cat-card__icon svg { width: 100%; height: 100%; }
.cat-card__label {
    font-family: var(--dc-font-display);
    font-size: 1.5rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dc-text-white);
    margin: 0 0 var(--dc-space-2);
}
.cat-card__desc {
    font-size: 0.9rem;
    color: var(--dc-text-muted);
    margin: 0;
}
.cat-card__count {
    display: inline-block;
    margin-top: var(--dc-space-3);
    font-family: var(--dc-font-pixel);
    font-size: 0.6rem;
    color: var(--cat-color, var(--dc-neon-cyan));
    letter-spacing: 0.1em;
}

/* Cat-specific overrides. Class added via body or category context. */
.cat-card--smart-home  { --cat-color: var(--dc-neon-cyan);    --cat-glow: var(--dc-glow-cyan); }
.cat-card--home-lab    { --cat-color: var(--dc-neon-lime);    --cat-glow: var(--dc-glow-lime); }
.cat-card--dad-gaming  { --cat-color: var(--dc-neon-pink);    --cat-glow: var(--dc-glow-pink); }

/* =========================================================================
   POST CARDS / GRID
   ========================================================================= */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-6);
    margin: var(--dc-space-8) 0;
}
@media (min-width: 640px)  { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--dc-text-white);
    transition: transform var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease);
}
.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--dc-color-border-strong);
}
.post-card__thumb {
    aspect-ratio: 16 / 9;
    background: var(--dc-color-bg-elev-2);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--dc-color-border);
}
.post-card__body {
    padding: var(--dc-space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--dc-space-2);
}
.post-card__cat {
    font-family: var(--dc-font-pixel);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--post-cat-color, var(--dc-neon-cyan));
    text-shadow: 0 0 6px var(--post-cat-glow, var(--dc-glow-cyan));
}
.post-card--smart-home { --post-cat-color: var(--dc-neon-cyan); --post-cat-glow: var(--dc-glow-cyan); }
.post-card--home-lab   { --post-cat-color: var(--dc-neon-lime); --post-cat-glow: var(--dc-glow-lime); }
.post-card--dad-gaming { --post-cat-color: var(--dc-neon-pink); --post-cat-glow: var(--dc-glow-pink); }
.post-card__title {
    font-family: var(--dc-font-display);
    font-size: 1.35rem;
    line-height: 1.1;
    margin: 0;
    color: var(--dc-text-white);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.post-card__excerpt {
    font-size: 0.9rem;
    color: var(--dc-text-muted);
    margin: 0;
    line-height: 1.5;
}
.post-card__meta {
    margin-top: auto;
    font-family: var(--dc-font-mono);
    font-size: var(--dc-fs-small);
    color: var(--dc-text-faint);
    letter-spacing: 0.02em;
}

/* =========================================================================
   MERCH CARDS (8 SKUs from SKU matrix)
   ========================================================================= */
.merch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-6);
    margin: var(--dc-space-8) 0;
}
@media (min-width: 640px)  { .merch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .merch-grid { grid-template-columns: repeat(4, 1fr); } }

.merch-card {
    position: relative;
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease);
}
.merch-card:hover {
    transform: translateY(-3px);
    border-color: var(--dc-neon-cyan);
}
.merch-card__art {
    aspect-ratio: 1;
    background: var(--dc-color-bg-elev-2);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--dc-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.merch-card__art-placeholder {
    font-family: var(--dc-font-pixel);
    font-size: 0.6rem;
    color: var(--dc-text-faint);
    letter-spacing: 0.1em;
    text-align: center;
    padding: var(--dc-space-4);
}
.merch-card__body {
    padding: var(--dc-space-4);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--dc-space-2);
}
.merch-card__title {
    font-family: var(--dc-font-display);
    font-size: 1.1rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--dc-text-white);
    margin: 0;
}
.merch-card__sku {
    font-family: var(--dc-font-mono);
    font-size: 0.7rem;
    color: var(--dc-text-faint);
    letter-spacing: 0.05em;
}
.merch-card__price {
    font-family: var(--dc-font-display);
    font-size: 1.4rem;
    color: var(--dc-neon-cyan);
    text-shadow: 0 0 8px var(--dc-glow-cyan);
    margin-top: var(--dc-space-1);
}
.merch-card__cta {
    margin-top: var(--dc-space-3);
}

/* =========================================================================
   SINGLE POST / PROSE
   ========================================================================= */
.entry-header { margin-bottom: var(--dc-space-8); }
.entry-header h1 {
    font-size: var(--dc-fs-h1);
    margin-top: 0;
}
.entry-meta {
    font-family: var(--dc-font-mono);
    font-size: var(--dc-fs-small);
    color: var(--dc-text-muted);
    letter-spacing: 0.05em;
}
.entry-content img { border-radius: var(--dc-radius-md); border: 1px solid var(--dc-color-border); }
.entry-content h2, .entry-content h3 { margin-top: var(--dc-space-12); }

.notice {
    background: var(--dc-color-bg-elev);
    border-left: 4px solid var(--dc-neon-cyan);
    padding: var(--dc-space-4) var(--dc-space-6);
    border-radius: 0 var(--dc-radius-md) var(--dc-radius-md) 0;
    margin: var(--dc-space-6) 0;
}
.notice--warning { border-left-color: var(--dc-state-warning); }
.notice--danger  { border-left-color: var(--dc-state-error); }

.cta-block {
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1), 0 0 24px var(--dc-glow-cyan);
    border-radius: var(--dc-radius-lg);
    padding: var(--dc-space-6);
    margin: var(--dc-space-8) 0;
    text-align: center;
}
.cta-block p { margin: 0 0 var(--dc-space-4); color: var(--dc-text-white); font-size: var(--dc-fs-lead); }

.affiliate-disclosure,
.ai-disclosure {
    background: var(--dc-color-bg-elev);
    border: 1px dashed var(--dc-color-border-strong);
    border-radius: var(--dc-radius-md);
    padding: var(--dc-space-3) var(--dc-space-4);
    margin: var(--dc-space-6) 0;
    font-size: var(--dc-fs-small);
    color: var(--dc-text-muted);
}

/* =========================================================================
   COMPARISON TABLE
   ========================================================================= */
.dc-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--dc-space-8) 0;
    font-size: 0.95rem;
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-md);
    overflow: hidden;
}
.dc-table th, .dc-table td {
    text-align: left;
    padding: var(--dc-space-3) var(--dc-space-4);
    border-bottom: 1px solid var(--dc-color-border);
}
.dc-table thead th {
    background: var(--dc-color-bg-elev-2);
    font-family: var(--dc-font-display);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--dc-neon-cyan);
    position: sticky;
    top: 0;
}
.dc-table tbody tr:hover { background: rgba(0, 240, 255, 0.04); }
.dc-table tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.breadcrumb {
    font-family: var(--dc-font-mono);
    font-size: var(--dc-fs-small);
    color: var(--dc-text-muted);
    margin-bottom: var(--dc-space-6);
    letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--dc-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--dc-neon-cyan); }
.breadcrumb__sep { margin: 0 var(--dc-space-2); color: var(--dc-text-faint); }

/* =========================================================================
   PAGINATION
   ========================================================================= */
.pagination {
    display: flex;
    gap: var(--dc-space-2);
    justify-content: center;
    margin: var(--dc-space-12) 0;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--dc-space-3);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-md);
    color: var(--dc-text-muted);
    text-decoration: none;
    font-family: var(--dc-font-mono);
    font-size: 0.9rem;
    transition: all var(--dc-dur) var(--dc-ease);
}
.pagination a:hover { color: var(--dc-neon-cyan); border-color: var(--dc-neon-cyan); }
.pagination .current {
    background: var(--dc-neon-cyan);
    color: #0a0a14;
    border-color: var(--dc-neon-cyan);
}

/* =========================================================================
   AUTHOR BIO
   ========================================================================= */
.author-bio {
    display: flex;
    gap: var(--dc-space-4);
    align-items: flex-start;
    background: var(--dc-color-bg-elev);
    border: 1px solid var(--dc-color-border);
    border-radius: var(--dc-radius-lg);
    padding: var(--dc-space-6);
    margin: var(--dc-space-12) 0;
}
.author-bio__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--dc-radius-pill);
    border: 2px solid var(--dc-neon-cyan);
    box-shadow: 0 0 16px var(--dc-glow-cyan);
    flex-shrink: 0;
    object-fit: cover;
}
.author-bio__name {
    font-family: var(--dc-font-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 0 0 var(--dc-space-1);
    color: var(--dc-text-white);
}
.author-bio__text { color: var(--dc-text-muted); font-size: 0.95rem; margin: 0 0 var(--dc-space-2); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
    background: #06060c;
    color: var(--dc-text-muted);
    border-top: 3px solid var(--dc-neon-magenta);
    box-shadow: 0 -8px 32px rgba(255, 62, 160, 0.15);
    padding: var(--dc-space-12) 0 var(--dc-space-6);
    margin-top: var(--dc-space-16);
}
.site-footer__inner {
    max-width: var(--dc-container-max);
    margin: 0 auto;
    padding: 0 var(--dc-container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dc-space-8);
}
@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.site-footer__col h4 {
    font-family: var(--dc-font-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dc-text-white);
    margin: 0 0 var(--dc-space-3);
}
.site-footer__col p { font-size: 0.9rem; line-height: 1.5; margin: 0 0 var(--dc-space-2); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: var(--dc-space-2); }
.site-footer__col a {
    color: var(--dc-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--dc-dur) var(--dc-ease);
}
.site-footer__col a:hover { color: var(--dc-neon-cyan); }
.site-footer__mark {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-top: var(--dc-space-3);
    line-height: 0;
}
.site-footer__mark svg { width: 100%; height: 100%; display: block; }
.site-footer__bottom {
    max-width: var(--dc-container-max);
    margin: var(--dc-space-8) auto 0;
    padding: var(--dc-space-4) var(--dc-container-pad) 0;
    border-top: 1px solid var(--dc-color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--dc-space-3);
    font-family: var(--dc-font-mono);
    font-size: var(--dc-fs-small);
    color: var(--dc-text-faint);
}
.site-footer__bottom a { color: var(--dc-text-faint); text-decoration: underline; }
.site-footer__bottom a:hover { color: var(--dc-neon-cyan); }

/* =========================================================================
   COOKIE BANNER (DSGVO)
   The banner is rendered server-side as a static block; interactivity can be
   added via a tiny inline script in footer.php. NO tracking cookies are set
   without explicit consent.
   ========================================================================= */
.dc-cookie-banner {
    position: fixed;
    left: var(--dc-space-4);
    right: var(--dc-space-4);
    bottom: var(--dc-space-4);
    background: var(--dc-color-bg-elev-2);
    border: 1px solid var(--dc-neon-cyan);
    box-shadow: 0 0 24px var(--dc-glow-cyan), 0 10px 30px rgba(0,0,0,0.6);
    border-radius: var(--dc-radius-md);
    padding: var(--dc-space-4) var(--dc-space-6);
    z-index: var(--dc-z-overlay);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-3);
    align-items: center;
    justify-content: space-between;
    max-width: 720px;
    margin: 0 auto;
}
.dc-cookie-banner[hidden] { display: none; }
.dc-cookie-banner p { margin: 0; flex: 1 1 280px; font-size: 0.9rem; color: var(--dc-text-muted); }
.dc-cookie-banner a { color: var(--dc-neon-cyan); }

/* =========================================================================
   FOCUS / A11Y
   ========================================================================= */
*:focus-visible {
    outline: 3px solid var(--dc-neon-cyan);
    outline-offset: 2px;
    border-radius: var(--dc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
    :root {
        --dc-fs-display: 3rem;
        --dc-fs-h1: 1.953rem;
    }
    .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--dc-space-3); }
    .site-nav ul { gap: var(--dc-space-4); }
    .hero { min-height: 60vh; padding: var(--dc-space-12) var(--dc-container-pad); }
    .hero__title { font-size: 2.5rem; }
    .hero__sign { width: 220px; }
}

/* =========================================================================
   SCREENREADER ONLY
   ========================================================================= */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}