/* ValidHunt brand tokens — locked palette from 2026-06-17 design conversation.
 * Tokens are CSS custom properties so any component can read them via var(--*).
 * Hex values are the only place a color literal should appear in the codebase. */

:root {
    /* Primary brand */
    --brand:        #1A3C34;
    --brand-soft:   #2E5A3A;

    /* Surfaces */
    --surface:      #FFFCF5;
    --background:   #F4F1EB;

    /* Text */
    --ink:          #2C2C2C;
    --ink-muted:    #6B6258;

    /* Earth */
    --earth:        #8B5A2B;
    --earth-soft:   #A67B5B;

    /* Action + state */
    --cta:          #094F1F;
    --cta-hover:    #0c6929;
    --alert:        #FF6200;
    --alert-soft:   rgba(255, 98, 0, 0.08);
    --success:      #4A9C8E;
    --success-soft: rgba(74, 156, 142, 0.10);

    /* Derived utilities */
    --border-soft:   rgba(166, 123, 91, 0.4);
    --border-faint:  rgba(166, 123, 91, 0.2);
    --shadow-card:   0 1px 2px rgba(26, 60, 52, 0.05);
    --shadow-lift:   0 4px 14px rgba(26, 60, 52, 0.10);

    /* Layout */
    --container-narrow: 760px;
    --container-wide:   980px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
    background: var(--background);
    color: var(--ink);
    margin: 0;
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--brand);
    color: #fff;
}

a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
}
a:hover { border-bottom-color: var(--brand); }

h1, h2, h3, h4 {
    color: var(--brand);
    margin: 0;
    letter-spacing: -0.01em;
}

code {
    background: rgba(15, 95, 89, 0.07);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    color: var(--ink);
}

/* ─── Reusable building blocks ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.05s, background 0.15s, border-color 0.15s;
    border-bottom: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); border-bottom-color: transparent; }
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); }
.btn--secondary {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand);
}
.btn--secondary:hover { background: rgba(26, 60, 52, 0.06); }
.btn--ghost {
    background: transparent;
    color: var(--ink-muted);
    padding: 0.7rem 0.6rem;
}
.btn--ghost:hover { color: var(--brand); }

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-soft);
}

.section-heading {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--ink-muted);
}

.app-shell {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 1rem;
}

/* ─── Detail-page primitives ──────────────────────────────────────────────
   Shared by SpeciesDetail / SeasonDetail / RuleDetail / ZoneDetail /
   CountyDetail (the Search drill-down family from #58–#63).
   Live in brand.css rather than scoped per-component CSS so all five
   detail components can render cards/chips/pills with the same vocabulary
   without each one redeclaring the rules. */

.detail-section { display: flex; flex-direction: column; gap: 0.55rem; }
.detail-section__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0;
    font-weight: 700;
}
.detail-section__hint {
    font-size: 0.84rem;
    color: var(--ink-muted);
    margin: 0.2rem 0 0 0;
    line-height: 1.45;
}

.detail-cards { display: flex; flex-direction: column; gap: 0.5rem; }

.detail-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left-width: 4px;
    border-left-color: var(--brand);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s, transform 0.06s, border-left-color 0.12s;
}
.detail-card:hover {
    background: var(--background);
    transform: translateY(-1px);
}

.detail-card__title { font-weight: 600; color: var(--ink); font-size: 0.96rem; }

.detail-card__meta {
    font-size: 0.84rem;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}
.detail-card__meta-sep { opacity: 0.5; }

.detail-card__body {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.45;
    margin-top: 0.2rem;
}

.detail-card__pill {
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: #fff;
}
.detail-card__pill--alert   { background: var(--alert); }
.detail-card__pill--earth   { background: var(--earth); }
.detail-card__pill--success { background: var(--success); }
.detail-card__pill--info    { background: var(--ink-muted); }

.detail-card--rule    { border-left-color: var(--alert); }
.detail-card--alert   { border-left-color: var(--alert);     background: rgba(255, 98, 0, 0.04); }
.detail-card--earth   { border-left-color: var(--earth);     background: rgba(139, 90, 43, 0.04); }
.detail-card--success { border-left-color: var(--success);   background: rgba(74, 156, 142, 0.06); }
.detail-card--info    { border-left-color: var(--ink-muted); }

.detail-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(26, 60, 52, 0.07);
    color: var(--brand);
    border: 1px solid rgba(26, 60, 52, 0.25);
    border-radius: 999px;
    font-size: 0.86rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}
.detail-chip:hover { background: var(--cta); color: #fff; }
.detail-chip__icon { font-size: 0.95rem; }

.status-pill {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.status-pill--brand { background: rgba(26, 60, 52, 0.1); color: var(--brand); }

.detail-empty {
    background: var(--surface);
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ─── Flatpickr brand theme ────────────────────────────────────────────
   Overrides the stock Flatpickr CSS so the popup matches the site:
   surface tone, brand-green selected day, generous radius, soft shadow.
   Lives in brand.css (not scoped) because Flatpickr appends its calendar
   element to <body>, outside any component's CSS-isolation boundary. */

.flatpickr-calendar {
    background: var(--surface) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(20, 14, 8, 0.18), 0 2px 4px rgba(20, 14, 8, 0.06) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    overflow: hidden;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-bottom-color: var(--brand) !important; border-top-color: var(--brand) !important; }

.flatpickr-months {
    background: var(--brand);
    color: #fff;
    padding: 0.55rem 0.45rem 0.5rem 0.45rem;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: rgba(255, 255, 255, 0.92) !important;
    padding: 0.35rem 0.5rem !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fff !important; }

.flatpickr-current-month { color: #fff !important; font-weight: 700; padding-top: 0 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .cur-year {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--ink); background: var(--surface); }

.flatpickr-weekdays { background: var(--surface); padding-top: 0.4rem; }
.flatpickr-weekday {
    color: var(--ink-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
}

.dayContainer { padding: 0.4rem 0.5rem 0.55rem 0.5rem; }

.flatpickr-day {
    color: var(--ink) !important;
    border-radius: 10px !important;
    font-weight: 500;
    margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(26, 60, 52, 0.08) !important;
    border-color: transparent !important;
}
.flatpickr-day.today {
    border: 2px solid var(--brand) !important;
    color: var(--brand) !important;
    font-weight: 700;
}
.flatpickr-day.today:hover { background: rgba(26, 60, 52, 0.10) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
    font-weight: 700;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(107, 98, 88, 0.45) !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(107, 98, 88, 0.35) !important; }

/* Map active-spot pin — same teardrop shape as Leaflet's default marker,
   tinted with the brand CTA colour via inline SVG. Leaflet's default
   .leaflet-div-icon adds a white background + border to all divIcons;
   we strip those here so only the SVG paints. */
.validhunt-pin--active.leaflet-div-icon,
.validhunt-pin--active {
    background: transparent;
    border: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}