:root { color-scheme: only light; } /* eller: color-scheme: light; */
html, body {
  background: #fff;
  color: #111;
}

/* === Duset rød/blå palet (ingen grøn/orange) === */
:root{
  /* Primær */
  --red-500:#d7deb4;   /* terracotta */
  --red-400:#e08a83;   /* lysere rød */
  --red-700:#a94b44;   /* dybere rød */
  --blue-500:#6a9ebf;  /* dusty himmelblå */
  --blue-700:#273800;  /* dybere blå */

  /* Neutrale */
  --cream-50:#f7f5f2;   /* neutral off-white (uden orange) */
  --cream-100:#f2efeb;

  /* Erstatning for tidligere 'mint' (nu lys blålig baggrund) */
  --mint-50:#eff6fb;

  /* Tekst/overflader */
  --ink-900:#1e1e1e;
  --ink-700:#333333;
  --surface:#ffffff;
  --surface-2:#ffffff;

  /* Border/shadow */
  --border: #dddddd;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* --------- Farver --------- */
:root{
  --carrot-600:#d36b63;
  --carrot-400:#e08a83;
  --leaf-700:#3f6c8f;
  --leaf-500:#6a9ebf;
  --cream-50:#f7f5f2;
  --mint-50:#eff6fb;
  --ink-900:#1F2937;
  --ink-700:#374151;
  --surface:white;
  --surface-2:#ffffff;
  --border: color-mix(in srgb, var(--blue-700) 10%, transparent);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

html[data-theme="light"]{
  --surface:white;
  --surface-2:#ffffff;
  --cream-50:#f7f5f2;
  --mint-50:#eff6fb;
  --ink-900:#1F2937;
  --ink-700:#374151;
  --border: color-mix(in srgb, var(--blue-700) 10%, transparent);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Basalt */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink-900);
  background: var(--surface);
  line-height:1.6;
}
h1,h2,h3{
  font-family: "Baloo 2", cursive;
  line-height:1.2;
  margin:0 0 .5rem;
  color:var(--blue-700);
}
h1{font-size: clamp(2rem, 3.6vw, 3rem)}
h2{font-size: clamp(1.6rem, 2.8vw, 2.2rem)}
h3{font-size: clamp(1.2rem, 2.2vw, 1.5rem)}
p{margin:.5rem 0 1rem}
.lead{font-size:1.125rem; color:var(--ink-700)}

.container{width:min(1100px, 92vw); margin-inline:auto; position:relative}
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:min(5vw, 2rem)}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

/* Links & knapper */
a{color:var(--blue-700); text-decoration: none}
a:hover{text-decoration: underline}
.btn{display:inline-block; border-radius:999px; padding:.85rem 1.2rem; font-weight:700; text-decoration:none; border:2px solid transparent; transition:.2s ease}
.btn-primary{background:var(--red-500); color:white; box-shadow: var(--shadow)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{color:var(--blue-700); background:transparent}
.btn-ghost:hover{background:color-mix(in srgb, var(--blue-700) 10%, transparent)}

/* Fokus-stil (tilgængelighed) */
:focus-visible{outline:3px solid color-mix(in srgb, var(--red-500) 60%, white); outline-offset:3px; border-radius:8px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 60%, transparent) 100%); backdrop-filter:saturate(120%) blur(6px)}
.site-header[data-scrolled="true"]{box-shadow: 0 4px 20px rgba(0,0,0,.12)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; gap:.8rem; align-items:center; text-decoration:none}
.brand .logo{width:110px; height:auto; border-radius:14px; box-shadow:var(--shadow)}
.brand-text{display:flex; flex-direction:column; font-weight:700; color:var(--ink-900)}
.brand-text .tagline{font-weight:600; color:var(--ink-700); font-size:.85rem}
.header-actions{display:flex; gap:.4rem; align-items:center}

.theme-toggle{border:none; background:var(--surface-2); color:var(--ink-900); padding:.55rem .7rem; border-radius:999px; cursor:pointer; box-shadow:var(--shadow)}
.theme-toggle:hover{filter:brightness(1.02)}
.theme-icon{display:inline-block; font-size:1rem; line-height:1}

.nav{display:flex; gap:.8rem; align-items:center}
.nav a{padding:.55rem .9rem; border-radius:999px; font-weight:700; text-decoration:none; font-size:16px;}
.nav a:hover{background:color-mix(in srgb, var(--blue-700) 12%, transparent); text-decoration:none; color:var(--blue-700)}
.nav .btn{margin-left:.2rem}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:.5rem; border-radius:12px}
.nav-toggle .bar{display:block; width:26px; height:3px; background:var(--blue-700); margin:5px 0; border-radius:99px}
@media (max-width: 960px){
  .nav{position:fixed; inset:70px 1rem auto 1rem; background:var(--surface-2); border-radius:20px; box-shadow:var(--shadow); padding:.75rem; display:none; flex-wrap:wrap}
  .nav[aria-expanded="true"]{display:flex}
  .nav-toggle{display:block}
}

