/* Langsvejen.dk — brandlag oven på Bootstrap 5.3.
   Bootstrap 5.3 eksponerer sine egne tokens som --bs-*, så temaet sættes ved at
   omdefinere variabler frem for at overskrive selectorer. Det holder overrides
   samlet her og overlever en Bootstrap-opdatering. */

:root {
    /* Mærkets farver, med logopakkens egne navne. Kilden er
       G:\Mit drev\Comito\Projekter\Langsvejen\02_Design_og_Brand\Logo\README.md
       og de er hentet fra det danske OSM-kortudtryk. Ændres de her, skal de
       ændres i logofilerne også — ellers går headeren og knapperne fra hinanden. */
    --lv-kortgroen: #2E6B4A;
    --lv-vejkant: #245740;
    --lv-kortsand: #F3EDDF;
    --lv-fundorange: #C4551E;
    --lv-blaek: #1C3A2E;

    /* Varm, jordnær palette. Loppesalg og vejboder er lokale og lidt nostalgiske —
       ikke en kølig markedsplads. */
    --stallo-ink: #2b2622;
    --stallo-ink-muted: #6b6259;
    --stallo-line: #e5e0d8;
    --stallo-surface: #ffffff;
    --stallo-surface-sunken: #faf8f5;

    /* Skovgrøn til handlinger, terracotta til vejboder. To accenter er nok:
       den ene fører brugeren videre, den anden skelner de to salgstyper.

       De tre peger på mærkets farver frem for på egne, næsten ens værdier. Før
       logoet kom, stod her #2f6f4f og #b4552a — et par nuancer ved siden af, og
       det ses når en grøn knap står lige under et grønt logo. */
    --stallo-accent: var(--lv-kortgroen);
    --stallo-accent-strong: var(--lv-vejkant);
    --stallo-accent-soft: #eaf2ed;
    --stallo-clay: var(--lv-fundorange);
    --stallo-clay-soft: #fbeee7;

    --stallo-radius: 12px;
    --stallo-radius-sm: 8px;

    /* Bootstrap-tokens peger ind i paletten ovenfor. */
    --bs-primary: var(--stallo-accent);
    --bs-primary-rgb: 46, 107, 74;
    --bs-body-color: var(--stallo-ink);
    --bs-body-bg: var(--stallo-surface);
    --bs-secondary-color: var(--stallo-ink-muted);
    --bs-border-color: var(--stallo-line);
    --bs-border-radius: var(--stallo-radius-sm);
    --bs-border-radius-lg: var(--stallo-radius);
    --bs-link-color: var(--stallo-accent);
    --bs-link-hover-color: var(--stallo-accent-strong);
    --bs-link-color-rgb: 46, 107, 74;

    --bs-body-font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
}

body {
    background: var(--stallo-surface);
    -webkit-font-smoothing: antialiased;
}

/* Fraunces kun til overskrifter. En display-serif i brødtekst bliver trættende at
   læse; i overskrifter giver den platformen karakter. */
h1, h2, h3, .font-display {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--stallo-ink);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }

/* Bootstraps knapper er kantede og skarpe som standard; her får de samme
   afrunding som kortene, så fladerne hænger sammen. */
.btn {
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-border-radius: var(--stallo-radius-sm);
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--stallo-accent);
    --bs-btn-border-color: var(--stallo-accent);
    --bs-btn-hover-bg: var(--stallo-accent-strong);
    --bs-btn-hover-border-color: var(--stallo-accent-strong);
    --bs-btn-active-bg: var(--stallo-accent-strong);
    --bs-btn-active-border-color: var(--stallo-accent-strong);
    --bs-btn-disabled-bg: var(--stallo-accent);
    --bs-btn-disabled-border-color: var(--stallo-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--stallo-accent);
    --bs-btn-border-color: var(--stallo-accent);
    --bs-btn-hover-bg: var(--stallo-accent);
    --bs-btn-hover-border-color: var(--stallo-accent);
    --bs-btn-active-bg: var(--stallo-accent-strong);
    --bs-btn-active-border-color: var(--stallo-accent-strong);

    /* Disabled har sine egne variabler. Uden dem står en deaktiveret knap
       tilbage i Bootstraps blå, mens resten af siden er grøn. */
    --bs-btn-disabled-color: var(--stallo-ink-muted);
    --bs-btn-disabled-border-color: var(--stallo-line);
}

.form-control, .form-select {
    padding: 0.6rem 0.75rem;
    border-color: var(--stallo-line);
}

