/*
Theme Name: Wivina Klooster
Theme URI: https://kuduconcepts.be
Author: Kudu Concepts
Description: WordPress theme voor Wivina Klooster met native Gutenberg blokken.
Version: 1.0.21
Text Domain: wivina-klooster
*/

    /* ── Reset & base ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    :root {
      --creme:      #FBF4EB;
      --blauw:      #0A1238;
      --terracotta: #B05132;
      --salmon:     #F0D2C3;
      --mint:       #C4E4E2;
      --muted:      #666666;
      --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
      --font-body:    'Inter', system-ui, sans-serif;
      --radius-card:  20px;
      --max-w:        1280px;
    }

    body {
      background: var(--creme);
      color: var(--blauw);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      line-height: 1.5;
    }

    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ── Typography ───────────────────────────────────────── */
    h1, h2 {
      font-family: var(--font-display);
      font-weight: 300;
      letter-spacing: 0.01em;
    }

    .eyebrow {
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 500;
      font-size: 13px;
    }

    /* ── Layout helpers ───────────────────────────────────── */
    .container {
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: 20px;
    }
    @media (min-width: 768px) { .container { padding-inline: 40px; } }

    .grid-12 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 768px) {
      .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 32px; }
      .col-5  { grid-column: span 5; }
      .col-7  { grid-column: span 7; }
    }

    /* ── Reveal animation ─────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal { opacity: 0; }
    .reveal.visible { animation: fadeUp 0.8s ease-out forwards; }

    /* ── Arch mask (voor aanbod sectie) ───────────────────── */
    .arch-mask { border-radius: 50% 50% 0 0 / 28% 28% 0 0; }

    /* ════════════════════════════════════════════════════════
       NAVIGATIE
    ════════════════════════════════════════════════════════ */
    #nav {
      position: fixed;
      inset-inline: 0;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(251,244,235,0.70);
      transition: box-shadow 0.3s;
    }
    #nav.scrolled { box-shadow: 0 2px 16px rgba(10,18,56,0.08); }

    .nav-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: 24px;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    @media (min-width: 1024px) { .nav-inner { padding-inline: 40px; } }

    .nav-logo { height: 70px; width: auto; }

    .nav-links {
      display: none;
      align-items: center;
      gap: 48px;
      list-style: none;
    }
    @media (min-width: 768px) { .nav-links { display: flex; } }

    .nav-links a {
      font-size: 18px;
      font-weight: 400;
      color: var(--blauw);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--terracotta); }



    .nav-actions {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .wivina-lang-switcher {
      display: none;
      align-items: center;
      padding: 4px;
      border-radius: 999px;
      background: rgba(10,18,56,.09);
      gap: 0;
    }
    @media (min-width: 768px) { .wivina-lang-switcher { display: inline-flex; } }

    .wivina-lang-link {
      min-width: 50px;
      height: 34px;
      padding: 0 15px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(10,18,56,.48);
      font-size: 15px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: background .2s, color .2s;
    }
    .wivina-lang-link.is-active {
      background: var(--blauw);
      color: var(--creme);
    }
    .wivina-lang-link:not(.is-active):hover { color: var(--blauw); }

    #mobile-menu .wivina-lang-switcher { display: inline-flex; }
    #mobile-menu .mobile-nav-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #mobile-menu .mobile-nav-list a {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 500;
      color: var(--blauw);
    }

    .nav-cta {
      display: none;
      border: 1px solid var(--blauw);
      border-radius: 999px;
      padding: 10px 24px;
      font-size: 18px;
      font-weight: 500;
      color: var(--blauw);
      transition: background 0.2s, color 0.2s;
    }
    @media (min-width: 768px) { .nav-cta { display: inline-flex; align-items: center; } }
    .nav-cta:hover { background: var(--blauw); color: var(--creme); }

    .nav-hamburger { display: flex; }
    @media (min-width: 768px) { .nav-hamburger { display: none; } }

    /* Mobile menu */
    #mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 60;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(251,244,235,0.95);
      text-align: center;
    }
    #mobile-menu.open { display: flex; }
    #mobile-close {
      position: absolute;
      right: 24px;
      top: 24px;
    }
    #mobile-menu nav { display: flex; flex-direction: column; gap: 24px; }
    #mobile-menu nav a {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 500;
      color: var(--blauw);
    }
    #mobile-menu .mobile-cta {
      border: 1px solid var(--blauw);
      border-radius: 999px;
      padding: 12px 32px;
      font-size: 14px;
      font-weight: 500;
      color: var(--blauw);
    }

    /* ════════════════════════════════════════════════════════
       HERO
    ════════════════════════════════════════════════════════ */
    #hero {
      background: var(--creme);
      padding-top: 100px;
      padding-bottom: 48px;
      padding-inline: 20px;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      #hero { padding-top: 92px; padding-bottom: 64px; padding-inline: 40px; }
    }
    @media (min-width: 1024px) { #hero { padding-bottom: 96px; } }

    .hero-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: stretch;
    }
    @media (min-width: 768px) {
      .hero-inner { grid-template-columns: 5fr 7fr; gap: 32px; }
    }

    .hero-card {
      background: var(--salmon);
      border-radius: var(--radius-card);
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (min-width: 768px) { .hero-card { padding: 40px; } }
    @media (min-width: 1024px) { .hero-card { padding: 56px; } }

    .hero-card h1 {
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.05;
      color: var(--blauw);
    }
    .hero-card p {
      margin-top: 24px;
      font-size: 16px;
      line-height: 1.45;
      color: var(--blauw);
    }
    .hero-card .btn-group {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    @media (min-width: 480px) { .hero-card .btn-group { flex-direction: row; } }

    .hero-img {
      border-radius: var(--radius-card);
      overflow: hidden;
    }
    .hero-img img {
      width: 100%;
      height: 100%;
      min-height: 300px;
      object-fit: cover;
    }
    @media (min-width: 768px) { .hero-img img { min-height: 520px; } }
    @media (min-width: 1024px) { .hero-img img { min-height: 620px; } }

    /* ════════════════════════════════════════════════════════
       BUTTONS (gedeeld)
    ════════════════════════════════════════════════════════ */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--blauw);
      color: var(--creme);
      padding: 12px 32px;
      font-size: 16px;
      font-weight: 500;
      transition: filter 0.2s;
    }
    .btn-primary:hover { filter: brightness(1.1); }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--mint);
      color: var(--blauw);
      padding: 12px 32px;
      font-size: 14px;
      font-weight: 500;
      transition: filter 0.2s;
    }
    .btn-secondary:hover { filter: brightness(1.05); }

    .btn-terracotta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--terracotta);
      color: var(--creme);
      padding: 12px 32px;
      font-size: 16px;
      font-weight: 500;
      transition: filter 0.2s;
    }
    .btn-terracotta:hover { filter: brightness(1.1); }

    /* ════════════════════════════════════════════════════════
       SECTION gemeenschappelijk
    ════════════════════════════════════════════════════════ */
    .section {
      overflow: hidden;
      background: var(--creme);
      padding-block: 40px;
      padding-inline: 20px;
    }
    @media (min-width: 768px) { .section { padding-block: 56px; padding-inline: 40px; } }
    @media (min-width: 1024px) { .section { padding-block: 80px; } }

    .section-header { text-align: center; margin-bottom: 48px; }
    .section-header h2 {
      font-size: clamp(28px, 3vw, 44px);
      color: var(--blauw);
      font-weight: 400;
      margin-top: 8px;
    }

    /* ════════════════════════════════════════════════════════
       WAT ZEGT KANTOOR (visitekaartje)
    ════════════════════════════════════════════════════════ */
    .watzegt-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: stretch;
    }
    @media (min-width: 768px) {
      .watzegt-inner { grid-template-columns: 7fr 5fr; gap: 32px; }
    }

    .watzegt-text { display: flex; flex-direction: column; justify-content: center; }
    @media (min-width: 768px) { .watzegt-text { padding-left: 24px; } }
    @media (min-width: 1024px) { .watzegt-text { padding-left: 40px; } }

    .watzegt-text h2 {
      font-size: clamp(32px, 3.5vw, 44px);
      line-height: 1.15;
      margin-top: 8px;
      margin-bottom: 24px;
      color: var(--blauw);
    }
    .watzegt-text p { font-size: 16px; line-height: 1.7; color: var(--blauw); margin-bottom: 32px; }

    .watzegt-img {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-card);
      aspect-ratio: 1 / 1;
      min-height: 280px;
    }
    @media (min-width: 768px) {
      .watzegt-img { aspect-ratio: auto; height: 100%; min-height: 520px; }
    }
    @media (min-width: 1024px) { .watzegt-img { min-height: 580px; } }
    .watzegt-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
      border-radius: var(--radius-card);
    }

    /* ════════════════════════════════════════════════════════
       TROEVEN
    ════════════════════════════════════════════════════════ */
    .troeven-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 640px) { .troeven-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
    @media (min-width: 1024px) { .troeven-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

    .troef-card {
      background: var(--blauw);
      border-radius: 20px;
      padding: 32px;
      text-align: center;
    }
    .troef-card h3 { font-size: 16px; font-weight: 700; color: var(--creme); margin-bottom: 12px; }
    .troef-card p { font-size: 16px; line-height: 1.7; color: var(--creme); white-space: pre-line; }

    .troeven-footer { margin-top: 48px; display: flex; justify-content: center; }

    /* ════════════════════════════════════════════════════════
       INTRO (aerial luchtfoto)
    ════════════════════════════════════════════════════════ */
    .intro-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
    }
    @media (min-width: 768px) { .intro-inner { grid-template-columns: 7fr 5fr; gap: 32px; } }

    .intro-img {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-card);
      height: 420px;
    }
    @media (min-width: 768px) { .intro-img { height: 520px; } }
    @media (min-width: 1024px) { .intro-img { height: 620px; } }
    .intro-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
      border-radius: var(--radius-card);
    }

    .intro-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px;
    }
    @media (min-width: 768px) { .intro-text { padding: 40px; } }
    @media (min-width: 1024px) { .intro-text { padding: 56px; } }

    .intro-text h2 {
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.15;
      margin-top: 16px;
      margin-bottom: 24px;
      color: var(--blauw);
    }
    .intro-text p { font-size: 16px; line-height: 1.7; color: var(--blauw); margin-bottom: 40px; }

    /* ════════════════════════════════════════════════════════
       AANBOD
    ════════════════════════════════════════════════════════ */
    /* Mobile cards */
    .aanbod-mobile { display: grid; grid-template-columns: 1fr; gap: 24px; }
    @media (min-width: 1024px) { .aanbod-mobile { display: none; } }

    .aanbod-card-groot {
      background: var(--salmon);
      border-radius: var(--radius-card);
      padding: 32px;
      color: var(--blauw);
    }
    .aanbod-card-klein {
      background: var(--terracotta);
      border-radius: var(--radius-card);
      padding: 32px;
      color: var(--creme);
    }
    .aanbod-card-groot .eyebrow { opacity: 0.7; }
    .aanbod-card-klein .eyebrow { opacity: 0.8; }
    .aanbod-card-groot h3, .aanbod-card-klein h3 { font-size: 16px; line-height: 1.4; margin-top: 16px; }
    .aanbod-card-groot p, .aanbod-card-klein p { font-size: 16px; margin-top: 8px; }
    .aanbod-card-groot small, .aanbod-card-klein small { display: block; font-size: 15px; margin-top: 16px; }
    .aanbod-card-klein small { opacity: 0.9; }
    .aanbod-card-groot small { opacity: 0.8; }

    .aanbod-img-mobile {
      border-radius: var(--radius-card);
      overflow: hidden;
    }
    .aanbod-img-mobile img { width: 100%; min-height: 340px; object-fit: cover; }

    /* Desktop layout */
    .aanbod-desktop {
      display: none;
      position: relative;
      height: 520px;
      max-width: var(--max-w);
      margin-inline: auto;
      margin-top: 64px;
    }
    @media (min-width: 1024px) { .aanbod-desktop { display: block; } }

    .aanbod-desktop-img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      width: 38%;
      height: 680px;
      overflow: hidden;
    }
    .aanbod-desktop-img img { width: 100%; height: 100%; object-fit: cover; }

    .aanbod-desktop-bubble {
      position: absolute;
      bottom: 30%;
      left: 10%;
      z-index: 20;
      width: 24%;
      aspect-ratio: 1/1;
      background: var(--salmon);
      border-top-right-radius: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 32px;
      color: var(--terracotta);
    }
    .aanbod-desktop-bubble .size {
      font-family: var(--font-display);
      font-size: clamp(28px, 2.5vw, 44px);
      line-height: 1.1;
      font-weight: 400;
    }
    .aanbod-desktop-bubble p { font-size: 16px; margin-top: 8px; }

    .aanbod-desktop-panel {
      position: absolute;
      bottom: 0;
      right: 7.5%;
      z-index: 20;
      width: 300px;
      height: 520px;
      background: var(--terracotta);
      border-top-left-radius: 300px;
      padding: 40px;
      padding-top: 176px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--creme);
      text-align: right;
    }
    .aanbod-desktop-panel .panel-label { font-size: 13px; letter-spacing: 0.08em; opacity: 0.7; }
    .aanbod-desktop-panel .panel-size { font-size: 20px; font-weight: 700; margin-top: 4px; }
    .aanbod-desktop-panel .panel-detail { font-size: 15px; font-weight: 300; margin-top: 4px; }
    .aanbod-desktop-panel .divider { height: 1px; background: rgba(255,255,255,0.3); margin-block: 16px; }
    .aanbod-desktop-panel .panel-footer { display: flex; justify-content: flex-end; }

    .aanbod-mobile-cta { margin-top: 40px; display: flex; justify-content: center; }
    @media (min-width: 1024px) { .aanbod-mobile-cta { display: none; } }

    /* ════════════════════════════════════════════════════════
       VERHUURFORMULES
    ════════════════════════════════════════════════════════ */
    .formules-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 768px) { .formules-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

    .formule-card {
      background: var(--blauw);
      border-radius: 20px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .formule-card h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; color: var(--creme); }
    .formule-card p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--creme); }
    .formule-card .btn-secondary { margin-top: 32px; }

    /* ════════════════════════════════════════════════════════
       BEREIKBAARHEID
    ════════════════════════════════════════════════════════ */
    .bereik-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: start;
    }
    @media (min-width: 768px) { .bereik-inner { grid-template-columns: 1fr 1fr; gap: 48px; } }

    .bereik-map {
      overflow: hidden;
      border-radius: var(--radius-card);
    }
    .bereik-map iframe {
      width: 100%;
      height: 250px;
      border: 0;
      display: block;
    }
    @media (min-width: 768px) { .bereik-map iframe { height: 480px; } }

    .bereik-info { padding: 8px; }
    @media (min-width: 768px) { .bereik-info { padding: 32px 40px; } }

    .bereik-badge {
      display: inline-block;
      background: var(--terracotta);
      color: #fff;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .bereik-list { list-style: none; margin-bottom: 24px; }
    .bereik-list li {
      display: flex;
      justify-content: space-between;
      gap: 64px;
      padding-block: 6px;
      font-size: 16px;
      color: var(--blauw);
    }
    .bereik-list li:not(:last-child) { border-bottom: 1px solid rgba(10,18,56,0.10); }
    .bereik-list .tabular { font-variant-numeric: tabular-nums; }

    /* ════════════════════════════════════════════════════════
       FACILITEITEN
    ════════════════════════════════════════════════════════ */
    .facil-inner {
      max-width: var(--max-w);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: stretch;
    }
    @media (min-width: 768px) { .facil-inner { grid-template-columns: 5fr 7fr; gap: 32px; } }

    .facil-card {
      background: var(--blauw);
      border-radius: var(--radius-card);
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (min-width: 768px) { .facil-card { padding: 40px; } }
    @media (min-width: 1024px) { .facil-card { padding: 48px; } }

    .facil-card h2 { font-size: clamp(26px, 2.5vw, 44px); color: var(--creme); font-weight: 400; margin-bottom: 24px; line-height: 1.15; }
    .facil-card > p { font-size: 16px; line-height: 1.7; color: var(--creme); margin-bottom: 24px; }

    .facil-list { list-style: none; }
    .facil-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-block: 8px;
      font-size: 16px;
      color: var(--creme);
    }
    .facil-list li:not(:last-child) { border-bottom: 1px solid rgba(251,244,235,0.2); }
    .facil-list li .dash { color: var(--mint); }
    .facil-card .btn-secondary { margin-top: 32px; align-self: flex-start; }

    .facil-img {
      overflow: hidden;
      border-radius: var(--radius-card);
      min-height: 420px;
      order: -1;
    }
    @media (min-width: 768px) { .facil-img { order: 0; min-height: 520px; } }
    @media (min-width: 1024px) { .facil-img { min-height: 580px; } }
    .facil-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ════════════════════════════════════════════════════════
       GALERIJ
    ════════════════════════════════════════════════════════ */
    .gallery-scroller {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding-bottom: 8px;
      scrollbar-width: none;
    }
    .gallery-scroller::-webkit-scrollbar { display: none; }
    @media (min-width: 768px) { .gallery-scroller { gap: 24px; } }

    .gallery-item {
      scroll-snap-align: start;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: var(--radius-card);
      max-width: 78%;
    }
    @media (min-width: 480px) { .gallery-item { max-width: 60%; } }
    @media (min-width: 768px) { .gallery-item { max-width: 42%; } }
    @media (min-width: 1024px) { .gallery-item { max-width: 32%; } }

    .gallery-item img { display: block; height: auto; max-height: 280px; width: auto; max-width: 100%; }
    @media (min-width: 768px) { .gallery-item img { max-height: 340px; } }
    @media (min-width: 1024px) { .gallery-item img { max-height: 380px; } }

    .gallery-wrap { position: relative; margin-top: 56px; }

    .gallery-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--blauw);
      color: var(--creme);
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      transition: background 0.2s;
    }
    @media (min-width: 768px) { .gallery-btn { display: flex; } }
    .gallery-btn:hover { background: var(--terracotta); }
    .gallery-btn-prev { left: 8px; }
    .gallery-btn-next { right: 8px; }

    /* ════════════════════════════════════════════════════════
       CONTACT
    ════════════════════════════════════════════════════════ */
    #contact { padding-block: 56px; padding-inline: 20px; }
    @media (min-width: 768px) { #contact { padding-block: 80px; padding-inline: 40px; } }
    @media (min-width: 1024px) { #contact { padding-block: 100px; } }

    .contact-inner { max-width: var(--max-w); margin-inline: auto; }
    .contact-inner h2 { font-size: clamp(26px, 3vw, 44px); color: var(--blauw); font-weight: 400; margin-top: 8px; }
    .contact-inner > p { margin-top: 16px; max-width: 640px; font-size: 16px; color: var(--blauw); }

    .contact-grid {
      margin-top: 48px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
    }
    @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; margin-top: 64px; } }

    /* Form */
    .cf-label {
      display: block;
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 500;
      font-size: 13px;
      color: var(--blauw);
      margin-bottom: 8px;
    }

    .cf-input {
      width: 100%;
      border: 1px solid rgba(10,18,56,0.10);
      border-radius: 12px;
      background: #fff;
      padding: 12px 20px;
      font-size: 16px;
      font-family: var(--font-body);
      color: var(--blauw);
      transition: border-color 0.2s;
      outline: none;
    }
    .cf-input::placeholder { color: rgba(10,18,56,0.4); }
    .cf-input:focus { border-color: var(--terracotta); }
    .cf-input.error { border-color: #CC0000; }
    .cf-textarea { resize: none; }

    .cf-error { margin-top: 4px; font-size: 13px; color: #CC0000; }
    .cf-field { margin-bottom: 24px; }

    .cf-check-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
    .cf-check-row input[type="checkbox"] { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blauw); flex-shrink: 0; }
    .cf-check-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
    .cf-check-text a { text-decoration: underline; color: var(--blauw); }

    .cf-submit {
      margin-top: 24px;
      background: var(--blauw);
      color: var(--creme);
      border-radius: 4px;
      padding: 12px 28px;
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font-body);
      transition: filter 0.2s;
    }
    .cf-submit:hover { filter: brightness(1.1); }

    .cf-legal { margin-top: 16px; font-size: 12px; font-style: italic; color: var(--muted); }

    .cf-success {
      background: var(--salmon);
      border-radius: var(--radius-card);
      padding: 32px;
      color: var(--blauw);
      font-size: 16px;
      line-height: 1.5;
      display: none;
    }
    .cf-success a { color: var(--terracotta); }
    .cf-success a:hover { text-decoration: underline; }

    /* Decoratieve bogen (desktop) */
    .contact-deco {
      display: none;
      height: 420px;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    @media (min-width: 768px) { .contact-deco { display: flex; } }
    .contact-deco-arch {
      height: 100%;
      aspect-ratio: 1/2;
      background: var(--salmon);
      border-radius: 999px 999px 0 0;
    }

    /* ════════════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════════════ */
    footer {
      background: var(--blauw);
      color: var(--creme);
      padding-block: 40px;
      padding-inline: 20px;
    }
    @media (min-width: 768px) { footer { padding-block: 48px; padding-inline: 40px; } }
    @media (min-width: 1024px) { footer { padding-block: 60px; } }

    .footer-inner {
      max-width: var(--max-w);
      margin-inline: auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      text-align: center;
    }
    @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); text-align: left; } }

    .footer-logo-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    @media (min-width: 768px) { .footer-logo-col { align-items: flex-start; } }

    .footer-logo { height: 105px; width: auto; filter: brightness(0) invert(1); }
    .footer-copyright { font-size: 12px; opacity: 0.6; }

    .footer-col .eyebrow { opacity: 0.7; margin-bottom: 12px; display: block; }
    .footer-col { font-size: 14px; opacity: 0.9; line-height: 1.7; }
    .footer-col strong { font-weight: 600; }
    .footer-col a:hover { text-decoration: underline; }

    .footer-divider {
      margin-top: 48px;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 24px;
      text-align: center;
      font-size: 12px;
      opacity: 0.6;
    }
  

