/**
 * Theme CSS Custom Properties
 * Centralized design system tokens for colors, spacing, and typography
 */

/* ===================================================================
 * Typefaces (self-hosted, SIL Open Font License)
 *
 * Archivo     - display. A condensed grotesque: the vernacular of map
 *               sheet titles and US highway signage.
 * Public Sans - body. The USWDS face, used in US federal land and
 *               wildlife publications our readers already handle.
 * Plex Mono   - data. Acreage, coordinates, dates, Field Ready Score.
 *
 * Archivo and Public Sans are variable (weight 100-900; Archivo also
 * carries a width axis, 62%-125%), so one file covers every weight.
 * latin-ext is only fetched when a matching character is on the page.
 * =================================================================== */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin.2f7ea45bad3a.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: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.cde95d2797df.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: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/public-sans-latin.45ac3f4b61c1.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: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/public-sans-latin-ext.587f1fa8d04e.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/plex-mono-400-latin.814fe1615d4d.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plex-mono-600-latin.e71a597e376e.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 {
    /* Color Palette */
    --color-primary: #2c5f2d;
    --color-primary-dark: #1e3f1f;
    --color-primary-light: #4a7d4c;
    --color-secondary: #97bc62;
    --color-secondary-dark: #7a9b4e;
    --color-secondary-light: #b1d084;

    /* ---------------------------------------------------------------
     * Landscape palette
     *
     * Drawn from the artifacts this audience actually handles -- USGS
     * quad sheets, plat maps, and the low blue light before sunrise --
     * rather than the flat Kelly green every hunting site reaches for.
     *
     * Blaze is hunter-safety orange. It is legally mandated on a person
     * in the field, so here it means exactly what it means out there:
     * pay attention. Budget it at one primary action per screen. If a
     * second thing on the page is blaze, one of them is wrong.
     * --------------------------------------------------------------- */
    --color-timber: #1b2b2a; /* standing timber before sunup */
    --color-timber-deep: #101b1a; /* deeper, for scrims and gradients */
    --color-frost: #e8ebe6; /* frost on a field; quiet page ground */
    --color-contour: #8c6239; /* USGS contour ink; rules and data labels */
    --color-blaze: #f04b0a;
    --color-blaze-dark: #c93c06;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-black: #000000;

    /* Spacing Scale (based on 0.25rem = 4px) */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */

    /* Typography */
    --font-family-base: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-display: "Archivo", "Public Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono",
        Menlo, monospace;

    /* Kept as an alias: --font-family-heading was the original token name and
     * may still be referenced by future work. Display is the canonical name. */
    --font-family-heading: var(--font-family-display);

    /* Width axis for Archivo. 75% is condensed enough to read as map-sheet
     * lettering without collapsing counters at small sizes. */
    --font-stretch-display: 75%;

    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-sm: 0.125rem; /* 2px */
    --radius-base: 0.25rem; /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-2xl: 1rem; /* 16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ---------------------------------------------------------------
     * Bootstrap variable remap
     *
     * Bootstrap 5.3 emits its color utilities with !important
     * (.text-primary, .bg-primary, .link-primary...), so a plain
     * declaration here can never win. Remapping Bootstrap's own custom
     * properties instead makes every generated utility resolve to the
     * brand green in one place.
     *
     * Accessibility: Bootstrap's #0d6efd is 3.9:1 on white and fails
     * WCAG AA for body text. #2c5f2d is ~7.5:1.
     * --------------------------------------------------------------- */
    --bs-primary: #2c5f2d;
    --bs-primary-rgb: 44, 95, 45;
    --bs-primary-text-emphasis: #1e3f1f;
    --bs-primary-bg-subtle: #e6efe6;
    --bs-primary-border-subtle: #b8cfb9;

    --bs-link-color: #2c5f2d;
    --bs-link-color-rgb: 44, 95, 45;
    --bs-link-hover-color: #1e3f1f;
    --bs-link-hover-color-rgb: 30, 63, 31;
}

/* Base typography
 *
 * This is the wiring the --font-family-* tokens never had: they were declared
 * in :root and referenced nowhere in the codebase, so every heading rendered
 * in the OS UI font at Bootstrap's weight 500.
 *
 * theme.css loads after Bootstrap in base.html, so equal-specificity selectors
 * here win on cascade order. Bootstrap Icons is unaffected -- it sets its
 * font-family on the ::before pseudo-element with !important. */
