/* =========================================================
   Piktogrammertilboern.dk — soft pastel UI (match screenshots)
   Works with your existing HTML structure (no class changes).
   ========================================================= */

/* ---- Design tokens ---- */
:root{
  /* Background gradient */
  --bg-top: #b8c6b2;        /* sage */
  --bg-mid: #e7d9c2;        /* sand */
  --bg-bot: #f4efe6;        /* warm off-white */

  /* Surfaces */
  --surface: #fbf8f1;       /* card */
  --surface-2: #f6f0e6;     /* secondary card */
  --border: rgba(62,52,43,.14);

  /* Text */
  --ink: #3e342b;           /* warm brown */
  --muted: rgba(62,52,43,.8);
  --breadcrumbs: #5B6E53;

  /* Accents (buttons/pills like screenshots) */
  --terracotta: #b56b5c;    /* main CTA */
  --terracotta-2: #c27a69;
  --sun: #f0c870;           /* morning */
  --moon: #7ea6cc;          /* evening */
  --outline: rgba(181,107,92,.55);

  /* Radius / shadows */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;

  --shadow-1: 0 10px 30px rgba(62,52,43,.10);
  --shadow-2: 0 6px 18px rgba(62,52,43,.10);

  /* Layout */
  --content: 1080px;
  --pad: clamp(16px, 2.2vw, 28px);
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  /*background:
    radial-gradient(1200px 600px at 20% 15%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 42%, var(--bg-bot) 100%);*/
  background-color: var(--bg-top);
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
}

/* Better default typography */
h1,h2,h3{ line-height:1.15; margin:0 0 .6rem; letter-spacing:-.02em; }
p{ margin:0 0 1rem; color:var(--muted); }
a{ color:inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover{ text-decoration-thickness: .12em; }
:focus-visible{ outline:3px solid rgba(126,166,204,.65); outline-offset:3px; border-radius:10px; }

/* Constrain content */
body > header, body > main, body > footer{
  width:min(var(--content), calc(100% - 2*var(--pad)));
  margin-inline:auto;
}

/* ---- Top header (logo + nav pills) ---- */
body > header{
  padding: clamp(14px, 2vw, 22px) 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

body > header > div a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(251,248,241,.55);
  border:1px solid var(--border);
  box-shadow: 0 8px 18px rgba(62,52,43,.08);
  backdrop-filter: blur(6px);
}

body > header nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

body > header nav a{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  background: rgba(251,248,241,.50);
  border:1px solid var(--border);
  backdrop-filter: blur(6px);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

body > header nav a:hover{
  transform: translateY(-1px);
  background: rgba(251,248,241,.70);
  box-shadow: 0 10px 22px rgba(62,52,43,.10);
}

/* Mobile: logo above nav */
@media (max-width: 760px){
  body > header{ align-items:stretch; }
  body > header > div{ display:flex; }
  body > header nav ul{ justify-content:center; }
}

/* ---- Main wrapper ---- */
main#content{
  padding: 14px 0 38px;
}

/* ---- Hero (your main <header> inside <main>) ---- */
main#content > header{
  background:
    radial-gradient(700px 260px at 18% 15%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(251,248,241,.80), rgba(251,248,241,.55));
  border:1px solid var(--border);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 34px);
  margin: 10px 0 18px;
  position:relative;
  overflow:hidden;
}

/* Subtle “wave” like screenshots */
main#content > header::after{
  content:"";
  position:absolute;
  inset:auto -20% -45% -20%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(181,107,92,.15), transparent 70%);
  transform: rotate(-2deg);
  pointer-events:none;
}

main#content > header h1{
  font-size: clamp(28px, 3.2vw, 46px);
  color: var(--ink);
}
main#content > header h1 span:not(.hidden) {
    display: block;
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: 12px;
    color: var(--ink);
    margin-top: 0.125em;
    margin-bottom: 0.5em;
}
main#content > header h1 span:not(.hidden):first-letter {
    text-transform: uppercase;
}

main#content > header p{
  font-size: clamp(16px, 1.35vw, 18px);
}

main#content > header nav{
    margin-top: -16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bg-top);
}

.breadcrumbs ol{
  list-style:none;
  padding:0;
  margin: 10px 0 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color: var(--breadcrumbs);
}
.breadcrumbs ol li:not(:first-of-type):before {
  content: "\003e";
  margin-right: 10px;
}
/*.breadcrumbs a{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(251,248,241,.55);
  border:1px solid var(--border);
  text-decoration:none;
}*/

/* ---- Section spacing ---- */
main#content > section,
main#content > aside{
  margin-top: 18px;
}

/* Headings */
main#content h2{
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: 12px;
  color: var(--ink);
}
main#content h3{
  font-size: 18px;
  color: var(--ink);
}

/* ---- Cards grid for "Start her" (the inner div with 3 sections) ---- */
section[aria-labelledby="emner"] > div{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

section[aria-labelledby="emner"] > div > section{
  grid-column: span 4;
  background: linear-gradient(180deg, var(--surface), rgba(251,248,241,.72));
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
}

section[aria-labelledby="emner"] > div > section::before{
  content:"";
  position:absolute;
  inset:-40% -35% auto -35%;
  height: 180px;
  background: radial-gradient(closest-side, rgba(184,198,178,.45), transparent 70%);
  pointer-events:none;
}

section[aria-labelledby="emner"] > div > section ul{
  margin: 10px 0 14px;
  padding-left: 18px;
  color: var(--muted);
}
section[aria-labelledby="emner"] > div > section li{ margin: .25rem 0; }

/* CTA links inside cards as buttons */
section[aria-labelledby="emner"] > div > section p:last-child a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(181,107,92,.14);
  border: 1px solid rgba(181,107,92,.30);
  text-decoration:none;
  font-weight:600;
}