.form-control:focus, .form-select:focus {
    border-color: var(--stallo-accent);
    box-shadow: 0 0 0 3px rgb(46 107 74 / 15%);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Checkbox og radio. Bootstrap har den afkrydsede tilstand hardkodet til sin egen
   blå i den kompilerede CSS — den læses ikke fra --bs-primary — så den skal sættes
   direkte, ellers står ét blåt element tilbage i en grøn palette. */
.form-check-input:checked {
    background-color: var(--stallo-accent);
    border-color: var(--stallo-accent);
}

.form-check-input:focus {
    border-color: var(--stallo-accent);
    box-shadow: 0 0 0 3px rgb(46 107 74 / 15%);
}

.form-text {
    color: var(--stallo-ink-muted);
}

/* Bootstraps alerts er kraftige nok til en advarsel om datatab. Her bruges de
   til kvitteringer ("Dine oplysninger er gemt"), så de tones ned. */
.alert {
    border-radius: var(--stallo-radius-sm);
    border-width: 1px;
    padding: 0.75rem 1rem;
}

.alert-success {
    --bs-alert-bg: var(--stallo-accent-soft);
    --bs-alert-border-color: #cfe3d7;
    --bs-alert-color: var(--stallo-accent-strong);
}

.alert-warning {
    --bs-alert-bg: #fdf6e8;
    --bs-alert-border-color: #f0e0bd;
    --bs-alert-color: #8a6415;
}

.alert-danger {
    --bs-alert-bg: var(--stallo-clay-soft);
    --bs-alert-border-color: #f2d3c5;
    --bs-alert-color: #96421f;
}

/* Synligt fokus. Bootstraps default forsvinder på farvede flader, og et
   tastaturbrugerbart kort skal kunne ses. */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--stallo-accent);
    outline-offset: 2px;
}

/* FocusOnNavigate flytter fokus til sidens h1 ved navigation, så en skærmlæser
   læser den nye side op. Det giver elementet tabindex="-1" og dermed en
   fokusring, som her ville tegne en kasse om hver eneste overskrift. Ringen
   skjules kun for programmatisk fokus — elementer man selv kan tabbe til
   beholder deres. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Etiket der skelner loppesalg fra vejbod — det eneste sted de to typer
   behøver at se forskellige ud. */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.type-badge--flea {
    background: var(--stallo-accent-soft);
    color: var(--stallo-accent-strong);
}

.type-badge--stall {
    background: var(--stallo-clay-soft);
    color: var(--stallo-clay);
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fdf6e8;
    border-top: 1px solid #f0e0bd;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Kort-markører og popups.
   Ligger globalt og ikke i scoped CSS: Leaflet flytter elementerne ud i sine egne
   paneler, og scoped CSS' attribut-selector følger ikke med. */
.stallo-pin span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.map-popup {
    min-width: 12rem;
    max-width: 15rem;
}

.map-popup img {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.map-popup-type {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--stallo-ink-muted);
}

.map-popup h3 {
    font-size: 1rem;
    margin: 0.15rem 0 0.3rem;
}

.map-popup p {
    margin: 0 0 0.3rem;
    font-size: 0.8125rem;
    color: var(--stallo-ink-muted);
}

.map-popup a {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Nummereret pin på ruteкortet. Tallet er stoppets plads i listen — samme
   oplysning som cirklen ved siden af listen, så de kan genkendes som par. */
.route-pin span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Redaktionelt indhold fra CMS. Reglerne står her og ikke i en scoped CSS-fil, fordi HTML'en
   kommer udefra: der er ingen Blazor-komponent at hænge scope-attributten på, og markup'en
   kan indeholde hvad som helst en redaktør har skrevet. */
.article {
    max-width: 44rem;
}

.article-image {
    width: 100%;
    height: auto;
    border-radius: var(--stallo-radius);
    margin: 1.5rem 0;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.article-body > * + * {
    margin-top: 1rem;
}

.article-body h2,
.article-body h3 {
    margin-top: 2rem;
}

/* Billeder fra CMS bærer ikke deres dimensioner med i URL'en, så de kan ikke få width/height
   i markup'en. Uden max-width sprænger et stort foto layoutet. */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--stallo-radius-sm);
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
}

.article-body th,
.article-body td {
    border: 1px solid var(--stallo-line);
    padding: 0.5rem 0.65rem;
    text-align: left;
}

.article-body blockquote {
    border-left: 3px solid var(--stallo-accent);
    padding-left: 1rem;
    color: var(--stallo-ink-muted);
    margin-left: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}