/*

1) Vælg en palet (vælg én af disse – eller mix)

A) “Skov” (passer til dit hero-billede)
bg #0f1312 · surface #171b19 · text #eef2ef
muted #a9b5ac · border #2a2f2c
primary #2bb673 (accentgrøn)
link #84e1a7 · link-hover #b7f0cc

B) “Nordisk lys” (lys baggrund)
bg #f6f7f8 · surface #ffffff · text #1d2125
muted #6b7280 · border #e5e7eb
primary #2563eb (klar blå)
link #2563eb · link-hover #1e40af

C) “Sand & kul” (varmt, roligt)
bg #121212 · surface #1a1a1a · text #f3f3f3
muted #b3b3b3 · border #2a2a2a
primary #e2b659 (sand/guld)
link #f2cc7b · link-hover #ffe3a8

*/
/* =========================
   1) Skov – farve-variabler
   ========================= */
   
/* Skov – Medium kontrast */

:root{
  --bg:            #e8f1ec;  /* sidebaggrund (lys grøn) */
  --surface:       #ffffff;  /* kort/indhold */
  --surface-2:     #f3f8f5;  /* header/footer-strimler */
  --text:          #14261c;  /* mørk tekst */
  --muted:         #5a6a61;
  --border:        #c7d5cd;  /* lys kant */
  --border-strong: #9fb2a6;  /* tydeligere kant */

  --primary:       #2bb673;

  --link:          #1e8e5a;
  --link-hover:    #166c45;

  /* Menu (tydeligt mørk) */
  --menu-bg:        #16261e;
  --menu-fg:        #ffffff;
  --menu-active-bg: #244b38;
  --menu-active-fg: #ffffff;
  --menu-sub-bg:    #1e3328;
}



/* =========================
   2) Brug variablerne
   ========================= */

/* Basis */
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Links */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

