/* =========================================================
   PDO · fælles designsystem til SiteNow
   Lægges efter Bootstrap 5. Egne klasser starter med pdo-,
   og hvert område på en side hedder area1, area2 osv.
   Layoutet klarer sig med flex-wrap, grid auto-fit og clamp().
   ========================================================= */

/* ---------- Skrifter (hostes selv af hensyn til GDPR) ---------- */
@font-face { font-family: 'Gabarito'; font-weight: 600; font-display: swap; src: url('/uploads/pdo2026_dk/files/fonts/gabarito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Gabarito'; font-weight: 700; font-display: swap; src: url('/uploads/pdo2026_dk/files/fonts/gabarito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('/uploads/pdo2026_dk/files/fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('/uploads/pdo2026_dk/files/fonts/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url('/uploads/pdo2026_dk/files/fonts/open-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  /* Farver: primære */
  --pdo-havre:    #F3EDE3;  /* baggrund */
  --pdo-espresso: #2A2320;  /* tekst, mørke sektioner, menu */
  --pdo-smor:     #F7D774;  /* kun accent: kaffeknap, cirkler, CTA */
  /* Farver: sekundære */
  --pdo-creme:    #EFE6D4;  /* kort og felter på havre */
  --pdo-hvid:     #FFFFFF;  /* kort */
  --pdo-stal:     #5B7A99;  /* grafer, data, links ved hover */
  --pdo-oliven:   #7A8467;  /* grafer */
  --pdo-graa:     #8C8279;  /* grafer, stiplede linjer */
  /* Tekstfarver */
  --pdo-tekst:         #2A2320;
  --pdo-tekst-broed:   #4A3F3A;
  --pdo-tekst-daempet: #6B5F59;
  --pdo-tekst-lys:     #F3EDE3;  /* på espresso */
  --pdo-tekst-lys-1:   #E9E2D8;  /* brødtekst på espresso */
  --pdo-tekst-lys-2:   #CFC5B8;  /* dæmpet på espresso */
  --pdo-linje-moerk:   #4A3F3A;
  --pdo-kort-moerk:    #3A302C;

  /* Skrifter */
  --pdo-font-display: 'Gabarito', system-ui, sans-serif;
  --pdo-font-body:    'Open Sans', system-ui, sans-serif;
  --pdo-fs-body: 17px;
  --pdo-lh-body: 1.6;
  --pdo-fs-hero: clamp(3rem, 7vw, 5.25rem);
  --pdo-fs-h1: clamp(2.2rem, 5vw, 3.5rem);
  --pdo-fs-h2: clamp(2rem, 4vw, 2.75rem);
  --pdo-fs-h3: 1.4rem;
  --pdo-fs-small: 14px;

  /* Layout */
  --pdo-max: 1200px;
  --pdo-gutter: 24px;
  --pdo-max-inset: calc(var(--pdo-max) + 2 * var(--pdo-gutter));  /* til elementer med egen sidemargin, så de flugter med sektionerne */
  --pdo-section-y: 88px;

  /* Former */
  --pdo-r-card: 24px;
  --pdo-r-card-lg: 28px;
  --pdo-r-pill: 26px;
  --pdo-btn-h: 52px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pdo-havre);
  color: var(--pdo-tekst);
  font-family: var(--pdo-font-body);
  font-size: var(--pdo-fs-body);
  line-height: var(--pdo-lh-body);
}
a { color: var(--pdo-tekst); }
a:hover { color: var(--pdo-stal); }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pdo-stal); outline-offset: 3px; }
body.pdo-locked { overflow: hidden; }

/* EDITOR i SITENOW: hvid baggrund i editoren, hvis den henter dette stylesheet */
body.cke_show_borders, body.cke_editable { background: #fff; color: var(--pdo-tekst); }

/* ---------- Layout ----------
   Hvert område på en side er en <section class="area areaN">. */
.pdo-wrap { max-width: var(--pdo-max); margin: 0 auto; }
.area { padding: var(--pdo-section-y) var(--pdo-gutter); }
.area h2, .pdo-book h2 {
  margin: 0; color: inherit;
  font-family: var(--pdo-font-display); font-weight: 700;
  font-size: var(--pdo-fs-h2); line-height: 1.1;
}
.area p { margin: 0; }
.area img { display: block; }

/* Tre kolonner (afsnitsskabelon) */
.pdo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px 32px; }

