/*
Theme Name: Tryg i Vand
Theme URI: https://trygivand.dk/
Author: Wonop Studio
Author URI: https://wonop.com/
Description: Vandlinjen-identiteten bygget som WordPress-tema for Tryg i Vand. Svømmeundervisning for kvinder og vandkompetence for børn og forældre, på dansk og engelsk. Skrifttyper og billeder ligger på egen server af hensyn til GDPR.
Version: 2.1.11
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tryg-i-vand
Tags: one-column, custom-menu, translation-ready, accessibility-ready
*/

/* ============================================================
   Tokens — sampled from the logo. See BRANDKIT.md §4.
   ============================================================ */
:root{
  color-scheme:light;
  --pp-original-paper:var(--pp-color-surface);
  --pp-original-sand:var(--pp-color-neutral-100);
  --pp-original-shell:var(--pp-color-neutral-200);
  --pp-original-ink:var(--pp-color-text);
  --pp-original-deep:var(--pp-color-primary);
  --pp-original-deeper:var(--pp-color-neutral-900);
  --pp-original-sea:var(--pp-color-neutral-600);
  --pp-original-mist:var(--pp-color-neutral-400);
  --pp-original-gold:var(--pp-color-neutral-500);
  --pp-original-goldlight:var(--pp-color-neutral-300);

  --pp-original-ink-80:color-mix(in srgb,var(--pp-color-text) 80.0%,transparent);
  --pp-original-ink-25:color-mix(in srgb,var(--pp-color-text) 25.0%,transparent);
  --pp-original-ink-15:color-mix(in srgb,var(--pp-color-text) 15.0%,transparent);
  --pp-original-ink-10:color-mix(in srgb,var(--pp-color-text) 10.0%,transparent);
  --pp-original-ink-05:color-mix(in srgb,var(--pp-color-text) 5.0%,transparent);

  --pp-original-display:"Fraunces",Georgia,"Times New Roman",serif;
  --pp-original-ui:"Karla","Helvetica Neue",Arial,sans-serif;

  --pp-original-pad:24px;
  --pp-original-maxw:1152px;
}
@media (min-width:1024px){ :root{ --pp-original-pad:32px; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--pp-original-paper);
  color:var(--pp-original-ink);
  font-family:var(--pp-original-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--pp-original-gold); outline-offset:2px; }

.wrap{
  max-width:calc(var(--pp-original-maxw) + var(--pp-original-pad) * 2);
  margin-inline:auto;
  padding-inline:var(--pp-original-pad);
}

/* Skip link */
.skip{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:absolute; left:24px; top:24px; z-index:60;
  width:auto; height:auto; margin:0; overflow:visible; clip:auto;
  background:var(--pp-original-deep); color:var(--pp-original-paper);
  padding:8px 16px; border-radius:2px; font-weight:600;
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--pp-original-display); margin:0; letter-spacing:-.02em; font-weight:300; }

.h-hero{
  font-size:clamp(2.6rem,6.2vw,4.5rem);
  line-height:1.04; max-width:20ch; text-wrap:balance;
}
.h-hero em{ font-style:italic; font-weight:400; color:var(--pp-original-sea); }

.h-hero--sm{ font-size:clamp(2.1rem,5vw,3.75rem); max-width:24ch; }

.h-section{
  font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.08; max-width:30ch; text-wrap:balance;
}
.h-section--narrow{ max-width:26ch; }
.h-section em{ font-style:italic; font-weight:400; color:var(--pp-original-sea); }

/* The closing headline runs one step larger than a section heading. */
.h-close{ font-size:clamp(2.2rem,5vw,3.75rem); max-width:24ch; }

.section--deep .h-section em,
.section--deep .h-close em{ color:var(--pp-original-goldlight); }

.h-card{ font-size:1.875rem; font-weight:400; }
.h-item{ font-size:1.5rem; font-weight:400; }

.lede{
  font-size:1.125rem; line-height:1.6; color:var(--pp-original-ink-80);
  max-width:48ch; text-wrap:pretty; margin:0;
}
@media (min-width:640px){ .lede{ font-size:1.25rem; } }
.lede--wide{ max-width:54ch; }

.prose p{ margin:0; max-width:62ch; font-size:1.125rem; color:var(--pp-original-ink-80); text-wrap:pretty; }
@media (min-width:640px){ .prose p{ font-size:1.25rem; } }
.prose p + p{ margin-top:24px; }

.eyebrow{
  font-size:.875rem; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--pp-original-sea); margin:0;
}
.label{
  font-size:.875rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--pp-original-sea); margin:0;
}
.label--gold{ color:var(--pp-original-gold); }
.label--goldlight{ color:var(--pp-original-goldlight); }
.label--tight{ letter-spacing:.2em; }

