/*
Theme Name: Jenny Starter Vibe (clean — consolidated)
*/

/* =============== DESIGN TOKENS =============== */
:root{
  --bg:#f6f1ea;
  --bg-contrast:#f2ebe2;
  --card:#ffffff;
  --text:#2e2b29;
  --muted:#8b7e74;
  --line:#eadfce;
  --accent:#d89ba7;
  --accent-600:#c78593;

  /* Layout widths */
  --w-site:1200px;
  --w-hero:1120px;
  --w-head:920px;
  --w-body:760px;     /* leeskolom, author, comments */
  --w-comments:680px; /* slankere reacties */
}

/* =============== RESET / BASIS =============== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
img{ display:block; max-width:100%; height:auto; border-radius:12px }

body{
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.7 'Source Serif Pro', serif;
}
h1,h2,h3{ font-family:'Playfair Display', serif; margin:0 0 10px; line-height:1.25 }
a{ color:inherit; text-decoration:none; transition:color .15s ease }
a:hover{ color:var(--accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{ max-width:var(--w-site); margin:0 auto; padding:0 20px }

/* =============== HEADER =============== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.compact{ box-shadow:0 2px 8px rgba(0,0,0,.06) }

.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px;
  padding:18px 0;
}

.brand{ display:flex; align-items:center; gap:10px }
.custom-logo{ height:42px; width:auto }
.brand .site-title{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem }

.nav .menu{
  display:flex; gap:16px; list-style:none; margin:0; padding:0; justify-content:center; flex-wrap:wrap;
}
.nav .menu a{ padding:8px 10px; border-radius:8px; display:block }
.nav .menu a:hover{ background:var(--bg-contrast) }

.site-header nav ul{ list-style:none; margin:0; padding:0 }
.site-header nav li{ position:relative }
.site-header nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:8px 0; z-index:50;
}
.site-header nav li:hover > .sub-menu,
.site-header nav li:focus-within > .sub-menu{ display:block }
.site-header nav .sub-menu a{ white-space:nowrap; padding:8px 14px }
.site-header nav .sub-menu .sub-menu{ top:0; left:100% }

.header-tools{ display:flex; align-items:center; gap:14px }
.search{ position:relative }
.search-input{
  width:180px; max-width:36vw; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; font-size:.95rem;
}
.search-input:focus{ outline:2px solid var(--accent-600); outline-offset:2px }

.header-tools .socials{ display:flex; gap:10px }
.header-tools .socials .ico{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); border:1px solid var(--accent); border-radius:999px;
  transition:background .15s ease, transform .1s ease, border-color .15s ease;
}
.header-tools .socials .ico svg{ width:18px; height:18px; fill:#fff }
.header-tools .socials .ico:hover{ background:#fff; border-color:var(--accent); transform:translateY(-1px) }
.header-tools .socials .ico:hover svg{ fill:var(--accent) }

/* HOME: socials pas tonen na scroll */
.home .site-header:not(.compact) .header-tools .socials{ display:none !important; }

/* Mobile nav */
.nav-toggle{
  display:none; appearance:none; background:transparent; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:8px; align-items:center; justify-content:center;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:""; display:block; width:22px; height:2px; background:var(--text);
  border-radius:2px; position:relative; transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle .bars::before{ position:absolute; top:-6px; left:0 }
.nav-toggle .bars::after { position:absolute; top: 6px; left:0 }
body.menu-open .nav-toggle .bars{ background:transparent }
body.menu-open .nav-toggle .bars::before{ transform:translateY(6px) rotate(45deg) }
body.menu-open .nav-toggle .bars::after { transform:translateY(-6px) rotate(-45deg) }

@media (max-width:900px){
  .header-inner{ grid-template-columns: 1fr auto }
  .brand{ justify-self:start }
  .nav-toggle{ display:inline-flex; justify-self:end }
  .nav{ display:none }
  .header-tools{ display:none }
}

/* Drawer (mobile menu) */
.drawer, .drawer-backdrop{ position:fixed; inset:0; }
.drawer{
  right:0; left:auto; width:min(86vw, 380px);
  background:var(--bg); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .25s ease;
  z-index:1050; display:flex; flex-direction:column; overflow:hidden; min-height:100dvh;
}
body.menu-open{ overflow:hidden }
body.menu-open .drawer{ transform:translateX(0) }
.drawer-backdrop{
  background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1040;
}
body.menu-open .drawer-backdrop{ opacity:1; pointer-events:auto }

.drawer-header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:flex-end;
  padding:16px; border-bottom:1px solid var(--line); background:var(--bg);
}
.drawer-close, .drawer-close svg, .drawer-close svg *{
  color:var(--accent)!important; fill:var(--accent)!important; stroke:var(--accent)!important;
}
.drawer-scroll{ height:calc(100dvh - 64px); overflow:auto; padding:10px 12px 24px; }

