/*
Theme Name:   Mijnkerk Child
Template:     mijnkerk
Version:      1.0
*/

/* ─────────────────────────────────────────
   ROOT
───────────────────────────────────────── */
:root {
  --hoofdkleur-3: #ffffff;
  --hoofdkleur-4: #666;

  --bolsward: #0366a7;
  --nicolaas: #f6b631;
  --martinus: #a3202a;
  --workum: #78c299;
  --bolsward0:  linear-gradient(135deg, #0366A7 0%, rgba(3, 101, 167, 0.7) 100%);
  --nicolaas0:  linear-gradient(135deg, #F6B631 0%, rgba(246, 184, 49, 0.7) 100%);
  --martinus0:  linear-gradient(135deg, #A3202A 0%, rgba(163, 32, 42, 0.7) 100%);
  --workum0:  linear-gradient(135deg, #78C299 0%, rgba(120, 194, 153, 0.7) 100%);

  /* Spacing-schaal (stappen van 4px) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  /* Border-radius-schaal */
  --radius-sm: 6px;
  --radius-md: var(--borderradius);
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Randen */
  --border-subtle: 1px solid rgba(58, 48, 40, 0.12);
  --border-subtle-dark: 1px solid rgba(255, 255, 255, 0.14);

  /* Schaduwen */
  --shadow-sm: 0px 2px 8px rgba(49, 39, 31, 0.07);
  --shadow-md: var(--box-shadow);
  --shadow-lg: 0px 16px 40px rgba(49, 39, 31, 0.16);

  /* Contentbreedtes */
  --content-narrow: 1000px;
  --content-normal: 1200px;
  --content-wide: 1400px;

  /* Transities */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* Focus-ring */
  --focus-ring-color: var(--hoofdkleur-1);
  --focus-ring: 2px solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
}

/* ─────────────────────────────────────────
   ALGEMEEN
───────────────────────────────────────── */
.button:not(.button-alt) {
  border-radius: 14px;
  background: linear-gradient(90deg, #f0821e 0%, #f6b631 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-transform: none;
}

.button.button-alt {
    position: relative;
    border-radius: 8px;
    padding: 16px;
    background: transparent;
    font-weight: 700;
    font-size: 16px;
}

.button.button-alt::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px; /* = border dikte */
    border-radius: 8px;
    background: linear-gradient(90deg, #f0821e 0%, #f6b631 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

i.fa-light.fa-fire.fa-xl::before {
  background: linear-gradient(90deg, #f0821e 0%, #f6b631 100%) ;
  -webkit-background-clip: text ;
  -webkit-text-fill-color: transparent ;
  display: inline-block ;
  line-height: 1 ;
}

body .boventitel, body h6 {
  color: var(--workum);
  font-family: Inter;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.content a:not(.button),
.tekst-inner a:not(.button) {
  text-decoration: underline;
  text-decoration-color: rgba(240, 130, 30, 0.35);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.content a:not(.button):hover,
.tekst-inner a:not(.button):hover {
  color: var(--hoofdkleur-2);
  text-decoration-color: var(--hoofdkleur-2);
}

.content img:not(.featured-image) {
  border-radius: var(--radius-md);
}

.section-inner-wrap {
  padding-top: var(--sp-80);
  padding-bottom: var(--sp-80);
}
@media (max-width: 991px) {
  .section-inner-wrap {
    padding-top: var(--sp-64);
    padding-bottom: var(--sp-64);
  }
}
@media (max-width: 767px) {
  .section-inner-wrap {
    padding-top: var(--sp-48);
    padding-bottom: var(--sp-48);
  }
}

input:not(.gform_button):not(.button):not([type="checkbox"]):not([type="submit"]):not([type="radio"]),
textarea,
select {
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────
   HEADER & NAVIGATIE
───────────────────────────────────────── */
.header-row {
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(8, 2, 0, 0.14) 7.14%, rgba(39, 16, 1, 0.29) 14.29%, rgba(74, 36, 3, 0.43) 21.43%, rgba(112, 58, 8, 0.57) 28.57%, rgba(153, 81, 15, 0.71) 35.71%, rgba(195, 105, 22, 0.86) 42.86%, #F0821E 50%, rgba(195, 105, 22, 0.86) 57.14%, rgba(153, 81, 15, 0.71) 64.29%, rgba(112, 58, 8, 0.57) 71.43%, rgba(74, 36, 3, 0.43) 78.57%, rgba(39, 16, 1, 0.29) 85.71%, rgba(8, 2, 0, 0.14) 92.86%, rgba(0, 0, 0, 0.00) 100%) 1;
}

#header2 .header-row {
  background-color: var(--achtergrondkleur-1);
}

#hoofdmenu-list .menu-item > a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

#hoofdmenu-list.menu-list .menu-item .sub-menu {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

#hoofdmenu-list .menu-item a {
  transition: color var(--transition-fast);
}

header .zoekformulier-wrapper {
  border-radius: var(--radius-lg);
}

@media (max-width: 991px) {
  #hoofdmenu-list.menu-list {
    padding-top: var(--sp-24);
    padding-bottom: var(--sp-8);
  }
}

/* Vervang het huisje-icoon van het Home menu-item */
header.huisje #hoofdmenu-list-list > li:first-child > a:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%2331271f' d='M344 32L344 80L400 80L400 128L344 128L344 170.9L469 251.8L480 258.9L480 306.2L564.1 355.3L576 362.2L576 576L64 576L64 362.2L75.9 355.3L160 306.2L160 258.9L171 251.8L296 170.9L296 128L240 128L240 80L296 80L296 32L344 32zM208 320L208 528L256 528L256 384L384 384L384 528L432 528L432 285.1L320 212.6L208 285.1L208 320zM480 528L528 528L528 389.8L480 361.8L480 528zM160 361.8L112 389.8L112 528L160 528L160 361.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Vlaggetjes in het menu */
#hoofdmenu-list.menu-list .menu-item-6305 img {   display: block;   width: 30px;   height: 20px;   margin-top: 4px; }
header.vertikaal_submenu #hoofdmenu-list.menu-list  .menu-item-6305 .sub-menu img {   width: 30px;   height: 20px; }
header.vertikaal_submenu #hoofdmenu-list.menu-list  .menu-item-6305 .sub-menu { min-width: 50px; }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
#slider-home h1 {
  color: var(--nicolaas);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 33554400px;
  background: rgba(58, 48, 40, 0.8);
}

.hero-tekst h2 {
  color: #fff;
}

#slider-home h2 {
  font-size: 68px;
  font-weight: 700;
  line-height: 90px;
}

#slider-home h2 em {
  color: var(--nicolaas);
  font-style: italic;
}

#slider-home .section-inner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.hero .boventitel,
.page-breaker .boventitel {
  margin-bottom: var(--sp-12);
}
.hero .hero-tekst {
  margin-top: var(--sp-16);
}

@media (max-width: 767px) {
  #slider-home h2 {
    font-size: 34px;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #slider-home h2 {
    font-size: 48px;
    line-height: 1.2;
  }
}

/* ─────────────────────────────────────────
   TEKST & AFBEELDING
───────────────────────────────────────── */
section.tekst-afbeelding:not(.hero) .tekst-inner {
  background-color: transparent;
}

section.tekst-afbeelding .collumns-2.boven {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  body.page-id-5989 .tekst-afbeelding.standaardkleur .tekst-inner,
  body.page-id-6168 .tekst-afbeelding.standaardkleur .tekst-inner,
  body.page-id-6171 .tekst-afbeelding.standaardkleur .tekst-inner,
  body.page-id-6174 .tekst-afbeelding.standaardkleur .tekst-inner,
  body.page-id-9 .tekst-afbeelding.standaardkleur .tekst-inner {
    padding: var(--sp-24);
  }
}

/* ─────────────────────────────────────────
   VERWIJZINGEN
───────────────────────────────────────── */
section.verwijzingen a {
  padding: 20px;
}

.verwijzing-columns a {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  border-top: 4px solid;
}

.verwijzing-columns a:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
}

/* Border- en icoonkleur per kaart */
.verwijzing-columns a:nth-child(1) .verwijzing-icon {
  background: var(--bolsward0);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.verwijzing-columns a:nth-child(2) .verwijzing-icon {
  background: var(--martinus0);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.verwijzing-columns a:nth-child(3) .verwijzing-icon {
  background: var(--nicolaas0);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.verwijzing-columns a:nth-child(4) .verwijzing-icon {
  background: var(--workum0);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.verwijzing-columns a:nth-child(1) .button {
  color: var(--bolsward);
}
.verwijzing-columns a:nth-child(2) .button {
  color: var(--martinus);
}
.verwijzing-columns a:nth-child(3) .button {
  color: var(--nicolaas);
}
.verwijzing-columns a:nth-child(4) .button {
  color: var(--workum);
}

/* Icoon */
.verwijzing-columns .verwijzing-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.verwijzing-columns .verwijzing-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.verwijzing-columns .verwijzing-icon i::before {
  font-size: 1.8rem;
  color: #ffffff;
  line-height: 1;
}

/* Knop → tekst met pijl */
.verwijzing-columns .button {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
}

.verwijzing-columns .button::after {
  content: "→";
}

/* Meer informatie link simuleren */
.verwijzingen .verwijzing-columns a .tekst-container::after {
  content: "Meer informatie →";
  display: block;
  margin-top: 12px;
  font-weight: 500;
  font-size: 0.95rem;
}

.verwijzing-columns a:nth-child(1) {
  border-top-color: var(--bolsward);
}
.verwijzing-columns a:nth-child(2) {
  border-top-color: var(--martinus);
}
.verwijzing-columns a:nth-child(3) {
  border-top-color: var(--nicolaas);
}
.verwijzing-columns a:nth-child(4) {
  border-top-color: var(--workum);
}

.verwijzingen .verwijzing-columns a:nth-child(1) .tekst-container h4 {
  color: var(--bolsward);
} /* Franciscus - blauw */
.verwijzingen .verwijzing-columns a:nth-child(2) .tekst-container h4 {
  color: var(--martinus);
} /* Martinus - oranje */
.verwijzingen .verwijzing-columns a:nth-child(3) .tekst-container h4 {
  color: var(--nicolaas);
} /* Nicolaas - rood */
.verwijzingen .verwijzing-columns a:nth-child(4) .tekst-container h4 {
  color: var(--workum);
} /* Werenfridus - groen */

.verwijzingen .verwijzing-columns a:nth-child(1) .tekst-container::after {
  color: var(--bolsward);
}
.verwijzingen .verwijzing-columns a:nth-child(2) .tekst-container::after {
  color: var(--martinus);
}
.verwijzingen .verwijzing-columns a:nth-child(3) .tekst-container::after {
  color: var(--nicolaas);
}
.verwijzingen .verwijzing-columns a:nth-child(4) .tekst-container::after {
  color: var(--workum);
}

/* "Wie zijn wij" (home) */
#wie-zijn-wij .section-inner-wrap {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

#wie-zijn-wij .verwijzing-columns a:nth-child(1) {
  border-top: 0;
  border-left: 5px solid var(--bolsward);
}
#wie-zijn-wij .verwijzing-columns a:nth-child(2) {
    border-top: 0;
  border-left: 5px solid var(--nicolaas);
}
#wie-zijn-wij .verwijzing-columns a:nth-child(3) {
    border-top: 0;
  border-left: 5px solid var(--martinus);
}
#wie-zijn-wij .verwijzing-columns a:nth-child(4) {
    border-top: 0;
  border-left: 5px solid var(--workum);
}

#wie-zijn-wij .verwijzing-columns h4 {
  font-size: 24px;
  text-align: left;
}

#wie-zijn-wij .verwijzing-tekst {
  font-size: 16px;
  text-align: left;
}