/* ---------- Knapper ----------
   Regel: smør = book et kaffemøde. Espresso = menu. */
.pdo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--pdo-btn-h); padding: 0 28px; border: 0; border-radius: var(--pdo-r-pill);
  font-family: var(--pdo-font-body); font-weight: 700; font-size: 17px;
  text-decoration: none; cursor: pointer;
}
.pdo-btn--smor     { background: var(--pdo-smor); color: var(--pdo-espresso); }
.pdo-btn--espresso { background: var(--pdo-espresso); color: var(--pdo-havre); font-size: 16px; }
.pdo-btn--send     { font-size: 16px; padding: 0 32px; }
.pdo-btn--smor:hover     { filter: brightness(.96); color: var(--pdo-espresso); }
.pdo-btn--espresso:hover { color: var(--pdo-havre); }
.pdo-iconbtn {
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pdo-iconbtn--smor     { background: var(--pdo-smor); color: var(--pdo-espresso); }
.pdo-iconbtn--smor:hover { color: var(--pdo-espresso); filter: brightness(.96); }
.pdo-iconbtn--espresso { background: var(--pdo-espresso); color: var(--pdo-havre); }
.pdo-iconbtn--havre    { background: var(--pdo-havre); color: var(--pdo-espresso); }
.pdo-burger { flex-direction: column; gap: 5px; }
.pdo-burger span { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--pdo-havre); }

