/* ==========================================================================
   Brutal - locked neo-brutalist theme (loaded AFTER vanilla).
   Stark white, thick black borders, hard offset shadows (no blur), one
   primary-yellow accent, monospace accents. Archivo black headings.
     page #fff   ink #000   accent yellow #ffe600
   ========================================================================== */

.theme-brutal {
    --font-heading: 'Archivo', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, monospace;

    --color-accent: #ffe600;
    --color-accent-hover: #ffe600;

    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-dark: #000000;
    --color-border: #000000;          /* hard black borders everywhere */

    --color-text: #000000;
    --color-text-secondary: #2b2b2b;
    --color-text-muted: #000000;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #b8b8b8;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

body.theme-brutal { background: var(--color-bg); }

/* Heavy uppercase headings. */
.theme-brutal h1,
.theme-brutal h2,
.theme-brutal h3,
.theme-brutal h4 { font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }

/* Monospace eyebrows. */
.theme-brutal .c-hero__label,
.theme-brutal .c-section-head__label,
.theme-brutal .c-services__label,
.theme-brutal .c-label { font-family: var(--font-mono); color: #000; letter-spacing: 0.08em; }
.theme-brutal .c-hero--image .c-hero__label { color: #fff; }

/* Nav: white, thick black bottom rule, yellow CTA with hard shadow. */
.theme-brutal .c-nav {
    background: #fff;
    border-bottom: 3px solid #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-brutal .c-nav__link { font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.theme-brutal .c-nav__link--button {
    background: var(--color-accent);
    color: #000;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
}
.theme-brutal .c-nav__link--button:hover { opacity: 1; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.theme-brutal .c-nav__hamburger span { background: #000; height: 3px; }

/* Buttons: hard black border + offset shadow, no blur, snappy press. */
.theme-brutal .btn,
.theme-brutal .btn-primary,
.theme-brutal .btn-secondary,
.theme-brutal .btn--primary,
.theme-brutal .btn--secondary {
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 0.08s, box-shadow 0.08s;
}
.theme-brutal .btn-primary,
.theme-brutal .btn--primary { background: var(--color-accent); color: #000; }
.theme-brutal .btn-secondary,
.theme-brutal .btn--secondary { background: #fff; color: #000; }
.theme-brutal .btn:hover,
.theme-brutal .btn-primary:hover,
.theme-brutal .btn-secondary:hover,
.theme-brutal .btn--primary:hover,
.theme-brutal .btn--secondary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.theme-brutal .btn:active,
.theme-brutal .btn-primary:active,
.theme-brutal .btn--primary:active { transform: translate(0, 0); box-shadow: 2px 2px 0 #000; }

/* Cards: thick black border + hard offset shadow. */
.theme-brutal .c-service-card,
.theme-brutal .c-pricing-index__card,
.theme-brutal .oh-dept,
.theme-brutal .c-price-card,
.theme-brutal .c-step-panel,
.theme-brutal .c-sidebar__aside {
    border: 2px solid #000;
    box-shadow: 5px 5px 0 #000;
    border-radius: 0;
}
.theme-brutal .c-service-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.theme-brutal .c-pricing-index__card { border-width: 2px; }
.theme-brutal .c-pricing-index__card:hover { border-color: #000; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--color-accent); }

/* Forms: hard black fields, yellow focus block (no soft glow). */
.theme-brutal .field input,
.theme-brutal .field select,
.theme-brutal .field textarea,
.theme-brutal .bk-search input { border: 2px solid #000; border-radius: 0; }
.theme-brutal .field input:focus,
.theme-brutal .field select:focus,
.theme-brutal .field textarea:focus,
.theme-brutal .bk-search input:focus { border-color: #000; box-shadow: 3px 3px 0 var(--color-accent); }
.theme-brutal .slot-btn { border: 2px solid #000; }
.theme-brutal .slot-btn.is-selected { background: var(--color-accent); color: #000; border-color: #000; }
/* Service-category accordion: vanilla's hover uses --color-border as the
   background, which is solid black here → black-on-black. Use the yellow
   accent with black text instead (on-brand and readable). */
.theme-brutal .bk-cat summary:hover { background: var(--color-accent); color: #000; }
.theme-brutal .bk-card,
.theme-brutal .bk-upsell { border: 2px solid #000; }
.theme-brutal .bk-card.is-selected .bk-card__check,
.theme-brutal .bk-card--option:has(input:checked) .bk-card__check,
.theme-brutal .bk-upsell:has(input:checked) .bk-upsell__check { background: var(--color-accent); color: #000; border-color: #000; }
.theme-brutal .bk-cart__toggle { color: #000; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.theme-brutal .bk-cart__count { background: #000; color: var(--color-accent); }

/* Quote-CTA button on the black band: yellow with white-edged hard shadow. */
.theme-brutal .c-quote-cta .btn-primary,
.theme-brutal .c-quote-cta .btn--primary { background: var(--color-accent); color: #000; border-color: #fff; box-shadow: 4px 4px 0 #fff; }

/* ===== HERO: yellow "banner" - black text, black-shadow button ===== */
.theme-brutal .c-hero--banner { background: var(--color-accent); color: #000; border-top: 3px solid #000; border-bottom: 3px solid #000; }
.theme-brutal .c-hero--banner .c-hero__title,
.theme-brutal .c-hero--banner .c-hero__desc { color: #000; }
.theme-brutal .c-hero--banner .c-hero__label { color: #000; }
.theme-brutal .c-hero--banner .btn-primary,
.theme-brutal .c-hero--banner .btn--primary { background: #000; color: var(--color-accent); border-color: #000; }