#wie-zijn-wij .verwijzing-columns {
      gap: 12px;
}

#wie-zijn-wij .verwijzing-columns {
  justify-content: center;
}

/* "Wij zijn de parochie van" (home) */
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(1) {
  border-top-color: var(--martinus);
}
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(2) {
  border-top-color: var(--nicolaas);
}
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(3) {
  border-top-color: var(--bolsward);
}

#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(1) .tekst-container h4 {
  color: var(--martinus);
} /* Franciscus - blauw */
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(2) .tekst-container h4 {
  color: var(--nicolaas);
} /* Martinus - oranje */
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(3) .tekst-container h4 {
  color: var(--bolsward);
}

#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(1) .tekst-container::after {
  color: var(--martinus);
}
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(2) .tekst-container::after {
  color: var(--nicolaas);
}
#wij-zijn-de-parochie-van .verwijzing-columns a:nth-child(3) .tekst-container::after {
  color: var(--bolsward);
}

/* Blok 65a001d37b022 */
#blok_65a001d37b022 .verwijzing-columns a:nth-child(1) {
  border-bottom: 4px solid var(--bolsward);
  border-top: 0;
}
#blok_65a001d37b022 .verwijzing-columns a:nth-child(2) {
  border-bottom: 4px solid var(--martinus);
  border-top: 0;
}
#blok_65a001d37b022 .verwijzing-columns a:nth-child(3) {
  border-bottom: 4px solid var(--nicolaas);
  border-top: 0;
}
#blok_65a001d37b022 .verwijzing-columns a:nth-child(4) {
  border-bottom: 4px solid var(--workum);
  border-top: 0;
}