/* ---------- Header ---------- */
.pdo-header {
  width: 100%; max-width: var(--pdo-max-inset); margin: 0 auto; padding: var(--pdo-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pdo-header--over { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.pdo-page { position: relative; }
.pdo-logo { display: inline-flex; }
.pdo-logo img { height: 44px; width: auto; }
.pdo-header__actions { display: flex; align-items: center; gap: 12px; }

/* ========== Forside ========== */

/* ---------- area1: Hero ---------- */
.forside .area1 { padding: 0; }
.pdo-hero {
  /* Heroen fylder skærmen (højst 1000 px), så knappen altid kan ses. Er skærmen lavere end indholdet, bliver heroen bare højere. */
  position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); overflow: hidden; padding-top: 104px;
  background: var(--pdo-espresso); color: var(--pdo-tekst-lys);
  display: flex; flex-direction: column;
}
.pdo-hero__media, .pdo-hero__shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pdo-hero__media { object-fit: cover; object-position: 60% 30%; }
.pdo-hero__shade { background: rgba(42, 35, 32, .55); }
.pdo-hero__content {
  position: relative; flex-grow: 1; width: 100%; max-width: var(--pdo-max-inset); margin: 0 auto;
  padding: 0 var(--pdo-gutter) calc(var(--pdo-section-y) + 48px);  /* lidt ekstra luft under knappen */
  display: flex; flex-direction: column; justify-content: flex-end; gap: 24px;
}
.pdo-hero h1 {
  margin: 0; color: inherit;
  font-family: var(--pdo-font-display); font-weight: 700;
  font-size: var(--pdo-fs-hero); line-height: 1; letter-spacing: -.02em;
}
.pdo-hero p { font-size: 1.3rem; line-height: 1.5; max-width: 34rem; }

/* ---------- area2: Ydelsescirkler ---------- */
.forside .area2 { background: var(--pdo-hvid); }
.forside .area2 .pdo-cols { justify-items: center; }
.forside .area2 .pdo-col {
  position: relative; width: 100%; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.forside .area2 .pdo-col h2 {
  width: 100%; max-width: 300px; aspect-ratio: 1 / 1; padding: 24px; border-radius: 50%;
  background: var(--pdo-creme);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.05;
}
.forside .area2 .pdo-col p { color: var(--pdo-tekst-broed); max-width: 18rem; }
.forside .area2 .pdo-col p:last-child { color: var(--pdo-tekst); max-width: none; }
.forside .area2 .pdo-col a { font-weight: 700; text-underline-offset: 4px; }
.forside .area2 .pdo-col a::after { content: ""; position: absolute; inset: 0; }  /* hele cirklen og teksten er klikbar */

/* ---------- area3: Hub ---------- */
.forside .area3 { background: var(--pdo-espresso); color: var(--pdo-tekst-lys); }
.forside .area3 .pdo-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.forside .area3 .pdo-split__left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.forside .area3 .pdo-split__right { flex: 1 1 516px; min-width: 0; }
.forside .area3 .pdo-split__right img { display: block; width: 100%; height: auto; border-radius: var(--pdo-r-card-lg); }  /* runde hjørner kommer herfra, ikke fra billedet */
.forside .area3 .pdo-split__left p { color: var(--pdo-tekst-lys-1); }
.forside .area3 .pdo-split__left > p:first-child { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pdo-smor); }
.forside .area3 .pdo-split__left > p:last-child a {
  display: inline-flex; align-items: center; min-height: var(--pdo-btn-h); padding: 0 28px; border-radius: var(--pdo-r-pill);
  background: var(--pdo-smor); color: var(--pdo-espresso); font-weight: 700; text-decoration: none;
}
.forside .area3 .pdo-split__left > p:last-child a:hover { filter: brightness(.96); }

/* ---------- area4: Indsigt ---------- */
.forside .area4 { background: var(--pdo-hvid); }
.forside .area4 .pdo-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 32px 16px; }
.forside .area4 .pdo-wrap > p a { font-weight: 700; }
.forside .area4 .pdo-cards {
  display: grid; flex: 0 0 100%; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
/* ---------- area5: Om mig ----------
   Tekstafsnit, hvor første linje er billedet. */
.forside .area5 .pdo-wrap { display: flex; flex-direction: column; gap: 16px; }
.forside .area5 .pdo-wrap > :first-child {
  width: 320px; max-width: 100%; aspect-ratio: 1 / 1; margin-bottom: 32px; overflow: hidden; border-radius: 50%;
  background: var(--pdo-creme); color: var(--pdo-tekst-daempet); font-size: 15px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
}
.forside .area5 .pdo-wrap > :first-child img { width: 100%; height: 100%; object-fit: cover; }
.forside .area5 p { color: var(--pdo-tekst-broed); }
.forside .area5 a { font-weight: 700; }
@media (min-width: 836px) {
  .forside .area5 .pdo-wrap { position: relative; min-height: 320px; padding-left: 368px; justify-content: center; }
  .forside .area5 .pdo-wrap > :first-child { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); }
}

/* ========== Standard (fx ydelsessider) ========== */

/* ---------- area1: Top. To kolonner. Sidste linje i kolonne 1 bliver en knap. ---------- */
.standard .area1 { padding: 40px var(--pdo-gutter) 96px; }
.standard .area1 .pdo-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.standard .area1 .pdo-split__left { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.standard .area1 .pdo-split__right { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.standard .area1 .pdo-split__right > * { width: 100%; max-width: 440px; }
.standard .area1 .pdo-split__right img { width: 100%; height: auto; }
.standard .area1 .pdo-split__right img:is([src$=".jpg"], [src$=".jpeg"]) { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }  /* fotos bliver runde */
.standard .area1:not(:has(.pdo-split)) { padding-bottom: 48px; }
.standard .area1 .pdo-wrap:not(:has(.pdo-split)) { display: flex; flex-direction: column; gap: 20px; }
.standard .area1 .pdo-wrap:not(:has(.pdo-split)) h1 + p { max-width: 36rem; }
.standard .area1 .pdo-split__left > p:first-child { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pdo-tekst-daempet); }
.standard .area1 h1 {
  margin: 0; color: inherit;
  font-family: var(--pdo-font-display); font-weight: 700;
  font-size: clamp(3rem, 6.5vw, 4.75rem); line-height: 1; letter-spacing: -.02em;
}
.standard .area1 h1 + p { font-size: 1.3rem; line-height: 1.5; color: var(--pdo-tekst-broed); max-width: 32rem; }
.standard .area1 .pdo-split__left > p:last-child a {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--pdo-btn-h); padding: 0 28px; border-radius: var(--pdo-r-pill);
  background: var(--pdo-smor); color: var(--pdo-espresso); font-weight: 700; text-decoration: none;
}
.standard .area1 .pdo-split__left > p:last-child a:hover { filter: brightness(.96); }
.standard .area1 .pdo-split__left > p:last-child a[href="#book"]::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2320' stroke-width='2'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9z' stroke-linejoin='round'/%3E%3Cpath d='M16 11h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3Cpath d='M8 3c0 1.5 1 1.5 1 3M12 3c0 1.5 1 1.5 1 3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- area2: Kort ---------- */
.standard .area2 { background: var(--pdo-creme); }
.standard .area2 .pdo-wrap { display: flex; flex-direction: column; gap: 32px; }
.standard .area2 h2 { text-align: center; }
.standard .area2 .pdo-wrap > p { color: var(--pdo-tekst-broed); max-width: 40rem; margin-inline: auto; text-align: center; }
.standard .area2 .pdo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.standard .area2 .pdo-card { background: var(--pdo-hvid); border-radius: var(--pdo-r-card); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.standard .area2 h3 { margin: 0; color: inherit; font-family: var(--pdo-font-display); font-weight: 700; font-size: var(--pdo-fs-h3); line-height: 1.2; }
.standard .area2 .pdo-card p { color: var(--pdo-tekst-broed); }
.standard .area2 .pdo-card > p:last-child:has(> a) { margin-top: auto; }
.standard .area2 .pdo-card > p:last-child > a { color: var(--pdo-tekst); font-weight: 700; text-underline-offset: 4px; }
.standard .area2:has(.pdo-card > h3 > a) { padding-top: 56px; padding-bottom: 96px; }
.standard .area2 .pdo-cards:has(> .pdo-card > h3 > a) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Filter på Indsigt. Knapperne laves af pdo.js ud fra tags i kortene. */
.pdo-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.pdo-filter button {
  min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1.5px solid var(--pdo-espresso);
  background: transparent; color: var(--pdo-espresso); font-family: var(--pdo-font-body); font-size: 15px; font-weight: 700; cursor: pointer;
}
.pdo-filter button[aria-pressed="true"] { background: var(--pdo-espresso); color: var(--pdo-havre); }

/* Typografisk artikelkort: et kort, hvor overskriften (H3) er et link.
   Linjerne: #tag, overskrift med link, (teaser), læsetid. Ingen billeder.
   Farven følger pladsen: første kort er espresso, de øvrige skifter mellem havre og en lys flade
   (creme på forsiden, hvid på Indsigt og under Læs også). Når filteret er i brug,
   sætter pdo.js klasserne is-first og is-even på de synlige kort i stedet. */
.area .pdo-cards > .pdo-card:has(> h3 > a) {
  position: relative; min-height: 300px; box-sizing: border-box; padding: 32px; gap: 16px;
  display: flex; flex-direction: column; border-radius: 24px;
  background: var(--pdo-havre); color: var(--pdo-espresso);
}
.pdo-card:has(> h3 > a) > * { margin: 0; }
.area .pdo-card:has(> h3 > a) > p:first-child { font-size: 14px; font-weight: 700; color: var(--pdo-tekst-daempet); }
.area .pdo-card:has(> h3 > a) h3 { margin: 0; font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.12; color: inherit; }
.pdo-card:has(> h3 > a) h3 a { color: inherit; text-decoration: none; }
.pdo-card:has(> h3 > a) h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* hele kortet er ét link */
.pdo-card:has(> h3 > a) h3 a:focus-visible { outline: none; }
.pdo-card:has(> h3 > a):has(h3 a:focus-visible) { outline: 3px solid var(--pdo-stal); outline-offset: 3px; }
.pdo-card:has(> h3 > a):hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.area .pdo-card:has(> h3 > a) > h3 + p:not(:last-child) { color: var(--pdo-tekst-broed); }  /* teaser */
.area .pdo-card:has(> h3 > a) > p:last-child:not(:first-child) { margin-top: auto; font-size: 14px; color: var(--pdo-tekst-daempet); }  /* læsetid */

/* Lys flade på hvert andet kort */
.forside .area4 .pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):nth-child(even),
.forside .area4 .pdo-cards.is-js > .pdo-card.is-even { background: var(--pdo-creme); }
:is(.standard .area2, .artikel .area4) .pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):nth-child(even),
:is(.standard .area2, .artikel .area4) .pdo-cards.is-js > .pdo-card.is-even { background: var(--pdo-hvid); }