/* Sektioner */
.section{position:relative; padding: min(10vh, 5rem) 0}
.section-cream{background: var(--cream-50)}
.section-mint{background: var(--mint-50)}
.hero{padding-top: clamp(3rem, 8vh, 6rem); background:
  radial-gradient(1200px 300px at -100px -100px, color-mix(in srgb, var(--red-400) 10%, transparent), transparent 70%),
  radial-gradient(1000px 260px at 110% -60px, color-mix(in srgb, var(--blue-500) 10%, transparent), transparent 70%)}
.hero .hero-card{background:var(--surface-2); padding:1.25rem; border-radius:24px; box-shadow: var(--shadow); border: 2px dashed color-mix(in srgb, var(--red-500) 30%, transparent)}
.hero-points{list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.25rem}
.hero-points li::before{content:"• "; color:var(--red-500); font-weight:900}
.hero-card {
  height: auto !important;
  align-self: start; /* gør at kortet starter oppe og ikke strækkes i højden */
}
.wave svg{width:100%; height:80px; display:block}
.wave path{fill: var(--mint-50)}
.wave--header svg path{fill: var(--mint-50)}
.section-cream .wave--bottom path{fill:var(--surface)}
.section-mint .wave--bottom path{fill:var(--surface)}

/* Cards & grids */
.card-grid{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 960px){ .card-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .card-grid{grid-template-columns:1fr} }
.card{background:var(--surface-2); padding:1rem 1.1rem; border-radius:22px; box-shadow: var(--shadow); border: 1px solid var(--border)}
.callout{margin-top:1rem; background:linear-gradient(135deg, var(--mint-50), var(--surface)); border-left:8px solid var(--blue-700); padding:1rem 1.2rem; border-radius:16px}

/* Timeline */
.timeline{display:grid; gap:1rem; margin-top:.5rem}
.time{background: var(--surface-2); border-radius:22px; padding:1rem 1.1rem; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--red-500) 10%, transparent)}
.time-badge{display:inline-block; background:var(--red-500); color:white; font-weight:800; padding:.2rem .6rem; border-radius:999px; margin-bottom:.35rem; letter-spacing:.5px}

/* Indkøring */
.info-card{background: var(--surface-2); border-radius:22px; border:1px dashed color-mix(in srgb, var(--blue-700) 30%, transparent); padding:1.1rem; box-shadow:var(--shadow)}
.list-ticks p::before{content:"✔ "; color:var(--blue-700); font-weight:900}

/* Praktisk */
.practical-grid{display:grid; gap:1rem; grid-template-columns: repeat(2, 1fr)}
@media (max-width: 960px){ .practical-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .practical-grid{grid-template-columns:1fr} }
.practical-card{background:var(--surface-2); border-radius:22px; padding:1rem 1.1rem; box-shadow: var(--shadow)}
.practical-card .muted{color:var(--ink-700); font-size:.95rem}
.practical-card summary{list-style:none; cursor:pointer}
.practical-card summary::-webkit-details-marker{display:none}
.columns{columns:2; gap:1.2rem}

/* Kontakt */
.contact-block{display:grid; gap:.6rem; margin: .5rem 0 1rem}
.contact-item{display:block; background:var(--surface-2); padding:.8rem 1rem; border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--border)}
.contact-emoji{font-size:1.25rem; margin-right:.5rem}
.contact-form{background:var(--surface-2); padding:1rem; border-radius:22px; box-shadow: var(--shadow); border:1px solid color-mix(in srgb, var(--red-500) 12%, transparent)}
label{display:block; font-weight:700; margin:.6rem 0 .25rem}
input, textarea{width:100%; padding:.8rem .9rem; border-radius:14px; border:1.5px solid #3a4250; background:var(--surface); color:var(--ink-900); font:inherit}
input:focus, textarea:focus{outline:3px solid color-mix(in srgb, var(--blue-700) 18%, transparent); border-color: var(--blue-700)}
.form-hint{font-size:.85rem; color:var(--ink-700)}

/* Galleri */
.gallery{display:grid; gap:.8rem; grid-template-columns: repeat(4, 1fr)}
@media (max-width: 1100px){ .gallery{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 700px){ .gallery{grid-template-columns: repeat(2, 1fr)} }
.gallery-item{display:block; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); background:var(--surface-2)}
.gallery img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition: transform .25s ease}
.gallery-item:focus-visible img, .gallery-item:hover img{transform: scale(1.03)}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; padding:2rem; z-index:1000}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-figure{margin:0; max-width:min(92vw, 1100px)}
.lightbox-figure img{display:block; max-width:100%; height:auto; border-radius:12px; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lightbox-figure figcaption{color:white; margin-top:.6rem; text-align:center; font-size:.95rem}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute; top:1rem; background:rgba(20,20,20,.6); color:#fff; border:none; border-radius:999px; padding:.6rem .8rem; cursor:pointer
}
.lightbox-close{right:1rem}
.lightbox-prev,.lightbox-next{top:50%; transform:translateY(-50%); padding:.7rem 1rem; font-size:1.6rem; line-height:1; box-shadow:0 6px 20px rgba(0,0,0,.4)}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

