/*
Theme Name: Veluwe Bijzonder (Hello child)
Theme URI: https://www.veluwebijzonder.nl
Description: Child-thema van Hello Elementor met de huisstijl van Stichting Veluwe Bijzonder.
Author: Tim
Template: hello-elementor
Version: 1.5.0
Text Domain: hello-elementor-child
*/

/* ============================================================
   1. Huisstijl-variabelen
   ============================================================ */
:root {
  --vb-green-900: #25331e;
  --vb-green-800: #2f4a2a;
  --vb-green-700: #3c5a35;
  --vb-green-600: #4d6f43;
  --vb-moss:      #7c8a4f;
  --vb-heather:   #8a5a8f;
  --vb-sand:      #e8e0cf;
  --vb-cream:     #f8f6f0;
  --vb-ink:       #2b2b26;
  --vb-muted:     #5e6157;
  --vb-white:     #ffffff;

  --vb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --vb-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --vb-maxw: 1160px;
  --vb-readw: 760px;
  --vb-radius: 10px;
  --vb-shadow: 0 6px 24px rgba(20, 40, 15, .10);
}

/* ============================================================
   2. Basis & typografie
   ============================================================ */
body {
  font-family: var(--vb-sans);
  color: var(--vb-ink);
  background: var(--vb-cream);
  line-height: 1.7;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--vb-serif);
  color: var(--vb-green-800);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: .2px;
}
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .6em; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
a { color: var(--vb-green-700); text-underline-offset: 3px; }
a:hover { color: var(--vb-heather); }
img { height: auto; }

/* ============================================================
   3. Layout & contentbreedte
   ============================================================ */
.site-main { overflow-x: clip; }

/* Leesbare kolom voor pagina's en losse berichten */
.page-header,
.page-content,
.entry-content {
  max-width: var(--vb-readw);
  margin-inline: auto;
  padding-inline: 22px;
}
.page-header {
  padding-top: 54px;
  margin-bottom: .25em;
}
.page-header .entry-title { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); }

/* Brede / volle blokken mogen uit de leeskolom breken */
.page-content .alignwide,
.entry-content .alignwide { max-width: var(--vb-maxw); margin-inline: auto; }
.page-content .alignfull,
.entry-content .alignfull {
  max-width: none;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Wat ruimte rond losse pagina's */
.page .page-content { padding-block: 16px 64px; }

/* Home: volledige breedte (hero mag bleeden), geen leeskolom-limiet */
.page-id-6 .page-content { max-width: none; padding-inline: 0; padding-block: 0 64px; }

/* ============================================================
   4. Header
   ============================================================ */
.site-header {
  background: var(--vb-white);
  box-shadow: 0 2px 14px rgba(20, 40, 15, .07);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 10px;
}
/* Modern "glassy" header waar de browser dit ondersteunt */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
  }
}
.site-header .header-inner {
  width: 100%;
  max-width: var(--vb-maxw);
  margin-inline: auto;
  padding-inline: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .site-logo img,
.site-header .custom-logo {
  height: 64px;
  width: auto;
  transition: height .25s ease;
}
.site-branding { display: flex; flex-direction: column; gap: 2px; }
/* Subtitels onder de naam */
.site-subtitle {
  margin: 2px 0 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--vb-muted);
  font-family: var(--vb-sans);
}
.site-subtitle .lid { font-size: .72rem; opacity: .85; }

/* Hoofdmenu */
.site-header .site-navigation ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .site-navigation a {
  font-family: var(--vb-sans);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--vb-green-800);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
}
.site-header .site-navigation a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--vb-heather);
  transition: right .25s ease;
}
.site-header .site-navigation a:hover::after,
.site-header .current-menu-item > a::after { right: 0; }
.site-header .current-menu-item > a { color: var(--vb-green-600); }

/* ============================================================
   5. Hero (cover-blok)
   ============================================================ */
.wp-block-cover {
  min-height: 78vh;
  align-items: center;
}
.wp-block-cover .wp-block-cover__inner-container {
  max-width: 820px;
  padding-inline: 22px;
}
.wp-block-cover h1 {
  color: var(--vb-white);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: 0 0 .15em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.wp-block-cover p {
  color: var(--vb-white);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.wp-block-cover .hero-org {
  font-size: .95rem !important;
  opacity: .9;
  margin-top: .2em;
}
/* zachte verloop-overlay onderaan voor diepte */
.wp-block-cover .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(20,30,15,.25) 0%, rgba(20,30,15,.55) 100%) !important;
}

/* ============================================================
   6. Knoppen
   ============================================================ */
.wp-block-button__link {
  background: var(--vb-green-700);
  color: var(--vb-white);
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--vb-sans);
  font-weight: 600;
  border: 2px solid var(--vb-green-700);
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.wp-block-button__link:hover { background: var(--vb-green-800); border-color: var(--vb-green-800); transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--vb-white);
  border-color: rgba(255,255,255,.85);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.15);
  color: var(--vb-white);
}