/* Første kort: espresso */
.pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):first-child,
.pdo-cards.is-js > .pdo-card.is-first { background: var(--pdo-espresso); color: var(--pdo-havre); }
.area .pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):first-child > p,
.area .pdo-cards.is-js > .pdo-card.is-first > p { color: var(--pdo-smor); }
.area .pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):first-child > h3 + p:not(:last-child),
.area .pdo-cards.is-js > .pdo-card.is-first > h3 + p:not(:last-child) { color: var(--pdo-tekst-lys-2); }

/* Tomme linjer, som editoren efterlader, fylder ikke. */
.pdo-card > p:empty { display: none; }

/* Indsigt-siden: linjen efter overskriften er altid teaseren, også når den står sidst (uden læsetid). */
.standard .area.area2 .pdo-cards > .pdo-card:has(> h3 > a) > h3 + p { margin-top: 0; font-size: inherit; color: var(--pdo-tekst-broed); }
.standard .area.area2 .pdo-cards:not(.is-js) > .pdo-card:has(> h3 > a):first-child > h3 + p,
.standard .area.area2 .pdo-cards.is-js > .pdo-card.is-first:has(> h3 > a) > h3 + p { color: var(--pdo-tekst-lys-2); }

/* Indsigt-siden: lidt højere kort, fordi teaseren er med. Læs også: lidt mindre. */
.standard .area2 .pdo-card:has(> h3 > a) { min-height: 280px; }  /* uden læsetid i bunden behøver kortene ikke være så høje */
.artikel .area4 .pdo-card:has(> h3 > a) { min-height: 260px; }
.area.area4 .pdo-card:has(> h3 > a) h3 { font-size: 1.9rem; }
.artikel .area.area4 .pdo-card:has(> h3 > a) h3 { font-size: 1.6rem; }
@media (max-width: 600px) {
  .area.area .pdo-cards > .pdo-card:has(> h3 > a) { min-height: 220px; padding: 28px; }
  .area .pdo-card:has(> h3 > a) h3, .area.area4 .pdo-card:has(> h3 > a) h3 { font-size: 1.6rem; }
}