/* Footer */
.site-footer{background: var(--blue-700); color:white; padding:1.2rem 0; margin-top:2rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.footer-note{opacity:.9}
@media (max-width:700px){ .footer-inner{flex-direction:column; text-align:center} }

/* Hjælpere */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip-link{position:absolute; left:1rem; top:-40px; background:black; color:white; padding:.5rem .75rem; border-radius:8px; z-index:1000}
.skip-link:focus{top:1rem}


/* Hero video */
.hero-video{position:relative; min-height: clamp(320px, 52vh, 560px); display:grid; place-items:center; overflow:hidden; isolation:isolate}
.hero-video__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--blue-700) 40%, transparent);
  mix-blend: multiply;
  opacity: .55;
}
.hero-video__content{position:relative; z-index:1; text-align:center; padding: min(8vw, 2rem)}
.hero-video__title{font-size: clamp(2rem, 7vw, 4rem); color:white; text-shadow: 0 10px 30px rgba(0,0,0,.35); letter-spacing:.5px}

/* Citater */
.quotes{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; margin-top:.75rem}
@media (max-width: 960px){ .quotes{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .quotes{grid-template-columns:1fr} }
.quote-card{background:var(--surface-2); border:1px solid var(--border); border-radius:22px; padding:1.1rem; box-shadow: var(--shadow)}
.quote-card blockquote{margin:0 0 .6rem; font-size:1.05rem; line-height:1.5}
.quote-card figcaption{color:var(--ink-700); font-weight:700}

/* Overstyr links/CTA til rød/blå palette */
a { color: var(--blue-700); }
a:hover, a:focus { color: var(--red-500); }
.button, .btn, button[type="submit"], .cta {
  background: var(--red-500);
  color: #fff;
}
.button:hover, .btn:hover, button[type="submit"]:hover, .cta:hover {
  background: var(--blue-500);
  border-color: color-mix(in srgb, var(--blue-700) 40%, transparent);
}
.section { background: var(--cream-50); }
.section-cream { background: var(--cream-100); }
h1, h2, h3 { color: var(--blue-700); }

.staff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.staff img {
  width: 100%;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.staff figcaption {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.hero-card figure {
  margin: 0 0 1rem;
}
.hero-card img {
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero-card figcaption {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: var(--ink-700);
}

/* Gør dropdown feltet visuelt identisk med dine inputs */
.styled-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #2D3E50; /* match din input-border */
  border-radius: 14px;        /* samme som dine input-felter */
  font-size: 16px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* Lidt ekstra spacing så label og select harmonerer */
label select {
  margin-top: 6px;
}

/* Custom dropdown-pil (valgfrit — hvis du vil matche native iOS/Chrome bedre) */
.styled-select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* 2:1 layout: tekst venstre, billede højre */
.time {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2:1 forhold */
  align-items: center;
  gap: 1.2rem;
}

/* Selve billedet */
.time-img {
  width: 100%;
  height: 100%;
   max-height: 320px;            /* justér efter smag */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Tekst skal være venstrestillet */
.time-text {
  text-align: left;
}

@media (max-width: 700px) {
  .time {
    grid-template-columns: 1fr;
  }
}

/* 2-kolonne layout for Årstider & traditioner */
.traditions-two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* tekst lidt bredere end billeder */
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}

/* 2x2 billede-grid */
.traditions-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}

/* kvadratiske billeder med din stil */
.traditions-image-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* mobil: stack tekst over billeder */
@media (max-width: 800px) {
  .traditions-two-col {
    grid-template-columns: 1fr;
  }
}

/* Grid for Pædagogisk grundlag */
.grundlag-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* tekst bredere end billede */
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}

/* Billedstil */
.grundlag-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Mobil: stack tekst over billede */
@media (max-width: 800px) {
  .grundlag-grid {
    grid-template-columns: 1fr;
  }
}


.li::marker {margin-left: 35px;}


/* Safari + generel “hængende billede”-fix */
img {
  display: block;        /* fjerner baseline-gap */
  max-width: 100%;
  height: auto;
}

/* Hvis jeres billeder ligger i <figure>, så nulstil default spacing */
figure {
  margin: 0;
}

/* Meget målrettet kun på Morgensamling-billedet */
img[src$="Morgensamling.jpg"] {
  display: block;
}