/* ─────────────────────────────────────────
   HOME — OVERIGE BLOKKEN
───────────────────────────────────────── */
#blok_6a19569eec522 .div-block , #blok_6a19569eec522 h3{
  background-color: var(--achtergrondnicolaas);
  border-radius: 40px;
  color: var(--achtergrondmartinus);
  text-align: center;
  padding: 8px;
}

#blok_6a19569eec522 .div-block .tekst-inner {
  padding: 40px;
  align-items: center;
}

/* ─────────────────────────────────────────
   LEZEN & INFORMEREN — 2 kaarten horizontaal
───────────────────────────────────────── */
#blok_69f9f53616a44 img {
  padding: 0px;
  background: var(--achtergrondnicolaas);
  object-fit: cover;
}

#blok_69f9f536174d0 .div-block {
  align-items: center;
}

#blok_69f9f536174d0 {
  background: var(
    --Linear,
    linear-gradient(
      135deg,
      #f5efe3 0%,
      #f6f1e6 12.5%,
      #f7f3ea 25%,
      #f9f5ed 37.5%,
      #faf7f1 50%,
      #fbf9f4 62.5%,
      #fcfbf8 75%,
      #fefdfb 87.5%,
      #fff 100%
    )
  );
}

/* ─────────────────────────────────────────
   CAROUSEL — knop naar onderen
───────────────────────────────────────── */
.carousel .section-inner-wrap {
  display: flex;
  flex-direction: column;
}

/* Verberg de bovenste knop (div-block-space-between) */
.carousel .div-block-space-between {
  display: none;
}

/* Toon de mobiele knop voor iedereen en zet hem onderaan */
.carousel .button-mobile {
  display: inline-flex !important;
  align-self: center;
  margin-top: 24px;
  order: 99;
}

/* ─────────────────────────────────────────
   OVERZICHT — KAART BASIS (gedeeld door team/viering/gebed)
───────────────────────────────────────── */
section.overzicht-gebed a:hover:not(.button-disabled:hover) {
  box-shadow: none;
}

.overzicht-gebed .overzicht-cell, .overzicht-cell {
  background: var(----achtergrondkleur-1);
  box-shadow: none;

  backdrop-filter: blur(6px);
  border-radius: 17px;
  text-align: left;
  transition: all 0.5s;
  padding-bottom: 20px;
  border: solid 1px var(--achtergrondkleur-1);
}

.overzicht-gebed .div-block.text-block {
  background: var(----achtergrondkleur-1);
}

.overzicht-gebed .overzicht-cell:hover, .overzicht-cell:hover {
  box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.05);
}

