/*
 * styles.css — alt udseende for Den Glade Bondemand.
 *
 * Denne fil er det eneste sted, farver, skrifttyper og layout bor. Alle fire
 * HTML-sider (index, priser, om, kontakt) henter den samme fil, så en farve
 * eller en skriftstørrelse kun skal rettes ét sted for at ændre sig overalt.
 *
 * Filen er delt op i afsnit, der kommer i samme rækkefølge, som man møder dem
 * på siden:
 *
 *   1. Variabler     — paletten og skrifterne, samlet øverst
 *   2. Grundlag      — reset, body, links, .wrap
 *   3. Menu          — den øverste bjælke, i to udgaver
 *   4. Hero          — droneklippet i fuld skærm på forsiden
 *   5. Knapper       — handlingen "ring og bestil" og vennerne
 *   6. Afsnit        — gårdbutikken, de tre punkter, landmanden, billederne, arrangementer
 *   7. Prislisten    — søgefelt, filtre og selve listen
 *   8. Kontakt       — adresseblokken
 *   9. Footer
 *
 * Der er ingen dark mode. Siden er altid lys, fordi hele paletten bygger på
 * varmt papir, som ikke findes i en mørk udgave. Se docs/plans/ny-hjemmeside.md,
 * beslutning 7.
 */

/* ---------------------------------------------------------------
   1. Variabler
   Paletten er bleg grøngrå med rød som handlingsfarve. To accenter med
   hver sin opgave:
   markgrøn bærer troværdigheden, rødler bærer handlingen. Den røde
   bruges KUN til noget, man kan klikke på — ellers holder den op med at
   betyde "gør det her".
   --------------------------------------------------------------- */

:root {
  --papir:       #E4E8DC;
  --korn:        #D6DCCB;
  --mark:        #2F4A32;
  --mark-dyb:    #223A26;
  /* Mørk vinrød. Sidens eneste accentfarve: knapper, telefonnummeret,
     understregninger ved museover, og hero'ens overskrift og underrubrik. */
  --ler:         #660202;
  --ler-lys:     #8A1010;
  /* Hero'en bruger den samme farve. Den har sit eget navn, fordi den dér
     er tekstfarve og ikke en handling — men der er kun ét sted at rette. */
  --hero-tekst:  var(--ler);
  --blaek:       #171A15;
  --blaek-2:     #4C544A;
  --blaek-3:     #788275;
  --linje:       #C6CEBA;
  --linje-blod:  #D8DFCF;

  --serif: "Times New Roman", Times, serif;
  --sans:  "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1180px;
}

/* ---------------------------------------------------------------
   2. Grundlag
   --------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

img, video { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ler);
  outline-offset: 3px;
}

/* .wrap holder indholdet i midten og giver det luft ud til kanterne.
   Hvert afsnit på siden har sin egen .wrap indeni, så baggrundsfarven
   kan gå helt ud til skærmkanten, mens teksten bliver stående. */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Overskrifter bruger Times New Roman. Den ligger allerede på næsten alle
   computere og telefoner, så den skal ikke hentes nogen steder fra.

   Forsiden er undtagelsen: den bruger Fraunces, som hentes fra Google Fonts
   i index.html. SOFT og WONK er to indstillinger i Fraunces: SOFT runder
   hjørnerne en smule af, WONK gør enkelte bogstaver bevidst skæve. */
.forside {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}

.label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blaek-3);
  margin: 0 0 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   3. Menu
   To udgaver af den samme bjælke:
   .topbar            — almindelig, på papir, med en streg under
   .topbar.over-hero  — gennemsigtig, lagt oven på droneklippet
   --------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papir);
  border-bottom: 1px solid var(--linje);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* Træet foran navnet. Logoet er tegnet i samme mørke blækfarve som
   teksten (--blaek), så de to står som én. */
.wordmark img {
  display: block;
  height: 2.75rem;
  width: auto;
}

.nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9375rem;
}