@media (max-width: 980px){
  section[aria-labelledby="emner"] > div > section{ grid-column: span 6; }
}
@media (max-width: 620px){
  section[aria-labelledby="emner"] > div > section{ grid-column: span 12; }
}

/* ---- Standard content sections look like soft panels ---- */
main#content > section:not([aria-labelledby="emner"]) {
  background: rgba(251,248,241,.55);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 18px;
}

/* Lists inside these sections */
main#content > section ul{
  margin: 10px 0 14px;
  padding-left: 18px;
  color: var(--muted);
}

/* ---- Gratis materialer: article cards in grid ---- */
section[aria-labelledby="gratis"] > div{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 10px;
}

section[aria-labelledby="gratis"] article{
  grid-column: span 6;
  background: linear-gradient(180deg, var(--surface), rgba(251,248,241,.70));
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--shadow-2);
}

section[aria-labelledby="gratis"] article h3{
  margin-bottom: 6px;
}

@media (max-width: 780px){
  section[aria-labelledby="gratis"] article{ grid-column: span 12; }
}

/* “Se alle gratis materialer” link as outline button */
section[aria-labelledby="gratis"] > p a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid var(--outline);
  background: rgba(251,248,241,.60);
  margin-top: 16px;
}

/* ---- Popular guides list (clean + airy) ---- */
main#content > section[aria-labelledby="popular"] ul{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
section[aria-labelledby="popular"] li{
  grid-column: span 6;
}
section[aria-labelledby="popular"] a{
  display:block;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(251,248,241,.70);
  text-decoration:none;
}
section[aria-labelledby="popular"] a:hover{
  box-shadow: 0 10px 20px rgba(62,52,43,.10);
  transform: translateY(-1px);
}
@media (max-width: 720px){
  section[aria-labelledby="popular"] li{ grid-column: span 12; }
}

/* ---- About (aside) ---- */
main#content > aside{
  background: rgba(251,248,241,.52);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow-2);
}

/* ---- Footer ---- */
footer{
  margin-top: 30px;
  padding: 18px 0 28px;
  color: rgba(62,52,43,.78);
}

footer nav ul{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

footer nav a{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid var(--border);
  background: rgba(251,248,241,.45);
}

footer p{ 
    margin: 0;
    color: var(--ink);
}

/* ---- Small nice-to-haves ---- */
img{ max-width:100%; height:auto; }

/* =========================================================
   Burger menu (CSS-only)
   Requires header markup with .site-header, .nav-toggle, .nav-burger, .site-nav
   ========================================================= */

.site-header{
  padding: clamp(14px, 2vw, 22px) 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
  z-index: 1000;  
}

.site-header .brand a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(251,248,241,.55);
  border:1px solid var(--border);
  box-shadow: 0 8px 18px rgba(62,52,43,.08);
  backdrop-filter: blur(6px);
}

/* Hide checkbox */
.nav-toggle{
  position:absolute;
  /*width:1px;
  height:1px;
  opacity:0;*/
  pointer-events:none;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background: transparent;
  color: red;
  appearance: none;
  right: -3px;
}

/* Burger button */
.nav-burger{
  display:none; /* shown on small screens */
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(251,248,241,.55);
  box-shadow: 0 8px 18px rgba(62,52,43,.08);
  backdrop-filter: blur(6px);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-direction: column;
  position: relative;
  z-index: 1100;
}

.nav-burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(62,52,43,.78);
  border-radius:999px;
  transition: transform .18s ease, opacity .18s ease;
}

/* Desktop nav (your existing pill styling will apply) */
.site-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Small screens: burger + dropdown panel */
@media (max-width: 760px){
  .nav-burger{
    display:inline-flex;
  }

  /* Hide nav by default */
  .site-nav{
    position:absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display:none;
    padding: 12px;
    border-radius: var(--r-xl);
    border:1px solid var(--border);
    background: rgba(251,248,241,.75);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(10px);
    z-index: 1200;
  }

  .site-nav ul{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }

  .site-nav a{
    display:flex;
    width:100%;
    justify-content:center;
  }

  /* Open state */
  .nav-toggle:checked ~ .site-nav{
    display:block;
    animation: navPop .14s ease-out;
  }

  /* Burger -> X */
  .nav-toggle:checked + .nav-burger span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle:checked + .nav-burger span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked + .nav-burger span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  @keyframes navPop{
    from{ transform: translateY(-6px); opacity:.0; }
    to{ transform: translateY(0); opacity:1; }
  }
}

/* Optional: if you prefer logo centered on mobile */
@media (max-width: 760px){
  .site-header .brand{
    flex:1;
    display:flex;
  }
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

picture.routine-example {
    display: flex;
    place-self: center;
    margin: 20px 0;
    border: 2px solid;
    border-radius: 20px;
    overflow: hidden;
}

section[aria-labelledby="eksempel"] > picture + p{
  text-align: center;
}

section[aria-labelledby="eksempel"] > picture + p a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid var(--outline);
  background: rgba(251,248,241,.60);
}

.sr-only {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0px;
    width: 0px;
}

.hidden {
  display: none;
}

/* #abc5ab / rgb(171, 197, 171) */
/* #dcc7a6 / rgb(220, 199, 166) */