/* ─────────────────────────────────────────
   VIERINGEN — 2×2 GRID
───────────────────────────────────────── */
.overzicht-inner.naast {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.overzicht-inner.naast .overzicht-cell {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #eeeeee;
  overflow: hidden;
  width: 100% !important;
  float: none !important;
}

.overzicht-inner.naast .overzicht-cell a {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 24px !important;
  gap: 8px !important;
  text-decoration: none;
  color: inherit;
}

.overzicht-inner.naast .text-block h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.overzicht-inner.naast .post-info div {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.6;
}

.overzicht-inner.naast .post-excerpt {
  display: none !important;
}

/* Border- en datumkleur per kaart */
.overzicht-inner.naast .overzicht-cell:nth-child(1) {
  border-left: 4px solid var(--bolsward);
}
.overzicht-inner.naast .overzicht-cell:nth-child(2) {
  border-left: 4px solid var(--nicolaas);
}
.overzicht-inner.naast .overzicht-cell:nth-child(3) {
  border-left: 4px solid var(--martinus);
}
.overzicht-inner.naast .overzicht-cell:nth-child(4) {
  border-left: 4px solid var(--workum);
}

.overzicht-inner.naast .overzicht-cell:nth-child(1) .post-info div:first-child {
  color: var(--bolsward);
  font-weight: 600;
}
.overzicht-inner.naast .overzicht-cell:nth-child(2) .post-info div:first-child {
  color: var(--nicolaas);
  font-weight: 600;
}
.overzicht-inner.naast .overzicht-cell:nth-child(3) .post-info div:first-child {
  color: var(--martinus);
  font-weight: 600;
}
.overzicht-inner.naast .overzicht-cell:nth-child(4) .post-info div:first-child {
  color: var(--workum);
  font-weight: 600;
}

@media (max-width: 768px) {
  .overzicht-inner.naast {
    grid-template-columns: 1fr !important;
  }
}

.paginatie {
  margin-top: 12px;
}

/* ═══════════════════════════════════════════
   VIERINGEN PAGINA (page-id-133)
═══════════════════════════════════════════ */
body.page-id-133 {
  background-color: var(----achtergrondkleur-1);
}

.page-id-133 {
    --rooster-border: rgba(58, 48, 40, 0.12);
    --rooster-shadow: 0 8px 28px rgba(49, 39, 31, 0.08);
}

/* =========================
   ROOSTER
========================= */
.page-id-133 .viering-container {
    margin-top: 0;
}

/* Liturgische tussenkop */
.page-id-133 .viering.liturgischedag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 48px 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rooster-border);
    border-radius: 0;
    color: var(--koptekstkleur);
    font-family: "Playfair Display", serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.2;
}

.page-id-133 .viering.liturgischedag:first-child {
    margin-top: 0;
}

/* Liturgische kleur */
.page-id-133 .liturgischedag .circle {
    position: static;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin: 3px 0 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(58, 48, 40, 0.18);
}

/* =========================
   VIERINGSKAART
========================= */
.page-id-133 .viering.vieringitem {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: calc(100% - 4px);
    margin: 0 2px 16px;
    padding: 24px 28px 24px 36px;
    overflow: hidden;
    border: 1px solid var(--rooster-border);
    border-radius: calc(var(--borderradius) + 4px);
    background: var(--achtergrondkleur-3);
    box-shadow: var(--rooster-shadow);
    color: var(--tekstkleur);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

/* Gekleurde lijn links */
.page-id-133 .viering.vieringitem::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--hoofdkleur-3);
}

.page-id-133 .viering.vieringitem:hover {
    border-color: rgba(3, 102, 167, 0.25);
    box-shadow: 0 14px 38px rgba(49, 39, 31, 0.12);
    transform: translateY(-2px);
}

