/*
 * Stilark for ReiseAPP.
 *
 * Alle valg her er styrt av WCAG 2.2 nivå AA, ikke bare estetikk:
 * - Kontrastforhold på minst 4.5:1 for normal tekst (kravet i SC 1.4.3).
 * - Interaktive elementer minst 24x24 CSS-piksler (SC 2.5.8) — vi går
 *   bevisst høyere (44px) siden målgruppen inkluderer folk med nedsatt
 *   finmotorikk, ikke bare det lovpålagte minimumet.
 * - Tydelig fokusmarkering for tastaturnavigasjon (SC 2.4.7).
 * - Status vises aldri med farge alene (SC 1.4.1) — se .status-ikon.
 */

:root {
    --farge-bakgrunn: #ffffff;
    --farge-tekst: #1a1a1a;
    --farge-kant: #4a4a4a;
    --farge-fokus: #0b5fff;
    --farge-bekreftet: #14622b;
    --farge-avvik: #7a2e00;
    --touch-mal: 44px;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--farge-bakgrunn);
    color: var(--farge-tekst);
    font-family: system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 1rem 2rem;
}

/* Skjules visuelt inntil elementet får fokus, slik at tastaturbrukere kan
   hoppe forbi navigasjonen, uten at museklikk-brukere ser en unødvendig
   lenke øverst på siden. */
.hopp-lenke {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--farge-fokus);
    color: #ffffff;
    padding: 0.75rem 1rem;
    z-index: 100;
}

.hopp-lenke:focus {
    left: 1rem;
}

/* Synlig, tydelig fokusring på alle interaktive elementer — fjernes aldri
   uten at det erstattes med noe minst like synlig. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--farge-fokus);
    outline-offset: 2px;
}

.skjemafelt {
    margin-bottom: 1rem;
}

.skjemafelt label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.skjemafelt input,
.skjemafelt textarea {
    width: 100%;
    max-width: 28rem;
    min-height: var(--touch-mal);
    padding: 0.5rem;
    border: 2px solid var(--farge-kant);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.hjelpetekst {
    font-size: 0.9rem;
    color: var(--farge-kant);
    margin: 0.25rem 0 0;
}

/* Språkvelger i header (se index.html/om.html) — høyrestilt. Viser kun et
   flagg (bevisst valg, se index.html sin kommentar om aria-hidden), så
   min-height/min-width erstatter her button{} sitt 44px-mål eksplisitt
   (i stedet for å arve fra button{}, siden dette fortsatt er en lenke,
   ikke en knapp — den navigerer, den utfører ingen handling). Uten en
   eksplisitt trykkflate ville selve emoji-glyffen alene vært et for lite
   WCAG 2.5.8-mål. */
.spraakvalg {
    text-align: right;
    margin: 0 0 1rem;
}

.spraakvalg a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-mal);
    min-width: var(--touch-mal);
    padding: 0.25rem;
    text-decoration: none;
}

.spraakvalg a:hover {
    filter: brightness(0.8);
}

.spraakvalg-flagg {
    width: 1.75rem;
    /* Border gjør flagget synlig mot den hvite bakgrunnen selv når det
       (som det norske) selv har hvitt i designet — uten denne ville
       flaggets egne kanter forsvunnet inn i siden sin bakgrunnsfarge. */
    outline: 1px solid var(--farge-kant);
}

.kategori-valg,
.mellompunkt-valg {
    border: 2px solid var(--farge-kant);
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 1rem;
}

.kategori-valg legend,
.mellompunkt-valg legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

.mellompunkt-felt {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.mellompunkt-felt .skjemafelt-innhold {
    flex: 1;
    min-width: 0;
}

.fjern-mellompunkt-knapp {
    flex-shrink: 0;
    background: transparent;
    color: var(--farge-tekst);
    border: 2px solid var(--farge-kant);
    padding: 0.5rem 0.75rem;
}

.sekundær-knapp {
    background: transparent;
    color: var(--farge-fokus);
    border: 2px solid var(--farge-fokus);
}

.avkrysning {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--touch-mal);
}

/* Avkrysningsboksen selv holdes på minst 24px (WCAG 2.5.8-minimum) —
   mindre kritisk enn knapper/lenker siden avkrysningsbokser normalt
   aktiveres via den tilhørende, større label-teksten ved siden av. */
.avkrysning input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.avkrysning label {
    cursor: pointer;
}

button {
    min-height: var(--touch-mal);
    min-width: var(--touch-mal);
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--farge-fokus);
    color: #ffffff;
    border: none;
    cursor: pointer;
}

button:hover {
    filter: brightness(0.9);
}

/* button{} setter en heldekkende egen bakgrunnsfarge og border:none — det
   fjerner nettleserens EGEN innebygde trykk-effekt (som normalt kommer fra
   akkurat border/bakgrunn), uten at noe erstatter den. Uten denne regelen
   gir derfor et klikk/trykk ingen synlig respons i det hele tatt, kun et
   usynlig øyeblikk før handlingen utføres — reelt meldt av bruker ved
   "Lagre"-knappen i /admin. Mørkere enn :hover (0.8 mot 0.9) slik at
   trykket kjennes tydelig forskjellig fra bare det å holde musepekeren
   over knappen. Kun en fargeendring, ingen bevegelse/transform — unngår
   bevisst enhver animasjon her, i tråd med appens øvrige hensyn til
   bevegelsessensitivitet (se app.js sin begrunnelse for animate:false). */