/* WordPress / block refinements */
body.admin-bar #nav{top:32px}.wivina-main{overflow:hidden}.wp-block-button__link{border-radius:999px!important}.block-editor-block-list__layout .section,.editor-styles-wrapper .section{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.editor-styles-wrapper{background:var(--creme);color:var(--blauw);font-family:var(--font-body)}.editor-styles-wrapper .wp-block{max-width:none}.editor-styles-wrapper .reveal{opacity:1}.editor-styles-wrapper .hero-card h1,.editor-styles-wrapper h2{font-family:var(--font-display);font-weight:300}.editor-styles-wrapper .hero-card p,.editor-styles-wrapper p{font-family:var(--font-body)}
.wivina-form-slot form{max-width:100%}.wivina-contact-shortcode{margin-top:0}.wivina-innerblocks{display:contents}.wivina-native-button{margin-top:24px}.section .wp-block-buttons{justify-content:center}.wivina-footer-edit-note{display:none}


/* Update 1.0.1 — improved Gutenberg editing parity. */
.editor-styles-wrapper .troef-card h3,.editor-styles-wrapper .troef-card p,.editor-styles-wrapper .formule-card h3,.editor-styles-wrapper .formule-card p{cursor:text}.editor-styles-wrapper .wp-block-buttons{margin-top:24px}.btn-group .wp-block-buttons{margin-top:0}.btn-group .wp-block-button__link,.troeven-footer .wp-block-button__link,.aanbod-mobile-cta .wp-block-button__link{background:var(--blauw)!important;color:var(--creme)!important;border-radius:999px!important;padding:12px 32px!important}.watzegt-text .wp-block-button__link{background:var(--terracotta)!important;color:var(--creme)!important}.intro-text .wp-block-button__link{background:var(--blauw)!important;color:var(--creme)!important}.facil-card .wp-block-button__link,.formule-card .wp-block-button__link{background:var(--mint)!important;color:var(--blauw)!important}.editor-styles-wrapper .wivina-native-note{display:none}