/* ============================================================
   7. Secties & koppen
   ============================================================ */
.entry-content > .wp-block-group { padding-block: 14px; }
h2.has-text-align-center { position: relative; padding-bottom: .35em; }
h2.has-text-align-center::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: .45em auto 0;
  background: var(--vb-heather);
  border-radius: 3px;
}

/* ============================================================
   8. Galerij
   ============================================================ */
.wp-block-gallery.is-cropped figure.wp-block-image img,
.wp-block-gallery figure.wp-block-image img {
  border-radius: var(--vb-radius);
}
.wp-block-gallery figure.wp-block-image {
  overflow: hidden;
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
}
.wp-block-gallery figure.wp-block-image img {
  transition: transform .5s ease;
  width: 100%;
}
.wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.06); }

/* ============================================================
   9. Nieuws / berichten
   ============================================================ */
.entry-title a { color: var(--vb-green-800); text-decoration: none; }
.entry-title a:hover { color: var(--vb-heather); }
article.post {
  background: var(--vb-white);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  padding: 26px 28px;
  margin-bottom: 28px;
}

/* ============================================================
   10. Footer
   ============================================================ */
.site-footer {
  background: var(--vb-green-900);
  color: #d7ddcf;
  margin-top: 60px;
  padding-block: 48px;
}
.site-footer a { color: #eef0e6; }
.site-footer a:hover { color: var(--vb-white); }
.site-footer .footer-inner {
  max-width: var(--vb-maxw);
  margin-inline: auto;
  padding-inline: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.footer-brand { font-family: var(--vb-serif); font-size: 1.5rem; color: var(--vb-white); }
.footer-org { font-size: .9rem; line-height: 1.5; opacity: .85; }
.footer-social {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 6px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
}
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-copyright { font-size: .82rem; opacity: .7; margin-top: 10px; }

/* ============================================================
   10b. Contactformulier (CF7)
   ============================================================ */
.vb-form label { font-weight: 600; color: var(--vb-green-800); }
.vb-form input[type="text"],
.vb-form input[type="email"],
.vb-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #cfcabb;
  border-radius: 8px;
  background: var(--vb-white);
  font: inherit;
  color: var(--vb-ink);
  box-sizing: border-box;
}
.vb-form input:focus,
.vb-form textarea:focus {
  outline: none;
  border-color: var(--vb-green-600);
  box-shadow: 0 0 0 3px rgba(77,111,67,.15);
}
.vb-form input[type="submit"],
.wpcf7 input[type="submit"] {
  background: var(--vb-green-700);
  color: var(--vb-white);
  border: 0;
  border-radius: 999px;
  padding: 13px 34px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.vb-form input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover { background: var(--vb-green-800); transform: translateY(-2px); }
.wpcf7-response-output { border-radius: 8px; }

/* ============================================================
   11. Responsief
   ============================================================ */
@media (max-width: 1024px) {
  .site-header .site-navigation ul { gap: 22px; }
}
/* Gestapelde, gecentreerde header op tablet/mobiel (geen hamburger nodig: 4 items) */
@media (max-width: 860px) {
  .site-header .header-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .site-branding { align-items: center; }
  .site-header .site-navigation {
    display: block !important;
    width: 100% !important;
  }
  .site-header .site-navigation ul.menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: auto !important;
    max-width: calc(100vw - 44px) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
    gap: 8px 18px;
  }
  .site-header .site-navigation ul.menu li a { padding: 6px 4px; }
}
@media (max-width: 767px) {
  body { font-size: 17px; }
  .site-header .site-logo img,
  .site-header .custom-logo { height: 56px; }
  .site-subtitle { font-size: .76rem; }
  .wp-block-cover { min-height: 66vh; }
}

/* ============================================================
   12. Moderne verfijning
   ============================================================ */
html { scroll-behavior: smooth; }

/* Toegankelijke focus-stijl */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--vb-heather);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Iets meer lucht tussen de homepage-secties */
.page-id-6 .wp-block-group,
.page-id-6 > .page-content > .wp-block-heading { margin-block: 8px; }

/* Knoppen: subtiele schaduw + actieve staat */
.wp-block-button__link { box-shadow: 0 6px 18px rgba(60, 90, 53, .25); }
.wp-block-button.is-style-outline .wp-block-button__link { box-shadow: none; }
.wp-block-button__link:active { transform: translateY(0); }