.drawer-nav .drawer-menu{ list-style:none; margin:8px 0 0; padding:0 }
.drawer-nav .drawer-menu > li{ border-bottom:1px solid var(--line) }
.drawer-nav a{ display:block; padding:16px 12px; font-size:1.35rem; line-height:1.2; color:var(--text); border-radius:10px; }
.drawer-nav .menu-item-has-children{ position:relative }
.drawer-nav .menu-item-has-children > a{ padding-right:48px }
.drawer-nav .sub-menu{ display:none; padding:0 0 12px 14px; margin:0; border-left:1px solid var(--line); list-style:none }
.drawer-nav li.open > .sub-menu{ display:block }
.submenu-toggle{
  position:absolute; right:6px; top:0; width:44px; height:56px; border:0; background:transparent; cursor:pointer;
}
.submenu-toggle, .submenu-toggle svg, .submenu-toggle svg *{
  color:var(--accent)!important; fill:var(--accent)!important; stroke:var(--accent)!important; transition:transform .2s ease;
}
.drawer .menu li.open > .submenu-toggle svg{ transform:rotate(180deg); }

@media (min-width:900px){ .drawer, .drawer-backdrop{ display:none !important } }

/* =============== HOME HERO & GRID =============== */
.hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center; margin:40px 0 56px; }
.hero .hero-media img{ width:100%; height:auto; border-radius:12px }
.hero .intro h1{ font-size:clamp(32px, 4vw, 48px); margin:0 0 10px }
.hero .intro p { margin:0 0 16px; color:#4a4642 }
.hero .intro .intro-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.hero .intro .btn{
  background:var(--accent); color:#fff; border:2px solid var(--accent); border-radius:9999px;
  padding:10px 18px; font-weight:600; text-transform:uppercase; font-size:.9rem; transition:all .25s ease;
}
.hero .intro .btn:hover{ background:#fff; color:var(--accent); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.06) }
.hero .intro .social-icons{ display:flex; gap:10px }
.hero .intro .social-icons a{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:999px; background:var(--accent); border:2px solid var(--accent); color:#fff; transition:.2s;
}
.hero .intro .social-icons a:hover{ background:#fff; color:var(--accent); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:20px; padding:0 6px }
  .hero .intro h1{ font-size:clamp(28px, 5vw, 36px) }
}

/* Cards */
.eyebrow{ color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font:500 .9rem/1 'Montserrat', system-ui, sans-serif; margin:40px 0 6px; display:block; }
.section-title{ display:inline-block; font-size:1.6rem; line-height:1.2; color:var(--text); margin:0 0 22px }

.latest-posts-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-bottom:50px; }
@media (max-width:1100px){ .latest-posts-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:700px){ .latest-posts-grid{ grid-template-columns:1fr; gap:22px; padding:0 6px; margin-bottom:36px } }
.latest-posts-grid .card{ border:1px solid rgba(234,223,206,.2); background:transparent; display:flex; flex-direction:column; gap:12px; transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; }
.latest-posts-grid .card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06) }
.latest-posts-grid .thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin-bottom:12px; transition:filter .3s ease; }
.latest-posts-grid .card:hover .thumb{ filter:brightness(.85) }

/* Paginering */
.pager{ display:flex; justify-content:center; gap:6px; margin:40px 0 }
.pager .page-numbers{
  display:flex; justify-content:center; align-items:center; min-width:42px; height:42px; border-radius:10px;
  font-size:1rem; font-weight:500; color:var(--text); background:transparent; transition:all .2s ease;
}
.pager .page-numbers.current{ background:var(--bg-contrast); box-shadow:0 4px 12px rgba(0,0,0,.05); font-weight:600; color:var(--accent) }
.pager .page-numbers:hover{ background:var(--bg-contrast); color:var(--accent); transform:translateY(-1px) }
.pager .page-numbers.prev, .pager .page-numbers.next{ font-size:1.3rem }