/* Update 1.0.2 — native buttons, alignments, palettes, contact deco. */
.has-donkerblauw-background-color{background-color:var(--blauw)!important}.has-donkerblauw-color{color:var(--blauw)!important}.has-roestkleur-background-color{background-color:var(--terracotta)!important}.has-roestkleur-color{color:var(--terracotta)!important}.has-lichtblauw-background-color{background-color:var(--mint)!important}.has-lichtblauw-color{color:var(--mint)!important}.has-creme-background-color{background-color:var(--creme)!important}.has-creme-color{color:var(--creme)!important}
.wp-block-buttons{display:flex!important}.wp-block-buttons.is-content-justification-left{justify-content:flex-start!important}.wp-block-buttons.is-content-justification-center{justify-content:center!important}.wp-block-buttons.is-content-justification-right{justify-content:flex-end!important}.section .wp-block-buttons{justify-content:inherit}.wp-block-button__link{border-radius:999px!important;padding:12px 32px!important;font-size:16px!important;font-weight:500!important;text-decoration:none!important}.wp-block-button__link.has-donkerblauw-background-color{color:var(--creme)!important}.wp-block-button__link.has-roestkleur-background-color{color:var(--creme)!important}.wp-block-button__link.has-lichtblauw-background-color{color:var(--blauw)!important}
.formule-card .wp-block-buttons,.facil-card .wp-block-buttons,.bereik-info .wp-block-buttons{margin-top:32px}.formule-card .wp-block-button__link,.facil-card .wp-block-button__link{background:var(--mint);color:var(--blauw)}.bereik-info .wp-block-button__link,.hero-card .wp-block-button__link,.aanbod-mobile-cta .wp-block-button__link,.aanbod-desktop-panel .wp-block-button__link{background:var(--blauw);color:var(--creme)}.watzegt-text .wp-block-button__link{background:var(--terracotta);color:var(--creme)}.intro-text .wp-block-button__link{background:var(--blauw);color:var(--creme)}
.contact-deco{gap:28px}.contact-deco-arch{width:230px!important;height:460px!important;aspect-ratio:auto!important;background:var(--salmon)!important}.contact-deco-arch:first-child{border-radius:230px 0 0 230px!important}.contact-deco-arch:last-child{border-radius:0 230px 230px 0!important}@media(max-width:900px){.contact-deco-arch{width:150px!important;height:300px!important}.contact-deco-arch:first-child{border-radius:150px 0 0 150px!important}.contact-deco-arch:last-child{border-radius:0 150px 150px 0!important}}
.editor-styles-wrapper .bereik-list{margin:0 0 24px!important}.editor-styles-wrapper .bereik-list li{display:flex!important;justify-content:space-between!important}.editor-styles-wrapper .facil-list{padding-left:0!important}.editor-styles-wrapper .facil-list li{list-style:none!important}


