:root{
    --green-deep:   #00382A;   /* headings, nav, dark panels — deepened from brand green for AA contrast */
    --green-brand:  #00583C;   /* Konservativ Grøn (Pantone 7484 C) — officiel farve */
    --green-mid:    #0C6B4C;   /* hover / mid accents */
    --sage:         #C1D3BD;   /* officiel sekundær farve — lyse baggrunde */
    --mint:         #9ED196;   /* officiel sekundær farve — accentdetaljer */
    --paper:        #FFFFFF;   /* background */
    --paper-soft:   #F2F2F2;   /* officiel neutral — card / alt section bg */
    --accent:       #9ED196;   /* officiel sekundær farve (mint) — interaktive highlights, samme grønne familie */
    --ink:          #141A17;  /* body text */
    --ink-soft:     #4B564F;  /* secondary text */
    --line:         #DDE3DE;  /* hairlines */
    --white:        #FFFFFF;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Sans 3', -apple-system, sans-serif;
    font-size:17px;
    line-height:1.6;
  }
  h1,h2,h3,.serif{
    font-family:'Lora', Georgia, serif;
    color:var(--green-deep);
    margin:0;
    font-weight:500;
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .eyebrow{
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--green-brand); font-weight:700; margin:0 0 10px;
  }
  .hero .eyebrow{ color:var(--accent); }

  /* Skip link */
  .skip{ position:absolute; left:-999px; top:0; background:var(--green-deep); color:var(--white); padding:10px 16px; z-index:100; }
  .skip:focus{ left:16px; top:16px; }

  /* Top bar */
  .topbar{ background:var(--green-deep); color:#DCE7DF; font-size:14px; }
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:9px 24px; gap:16px; flex-wrap:wrap; }
  .topbar a{ text-decoration:none; }
  .topbar .contact-line{ display:flex; gap:20px; flex-wrap:wrap; }
  .topbar .contact-line a:hover{ color:var(--accent); }
  .social a{ margin-left:14px; opacity:.85; }
  .social a:hover{ opacity:1; color:var(--accent); }

  /* Nav */
  header.main{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(6px); }
  header.main .wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand .mark{ width:40px; height:40px; border-radius:9px; background:var(--green-brand); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:'Lora',serif; font-weight:700; font-size:19px; flex:none; }
  .brand .name{ font-family:'Lora',serif; font-weight:600; font-size:19px; color:var(--green-deep); line-height:1.15; }
  .brand .role{ display:block; font-family:'Source Sans 3',sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
  nav.primary ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; font-weight:600; font-size:15px; }
  nav.primary a{ text-decoration:none; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; }
  nav.primary a:hover, nav.primary a:focus-visible{ color:var(--green-brand); border-bottom-color:var(--accent); }
  .cta-btn{ display:inline-block; background:var(--green-brand); color:var(--white); padding:11px 22px; border-radius:7px; text-decoration:none; font-weight:600; font-size:14.5px; white-space:nowrap; border:1px solid var(--green-brand); }
  .cta-btn:hover{ background:var(--green-mid); border-color:var(--green-mid); }
  .cta-btn.ghost{ background:transparent; color:var(--green-brand); }
  .cta-btn.ghost:hover{ background:var(--green-brand); color:var(--white); }
  .nav-right{ display:flex; align-items:center; gap:28px; }

  /* Hero */
  .hero{ position:relative; background:var(--green-deep); color:var(--white); overflow:hidden; }
  .hero .field-lines{ position:absolute; inset:0; opacity:.16; pointer-events:none; }
  .hero .wrap{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; padding:88px 24px 96px; align-items:center; }
  .hero h1{ color:var(--white); font-size:clamp(34px,4.6vw,54px); line-height:1.08; letter-spacing:-.01em; }
  .hero h1 em{ font-style:normal; color:var(--accent); }
  .hero p.lede{ font-size:19px; color:#D8E2DB; max-width:46ch; margin:22px 0 32px; }
  .hero .actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .hero .actions .cta-btn.outline{ background:transparent; border:1.5px solid rgba(255,255,255,.5); color:var(--white); }
  .hero .actions .cta-btn.outline:hover{ border-color:var(--accent); color:var(--accent); }
  .hero-photo{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:var(--green-deep); margin-bottom:-100px; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; }
  .hero-photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; background:linear-gradient(0deg, rgba(10,25,20,.85), transparent); font-size:13.5px; color:#EDE9DA; }

  /* Villages strip */
  .villages{ background:var(--paper-soft); border-bottom:1px solid var(--line); }
  .villages .wrap{ display:flex; align-items:center; gap:14px; padding:14px 24px; font-size:14px; color:var(--ink-soft); flex-wrap:wrap; }
  .villages strong{ color:var(--green-deep); }
  .villages .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }

  /* Section basics */
  section{ padding:84px 0; }
  .section-head{ max-width:640px; margin:0 0 44px; }
  .section-head h2{ font-size:clamp(26px,3.2vw,34px); margin-top:8px; }
  .section-head p{ color:var(--ink-soft); margin-top:14px; font-size:17px; }

  /* Intro / about teaser */
  .about .about-grid{ display:grid; grid-template-columns:.62fr 1.38fr; gap:56px; align-items:center; }
  .about-photo{ border-radius:14px; overflow:hidden; aspect-ratio:1/1; }
  .about-photo img{ width:100%; height:100%; object-fit:cover; }
  .about-copy p{ margin:0 0 16px; color:var(--ink); max-width:68ch; }
  .signature{ margin-top:22px; height:52px; opacity:.85; }

  /* Mærkesager cards */
  .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 22px; }
  .card .num{ font-family:'Lora',serif; font-size:14px; color:var(--green-brand); font-weight:700; letter-spacing:.06em; }
  .card h3{ font-size:19px; margin:12px 0 10px; }
  .card p{ color:var(--ink-soft); font-size:15px; margin:0; }

  /* News / blog */
  .news{ background:var(--paper-soft); }
  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .post{ background:var(--white); border-radius:12px; overflow:hidden; border:1px solid var(--line); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; }
  .post .thumb{ aspect-ratio:16/10; background:var(--green-brand) center/cover; }
  .post .body{ padding:20px 20px 24px; }
  .post .meta{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--green-brand); font-weight:700; margin-bottom:10px; }
  .post h3{ font-size:18px; line-height:1.35; }
  .post .read{ margin-top:14px; font-size:14px; font-weight:600; color:var(--green-brand); }
  .news-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:16px; }
  .news-head .section-head{ margin:0; }

  /* Contact band */
  .contact-band{ background:var(--green-deep); color:var(--white); }
  .contact-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:56px 24px; }
  .contact-band h2{ color:var(--white); font-size:28px; }
  .contact-band p{ color:#D8E2DB; margin:10px 0 0; }

  footer{ background:var(--green-deep); color:#B9C6BE; border-top:1px solid rgba(255,255,255,.08); }
  footer .wrap{ padding:40px 24px 30px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:14px; }
  footer a{ text-decoration:none; color:#B9C6BE; }
  footer a:hover{ color:var(--accent); }

  @media (max-width: 880px){
    nav.primary{ display:none; }
    .hero .wrap{ grid-template-columns:1fr; padding-top:56px; }
    .hero-photo{ order:-1; max-width:320px; margin-bottom:0; }
    .about .about-grid{ grid-template-columns:1fr; }
    .cards{ grid-template-columns:1fr 1fr; }
    .news-grid{ grid-template-columns:1fr; }
    .contact-band .wrap{ flex-direction:column; align-items:flex-start; }
  }
/* ---------- Inner pages (page-hero, article, blog, contact) ---------- */
.page-hero{ background:var(--green-deep); color:var(--white); padding:64px 0 56px; }
.page-hero .eyebrow{ color:var(--accent); }
.page-hero h1{ color:var(--white); font-size:clamp(30px,4vw,44px); margin-top:10px; max-width:36ch; }
.page-hero p.lede{ color:#D8E2DB; max-width:60ch; margin-top:16px; font-size:18px; }
.crumbs{ font-size:13.5px; color:#AFC2B7; margin-bottom:2px; }
.crumbs a{ text-decoration:none; color:#AFC2B7; }
.crumbs a:hover{ color:var(--accent); }

.article{ padding:72px 0 90px; }
.article .layout{ display:grid; grid-template-columns:1fr 300px; gap:64px; align-items:start; }
.article .prose{ max-width:70ch; }
.article .prose p{ margin:0 0 18px; }
.article .prose h2{ font-size:24px; margin:36px 0 14px; }
.article .prose h2:first-child{ margin-top:0; }
.article figure{ margin:0 0 28px; border-radius:12px; overflow:hidden; }
.article figure img{ width:100%; }
.side-card{ background:var(--paper-soft); border:1px solid var(--line); border-radius:12px; padding:26px; position:sticky; top:96px; }
.side-card h3{ font-size:16px; margin-bottom:14px; }
.side-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px; }
.side-card li a{ text-decoration:none; color:var(--ink); display:flex; justify-content:space-between; }
.side-card .related-titles li a{ display:block; line-height:1.4; }
.side-card li a:hover{ color:var(--green-brand); }
.side-card .cta-btn{ width:100%; text-align:center; margin-top:18px; }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:32px 0 4px; }
.gallery img{ border-radius:10px; aspect-ratio:1/1; object-fit:cover; width:100%; }

.stance-block{ background:var(--paper-soft); border-radius:14px; padding:34px; margin:0 0 24px; border-left:4px solid var(--green-brand); }
.stance-block h2{ font-size:21px; margin:0 0 12px; }
.stance-block p{ margin:0; color:var(--ink-soft); }

/* Blog list */
.blog-hero-strip{ display:flex; gap:18px; flex-wrap:wrap; margin-top:28px; }
.tag-pill{ background:rgba(255,255,255,.12); color:#E7F0EA; border:1px solid rgba(255,255,255,.25); padding:6px 14px; border-radius:999px; font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.tag-pill:hover{ background:rgba(255,255,255,.22); }
.tag-pill.active{ background:var(--accent); color:var(--green-deep); border-color:var(--accent); font-weight:700; }
.blog-list{ padding:72px 0 90px; }
.blog-list .news-grid{ grid-template-columns:repeat(3,1fr); }
.blog-list .post .thumb{ background-color:var(--green-brand); }
.load-more{ display:flex; justify-content:center; margin-top:48px; }

/* Contact page */
.contact-wrap{ padding:72px 0 90px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; }
.contact-info h2{ font-size:26px; margin-bottom:16px; }
.contact-info p{ color:var(--ink-soft); margin:0 0 24px; max-width:44ch; }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.info-row .k{ font-weight:700; color:var(--green-brand); min-width:90px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.info-row .v a{ text-decoration:none; color:var(--ink); font-weight:600; }
.info-row .v a:hover{ color:var(--green-brand); }
.social-row{ display:flex; gap:12px; margin-top:28px; }
.social-row a{ width:40px; height:40px; border-radius:9px; background:var(--paper-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--green-deep); font-size:13px; font-weight:700; }
.social-row a:hover{ background:var(--green-brand); color:var(--white); border-color:var(--green-brand); }

.contact-form{ background:var(--paper-soft); border:1px solid var(--line); border-radius:16px; padding:34px; }
.contact-form .field{ margin-bottom:18px; }
.contact-form label{ display:block; font-size:14px; font-weight:600; color:var(--green-deep); margin-bottom:7px; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--white); font-family:inherit; font-size:15.5px; color:var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--green-brand); outline-offset:1px; border-color:var(--green-brand); }
.contact-form textarea{ min-height:150px; resize:vertical; }
.contact-form button{ border:none; cursor:pointer; }
.form-note{ font-size:13px; color:var(--ink-soft); margin-top:14px; }

@media (max-width: 880px){
  .article .layout{ grid-template-columns:1fr; }
  .side-card{ position:static; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .blog-list .news-grid{ grid-template-columns:1fr; }
}

.side-card li{ display:flex; justify-content:space-between; font-size:15px; }
.side-card li span:first-child{ color:var(--ink-soft); }
.side-card li span:last-child{ font-weight:600; color:var(--ink); text-align:right; }

/* ---------- Blogindlæg (item.html.twig) — mere levende layout ---------- */
.post-hero{
  position:relative; background-size:cover; background-position:center;
  min-height:440px; display:flex; align-items:flex-end; background-color:var(--green-deep);
}
.post-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,56,42,.10) 0%, rgba(0,56,42,.55) 55%, rgba(0,56,42,.92) 100%);
}
.post-hero .wrap{ position:relative; z-index:1; padding:64px 24px 44px; }
.post-hero .crumbs.light{ color:#BFD0C7; margin-bottom:14px; }
.post-hero .crumbs.light a{ color:#BFD0C7; text-decoration:none; }
.post-hero .crumbs.light a:hover{ color:var(--accent); }
.post-hero .tag-pill.solid{
  background:var(--accent); color:var(--green-deep); border:none; font-weight:700;
  display:inline-block; margin-bottom:16px; margin-right:6px; padding:6px 14px; border-radius:999px; font-size:13px;
}
.post-hero h1{ color:var(--white); font-size:clamp(28px,4.2vw,44px); margin:0 0 12px; max-width:30ch; line-height:1.12; }
.post-hero .post-meta{ color:#D8E2DB; font-size:14.5px; margin:0; }

.share-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:40px; padding-top:26px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-soft);
}
.share-row a{
  text-decoration:none; font-weight:600; color:var(--green-brand);
  padding:8px 16px; border:1px solid var(--line); border-radius:999px;
}
.share-row a:hover{ background:var(--green-brand); color:var(--white); border-color:var(--green-brand); }

.related-posts{ display:grid; gap:14px; }
.related-post{ display:flex; gap:12px; text-decoration:none; color:var(--ink); align-items:center; }
.related-thumb{ width:64px; height:64px; border-radius:10px; background-size:cover; background-position:center; flex:none; background-color:var(--green-brand); }
.related-meta{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--green-brand); font-weight:700; }
.related-title{ font-size:14.5px; font-weight:600; line-height:1.32; margin-top:2px; }
.related-post:hover .related-title{ color:var(--green-brand); }

.post-nav{ background:var(--paper-soft); border-top:1px solid var(--line); }
.post-nav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:40px 24px; }
.post-nav-link{
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:6px;
  padding:22px 24px; border:1px solid var(--line); border-radius:12px; background:var(--white);
}
.post-nav-link.next{ text-align:right; align-items:flex-end; }
.post-nav-label{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--green-brand); font-weight:700; }
.post-nav-title{ font-weight:600; }
.post-nav-link:hover{ border-color:var(--green-brand); box-shadow:0 2px 10px rgba(0,56,42,.08); }