/* ---------- area3: Proces. Tallene kommer automatisk. ---------- */
.standard .area3 .pdo-wrap { display: flex; flex-direction: column; gap: 48px; }
.standard .area3 h2 { text-align: center; }
.standard .area3 .pdo-cards { counter-reset: pdo-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px 24px; justify-items: center; }
.standard .area3 .pdo-card { counter-increment: pdo-step; width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.standard .area3 .pdo-card h3 {
  width: 100%; max-width: 260px; aspect-ratio: 1 / 1; margin: 0; padding: 24px; border-radius: 50%;
  background: var(--pdo-smor); color: var(--pdo-espresso);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--pdo-font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.1;
}
.standard .area3 .pdo-card h3::before { content: counter(pdo-step); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; }
.standard .area3 .pdo-card p { color: var(--pdo-tekst-broed); max-width: 16rem; }
.standard .area3 .pdo-cols { justify-items: center; }
.standard .area3 .pdo-col { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.standard .area3 .pdo-col h3 {
  width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 0; padding: 24px; border-radius: 50%;
  background: var(--pdo-creme); display: flex; align-items: center; justify-content: center;
  font-family: var(--pdo-font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05;
}
.standard .area3 .pdo-col p { color: var(--pdo-tekst-broed); max-width: 18rem; }

/* ---------- area4: Mørk sektion ---------- */
.standard .area4 { background: var(--pdo-espresso); color: var(--pdo-tekst-lys); }
.standard .area4 .pdo-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.standard .area4 .pdo-split__left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.standard .area4 .pdo-split__right { flex: 1 1 400px; min-width: 0; }
.standard .area4 .pdo-split__left p { color: var(--pdo-tekst-lys-1); }
.standard .area4 .pdo-split__left > p:first-child { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pdo-smor); }
.standard .area4 .pdo-split__right:has(img) { flex-basis: 516px; }
.standard .area4 .pdo-split__right img { display: block; width: 100%; height: auto; border-radius: var(--pdo-r-card-lg); }
.standard .area4 ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.standard .area4 li { background: var(--pdo-kort-moerk); border-radius: 20px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.standard .area4 li::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--pdo-smor); }

/* ---------- area5: Spørgsmål og svar (Foldudafsnit) ---------- */
.standard .area5 { padding-top: 96px; padding-bottom: 96px; }
.standard .area5 .pdo-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 32px; }
.pdo-faq { display: flex; flex-direction: column; gap: 16px; }
.pdo-faq details { background: var(--pdo-hvid); border-radius: 20px; padding: 22px 26px; }
.pdo-faq summary { cursor: pointer; font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.25rem; }
.area .pdo-faq details p { margin-top: 12px; color: var(--pdo-tekst-broed); }

/* ========== Artikel ========== */