button:active {
    filter: brightness(0.8);
}

.sok-knapperad {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Rask, visuell oppsummering av total avstand/kjøretid ved siden av
   søkeknappen — se app.js sin håndterSøk. Tom (og usynlig i layouten,
   siden den ikke har innhold) før første søk. */
.rute-oppsummering {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farge-kant);
}

#kart {
    height: 24rem;
    width: 100%;
    border: 2px solid var(--farge-kant);
}

/* Kartmarkører for ressurskategorier — se byggMarkørSvg/byggKategoriIkon i
   app.js. Skyggen holder symbolet lesbart mot det topografiske kartgrunnlaget
   uansett hvilken bakgrunnsfarge (skog, vann, snaufjell) det havner over. */
.kategori-markør {
    width: 28px;
    height: 36px;
}

.kategori-markør svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Klyngeikon (flere ressurser gruppert) — se byggKlyngeIkon i app.js. Egen
   klasse (ikke .kategori-markør) fordi L.divIcon sin className ERSTATTER
   Leaflets standard klasse i stedet for å legge til, så den samme
   display:block-nullstillingen av inline-SVG-ens grunnlinjemellomrom må
   gjentas her — uten den ville klyngeikonet ligget noen piksler forskjøvet
   fra det beregnede ankerpunktet. */
.ressurs-klynge svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Innholdet i kartmarkørenes popup (se byggPopupInnhold/byggAvvikSkjema i
   app.js) — "Meld avvik"-knappen og skjemaet den avslører. Knappene her
   BEHOLDER den globale button{}-regelens 44px touch-mål (se toppen av
   denne filen om hvorfor) — kun avstand og bredde justeres, ikke selve
   trykkflaten. */
.ressurs-popup .meld-avvik-knapp,
.ressurs-popup .bestill-knapp {
    display: block;
    margin-top: 0.5rem;
}

.meld-avvik-skjema {
    margin-top: 0.5rem;
}

/* Synlig spørsmålslabel for det auto-åpne "hva består dette i"-skjemaet
   (se byggAvvikSkjema/visResultat i app.js) — kun satt inn når skjemaet
   fikk et spørsmål, ellers finnes ikke elementet i det hele tatt. */
.meld-avvik-sporsmal {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.meld-avvik-skjema textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.4rem;
}

.meld-avvik-skjema button {
    margin-top: 0.35rem;
}

#resultat-liste {
    list-style: none;
    padding: 0;
}

.ressurs-kort {
    border: 2px solid var(--farge-kant);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

/* Statusmarkering kombinerer ALLTID et symbol og en tekst — aldri bare en
   bakgrunnsfarge — slik at informasjonen når frem uavhengig av fargesyn. */
.status-ikon {
    font-weight: 700;
}

.status-ikon--bekreftet {
    color: var(--farge-bekreftet);
}

.status-ikon--avvik {
    color: var(--farge-avvik);
}

/* Gjenbruker --farge-kant (nøytral grå) fremfor en egen "uverifisert"-
   fargevariabel — uverifisert er verken en bekreftelse eller et avvik, så
   den samme nøytrale grått som kant-fargen ellers i skjemaet passer
   semantisk godt, og unngår enda en fargekonstant å holde konsistent. */
.status-ikon--uverifisert {
    color: var(--farge-kant);
}

/* Bruker samme nøytrale/informative blåtone som --farge-fokus ellers i
   siden (fokusring, rutelinjen på kartet) — en brukerforklaring er verken
   en bekreftelse eller et avvik i seg selv, kun utdypende informasjon. */
.status-ikon--forklaring {
    color: var(--farge-fokus);
}

.posisjon-rad {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Av/på-bryter for "Min posisjon" — fylt bakgrunn når visningen er aktiv,
   slik at tilstanden ikke bare vises med farge-/tekstendring i statusfeltet. */
.sekundær-knapp[aria-pressed="true"] {
    background: var(--farge-fokus);
    color: #fff;
}

/* Lenke som ser ut som en knapp (Åpne i Google Maps) — en ekte <a>, siden
   den navigerer bort fra siden. [hidden] må stå eksplisitt fordi display
   under ellers overstyrer den innebygde hidden-oppførselen. */
.knapp-lenke {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-mal);
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    background: var(--farge-fokus);
    color: #ffffff;
    text-decoration: none;
}

.knapp-lenke[hidden] {
    display: none;
}

.knapp-lenke:hover {
    filter: brightness(0.9);
}

.knapp-lenke:focus-visible {
    outline: 3px solid var(--farge-fokus);
    outline-offset: 2px;
}

/* Trafikkmeldinger: venstrekant i lagets farge, i tillegg til den tekstlige
   nivåangivelsen i kortet — farge alene er aldri eneste signal (WCAG 1.4.1). */
.trafikk-kort--rod {
    border-left: 6px solid #c62828;
}

.trafikk-kort--gul {
    border-left: 6px solid #f5b800;
}

.trafikk-markør {
    background: none;
    border: none;
}