/* Footer */
.site-footer{ border-top:1px solid var(--line); background:var(--bg); padding:22px 0 20px; color:var(--muted); }
.footer-container{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 32px; max-width:var(--w-site); margin:0 auto; font-size:.95rem; }
.footer-container .policy-link{ color:var(--muted); text-decoration:none; transition:color .15s ease }
.footer-container .policy-link:hover{ color:var(--accent) }
@media (max-width:700px){ .footer-container{ flex-direction:column; text-align:center } }

/* Onzinnige items in hoofdmenu verbergen */
.site-header .nav :is(.wp-block-search, form[role="search"], .search-form, input[type="search"], .search-field, .wp-block-social-links, .wp-social-link){ display:none !important }
.site-header .nav .menu a[href*="instagram"],
.site-header .nav .menu a[href*="tiktok"],
.site-header .nav .menu a[href^="mailto:"]{ display:none !important }

/* Scroll-to-top plugin */
#wpfront-scroll-top-container{
  width:44px!important; height:44px!important;
  background:var(--accent)!important; border:1px solid var(--accent)!important;
  border-radius:50%!important; display:flex!important; align-items:center!important; justify-content:center!important;
  padding:0!important; transition:background .2s ease, border-color .2s ease, transform .1s ease;
}
#wpfront-scroll-top-container img{ display:none!important; }
#wpfront-scroll-top-container::before{
  content:""; display:block; width:10px; height:10px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(135deg);
}
#wpfront-scroll-top-container:hover{ background:#fff!important; border-color:var(--accent)!important; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
#wpfront-scroll-top-container:hover::before{ border-color:var(--accent) }

/* =============== SINGLE POST =============== */
.single .container{ max-width:var(--w-site) }

/* Hero */
.single .post-hero{ max-width:var(--w-hero); margin:26px auto 14px }
.single .post-hero img{ width:100%; aspect-ratio:16/9; max-height:440px; object-fit:cover; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.06) }
@media (max-width:900px){ .single .post-hero img{ max-height:280px } }

/* Titel + meta */
.single .post-header{ max-width:var(--w-head); margin:8px auto 10px; padding:0 6px }
.single .post-title{ font-size:clamp(30px, 4.2vw, 46px); line-height:1.15; margin:6px 0 8px; letter-spacing:-.2px }
@media (max-width:600px){ .single .post-title{ font-size: clamp(26px, 8vw, 34px) } }

.single .post-meta{
  display:flex; align-items:center; gap:10px;
  color:var(--muted); font-size:.96rem; margin-top:6px;
}
.single .post-meta .sep{ opacity:.5 }
.single .post-meta .post-category a{
  text-transform:none; letter-spacing:0;
  font:500 .85rem/1 'Montserrat', system-ui, sans-serif;
  background:var(--bg-contrast); color:var(--muted);
  padding:4px 10px; border-radius:999px; display:inline-block;
}
.single .post-meta .post-category a:hover{ background:var(--accent); color:#fff }

/* Content */
.single .post-content{ max-width:var(--w-body); margin:0 auto; padding:0 6px; font-size:1.08rem; line-height:1.85 }
.single .post-content p{ margin:1em 0 }
.single .post-content :where(img,video){ border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06) }
.single .post-content blockquote{ margin:1.2em 0; padding:14px 16px; background:var(--bg-contrast); border-left:4px solid var(--accent); border-radius:12px; color:#3a3734 }

/* Tags + author */
.single .post-footer{ max-width:var(--w-body); margin:22px auto 0; padding:0 6px }
.single .post-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.single .post-tags a{ background:var(--bg-contrast); border:1px solid var(--line); padding:6px 12px; border-radius:999px }
.single .post-tags a:hover{ background:#fff; border-color:var(--accent); color:var(--accent) }

.single .author-box{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; background:var(--bg-contrast);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.04);
  margin-top:14px;
}
.single .author-avatar{ width:60px; height:60px; border-radius:999px; overflow:hidden; flex:0 0 60px }
.single .author-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:999px }
.single .author-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; line-height:1.2; margin-bottom:4px }
.single .author-box p{ margin:.2em 0 0; color:#3c3835; font-size:.98rem; line-height:1.6 }

@media (max-width:640px){
  .single .author-box{ padding:12px 14px }
  .single .author-avatar{ width:52px; height:52px }
}

/* Related */
.single .related{ max-width:var(--w-hero); margin:26px auto 6px; padding:0 6px }
.single .related h3{ font-size:1.35rem; margin:0 0 14px }
.single .related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
@media (max-width:900px){ .single .related-grid{ grid-template-columns:1fr 1fr; gap:14px } }
@media (max-width:600px){ .single .related-grid{ grid-template-columns:1fr } }

.single .related .card{
  display:block; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:12px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.single .related .card .thumb{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px; margin:0 0 10px }
.single .related .card h4{ font-size:1.02rem; line-height:1.35; margin:0; color:var(--text) }
.single .related .card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.08) }