/* area1: tag, H1, manchet, byline og billede */
.artikel .area1 { padding: 40px var(--pdo-gutter) 0; }
.artikel .area1 .pdo-wrap { display: flex; flex-direction: column; gap: 20px; }
.artikel .area1 .pdo-wrap > :not(:has(img)) { width: 100%; max-width: 712px; margin-inline: auto; }
.artikel .area1 .pdo-wrap > :first-child { font-size: 14px; }
.artikel .area1 .pdo-wrap > :first-child a { font-size: 14px; font-weight: 700; color: var(--pdo-tekst-daempet); text-decoration: none; }
.artikel .area1 h1 { margin: 0; font-family: var(--pdo-font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; }
.artikel .area1 h1 + p { font-size: 1.35rem; line-height: 1.5; color: var(--pdo-tekst-broed); }
.artikel .area1 h1 + p + p { position: relative; min-height: 40px; padding: 9px 0 9px 52px; font-size: 14px; color: var(--pdo-tekst-daempet); }
.artikel .area1 h1 + p + p strong { color: var(--pdo-tekst); }
.artikel .area1 h1 + p + p::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--pdo-creme) url("/uploads/pdo2026_dk/images/peter.jpg") center / cover; }
.artikel .area1 .pdo-wrap > :has(img) { width: 100%; max-width: 1200px; margin: 20px auto 0; }
.artikel .area1 .pdo-wrap > :has(img) img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 32px; }

/* Kort fortalt, brødtekst og forfatter */
.pdo-artikel-tekst { padding: 56px var(--pdo-gutter) 88px; }
.pdo-artikel-tekst .pdo-wrap { max-width: 632px; display: flex; flex-direction: column; gap: 20px; }
.pdo-artikel-tekst p { font-size: 1.15rem; line-height: 1.7; }
.pdo-artikel-tekst h2 { margin: 24px 0 0; font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.8rem; line-height: 1.15; }
.pdo-artikel-tekst blockquote { margin: 16px 0; font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.8rem; line-height: 1.25; }
.pdo-artikel-tekst ol, .pdo-artikel-tekst ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 1.15rem; line-height: 1.6; }
.pdo-artikel-tekst table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--pdo-r-card); background: var(--pdo-hvid); font-size: 1rem; line-height: 1.5; }
.pdo-artikel-tekst th, .pdo-artikel-tekst td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pdo-creme); }
.pdo-artikel-tekst tr:last-child > * { border-bottom: 0; }
.pdo-artikel-tekst thead th { background: var(--pdo-espresso); color: var(--pdo-tekst-lys); font-family: var(--pdo-font-display); }
.pdo-artikel-tekst tbody th { font-weight: 700; }
.pdo-kortfortalt { background: var(--pdo-creme); border-radius: var(--pdo-r-card); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.pdo-artikel-tekst .pdo-kortfortalt p { font-size: inherit; line-height: inherit; }
.pdo-kortfortalt p strong { font-family: var(--pdo-font-display); font-size: 1.2rem; }
.pdo-artikel-tekst .pdo-kortfortalt ul { padding-left: 20px; gap: 6px; font-size: inherit; line-height: inherit; }
.pdo-forfatter { margin-top: 32px; background: var(--pdo-hvid); border-radius: var(--pdo-r-card); padding: 24px 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.pdo-forfatter img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--pdo-creme); }
.pdo-forfatter div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.pdo-forfatter strong { font-family: var(--pdo-font-display); font-size: 1.2rem; }
.pdo-forfatter span { color: var(--pdo-tekst-broed); }
.pdo-forfatter a { font-weight: 700; }

