/* ------------------------------------------------------------------
   top-sites v1 - grundskabelon
   Magasinlayout efter designreferencen madmedlaura.dk:
   lys grå baggrund, hvide kort, mørk navigationsbjælke, versale
   kategorimærkater, tydelige artikelbilleder og behagelig læsebredde.

   Almindelig CSS, systemfonte, ingen eksterne filer, ingen sporing.
   Indhold og hovednavigation virker uden JavaScript.
   ------------------------------------------------------------------ */

:root {
  --ink:        #171b1f;
  --ink-soft:   #4a565f;
  --ink-faint:  #6b7780;
  --page:       #f2f4f6;
  --surface:    #ffffff;
  --line:       #dfe4e8;
  --line-soft:  #edf0f2;

  --brand:      #293f49;
  --brand-ink:  #ffffff;
  --brand-tint: #ebf3f6;
  --brand-tint-2: #e1edf1;
  --accent:     #c4623c;

  --focus:      #1a6ed8;

  --wrap:       1180px;
  --read:       760px;
  --radius:     4px;
  --gap:        24px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.theme-forest { --brand: #2c4636; --brand-tint: #eaf2ec; --brand-tint-2: #dfeae2; --accent: #a4682c; }
body.theme-plum   { --brand: #3d2c46; --brand-tint: #f1ecf4; --brand-tint-2: #e8e0ec; --accent: #9c4a6a; }
body.theme-clay   { --brand: #4a3a30; --brand-tint: #f3efec; --brand-tint-2: #eae3de; --accent: #a9603a; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.65 var(--font);
}

img { max-width: 100%; height: auto; display: block; background: var(--line-soft); }

a { color: var(--brand); }
a:hover { color: var(--accent); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }

/* Læsespalte. Uden sidebar centreres teksten i stedet for at klæbe til venstre. */
.wrap--read { max-width: calc(var(--read) + 32px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--brand); color: var(--brand-ink);
  padding: 10px 16px; text-decoration: none; border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: 8px; color: var(--brand-ink); }

/* ---------- Sitehoved ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }

.site-header__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-block: 18px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo__mark {
  width: 34px; height: 34px; flex: none; border-radius: 6px;
  background: var(--brand); position: relative; transform: rotate(-4deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.logo__mark::after {
  content: ""; position: absolute; inset: 11px;
  border: 2px solid var(--brand-tint); border-radius: 50%;
}
.logo__text {
  font-size: 1.32rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.1;
}

/* ---------- Navigation ---------- */

.nav { background: var(--brand); color: var(--brand-ink); }
.nav__details { position: relative; }

.nav__toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; list-style: none; user-select: none;
}
.nav__toggle::-webkit-details-marker { display: none; }

.nav__burger { width: 24px; height: 2px; background: currentColor; position: relative; flex: none; }
.nav__burger::before, .nav__burger::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
}
.nav__burger::before { top: -7px; }
.nav__burger::after  { top: 7px; }

.nav__list { list-style: none; margin: 0; padding: 0 0 12px; }
.nav__link {
  display: block; padding: 11px 2px; color: var(--brand-ink);
  text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav__link:hover, .nav__link.is-active { color: #fff; text-decoration: underline; }

@media (min-width: 860px) {
  /* På store skærme er der ingen udklapning: alle links står altid fremme.
     JavaScript sætter ganske vist details.open = true, men menuen må også
     virke UDEN JavaScript. Derfor får <details> her display: contents, så
     elementet ikke selv laver en boks og ikke kan skjule sine børn. Det er
     det, der gør menuen uafhængig af open-tilstanden. */
  .nav__toggle  { display: none; }
  .nav__details { display: contents; }
  .nav__list {
    display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 0;
  }
  .nav__link {
    padding: 13px 0; border-bottom: 3px solid transparent; font-size: .88rem;
  }
  .nav__link.is-active { border-bottom-color: var(--accent); text-decoration: none; }
}

/* ---------- Sektioner og gitter ---------- */

.main { padding-block: 28px 44px; }

.section { margin-bottom: 44px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section__h {
  margin: 0 0 18px; font-size: 1.28rem; font-weight: 700;
  padding-bottom: 8px; border-bottom: 2px solid var(--brand);
  display: inline-block;
}
.section__h a { text-decoration: none; color: inherit; }
.section__h a:hover { color: var(--accent); }
.section__more { font-size: .84rem; text-decoration: none; font-weight: 600; }
.section__more:hover { text-decoration: underline; }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.featured { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .featured { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
  .featured > .card--lead { grid-row: span 2; }
  /* Den store artikel er lige så høj som de to små ved siden af. Billedet
     vokser og fylder den ekstra højde, så der ikke står en tom hvid flade
     under teksten. */
  .featured > .card--lead .card__media {
    flex: 1 1 auto; aspect-ratio: auto; min-height: 280px; position: relative;
  }
  .featured > .card--lead .card__media img { position: absolute; inset: 0; }
}

/* ---------- Kort ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: .78rem; color: var(--ink-faint);
}
.card--lead .card__media { aspect-ratio: 16 / 9; }

.card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 9px; }

.chip {
  align-self: flex-start;
  background: var(--brand-tint); color: var(--brand);
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 9px; text-decoration: none; line-height: 1.2;
}
.chip:hover { background: var(--brand-tint-2); color: var(--brand); }

.card__title { margin: 0; font-size: 1.06rem; line-height: 1.32; font-weight: 700; }
.card--lead .card__title { font-size: 1.5rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--accent); text-decoration: underline; }

.card__meta { margin: 0; font-size: .8rem; color: var(--ink-faint); }
.card__excerpt { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* ---------- Brødkrummer ---------- */

.crumbs { margin: 0 0 20px; font-size: .82rem; color: var(--ink-faint); }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs__item + .crumbs__item::before { content: "›"; margin-right: 6px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); }

/* ---------- Artikel ---------- */

.article__head { margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.article__h1 { margin: 0; font-size: clamp(1.65rem, 4.2vw, 2.35rem); line-height: 1.22; font-weight: 700; max-width: 22ch; }
.listing__h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3.6vw, 2rem); }
.article__meta { margin: 0; font-size: .85rem; color: var(--ink-faint); display: flex; gap: 14px; flex-wrap: wrap; }

.article__hero { margin: 0 0 30px; }
.article__hero img {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  max-height: 520px; object-fit: cover;
}

.article__body { max-width: var(--read); margin-inline: auto; font-size: 1.06rem; line-height: 1.75; }
.article__body > * + * { margin-top: 1.15em; }
.article__body h2 { font-size: 1.42rem; line-height: 1.3; margin-top: 1.9em; }
.article__body h3 { font-size: 1.16rem; line-height: 1.35; margin-top: 1.6em; }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body li + li { margin-top: .4em; }
.article__body img { margin-inline: auto; border-radius: var(--radius); }
.article__body figure { margin: 1.8em 0; }
.article__body figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: .6em; }
.article__body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--brand-tint-2); color: var(--ink-soft); font-style: italic;
}
.article__body code {
  background: var(--line-soft); padding: 2px 5px; border-radius: 3px; font-size: .92em;
}
.article__body pre { background: var(--line-soft); padding: 14px; overflow-x: auto; border-radius: var(--radius); }
.article__body pre code { background: none; padding: 0; }