body {
    font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.navbar-brand {
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

/* Bootstrap ships .display-* at weight 300, which reads as thin and generic in
 * a condensed face. Hero sizes want weight and tighter tracking. */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

code,
pre,
kbd,
samp,
.font-mono {
    font-family: var(--font-family-mono);
}

/* Tabular figures for anything where digits sit in a column -- prices,
 * acreage, scores. Stops numbers jittering between rows. */
.font-numeric {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
}

/* Section eyebrow
 *
 * A small structural label above a heading. Contour brown, because it labels
 * rather than acts -- blaze is reserved for actions. Lives here rather than in
 * landing.css because the listing detail page uses it too. */
.section-eyebrow {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-contour);
    margin-bottom: var(--spacing-3);
}

/* Data table
 *
 * Shared treatment for tables we author. Mirrors what blog.css does to
 * CKEditor's tables, which cannot be given a class and so needs its own
 * descendant selectors -- the visual result is deliberately identical.
 *
 * Handles both shapes: a thead of column headers, and the label/value form
 * where each row starts with a th[scope="row"]. */
.data-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.data-table thead th {
    padding: 0.7rem 0.85rem;
    background-color: var(--color-timber);
    color: var(--color-white);
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    border: 0;
}

.data-table th[scope="row"] {
    width: 38%;
    padding: 0.7rem 0.85rem;
    background-color: var(--color-frost);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    border-top: 1px solid var(--color-gray-200);
}

.data-table td {
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--color-gray-200);
    vertical-align: top;
}

.data-table tbody tr:first-child th,
.data-table tbody tr:first-child td {
    border-top: 0;
}

@media (max-width: 575.98px) {
    .data-table th[scope="row"] {
        width: auto;
    }

    .data-table th,
    .data-table td {
        padding: 0.55rem 0.6rem;
    }
}

/* Prose
 *
 * Long-form reading measure and rhythm for pages that are mostly words: the
 * about page, legal pages, policy text. blog.css does the same job for
 * CKEditor output, which cannot be given a class; .listing-prose is the same
 * idea scoped to a listing description.
 *
 * 62ch measures out at roughly 72 characters in Public Sans -- the ch unit is
 * the width of "0", which is narrower than the average lowercase glyph. */
.prose {
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-gray-800);
}

.prose p {
    margin-bottom: 1.35em;
}

.prose > h2 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

.prose > h3 {
    margin-top: 2em;
    margin-bottom: 0.7em;
    font-size: var(--font-size-lg);
}

.prose > *:first-child {
    margin-top: 0;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* A sentence worth stopping on. Larger, condensed, set against a contour rule
 * rather than in quote marks. */
.pull-quote {
    max-width: 30ch;
    margin: 0;
    padding-left: var(--spacing-5);
    border-left: 3px solid var(--color-contour);
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    line-height: 1.2;
    color: var(--color-gray-900);
}

/* Panel
 *
 * Frost ground under a timber rule. The recurring "here is a distinct block of
 * information" shape -- .booking-panel and .estimate are the same object with
 * their own type sizes, and new work should use this rather than a fifth
 * variant. */
.panel {
    padding: var(--spacing-6);
    background-color: var(--color-frost);
    border-top: 3px solid var(--color-timber);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.panel h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
}

/* A checklist inside a panel: hairline dashes rather than green ticks, which
 * read as validation state rather than "here is what you get". */
.panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-list li {
    position: relative;
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.panel-list li:last-child {
    margin-bottom: 0;
}

.panel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 12px;
    height: 1px;
    background-color: var(--color-contour);
}

/* Django renders password validators as a <ul> in help_text. Shown, because the
 * rules are genuinely useful, but quietly and after the field rather than as a
 * four-bullet wall before the user has typed anything. */
.field-help {
    margin-top: var(--spacing-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.field-help ul {
    margin: 0;
    padding-left: 1.1em;
}

/* Estimate figure
 *
 * The payoff of the calculator. The range carries as much weight as the point
 * estimate on purpose -- the FAQ says roughly half of real leases fall inside
 * it, so leading with a single confident number would oversell what the model
 * actually knows. */
.estimate {
    padding: var(--spacing-8) var(--spacing-6);
    background-color: var(--color-frost);
    border-top: 3px solid var(--color-timber);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: var(--spacing-8);
}

.estimate-figure {
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: 800;
    font-size: clamp(3rem, 9vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-900);
    margin: 0;
}

.estimate-unit {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-contour);
    margin: var(--spacing-3) 0 var(--spacing-5);
}

.estimate-range {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-white);
    border-left: 3px solid var(--color-contour);
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}

.estimate-range strong {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
}

/* Form section
 *
 * Groups fields under a labelled heading with a rule, instead of boxing each
 * group in a card with a coloured header. The calculator had six cards headed
 * primary / success / success / success / warning / info -- six colours for six
 * groups of the same kind of thing, which ranked them without meaning to. */
.form-section {
    padding-top: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    border-top: 1px solid var(--color-gray-200);
}

.form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.form-section > h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2);
}

