/* ==========================================================================
   EHA – E-handel på EK
   Design tokens og styling for én-sides præsentationssiden.
   Rækkefølge: tokens → base → komponenter → sektioner.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Farver */
  --creme:     #FBEBC6;
  --creme-lys: #FDF6E3;   /* bånd der løftes en anelse */
  --creme-dyb: #F6E0A8;   /* bånd der sænkes en anelse */
  --blaa:      #0055F6;
  --blaa-lys:  #2185F1;
  --turkis:    #D2EEF0;
  --lavendel:  #D9DDFF;
  --gul-lys:   #FFFCAF;
  --gul:       #FDD470;
  --koral:     #FF9D84;
  --rosa:      #F3C9C6;
  --hvid:      #FFFFFF;
  --blaek:     #1C1B18;

  /* Streger og former */
  --streg:     2px solid var(--blaek);
  --radius-kort:  18px;
  --radius-foto:  14px;
  --radius-pille: 100px;

  /* Layout */
  --bredde:    1320px;
  --luft:      80px;   /* lodret sektionspadding */
  --side:      24px;   /* vandret sidepadding */

  /* Den sticky navs faktiske højde. Bruges til at holde ankre fri af den.
     Skifter i mobil-media queryet i afsnit 8, hvor linkene får deres egen
     række og baren derfor bliver højere. */
  --nav-h:     92px;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Regnes ud fra navens højde i stedet for en fast værdi, så ankrene også
     rammer rigtigt på mobil, hvor baren er højere. +20px er luft. */
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--blaek);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  /* Versaler er forbeholdt bannerets h1. Sektionsoverskrifterne havde
     samme behandling og konkurrerede derfor med den om blikket. Anton i
     almindelig skrivemåde beholder karakteren, men råber ikke. */
  /* Designet angiver 1.02, men ringen på Å og prikkerne på Ø rager op over
     linjeboksen og støder ind i linjen ovenover. 1.09 var ikke nok: i "VI ER
     FIRE STUDERENDE / PÅ EHA" rørte ringen på Å linjen over, når h1 brækker
     på mobil. 1.16 er målt til at give luft nok i Anton. */
  line-height: 1.16;
}

a {
  color: var(--blaa);
  text-decoration: none;
}
a:hover { color: var(--blaa-lys); }

/* Synlig tastaturfokus – vigtigt for tilgængelighed */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blaa);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

/* ---------- 3. Genbrugelige komponenter ---------- */

/* Håndskrevet kicker over overskrifter */
.kicker {
  display: block;
  font-family: Caveat, cursive;
  font-weight: 700;
  /* Skalerer med overskrifterne, så hierarkiet holder på tværs af bredder.
     Med faste 24px faldt forholdet h2/kicker til 1,17 på mobil. */
  font-size: clamp(17px, 2.3vw, 22px);
  line-height: 1.25;
  color: var(--blaa);
  /* Holder afstand til overskriften nedenunder, så et Å ikke rammer kickeren */
  margin-bottom: 10px;
}
/* Lysegul udgave – til brug på mørk bund: hero-banneret og den blå CTA */
.kicker--light { color: var(--gul-lys); }

/* Knapper – pilleform, løfter sig let ved hover */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius-pille);
  white-space: nowrap;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Primærhandlingen "søg ind" har samme form og farve i nav, hero og CTA.
   Lighedsloven binder dem sammen som én handling frem for tre tilbud. */
.btn--primary { background: var(--koral); color: var(--blaek); border: var(--streg); }
.btn--outline { background: transparent;  color: var(--blaek); border: var(--streg); }
.btn--primary:hover,
.btn--outline:hover { color: var(--blaek); }

/* Størrelsesvarianter – samme figur, anden vægt */
.btn--stor  { font-size: 16px; padding: 16px 30px; }
.nav__links .btn { font-size: 15px; padding: 12px 22px; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Fotos. Alle billeder deler ramme og beskæring, så et <img> og en
   placeholder-boks fylder præcis det samme. */
.photo {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-foto);
}
.photo--portrait { aspect-ratio: 4 / 3; height: auto; max-height: 240px; margin-bottom: 20px; }
.photo--day      { height: 200px; border: var(--streg); }

/* Midlertidig boks indtil gruppens egne fotos er lagt i assets/ */
.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(28, 27, 24, .45);
  background: rgba(28, 27, 24, .04);
  border: 2px dashed rgba(28, 27, 24, .3);
}

/* Kort */
.card {
  border: var(--streg);
  border-radius: var(--radius-kort);
  padding: 28px;
}
.card--turkis   { background: var(--turkis); }
.card--lavendel { background: var(--lavendel); }
.card--rosa     { background: var(--rosa); }
.card--lysegul  { background: var(--gul-lys); }