/* Update 1.0.3 — button color fixes, formules grid, aanbod editor, facilities/list polish. */
/* Color classes must win over contextual button defaults. */
.wp-block-button__link.has-donkerblauw-background-color{background-color:var(--blauw)!important;color:var(--creme)!important;}
.wp-block-button__link.has-roestkleur-background-color{background-color:var(--terracotta)!important;color:var(--creme)!important;}
.wp-block-button__link.has-lichtblauw-background-color{background-color:var(--mint)!important;color:var(--blauw)!important;}
.wp-block-button__link.has-creme-background-color{background-color:var(--creme)!important;color:var(--blauw)!important;}
/* Respect native button alignment. */
.wp-block-buttons.is-content-justification-left{justify-content:flex-start!important;}
.wp-block-buttons.is-content-justification-center{justify-content:center!important;}
.wp-block-buttons.is-content-justification-right{justify-content:flex-end!important;}
/* Formules: native group must still behave as two cards. */
.formules-grid,.wp-block-group.formules-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;}
@media(min-width:768px){.formules-grid,.wp-block-group.formules-grid{grid-template-columns:1fr 1fr!important;gap:24px!important;}}
.formules-grid>.wp-block-group,.wp-block-group.formule-card{background:var(--blauw)!important;border-radius:20px!important;padding:40px!important;text-align:center!important;color:var(--creme)!important;display:flex!important;flex-direction:column!important;align-items:center!important;}
.formules-grid>.wp-block-group h3,.wp-block-group.formule-card h3{font-size:clamp(22px,2vw,28px)!important;font-weight:600!important;color:var(--creme)!important;}
.formules-grid>.wp-block-group p,.wp-block-group.formule-card p{margin-top:16px!important;font-size:16px!important;line-height:1.7!important;color:var(--creme)!important;}
/* Facilities native list between text and button. */
.facil-card .wp-block-list,.facil-card ul{list-style:none!important;margin:0 0 0!important;padding:0!important;width:100%!important;}
.facil-card .wp-block-list li,.facil-card ul li{display:flex!important;align-items:center!important;gap:12px!important;padding-block:8px!important;font-size:16px!important;color:var(--creme)!important;border-bottom:1px solid rgba(251,244,235,.2)!important;}
.facil-card .wp-block-list li::before,.facil-card ul li::before{content:'–';color:var(--mint);display:inline-block;}
.facil-card .wp-block-list li:last-child,.facil-card ul li:last-child{border-bottom:0!important;}
.facil-card .wp-block-buttons{margin-top:32px!important;}
/* Contact half-circles: second one is mirrored horizontally. */
.contact-deco-arch{border-radius:230px 0 0 230px!important;}
.contact-deco-arch:nth-child(2){transform:scaleX(-1)!important;}
/* Editor: make aanbod desktop composition visible too when present. */
.editor-styles-wrapper .aanbod-desktop{display:block!important;}

