/*
Theme Name: Orde van Sint Jacob in Holland
Theme URI: https://ordevansintjacobinholland.wordpress.com/
Author: Jeroen Ooms
Description: WordPress-thema voor de Stichting Orde van Sint Jacob in Holland. Perkament, bordeaux en goud, met de Jacobsschelp als centraal motief.
Version: 1.6.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orde-sint-jacob
Tags: two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, blog
*/

/* ============================================================
   WordPress-specifieke hulpklassen
   ============================================================ */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); word-wrap:normal!important; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:.6em 1em; z-index:1000; border:2px solid var(--gold); border-radius:var(--radius); }

.alignleft{ float:left; margin:0 1.6em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.6em; }
.aligncenter{ margin:1.4em auto; display:block; }
.alignwide{ margin-left:-40px; margin-right:-40px; max-width:calc(100% + 80px); }
.wp-caption{ max-width:100%; }
.wp-caption-text,.wp-block-image figcaption{ font-family:var(--serif-ui); font-size:.85rem; color:var(--ink-soft); text-align:center; font-style:italic; margin-top:.5em; }
.sticky .card,.post.sticky{ border-left:3px solid var(--gold); }

/* Paginanavigatie (WP) */
.pagination{ display:flex; gap:6px; justify-content:center; margin-top:44px; flex-wrap:wrap; }
.pagination .page-numbers{ font-family:var(--serif-ui); font-weight:600; padding:.5em .9em; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--burgundy); }
.pagination .page-numbers.current{ background:var(--burgundy); color:#fff; border-color:var(--burgundy); }
.pagination a.page-numbers:hover{ background:var(--parchment-2); text-decoration:none; }

/* Reacties */
.comment-list{ list-style:none; padding:0; }
.comment-body{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin:0 0 16px; box-shadow:var(--shadow); }
.comment-author{ font-family:var(--serif-ui); font-weight:600; }
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{ width:100%; padding:.6em .8em; border:1px solid var(--line-strong); border-radius:var(--radius); font-family:var(--serif-body); margin-bottom:.6em; background:var(--white); }

/* Zoekformulier */
.searchform{ display:flex; gap:8px; }
.searchform input[type=search]{ flex:1; padding:.55em .8em; border:1px solid var(--line-strong); border-radius:var(--radius); font-family:var(--serif-body); background:var(--white); }

/* Widget-lijsten binnen de perkament-zijbalk */
.sidebar .widget select{ width:100%; padding:.5em; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--white); }
.sidebar .widget ul ul{ padding-left:14px; }

/* Post-meta */
.entry-meta{ font-family:var(--serif-ui); color:var(--gold); letter-spacing:.05em; font-size:.9rem; margin-bottom:.4em; }
.entry-footer{ font-family:var(--serif-ui); font-size:.88rem; color:var(--ink-soft); margin-top:1.6em; padding-top:1em; border-top:1px solid var(--line); }
.entry-footer a{ color:var(--burgundy); }

/* =============================================================
   Orde van Sint Jacob in Holland — Ontwerpsysteem
   Sfeer: sober-plechtig, licht middeleeuws, perkament + bordeaux + goud
   ============================================================= */

/* Lettertypen worden via functions.php (wp_enqueue_style) geladen. */

:root{
  /* Kleuren */
  --parchment:      #FBF7EF;
  --parchment-2:    #F4EBDA;
  --parchment-3:    #EFE4CE;
  --ink:            #2B2823;
  --ink-soft:       #5E574C;
  --burgundy:       #7A1E2B;
  --burgundy-dark:  #5C1620;
  --burgundy-deep:  #431018;
  --gold:           #A8842C;
  --gold-light:     #C7A24C;
  --gold-pale:      #E4D3A3;
  --line:           #E1D6C0;
  --line-strong:    #CDBE9E;
  --blue:           #223252;   /* diep heraldisch blauw */
  --white:          #FFFDF8;

  /* Typografie */
  --serif-display: 'Cormorant Garamond', Georgia, serif;
  --serif-body:    'Lora', Georgia, serif;
  --serif-ui:      'EB Garamond', Georgia, serif;

  --maxw: 1200px;
  --radius: 3px;
  --shadow: 0 2px 10px rgba(67,16,24,.06), 0 10px 30px rgba(67,16,24,.06);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--serif-body);
  color:var(--ink);
  background:var(--parchment);
  line-height:1.7;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Subtiele perkamenttextuur */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(200,162,76,.06), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(122,30,43,.05), transparent 55%);
}