.article__body table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.article__body th, .article__body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.article__body thead th { background: var(--brand-tint); font-weight: 700; }
.article__body caption { caption-side: bottom; font-size: .84rem; color: var(--ink-faint); padding-top: 8px; text-align: left; }

@media (min-width: 700px) { .article__body table { display: table; } }

/* ---------- Sideinddeling ---------- */

.pager { margin-top: 34px; }
.pager__status { font-size: .84rem; color: var(--ink-faint); margin: 0 0 10px; }
.pager__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pager__link {
  display: inline-block; min-width: 40px; text-align: center;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; font-size: .9rem;
}
.pager__link:hover { border-color: var(--brand); }
.pager__link.is-current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }

/* ---------- Tomme tilstande ---------- */

.empty { text-align: center; padding: 46px 16px 60px; }
.empty--inline { text-align: left; padding: 20px 0 0; }
.empty__code { font-size: 3.4rem; font-weight: 700; color: var(--brand-tint-2); margin: 0; line-height: 1; }
.empty__h1 { font-size: 1.7rem; margin: 10px 0; }
.empty__lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 6px; }
.empty__hint { color: var(--ink-faint); margin: 0 0 22px; font-size: .92rem; }
.empty__nav ul { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; }

.btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--brand); color: var(--brand);
  text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--brand-tint); color: var(--brand); }
.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { background: #1f313a; color: #fff; }
.btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Kontakt ---------- */

.contact { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; padding-bottom: 20px; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; } }

.contact__intro { color: var(--ink-soft); max-width: 60ch; }
.contact__aside {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; font-size: .92rem; color: var(--ink-soft);
}
.contact__aside-h { margin: 0 0 10px; font-size: 1rem; color: var(--ink); }
.contact__org, .site-footer__org { display: flex; flex-direction: column; gap: 3px; font-style: normal; margin-top: 14px; font-size: .88rem; }

.form { max-width: 640px; margin-top: 22px; }
.form__note { font-size: .85rem; color: var(--ink-faint); margin: 0 0 18px; }
.form__actions { margin: 24px 0 0; }