/* Update 1.0.4 — native grid/editor parity, gallery lightbox and media-import support. */
/* Native Group wrapper produced by Gutenberg: keep formula cards side-by-side and expandable. */
.wp-block-group.formules-grid > .wp-block-group__inner-container,
.editor-styles-wrapper .wp-block-group.formules-grid > .wp-block-group__inner-container{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  width:100%!important;
}
@media(min-width:768px){
  .wp-block-group.formules-grid > .wp-block-group__inner-container,
  .editor-styles-wrapper .wp-block-group.formules-grid > .wp-block-group__inner-container{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
  }
}
.wp-block-group.formules-grid{display:block!important;}
.wp-block-group.formules-grid > .wp-block-group__inner-container > .wp-block-group,
.editor-styles-wrapper .wp-block-group.formules-grid > .wp-block-group__inner-container > .wp-block-group{
  background:var(--blauw)!important;
  border-radius:20px!important;
  padding:40px!important;
  text-align:center!important;
  color:var(--creme)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
/* Aanbod editor desktop composition must look like the front-end. */
.editor-styles-wrapper .aanbod-editor-desktop{display:block!important;min-height:680px!important;}
.editor-styles-wrapper .aanbod-mobile{display:none!important;}
.editor-styles-wrapper .aanbod-desktop-panel [contenteditable],
.editor-styles-wrapper .aanbod-desktop-bubble [contenteditable]{cursor:text;}
.editor-styles-wrapper .aanbod-desktop-panel .block-editor-inner-blocks{margin-top:20px;}
.editor-styles-wrapper .aanbod-desktop-panel .block-editor-block-list__layout{display:flex;justify-content:flex-end;}
/* Gallery: larger arrows and lightbox. */
.gallery-btn{font-size:38px!important;line-height:1!important;font-family:var(--font-display);}
.wivina-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(10,18,56,.88);display:none;align-items:center;justify-content:center;padding:28px;}
.wivina-lightbox.open{display:flex;}
.wivina-lightbox-img{max-width:min(1200px,92vw);max-height:86vh;border-radius:16px;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.35);}
.wivina-lightbox-close,.wivina-lightbox-btn{position:absolute;border:0;background:var(--creme);color:var(--blauw);border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.wivina-lightbox-close{top:22px;right:22px;width:46px;height:46px;font-size:34px;line-height:1;}
.wivina-lightbox-btn{top:50%;transform:translateY(-50%);width:58px;height:58px;font-size:54px;font-family:var(--font-display);line-height:1;}
.wivina-lightbox-prev{left:24px;}.wivina-lightbox-next{right:24px;}
@media(max-width:700px){.wivina-lightbox-btn{width:44px;height:44px;font-size:40px}.wivina-lightbox-prev{left:10px}.wivina-lightbox-next{right:10px}.wivina-lightbox-close{top:10px;right:10px}}
/* Color classes must win, also inside contextual dark cards. */
.wp-block-button__link.has-donkerblauw-background-color{background-color:var(--blauw)!important;color:var(--creme)!important;}
.wp-block-button__link.has-roestkleur-background-color{background-color:var(--terracotta)!important;color:var(--creme)!important;}
.wp-block-button__link.has-lichtblauw-background-color{background-color:var(--mint)!important;color:var(--blauw)!important;}
.wp-block-button__link.has-creme-background-color{background-color:var(--creme)!important;color:var(--blauw)!important;}

/* Update 1.0.5 — gallery cover sizing and per-section padding controls. */
.gallery-scroller{align-items:stretch!important;}
.gallery-item{width:min(390px,32vw)!important;height:260px!important;max-width:none!important;}
.gallery-item img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;}
@media(min-width:768px){.gallery-item{height:300px!important;}}
@media(min-width:1024px){.gallery-item{height:320px!important;}}
@media(max-width:767px){.gallery-item{width:78vw!important;height:240px!important;}}
.wivina-section--spacing-both{padding-top:var(--section-pad,80px)!important;padding-bottom:var(--section-pad,80px)!important;}
.wivina-section--spacing-top{padding-top:var(--section-pad,80px)!important;padding-bottom:0!important;}
.wivina-section--spacing-bottom{padding-top:0!important;padding-bottom:var(--section-pad,80px)!important;}
.wivina-section--spacing-none{padding-top:0!important;padding-bottom:0!important;}
@media(min-width:1024px){.wivina-section--spacing-both{padding-top:100px!important;padding-bottom:100px!important}.wivina-section--spacing-top{padding-top:100px!important}.wivina-section--spacing-bottom{padding-bottom:100px!important}}
.editor-styles-wrapper .wivina-section--spacing-both{padding-top:80px!important;padding-bottom:80px!important;}
.editor-styles-wrapper .wivina-section--spacing-top{padding-top:80px!important;padding-bottom:0!important;}
.editor-styles-wrapper .wivina-section--spacing-bottom{padding-top:0!important;padding-bottom:80px!important;}
.editor-styles-wrapper .wivina-section--spacing-none{padding-top:0!important;padding-bottom:0!important;}