/* =============== REDUCED MOTION =============== */
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }

/* =============== STICKY SPOTLIGHT (home) =============== */
#travel-spotlight{ position:relative }
#travel-spotlight .stretched-link{ position:absolute; inset:0; z-index:5; display:block; cursor:pointer }
#travel-spotlight:hover{ background:var(--bg-contrast); border-radius:14px; transition:background .2s ease }
#travel-spotlight:hover .spot-title,
#travel-spotlight:hover .spot-intro{ color:var(--accent); transition:color .2s ease }
/* Sticky spotlight in twee kolommen */
#travel-spotlight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center;
  max-width:var(--w-hero);
  margin:32px auto;
  padding:18px;
  background:var(--bg-contrast); /* i.p.v. wit */
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

#travel-spotlight img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:12px;
}

#travel-spotlight .spot-content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#travel-spotlight .spot-title{
  font-size:1.3rem;
  font-family:'Playfair Display',serif;
  margin:0;
}

#travel-spotlight .spot-intro{
  font-size:1rem;
  color:var(--muted);
  line-height:1.5;
}

/* Mobile: enkel kolom */
@media (max-width:768px){
  #travel-spotlight{
    grid-template-columns:1fr;
  }
}
/* ==== RECEPT: card + lijsten ==== */
/* Receptkaart */
.single .post-content .recipe-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  margin:18px 0 24px;
}

/* Ingrediëntenlijst – 2 kolommen */
.single .post-content .ingredients-list {
  list-style:none;
  margin:12px 0 24px;
  padding:0 0 20px 0;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 25%, #fff 75%);
  columns:2;
  column-gap:28px;
}
@media (max-width:800px) {
  .single .post-content .ingredients-list { columns:1; }
}

/* Tools-lijst – 1 kolom in een box */
.single .post-content .tools-list {
  list-style:none;
  margin:20px 0;
  padding:16px 18px;
  background:#fffaf7;
  border:1px solid color-mix(in srgb, var(--accent) 25%, #fff 75%);
  border-radius:12px;
}

/* Gedeelde stijl voor beide lijsten */
.single .post-content .ingredients-list li,
.single .post-content .tools-list li {
  break-inside: avoid;
  position:relative;
  padding-left:22px;
  margin:8px 0;
  font-size:17px;
  line-height:1.6;
}
.single .post-content .ingredients-list li::before,
.single .post-content .tools-list li::before {
  content:"";
  position:absolute;
  left:0; top:0.65em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent);
}

