/*
 Theme Name:   Familiepark Child
 Theme URI:    https://familiepark.dk/
 Description:  Child theme til GeneratePress for familiepark.dk (simpel, hurtig og linksalgs-venlig).
 Author:       Mikkel Nielsen
 Author URI:   https://familiepark.dk/
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  familiepark-child
*/

/* =========================================================
   0) Design tokens
========================================================= */
:root{
  /* Brand */
  --fp-green:  #0a8f2a;
  --fp-blue:   #1e63b6;
  --fp-yellow: #f6c400;

  /* Text */
  --fp-text:  #0f172a;

  /* Layout */
  --fp-max-width: 1100px;      /* site-wide container */
  --fp-article-width: 980px;   /* single post content width */

  /* UI */
  --fp-radius: 16px;
  --fp-shadow: 0 10px 26px rgba(0,0,0,.08);

  /* Borders */
  --fp-border-color: rgba(15,23,42,.12);
  --fp-border: 1px solid var(--fp-border-color);
}

/* =========================================================
   1) Base
========================================================= */
body{
  color: var(--fp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

/* =========================================================
   2) Containers (GeneratePress - separate containers)
========================================================= */
.separate-containers .inside-article{
  max-width: var(--fp-max-width);
  margin-left: auto;
  margin-right: auto;
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
}

/* Overskrifter */
.entry-title{ letter-spacing: -0.02em; }

/* =========================================================
   3) Navigation
========================================================= */
.main-navigation{ background: var(--fp-green); }
.main-navigation a{
  color:#fff;
  font-weight: 600;
}
.main-navigation .current-menu-item > a,
.main-navigation a:hover{
  background: rgba(255,255,255,.12);
}

/* =========================================================
   4) Forside UI
========================================================= */
.fp-home section{ margin: 0 0 26px; }

.fp-hero{
  background: linear-gradient(180deg, rgba(10,143,42,.10), rgba(255,255,255,0));
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 26px 22px;
  box-shadow: var(--fp-shadow);
}
.fp-hero h1{ margin: 0 0 10px; letter-spacing: -0.02em; }
.fp-hero p{ margin: 0 0 16px; max-width: 60ch; opacity: .92; }

.fp-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.fp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: var(--fp-border);
  text-decoration:none;
  font-weight:700;
}
.fp-btn--primary{ background: var(--fp-green); color:#fff; border-color: transparent; }
.fp-btn--primary:hover{ filter: brightness(.95); }
.fp-btn--secondary{ background:#fff; color: var(--fp-green); }
.fp-btn--secondary:hover{ background: rgba(10,143,42,.06); }

.fp-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.fp-chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(30,99,182,.08);
  color: var(--fp-blue);
  text-decoration:none;
  font-weight:600;
}
.fp-chip:hover{ background: rgba(30,99,182,.14); }

.fp-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.fp-card{
  grid-column: span 12;
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background:#fff;
  padding: 16px;
  box-shadow: var(--fp-shadow);
  text-decoration:none;
  color: var(--fp-text);
}
.fp-card h3{ margin: 0 0 6px; }
.fp-card p{ margin: 0; opacity:.9; }
.fp-card::before{
  content:"";
  display:block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fp-green), var(--fp-blue), var(--fp-yellow));
  margin-bottom: 12px;
}
@media (min-width: 720px){ .fp-card{ grid-column: span 6; } }
@media (min-width: 1024px){ .fp-card{ grid-column: span 4; } }

.fp-section-title{
  margin: 0 0 10px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

/* =========================================================
   5) Panels / boxes
========================================================= */
.fp-box{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 16px 18px;
  box-shadow: var(--fp-shadow);
}
.fp-box--muted{ background: rgba(15,23,42,.03); }

.fp-panel{
  max-width: var(--fp-article-width);
  margin: 18px auto;
  padding: 18px 18px;
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  background: #fff;
  position: relative;
}
.fp-panel::before{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fp-green), var(--fp-blue), var(--fp-yellow));
  opacity: .9;
}
.fp-panel__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.05rem;
}

/* =========================================================
   6) Tables
========================================================= */
.fp-table-wrap{
  overflow:auto;
  border-radius: var(--fp-radius);
  border: var(--fp-border);
}
.fp-table-wrap table{ width:100%; border-collapse: collapse; }
.fp-table-wrap th,
.fp-table-wrap td{
  padding: 10px 12px;
  border-bottom: var(--fp-border);
  vertical-align: top;
}
.fp-table-wrap tr:last-child td{ border-bottom: 0; }

