/*
 * Neo-Brutalist SaaS.
 *
 * Strict grid, hard offset shadows, sharp corners, Space Grotesk.
 *
 * **Why this restyles Bootstrap components rather than shipping its own
 * markup.** The thirty-one templates that extend base.html -- the
 * catalogue, the cart, order history, the booking calendar, the account
 * screens -- are written in Bootstrap's grid and component classes. A
 * theme that restyles `.card`, `.btn`, `.navbar`, `.form-control` and
 * `.table` themes all of them at once. A theme that replaced the markup
 * would theme only the pages somebody had rewritten, and the rest would
 * render as unstyled Bootstrap inside a brutalist frame.
 *
 * **What this theme may not set: colour.** `BrandCentre.get_styles`
 * injects `!important` rules for body, .card, .bg-btn, .header, footer,
 * a, nav and .nav-item:hover from an inline <style> after this file, and
 * those are meant to win -- a tenant keeps their palette whichever theme
 * they pick. So this theme works in properties BrandCentre does not
 * name: border, box-shadow, border-radius, font, letter-spacing,
 * text-transform. Setting `background-color` on `.card` here would
 * simply lose. See THEMES.md.
 */

body.theme-neo-brutalist {
    --scale-theme: "neo_brutalist";

    --nb-ink: #000;
    --nb-edge: 3px;
    --nb-shadow: 8px 8px 0 0 rgba(0, 0, 0, 1);
    --nb-shadow-sm: 4px 4px 0 0 rgba(0, 0, 0, 1);

    font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
}

body.theme-neo-brutalist h1,
body.theme-neo-brutalist h2,
body.theme-neo-brutalist h3,
body.theme-neo-brutalist h4,
body.theme-neo-brutalist h5,
body.theme-neo-brutalist h6,
body.theme-neo-brutalist .navbar-brand {
    font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

body.theme-neo-brutalist h1,
body.theme-neo-brutalist .display-4 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.95;
}

/* Sharp corners everywhere. MDB rounds a great many things. */
body.theme-neo-brutalist .card,
body.theme-neo-brutalist .btn,
body.theme-neo-brutalist .form-control,
body.theme-neo-brutalist .custom-select,
body.theme-neo-brutalist .alert,
body.theme-neo-brutalist .badge,
body.theme-neo-brutalist .dropdown-menu,
body.theme-neo-brutalist .modal-content,
body.theme-neo-brutalist .list-group-item,
body.theme-neo-brutalist .input-group-text,
body.theme-neo-brutalist img.rounded-circle {
    border-radius: 0;
}

body.theme-neo-brutalist .card,
body.theme-neo-brutalist .alert,
body.theme-neo-brutalist .modal-content,
body.theme-neo-brutalist .dropdown-menu {
    border: var(--nb-edge) solid var(--nb-ink);
    box-shadow: var(--nb-shadow);
}

body.theme-neo-brutalist .btn {
    border: var(--nb-edge) solid var(--nb-ink);
    box-shadow: var(--nb-shadow-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: transform 80ms linear, box-shadow 80ms linear;
}

/*
 * The press. Moving the element onto its own shadow is what sells a
 * solid offset shadow as a physical object; a fade or a lift reads as
 * an ordinary hover and the idiom disappears.
 */
body.theme-neo-brutalist .btn:hover,
body.theme-neo-brutalist .btn:focus {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 1);
}

body.theme-neo-brutalist .btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

body.theme-neo-brutalist .form-control,
body.theme-neo-brutalist .custom-select {
    border: var(--nb-edge) solid var(--nb-ink);
    box-shadow: none;
}

body.theme-neo-brutalist .form-control:focus,
body.theme-neo-brutalist .custom-select:focus {
    box-shadow: var(--nb-shadow-sm);
    outline: none;
}

body.theme-neo-brutalist .navbar {
    border-bottom: var(--nb-edge) solid var(--nb-ink);
}

body.theme-neo-brutalist .nav-link,
body.theme-neo-brutalist .navbar-nav .nav-item > a {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.theme-neo-brutalist table,
body.theme-neo-brutalist .table {
    border: var(--nb-edge) solid var(--nb-ink);
}

body.theme-neo-brutalist .table th,
body.theme-neo-brutalist .table td {
    border-color: var(--nb-ink);
}

body.theme-neo-brutalist .table thead th {
    border-bottom: var(--nb-edge) solid var(--nb-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.theme-neo-brutalist hr {
    border: 0;
    border-top: var(--nb-edge) solid var(--nb-ink);
}

body.theme-neo-brutalist footer {
    border-top: var(--nb-edge) solid var(--nb-ink);
}

/* The wrapper `themes/neo_brutalist/base.html` puts around the content. */
body.theme-neo-brutalist .nb-stack > * + * {
    margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-neo-brutalist .btn {
        transition: none;
    }
}

/* ── Cookie banner ────────────────────────────────────────────────────
 * The banner's shape follows the theme; its colour does not. Colour is
 * the tenant's footer palette, emitted by BrandCentre.get_styles() with
 * !important and so out of a theme's reach by design -- THEMES.md,
 * "Colour belongs to the tenant". Its buttons are .btn and are already
 * themed above. consent.css owns the shared geometry (placement, sizing).
 */

body.theme-neo-brutalist .consent-banner {
    border: var(--nb-edge) solid var(--nb-ink);
    border-radius: 0;
    box-shadow: var(--nb-shadow);
}

/* Full width, a heavy rule on top and no offset shadow: a shadow under a
   bar pinned to the bottom of the viewport has nowhere to fall. */
body.theme-neo-brutalist .consent-banner--bottom {
    border-width: var(--nb-edge) 0 0;
    box-shadow: none;
}

body.theme-neo-brutalist .consent-banner__title {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}