/* Stappenlijst – badges */
.single .post-content .steps-list {
  counter-reset: step;
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
.single .post-content .steps-list li {
  counter-increment: step;
  position:relative;
  padding-left:42px;
  margin:12px 0;
  line-height:1.7;
}
.single .post-content .steps-list li::before {
  content: counter(step);
  position:absolute;
  left:0; top:.15em;
  width:28px; height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 .95rem/1 'Montserrat', system-ui, sans-serif;
  color:#fff;
  background:var(--accent);
}
/* ===== RECEPT — INGREDIËNTEN NET & STRAK ===== */

/* 1) Geen scheidingslijn onder de lijst */
.single .post-content .ingredients-list{
  border: none !important;
  padding-bottom: 0 !important;
}

/* 2) Twee kolommen met grid i.p.v. CSS columns (rustiger & voorspelbaar) */
.single .post-content .ingredients-list{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;               /* rij- en kolomafstand */
  list-style: none !important;
  margin: 12px 0 20px !important;
  padding-left: 0 !important;   /* geen extra inspringing van thema */
}

/* Mobiel één kolom */
@media (max-width: 900px){
  .single .post-content .ingredients-list{
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
}

/* 3) Bullets strak uitgelijnd en geen dubbele bullets */
.single .post-content .ingredients-list li{
  list-style: none !important;
  position: relative;
  padding-left: 20px;           /* ruimte voor het bolletje */
  margin: 0;                    /* geen extra verticale “lucht” per item */
  line-height: 1.55;
  break-inside: avoid;          /* geen rare afbrekingen */
}
.single .post-content .ingredients-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;                  /* exact midden op de eerste tekstregel */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ===== TOOLS — zelfde bulletstijl, 1 kolom ===== */
.single .post-content .tools-list{
  list-style: none !important;
  margin: 20px 0;
  padding: 16px 18px;
  background: #fffaf7;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff 75%);
  border-radius: 12px;
}

.single .post-content .tools-list li{
  list-style: none !important;
  position: relative;
  padding-left: 20px;
  margin: 6px 0;
  line-height: 1.55;
}
.single .post-content .tools-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
/* INGREDIËNTEN – 2 kolommen maar met vaste minimale kolombreedte */
.single .post-content .ingredients-list{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)); /* was 1fr 1fr */
  gap: 10px 32px;                                      /* iets meer kolomruimte */
  list-style:none !important;
  margin: 12px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;                                /* scheidingslijn weg */
}