/* Update 1.0.6 — gallery arrow icons. */
.gallery-btn{background:var(--blauw)!important;color:var(--creme)!important;transition:background .2s ease,color .2s ease!important;}
.gallery-btn:hover,.gallery-btn:focus-visible{background:var(--terracotta)!important;color:var(--creme)!important;}
.gallery-btn svg{width:24px!important;height:24px!important;display:block!important;stroke:currentColor!important;}
.gallery-btn-prev svg{transform:scaleX(-1)!important;}

/* Update 1.0.7 — fixed 3-up gallery and SVG lightbox arrows. */
@media(min-width:1024px){
  .gallery-scroller{display:flex!important;gap:24px!important;overflow:hidden!important;}
  .gallery-item{flex:0 0 calc((100% - 48px)/3)!important;width:calc((100% - 48px)/3)!important;max-width:calc((100% - 48px)/3)!important;height:320px!important;}
}
.gallery-item img{width:100%!important;height:100%!important;object-fit:cover!important;}
.wivina-lightbox-btn{font-size:0!important;background:var(--blauw)!important;color:var(--creme)!important;transition:background .2s ease!important;}
.wivina-lightbox-btn:hover,.wivina-lightbox-btn:focus-visible{background:var(--terracotta)!important;color:var(--creme)!important;}
.wivina-lightbox-btn svg{width:28px!important;height:28px!important;stroke:currentColor!important;display:block!important;}
.wivina-lightbox-prev svg{transform:scaleX(-1)!important;}

