/* NAR thema: header, menu, footer, formulier, artikelen. Variabelen komen uit narrif.css (:root). */

body {
  margin: 0;
  background: #fff;
  color: #0C0D10;
  font-family: var(--nar-body, 'Barlow', 'Helvetica Neue', Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .site-head { top: 0; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}
.screen-reader-text:focus, .skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0; overflow: visible;
  left: 8px; top: 8px; z-index: 100000; background: #fff; color: #0C0D10; padding: 12px 18px; font-weight: 600;
  outline: 3px solid #0C0D10;
}

/* ---------- Bovenbalk en taalkeuze ---------- */
.site-top { background: #0C0D10; color: #B8C0CF; font: 14px/1.4 var(--nar-body, Arial, sans-serif); }
.site-top .in {
  max-width: 1280px; margin: 0 auto; padding: 8px 32px; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: 6px 24px; box-sizing: border-box;
}
.site-top a { color: #fff; text-decoration: none; font-weight: 500; }
.site-top a:hover { text-decoration: underline; }
.site-top .right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.site-top .lang { display: flex; gap: 2px; }
.site-top .lang a {
  color: #B8C0CF; font-weight: 600; padding: 3px 9px; border-bottom: 2px solid transparent;
}
.site-top .lang a.on { color: #fff; border-bottom-color: #1B9BE6; }
.site-top .lang a:hover { color: #fff; text-decoration: none; }

/* ---------- Header en menu ---------- */
.site-head { background: #fff; border-bottom: 1px solid #D5DDEA; font-family: var(--nar-body, Arial, sans-serif); }
.site-head .in {
  max-width: 1280px; margin: 0 auto; padding: 12px 32px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px 32px; box-sizing: border-box;
}
.site-head .custom-logo-link { display: block; line-height: 0; }
.site-head .custom-logo { height: 68px; width: auto; max-width: none; display: block; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.site-nav .nar-menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0; padding: 0; list-style: none;
}
.site-nav a {
  color: #0C0D10; text-decoration: none; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; padding: 6px 0; border-bottom: 3px solid transparent; display: inline-block;
}
.site-nav a:hover { border-bottom-color: var(--nar-blue, #0B6FB8); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a { border-bottom-color: var(--nar-blue, #0B6FB8); }
.site-nav a.don {
  background: var(--nar-blue, #0B6FB8); color: #fff; padding: 12px 24px; letter-spacing: .8px; border-bottom: 0;
}
.site-nav a.don:hover { filter: brightness(1.12); }
.site-head a:focus-visible, .site-top a:focus-visible, .site-foot a:focus-visible {
  outline: 3px solid #1B9BE6; outline-offset: 2px;
}

/* ---------- Footer ---------- */
.site-foot { background: #0C0D10; color: #fff; font-family: var(--nar-body, Arial, sans-serif); }
.site-foot .in {
  max-width: 1280px; margin: 0 auto; padding: 64px 32px 40px; display: flex; flex-direction: column; gap: 48px; box-sizing: border-box;
}
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; }
.site-foot .cols > div { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.site-foot .cols > div:first-child { flex: 1.3 1 260px; gap: 18px; }
.site-foot .tile { background: transparent; padding: 0; align-self: flex-start; line-height: 0; }
.site-foot .tile img { width: 200px; max-width: 100%; height: auto; display: block; }
.site-foot h4 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #B8C0CF; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .wrapany { overflow-wrap: anywhere; }
.site-foot .muted { color: #B8C0CF; line-height: 1.5; max-width: 22em; }
.site-foot .bot {
  border-top: 1px solid #2A2F3A; padding-top: 24px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px 24px; font-size: 14px; color: #B8C0CF;
}
.site-foot .bot .social { display: flex; gap: 24px; }

/* ---------- Nieuwskaarten met afbeelding ---------- */
.nar .nar-card-art, .nar .nar-feature-art { position: relative; overflow: hidden; }
.nar .nar-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nar .nar-card-art .nar-chip, .nar .nar-feature-art .nar-chip { position: relative; z-index: 1; }
.nar .nar-card-more { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .8px; color: var(--nar-blue, #0B6FB8); }
.nar .nar-cards--archive { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nar .nar-pagination { margin-top: 48px; }
.nar .nar-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nar .nar-pagination a, .nar .nar-pagination span {
  display: inline-block; padding: 10px 16px; border: 1px solid #D5DDEA; font-weight: 600; text-decoration: none; color: #0C0D10;
}
.nar .nar-pagination .current { background: var(--nar-blue, #0B6FB8); border-color: var(--nar-blue, #0B6FB8); color: #fff; }

/* ---------- Artikel en pagina ---------- */
.nar .nar-h1--article { font-size: clamp(36px, 5.6vw, 76px); line-height: .98; max-width: 16em; }
.nar .nar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.nar a.nar-link--light { color: #fff; border-bottom-color: #fff; }
.nar .nar-prose { max-width: 46em; font-size: 19px; line-height: 1.7; color: #2A2F3A; }
.nar .nar-prose > * + * { margin-top: 1.1em; }
.nar .nar-prose h2, .nar .nar-prose h3, .nar .nar-prose h4 {
  font-family: var(--nar-display, 'Barlow Condensed', Arial, sans-serif); text-transform: uppercase; font-weight: 800;
  line-height: 1.05; color: #0C0D10; margin-top: 1.8em;
}
.nar .nar-prose h2 { font-size: 40px; }
.nar .nar-prose h3 { font-size: 32px; }
.nar .nar-prose a { color: var(--nar-blue, #0B6FB8); text-decoration: underline; }
.nar .nar-prose ul, .nar .nar-prose ol { padding-left: 1.4em; }
.nar .nar-prose ul { list-style: disc; }
.nar .nar-prose blockquote { margin-left: 0; padding-left: 1.2em; border-left: 6px solid var(--nar-blue, #0B6FB8); font-size: 1.1em; }
.nar .nar-prose img, .nar .nar-prose figure { max-width: 100%; height: auto; }
.nar .nar-prose .alignwide, .nar .nar-prose .alignfull { max-width: 100%; }

/* ---------- Formulier ---------- */
.nar .nar-form { display: flex; flex-direction: column; gap: 20px; }
.nar .nar-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.nar .nar-form-row > .nar-form-field { flex: 1 1 150px; }
.nar .nar-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nar .nar-form-field label { font-weight: 600; font-size: 15px; }
.nar .nar-form button.nar-btn { align-self: flex-start; }
.nar .nar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Verzendanimatie: spinner > vliegtuigje > vinkje, pas na antwoord van de server */
.nar .nar-send {
  position: absolute; inset: 0; background: rgba(237, 242, 249, .985); display: flex; align-items: center; justify-content: center; z-index: 5;
}
.nar .nar-send[hidden] { display: none; }
.nar .nar-send-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 24px; max-width: 28em; }
.nar .nar-send-icon { position: relative; width: 64px; height: 64px; color: var(--nar-blue, #0B6FB8); }
.nar .nar-send-icon svg { position: absolute; inset: 0; display: none; }
.nar .nar-send-icon circle, .nar .nar-send-icon path { stroke: currentColor; }
.nar .nar-send[data-state="sending"] .nar-spinner { display: block; animation: nar-spin 1s linear infinite; }
.nar .nar-spinner circle { stroke-dasharray: 90 150; stroke-linecap: round; }
.nar .nar-send[data-state="success"] .nar-check { display: block; }
.nar .nar-send[data-state="success"] .nar-check circle { stroke-dasharray: 150; stroke-dashoffset: 150; animation: nar-draw .6s ease forwards; }
.nar .nar-send[data-state="success"] .nar-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: nar-draw .4s .45s ease forwards; }
.nar .nar-send[data-state="success"] .nar-plane { display: block; animation: nar-fly .7s ease-in forwards; }
.nar .nar-send[data-state="error"] .nar-cross { display: block; color: #B3261E; }
.nar .nar-send-text { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 500; color: #0C0D10; }
.nar .nar-send-close[hidden] { display: none; }
@keyframes nar-spin { to { transform: rotate(360deg); } }
@keyframes nar-draw { to { stroke-dashoffset: 0; } }
@keyframes nar-fly { 0% { transform: translate(-30px, 30px) scale(.8) rotate(-8deg); opacity: 0; } 25% { transform: translate(0, 0) scale(1.1); opacity: 1; } 100% { transform: translate(120px, -120px) scale(.4) rotate(12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nar .nar-send * { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
  .site-top .in, .site-head .in, .site-foot .in { padding-left: 20px; padding-right: 20px; }
  .site-head .custom-logo, .site-head .nar-logo-over-img { height: 56px; }
  .site-foot .in { padding-top: 48px; }
}

/* ---------- Foto in de hero van de voorpagina ---------- */
.nar .nar-hero-art .nar-banner-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 100% 50%;
}


/* ---------- Knoppen: ovaal, schuin, met gloed (alleen knoppen) ---------- */
.nar a.nar-btn, .nar button.nar-btn, .site-nav a.don {
  border-radius: 9999px; font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  font-style: italic; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, filter .3s;
}
.nar a.nar-btn--blue, .nar button.nar-btn--blue, .site-nav a.don {
  background: linear-gradient(140deg, #0B6FB8, #2E94DB); color: #fff;
  border: 1px solid rgba(27, 155, 230, .6); box-shadow: 0 10px 28px -14px rgba(27, 155, 230, .95);
}
.nar a.nar-btn--ink, .nar button.nar-btn--ink { color: #fff; box-shadow: 0 10px 28px -16px rgba(12, 13, 16, .8); }
.nar a.nar-btn--white { box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .6); }
.nar a.nar-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.nar a.nar-btn:hover, .nar button.nar-btn:hover, .site-nav a.don:hover {
  transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 14px 34px -12px rgba(27, 155, 230, 1);
}
.nar a.nar-btn--blue:hover, .nar a.nar-btn--blue:focus, .nar a.nar-btn--ink:hover, .site-nav a.don:hover { color: #fff; }

/* ---------- Hoofdtitel: schuin, vet, in twee kleuren ---------- */
.nar .nar-h1 {
  font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif; font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(36px, 6vw, 84px); line-height: 1.02;
}
.nar .nar-h1--page { font-size: clamp(34px, 5.4vw, 72px); line-height: 1.04; }
.nar .nar-h1--article { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; }
.nar .nar-h1-accent { color: #1B9BE6; }
.nar .nar-dark .nar-h1-main { background: linear-gradient(180deg, #fff 30%, #BFC8D6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Doorzichtige vlakken: het gloeiende logo is op elke pagina te zien */
body.nar-glow-on .nar .nar-white { background: rgba(255,255,255,.90); }
body.nar-glow-on .nar .nar-mist { background: rgba(237,242,249,.88); }
body.nar-glow-on .nar .nar-blue { background: rgba(11,111,184,.58); }
body.nar-glow-on .site-head { background: rgba(255,255,255,.94); }
body.nar-glow-on .nar .nar-objective:not(.nar-objective--ink), body.nar-glow-on .nar .nar-formbox { background: rgba(237,242,249,.94); }
body.nar-glow-on .nar a.nar-card { background: rgba(255,255,255,.9); }
/* "All articles" e.d. als ovale knop */
.nar a.nar-link {
  display: inline-block; padding: 10px 22px; border: 2px solid var(--nar-blue); border-radius: 9999px;
  font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif; font-style: italic; font-weight: 800; letter-spacing: .02em;
  transition: background .3s, color .3s, transform .3s;
}
.nar a.nar-link:hover { background: var(--nar-blue); color: #fff; text-decoration: none; transform: translateY(-2px); }

/* Illustraties bij de doelstellingen */
.nar .nar-obj-img{display:block;width:62%;max-width:210px;height:auto;margin:0 0 6px}
.nar .nar-obj-img--cover{width:calc(100% + 56px);max-width:none;margin:-28px -28px 8px}

/* ---------- Aanmeldformulier: ovale knop + verzendanimatie ---------- */
.nar .nar-formbox button[type="submit"].nar-btn {
  background: linear-gradient(140deg, #0B6FB8, #2E94DB) !important; border: 1px solid rgba(27, 155, 230, .6) !important;
  border-radius: 9999px !important; padding: 16px 38px !important; font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-style: italic; font-weight: 800 !important; font-size: 16px !important; letter-spacing: .02em; text-transform: uppercase;
  color: #fff !important; box-shadow: 0 10px 28px -14px rgba(27, 155, 230, .95);
}
.nar .nar-formbox button[type="submit"].nar-btn:hover { box-shadow: 0 14px 34px -12px rgba(27, 155, 230, 1); }

.nar .nar-send:not([hidden]) { animation: nar-fade .35s ease both; }
.nar .nar-send-inner { animation: nar-rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.nar .nar-send-icon { width: 84px; height: 84px; }
.nar .nar-send-icon svg { width: 84px; height: 84px; }
.nar .nar-send[data-state="sending"] .nar-send-icon::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(27, 155, 230, .35), transparent 70%); animation: nar-pulse 1.4s ease-in-out infinite;
}
.nar .nar-send[data-state="success"] .nar-check { animation: nar-pop .5s .9s cubic-bezier(.22, 1, .36, 1) both; }
.nar .nar-send[data-state="success"] .nar-check circle { animation-delay: .9s; }
.nar .nar-send[data-state="success"] .nar-check path { animation-delay: 1.25s; }
.nar .nar-send[data-state="success"] .nar-send-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #1B9BE6; opacity: 0; animation: nar-ring .9s 1.2s ease-out both;
}
.nar .nar-send[data-state="success"] .nar-send-text, .nar .nar-send[data-state="success"] .nar-send-close { animation: nar-rise .5s 1.5s cubic-bezier(.22, 1, .36, 1) both; }
.nar .nar-send[data-state="success"] .nar-plane { animation-duration: .9s; }
.nar .nar-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; animation: nar-dot .9s 1.2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nar-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nar-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nar-pulse { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes nar-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nar-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes nar-dot { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }

/* ---------- Taal-dropdown (bovenbalk) ---------- */
.site-top .lang-dd { position: relative; }
.site-top .lang-dd > summary { list-style: none; }
.site-top .lang-dd > summary::-webkit-details-marker { display: none; }
.site-top .lang-dd-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #fff; font-weight: 600;
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 9999px; background: rgba(255, 255, 255, .06);
  transition: background .2s, border-color .2s;
}
.site-top .lang-dd-btn:hover, .site-top .lang-dd[open] .lang-dd-btn { background: rgba(27, 155, 230, .22); border-color: #1B9BE6; }
.site-top .lang-dd-chev { transition: transform .2s; }
.site-top .lang-dd[open] .lang-dd-chev { transform: rotate(180deg); }
.site-top .lang-dd-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px; margin: 0; padding: 6px; list-style: none;
  background: #0C0D10; border: 1px solid rgba(27, 155, 230, .55); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 24px -8px rgba(27, 155, 230, .6);
}
.site-top .lang-dd-list a {
  display: block; padding: 9px 14px; border-radius: 9px; color: #E6ECF5; border: 0; font-weight: 500; text-decoration: none;
}
.site-top .lang-dd-list a:hover { background: rgba(27, 155, 230, .22); color: #fff; text-decoration: none; }
.site-top .lang-dd-list a.on { background: #0B6FB8; color: #fff; font-weight: 700; }

/* Blok "Ook beschikbaar in" onder een artikel */
.nar .nar-translations { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #D5DDEA; }
.nar .nar-translations-label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
@media (max-width: 700px) {
  .site-top .lang-dd-list { left: 0; right: auto; }
}

/* ---------- Menu: glas over de bovenkant, vast wit na scrollen ---------- */
body.nar-head-over .site-head,
body.nar-glow-on.nar-head-over .site-head {
  position: sticky; top: 0; z-index: 70; margin-bottom: calc(var(--nar-head-h, 92px) * -1);
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
body.nar-head-over .site-head .in { transition: padding .3s ease; }
body.nar-head-over .site-head .custom-logo { transition: height .3s ease, filter .35s ease; }
body.nar-head-over .site-nav a:not(.don) { transition: color .3s ease, border-color .2s ease; }
/* Bovenaan: doorzichtig glas, witte tekst */
body.nar-head-over:not(.nar-scrolled) .site-head,
body.nar-glow-on.nar-head-over:not(.nar-scrolled) .site-head {
  background: rgba(12, 13, 16, .34); border-bottom-color: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
body.nar-head-over:not(.nar-scrolled) .site-nav a:not(.don) { color: #fff; }
body.nar-head-over:not(.nar-scrolled) .site-nav a:not(.don):hover { border-bottom-color: #1B9BE6; }
body.nar-head-over:not(.nar-scrolled) .site-head .custom-logo { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 10px rgba(255, 255, 255, .55)); }
/* Na scrollen: vast, wit, met schaduw en een kleiner logo */
body.nar-head-over.nar-scrolled .site-head,
body.nar-glow-on.nar-head-over.nar-scrolled .site-head {
  background: rgba(255, 255, 255, .96); border-bottom-color: #D5DDEA; box-shadow: 0 10px 30px -18px rgba(12, 13, 16, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.nar-head-over.nar-scrolled .site-head .in { padding-top: 7px; padding-bottom: 7px; }
body.nar-head-over.nar-scrolled .site-head .custom-logo { height: 54px; }
/* Het eerste vlak loopt onder het menu door */
body.nar-head-over main > .nar > section:first-child { border-top: var(--nar-head-h, 92px) solid transparent; }
@media (prefers-reduced-motion: reduce) {
  body.nar-head-over .site-head, body.nar-head-over .site-head * { transition: none !important; }
}

/* De taal-dropdown (bovenbalk) moet boven het vaste menu uitkomen */
body.nar-head-over .site-top,
body.nar-glow-on.nar-head-over .site-top { position: relative; z-index: 80; }

/* ---------- Voorpagina zonder foto in het kopgedeelte ---------- */
.nar .nar-hero--noart .nar-wrap { padding-top: 96px; padding-bottom: 96px; }
.nar .nar-hero--noart .nar-hero-text { flex: 1 1 100%; max-width: 860px; }

/* ---------- Rechthoekige knoppen (Customizer > Global) ---------- */
body.nar-square-btns .nar a.nar-btn, body.nar-square-btns .nar button.nar-btn, body.nar-square-btns .site-nav a.don,
body.nar-square-btns .nar a.nar-link, body.nar-square-btns .nar .nar-formbox button[type="submit"].nar-btn {
  border-radius: 2px !important; font-style: normal !important; font-family: var(--nar-body, Arial, sans-serif) !important; font-weight: 700 !important;
}

/* ---------- Widgets in de footer ---------- */
.site-foot .nar-foot-widgets { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.site-foot .nar-foot-widgets .widget { flex: 1 1 220px; min-width: 0; font-size: 16px; line-height: 1.55; color: #D5DDEA; }
.site-foot .nar-foot-widgets .widget-title { margin: 0 0 12px; color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.site-foot .nar-foot-widgets a { color: #fff; }
.site-foot .nar-foot-widgets ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* Melding "Automatisch vertaald" */
.nar .nar-autotr { margin: 0 0 24px; padding: 10px 14px; border-left: 4px solid var(--nar-blue); background: var(--nar-mist); font-size: 15px; line-height: 1.5; }

/* Logo-wissel: doorzichtig logo bovenaan, gewoon logo na scrollen */
.site-head .nar-logo-over { display: none; line-height: 0; }
.site-head .nar-logo-over-img { height: 68px; width: auto; max-width: none; display: block; }
body.nar-head-over:not(.nar-scrolled) .site-head .custom-logo-link { display: none; }
body.nar-head-over:not(.nar-scrolled) .site-head .nar-logo-over { display: block; }
body.nar-head-over:not(.nar-scrolled) .site-head .nar-logo-over-img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 10px rgba(255, 255, 255, .55)); }

/* Iconen bij de doelen: altijd volle kleur, ook als een cache- of lazyload-plugin ze bleker maakt */
.nar .nar-obj-img { opacity: 1 !important; filter: none !important; visibility: visible !important; mix-blend-mode: normal !important; }

/* Standaardpagina: banner even groot als "What we do" */
.nar .nar-hero-page { min-height: clamp(300px, 30vw, 440px); display: flex; align-items: center; }
.nar .nar-hero-page > .nar-wrap { width: 100%; }

/* Labels boven de titel in de banners uit te zetten via de Customizer */
body.nar-no-chips:not(.single):not(.error404) .nar .nar-sec:first-of-type .nar-chip { display: none; }

/* Artikel: donkere kop zoals voorheen, daaronder de grote foto, links delen en rechts de tekst */
.nar .nar-art-top { padding-top: clamp(140px, 13vw, 190px); }
.nar .nar-art-figure { position: relative; margin: 0 0 44px; background: var(--nar-ink); }
.nar .nar-art-figure img { display: block; width: 100%; height: clamp(220px, 34vw, 480px); object-fit: cover; }
.nar .nar-art-credit { position: absolute; right: 14px; bottom: 10px; margin: 0; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.nar .nar-art-grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px 64px; align-items: start; }
.nar .nar-art-meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.nar .nar-art-share { display: flex; flex-wrap: wrap; gap: 8px; }
.nar .nar-art-share a { width: 40px; height: 40px; border-radius: 50%; background: var(--nar-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 17px/1 'Barlow Condensed', sans-serif; text-decoration: none; }
.nar .nar-art-share a:hover, .nar .nar-art-share a:focus-visible { background: var(--nar-blue); }
.nar .nar-art-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 860px) {
  .nar .nar-art-grid { grid-template-columns: minmax(0, 1fr); }
  .nar .nar-art-meta { order: 2; }
}

/* Icoontjes (social) */
.nar .nar-icons { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.nar .nar-icons a { width: 40px; height: 40px; border-radius: 50%; background: var(--nar-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nar .nar-icons a:hover, .nar .nar-icons a:focus-visible { background: var(--nar-blue); }
.nar .nar-icons svg { width: 20px; height: 20px; fill: currentColor; }
.nar .nar-icons svg.nar-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.nar .nar-icons-row { margin: 10px 0 0; }
.nar .nar-art-grid { grid-template-columns: minmax(0, 1fr); }
.nar .nar-art-body { grid-column: auto; max-width: 760px; }

.site-foot .social { display: inline-flex; align-items: center; }
.site-foot .nar-icons a, .site-top .nar-icons a, footer .nar-icons a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
footer .nar-icons { display: inline-flex; gap: 8px; }
footer .nar-icons a:hover { background: #1B9BE6; }
footer .nar-icons svg { width: 19px; height: 19px; fill: currentColor; }

/* Hover: kleur van het platform */
.nar .nar-icons a, footer .nar-icons a { transition: background-color .2s, box-shadow .2s; }
.nar .nar-icons a.nar-ic-facebook:hover, footer .nar-icons a.nar-ic-facebook:hover, .nar .nar-icons a.nar-ic-facebook:focus-visible, footer .nar-icons a.nar-ic-facebook:focus-visible { background: #1877F2; }
.nar .nar-icons a.nar-ic-x:hover, footer .nar-icons a.nar-ic-x:hover, .nar .nar-icons a.nar-ic-x:focus-visible, footer .nar-icons a.nar-ic-x:focus-visible { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.nar .nar-icons a.nar-ic-youtube:hover, footer .nar-icons a.nar-ic-youtube:hover, .nar .nar-icons a.nar-ic-youtube:focus-visible, footer .nar-icons a.nar-ic-youtube:focus-visible { background: #FF0000; }
.nar .nar-icons a.nar-ic-whatsapp:hover, footer .nar-icons a.nar-ic-whatsapp:hover, .nar .nar-icons a.nar-ic-whatsapp:focus-visible, footer .nar-icons a.nar-ic-whatsapp:focus-visible { background: #25D366; }

/* Artikeltekst: altijd volle breedte */
.nar .nar-art-grid { display: block !important; }
.nar .nar-art-body { width: 100%; max-width: 760px; }
.site-top .nar-icons { display: inline-flex; gap: 8px; margin-right: 18px; vertical-align: middle; }
.site-top .nar-icons a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s; }
.site-top .nar-icons a:hover { background: #1B9BE6; }
.site-top .nar-icons svg { width: 16px; height: 16px; fill: currentColor; }
.site-top .nar-icons a.nar-ic-facebook:hover { background: #1877F2; }
.site-top .nar-icons a.nar-ic-x:hover { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.site-top .nar-icons a.nar-ic-youtube:hover { background: #FF0000; }
.nar-icons-row .nar-icons, .nar-prose .nar-icons { display: inline-flex; gap: 8px; }
.nar-icons-row .nar-icons a, .nar-prose .nar-icons a { width: 40px; height: 40px; border-radius: 50%; background: #0C0D10; color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nar-icons-row .nar-icons svg { width: 20px; height: 20px; fill: currentColor; }
.nar-icons-row .nar-icons svg.nar-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.nar-icons-row .nar-icons a.nar-ic-facebook:hover { background: #1877F2; }
.nar-icons-row .nar-icons a.nar-ic-x:hover { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.nar-icons-row .nar-icons a.nar-ic-youtube:hover { background: #FF0000; }
.nar-icons-row .nar-icons a.nar-ic-whatsapp:hover { background: #25D366; }
.nar-icons-row .nar-icons a.nar-ic-e-mail:hover { background: #1B9BE6; }

/* Voorpagina: blauwe kop, met dezelfde doorzichtigheid als de andere pagina-koppen */
.nar .nar-hero.nar-dark { background: var(--nar-blue); }
body.nar-glow-on .nar .nar-hero.nar-dark { background: rgba(11,111,184,.58); }

/* Blauwe kop: knop zwart zodat hij zichtbaar blijft */
.nar .nar-social .nar-icons { gap: 10px; }

/* Alle blauwe knoppen: glanzend blauw met lichtreflectie (zoals Donate now op wit) */
.nar a.nar-btn--blue, .nar button.nar-btn--blue, .site-nav a.don, .nar .nar-formbox button[type="submit"].nar-btn {
  background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 55%), linear-gradient(140deg, #0B6FB8, #2E94DB) !important;
  background-color: #1B7FCB !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 10px 28px -14px rgba(27,155,230,.95);
}
.nar .nar-blue a.nar-btn--blue, .nar .nar-hero a.nar-btn--blue, body.nar-head-over:not(.nar-scrolled) .site-nav a.don { border-color: rgba(255,255,255,.65); }

/* ---------- Alle schermen: tablet, mobiel, laptop, PC (niets afgesneden) ---------- */
html, body { max-width: 100%; }
body { overflow-x: clip; }
.nar img, .nar video, .nar iframe, .nar svg { max-width: 100%; }
.nar .nar-prose { overflow-wrap: anywhere; }
.nar .nar-prose img, .nar .nar-prose video, .nar .nar-prose iframe { max-width: 100%; height: auto; }
.nar .nar-prose table { display: block; max-width: 100%; overflow-x: auto; }
.nar .nar-prose figure { max-width: 100%; margin-left: 0; margin-right: 0; }
/* Artikelfoto: hele foto tonen in de eigen verhouding (alleen zeer hoge foto's worden begrensd) */
.nar .nar-art-figure img { height: auto; max-height: min(78vh, 680px); }
/* Nieuwskaarten: vaste verhouding in plaats van vaste hoogte, zodat de foto op elk scherm hetzelfde uitsnede heeft */
.nar .nar-card-art { height: auto; aspect-ratio: 16 / 10; }
/* Nieuws-slideshow: ruimte voor de pijlen zodat ze de tekst niet raken (tablet en groter) */
@media (min-width: 601px) {
  .nar .nar-slider .nar-slide-body { padding-left: clamp(76px, 9vw, 104px); padding-right: clamp(76px, 9vw, 104px); }
}
/* Telefoons: koppen en knoppen schalen mee */
@media (max-width: 480px) {
  .nar .nar-btns { gap: 10px; }
  .nar .nar-h1 { overflow-wrap: break-word; hyphens: auto; }
  .nar .nar-wrap { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Mobiel menu (hamburger met uitklapmenu) ---------- */
.nar-nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-head .in { position: relative; flex-wrap: nowrap; }
  .nar-nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid currentColor; background: transparent; color: #0C0D10; flex: 0 0 auto;
  }
  body.nar-head-over:not(.nar-scrolled) .nar-nav-toggle { color: #fff; }
  .nar-nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nar-head-open .nar-nav-toggle span:nth-child(1), .site-head.nar-nav-open .nar-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-head.nar-nav-open .nar-nav-toggle span:nth-child(2) { opacity: 0; }
  .site-head.nar-nav-open .nar-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-head .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 90; flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px 20px 20px; background: #0C0D10; border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7);
  }
  .site-head.nar-nav-open .site-nav { display: flex; }
  .site-head .site-nav .nar-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-head .site-nav a:not(.don) { color: #fff !important; display: block; padding: 14px 4px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .site-head .site-nav a.don { align-self: flex-start; margin-top: 16px; }
}