/* area4: Læs også */
.artikel .area4 { background: var(--pdo-creme); }
.artikel .area4 .pdo-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 32px 16px; }
.artikel .area4 .pdo-wrap > p a { font-weight: 700; }
.artikel .area4 .pdo-cards { flex: 0 0 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ========== Fælles ========== */

/* ---------- area6: Kontakt, på både Forside og Standard ---------- */
.area6 { padding-top: 96px; padding-bottom: 96px; background: var(--pdo-espresso); color: var(--pdo-tekst-lys); }
.pdo-contact { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.pdo-contact__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.area .pdo-contact__text h2 { font-size: var(--pdo-fs-h1); line-height: 1.05; }
.pdo-contact__text p { color: var(--pdo-tekst-lys-1); max-width: 32rem; }
.pdo-contact__action { flex: 0 1 380px; }

/* ---------- Footer ---------- */
.pdo-footer { background: var(--pdo-espresso); color: var(--pdo-tekst-lys-2); padding: 0 var(--pdo-gutter) 40px; }
.pdo-footer__inner {
  max-width: var(--pdo-max); margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--pdo-linje-moerk);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: var(--pdo-fs-small);
}
.pdo-footer__inner > img { height: 32px; width: auto; }
.pdo-footer__info { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.pdo-footer a { color: var(--pdo-tekst-lys); text-decoration: none; }
.pdo-footer a:hover { color: var(--pdo-tekst-lys-2); }

/* ---------- Overlays ---------- */
.pdo-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; }
.pdo-overlay--menu { z-index: 50; background: var(--pdo-espresso); color: var(--pdo-tekst-lys); }
.pdo-overlay--book { z-index: 60; background: var(--pdo-havre); color: var(--pdo-tekst); }
.pdo-overlay__inner { max-width: var(--pdo-max-inset); margin: 0 auto; padding: var(--pdo-gutter) var(--pdo-gutter) 64px; display: flex; flex-direction: column; gap: 48px; }
.pdo-overlay__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Megamenu */
.pdo-menu { display: flex; flex-wrap: wrap; gap: 48px; }
.pdo-menu a { color: var(--pdo-tekst-lys); text-decoration: none; }
.pdo-menu a:hover { color: var(--pdo-tekst-lys-2); }
/* Hovedlisten: fem lige store punkter. Hvert punkt er bare et link. */
.pdo-menu__main { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; }
.pdo-menu__main > a {
  padding: 14px 0; border-bottom: 1px solid var(--pdo-linje-moerk);
  font-family: var(--pdo-font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05;
}
/* Højre kolonne: Om Peter over kaffeboksen. padding-top får den til at flugte med første punkt. */
.pdo-menu__side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-top: 14px; }
.pdo-menu__om { align-self: flex-start; font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
.pdo-menu__card { background: var(--pdo-kort-moerk); border-radius: var(--pdo-r-card); padding: 28px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pdo-menu__card strong { font-family: var(--pdo-font-display); font-weight: 700; font-size: 1.4rem; }
.pdo-menu__card > span { color: var(--pdo-tekst-lys-2); }
.pdo-menu .pdo-menu__card .pdo-btn, .pdo-menu .pdo-menu__card .pdo-btn:hover { color: var(--pdo-espresso); }
.pdo-menu__contact { display: flex; flex-direction: column; gap: 4px; }
.pdo-menu__contact a { font-weight: 600; }
/* Mobil: Om Peter og kaffeboksen lægger sig under listen. Lidt mindre luft, så hele menuen kan ses på 390 × 844. */
@media (max-width: 799px) {
  .pdo-overlay--menu .pdo-overlay__inner { gap: 24px; padding-bottom: 24px; }
  .pdo-menu { gap: 24px; }
}

/* Booking */
.pdo-book { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.pdo-book__intro { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pdo-book__intro h2 { font-size: clamp(2.6rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -.02em; }
.pdo-book__intro p { margin: 0; }
.pdo-book__intro a { font-weight: 700; }
.pdo-book__lead { font-size: 1.2rem; line-height: 1.55; max-width: 30rem; }
.pdo-book__panel { flex: 1 1 460px; min-width: 0; }
.pdo-form { background: var(--pdo-hvid); border-radius: var(--pdo-r-card-lg); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.pdo-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.pdo-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.pdo-input {
  box-sizing: content-box; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--pdo-espresso);
  background: var(--pdo-hvid); color: var(--pdo-tekst);
  font-family: var(--pdo-font-body); font-size: 16px; font-weight: 400;
}
textarea.pdo-input { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.pdo-choice { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.pdo-choice legend { float: none; width: auto; margin-bottom: 10px; padding: 0 2px; font-size: 14px; font-weight: 700; line-height: inherit; }
.pdo-choice__row { display: flex; flex-wrap: wrap; gap: 12px; }
.pdo-choice__row label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  border-radius: 24px; border: 1.5px solid var(--pdo-espresso); font-size: 15px; font-weight: 600; cursor: pointer;
}
.pdo-choice__row input { width: 18px; height: 18px; accent-color: var(--pdo-espresso); }
.pdo-sent { background: var(--pdo-hvid); border-radius: var(--pdo-r-card-lg); padding: 40px 32px; display: flex; flex-direction: column; gap: 12px; }
.pdo-sent strong { font-family: var(--pdo-font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.pdo-sent p { font-size: 1.1rem; line-height: 1.55; }