/* =========================================================
   7) Shortcode cards: latest / guides
========================================================= */
.fp-latest,
.fp-guides{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px){
  .fp-latest--cols-2,
  .fp-guides--cols-2{ grid-template-columns: repeat(2, 1fr); }

  .fp-latest--cols-3,
  .fp-guides--cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* Post card (fp_latest_guides) */
.fp-card--post{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background:#fff;
  padding: 14px;
  box-shadow: var(--fp-shadow);
}
.fp-card__thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow:hidden;
  margin: 0 0 10px;
  background: rgba(15,23,42,.03);
}
.fp-card__thumb img,
.fp-card__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display:block;
}
.fp-card__meta{
  margin: 0 0 8px;
  font-size: .92rem;
  opacity: .75;
}
.fp-card__title{ margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.01em; }
.fp-card__title a{ color: var(--fp-text); text-decoration:none; }
.fp-card__title a:hover{ text-decoration: underline; }
.fp-card__excerpt{ margin: 0 0 10px; opacity:.9; font-size:.95rem; }
.fp-card__more{ display:inline-block; font-weight:700; color: var(--fp-green); text-decoration:none; }
.fp-card__more:hover{ text-decoration: underline; }

/* Guide cards (guide-variant) */
.fp-guide-card{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background:#fff;
  padding: 14px;
  box-shadow: var(--fp-shadow);
}
.fp-guide-card__thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow:hidden;
  margin: 0 0 10px;
  background: rgba(15,23,42,.03);
}
.fp-guide-card__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.fp-guide-card__title{ margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.01em; }
.fp-guide-card__title a{ color: var(--fp-text); text-decoration:none; }
.fp-guide-card__title a:hover{ text-decoration: underline; }
.fp-guide-card__excerpt{ margin: 0 0 10px; opacity:.9; font-size:.95rem; }
.fp-guide-card__more{ font-weight:700; color: var(--fp-green); text-decoration:none; }
.fp-guide-card__more:hover{ text-decoration: underline; }