/* Update 1.0.8 — aanbod desktop composition closer to design. */
@media(min-width:1024px){
  .aanbod-desktop{height:560px!important;margin-top:70px!important;max-width:1280px!important;}
  .aanbod-desktop-img{top:auto!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:44%!important;height:520px!important;max-height:520px!important;z-index:10!important;}
  .aanbod-desktop-img img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
  .aanbod-desktop-bubble{left:0!important;bottom:0!important;width:30%!important;aspect-ratio:1/1!important;z-index:20!important;padding:44px!important;justify-content:flex-end!important;border-top-right-radius:100%!important;}
  .aanbod-desktop-bubble .size{font-size:clamp(36px,3vw,52px)!important;}
  .aanbod-desktop-panel{right:0!important;bottom:0!important;width:30%!important;height:520px!important;max-height:520px!important;border-top-left-radius:420px!important;padding:44px!important;padding-top:170px!important;text-align:center!important;z-index:20!important;}
  .aanbod-desktop-panel .panel-footer{justify-content:center!important;margin-top:28px!important;}
  .aanbod-desktop-panel .panel-label{font-size:15px!important;letter-spacing:.08em!important;opacity:.74!important;}
  .aanbod-desktop-panel .panel-size{font-size:26px!important;line-height:1.1!important;}
  .aanbod-desktop-panel .panel-detail{font-size:18px!important;}
}
@media(min-width:1024px) and (max-width:1180px){
  .aanbod-desktop-bubble{width:28%!important;}
  .aanbod-desktop-img{width:46%!important;}
  .aanbod-desktop-panel{width:32%!important;}
}