.field { margin-bottom: 20px; }
.field__label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .94rem; }
.field__input {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.field__input:focus-visible { border-color: var(--focus); }
.field__input--area { resize: vertical; min-height: 170px; }
.field__input[aria-invalid="true"] { border-color: #a32d2d; }
.field__error { margin: 6px 0 0; color: #a32d2d; font-size: .86rem; font-weight: 600; }

.form__status { margin: 18px 0 0; padding: 13px 16px; border-radius: var(--radius); font-size: .95rem; }
.form__status.is-ok   { background: #e8f4ec; border: 1px solid #b7ddc4; color: #1d5b32; }
.form__status.is-error{ background: #fbeaea; border: 1px solid #edc2c2; color: #8f2626; }

/* Honeypot: skjult for mennesker, men til stede i DOM'en. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Landevælger (domænets rodforside) ---------- */

.picker { min-height: 100vh; display: flex; align-items: center; background: var(--page); padding-block: 50px; }
.picker__logo {
  font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-align: center;
  text-transform: uppercase; color: var(--brand); margin: 0 0 40px;
}
.picker__h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0 0 28px; text-align: center; }
.picker .empty__code { text-align: center; }

/* ---------- Footer ---------- */

.site-footer { background: var(--brand); color: rgba(255,255,255,.86); margin-top: 40px; font-size: .92rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }

.site-footer__grid {
  display: grid; gap: 30px; grid-template-columns: 1fr; padding-block: 38px 42px;
}
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: minmax(160px, 240px) 1fr; } }

/* AI/annonce-noten er et billede (hvid tekst på gennemsigtig baggrund, 3x
   opløsning). Det skaleres ned på smalle telefoner og dæmpes her, så det
   passer til footerens tekstfarve i alle farvetemaer. */
.site-footer__disclaimer {
  display: block; width: 100%; max-width: 360px; height: auto; opacity: .78;
  background: none; /* ellers skinner billedpladsholderen igennem */
}

.site-footer__h {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 12px; color: rgba(255,255,255,.62); font-weight: 700;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------- Flag i logoet ---------- */

.logo__flag {
  flex: none; display: block; height: 18px; width: auto;
  margin-left: -2px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.14);
}

/* ---------- "Vælg land" i menuen ---------- */

.nav__countries { position: relative; }
.countries__toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
}
.countries__toggle::-webkit-details-marker { display: none; }
.countries__caret {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.countries[open] .countries__caret { transform: rotate(-135deg); margin-top: 3px; }

.countries__list {
  list-style: none; margin: 0; padding: 6px 0 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px;
}
.countries__link {
  /* Fast flagkolonne: flagene har forskellige proportioner, men navnene
     skal stå på linje. */
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: var(--radius);
  color: var(--brand-ink); text-decoration: none; font-size: .9rem;
}
.countries__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.countries__link.is-current { font-weight: 700; }
.countries__flag {
  display: block; height: 14px; width: auto; justify-self: center;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}

@media (min-width: 860px) {
  /* På store skærme er landevalget en rigtig dropdown under menuen. */
  .countries__list {
    position: absolute; left: 0; top: 100%; z-index: 40;
    width: 380px; padding: 10px; gap: 2px 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 12px 28px rgba(15, 25, 35, .18);
  }
  .countries__link { color: var(--ink); }
  .countries__link:hover { background: var(--brand-tint); color: var(--ink); }
  .countries__link.is-current { background: var(--brand-tint); }
}

/* ---------- Rodens landevælger: kun flag ---------- */

.flags {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: grid; gap: 28px 24px; justify-items: center;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) { .flags { grid-template-columns: repeat(4, 1fr); } }

.flags__link {
  display: block; border-radius: 6px; line-height: 0;
  transition: transform .15s, box-shadow .15s;
}
.flags__flag {
  display: block; height: 72px; width: auto; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 6px 16px rgba(15, 25, 35, .14);
}
.flags__link:hover { transform: translateY(-3px); }
.flags__link:hover .flags__flag { box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 12px 24px rgba(15, 25, 35, .22); }
.flags__link:focus-visible { outline-offset: 6px; }
@media (max-width: 479px) { .flags__flag { height: 60px; } }

/* ---------- "Ældre artikler" under forsidens seneste artikler ---------- */

.more { margin: 30px 0 0; text-align: center; }
.more__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; }
.more__arrow { transition: transform .15s; }
.more__btn:hover .more__arrow { transform: translateX(3px); }

/* ---------- Noten øverst på artikelsider (billede, se make-disclaimer-images.php) ---------- */

/* "auto" i siderne: .wrap centrerer med margin-inline: auto, og en
   margin-genvej her ville slå centreringen fra på brede skærme. */
.article__notice { margin: 0 auto 20px; }
.article__notice img {
  /* "width: auto" er med vilje: billedet må gerne blive mindre end sin egen
     bredde, men ALDRIG større. Ellers blev den smalle udgave strukket op på
     telefoner, så noten fik samme skriftstørrelse som brødteksten. */
  display: block; width: auto; max-width: 100%; height: auto;
  margin-inline: auto; background: none;
}