.muted{ color:var(--pp-original-sea); margin:0; }
.serif-lead{ font-family:var(--pp-original-display); font-size:1.5rem; font-weight:400; letter-spacing:-.02em; margin:0; }
@media (min-width:640px){ .serif-lead{ font-size:1.875rem; } }

/* ============================================================
   Sections and rhythm
   ============================================================ */
.section{ padding-block:80px; }
@media (min-width:640px){ .section{ padding-block:112px; } }
.section--top{ border-top:1px solid var(--pp-original-ink-10); }
.section--hero{ padding-block:64px; }
@media (min-width:640px){ .section--hero{ padding-block:96px; } }

/* A section under the waterline: the wave supplies the top edge, so the
   section's own top padding is small. */
.section--deep{ background:var(--pp-original-deep); color:var(--pp-original-paper); }
.section--deep .lede,
.section--deep .prose p{ color:var(--pp-original-mist); }
.section--deep .h-section,
.section--deep .h-item{ color:var(--pp-original-paper); }
.section--after-wave{ padding-top:16px; }
@media (min-width:640px){ .section--after-wave{ padding-top:32px; } }

.scroll-anchor{ scroll-margin-top:96px; }

.mt-6{ margin-top:24px; } .mt-8{ margin-top:32px; } .mt-10{ margin-top:40px; }
.mt-12{ margin-top:48px; } .mt-14{ margin-top:56px; } .mt-16{ margin-top:64px; }

/* ============================================================
   The waterline
   ============================================================ */
.waterline{ display:block; width:100%; height:56px; }
@media (min-width:640px){ .waterline{ height:80px; } }
.waterline .fill{ fill:var(--pp-original-deep); }
.waterline .edge{ fill:none; stroke:var(--pp-original-goldlight); stroke-width:2.5; }

.waterline--card{ height:40px; }
.waterline--card .edge{ stroke-width:2; }

/* Water photograph, fading into the deep section below it */
.waterphoto{ position:relative; }
.waterphoto img{
  display:block; width:100%; height:160px; object-fit:cover; object-position:center;
}
@media (min-width:640px){ .waterphoto img{ height:256px; } }
@media (min-width:1024px){ .waterphoto img{ height:288px; } }
.waterphoto .tint{ position:absolute; inset:0; background:color-mix(in srgb,var(--pp-color-primary) 10.0%,transparent); }
.waterphoto .fade-top{
  position:absolute; inset-inline:0; top:0; height:56px;
  background:linear-gradient(to bottom,var(--pp-original-deep),transparent);
}
.waterphoto .fade-bottom{
  position:absolute; inset-inline:0; bottom:0; height:112px;
  background:linear-gradient(to top,var(--pp-original-deep),transparent);
}
@media (min-width:640px){
  .waterphoto .fade-top{ height:80px; }
  .waterphoto .fade-bottom{ height:160px; }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{ border-bottom:1px solid var(--pp-original-ink-10); }
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:20px; min-width:0;
}
.brand{ display:flex; align-items:center; gap:16px; flex-shrink:0; text-decoration:none; min-width:0; }
.brand img{
  width:56px; height:56px; flex-shrink:0; border-radius:50%; object-fit:cover; display:block;
}
.brand .name{
  display:block; font-family:var(--pp-original-display); font-size:1.25rem;
  font-weight:500; letter-spacing:-.02em; color:var(--pp-original-ink);
}
.brand .tag{
  display:block; font-size:.75rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pp-original-sea);
}

.nav-desktop{ display:none; align-items:center; gap:32px; min-width:0; }
@media (min-width:1024px){ .nav-desktop{ display:flex; } }
.nav-desktop a{ text-decoration:none; color:var(--pp-original-ink); }
.nav-desktop a:hover{ color:var(--pp-original-sea); }

.langswitch{ display:flex; align-items:center; gap:8px; font-size:.875rem; }
.langswitch a{ font-weight:600; text-decoration:none; }
.langswitch a[aria-current]{ color:var(--pp-original-ink); }
.langswitch a:not([aria-current]){ color:var(--pp-original-sea); }
.langswitch a:not([aria-current]):hover{ color:var(--pp-original-ink); }
.langswitch .sep{ color:var(--pp-original-ink-25); }