.nav a {
  text-decoration: none;
  color: var(--blaek-2);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover { color: var(--blaek); border-bottom-color: var(--ler); }

/* aria-current="page" sætter browseren ikke selv — det står i HTML'en på
   den side, man er på, så man kan se hvor man er. */
.nav a[aria-current="page"] {
  color: var(--blaek);
  border-bottom-color: var(--blaek);
}

/* Oven på droneklippet er der ingen baggrund at hvile på. Teksten er mørk,
   ligesom på urland.dk, og et lyst skær øverst holder den læsbar, mens
   billedet bevæger sig. Skæret har sidens egen baggrundsfarve, ikke hvid,
   så det ikke bryder med paletten. */
.topbar.over-hero {
  position: absolute;
  inset: 0 0 auto 0;
  background: linear-gradient(to bottom, rgba(228, 232, 220, 0.85), rgba(228, 232, 220, 0));
  border-bottom: 0;
  padding-bottom: 2.5rem;
}

.topbar.over-hero .nav a { color: var(--blaek); }

/* ---------------------------------------------------------------
   4. Hero
   Droneklippet fylder hele skærmen. Klippet ligger bagerst, teksten
   ovenpå. Billedet på .hero-media er det samme som klippets første
   billede, så der står noget med det samme, mens videoen hentes.
   --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--korn);
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Klippet er optaget i diset morgenlys og er meget blegt. Et lille nøk
     mætning og kontrast giver markerne farve igen uden at se redigeret ud. */
  filter: saturate(1.15) contrast(1.06);
}

/* Et jævnt slør i sidens baggrundsfarve, lagt med samme styrke over hele
   klippet. Det dæmper billedet omkring halvdelen, så den mørke tekst kan
   læses hele klippet igennem, uden at nogen del af billedet bliver vasket
   mere ud end resten. Tallet er den eneste knap: lavere giver et kraftigere
   billede og svagere tekst, højere det modsatte. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(228, 232, 220, 0.5);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(8rem, 18vh, 12rem) clamp(3rem, 8vh, 5rem);
}

.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  max-width: 14ch;
  text-wrap: balance;
  color: var(--hero-tekst);
}

.hero .lead {
  margin: 1.5rem 0 0;
  max-width: 42ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  /* 500, ikke 400. General Sans' normale vægt er tynd, og oven på et
     billede slides tynde bogstaver op af baggrunden. */
  font-weight: 500;
  color: var(--hero-tekst);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------
   5. Knapper
   Kun én lerfarvet knap per skærmbillede. Lerfarven betyder "det her er
   handlingen" — bruges den to gange, betyder den ingenting.
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.7rem 1.35rem;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-ler {
  background: var(--ler);
  color: #FDF2EE;
}

.btn-ler:hover { background: var(--ler-lys); }

/* Den sekundære knap har ingen kant — den er en flade i sidens egen
   baggrundsfarve. Den gennemsigtige kant fra .btn bliver stående, så de to
   knapper er præcis lige høje. */
.btn-linje {
  background: rgba(228, 232, 220, 0.9);
  color: var(--blaek);
}

.btn-linje:hover { background: var(--blaek); color: var(--papir); }

/* ---------------------------------------------------------------
   6. Afsnit
   --------------------------------------------------------------- */

section { border-bottom: 1px solid var(--linje); }

.hero { border-bottom: 0; }

/* Åbningstider — tre rækker med samme form: hvem, hvornår, og hvad man
   kan få. Tiderne står i almindelig tekststørrelse, ikke som store tal.
   Rækkerne deler en streg foroven, så listen læses som én tabel og ikke
   som tre løsrevne kasser. */
.aabning {
  background: var(--korn);
}

.aabning-inner {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.aabning h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}

.sted {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: 1.25rem;
  border-top: 1px solid var(--linje);
}

.sted h3 {
  font-size: 1.1875rem;
  margin: 0;
}

.sted .tid {
  margin: 0.2rem 0 0;
  font-weight: 500;
  color: var(--blaek);
}

.sted > p {
  margin: 0;
  color: var(--blaek-2);
  font-size: 0.9375rem;
  max-width: 52ch;
}

/* Billedet af vejboden står under teksten i højre kolonne, med en lille
   billedtekst i kursiv. */
.sted figure {
  grid-column: 2;
  margin: 0.25rem 0 0;
  max-width: 300px;
}

.sted figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.sted figcaption {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--blaek-3);
}

@media (max-width: 640px) {
  .sted { grid-template-columns: 1fr; gap: 0.5rem; }
  .sted figure { grid-column: auto; }
}

/* De tre punkter: hvorfor handle her. */
.arrangement {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.arrangement h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.arrangement p { margin: 0; color: var(--blaek-2); max-width: 60ch; }
.arrangement p + p { margin-top: 1rem; }
.arrangement .label { color: var(--blaek-3); }

.punkter-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.punkt h3 { font-size: 1.3125rem; margin-bottom: 0.5rem; }
.punkt p { margin: 0; color: var(--blaek-2); font-size: 0.9375rem; max-width: 32ch; }

/* Landmanden — billedet fra marken øverst, teksten om Keld under. */
.portraet-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 2.5rem);
  /* Ingen ekstra luft over eller under, så billedet sidder tæt under
     sidens indledning, og "Sådan driver vi gården" følger lige efter. */
  padding-block: 0;
}