/* Locatiekleuren */
.page-id-133 .vieringitem.kerk17007004::before {
    background: var(--bolsward, #0366a7);
}

.page-id-133 .vieringitem.kerk38618684::before {
    background: var(--nicolaas, #f6b631);
}

.page-id-133 .vieringitem.kerk75125414::before {
    background: var(--martinus, #a3202a);
}

.page-id-133 .vieringitem.kerk68796970::before {
    background: var(--workum, #78c299);
}

/* Gegevens binnen de kaart */
.page-id-133 .vieringinfo {
    display: grid;
    grid-template-columns: minmax(120px, 0.38fr) minmax(200px, 1fr);
    gap: 7px 24px;
    width: 100%;
}

.page-id-133 .vieringinfo > div {
    display: contents;
}

.page-id-133 .vieringinfo .label {
    color: var(--koptekstkleur);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.page-id-133 .vieringinfo .gegevens {
    min-width: 0;
    color: var(--tekstkleur);
    font-size: 15px;
    line-height: 1.55;
}

/* Datum extra laten opvallen */
.page-id-133 .vieringinfo .datumdiv .gegevens {
    color: var(--koptekstkleur);
    font-weight: 700;
}

/* Tijd als compact label */
.page-id-133 .vieringinfo .tijddiv .gegevens {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--achtergrondkleur-1);
    color: var(--hoofdkleur-3);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Type viering */
.page-id-133 .vieringinfo .watdiv .gegevens {
    font-weight: 650;
}

/* Bijzonderheden */
.page-id-133 .vieringinfo .bijzonderhedendiv .gegevens {
    color: var(--hoofdkleur-1);
    font-style: italic;
}

/* Herbruikbare / generieke variant van de vieringkaart (design-tokens) */
.vieringitem {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-24);
  margin-bottom: var(--sp-16);
  transition: box-shadow var(--transition-base);
}
.vieringitem:hover {
  box-shadow: var(--shadow-md);
}
.vieringinfo .label {
  color: var(--hoofdkleur-1);
  font-weight: 600;
  margin-right: var(--sp-8);
}

/* Filterknoppen */
.buttons.overzicht-filter .button:not(.selected) {
  background: none;
  border: 2px solid var(--hoofdkleur-1);
  color: var(--hoofdkleur-1);
}

.buttons.overzicht-filter .button.selected {
  color: #fff;
}

.buttons.overzicht-filter .button.active,
.viering-buttons .button.active {
  background: var(--hoofdkleur-1);
  color: #ffffff;
  border-color: var(--hoofdkleur-1);
}
.buttons.overzicht-filter .button.active::before,
.viering-buttons .button.active::before {
  display: none;
}

.viering-buttons.buttons {
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
}

.overzicht-viering .content .overzicht-inner {
  grid-template-columns: repeat(2, 1fr);
}

.overzicht-viering  a span.post-author {
  display: none;
}

/* =========================
   TABLET EN MOBIEL
========================= */
@media (max-width: 700px) {
    .page-id-133 #blok_6a3106b150adf .tekst-inner {
        padding: 40px 0 56px;
    }

    .page-id-133 .viering-buttons {
        flex-wrap: nowrap;
        gap: 8px;
        margin-right: calc(var(--section-padding, 20px) * -1);
        margin-bottom: 32px;
        padding-right: var(--section-padding, 20px);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .page-id-133 .viering-buttons::-webkit-scrollbar {
        display: none;
    }

    .page-id-133 .viering-buttons .button {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .page-id-133 .viering.liturgischedag {
        margin-top: 40px;
        font-size: 24px;
    }

    .page-id-133 .viering.vieringitem {
        padding: 22px 20px 22px 27px;
    }

    .page-id-133 .vieringinfo {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 7px 14px;
    }
}

@media (max-width: 480px) {
    .page-id-133 .vieringinfo {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .page-id-133 .vieringinfo > div {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(58, 48, 40, 0.08);
    }

    .page-id-133 .vieringinfo > div:last-child {
        border-bottom: 0;
    }

    .page-id-133 .vieringinfo .label,
    .page-id-133 .vieringinfo .gegevens {
        font-size: 14px;
    }

    .page-id-133 .vieringinfo .tijddiv .gegevens {
        justify-self: start;
    }
}

@media (max-width: 767px) {
  .vieringitem {
    padding: var(--sp-16);
  }
  .viering-buttons.buttons {
    gap: var(--sp-8);
  }
  .buttons.overzicht-filter .button,
  .viering-buttons .button {
    min-height: 44px;
  }
}

/* Minder animatie wanneer de bezoeker dit heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
    .page-id-133 .viering-buttons .button,
    .page-id-133 .viering.vieringitem {
        transition: none;
    }
}

/* =========================
   VIERINGEN OVERZICHT — KAART LAYOUT
========================= */
.page-id-133 #blok_6a3106b150adf {
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(246, 182, 49, 0.12),
            transparent 28rem
        ),
        var(--achtergrondkleur-1);
}

.page-id-133 #blok_6a3106b150adf > .section-inner-wrap {
    max-width: 1120px;
}

.page-id-133 #blok_6a3106b150adf .tekst-inner {
    padding: clamp(48px, 6vw, 88px) 0;
}

/* Grid layout */
section.overzicht-viering .overzicht-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Kaart basisstijl */
section.overzicht-viering .overzicht-cell {
  background: #ffffff;
  border-radius: 8px;
  border-left: 4px solid #1a6bbf;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

section.overzicht-viering .overzicht-cell:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Afwisselende border kleuren */
section.overzicht-viering .overzicht-cell:nth-child(4n+1) { border-left-color: #1a6bbf; }
section.overzicht-viering .overzicht-cell:nth-child(4n+2) { border-left-color: #e8a020; }
section.overzicht-viering .overzicht-cell:nth-child(4n+3) { border-left-color: #c0392b; }
section.overzicht-viering .overzicht-cell:nth-child(4n+4) { border-left-color: #27ae60; }

/* Link als horizontale rij (afbeelding links, tekst rechts) */
section.overzicht-viering .overzicht-cell a {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Afbeelding */
section.overzicht-viering .overzicht-cell img {
  display: block;
  width: 120px;
  min-width: 120px;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Tekst blok */
section.overzicht-viering .overzicht-cell .text-block {
  flex: 1;
  padding: 16px 18px;
  min-width: 0;
}

/* Titel */
section.overzicht-viering .overzicht-cell h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

section.overzicht-viering .overzicht-cell .post-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

section.overzicht-viering .overzicht-cell .post-info > div {
  display: block;
  font-size: 16px;
  color: #555555;
  line-height: 1.5;
  white-space: normal;
}

/* Datum — eerste div krijgt kleur passend bij border */
section.overzicht-viering .overzicht-cell:nth-child(4n+1) .post-info > div:first-child { color: #1a6bbf; font-weight: 600; }
section.overzicht-viering .overzicht-cell:nth-child(4n+2) .post-info > div:first-child { color: #e8a020; font-weight: 600; }
section.overzicht-viering .overzicht-cell:nth-child(4n+3) .post-info > div:first-child { color: #c0392b; font-weight: 600; }
section.overzicht-viering .overzicht-cell:nth-child(4n+4) .post-info > div:first-child { color: #27ae60; font-weight: 600; }

/* =========================
   Paginering
========================= */
section.overzicht-viering .paginatie {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
}

section.overzicht-viering .paginatie a,
section.overzicht-viering .paginatie span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

section.overzicht-viering .paginatie a:hover {
  background: #f0e8d8;
}

section.overzicht-viering .paginatie .current,
section.overzicht-viering .paginatie a.active {
  background: #e8a020;
  color: #ffffff;
}

/* =========================
   Responsive — 1 kolom op mobiel
========================= */
@media (max-width: 768px) {
  section.overzicht-viering .overzicht-inner {
    grid-template-columns: 1fr;
  }

  section.overzicht-viering .overzicht-cell img {
    width: 90px;
    min-width: 90px;
  }
}

/* ─────────────────────────────────────────
   TEAM OVERZICHT
───────────────────────────────────────── */
section.overzicht-team {
  --team-img-height: 300px;
}

section.overzicht-team .overzicht-inner,
section.overzicht-team .overzicht-inner.naast {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  justify-content: center !important;
  gap: clamp(20px, 3vmin, 32px);
}

section.overzicht-team .overzicht-cell > a {
  cursor: default;
}

section.overzicht-team .text-block {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
section.overzicht-team .text-block h4 {
  font-size: var(--h5, 20px);
  color: var(--achtergrondkleur-2, #31271f);
  margin-bottom: 2px;
}

section.overzicht-team .post-info {
  display: block;
  color: var(--hoofdkleur-1);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
section.overzicht-team .post-info p {
  margin-top: 10px;
  color: #55504a;
  font-weight: 400;
  font-size: 0.95em;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 767px) {
  section.overzicht-team {
    --team-img-height: 260px;
  }
  section.overzicht-team .text-block {
    padding: 20px 18px 16px;
  }
}

section.overzicht-team .overzicht-cell {
	display: flex;
	flex-direction: column;
	height: 100%;
}

section.overzicht-team .overzicht-cell > a {
	flex: 1 1 auto;
}

section.overzicht-team .overzicht-cell img {
  border-radius: 16px;
}

.single-team .content-section p {
  color: var(--tekstkleur);
}

.team_contactbuttons {
  top: 280px;
}

.team_contactbutton {
 background: linear-gradient(90deg, #f0821e 0%, #f6b631 100%);
}

.overzicht-inner.naast .overzicht-cell .team_contactbuttons a.team_contactbutton {
    padding: 10px 10px !important
}

/* ─────────────────────────────────────────
   FORMULIEREN
───────────────────────────────────────── */
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 select {
  background: var(--achtergrondmartinus);
  border: 1px solid var(--hoofdworkum);
  border-radius: 8px;
  height: 48px;
  padding: 0 16px;
}

#gform_wrapper_2 input:focus,
#gform_wrapper_2 select:focus {
  outline: none;
}

#gform_wrapper_2 .gfield_label {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gf_browser_chrome {
  width: 100%;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  background-color: var(--achtergrondkleur-1);
  border: 1px solid rgba(58, 48, 40, 0.18);
  border-radius: var(--radius-sm);
  height: 48px;
  padding: 0 var(--sp-16);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.gform_wrapper textarea {
  height: auto;
  min-height: 140px;
  padding-top: var(--sp-12);
}
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
  outline: none;
  border-color: var(--hoofdkleur-1);
  box-shadow: 0 0 0 3px rgba(240, 130, 30, 0.18);
}
.gform_wrapper .gfield_label {
  font-weight: 600;
  color: var(--koptekstkleur);
  margin-bottom: var(--sp-8);
}
.gform_wrapper .gfield_description,
.gform_wrapper .gfield_consent_description {
  color: var(--tekstkleur);
  font-size: var(--s-text);
}
.gform_wrapper .gfield_consent_description {
  margin-top: var(--sp-8);
}

/* ─────────────────────────────────────────
   CONTACTPERSONEN
───────────────────────────────────────── */
.contact-card {
  background: #ede5d4;
  border-radius: 10px;
  border: 1px solid var(----achtergrondkleur-1);
  border-left: 3px solid var(--hoofdkleur-1);
  padding: 20px;
  width: 100%;
}

.card-name {
  font-size: 16px;
  font-weight: 600;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

.detail-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tekstkleur);
}

.detail-text a {
  text-decoration: none;
  border-bottom: 1px solid var(--achtergrondnicolaas);
  transition: border-color 0.2s, color 0.2s;
}

.pb-wrap { padding: 2rem 0; }
.pb-header { margin-bottom: 1.5rem; }
.pb-desc { font-size: 14px; color: #666; margin: 0; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pb-card {
  background: #fff;
  border: 1px solid var(--achtergrondkleur-1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.pb-role {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 4px;
}
.pb-name { font-size: 15px; font-weight: 500; color: var(--tekstkleur); margin: 0 0 4px; }
.pb-phone { font-size: 13px; color: var(--bolsward); text-decoration: none; }
.pb-phone:hover { text-decoration: underline; }
.pb-vacant { font-size: 14px; font-style: italic; color: var(--hoofdkleur-4); margin: 0; }
.pb-footer {
  margin-top: 1.25rem;
  font-size: 13px;
  color: var(--hoofdkleur-4);
  border-top: 1px solid #e5e5e5;
  padding-top: 1rem;
}

/* ─────────────────────────────────────────
   BANKGEGEVENS
───────────────────────────────────────── */
.bank-info {
    margin-top: 40px;
    padding: 24px;
    border-radius: 12px;
    background: var(--achtergrondmartinus);
}

.bank-title {
    text-transform: uppercase;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--tekstkleur);
    font-size: 14px;
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.faq-content a {
  color: var(--hoofdkleur-1);
}

/* ─────────────────────────────────────────
   SINGLE / PAGINA CONTENT
───────────────────────────────────────── */
.standaard .section-inner-wrap {
  width: 800px;
}

.content-section.paginadesign-achter {
    position: relative;
}

.content-section.paginadesign-achter::after {
    content: '';
    position: absolute;
    inset: 0;
background: linear-gradient(0deg, rgba(10,10,10,0.5) 1%,rgba(10,10,10,0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

.content-section.paginadesign-achter .section-inner-wrap {
    position: relative;
    z-index: 1;
}

.single .single-datum {
  background-color: #f0831e30;
  color: var(--hoofdkleur-1);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 99px;
}

/* ── Alinea's ── */
section.standaard .content p {
  font-size: 19px;
  line-height: 1.75;
  margin: 0 0 1.6rem;
}

/* ── Drop cap (eerste letter eerste alinea) ── */
section.standaard .content p:first-of-type::first-letter {
  font-family: 'Playfair Display';
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 0.78;
  float: left;
  margin-right: 0.1em;
  margin-top: 0.08em;
}

section.overzicht .overzicht-cell > a span.post-author {
  font-weight: 400;
}

.single .single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row-reverse;
    gap: 16px;
    margin-bottom: 12px;
}

.post-author {
  font-style: italic;
}

.content-section .section-inner-wrap .content, .content-section .section-inner-wrap .content .social-buttons, section.achter .section-inner-wrap .content, section.achter .section-inner-wrap .content .social-buttons
 {
    text-align: left;
}

.section-inner-wrap .full-width {
  text-align: center;
}

.lezingen .content h2 , .lezingen .content h3 , .lezingen .content p, .lezingen .content strong {
  text-align: left;
}

.wp-singular .content-section p {
  color:  #ffffffc6;
  font-size: 20px;
}

/* ─────────────────────────────────────────
   PAGINA-SPECIFIEKE OVERRIDES
───────────────────────────────────────── */
.page-id-121 #paginadesign-achter-onder-content {
  display: none;
}

.page-id-5983 .standaard.achter, .page-id-5989 .no-content, .page-id-802 .standaard.achter, .page-id-3319 .standaard.achter,  .page-id-123 .standaard.achter{
  display: none;
}

body.page-id-802 .pagina-img-overlay {
  background: #31271f;
}

.page-id-221 section.achter .section-inner-wrap .content {
  text-align: left;
}

.gemeenschap .no-content {
  display: none;
}

/* Contactpagina (page-id-9) */
body.page-id-9 .content-section.paginadesign-achter {
  background-color: var(--achtergrondkleur-2);
}
body.page-id-9 .content-section.paginadesign-achter::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(240, 130, 30, 0.25), transparent 55%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.55) 100%);
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
    position: relative;
    overflow: hidden;

    color: rgba(255, 255, 255, 0.78);
    background-image:
        radial-gradient(
            circle at 5% 0%,
            rgba(255, 255, 255, 0.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 95% 100%,
            color-mix(in srgb, var(--hoofdkleur-1) 12%, transparent),
            transparent 35%
        );
}

/* Gekleurde lijn boven de footer */
footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--hoofdkleur-1),
        var(--hoofdkleur-2)
    );
}

footer .footer-inner-wrap {
    width: min(calc(100% - 48px), 1400px);
    margin-inline: auto;
    padding-block: clamp(56px, 7vw, 88px) 28px;
}

/* =========================================================
   BOVENSTE RIJ
   ========================================================= */
footer .footer-row-top > div:not(:first-child) {
    padding-left: clamp(20px, 2vw, 32px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================
   KOPPEN
   ========================================================= */
footer .footer-heading {
    position: relative;

    margin: 0 0 24px;
    padding-bottom: 14px;

    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

footer .footer-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 38px;
    height: 3px;
    border-radius: 99px;

    background: linear-gradient(
        90deg,
        var(--hoofdkleur-1),
        var(--hoofdkleur-2)
    );
}

footer .footer-heading-main {
    max-width: 300px;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

/* =========================================================
   TEKST
   ========================================================= */
footer .footer-collumn-text {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.96rem;
    line-height: 1.75;
}

footer .footer-collumn-text p {
    margin: 0 0 18px;
}

footer .footer-collumn-text p:last-child {
    margin-bottom: 0;
}

footer .footer-collumn-text strong {
    color: #fff;
    font-weight: 700;
}

footer .footer-collumn-text p span {
  font-family: 'Inter' !important;
  color: #ffffffb1 !important;
}

/* =========================================================
   FOOTERLIJSTEN
   ========================================================= */
footer .footer-collumn-text ul {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin: 0;
    padding: 0;

    list-style: none;
}

footer .footer-collumn-text li {
    margin: 0;
    padding: 0;
}

footer .footer-collumn-text li a {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding-block: 6px;

    color: rgba(255, 255, 255, 0.76);
    line-height: 1.45;
    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

/* Klein pijltje voor iedere link */
footer .footer-collumn-text li a::before {
    content: "";

    flex: 0 0 auto;

    width: 6px;
    height: 6px;
    margin-top: 0.48em;

    border-top: 2px solid var(--hoofdkleur-2);
    border-right: 2px solid var(--hoofdkleur-2);

    transform: rotate(45deg);

    transition:
        border-color 180ms ease,
        transform 180ms ease;
}

footer .footer-collumn-text li a:hover {
    color: #fff;
    transform: translateX(4px);
}

footer .footer-collumn-text li a:hover::before {
    border-color: var(--hoofdkleur-1);
    transform: translateX(2px) rotate(45deg);
}

/* =========================================================
   EERSTE KOLOM
   ========================================================= */
footer .footer_collumn_1_wrapper .footer-collumn-text a {
    text-decoration-color: var(--hoofdkleur-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    transition:
        color 180ms ease,
        text-decoration-color 180ms ease;
}

footer .footer_collumn_1_wrapper .footer-collumn-text a:hover {
    color: var(--hoofdkleur-2);
    text-decoration-color: var(--hoofdkleur-1);
}

/* Contact opnemen als knop */
footer
.footer_collumn_1_wrapper
.footer-collumn-text
> p:last-child
a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 46px;
    padding: 11px 19px;

    color: var(--footerkleur);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    border: 1px solid var(--hoofdkleur-2);
    border-radius: var(--borderradius);
    background: linear-gradient(
        135deg,
        var(--hoofdkleur-1),
        var(--hoofdkleur-2)
    );

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

footer
.footer_collumn_1_wrapper
.footer-collumn-text
> p:last-child
a::after {
    content: "→";
    font-size: 1.1em;
    transition: transform 180ms ease;
}

footer
.footer_collumn_1_wrapper
.footer-collumn-text
> p:last-child
a:hover {
    color: var(--footerkleur);
    border-color: #fff;
    background: #fff;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

footer
.footer_collumn_1_wrapper
.footer-collumn-text
> p:last-child
a:hover::after {
    transform: translateX(3px);
}

/* =========================================================
   LOCATIEKLEUREN
   Vierde kolom — volgorde: Bolsward, Makkum (Martinus),
   Witmarsum (Nicolaas), Workum
   ========================================================= */
footer
.footer_collumn_4_wrapper
.footer-collumn-text
li:nth-child(1)
a::before {
    border-color: var(--bolsward);
}

footer
.footer_collumn_4_wrapper
.footer-collumn-text
li:nth-child(2)
a::before {
    border-color: var(--martinus);
}

footer
.footer_collumn_4_wrapper
.footer-collumn-text
li:nth-child(3)
a::before {
    border-color: var(--nicolaas);
}

footer
.footer_collumn_4_wrapper
.footer-collumn-text
li:nth-child(4)
a::before {
    border-color: var(--workum);
}

/* =========================================================
   ONDERSTE RIJ
   ========================================================= */
footer .footer-divider {
    height: 1px;
    margin-block: clamp(40px, 5vw, 64px) 24px;
    background: rgba(255, 255, 255, 0.12);
}

/* De standaard-theme-CSS zet hier "display: grid !important",
   daarom moet flex hier ook !important zijn om te winnen. */
footer .footer-row-bottom {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    color: rgba(255, 255, 255, 0.56);
    font-size: 0.84rem;
    line-height: 1.6;
}

footer .footer-row-bottom a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;

    transition:
        color 180ms ease,
        text-decoration-color 180ms ease;
}

footer .footer-row-bottom a:hover {
    color: var(--hoofdkleur-2);
    text-decoration-color: var(--hoofdkleur-2);
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
footer .back-to-top {
    margin: 0;

    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    z-index: 100;

    width: 48px;
    height: 48px;

    transform: translateY(12px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}

footer .back-to-top.visible {
    transform: translateY(0);
}

footer .back-to-top-container {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;

    color: var(--footerkleur);

    border: 1px solid var(--hoofdkleur-2);
    background: linear-gradient(
        135deg,
        var(--hoofdkleur-1),
        var(--hoofdkleur-2)
    );

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

footer .back-to-top:hover .back-to-top-container {
    border-color: #fff;
    background: #fff;
    transform: translateY(-3px);
}

footer .back-to-top .dashicons {
    width: auto;
    height: auto;
    font-size: 22px;
}

/* =========================================================
   FOCUS
   ========================================================= */
footer a:focus-visible,
footer .back-to-top:focus-visible {
    outline: 3px solid var(--hoofdkleur-2);
    outline-offset: 4px;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1050px) {
    footer .footer-row-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 48px;
    }

    footer .footer-row-top > div:not(:first-child) {
        padding-left: 0;
        border-left: 0;
    }

    footer .footer-row-top > div:nth-child(n + 3) {
        padding-top: 36px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* =========================================================
   MOBIEL
   ========================================================= */
@media (max-width: 680px) {
    footer .footer-inner-wrap {
        width: min(calc(100% - 32px), 1400px);
        padding-block: 48px 24px;
    }

    footer .footer-row-top {
        grid-template-columns: 1fr;
        gap: 0;
    }

    footer .footer-row-top > div {
        padding-block: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    footer .footer-row-top > div:first-child {
        padding-top: 0;
        border-top: 0;
    }

    footer .footer-row-top > div:nth-child(n + 3) {
        padding-top: 28px;
    }

    footer .footer-heading {
        margin-bottom: 18px;
    }

    footer .footer-divider {
        margin-top: 24px;
    }

    footer .footer-row-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    footer .back-to-top {
        width: 44px;
        height: 44px;
    }
}

header.huisje #hoofdmenu-list > li:first-child > a:before {
    content: "\f51d";
    font-size: 20px;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
header:not(.header-scroll) img.site-logo {
  content: url("http://www.webheldtest.nl/titusbrandsma/wp-content/uploads/2026/07/logo-verticaal-tekst-wit.png");
}

@media (max-width: 1400px) {
  .header-container {
    justify-content: left !important;
  }
}