/* Mobile navigation. A real button + JS, not a CSS-only toggle: the panel has
   to close on Escape and on outside click. */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:2px;
  background:transparent; color:var(--pp-original-ink); cursor:pointer; flex-shrink:0;
}
@media (min-width:1024px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.nav-mobile{
  position:absolute; right:var(--pp-original-pad); z-index:40; margin-top:12px;
  width:min(16rem,calc(100vw - var(--pp-original-pad) * 2));
  background:var(--pp-original-paper); border:1px solid var(--pp-original-ink-15); border-radius:2px;
  padding:8px; box-shadow:0 10px 15px -3px color-mix(in srgb,var(--pp-color-text) 10.0%,transparent);
}
.nav-mobile[hidden]{ display:none; }
.nav-mobile a{
  display:block; padding:12px 16px; border-radius:2px;
  color:var(--pp-original-ink); text-decoration:none;
}
.nav-mobile a:hover{ background:var(--pp-original-ink-05); }
.nav-mobile .cta{ margin-top:4px; border:1px solid var(--pp-original-ink-25); font-weight:600; }
.nav-mobile .langswitch{
  margin-top:8px; padding:16px 16px 8px;
  border-top:1px solid var(--pp-original-ink-15); font-size:1rem;
}
.nav-wrap{ position:relative; }

/* ============================================================
   Buttons
   ============================================================ */
a.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:2px; padding:12px 12px 12px 20px;
  font-size:1rem; font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
a.btn svg{ width:20px; height:20px; flex-shrink:0; fill:currentColor; }

/* One primary action: book the free intro call. Two surface variants of the
   same token, not two primaries. See BRANDKIT.md §9. */
a.btn--primary{ background:var(--pp-original-deep); color:var(--pp-original-paper); }
a.btn--primary:hover{ background:var(--pp-original-deeper); }
a.btn--on-deep{ background:var(--pp-original-goldlight); color:var(--pp-original-deeper); }
a.btn--on-deep:hover{ background:var(--pp-original-sand); }

a.btn--ghost{ border-color:var(--pp-original-ink-25); color:var(--pp-original-ink); padding:12px 20px; }
a.btn--ghost:hover{ background:var(--pp-original-ink-05); }
a.btn--ghost-deep{ border-color:rgba(222,199,148,.6); color:var(--pp-original-goldlight); }
a.btn--ghost-deep:hover{ background:rgba(222,199,148,.1); }

a.btn--nav{ padding:8px 16px; font-size:.875rem; border-color:var(--pp-original-ink-25); color:var(--pp-original-ink); }
a.btn--nav:hover{ background:var(--pp-original-ink-05); }

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

/* ============================================================
   Grids
   ============================================================ */
.grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:640px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .grid--3-lg{ grid-template-columns:repeat(3,1fr); }
  .grid--cards{ grid-template-columns:repeat(2,1fr); }
}
.grid--tight{ gap:20px 40px; }

/* A stepped run of three: each column starts a little lower than the last, so
   the row reads as a descent rather than a table. */
.stepped > *:nth-child(2){ margin-top:0; }
.stepped > *:nth-child(3){ margin-top:0; }
@media (min-width:640px){
  .stepped > *:nth-child(2){ margin-top:40px; }
  .stepped > *:nth-child(3){ margin-top:80px; }
}

.topline{ border-top:1px solid var(--pp-original-ink-15); padding-top:24px; }
.topline--gold{ border-top-color:rgba(190,140,70,.5); }
.topline--goldlight{ border-top-color:rgba(222,199,148,.4); }

.item-title{ font-family:var(--pp-original-display); font-size:1.5rem; font-weight:400; letter-spacing:-.02em; margin:0; color:var(--pp-original-ink); }
.item-body{ margin:12px 0 0; font-size:1rem; color:var(--pp-original-ink-80); text-wrap:pretty; }
@media (min-width:640px){ .item-body{ font-size:1.125rem; } }
.section--deep .item-title{ color:var(--pp-original-paper); }
.section--deep .item-body{ color:var(--pp-original-mist); }

dl,dt,dd{ margin:0; }
ul[role="list"]{ list-style:none; margin:0; padding:0; }

/* ============================================================
   Programme cards
   ============================================================ */
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--pp-original-ink-15); border-radius:2px; overflow:hidden;
}
.card .card-body{ flex:1; padding:32px; }
.card .card-foot{ background:var(--pp-original-deep); padding:32px; }
.card .card-foot p{ margin:0; color:var(--pp-original-mist); }

.ticks{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.ticks li{ display:flex; align-items:flex-start; gap:12px; color:var(--pp-original-ink); }
.ticks svg{ width:20px; height:20px; flex-shrink:0; margin-top:4px; fill:var(--pp-original-gold); }

/* ============================================================
   Quote
   ============================================================ */
.quote blockquote{ margin:0; }
.quote p{
  margin:0; font-family:var(--pp-original-display); font-weight:300; font-style:italic;
  font-size:clamp(1.7rem,4vw,3rem); line-height:1.15; letter-spacing:-.02em;
  max-width:34ch; text-wrap:balance;
}
.quote .attrib{ display:flex; align-items:center; gap:24px; margin-top:40px; }
.quote .attrib .bar{ width:96px; height:2px; background:var(--pp-original-gold); flex-shrink:0; }
.quote figcaption{
  font-size:.875rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pp-original-sea);
}

/* ============================================================
   Pull note (the gold left rule)
   ============================================================ */