.portraet figure { margin: 0; max-width: 760px; }

.portraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.portraet h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); margin-bottom: 0.75rem; }

.portraet p { color: var(--blaek-2); max-width: 52ch; margin: 0 0 1rem; }
.portraet p:last-child { margin-bottom: 0; }

/* Billederne under "Sådan driver vi gården". Vejboden er høj og fylder to
   rækker i venstre side; kålen er bred og fylder to kolonner nederst.
   Billederne beskæres, så alle rækker er lige høje. */
.galleri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 20vw, 260px);
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.galleri img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.galleri .hoej { grid-row: span 2; }
.galleri .bred { grid-column: span 2; }

@media (max-width: 640px) {
  .galleri { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
}

.sociale {
  display: flex;
  gap: 1.25rem;
  font-weight: 500;
}

.sociale a { text-decoration-color: var(--linje); text-underline-offset: 4px; }
.sociale a:hover { text-decoration-color: var(--ler); }

/* ---------------------------------------------------------------
   7. Prislisten
   --------------------------------------------------------------- */

.prices-head { padding-block: clamp(3rem, 6vw, 5rem) 1.75rem; }

.prices-head h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
  margin-bottom: 0.9rem;
}

.forbehold { margin: 0; color: var(--blaek-3); font-size: 0.9375rem; max-width: 52ch; }

.ledger { padding-block: 2.5rem 4rem; }

.kind + .kind { margin-top: 3.5rem; }

.kind-head {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--blaek);
}

.kind-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
}

.group { padding-top: 1.75rem; break-inside: avoid; }

/* Hver linje i prislisten: navn til venstre, pris til højre, og en
   prikket linje imellem, så øjet kan følge med fra navn til tal. */
.row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.row .name { flex: none; }

.row .dots {
  flex: 1;
  border-bottom: 1px dotted var(--linje);
  transform: translateY(-3px);
  min-width: 1rem;
}

.row .price {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.row .unit { color: var(--blaek-3); font-weight: 400; font-size: 0.8125rem; }

/* ---------------------------------------------------------------
   8. Kontakt
   --------------------------------------------------------------- */

.tlf {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--ler);
  text-decoration: none;
  line-height: 1.1;
  display: inline-block;
}

.tlf:hover { color: var(--ler-lys); text-decoration: underline; }

/* På om-siden glider afsnittet om Keld, "Sådan driver vi gården" og TV2
   Nord-afsnittet over i hinanden uden streg imellem. */
.drift,
.uden-streg { border-bottom: 0; }

/* Støtteafsnittet på om-siden. Står på kornfarve, så det skiller sig ud
   fra resten af siden, og så man kan se, at man er landet det rigtige sted,
   når man kommer fra støtteknappen. */
.stot { background: var(--korn); scroll-margin-top: 4rem; }

.arrangement strong { color: var(--blaek); font-weight: 600; }

/* Støtteknappen — den lille boks nederst i højre hjørne på alle fire sider.
   Den fører til støtteafsnittet på om-siden. Krydset skjuler den resten af
   besøget (sessionStorage, ingen cookies — se docs/adr/0003). Den er rød,
   fordi den er noget, man klikker på. */
.stot-boks {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 50;
  width: 7.75rem;
  background: var(--ler);
  color: #FDF2EE;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(23, 26, 21, 0.22);
  transition: background 0.15s ease;
}

.stot-boks:hover { background: var(--ler-lys); }

.stot-boks[hidden] { display: none; }

.stot-boks a {
  display: block;
  padding: 0.75rem 1.6rem 0.8rem 0.85rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.stot-boks button {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.75;
}

.stot-boks button:hover { opacity: 1; background: rgba(253, 242, 238, 0.15); }

.stot-boks :focus-visible { outline-color: #FDF2EE; }

/* ---------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------- */

footer {
  background: var(--mark-dyb);
  color: #D9DED3;
  margin-top: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

footer h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--papir);
  margin-bottom: 0.6rem;
}

footer p { margin: 0; font-size: 0.9375rem; }

footer a { color: inherit; text-underline-offset: 3px; }
footer a:hover { color: #FFFFFF; }

.kolofon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(217, 222, 211, 0.22);
  font-size: 0.8125rem;
  color: #A8B0A2;
}

/* ---------------------------------------------------------------
   Mindre skærme
   --------------------------------------------------------------- */

@media (max-width: 820px) {
  .butik-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-block: 0.75rem;
  }

  .nav {
    gap: 1.25rem;
    font-size: 0.875rem;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }

  .groups { grid-template-columns: 1fr; }
}