@media (max-width: 1024px){
  .single .post-content .ingredients-list{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 8px 24px;
  }
}
@media (max-width: 800px){
  .single .post-content .ingredients-list{
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}

/* Items compacter en bullet mooi uitgelijnd */
.single .post-content .ingredients-list li{
  list-style:none !important;
  position:relative;
  padding-left: 22px;
  margin: 2px 0;                 /* compacter */
  font-size: 16px;               /* was 17px */
  line-height: 1.5;              /* was 1.6 */
  word-break: normal;
  overflow-wrap: anywhere;       /* liever afbreken dan rare pushes */
}

.single .post-content .ingredients-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.55em;                   /* precies midden op de eerste regel */
  width:7px; height:7px;
  border-radius:50%;
  background: var(--accent);
  opacity:.95;
}
/* Links in ingrediënten- en tools-lijst */
.single .post-content .ingredients-list a,
.single .post-content .tools-list a {
  color: var(--accent); /* roze accentkleur */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.single .post-content .ingredients-list a:hover,
.single .post-content .tools-list a:hover {
  color: #000; /* donkerder bij hover */
  text-decoration-color: var(--accent);
}
/* Tags onder recept – badges */
.single .post-content .tags a,
.single .post-content .post-tags a,
.single .post-content .entry-tags a {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #444;
  background: #f9f4f3;
  border: 1px solid #f1e5e2;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.single .post-content .tags a:hover,
.single .post-content .post-tags a:hover,
.single .post-content .entry-tags a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

}
/* standaard styling voor categorie-labels */
.post-meta a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #e6a9a9; /* roze */
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* hover-effect: beige achtergrond, roze tekst */
.post-meta a:hover {
  background-color: #f5f0e6; /* beige */
  color: #e6a9a9;
}
/* Alle categorie-labels zelfde stijl */
.post-meta a,
.meta a,
.cat-links a,
.entry-meta a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #e6a9a9; /* roze */
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover-effect: beige achtergrond, roze tekst */
.post-meta a:hover,
.meta a:hover,
.cat-links a:hover,
.entry-meta a:hover {
  background-color: #f5f0e6; /* beige */
  color: #e6a9a9;
}
/* categorie-labels altijd roze */
.post-meta a,
.meta a,
.cat-links a,
.entry-meta a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #e6a9a9 !important; /* roze */
  color: #fff !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* hover: beige achtergrond met roze tekst */
.post-meta a:hover,
.meta a:hover,
.cat-links a:hover,
.entry-meta a:hover {
  background-color: #f5f0e6 !important; /* beige */
  color: #e6a9a9 !important;
}

/* Algemene pagina layout */
.page-wrap {
  padding: 24px 16px;
}

/* Hero-afbeelding */
.page-hero {
  max-width: 980px;
  margin: 8px auto 10px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.page-hero img {
  width: 100%;
  height: auto; /* geen uitrekken */
  display: block;
}

/* Titel onder de foto */
.page-header {
  max-width: 720px;
  margin: 18px auto 8px;
}
.page-title {
  margin: 0;
}

/* Tekstkolom */
.page-content {
  max-width: 720px;
  margin: 12px auto 72px;
  line-height: 1.75;
}
.page-content > *:first-child {
  margin-top: 0;
}

/* Mobiel */
@media (max-width: 800px) {
  .page-hero { margin: 4px auto 8px; border-radius: 12px; }
  .page-content { margin-bottom: 56px; }
}
/* Hero image – maak er een kaart van */
.page .entry-content img {
  max-width: 900px;       /* niet meer de volle breedte */
  height: auto;           /* voorkomt uitrekken */
  display: block;
  margin: 0 auto 40px;    /* centreren + extra ruimte eronder */
  border-radius: 12px;    /* zachte hoeken */
  box-shadow: 0 6px 20px rgba(0,0,0,.06); /* subtiele schaduw */
}

/* Titel onder de foto */
.page .entry-title {
  font-size: 2rem;        /* iets groter */
  font-weight: 700;
  margin-top: 32px;       /* extra lucht boven */
  margin-bottom: 20px;    /* extra lucht onder */
  text-align: left;       /* hou het netjes links */
  border-bottom: 1px solid #eee; /* subtiel lijntje */
  padding-bottom: 8px;
}

/* Tekst beter leesbaar maken */
.page .entry-content {
  max-width: 720px;       /* smalle kolom voor betere leesbaarheid */
  margin: 0 auto;         /* centreren */
  font-size: 1.05rem;     
  line-height: 1.8;       /* luchtiger regelafstand */
}

.page .entry-content p {
  margin-bottom: 20px;    /* extra ruimte tussen alinea’s */
}

/* Eventuele knoppen onderaan mooi stylen */
.page .entry-content .cta-buttons {
  margin-top: 32px;
  text-align: center;
}

.page .entry-content .cta-buttons a {
  display: inline-block;
  background: var(--accent, #e99da7); /* gebruik je accentkleur */
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
  margin: 0 8px;
}

.page .entry-content .cta-buttons a:hover {
  background: #d87c87;
}
/* Links op pagina's (Contact, Over, Samenwerken, etc.) */
body.page .page-content .prose a,
body.page .page-content a,
body.page .entry-content a {               /* extra vangnet */
  color: #e9a5a8 !important;               /* je roze */
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #e9a5a8;
  transition: color .2s ease, border-color .2s ease;
}

body.page .page-content .prose a:hover,
body.page .page-content a:hover,
body.page .entry-content a:hover {
  color: #c9787c !important;               /* iets donkerder bij hover */
  border-color: #c9787c;
}

/* voorkom dat knoppen/menulinks dit meekrijgen */
body.page a.btn,
body.page a[class*="button"],
body.page .menu a { 
  border-bottom: 0 !important;
}
/* ===============================
   SITEBREED – Links
   =============================== */
.entry-content a {
  color: #e8b7b7;            /* roze */
  text-decoration: underline;
  transition: color .2s ease;
}

.entry-content a:hover {
  color: #c97f7f;            /* iets donkerder roze bij hover */
  text-decoration: none;
}

/* ===============================
   CONTACTPAGINA (page-id-18)
   =============================== */
.page-id-18 .entry-content {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

.page-id-18 .entry-content h2 {
  margin-top: 28px;
  font-size: 1.5rem;
}

.page-id-18 .entry-content p {
  margin-bottom: 1.2em;
}

/* ========================= */
/* REACTIES – clean & final  */
/* ========================= */

/* sectie ruimte en centreren */
.single .related { margin-bottom: 44px !important; }
.single .comments-area,
.single #comments,
.single .comment-respond {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding-inline: 12px !important;
}

/* titel */
.single .comments-title {
  font: 700 1.2rem/1.3 'Playfair Display', serif !important;
  margin: 0 0 20px !important;
  text-align: left;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text);
}

/* nummering volledig uit */
.single .comment-list,
.single .comment-list > li,
.single .comment-list .children,
.single .comment-list .children > li {
  list-style: none !important;
  counter-reset: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single .comment-list > li::marker,
.single .comment-list > li::before,
.single .comment-list .children > li::marker {
  content: "" !important;
}

/* kaartje per reactie */
.single .comment-body {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;  /* avatar | inhoud */
  gap: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.03) !important;
}

/* avatar */
.single .comment-author img.avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: block !important;
  background: #f3ede6 !important;
}

/* naam + datum */
.single .comment-meta {
  grid-column: 2 !important;
  display: block !important;
  margin: 0 0 6px !important;
}
.single .comment-author {
  display: block !important;
  margin: 0 0 2px !important;
  font-weight: 700 !important;
}
.single .comment-author .says { display: none !important; }

.single .comment-metadata {
  display: block !important;
  font-size: .88rem !important;
  color: var(--muted) !important;
  margin: 0 !important;
}
.single .comment-metadata a {
  color: inherit !important;
  text-decoration: none !important;
}

/* tekst */
.single .comment-content {
  grid-column: 2 !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
}
.single .comment-content p {
  margin: .6em 0 !important;
}

/* reply link */
.single .reply {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 8px !important;
}
.single .reply a,
.single .comment-reply-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  transition: .15s ease !important;
}
.single .reply a:hover,
.single .comment-reply-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* geneste reacties */
.single .children {
  list-style: none !important;
  margin: 10px 0 0 0 !important;
  padding-left: 18px !important;
  border-left: 2px solid var(--line) !important;
}
.single .children .comment-body {
  grid-template-columns: 36px 1fr !important;
  padding: 12px 14px !important;
}
.single .children .comment-author img.avatar {
  width: 36px !important;
  height: 36px !important;
}

/* mobiel */
@media (max-width: 640px) {
  .single .comment-body {
    grid-template-columns: 36px 1fr !important;
    padding: 12px 14px !important;
  }
}
/* ===== Archive & Category pagina's ===== */

/* Header */
.archive-header {
  text-align: center;
  margin: 30px auto 40px;
  max-width: 720px;
}
.archive-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.archive-description {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Grid layout */
.posts-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* flexibel, geen lege gaten */
  align-items: stretch; /* kaarten even hoog binnen hun rij */
}

/* Cards */
.archive-card {
  background: #fff;
  border: 1px solid var(--line, #eee);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.archive-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.archive-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.archive-card-content {
  flex-grow: 1; /* duwt content zodat alle kaarten gelijk optrekken */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 18px;
}

.archive-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.archive-card-title a {
  color: var(--text);
  text-decoration: none;
}
.archive-card-title a:hover {
  color: var(--accent);
}

.archive-card-excerpt {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Paginatie */
.archive-pagination {
  margin-top: 40px;
  text-align: center;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* tablet */
  }
}
@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr; /* mobiel: 1 per rij */
  }
/* Mobiel menu – socials netjes en roze */
@media (max-width: 768px) {
  .mobile-menu .social-icons img,
  .mobile-menu .social-icons svg {
    width: 28px;
    height: 28px;
    fill: var(--accent);   /* maakt SVG-iconen roze */
  }

  .mobile-menu .social-icons a {
    color: var(--accent);  /* voor icon-fonts of inline SVG’s */
  }

  .mobile-menu .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
  }
}
/* Social icons in mobiel menu kleiner maken */
.drawer-socials {
  display: flex;
  justify-content: center; /* centreren */
  gap: 18px; /* ruimte tussen icons */
  margin: 20px 0;
}

.drawer-socials .ico svg {
  width: 28px;  /* pas formaat aan naar wens */
  height: 28px;
  fill: var(--text); /* zelfde kleur als tekst */
  transition: fill 0.2s ease;
}

.drawer-socials .ico:hover svg {
  fill: var(--accent); /* mooie hoverkleur */
}