/* ==========================================================================
   Brand theme - mirrors the public site (footsietrolls.com): black backgrounds, Damion script for titles,
   Quicksand for everything else, chartreuse pill buttons, and the logo's teal for links and accents.
   Works on top of Bootstrap's own dark mode (data-bs-theme="dark" on <html> in App.razor), overriding its
   variables rather than restyling components one by one.

   Fonts are self-hosted from wwwroot/fonts (SIL Open Font License) instead of loaded from Google Fonts, which
   would hand every visitor's IP address to Google before they've answered the cookie banner.
   ========================================================================== */

@font-face {
    font-family: 'Damion';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/damion-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Damion';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/damion-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/quicksand-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/quicksand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* :root[data-bs-theme=dark] out-ranks Bootstrap's own [data-bs-theme=dark] block, so these win. */
:root[data-bs-theme=dark] {
    /* Brand palette, sampled from the public site and the logo */
    --ft-black: #000;
    --ft-surface: #121112;
    --ft-surface-raised: #1d1b1d;
    --ft-lime: #e9ff30;
    --ft-lime-hover: #daee37;
    --ft-lime-active: #b3c400;
    --ft-ink: #272723;          /* text on lime */
    --ft-teal: #5cc4c8;         /* logo lettering */
    --ft-teal-hover: #8fd8db;
    --ft-teal-deep: #00a3a5;    /* public site tagline */
    --ft-heart: #c85cc4;        /* logo heart */
    --ft-text: #dbdbdb;
    --ft-heading: #e2e2e2;
    --ft-muted: #a4a4a4;
    --ft-border: #363436;

    --bs-body-font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-bg: var(--ft-black);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: var(--ft-text);
    --bs-body-color-rgb: 219, 219, 219;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--ft-heading);
    --bs-secondary-color: var(--ft-muted);
    --bs-secondary-bg: var(--ft-surface-raised);
    --bs-tertiary-bg: var(--ft-surface);
    --bs-border-color: var(--ft-border);

    --bs-primary: #e9ff30;
    --bs-primary-rgb: 233, 255, 48;
    --bs-primary-text-emphasis: #f2ff83;
    --bs-primary-bg-subtle: #2c300a;
    --bs-primary-border-subtle: #6b7a0e;

    --bs-link-color: var(--ft-teal);
    --bs-link-color-rgb: 92, 196, 200;
    --bs-link-hover-color: var(--ft-teal-hover);
    --bs-link-hover-color-rgb: 143, 216, 219;

    --bs-focus-ring-color: rgba(233, 255, 48, 0.35);
    color-scheme: dark;
}

::selection {
    background: var(--ft-teal);
    color: var(--ft-black);
}

/* Titles use the public site's Damion script; everything smaller stays in Quicksand for readability. */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .ft-script {
    font-family: 'Damion', Georgia, serif;
    font-weight: 400;
    color: #fff;
}

h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
}

/* Section title with the thin rule beneath it, as on the public site's "Kit's Feed" / "Contact Us" */
.ft-section-title {
    font-family: 'Damion', Georgia, serif;
    font-weight: 400;
    color: var(--ft-heading);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ft-border);
}

/* Pill buttons, bold with a little tracking - the public site's button shape */
.btn {
    --bs-btn-border-radius: 48px;
    --bs-btn-font-weight: 700;
    letter-spacing: 0.063em;
}

    .btn.btn-lg {
        --bs-btn-padding-x: 2rem;
    }

.btn-link {
    --bs-btn-font-weight: 400;
    letter-spacing: normal;
}

.btn-primary {
    --bs-btn-color: var(--ft-ink);
    --bs-btn-bg: var(--ft-lime);
    --bs-btn-border-color: var(--ft-lime);
    --bs-btn-hover-color: var(--ft-ink);
    --bs-btn-hover-bg: var(--ft-lime-hover);
    --bs-btn-hover-border-color: var(--ft-lime-hover);
    --bs-btn-active-color: var(--ft-ink);
    --bs-btn-active-bg: var(--ft-lime-active);
    --bs-btn-active-border-color: var(--ft-lime-active);
    --bs-btn-disabled-color: var(--ft-ink);
    --bs-btn-disabled-bg: var(--ft-lime);
    --bs-btn-disabled-border-color: var(--ft-lime);
    --bs-btn-focus-shadow-rgb: 233, 255, 48;
}

.btn-outline-primary {
    --bs-btn-color: var(--ft-lime);
    --bs-btn-border-color: var(--ft-lime);
    --bs-btn-hover-color: var(--ft-ink);
    --bs-btn-hover-bg: var(--ft-lime);
    --bs-btn-hover-border-color: var(--ft-lime);
    --bs-btn-active-color: var(--ft-ink);
    --bs-btn-active-bg: var(--ft-lime-active);
    --bs-btn-active-border-color: var(--ft-lime-active);
    --bs-btn-disabled-color: var(--ft-lime);
    --bs-btn-disabled-border-color: var(--ft-lime);
    --bs-btn-focus-shadow-rgb: 233, 255, 48;
}

/* The public site's dark secondary buttons (its cookie Accept/Decline) */
.btn-secondary {
    --bs-btn-color: var(--ft-text);
    --bs-btn-bg: #161616;
    --bs-btn-border-color: var(--ft-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #262426;
    --bs-btn-hover-border-color: #4a484a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #302e30;
    --bs-btn-active-border-color: #4a484a;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ft-text);
    --bs-btn-border-color: #5e5c5e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #262426;
    --bs-btn-hover-border-color: #7a787a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #302e30;
    --bs-btn-active-border-color: #7a787a;
}

/* Bootstrap bakes white text into text-bg-primary at build time - unreadable on chartreuse. */
.text-bg-primary {
    color: var(--ft-ink) !important;
}

.card {
    --bs-card-bg: var(--ft-surface);
    --bs-card-border-color: var(--ft-border);
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(233, 255, 48, 0.3);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ft-lime-active);
}

/* Checkboxes, radios and switches: Bootstrap compiles its blue and white glyphs in, so swap both. */
.form-check-input:checked {
    background-color: var(--ft-lime);
    border-color: var(--ft-lime);
}

    .form-check-input:checked[type=checkbox] {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23272723' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

    .form-check-input:checked[type=radio] {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23272723'/%3e%3c/svg%3e");
    }

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e9ff30'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23272723'/%3e%3c/svg%3e");
}

.content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--bs-form-invalid-border-color);
}

.validation-message {
    color: var(--bs-form-invalid-color);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Cookie consent - see Components/Shared/CookieConsent.razor and wwwroot/js/cookieConsent.js */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1060;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    color: var(--ft-text);
    background-color: var(--ft-surface-raised);
    border: 1px solid var(--ft-border);
    border-top: 3px solid var(--ft-teal);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.8);
}

    .cookie-banner[hidden] {
        display: none;
    }

.cookie-banner-text {
    flex: 1 1 22rem;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cookie-dialog {
    width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    color: var(--ft-text);
    background-color: var(--ft-surface-raised);
    border: 1px solid var(--ft-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.8);
}

    .cookie-dialog::backdrop {
        background: rgba(0, 0, 0, 0.7);
    }

.cookie-dialog-body {
    padding: 1.25rem 1.25rem 0.5rem;
}

.cookie-category {
    padding: 0.75rem 0;
    border-top: 1px solid var(--ft-border);
}

.cookie-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.site-footer {
    background-color: var(--ft-surface);
}

    .site-footer .ft-script {
        font-size: 1.35rem;
        color: var(--ft-heading);
        margin-right: auto;
    }