@media (max-width: 880px){
  .post-hero{ min-height:320px; }
  .post-nav-grid{ grid-template-columns:1fr; }
  .post-nav-link.next{ text-align:left; align-items:flex-start; }
}

/* ---------- Hamburger-menu (mobil navigation) ---------- */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
}
.hamburger span{ display:block; width:22px; height:2px; background:var(--green-deep); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; max-height:0; overflow:hidden; background:var(--paper);
  border-bottom:1px solid var(--line); transition:max-height .25s ease;
}
.mobile-nav ul{ list-style:none; margin:0; padding:8px 24px 18px; display:grid; gap:2px; }
.mobile-nav a{
  display:block; padding:12px 4px; text-decoration:none; color:var(--ink);
  font-weight:600; font-size:16px; border-bottom:1px solid var(--line);
}
.mobile-nav a.active{ color:var(--green-brand); }
.mobile-nav.open{ max-height:400px; }
body.nav-open{ overflow:hidden; }

@media (max-width: 880px){
  .hamburger{ display:flex; }
  .mobile-nav{ display:block; }
}

@media (max-width: 880px){
  .nav-right .cta-btn.ghost{ display:none; }
}

/* ---------- Kontaktformular — inline status efter afsendelse ---------- */
.form-result{ margin-top:14px; font-size:14px; }
.form-result:empty{ display:none; }
.form-result.success{ background:#E5F1EA; border:1px solid #9ED196; color:#00382A; padding:12px 14px; border-radius:8px; font-weight:600; }
.form-result.error{ background:#FBEAEA; border:1px solid #E7B4B4; color:#7A2020; padding:12px 14px; border-radius:8px; font-weight:600; }
.contact-form button:disabled{ opacity:.7; cursor:default; }