.pull{ border-left:2px solid var(--pp-original-gold); padding-left:32px; }
.pull p{ margin:0; max-width:50ch; font-size:1.125rem; color:var(--pp-original-ink-80); text-wrap:pretty; }
@media (min-width:640px){ .pull p{ font-size:1.25rem; } }
.pull p + p{ margin-top:20px; }
.pull .turn{ font-family:var(--pp-original-display); font-size:1.5rem; font-weight:400; letter-spacing:-.02em; color:var(--pp-original-ink); }
@media (min-width:640px){ .pull .turn{ font-size:1.875rem; } }
.pull em{ font-style:normal; color:var(--pp-original-sea); }

.section--deep .pull{ border-left-color:var(--pp-original-goldlight); }
.section--deep .pull p{ color:var(--pp-original-mist); max-width:52ch; }
.section--deep .pull strong{ color:var(--pp-original-paper); font-weight:600; }

/* ============================================================
   Video facade — no request to youtube.com until the visitor clicks.
   ============================================================ */
.video{ margin:0 0 40px; }
.video .frame{
  position:relative; width:100%; max-width:17rem; aspect-ratio:9/16;
  overflow:hidden; border-radius:12px; background:var(--pp-original-deep);
  outline:1px solid rgba(0,0,0,.05); outline-offset:-1px;
}
.video .frame img,
.video .frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.video .play{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  padding:20px; border:0; cursor:pointer;
  background:linear-gradient(to top,rgba(18,48,57,.7),rgba(18,48,57,.1) 55%,transparent);
}
.video .play:hover{ background:linear-gradient(to top,rgba(18,48,57,.6),rgba(18,48,57,.1) 55%,transparent); }
.video .play span{
  display:flex; width:56px; height:56px; flex-shrink:0;
  align-items:center; justify-content:center; padding-left:4px;
  border-radius:50%; background:rgba(248,237,226,.95); color:var(--pp-original-ink);
}
.video .play svg{ width:24px; height:24px; fill:currentColor; }
.video figcaption{ margin-top:16px; max-width:17rem; color:var(--pp-original-ink-80); text-wrap:pretty; }
.video figcaption a{ color:var(--pp-original-sea); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.video figcaption a:hover{ color:var(--pp-original-ink); }

/* ============================================================
   About — the two-column split
   ============================================================ */
.about{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:1024px){
  .about{ grid-template-columns:1fr 2fr; }
}
.facts{ display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.facts dt{ font-size:.875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--pp-original-sea); }
.facts dd{ margin-top:8px; color:var(--pp-original-ink); }

/* ============================================================
   Bullet runs on the children's pages
   ============================================================ */
.runs{ display:grid; gap:20px 40px; grid-template-columns:1fr; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .runs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .runs--3{ grid-template-columns:repeat(3,1fr); } }
.runs li{ border-top:1px solid var(--pp-original-ink-15); padding-top:20px; color:var(--pp-original-ink-80); text-wrap:pretty; }
@media (min-width:640px){ .runs li{ font-size:1.125rem; } }
.section--deep .runs li{ border-top-color:rgba(222,199,148,.4); color:var(--pp-original-paper); }
.runs--wide{ gap:32px 40px; }
.runs em{ font-style:normal; color:var(--pp-original-sea); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--pp-original-deeper); padding-block:48px; color:var(--pp-original-mist); }
.footer-row{ display:flex; flex-direction:column; gap:32px; }
@media (min-width:640px){
  .footer-row{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.site-footer .name{ font-family:var(--pp-original-display); font-size:1.25rem; font-weight:500; letter-spacing:-.02em; color:var(--pp-original-paper); margin:0; }
.site-footer .who{ margin:4px 0 0; color:var(--pp-original-mist); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 32px; }
.site-footer a{ color:var(--pp-original-mist); text-decoration:none; }
.site-footer a:hover{ color:var(--pp-original-paper); }
.site-footer .area{
  margin:40px 0 0; padding-top:32px;
  border-top:1px solid rgba(248,237,226,.1); color:var(--pp-original-mist);
}

/* ============================================================
   Generic WordPress pages, posts, search, 404
   ============================================================ */
.page-body{ padding-block:64px 96px; }
.page-body .entry{ max-width:68ch; }
.page-body .entry h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; }
.page-body .entry h2{ font-size:1.875rem; margin-top:48px; }
.page-body .entry h3{ font-size:1.5rem; margin-top:32px; }
.page-body .entry p,
.page-body .entry li{ color:var(--pp-original-ink-80); }
.page-body .entry p{ margin:24px 0 0; }
.page-body .entry a{ color:var(--pp-original-sea); text-decoration:underline; text-underline-offset:4px; }
.page-body .entry a:hover{ color:var(--pp-original-ink); }
.page-body .entry img{ border-radius:2px; }
.post-list{ list-style:none; margin:48px 0 0; padding:0; display:grid; gap:40px; }
.post-list .topline h2{ font-size:1.5rem; }
.post-list a{ text-decoration:none; }
.post-list a:hover{ color:var(--pp-original-sea); }
.search-form{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.search-form input[type="search"]{
  flex:1; min-width:0; padding:12px 16px; font:inherit; color:var(--pp-original-ink);
  background:var(--pp-original-paper); border:1px solid var(--pp-original-ink-25); border-radius:2px;
}
.pagination{ margin-top:56px; display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   The parent-and-child pages
   ------------------------------------------------------------
   Warmer and rounder than the adult pages. The palette is
   unchanged — the play comes from shape, scale and air, not from
   new colour, so the two halves of the site still read as one
   brand. Everything here is scoped to .kids.
   ============================================================ */
.kids{ --pp-original-r:20px; }

/* Hero: the illustration carries the page, so it gets real size
   and sits beside the words rather than under them. */
.kids-hero{ display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .kids-hero{ grid-template-columns:1.05fr .95fr; gap:56px; }
}
.kids-hero__art{ margin:0; }
.kids-hero__art img{
  display:block; width:100%; max-width:460px; height:auto; margin-inline:auto;
}
@media (min-width:900px){
  .kids-hero__art img{ max-width:none; }
}

/* Chips — the "what if" run and the progress run. A bordered list
   read as a spec sheet; these read as things a child might say. */
.kids .chips{
  list-style:none; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
  /* Set here rather than with a utility on each list. Both runs are the same
     pattern — a lede that ends in a colon, then the chips — so the gap is one
     rule and the two cannot drift apart. */
  margin:48px 0 0;
}
@media (min-width:640px){ .kids .chips{ margin-top:64px; } }
.kids .chips li{
  border-radius:999px;
  padding:12px 22px;
  font-size:1rem;
  background:rgba(248,237,226,.1);
  border:1px solid rgba(222,199,148,.45);
  color:var(--pp-original-paper);
}
@media (min-width:640px){ .kids .chips li{ font-size:1.0625rem; } }
.kids .chips--light li{
  background:var(--pp-original-sand);
  border-color:rgba(190,140,70,.35);
  color:var(--pp-original-ink);
}

/* Soft panels replace the hairline-topped columns. Same content
   grouping, less filing cabinet. */
.kids .soft{
  background:var(--pp-original-sand);
  border-radius:var(--pp-original-r);
  padding:28px;
}
.kids .soft .item-title{ margin:0; }
.kids .soft .item-body{ margin-top:10px; }

/* Numbered steps. The numeral is the playful move: Fraunces at a
   size the body text never reaches, in gold, sitting behind the
   title rather than labelling it. */
.kids .step{
  background:var(--pp-original-sand);
  border-radius:var(--pp-original-r);
  padding:28px;
  position:relative;
}
.kids .step__n{
  font-family:var(--pp-original-display);
  font-weight:300;
  font-size:3.5rem;
  line-height:1;
  color:var(--pp-original-gold);
  opacity:.55;
  margin:0 0 8px;
  font-optical-sizing:auto;
}
.kids .step .item-title{ margin:0; }
.kids .step .item-body{ margin-top:10px; }

/* Practical facts: small, rounded, scannable. Six short pairs do
   not need a three-column grid with rules between them. */
.kids .facts-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .kids .facts-grid{ grid-template-columns:repeat(3,1fr); } }
.kids .fact{
  background:var(--pp-original-sand);
  border-radius:var(--pp-original-r);
  padding:20px 22px;
}
.kids .fact dd{ margin-top:6px; color:var(--pp-original-ink); font-size:1.0625rem; }

/* On the deep sections the sand panels would fight the water, so
   they invert instead of changing hue. */
.kids .section--deep .soft,
.kids .section--deep .step,
.kids .section--deep .fact{
  background:rgba(248,237,226,.08);
}
.kids .section--deep .soft .item-title,
.kids .section--deep .step .item-title{ color:var(--pp-original-paper); }

.link-on-deep{
  color:var(--pp-original-goldlight);
  text-decoration:underline;
  text-underline-offset:4px;
}
.link-on-deep:hover{ color:var(--pp-original-paper); }

/* "Svømmeundervisningen" is 20 characters and all but fills a 390px line at the
   shared hero size. Danish compounds do this constantly, so the kids hero drops
   its floor and is allowed to hyphenate rather than overflow on a small phone. */
.kids-hero__text .h-hero{
  font-size:clamp(1.85rem,5.1vw,3.75rem);
  hyphens:auto;
  overflow-wrap:normal;
}
@media (max-width:400px){
  .kids-hero__text .h-hero{ overflow-wrap:break-word; }
}

/* Crayon scatter behind the whole page. One layer under everything: the cream
   sections are transparent so the drawings show through, and the deep sections
   and the water photograph are opaque so they cover it. The result is crayons
   on the beige and nowhere else, with no per-section wiring. */
.kids{ position:relative; }
/* Descendant, not child: the scope now comes from a group inside the content,
   so the sections sit one level deeper than they did under <main>. */
.kids .section,
.kids .waterphoto,
.kids > .wp-block-group__inner-container > .wp-block-html{ position:relative; z-index:1; }

.kids .scatter{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none; z-index:0;
}
.kids .scatter img{
  position:absolute;
  left:var(--pp-original-x); top:var(--pp-original-y);
  width:var(--pp-original-w); height:auto;
  transform:rotate(var(--pp-original-r));
  opacity:.26;
}

/* On a phone the page is much narrower and taller, so the same density piles up
   on top of itself. Smaller, fainter, and every third one dropped. */
@media (max-width:767px){
  .kids .scatter img{ width:calc(var(--pp-original-w) * .58); opacity:.2; }
  .kids .scatter img:nth-child(3n){ display:none; }
}

/* "Svømmeundervisningen" is 20 characters and all but fills a 390px line at the
   shared hero size. Danish compounds do this constantly, so the kids hero drops
   its floor and is allowed to hyphenate rather than overflow on a small phone. */
.kids-hero__text .h-hero{
  font-size:clamp(1.85rem,5.1vw,3.75rem);
  hyphens:auto;
  overflow-wrap:break-word;
}
@media (min-width:900px){
  .kids-hero__text .h-hero{ hyphens:manual; }
}

/* Crayon scatter behind a section. The drawings sit under the content, faint
   enough to read as paper the page is resting on rather than as illustration
   competing with the words. The sand panels above are opaque, so no body copy
   is ever set over one. */
.kids .section--scatter{ position:relative; overflow:hidden; }
.kids .section--scatter > .wrap{ position:relative; z-index:1; }

.kids .scatter{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}
.kids .scatter img{
  position:absolute;
  left:var(--pp-original-x); top:var(--pp-original-y);
  width:var(--pp-original-w); height:auto;
  transform:rotate(var(--pp-original-r));
  opacity:.26;
}

/* On a phone the section is narrow and tall, so the same sixteen would pile up.
   Fewer, smaller and fainter. */
@media (max-width:767px){
  .kids .scatter img{ width:calc(var(--pp-original-w) * .58); opacity:.2; }
  .kids .scatter img:nth-child(n+10){ display:none; }
}

/* The line that closes a section — "so I don't start with their age…". It was
   set as display type, which made it read as a second heading competing with
   the real one. It is a sentence, so it is set as a sentence. Both instances
   share the pattern, so both change together. */
.kids .turn{
  font-family:var(--pp-original-ui);
  font-size:1rem;
  line-height:1.6;
  color:var(--pp-original-ink-80);
  text-wrap:pretty;
}

/* No rules between sections on the children's pages. The colour changes, the
   waterlines and the whitespace already separate them, and with the crayon
   scatter running underneath a hairline reads as a scratch on the paper. */
.kids .section--top{ border-top:0; }

/* Two cream sections in a row used to be separated by a hairline, so 112px of
   padding on each side read as deliberate. With the rule gone that 224px is
   just a hole. Collapse the second one's top padding: one section's worth of
   air, not two.

   Only between two light sections. Where the background changes to deep the
   full gap still earns its place, because the colour boundary is doing the
   separating rather than the whitespace. */
.kids .section:not(.section--deep) + .section:not(.section--deep){
  padding-top:0;
}

/* ============================================================
   Block markup compatibility
   ------------------------------------------------------------
   The pages are core blocks now. The class names survived the
   conversion, but the tags did not: <dl>/<dt>/<dd> became
   groups and headings, the quote became paragraphs, and the
   buttons gained a wrapper. These rules bridge that, and put
   the vertical rhythm back under our control rather than
   WordPress's defaults.
   ============================================================ */

/* Core spaces sibling blocks for us; we want our own rhythm. */
.wp-block-group > *,
.wp-block-column > *{ margin-block-start:0; margin-block-end:0; }

/* The scatter fills the beige area by being absolutely positioned inside
   .kids, which is the only positioned ancestor it may resolve against. On the
   editor canvas the custom-HTML block carrying it is positioned too — the
   editor does that to every block, and not from a stylesheet this can outrank,
   hence !important — and that wrapper has no height of its own. Left alone,
   all 48 drawings stack in the first few pixels of the page. */
.wp-block-html:has(.scatter){ position:static !important; }

/* The same rule, in the shape the editor gives it. A custom-HTML block renders
   its content inside the block's own preview wrapper, so on the editor canvas
   that content is never the column's direct child the way it is on the page —
   and the margins the rule above clears (the video figure's 40px) come back in
   the editor only. */
.wp-block-column > .wp-block-html > .block-editor-inner-content > *,
.wp-block-group__inner-container > .wp-block-html > .block-editor-inner-content > *{
  margin-block-start:0; margin-block-end:0;
}



/* Grids are groups whose children are the cells. */
.wp-block-group.grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:640px){
  .wp-block-group.grid.grid--2{ grid-template-columns:repeat(2,1fr); }
  .wp-block-group.grid.grid--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .wp-block-group.grid.grid--3-lg{ grid-template-columns:repeat(3,1fr); }
}
.wp-block-group.grid > * + *{ margin-top:0; }
.wp-block-group.grid > * > * + *{ margin-top:12px; }

/* Lists keep their own padding otherwise. */
ul.wp-block-list.chips,
ul.wp-block-list.ticks{ padding-left:0; list-style:none; }

/* Buttons: our class sits on the wrapper, the link is inside it. */
.wp-block-buttons.actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.wp-block-button.btn{ margin:0; }
.wp-block-button.btn .wp-block-button__link{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:2px; padding:12px 20px;
  font-size:1rem; font-weight:600; font-family:var(--pp-original-ui);
  text-decoration:none; border:1px solid transparent;
}
.wp-block-button.btn--primary .wp-block-button__link{ background:var(--pp-original-deep); color:var(--pp-original-paper); }
.wp-block-button.btn--primary .wp-block-button__link:hover{ background:var(--pp-original-deeper); }
.wp-block-button.btn--on-deep .wp-block-button__link{ background:var(--pp-original-goldlight); color:var(--pp-original-deeper); }
.wp-block-button.btn--on-deep .wp-block-button__link:hover{ background:var(--pp-original-sand); }
.wp-block-button.btn--ghost .wp-block-button__link{ background:transparent; border-color:var(--pp-original-ink-25); color:var(--pp-original-ink); }
.wp-block-button.btn--ghost .wp-block-button__link:hover{ background:var(--pp-original-ink-05); }
.wp-block-button.btn--ghost-deep .wp-block-button__link{ background:transparent; border-color:rgba(222,199,148,.6); color:var(--pp-original-goldlight); }
.wp-block-button.btn--ghost-deep .wp-block-button__link:hover{ background:rgba(222,199,148,.1); }

/* Two-column splits. */
.wp-block-columns.kids-hero,
.wp-block-columns.about,
.wp-block-columns.grid--cards{ display:grid; gap:40px; grid-template-columns:1fr; margin:0; }
@media (min-width:900px){
  .wp-block-columns.kids-hero{ grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .wp-block-columns.about{ grid-template-columns:1fr 2fr; }
  .wp-block-columns.grid--cards{ grid-template-columns:repeat(2,1fr); }
}
.wp-block-columns > .wp-block-column{ flex-basis:auto !important; }
.wp-block-column.kids-hero__art-col .wp-block-image{ margin:0; }
.wp-block-column.kids-hero__art-col img{ display:block; width:100%; height:auto; }

/* Programme cards. */
.wp-block-column.card{ display:flex; flex-direction:column; border:1px solid var(--pp-original-ink-15); border-radius:2px; overflow:hidden; }
.wp-block-column.card .card-body{ flex:1; padding:32px; }
.wp-block-column.card .card-body > * + *{ margin-top:16px; }
.wp-block-column.card .card-foot{ background:var(--pp-original-deep); padding:32px; }
.wp-block-column.card .card-foot p{ color:var(--pp-original-mist); margin:0; }
.wp-block-column.card .card-foot .wp-block-buttons{ margin-top:24px; }

/* The quote, now two paragraphs rather than a figure. */
.quote .quote-text{
  font-family:var(--pp-original-display); font-weight:300; font-style:italic;
  font-size:clamp(1.7rem,4vw,3rem); line-height:1.15; letter-spacing:-.02em;
  max-width:34ch; text-wrap:balance; margin:0;
}
.quote .quote-attrib{
  font-size:.875rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pp-original-sea); margin-top:40px;
  padding-top:24px; border-top:2px solid var(--pp-original-gold); display:inline-block;
}

/* Odds and ends the conversion introduced. */
.item-title-sm{ font-weight:600; color:var(--pp-original-paper); margin:0; }
.lede.small{ font-size:1rem; }
.wp-block-group.facts{ display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.wp-block-group.prose > * + *{ margin-top:24px; }

/* core/group renders an extra <div class="wp-block-group__inner-container">
   around its children. Every class-based layout in this theme sits on the group
   itself, so that wrapper made each grid a one-child grid with the real cells
   stacked inside it. Making it transparent lets the children participate in
   whatever layout the group declares, and keeps the CSS written against the
   classes rather than against WordPress's internal markup. */
.wp-block-group__inner-container{ display:contents; }

/* Core spaces sibling blocks with a zero-specificity :where() rule. Once the
   inner container is display:contents those margins land on the grid cells
   themselves, so the second and third cell in a row sat 12px lower than the
   first. Any real selector outranks :where(), so no !important needed. */
.wp-block-group.grid > .wp-block-group__inner-container > *,
.wp-block-group.facts-grid > .wp-block-group__inner-container > *,
.wp-block-group.chips > .wp-block-group__inner-container > *{
  margin-block-start:0;
}

/* Hero rhythm. The generic 24px between blocks is right for body copy and too
   tight around a hero, where the eyebrow, headline, standfirst and buttons each
   need their own breathing room. */
.kids-hero__text .eyebrow{ margin-bottom:0; }
.kids-hero__text .h-hero{ margin-top:24px; }
.kids-hero__text .serif-lead{ margin-top:32px; }
.kids-hero__text .lede{ margin-top:20px; }
.kids-hero__text .wp-block-buttons{ margin-top:40px; }
.kids-hero__text .muted{ margin-top:24px; }

.section--hero .wrap > .h-hero{ margin-top:24px; }
.section--hero .wrap > .lede{ margin-top:32px; }
.section--hero .wrap > .wp-block-buttons{ margin-top:40px; }
.section--hero .wrap > .muted{ margin-top:24px; }

/* core/column sets overflow-wrap:break-word on itself, and overflow-wrap is an
   inherited property — so the hero headline picked it up from its column and
   split "Svømmeundervisningen" mid-word with no hyphen. Reset it on the column,
   which is where it is actually set, and let hyphens:auto do the job properly
   using the Danish dictionary (<html lang="da"> is already correct). */
.wp-block-column.kids-hero__text{ overflow-wrap:normal; }
.wp-block-column.kids-hero__text .h-hero{ overflow-wrap:normal; hyphens:auto; }
@media (max-width:400px){
  .wp-block-column.kids-hero__text .h-hero{ overflow-wrap:break-word; }
}

/* ============================================================
   Vertical rhythm, block edition
   ------------------------------------------------------------
   display:contents makes a group's children participate in its
   layout, but it does NOT reparent them: in the DOM they are
   still children of .wp-block-group__inner-container. Every
   rule written as `.wrap > *` therefore stopped matching, which
   is why headings sat flush against the cards below them.

   These target the real structure. `--pp-original-flow` is the default gap
   between siblings inside a wrap; specific pairs override it.
   ============================================================ */
.wp-block-group.wrap{ --pp-original-flow:24px; }
.wp-block-group.wrap > .wp-block-group__inner-container > * + *{ margin-top:var(--pp-original-flow); }

/* Heading to the thing under it. */
.wrap > .wp-block-group__inner-container > .h-section + *,
.wrap > .wp-block-group__inner-container > .h-hero + *,
.wrap > .wp-block-group__inner-container > .h-close + *{ margin-top:24px; }

/* Anything to a block of cards, chips or facts: these need real air. */
.wrap > .wp-block-group__inner-container > .grid,
.wrap > .wp-block-group__inner-container > .facts-grid,
.wrap > .wp-block-group__inner-container > .wp-block-columns,
.wrap > .wp-block-group__inner-container > ul.chips{ margin-top:56px; }

/* And out of one again. */
.wrap > .wp-block-group__inner-container > .grid + *,
.wrap > .wp-block-group__inner-container > .facts-grid + *,
.wrap > .wp-block-group__inner-container > ul.chips + *{ margin-top:56px; }

.wrap > .wp-block-group__inner-container > .wp-block-buttons{ margin-top:40px; }
.wrap > .wp-block-group__inner-container > .wp-block-buttons + *{ margin-top:24px; }
.wrap > .wp-block-group__inner-container > .pull{ margin-top:48px; }
.wrap > .wp-block-group__inner-container > .pull + *{ margin-top:48px; }
.wrap > .wp-block-group__inner-container > .turn{ margin-top:48px; }

/* Inside a pull, two paragraphs need separating. */
.pull > .wp-block-group__inner-container > * + *{ margin-top:20px; }

/* Inside a card, panel or step. */
.soft > .wp-block-group__inner-container > * + *,
.step > .wp-block-group__inner-container > * + *,
.fact > .wp-block-group__inner-container > * + *,
.topline > .wp-block-group__inner-container > * + *{ margin-top:12px; }
.step > .wp-block-group__inner-container > .step__n + *{ margin-top:8px; }

/* The about split and the prose column. */
.wp-block-group.prose > .wp-block-group__inner-container > * + *{ margin-top:24px; }
.wp-block-group.facts > .wp-block-group__inner-container > * + *{ margin-top:24px; }
.wp-block-group.card-body > .wp-block-group__inner-container > * + *{ margin-top:16px; }
.wp-block-group.card-foot > .wp-block-group__inner-container > * + *{ margin-top:24px; }



.pp-frame{display:contents!important}

.pp-section,.pp-frame{display:contents!important}

.kids .pp-section:has(>.pp-frame>.section:not(.section--deep)) + .pp-section > .pp-frame > .section:not(.section--deep){padding-top:0}

.pp-section{display:block!important;margin:0!important;padding:0!important;background:transparent!important;color:inherit!important;scroll-margin-top:96px}.pp-frame{display:contents!important}