/* Kernwaarden-kaarten */
.vb-values {
  gap: 22px !important;
  margin-top: 6px;
  max-width: var(--vb-maxw);
  margin-inline: auto;
  padding-inline: 22px;
  box-sizing: border-box;
}
.vb-values .wp-block-column {
  background: var(--vb-white);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  padding: 26px 22px 28px;
  border-top: 4px solid var(--vb-heather);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vb-values .wp-block-column:nth-child(2) { border-top-color: var(--vb-green-600); }
.vb-values .wp-block-column:nth-child(3) { border-top-color: var(--vb-moss); }
.vb-values .wp-block-column:nth-child(4) { border-top-color: var(--vb-green-800); }
.vb-values .wp-block-column:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(20,40,15,.16); }
.vb-values h3 { margin: 0 0 .35em; color: var(--vb-green-800); }
.vb-values p { font-size: .95rem; color: var(--vb-muted); margin: 0; }

/* Galerij: strakke, gelijke tegels (modern) */
.wp-block-gallery figure.wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Algemene fade/slide-in bij scrollen (progressieve verbetering, JS-vrij) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-content > .wp-block-group,
    .page-content > .wp-block-columns,
    .page-content > .wp-block-gallery,
    .page-content > .wp-block-heading {
      animation: vb-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    @keyframes vb-reveal {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Galerij op tablet/mobiel netjes laten inklappen */
@media (max-width: 781px) {
  .wp-block-gallery.columns-3 { --gallery-cols: 2; }
}
@media (max-width: 480px) {
  .vb-values .wp-block-column { padding: 22px 18px; }
}

/* Losse content-afbeeldingen netjes afronden */
.page-content .wp-block-image img,
.entry-content .wp-block-image img { border-radius: var(--vb-radius); }
.page-content .wp-block-image.alignwide,
.entry-content .wp-block-image.alignwide { box-shadow: var(--vb-shadow); border-radius: var(--vb-radius); overflow: hidden; }

/* ============================================================
   13. Nieuws / artikelen
   ============================================================ */
.news-archive .page-header,
.news-archive .news-filter,
.news-archive .page-content,
.news-archive .pagination {
  max-width: var(--vb-maxw);
  margin-inline: auto;
  padding-inline: 22px;
  box-sizing: border-box;
}
.news-archive .page-header { text-align: center; }

/* Filterbalk */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.news-filter__item {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--vb-white);
  border: 1px solid var(--vb-sand);
  color: var(--vb-green-800);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.news-filter__item:hover { border-color: var(--vb-green-600); color: var(--vb-green-600); }
.news-filter__item.is-active {
  background: var(--vb-green-700);
  border-color: var(--vb-green-700);
  color: var(--vb-white);
}

/* Kaartenraster */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--vb-white);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(20,40,15,.16); }
.news-card__media { display: block; overflow: hidden; }
.news-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__media--empty {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--vb-green-600), var(--vb-moss));
}
.news-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: .78rem;
}
.news-card__cat {
  background: rgba(138,90,143,.12);
  color: var(--vb-heather);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  text-decoration: none;
}
.news-card__cat:hover { background: var(--vb-heather); color: #fff; }
.news-card__meta time { color: var(--vb-muted); }
.news-card__title { font-size: 1.25rem; margin: 0 0 .5em; line-height: 1.25; }
.news-card__title a { text-decoration: none; }
.news-card__excerpt { color: var(--vb-muted); font-size: .95rem; margin: 0 0 1em; }
.news-card__more {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  color: var(--vb-green-700);
}
.news-card__more:hover { color: var(--vb-heather); }
.news-empty { text-align: center; color: var(--vb-muted); }

/* Paginering */
.pagination { display: flex; justify-content: space-between; margin-top: 44px; }
.pagination a { font-weight: 600; text-decoration: none; }

/* Losse artikelpagina */
.single-post-layout .page-header { text-align: center; }
.single-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: .82rem;
}
.single-meta__cat {
  background: rgba(138,90,143,.12);
  color: var(--vb-heather);
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  text-decoration: none;
}
.single-meta time { color: var(--vb-muted); }
.single-featured {
  max-width: var(--vb-maxw);
  margin: 0 auto 8px;
  padding-inline: 22px;
  box-sizing: border-box;
}
.single-featured img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  display: block;
}
.single-back { margin-top: 38px; }
.single-back a { font-weight: 600; text-decoration: none; }
.single-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--vb-sand);
  font-size: .92rem;
}
.single-nav a { text-decoration: none; font-weight: 600; }
.single-nav__next { text-align: right; margin-left: auto; }

/* ============================================================
   14. Instagram-sectie (homepage)
   ============================================================ */
.vb-insta {
  margin-top: 12px;
  padding-block: 14px 6px;
  text-align: center;
}
.vb-insta-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
.vb-insta-icon svg {
  width: 44px;
  height: 44px;
  fill: var(--vb-heather);
}
.vb-insta .wp-block-heading { margin-bottom: .35em; }
.vb-insta p { max-width: 520px; margin-inline: auto; color: var(--vb-muted); }