/* Emnekort. Ens indbyrdes med vilje: de fire personkort varierer i farve,
   fordi de er fire forskellige mennesker – emnerne er én kategori, og
   lighedsloven skal sige det, i stedet for at love et system der ikke er. */
.card--emne     { background: var(--turkis); }

.card__name  { font-size: 22px; margin: 0; }
.card__meta  { font-size: 14px; font-weight: 600; opacity: .75; margin: 3px 0 18px; }
.card__quote { font-family: Caveat, cursive; font-size: 19px; font-weight: 700; color: var(--blaa); margin: 0 0 18px; }
.card__bio   { font-size: 15px; line-height: 1.65; margin: 0; }
.card__icon  { display: block; font-size: 28px; margin-bottom: 10px; }
.card__title { font-size: 18px; margin: 0 0 8px; }

/* Grids – auto-fit gør layoutet responsivt uden breakpoints */
.grid { display: grid; }
/* Eksplicitte trin frem for auto-fit: med præcis fire kort gav auto-fit et
   skævt 3+1-layout i hele mellemområdet. Nu er det 1 -> 2x2 -> 4. */
.grid--students { grid-template-columns: 1fr; gap: 36px; }
@media (min-width:  640px) { .grid--students { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1320px) { .grid--students { grid-template-columns: repeat(4, 1fr); } }

.grid--why      { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.grid--days     { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-bottom: 40px; }

/* Sektionsindpakning */
.section {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: var(--luft) var(--side);
}
.section h2 { font-size: clamp(26px, 3.7vw, 36px); margin: 10px 0 18px; }
.section__intro { font-size: 16px; max-width: 64ch; margin: 0 0 48px; }

/* Hverdag og FAQ har ingen mellemtekst, så overskriften bærer selv afstanden */
#hverdag h2,
#faq h2 { margin-bottom: 36px; }

/* Båndene har hver sin tone, men holdes tæt på cremen: springet er ca.
   halvt så stort som det oprindelige hvid/gul, så siden skifter roligere. */
.band--lys { background: var(--creme-lys); }
.band--dyb { background: var(--creme-dyb); }
.band .section { padding-left: var(--side); padding-right: var(--side); }
.band__body { font-size: 16px; max-width: 64ch; line-height: 1.6; margin: 0; }

/* ---------- 4. Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--creme);
  border-bottom: var(--streg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--side);
  flex-wrap: wrap;
}

.nav__logo { flex-shrink: 0; display: block; }
.nav__logo-img { height: 64px; width: auto; }

/* NÅR logo.png ligger i assets/: byt de to display-værdier herunder,
   så billedet vises i stedet for tekst-varianten. */
.nav__logo-img  { display: none; }
.nav__logo-text { display: block; }

.nav__logo-mark {
  display: block;
  font-family: Anton, Impact, sans-serif;
  font-size: 34px;
  letter-spacing: .01em;
  color: var(--blaa);
  line-height: 1;
}
.nav__logo-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gul);
  margin-left: 3px;
  vertical-align: baseline;
}
.nav__logo-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blaa);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
/* Knappen er ikke et menupunkt. Dobbelt afstand adskiller vejvisning
   fra handling, så nærhedsloven ikke gør dem til fire ligeværdige. */
.nav__links .btn { margin-left: 18px; }
/* Lodret padding giver ~44px trykflade – minimum for en finger på mobil.
   Teksten flytter sig ikke; det er kun det klikbare felt der vokser. */
.nav__link {
  font-weight: 600;
  font-size: 15px;
  padding: 13px 0;
  white-space: nowrap;
  /* inline-flex, fordi transform ikke virker på rene inline-elementer */
  display: inline-flex;
  align-items: center;
}

/* Fælles skæbne: alt klikbart løfter sig ens, så bevægelsen i sig selv
   fortæller at elementet kan trykkes på. */
.nav__link,
.faq__row summary { transition: transform .15s ease, color .15s ease; }
.nav__link:hover,
.faq__row summary:hover { transform: translateY(-2px); }

/* Samme løft som ved hover, men holdt fast: markerer den sektion man
   befinder sig i. Sættes af scriptet nederst i index.html. */
.nav__link--aktiv { transform: translateY(-2px); color: var(--blaa-lys); }