.form-section > .form-section-hint {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}

/* Chip
 *
 * One neutral treatment for taxonomy values (game types, habitat, food
 * sources). These were three different Bootstrap badge colours -- blue, green
 * and yellow -- which implied a distinction that does not exist. The section
 * heading says which kind they are; the chip does not need to. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    white-space: nowrap;
}

/* The row that holds them. This lived in listing.css, which only listing pages
 * load, so on the blog every chip-set fell back to a default <ul>: bullets down
 * the left margin and one tag per line. Nine tags on a post row pushed the next
 * post most of a screen down. It is a generic layout utility, so it belongs
 * next to .chip where everything can reach it. */
.chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Chips are also used as links (blog tags). .chip was written for inert
 * taxonomy values, so a link inherited the body underline through it. */
a.chip {
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.chip:hover,
a.chip:focus-visible {
    border-color: var(--color-gray-500);
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

@media (prefers-reduced-motion: reduce) {
    a.chip {
        transition: none;
    }
}

/* Footer state index
 *
 * These 50 links used to be a scrolling dropdown in the primary nav. They are
 * real internal links to state landing pages, so they stay site-wide -- just
 * in the footer, collapsed. <details> keeps every link in the DOM for crawlers
 * and is keyboard-operable with no JavaScript. */
.footer-states summary {
    cursor: pointer;
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-2) 0;
    color: rgb(255 255 255 / 0.85);
}

.footer-states summary:hover,
.footer-states[open] summary {
    color: var(--color-white);
}

.footer-states summary:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.footer-state-list {
    list-style: none;
    padding: var(--spacing-3) 0 0;
    margin: 0;
    columns: 6 9rem;
    column-gap: var(--spacing-6);
}

.footer-state-link {
    display: block;
    padding: 0.15rem 0;
    font-size: var(--font-size-sm);
    color: rgb(255 255 255 / 0.7);
    text-decoration: none;
}

.footer-state-link:hover,
.footer-state-link:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
}

/* States we have no active listings for render as a <span>, not an <a>, so
 * they are not crawlable. Dim them so the list still reads as national
 * coverage while making it obvious which states you can actually browse.
 * :hover/:focus-visible above only match anchors, so these stay inert. */
.footer-state-link--empty {
    color: rgb(255 255 255 / 0.38);
    cursor: default;
}

/* Buttons
 *
 * .text-primary / .bg-primary are handled by the --bs-primary remap above.
 * Buttons are not: Bootstrap compiles .btn-primary with literal hex in
 * --bs-btn-bg rather than var(--bs-primary), so it still needs an explicit
 * override. Setting the --bs-btn-* variables (rather than background-color)
 * carries the brand color through hover, active, focus and disabled states
 * too -- the previous background-color override left :active and :disabled
 * rendering Bootstrap blue.
 */
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 44, 95, 45;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 44, 95, 45;
}

/* The one loud button. Dark ink on blaze rather than white: it reads like the
 * safety signage the color comes from, and it clears WCAG AA for normal text
 * (4.8:1) where white on blaze only reaches 3.6:1 and would be large-text-only. */
.btn-blaze {
    --bs-btn-color: var(--color-timber-deep);
    --bs-btn-bg: var(--color-blaze);
    --bs-btn-border-color: var(--color-blaze);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-blaze-dark);
    --bs-btn-hover-border-color: var(--color-blaze-dark);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-blaze-dark);
    --bs-btn-active-border-color: var(--color-blaze-dark);
    --bs-btn-focus-shadow-rgb: 240, 75, 10;
    font-weight: var(--font-weight-semibold);
}

/* .btn-secondary intentionally left as Bootstrap's neutral grey.
 * It is used for dismissive actions ("Cancel", "Maybe Later"), where grey
 * is the correct signal. The previous override painted it sage --color-secondary
 * (#97bc62) while Bootstrap kept the label white -- about 2.1:1, a WCAG AA
 * failure. --color-secondary remains available as a token for surfaces. */

/* ---- Hunt club section (scouting/templates/clubs/) ---------------------
 * Six tabs will not sit across a phone. The strip scrolls sideways instead
 * of wrapping into ragged rows, with the scrollbar hidden because the
 * overflowing pill is its own affordance. */
.club-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.club-tabs::-webkit-scrollbar {
    display: none;
}

.club-tabs .nav {
    width: max-content;
    min-width: 100%;
}

/* The one place a club can lose something: kept apart from the page's
 * ordinary actions so a mistap is hard rather than easy. */
.club-danger {
    border-color: var(--bs-border-color);
    background: #fff8f7;
}