img{ max-width:100%; display:block; }

a{ color:var(--burgundy); text-decoration:none; }
a:hover{ color:var(--burgundy-dark); text-decoration:underline; text-underline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--serif-display); font-weight:600; color:var(--ink); line-height:1.15; margin:0 0 .5em; }
h1{ font-size:clamp(2.4rem,5vw,4rem); letter-spacing:.5px; }
h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
h3{ font-size:1.5rem; }
p{ margin:0 0 1.1em; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.narrow{ max-width:820px; }

.eyebrow{
  font-family:var(--serif-ui);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--gold);
  font-weight:600;
  margin:0 0 .9em;
}

/* Sierlijne met schelp */
.rule{ display:flex; align-items:center; gap:14px; margin:1.4em 0; color:var(--gold); }
.rule::before,.rule::after{ content:""; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); flex:1; }
.rule svg{ width:22px; height:22px; fill:var(--gold); flex:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--serif-ui); font-weight:600;
  letter-spacing:.06em; font-size:1rem;
  padding:.7em 1.5em; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:.2s;
}
.btn-primary{ background:var(--burgundy); color:#fff; }
.btn-primary:hover{ background:var(--burgundy-dark); color:#fff; text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--burgundy); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--burgundy-dark); text-decoration:none; background:var(--parchment-2); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  background:var(--burgundy-deep); color:var(--gold-pale);
  font-family:var(--serif-ui); font-size:.85rem; letter-spacing:.04em;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; min-height:40px; }
.topbar a{ color:var(--gold-pale); }
.topbar a:hover{ color:#fff; text-decoration:none; }
.lang a{ padding:0 .35em; }
.lang a.active{ color:#fff; font-weight:600; }
.lang span{ opacity:.4; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header{
  background:var(--parchment);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.header-inner{ display:flex; align-items:center; gap:20px; padding:14px 28px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:16px; }
.brand:hover{ text-decoration:none; }
.crest{ width:52px; height:52px; flex:none; }
.brand-text { display:inline-flex; align-items: flex-end; gap:12px; }
.brand-text .name{ font-family:var(--serif-display); font-size:1.45rem; font-weight:600; color:var(--ink); line-height:1.05; }
.brand-text .sub{ font-family:var(--serif-ui); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }

/* Navigatie */
.mainnav{ margin-left:auto; }
.mainnav ul{ list-style:none; display:flex; gap:4px; margin:0; padding:0; }
.mainnav > ul > li{ position:relative; }
.mainnav > ul > li > a{
  display:block; padding:.6em .9em;
  font-family:var(--serif-ui); font-weight:600; font-size:1rem;
  color:var(--ink); letter-spacing:.02em; border-radius:var(--radius);
}
.mainnav > ul > li > a:hover{ color:var(--burgundy); background:var(--parchment-2); text-decoration:none; }
.mainnav .has-sub > a::after{ content:"▾"; font-size:.7em; margin-left:.4em; color:var(--gold); }

.submenu{
  position:absolute; top:100%; left:0; min-width:250px;
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--gold); border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; gap:2px;
}
.mainnav li:hover > .submenu{ display:flex; }
.submenu a{
  display:block; padding:.5em .7em; font-family:var(--serif-body);
  font-size:.98rem; color:var(--ink); border-radius:var(--radius);
}
.submenu a:hover{ background:var(--parchment-2); color:var(--burgundy); text-decoration:none; }

.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line-strong); border-radius:var(--radius); padding:.5em .7em; cursor:pointer; color:var(--burgundy); font-size:1.2rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; color:var(--gold-pale); text-align:center;
  background:
    linear-gradient(rgba(67,16,24,.82),rgba(67,16,24,.9)),
    radial-gradient(circle at 50% 20%, #6d1f2b, #431018 70%);
  padding:96px 20px 88px;
  border-bottom:4px solid var(--gold);
  overflow:hidden;
}
.hero .crest-lg{ width:120px; height:120px; margin:0 auto 22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hero .wapen-lg{ width:150px; height:150px; margin:0 auto 22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hero h1{ color:#fff; margin:0 0 .2em; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.hero .founded{ font-family:var(--serif-ui); letter-spacing:.35em; text-transform:uppercase; font-size:.85rem; color:var(--gold-light); margin-bottom:1.2em; }
.hero .lead{ font-family:var(--serif-display); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.7rem); max-width:720px; margin:0 auto 1.8em; color:#f4e8cf; line-height:1.5; }
.hero .cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .btn-ghost{ color:#f4e8cf; border-color:rgba(228,211,163,.5); }
.hero .btn-ghost:hover{ border-color:var(--gold); background:rgba(0,0,0,.15); color:#fff; }
.hero-motif{ position:absolute; opacity:.06; width:520px; height:520px; }
.hero-motif.left{ left:-160px; bottom:-160px; }
.hero-motif.right{ right:-160px; top:-160px; }

/* ============================================================
   SECTIES
   ============================================================ */
section.block{ padding:72px 0; }
section.alt{ background:var(--parchment-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.section-head p{ color:var(--ink-soft); }

/* Intro tekst */
.intro-lead{ font-size:1.15rem; }
.dropcap::first-letter{
  font-family:var(--serif-display); float:left; font-size:4.4rem; line-height:.8;
  padding:.06em .12em 0 0; color:var(--burgundy); font-weight:600;
}

/* Pijlers Ridders / Dames / Kanselarij */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pillar{ text-align:center; padding:34px 24px; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow); }
.pillar svg{ width:46px; height:46px; fill:var(--burgundy); margin:0 auto 14px; }
.pillar h3{ color:var(--burgundy); margin-bottom:.3em; }
.pillar p{ color:var(--ink-soft); font-size:.98rem; margin:0; }

/* Kaarten-raster (veel content) */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.2s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 6px 22px rgba(67,16,24,.14); }
.card .thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--parchment-3),var(--parchment-2)); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.card .thumb svg{ width:64px; height:64px; fill:var(--gold); opacity:.7; }
.card .body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.card h3{ margin-bottom:.35em; }
.card h3 a{ color:var(--ink); }
.card h3 a:hover{ color:var(--burgundy); text-decoration:none; }
.card p{ color:var(--ink-soft); font-size:.96rem; flex:1; }
.card .more{ font-family:var(--serif-ui); font-weight:600; letter-spacing:.04em; color:var(--burgundy); font-size:.92rem; }

/* Motto banner */
.motto{
  background:
    linear-gradient(rgba(34,50,82,.9),rgba(34,50,82,.92)),
    radial-gradient(circle at 50% 0%, #2c3f66, #1a273f);
  color:#eae2cf; text-align:center; padding:72px 20px;
  border-top:4px solid var(--gold); border-bottom:4px solid var(--gold);
}
.motto blockquote{ font-family:var(--serif-display); font-style:italic; font-size:clamp(1.5rem,3vw,2.3rem); max-width:820px; margin:0 auto; color:#fff; line-height:1.4; }
.motto cite{ display:block; margin-top:1em; font-family:var(--serif-ui); font-style:normal; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; color:var(--gold-light); }

/* Nieuws teaser lijst */
.news-list{ display:flex; flex-direction:column; gap:0; }
.news-item{ display:flex; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.news-item:first-child{ border-top:1px solid var(--line); }
.news-date{ font-family:var(--serif-ui); color:var(--gold); font-weight:600; letter-spacing:.05em; white-space:nowrap; min-width:130px; }
.news-item h3{ margin:0 0 .2em; font-size:1.3rem; }
.news-item p{ margin:0; color:var(--ink-soft); font-size:.98rem; }

/* ============================================================
   PAGINA-LAYOUT (long-form met zijnav)
   ============================================================ */
.page-banner{
  background:
    linear-gradient(rgba(67,16,24,.86),rgba(67,16,24,.9)),
    radial-gradient(circle at 30% 20%, #6d1f2b, #431018 75%);
  color:#fff; padding:56px 0; border-bottom:4px solid var(--gold);
}
.page-banner h1{ color:#fff; margin:0; }
.breadcrumb{ font-family:var(--serif-ui); font-size:.85rem; letter-spacing:.04em; color:var(--gold-light); margin-bottom:.4em; }
.breadcrumb a{ color:var(--gold-pale); }

.layout{ display:grid; grid-template-columns:1fr 350px; gap:52px; padding:56px 0; align-items:start; }

.sidebar{ position:sticky; top:96px; }
.sidebar .widget{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:26px; box-shadow:var(--shadow); }
.sidebar .widget h4{ font-family:var(--serif-ui); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:.6em; margin:0 0 .8em; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li a{ display:block; padding:.4em 0; color:var(--ink); font-size:.98rem; border-bottom:1px dotted var(--line); }
.sidebar li a:hover{ color:var(--burgundy); text-decoration:none; padding-left:6px; transition:.15s; }
.sidebar li a.current{ color:var(--burgundy); font-weight:600; }

/* Long-form artikeltypografie */
.article{ width:100%; max-width:760px; min-width:0; }
.article > *:first-child{ margin-top:0; }
.article h2{ margin-top:1em; color:var(--burgundy); }
.article h3{ margin-top:1em; color:var(--burgundy); }
.article p{ font-size:1.06rem; }
.article blockquote{ border-left:3px solid var(--gold); background:var(--parchment-2); margin:1.6em 0; padding:1em 1.4em; font-family:var(--serif-display); font-style:italic; font-size:1.25rem; color:var(--burgundy-dark); }
.article figure{ margin:1.8em 0; }
.article figcaption{ font-family:var(--serif-ui); font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:.6em; font-style:italic; }
.article ul,.article ol{ padding-left:1.3em; }
.article li{ margin:.35em 0; }
.article hr{ border:none; border-top:1px solid var(--line); margin:2.2em 0; }

.toc{ background:var(--parchment-2); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--radius); padding:18px 22px; margin:0 0 2em; }
.toc strong{ font-family:var(--serif-ui); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--gold); }
.toc ol{ margin:.6em 0 0; padding-left:1.2em; }
.toc a{ color:var(--ink); }

/* Downloads / documenten */
.doc-link{ display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin:.6em 0; box-shadow:var(--shadow); }
.doc-link svg{ width:30px; height:30px; fill:var(--burgundy); flex:none; }
.doc-link .meta{ flex:1; }
.doc-link .meta b{ font-family:var(--serif-body); font-weight:600; }
.doc-link .meta span{ display:block; font-size:.82rem; color:var(--ink-soft); }

/* ============================================================
   GALERIJ (Wapenboek / Draagtekens)
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
.gitem{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); text-align:center; }
.gitem .frame{ aspect-ratio:1; background:radial-gradient(circle at 50% 40%,var(--parchment),var(--parchment-3)); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.gitem .frame svg{ width:96px; height:96px; }
.gitem .cap{ padding:14px 16px; }
.gitem .cap b{ font-family:var(--serif-display); font-size:1.15rem; color:var(--burgundy); }
.gitem .cap span{ display:block; font-size:.82rem; color:var(--ink-soft); font-family:var(--serif-ui); letter-spacing:.05em; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--burgundy-deep); color:#e5d7bd; padding:64px 0 0; border-top:4px solid var(--gold); }
.footer-grid{ display:grid; grid-template-columns:1.3fr .7fr 1.6fr; gap:40px; padding-bottom:44px; }
.site-footer h4{ font-family:var(--serif-ui); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color:var(--gold-light); margin:0 0 1em; }
.site-footer a{ color:#e5d7bd; }
.site-footer a:hover{ color:#fff; }
.footer-brand{ display:flex; gap:16px; align-items:flex-start; }
.footer-brand .crest{ width:56px; height:56px; flex:none; }
.footer-brand p{ color:#c8b78f; font-size:.95rem; }
.footer-brand .name{ font-family:var(--serif-display); font-size:1.4rem; color:#fff; line-height:1.2; margin-bottom:.5em; }
.footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:.4em 0; }
.footer-bottom{ border-top:1px solid rgba(228,211,163,.2); padding:22px 0; font-family:var(--serif-ui); font-size:.82rem; color:#b7a481; letter-spacing:.03em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* Contactformulier mini */
.mini-form input, .mini-form textarea{ width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(228,211,163,.3); color:#fff; border-radius:var(--radius); padding:.6em .8em; margin-bottom:.6em; font-family:var(--serif-body); }
.mini-form input::placeholder,.mini-form textarea::placeholder{ color:#b7a481; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
  body.single-post .sidebar{ display:none; }
  .pillars,.cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .nav-toggle{ display:block; }
  .mainnav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--parchment); border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .mainnav.open{ display:block; }
  .mainnav ul{ flex-direction:column; padding:12px; }
  .mainnav > ul > li > a{ padding:.7em .9em; }
  .submenu{ position:static; display:flex; box-shadow:none; border:none; border-top:1px dashed var(--line); border-radius:0; padding:0 0 0 16px; min-width:0; }
  .mainnav li:hover > .submenu{ display:flex; }
  .page-banner .container{ flex-direction:column; text-align:center; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .brand-text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .news-item{ flex-direction:column; gap:4px; }
  .news-date{ min-width:0; }
  .header-inner { gap:12px; padding:8px 16px; }
  .hero{ padding:40px 16px; }
  .container { padding:0 16px; }
  .site-footer{ padding-top: 40px; }
  .footer-brand{ flex-direction:column; }
}

/* ============================================================
   Aliassen voor de standaard WordPress-menustructuur
   (koppelt .menu-item-has-children / .sub-menu aan het ontwerp)
   ============================================================ */
.mainnav ul{ list-style:none; margin:0; padding:0; }
.mainnav > ul{ display:flex; gap:4px; }
.mainnav > ul > li{ position:relative; }
.mainnav .menu-item > a{
  display:block; padding:.6em .9em;
  font-family:var(--serif-ui); font-weight:600; font-size:1rem;
  color:var(--ink); letter-spacing:.02em; border-radius:var(--radius);
}
.mainnav > ul > li > a:hover{ color:var(--burgundy); background:var(--parchment-2); text-decoration:none; }
.mainnav .menu-item-has-children > a::after{ content:"\25BE"; font-size:.7em; margin-left:.4em; color:var(--gold); }
.mainnav .current-menu-item > a,
.mainnav .current_page_item > a{ color:var(--burgundy); }

.mainnav .sub-menu{
  position:absolute; top:100%; left:0; min-width:250px;
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--gold); border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; gap:2px; z-index:60;
}
.mainnav li:hover > .sub-menu{ display:flex; }
.mainnav .sub-menu a{
  display:block; padding:.5em .7em; font-family:var(--serif-body);
  font-size:.98rem; color:var(--ink); border-radius:var(--radius); font-weight:400;
}
.mainnav .sub-menu a:hover{ background:var(--parchment-2); color:var(--burgundy); text-decoration:none; }

@media (max-width:960px){
  .mainnav > ul{ flex-direction:column; padding:12px; }
  .mainnav .sub-menu{ position:static; display:flex; box-shadow:none; border:none; border-top:1px dashed var(--line); border-radius:0; padding:0 0 0 16px; min-width:0; }
}

/* Pagina zonder zijbalk */
.layout--full{ grid-template-columns:1fr; }
.layout--full .article, .page-banner-article { max-width:820px; margin:0 auto; }


.wp-element-button:hover {
  color: white;
}
/* ============================================================
   Paginabanner: H1 uitlijnen op de artikelkolom (zelfde breedte)
   ============================================================ */
.page-banner .banner-layout{ padding:0; align-items:center; }
.page-banner .banner-head{ max-width:760px; }
.page-banner .banner-head .breadcrumb{ margin-bottom:.4em; }
.page-banner .layout--full.banner-layout .banner-head{ max-width:820px; margin:0 auto; }
@media (max-width:960px){
  .page-banner .banner-spacer{ display:none; }
  .page-banner .banner-head{ max-width:none; }
}