/* =========================================================
   8) Archive/category grid (2 kolonner)
========================================================= */
body.archive .site-main,
body.category .site-main,
body.blog .site-main{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px){
  body.archive .site-main,
  body.category .site-main,
  body.blog .site-main{
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

body.archive .site-main > article,
body.category .site-main > article,
body.blog .site-main > article{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background:#fff;
  padding: 14px;
  box-shadow: var(--fp-shadow);
  margin: 0 !important;
}

body.archive .post-image,
body.category .post-image,
body.blog .post-image{ margin: 0 0 10px !important; }

body.archive .post-image img,
body.category .post-image img,
body.blog .post-image img{
  border-radius: 12px;
  display:block;
  width:100%;
  height:auto;
}

body.archive .entry-title,
body.category .entry-title,
body.blog .entry-title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
body.archive .entry-summary,
body.category .entry-summary,
body.blog .entry-summary{
  font-size:.95rem;
  opacity:.9;
}

body.archive .read-more a,
body.category .read-more a,
body.blog .read-more a{
  font-weight:700;
  color: var(--fp-green);
  text-decoration:none;
}
body.archive .read-more a:hover,
body.category .read-more a:hover,
body.blog .read-more a:hover{
  text-decoration: underline;
}

/* pagination across both columns */
body.archive .paging-navigation,
body.category .paging-navigation,
body.blog .paging-navigation{
  grid-column: 1 / -1;
}

/* Kategori-beskrivelse som “intro card” */
body.category .term-description{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
  background: linear-gradient(180deg, rgba(10,143,42,.10), rgba(255,255,255,0));
  padding: 18px;
  margin: 0 0 16px;
}
body.category .term-description p{
  margin: 0;
  max-width: 70ch;
}

/* =========================================================
   9) Single post base (GeneratePress header + featured)
   OBS: Din functions.php bruger fp-article-header + fp-featured
========================================================= */
.fp-article-header{ padding: 18px 0 6px; }
.fp-article-header__inner{
  max-width: var(--fp-article-width);
  margin: 0 auto;
  padding: 0 18px;
}
.fp-article-header__title{
  margin: 10px 0 10px;
  font-size: clamp(2.0rem, 4vw, 3.0rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.fp-article-header__lede{
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.65;
  opacity: .9;
  max-width: 70ch;
}
.fp-article-header__meta{
  margin: 0 0 14px;
  font-size: .95rem;
  opacity: .8;
}

.fp-featured{ margin: 0 0 18px; }
.fp-featured__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.fp-featured__caption{
  margin: 8px 0 0;
  font-size: .92rem;
  opacity: .8;
}

/* Single content width + readability */
.single-post .entry-content{
  max-width: var(--fp-article-width);
  margin: 0 auto;
  padding: 0 18px;
  font-size: 1.06rem;
  line-height: 1.75;
}
.single-post .entry-content h2,
.single-post .entry-content h3{ letter-spacing: -0.01em; }

/* Breadcrumbs */
.fp-breadcrumbs{ margin: 0 0 10px; font-size:.92rem; opacity:.85; }
.fp-breadcrumbs__list{
  list-style:none;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
}
.fp-breadcrumbs__sep{ opacity:.55; }
.fp-breadcrumbs a{ color: var(--fp-blue); text-decoration:none; }
.fp-breadcrumbs a:hover{ text-decoration: underline; }

/* =========================================================
   9b) FP – Article UI (til din v2 HTML: fp-article + TOC + FAQ)
========================================================= */
.fp-article{
  color: var(--fp-text);
}

.fp-article__header,
.fp-article__content,
.fp-article__footer{
  max-width: var(--fp-article-width);
  margin: 0 auto;
  padding: 0 18px;
}

.fp-article__title{
  margin: 12px 0 10px;
  font-size: clamp(2.0rem, 4vw, 3.0rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.fp-article__lede{
  margin: 0 0 14px;
  font-size: 1.08rem;
  line-height: 1.65;
  opacity: .9;
  max-width: 72ch;
}

.fp-article__meta{
  margin: 0 0 16px;
  font-size: .95rem;
  opacity: .8;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.fp-article__meta-sep{ opacity:.6; }

.fp-divider{
  border: 0;
  border-top: var(--fp-border);
  margin: 1.6rem 0;
}

/* TOC */
.fp-toc{
  max-width: var(--fp-article-width);
  margin: 18px auto;
  padding: 16px 18px;
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
  background:#fff;
}
.fp-toc__title{ margin:0 0 10px; font-weight:900; font-size: 1.05rem; }
.fp-toc__list{ margin:0; padding-left: 1.2rem; }
.fp-toc__list li{ margin:.35rem 0; }
.fp-toc a{
  color: var(--fp-text);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.fp-toc a:hover{ border-bottom-color: var(--fp-border-color); }

/* FAQ */
.fp-faq{ margin-top: 1.4rem; }
.fp-faq__item{
  border: var(--fp-border);
  border-radius: 14px;
  background:#fff;
  margin: 10px 0;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.fp-faq__q{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 800;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fp-faq__q::-webkit-details-marker{ display:none; }
.fp-faq__q::after{
  content:"+";
  font-weight: 900;
  color: var(--fp-green);
}
details[open] > .fp-faq__q::after{ content:"–"; }
.fp-faq__a{
  padding: 0 14px 14px;
  opacity:.92;
}
.fp-faq__a p{ margin: 10px 0 0; }

/* Smooth anchors */
html{ scroll-behavior:smooth; }
.fp-article [id]{ scroll-margin-top: 90px; }

/* =========================================================
   10) Related posts
========================================================= */
.fp-related{
  max-width: var(--fp-article-width);
  margin: 18px auto 10px;
  padding: 0 18px;
}
.fp-related__title{ margin: 0 0 10px; font-size: 1.25rem; }
.fp-related__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px){
  .fp-related__grid{ grid-template-columns: repeat(2, 1fr); }
}
.fp-related__card{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  overflow:hidden;
  box-shadow: var(--fp-shadow);
  background:#fff;
  padding: 14px;
}
.fp-related__thumb{ display:block; border-radius: 12px; overflow:hidden; margin-bottom:10px; }
.fp-related__img{ width:100%; height:auto; display:block; }
.fp-related__h3{ margin:0; font-size:1.02rem; }
.fp-related__h3 a{ color: var(--fp-text); text-decoration:none; }
.fp-related__h3 a:hover{ text-decoration: underline; }

/* =========================================================
   11) Author box
========================================================= */
.fp-author{
  max-width: var(--fp-article-width);
  margin: 18px auto 0;
  padding: 0 18px;
}
.fp-author__inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background: rgba(15,23,42,.03);
  padding: 16px;
  box-shadow: var(--fp-shadow);
}
.fp-author__avatar{
  width:44px;
  height:44px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--fp-green), var(--fp-blue), var(--fp-yellow));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  flex: 0 0 auto;
}
.fp-author__name{ margin: 0 0 4px; font-weight:800; }
.fp-author__desc{ margin: 0 0 8px; opacity:.9; }
.fp-author__link a{
  font-weight:800;
  color: var(--fp-green);
  text-decoration:none;
}
.fp-author__link a:hover{ text-decoration: underline; }

/* =========================================================
   12) Hide GP default single header/excerpt (undgå dobbelt-output)
========================================================= */
.single-post .entry-header,
.single-post .entry-summary,
.single-post .read-more,
.single-post .entry-meta{
  display: none !important;
}

/* Backup: skjul featured image i selve indlægget (hvis GP stadig outputter) */
.single-post .inside-article .post-image{
  display:none !important;
}
/* FP hero → BC editorial look */
.single-post .fp-featured{
  max-width: 1120px;
  margin: 26px auto 22px;
}
.single-post .fp-featured__img{
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.single-post .fp-featured__caption{
  font-size: .92rem;
  opacity: .8;
  margin-top: 8px;
  max-width: 70ch;
}
/* ======================================================
   FP ARTICLE – ButikCorfixen pixel-style (Single posts)
   Drop-in CSS for familiepark.dk
====================================================== */

/* 0) Tokens (genbrug dine nuværende – men giv BC-lignende toning) */
:root{
  --fp-text:  #0f172a;
  --fp-muted: rgba(15,23,42,.62);
  --fp-border: rgba(15,23,42,.12);
  --fp-soft: rgba(15,23,42,.03);

  /* Accent = FP grøn, men brug den mere “rolig” som BC */
  --fp-accent: var(--fp-green);
  --fp-radius: 16px;
  --fp-radius-sm: 12px;

  --fp-shadow: 0 10px 30px rgba(0,0,0,.07);
  --fp-shadow-sm: 0 6px 18px rgba(0,0,0,.06);

  --fp-max: 860px;
  --fp-max-wide: 1120px;
  --fp-lh: 1.72;
}

/* 1) Single post readability */
.single-post .inside-article{
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Content width + typography */
.single-post .entry-content{
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 0 16px;
  font-size: 1.05rem;
  line-height: var(--fp-lh);
  color: var(--fp-text);
}
@media (min-width: 900px){
  .single-post .entry-content{ padding: 0; }
}

/* Gutenberg rhythm */
.single-post .entry-content > *{ margin-bottom: 1.25rem; }
.single-post .entry-content h2{ margin-top: 2.2rem; margin-bottom: .8rem; letter-spacing: -.01em; }
.single-post .entry-content h3{ margin-top: 1.4rem; margin-bottom: .5rem; letter-spacing: -.01em; }

/* Links (BC-feel: rolig underline + accent on hover) */
.single-post .entry-content a{
  color: var(--fp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.single-post .entry-content a:hover{
  text-decoration-thickness: 2px;
}

/* Prevent long URLs from breaking layout */
.single-post .entry-content a,
.single-post .entry-content p,
.single-post .entry-content li{
  overflow-wrap: anywhere;
}

/* 2) FP Article Header (match BC proportions) */
.fp-article-header{
  padding: 10px 0 6px;
}
.fp-article-header__inner{
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 900px){
  .fp-article-header__inner{ padding: 0; }
}

.fp-article-header__title{
  margin: 10px 0 10px;
  font-size: clamp(1.95rem, 3.0vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--fp-text);
}

.fp-article-header__lede{
  margin: 0 0 14px;
  max-width: 68ch;
  color: var(--fp-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.fp-article-header__meta{
  margin: 8px 0 16px;
  color: rgba(15,23,42,.55);
  font-size: .92rem;
}

/* 3) Breadcrumbs (BC style) */
.fp-breadcrumbs{
  margin: 6px 0 10px;
  font-size: .90rem;
  color: rgba(15,23,42,.55);
}
.fp-breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  list-style:none;
  padding:0;
  margin:0;
}
.fp-breadcrumbs a{
  color: rgba(15,23,42,.55);
  text-decoration:none;
  border-bottom: 1px solid transparent;
}
.fp-breadcrumbs a:hover{
  border-bottom-color: rgba(15,23,42,.18);
}

/* 4) Hero (fp_hero) – BC-like figure & caption */
.fp-hero,
.fp-featured{
  max-width: var(--fp-max-wide);
  margin: 18px auto 18px;
  padding: 0 16px;
}
@media (min-width: 900px){
  .fp-hero,
  .fp-featured{ padding: 0; }
}

.fp-hero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
  background: var(--fp-soft);
}

.fp-featured__caption{
  margin-top: 10px;
  color: rgba(15,23,42,.55);
  font-size: .92rem;
  line-height: 1.5;
  max-width: 80ch;
}

/* 5) Divider (BC hr) */
.fp-divider{
  border: 0;
  border-top: 1px solid var(--fp-border);
  margin: 1.8rem 0;
}

/* 6) Panels / callouts – BC callout vibe */
.fp-panel{
  max-width: var(--fp-max);
  margin: 16px auto 18px;
  padding: 16px 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  background: #fff;
  box-shadow: var(--fp-shadow-sm);
  position: relative;
}
.fp-panel::before{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 999px;
  background: var(--fp-accent);
  opacity: .55; /* mere rolig end før */
}

.fp-panel__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--fp-text);
}

.fp-panel ul{
  margin: 0;
  padding-left: 1.2rem;
}
.fp-panel li{ margin: .35rem 0; }

/* 7) Optional: BC-like “soft box” utility */
.fp-softbox{
  border: 1px solid var(--fp-border);
  background: var(--fp-soft);
  border-radius: var(--fp-radius);
  padding: 16px 16px;
  box-shadow: var(--fp-shadow-sm);
}

/* 8) FAQ (BC style) – hvis du bruger <details> */
.fp-faq{ margin-top: 1.6rem; }
.fp-faq details{
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  background:#fff;
  margin: 10px 0;
  overflow:hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.fp-faq summary{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 800;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.fp-faq summary::-webkit-details-marker{ display:none; }
.fp-faq summary::after{
  content:"+";
  font-weight: 900;
  color: var(--fp-accent);
  flex:0 0 auto;
}
.fp-faq details[open] > summary::after{ content:"–"; }
.fp-faq .fp-faq__a{
  padding: 0 14px 14px;
  color: var(--fp-text);
}
.fp-faq .fp-faq__a p{ margin: 10px 0 0; }

/* 9) Author box – BC-like card */
.fp-author{
  max-width: var(--fp-max);
  margin: 18px auto 0;
  padding: 0 16px;
}
@media (min-width: 900px){ .fp-author{ padding: 0; } }

.fp-author__inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  background: var(--fp-soft);
  padding: 16px;
  box-shadow: var(--fp-shadow-sm);
}

.fp-author__avatar{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fp-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#fff;
  flex: 0 0 auto;
}

.fp-author__name{ margin: 0 0 4px; font-weight: 900; }
.fp-author__desc{ margin: 0 0 8px; color: rgba(15,23,42,.72); }
.fp-author a{
  font-weight: 900;
  color: var(--fp-accent);
  text-decoration:none;
}
.fp-author a:hover{ text-decoration: underline; }

/* 10) Related – BC-like cards */
.fp-related{
  max-width: var(--fp-max);
  margin: 18px auto 10px;
  padding: 0 16px;
}
@media (min-width: 900px){ .fp-related{ padding: 0; } }

.fp-related__title{
  margin: 0 0 10px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.fp-related__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px){
  .fp-related__grid{ grid-template-columns: repeat(2, 1fr); }
}

.fp-related__card{
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  overflow:hidden;
  box-shadow: var(--fp-shadow-sm);
  background:#fff;
  padding: 14px;
}
.fp-related__thumb{
  display:block;
  border-radius: 12px;
  overflow:hidden;
  margin-bottom: 10px;
  aspect-ratio: 16 / 9;
  background: var(--fp-soft);
}
.fp-related__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.fp-related__h3{
  margin: 0;
  font-size: 1.02rem;
}
.fp-related__h3 a{
  color: var(--fp-text);
  text-decoration:none;
}
.fp-related__h3 a:hover{ text-decoration: underline; }

/* 11) Hide GP duplicate featured images inside content (safety) */
.single-post .inside-article .post-image,
.single-post .inside-article .featured-image,
.single-post .inside-article .wp-block-post-featured-image{
  display:none !important;
}

/* Mobile tune */
@media (max-width: 520px){
  .fp-panel{ padding: 14px 14px; }
  .fp-article-header__lede{ font-size: 1.02rem; }
}

/* Print: hide heavy UI if needed */
@media print{
  .fp-related,
  .fp-author{ display:none !important; }
  .fp-hero__img{ box-shadow: none; }
}
/* ======================================================
   FAMILIEPARK – FP Article UI (BC pixel-perfekt)
   Bruger: .fp-article-header, .fp-featured/.fp-hero, .fp-panel, breadcrumbs, author
   ====================================================== */

/* --- Tokens (match BC) --- */
:root{
  /* tekst/neutraler – tæt på BC */
  --fp-text: #1f2937;
  --fp-muted-text: #6b7280;
  --fp-border: #e5e7eb;
  --fp-bg: #ffffff;
  --fp-soft: #f8fafc;

  /* radius/shadow – BC feel */
  --fp-radius: 16px;
  --fp-radius-sm: 12px;
  --fp-shadow: 0 10px 30px rgba(0,0,0,.07);
  --fp-shadow-sm: 0 6px 18px rgba(0,0,0,.06);

  /* widths – BC feel */
  --fp-max: 860px;        /* content width */
  --fp-max-wide: 1120px;  /* hero/figure width */

  /* type rhythm */
  --fp-lh: 1.72;

  /* accent (brug gerne din grøn/blå hvis du vil) */
  --fp-accent: var(--fp-green, #0a8f2a);
}

/* --- Base for single posts (match BC) --- */
body.single-post{
  color: var(--fp-text);
  background: var(--fp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Indholdsområde (GP wrappers varierer — vi begrænser kun indholdet) */
.single-post .site-content .content-area{
  max-width: 1040px;
  margin: 0 auto;
}

/* Fjern “card” rundt om inside-article på single, så det ligner BC */
.single-post.separate-containers .inside-article{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* --- Header (H1 + lede + meta) --- */
.fp-article-header{
  padding: 0;
}
.fp-article-header__inner{
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 900px){
  .fp-article-header__inner{ padding: 0; }
}

.fp-article-header__title{
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 10px 0 10px;
  font-weight: 800;
  font-size: clamp(1.85rem, 2.8vw, 2.6rem);
}

.fp-article-header__lede{
  margin: 0 0 14px;
  color: var(--fp-muted-text);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 68ch;
}

.fp-article-header__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--fp-muted-text);
  font-size: .92rem;
  margin: 8px 0 16px;
}

/* --- Breadcrumbs (BC-style) --- */
.fp-breadcrumbs{
  margin: 6px 0 10px;
  font-size: .9rem;
  color: var(--fp-muted-text);
}
.fp-breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  list-style:none;
  padding:0;
  margin:0;
}
.fp-breadcrumbs__item a{
  color: var(--fp-muted-text);
  text-decoration:none;
  border-bottom: 1px solid transparent;
}
.fp-breadcrumbs__item a:hover{
  border-bottom-color: var(--fp-border);
}
.fp-breadcrumbs__sep{ opacity: .5; }

/* --- Content typography (BC rhythm) --- */
.single-post .entry-content{
  max-width: var(--fp-max);
  margin: 0 auto;
  padding: 0 16px;
  line-height: var(--fp-lh);
  font-size: 1.02rem;
}

@media (min-width: 900px){
  .single-post .entry-content{ padding: 0; }
}

.single-post .entry-content > *{
  margin-bottom: 1.25rem;
}

.single-post .entry-content p{
  margin: 0 0 1rem;
  max-width: 78ch;
}

/* Headings */
.single-post .entry-content h2{
  margin: 2.2rem 0 .8rem;
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.single-post .entry-content h3{
  margin: 1.4rem 0 .5rem;
  font-size: 1.18rem;
  line-height: 1.35;
}

/* Lists */
.single-post .entry-content ul,
.single-post .entry-content ol{
  margin: 0 0 1.1rem 1.1rem;
  padding: 0;
}
.single-post .entry-content li{
  margin: .35rem 0;
}

/* Links */
.single-post .entry-content a{
  color: var(--fp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.single-post .entry-content a:hover{
  text-decoration-thickness: 2px;
}

/* Prevent long URLs from breaking layout */
.single-post .entry-content a,
.single-post .entry-content p,
.single-post .entry-content li{
  overflow-wrap:anywhere;
}

/* Images inside content */
.single-post .entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: var(--fp-radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

/* Blockquote (BC-style) */
.single-post .entry-content blockquote{
  margin: 1.2rem 0;
  padding: 14px 16px;
  border-left: 6px solid color-mix(in srgb, var(--fp-accent), #ffffff 55%);
  background: var(--fp-soft);
  border-radius: var(--fp-radius-sm);
  color: var(--fp-text);
}

/* --- Hero / featured (fp_hero) --- */
.fp-featured,
.fp-hero{
  max-width: var(--fp-max-wide);
  margin: 18px auto 18px;
  padding: 0 16px;
}
@media (min-width: 900px){
  .fp-featured,
  .fp-hero{ padding: 0; }
}

.fp-hero__img,
.fp-featured__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
  background: var(--fp-soft);
}

.fp-featured__caption{
  margin-top: 10px;
  color: var(--fp-muted-text);
  font-size: .92rem;
  line-height: 1.5;
  max-width: 80ch;
}

/* --- Panels (din fp-panel bliver BC “callout/panel” feel) --- */
.fp-panel{
  max-width: var(--fp-max);
  margin: 18px auto;
  padding: 18px 18px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-sm);
  background: #fff;
  position: relative;
}
.fp-panel::before{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fp-accent), color-mix(in srgb, var(--fp-accent), #000 18%));
  opacity: .9;
}
.fp-panel__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.05rem;
}

/* --- Author box (match BC spacing/feel) --- */
.fp-author{
  max-width: var(--fp-max);
  margin: 18px auto 0;
  padding: 0 16px;
}
@media (min-width: 900px){
  .fp-author{ padding: 0; }
}
.fp-author__inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  background: var(--fp-soft);
  padding: 16px;
  box-shadow: var(--fp-shadow-sm);
}
.fp-author__avatar{
  width:44px;
  height:44px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--fp-accent), color-mix(in srgb, var(--fp-accent), #000 18%));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  flex: 0 0 auto;
}
.fp-author__name{ margin: 0 0 4px; font-weight:800; }
.fp-author__desc{ margin: 0 0 8px; opacity:.9; color: var(--fp-text); }
.fp-author a{
  font-weight:800;
  color: var(--fp-accent);
  text-decoration:none;
}
.fp-author a:hover{ text-decoration: underline; }

/* --- Mobile tune (BC-like) --- */
@media (max-width: 520px){
  .fp-panel{ padding: 14px 14px; }
  .fp-article-header__lede{ font-size: 1.02rem; }
}

/* --- Print (BC-like) --- */
@media print{
  .fp-panel{ box-shadow:none; }
  .fp-hero__img, .fp-featured__img{ box-shadow:none; }
}
/* =========================================================
   FP – Seneste guides (BC-style cards)
========================================================= */
.fp-latest{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 720px){
  .fp-latest--cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fp-latest--cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.fp-card--post{
  border: var(--fp-border);
  border-radius: var(--fp-radius);
  background:#fff;
  box-shadow: var(--fp-shadow);
  overflow:hidden;
}

.fp-card__thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: rgba(15,23,42,.03);
}

.fp-card__img{
  width:100% !important;
  height:100% !important;
  object-fit: cover;
  display:block;
}

.fp-card__img--placeholder{
  display:block;
  width:100%;
  height:100%;
}

.fp-card__body{
  padding: 14px 16px 16px;
}

.fp-card__top{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
  font-size: .92rem;
  opacity: .75;
  margin-bottom: 8px;
}

.fp-card__cat{ font-weight: 600; }
.fp-card__dot{ opacity: .6; }

.fp-card__title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.fp-card__title a{
  color: var(--fp-text);
  text-decoration: none;
}
.fp-card__title a:hover{
  text-decoration: underline;
}

.fp-card__excerpt{
  margin: 0;
  font-size: .95rem;
  opacity: .9;
  line-height: 1.6;
}