/* Update 1.0.19 — aanbod composition refinement. */
@media(min-width:1024px){
  .aanbod-desktop-bubble{bottom:110px!important;left:0!important;}
  .aanbod-desktop-img.arch-mask{border-radius:50% 50% 0 0 / 42% 42% 0 0!important;}
  .aanbod-desktop-img{height:520px!important;}
  .aanbod-desktop-panel{text-align:right!important;padding-right:56px!important;}
  .aanbod-desktop-panel .panel-footer{justify-content:flex-end!important;}
  .aanbod-desktop-panel .divider{margin-left:auto!important;width:86%!important;}
}
@media(min-width:1024px) and (max-width:1180px){
  .aanbod-desktop-bubble{bottom:90px!important;}
}

/* Update 1.0.20 — outlined secondary buttons in hero and troeven. */
.hero-card .btn-group .wp-block-buttons{display:flex!important;flex-direction:column;align-items:flex-start;gap:12px;width:auto}
@media (min-width: 480px){.hero-card .btn-group .wp-block-buttons{flex-direction:row;flex-wrap:wrap;align-items:center}}
.troeven-footer .wp-block-buttons{justify-content:center!important;gap:12px;flex-wrap:wrap}
.btn-outline,
.hero-card .wp-block-button.is-style-outline .wp-block-button__link,
.btn-group .wp-block-button.is-style-outline .wp-block-button__link,
.troeven-footer .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--blauw)!important;
  border:1.5px solid var(--blauw)!important;
  box-shadow:none!important;
}
.btn-outline:hover,
.hero-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-group .wp-block-button.is-style-outline .wp-block-button__link:hover,
.troeven-footer .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--blauw)!important;
  background-color:var(--blauw)!important;
  color:var(--creme)!important;
}