/* ---------- 5. Hero-banner ---------- */
/* Fuldbredde-foto med teksten ovenpå. Billedet ligger som <img> og ikke som
   background-image, så det har alt-tekst og tæller som indhold. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62vh, 600px);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lidt over midten: holder de vinkende studerende i beskæringen, også
     når banneret bliver smalt og højt på mobil. */
  object-position: 50% 42%;
  border-radius: 0;
}
/* Mørkt slør, så hvid tekst kan læses oven på et lyst foto. Ét jævnt lag
   plus et retningsbestemt, der er kraftigst dér hvor teksten står. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(28, 27, 24, .42), rgba(28, 27, 24, .42)),
    linear-gradient(100deg, rgba(28, 27, 24, .68) 0%, rgba(28, 27, 24, .34) 55%,
                            rgba(28, 27, 24, 0) 100%);
}
/* Bærer .section, så venstrekanten flugter med resten af siden */
.hero__indhold { position: relative; width: 100%; }

/* Den sekundære knap er sort på sort ramme – ubrugelig oven på banneret.
   Samme figur, vendt om, ligesom overskriften. */
.hero .btn--outline,
.hero .btn--outline:hover { color: var(--hvid); border-color: var(--hvid); }

.hero h1 {
  font-size: clamp(38px, 7vw, 64px);
  text-transform: uppercase;
  color: var(--hvid);
  margin: 10px 0 18px;
}
.hero .kicker { font-size: clamp(20px, 3.1vw, 28px); }
.lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 32px;
  color: var(--hvid);
}

/* ---------- 6. FAQ ---------- */
.faq { display: flex; flex-direction: column; }

.faq__row {
  border-bottom: var(--streg);
  padding: 26px 0;
}
.faq__row summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  font-family: Anton, Impact, sans-serif;
  font-size: 18px;
  list-style: none;
}
.faq__row summary::-webkit-details-marker { display: none; }

/* "+" der bliver til "–" når punktet er åbent */
.faq__row summary::after {
  content: "+";
  font-family: Anton, Impact, sans-serif;
  font-size: 22px;
  color: var(--blaa);
  flex-shrink: 0;
}
.faq__row[open] summary::after { content: "\2013"; }

.faq__row p {
  /* 9px til spørgsmålet mod 22px til skillelinjen – forholdet 1:2,4 gør
     bindingen entydig. Før var det 12:18 og dermed nærmest neutralt. */
  margin: 11px 0 0;
  font-size: 15px;
  line-height: 1.6;
  opacity: .85;
  max-width: 60ch;
}

/* ---------- 7. CTA og footer ---------- */
.cta {
  background: var(--blaa);
  padding: 88px var(--side);
  text-align: center;
}
.cta__heading {
  font-size: clamp(30px, 5vw, 48px);
  color: var(--hvid);
  margin: 10px auto 18px;
  max-width: 18ch;
}
.cta__body {
  color: var(--hvid);
  opacity: .85;
  max-width: 48ch;
  margin: 0 auto 34px;
  font-size: 16px;
}

.footer {
  background: var(--creme);
  padding: 36px var(--side);
  text-align: center;
  font-size: 13.5px;
  opacity: .7;
}

/* ---------- 8. Mobil-nav ----------
   Det eneste breakpoint på siden. Under 640px kan logo og links ikke være
   på samme række, og en wrappet bar får en uforudsigelig højde – hvilket
   ville sende ankerlinkene forkert. Her låses layoutet i stedet fast til
   to rækker med en kendt højde (--nav-h), så scroll-padding passer. */
@media (max-width: 640px) {
  :root { --nav-h: 122px; }

  .nav { padding: 12px var(--side); gap: 10px; }

  .nav__logo-mark { font-size: 26px; }
  .nav__logo-sub  { font-size: 9px; letter-spacing: .12em; }

  /* Egen række, jævnt fordelt – i stedet for at wrappe tilfældigt */
  .nav__links {
    width: 100%;
    gap: clamp(8px, 3vw, 14px);
    flex-wrap: nowrap;
  }
  /* Links samlet til venstre, handlingen skubbet helt ud til højre */
  .nav__links .btn { margin-left: auto; }
  /* min-height frem for padding: trykfladen er 44px uanset hvor meget
     skriften skalerer ned på de smalleste skærme. */
  .nav__link {
    font-size: clamp(12px, 3.4vw, 14px);
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
  .nav__links .btn {
    font-size: clamp(12px, 3.4vw, 14px);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 clamp(10px, 3.5vw, 16px);
  }
}

/* ---------- 9. Respekter reduceret bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav__link, .faq__row summary { transition: none; }
  .btn:hover, .nav__link:hover, .faq__row summary:hover { transform: none; }
  /* Farven bliver tilbage som markering, når bevægelsen fjernes */
  .nav__link--aktiv { transform: none; }
}