/* Layout-krom */
.site-header, .site-footer{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.site-header{ border-bottom: 1px solid var(--border); }
.site-footer{ border-top: 1px solid var(--border); }

/* Bredde på indhold */
.page-width,
.site-main{ max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* MENU UNDER HERO */
.primary-nav{
  background: var(--menu-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.primary-nav ul{ list-style: none; margin: 0; padding: 0; }
.primary-nav a{
  color: var(--menu-fg);
  text-decoration: none;
  display: inline-block;
  padding: .6rem .9rem;
}
.primary-nav li:hover > a,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a{
  background: var(--menu-active-bg);
  color: var(--menu-active-fg);
}
.primary-nav .sub-menu{
  background: var(--menu-sub-bg);
  border: 1px solid var(--border);
}

/* Fallback – hvis nogle steder bruger .menu--primary */
.menu--primary a{ color: var(--menu-fg); }
.menu--primary a:hover{
  background: var(--menu-active-bg);
  color: var(--menu-active-fg);
}

/* Brødkrummer */
.breadcrumbs{
  margin: .75rem auto 0;
  color: var(--muted);
}
.breadcrumbs a{ color: var(--link); }
.breadcrumbs a:hover{ color: var(--link-hover); }

/* Hero-tekst */
.hero__title,
.hero__tagline{ color: #fff; }

/* Kategori/listekort */
.entry{ border-bottom: 1px solid var(--border); padding: 1rem 0; }
.entry__more a{ color: var(--link); }
.entry__more a:hover{ color: var(--link-hover); }



/* ===== Basis ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #222;
}

/* Undgå vandret scroll når hero kører fuld bredde */
html, body { overflow-x: hidden; }

/* ===== Layout ===== */
.site-header, .site-footer { padding: 1rem; }
.site-header { border-bottom: 1px solid #e5e5e5; }
.site-footer { border-top: 1px solid #e5e5e5; }
.site-main   { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* Forside: skjul header (vi viser hero øverst i stedet) */
/*body.home .site-header { display: none !important; }*/

/* ===== Menu ===== */
.menu--primary { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.menu--primary a { text-decoration: none; color: inherit; }
.menu--primary a:hover { text-decoration: underline; }

/* Branding */
.site-title { font-weight: 700; text-decoration: none; color: inherit; }

/* ===== Hero ===== */

/* Fuld bredde ud til venstre/højre kant */
.hero--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Hero wrapper */
.hero--front{
  position: relative;
  margin: 0 0 1rem 0;   /* ingen top-margin, lidt luft under */
  border-radius: 0;
  overflow: hidden;
}

/* Selve billedet – hele højden, ingen beskæring */
.hero__img{
  display: block;
  width: 100%;
  height: auto;
}

/* Tekst i hero – højere oppe og tæt mellem linjerne */
.hero__inner{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: clamp(24px, 10vh, 140px);
  text-align: center; color: #fff;
  gap: .35em;
}

/* Typografi i hero */
.hero__title{   margin: 0; font-size: clamp(2rem, 6vw, 4rem); }
.hero__tagline{ margin: 0; font-size: clamp(1rem, 2.5vw, 1.5rem); }

/* (Valgfrit) let læsbarhed uden overlay */
/* .hero__title, .hero__tagline { text-shadow: 0 2px 6px rgba(0,0,0,.18); } */

/* Header-menu (primary) */
.menu--primary{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.menu--primary li{ margin: 0; }
.menu--primary a{
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.menu--primary a:hover{ text-decoration: underline; }

/* Fallback hvis wp_page_menu bruges (viser <div class="menu"><ul>… ) */
.menu > ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-header .site-title{ display:none; }

/* MENU – sort bar, samme stil som før */
.primary-nav{
  background:#111;
  border-bottom:1px solid #000;
}
.primary-nav--below{ margin: 0 0 .75rem 0; }

/* Fuld-bredde nav som hero */
.primary-nav--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Vandret liste + dropdowns */
.menu--primary{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0; align-items:center; flex-wrap:wrap;
}
.menu--primary > li{ position:relative; }
.menu--primary > li > a{
  display:block; padding:.75rem 1.25rem;
  color:#fff; text-decoration:none; font-weight:600;
}
.menu--primary > li:hover > a,
.menu--primary > li.current-menu-item > a,
.menu--primary > li.current-menu-ancestor > a{ background:#222; }

/* Dropdown niveau 2 */
.menu--primary li > ul{
  position:absolute; left:0; top:100%;
  min-width:220px; background:#333; padding:.5rem 0; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s; z-index:999;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.menu--primary li:hover > ul,
.menu--primary li:focus-within > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.menu--primary li > ul > li > a{
  display:block; padding:.6rem 1rem; color:#eee; text-decoration:none; white-space:nowrap;
}
.menu--primary li > ul > li > a:hover{ background:#444; color:#fff; }

/* Dropdown niveau 3 (til højre) */
.menu--primary li > ul > li{ position:relative; }
.menu--primary li > ul > li > ul{
  position:absolute; top:0; left:100%; min-width:220px; background:#333; padding:.5rem 0; margin-left:1px;
  opacity:0; visibility:hidden; transition:opacity .12s ease, visibility .12s;
}
.menu--primary li > ul > li:hover > ul,
.menu--primary li > ul > li:focus-within > ul{ opacity:1; visibility:visible; }

/* Små piletænder for “har underpunkter” */
.primary-nav .menu--primary > li.menu-item-has-children > a::after{
  content: " ▾"; font-size: .85em; opacity: .8;
}
.primary-nav .menu--primary li.menu-item-has-children > a::after{
  /* underpunkter får en pil til højre */
}
.primary-nav .menu--primary li li.menu-item-has-children > a::after{
  content: " ▸"; margin-left: .35em; opacity: .8;
}

/* ====== Dropdown niveau 2 ====== */
.primary-nav .menu--primary li > ul{
  position: absolute;
  left: 0; top: 100%;
  min-width: 220px;
  background: #333;
  padding: .5rem 0;
  margin: 0;
  list-style: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  z-index: 999;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.primary-nav .menu--primary li:hover > ul,
.primary-nav .menu--primary li:focus-within > ul{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-nav .menu--primary li > ul > li > a{
  display: block;
  padding: .6rem 1rem;
  color: #eee;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav .menu--primary li > ul > li > a:hover{
  background: #444;
  color: #fff;
}

/* ====== Dropdown niveau 3 (flytter sig til højre) ====== */
.primary-nav .menu--primary li > ul > li{ position: relative; }
.primary-nav .menu--primary li > ul > li > ul{
  position: absolute;
  top: 0; left: 100%;
  min-width: 220px;
  background: #333;
  padding: .5rem 0;
  margin-left: 1px; /* lille “sømkant” */
  list-style: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity .12s ease, visibility .12s;
}
.primary-nav .menu--primary li > ul > li:hover > ul,
.primary-nav .menu--primary li > ul > li:focus-within > ul{
  opacity: 1;
  visibility: visible;
}

/* Tastatur-fokus synligt */
.primary-nav .menu--primary a:focus{
  outline: 2px solid #86b7fe;
  outline-offset: 2px;
}

/* Fallback-markup fra wp_page_menu: <div class="menu"><ul>… */
.primary-nav .menu > ul{
  list-style: none; margin: 0; padding: 0; display: flex;
}

.primary-nav{ margin-bottom: .75rem; }


/* Menu-stang */
.primary-nav{
  background:#111;
  border-bottom:1px solid #000;
  margin:0 0 .75rem 0;   /* lidt luft under menuen */
}

/* Når menuen ligger under hero inde i .site-main behøver den ikke ekstra top-luft */
.primary-nav--below{ margin-top: 0; }

/* Vandret menu */
.menu--primary{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0; align-items:center; flex-wrap:wrap;
}
.menu--primary > li{ position:relative; }
.menu--primary > li > a{
  display:block; padding:.75rem 1.25rem; color:#fff; text-decoration:none; font-weight:600;
}
.menu--primary > li:hover > a,
.menu--primary > li.current-menu-item > a,
.menu--primary > li.current-menu-ancestor > a{ background:#222; }

/* Dropdowns (som før) */
.menu--primary li > ul{
  position:absolute; left:0; top:100%;
  min-width:220px; background:#333; padding:.5rem 0; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s; z-index:999;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.menu--primary li:hover > ul,
.menu--primary li:focus-within > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.menu--primary li > ul > li > a{ display:block; padding:.6rem 1rem; color:#eee; text-decoration:none; white-space:nowrap; }
.menu--primary li > ul > li > a:hover{ background:#444; color:#fff; }
.menu--primary li > ul > li{ position:relative; }
.menu--primary li > ul > li > ul{
  position:absolute; top:0; left:100%; min-width:220px; background:#333; padding:.5rem 0; margin-left:1px;
  opacity:0; visibility:hidden; transition:opacity .12s ease, visibility .12s;
}
.menu--primary li > ul > li:hover > ul,
.menu--primary li > ul > li:focus-within > ul{ opacity:1; visibility:visible; }

/* Forsiden: fjern headeren helt, så hero går helt til top */
body.home .site-header{ display:none !important; }

/* sikkerhed: ingen top-margin på hero */
.hero--front{ margin-top: 0 !important; }

/* Ingen horisontal scroll når vi bruger full-bleed */
html, body { overflow-x: hidden; }

/* --- Page hero: fast højde, fuld bredde --- */
.page-hero--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.page-hero{
  position: relative;
  height: 260px;        /* ← justér højden her (fx 220–360px) */
  overflow: hidden;
}
.page-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* beskær så det fylder hele højden */
  display: block;
}

/* Menu under hero – samme stil som forsiden */
.primary-nav{
  background:#111;
  border-bottom:1px solid #000;
}
.primary-nav--below{ margin: 0 0 .75rem 0; }
.primary-nav--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Vandret menu + dropdowns (som på forsiden) */
.menu--primary{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0; align-items:center; flex-wrap:wrap;
}
.menu--primary > li{ position:relative; }
.menu--primary > li > a{
  display:block; padding:.75rem 1.25rem;
  color:#fff; text-decoration:none; font-weight:600;
}
.menu--primary > li:hover > a,
.menu--primary > li.current-menu-item > a,
.menu--primary > li.current-menu-ancestor > a{ background:#222; }
.menu--primary li > ul{
  position:absolute; left:0; top:100%;
  min-width:220px; background:#333; padding:.5rem 0; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s; z-index:999;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.menu--primary li:hover > ul,
.menu--primary li:focus-within > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.menu--primary li > ul > li > a{
  display:block; padding:.6rem 1rem; color:#eee; text-decoration:none; white-space:nowrap;
}
.menu--primary li > ul > li > a:hover{ background:#444; color:#fff; }
.menu--primary li > ul > li{ position:relative; }
.menu--primary li > ul > li > ul{
  position:absolute; top:0; left:100%; min-width:220px; background:#333; padding:.5rem 0; margin-left:1px;
  opacity:0; visibility:hidden; transition:opacity .12s ease, visibility .12s;
}
.menu--primary li > ul > li:hover > ul,
.menu--primary li > ul > li:focus-within > ul{ opacity:1; visibility:visible; }

/* Footer widgets layout */
.footer-widgets{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}
.widget{ background:#f7f7f7; padding: .75rem 1rem; border-radius: 6px; }
.widget .widget__title{ margin:0 0 .5rem; font-size:1.1rem; }

/* Skjul header-menu på forsiden og på indlæg */
body.home .site-header,
body.single .site-header{
  display: none !important;
}

.entry__title{ margin: .5rem 0 1rem; }
.entry__content p{ margin: 0 0 1rem; }

/* Skjul headerens menu hvor vi bruger menuen under hero */
body.home .site-header,
body.single .site-header,
body.blog .site-header{ display: none !important; }

body.error404 .site-header { display: none !important; }

.breadcrumbs{ font-size:.9rem; margin:.5rem 0 1rem; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.breadcrumbs li::after{ content:"/"; margin-left:.5rem; opacity:.6; }
.breadcrumbs li:last-child::after{ content:none; }
.breadcrumbs a{ text-decoration:none; }

:root{
  --site-width: 1100px;   /* samme som .site-main */
  --gutter: 1rem;         /* indvendig padding ved smalle skærme */
}

/* Menuen: fuld bredde baggrund, men indholdet linjer med site-main */
.primary-nav--fullbleed{
  padding-inline: var(--gutter);
}
@media (min-width: 1200px){
  .primary-nav--fullbleed{
    /* giver samme “kant” som .site-main */
    padding-left: calc((100vw - var(--site-width)) / 2 + var(--gutter));
    padding-right: calc((100vw - var(--site-width)) / 2 + var(--gutter));
  }
}

/* Brødkrummer: centrér og match site-main-bredden */
.breadcrumbs{
  max-width: var(--site-width);
  margin: .5rem auto 1rem;    /* centrér og giv lidt luft over/under */
  padding: 0 var(--gutter);   /* samme indvendige padding som .site-main */
}

.site-main{ max-width: var(--site-width); margin: 0 auto; padding: 0 var(--gutter); }

.page-hero{ position:relative; }
.page-hero__overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); padding:1rem;
}
.page-hero__overlay h1{ margin:0; font-size:clamp(1.8rem,5vw,3rem); }
.page-hero__tagline{ margin:.5rem 0 0; max-width:900px; }
body.category .site-header{ display:none !important; } /* hvis du skjuler header-menu som på de andre */

/* Kategori-oversigt (entry-kort) */
.entry{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1.25rem 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}
.entry__thumb img{ display:block; width:100%; height:auto; border-radius:4px; }
.entry__title{ margin:0 0 .4rem; font-size:1.25rem; }
.entry__excerpt{ margin:0 0 .5rem; color:#444; }
.entry__more a{ text-decoration:none; font-weight:600; }

/* Smalt layout */
@media (max-width: 680px){
  .entry{ grid-template-columns: 1fr; }
}

/* Pagination-styling */
.pagination .page-numbers{ display:inline-block; padding:.4rem .6rem; margin:.1rem; }
.pagination .current{ background:#111; color:#fff; border-radius:4px; }

.single-entry .entry-title { margin: 0 0 .5rem; }
.post-nav{ display:flex; justify-content:space-between; gap:1rem; margin:2rem 0; }

/* Kategori-oversigt */
.entry{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1.25rem 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}
.entry__thumb img{ display:block; width:100%; height:auto; border-radius:4px; }
.entry__title{ margin:0 0 .4rem; font-size:1.25rem; }
.entry__excerpt{ margin:0 0 .5rem; color:#444; }
.entry__more a{ text-decoration:none; font-weight:600; }

/* Smal skærm */
@media (max-width: 680px){
  .entry{ grid-template-columns: 1fr; }
}

/* Pagination */
.pagination .page-numbers{ display:inline-block; padding:.4rem .6rem; margin:.1rem; }
.pagination .current{ background:#111; color:#fff; border-radius:4px; }