/**
 * Webversie Newsletter View Styles
 * Dynamic values come from inline style on .wv-wrapper element
 */

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Navigation */
.wv-nav {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.wv-nav__inner {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wv-nav__brand {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.wv-nav__brand img {
    display: block;
}

.wv-nav__logo {
    max-height: 36px;
    width: auto;
}

.wv-nav__dropdown-btn {
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
}

.wv-nav__dropdown-btn:hover {
    color: var(--brand-primary);
}

.wv-nav__dropdown-btn:focus {
    outline: 2px solid var(--wv-primary);
    outline-offset: 2px;
}

.wv-nav__dropdown-text {
    display: inline;
}

/* Navigation title (newsletter name + edition) */
.wv-nav__title {
    flex: 1;
    text-align: center;
    padding: 0 1rem;
    min-width: 0;
}

.wv-nav__newsletter {
    display: block;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wv-nav__edition {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wv-kop-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wv-nav__date {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
}

/* Nav menu: items separated by | */
.wv-nav__menu {
    display: flex;
    align-items: center;
    gap: 0;
}

.wv-nav__sep {
    color: #ccc;
    margin: 0 0.5rem;
    font-weight: 300;
    user-select: none;
}

/* Desktop/mobile nav toggle (breakpoint 600px) */
.wv-nav__mobile {
    display: none;
}

@media (max-width: 600px) {
    .wv-nav__desktop {
        display: none !important;
    }
    .wv-nav__mobile {
        display: flex !important;
    }
}

/* Hamburger button (mobile) */
.wv-nav__hamburger {
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

/* Offcanvas menu styling */
.wv-offcanvas__heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
    margin: 1.25rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
}

.wv-offcanvas__heading:first-child {
    margin-top: 0;
}

.wv-offcanvas__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wv-offcanvas__list li a {
    display: block;
    padding: 0.4rem 0;
    color: #000;
    text-decoration: none;
    font-size: 0.9rem;
}

.wv-offcanvas__list li a:hover,
.wv-offcanvas__list li a.active {
    color: var(--brand-primary);
}

.wv-offcanvas__cat {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brand-primary);
    padding: 0.5rem 0 0.15rem;
}

.wv-offcanvas__link {
    display: block;
    padding: 0.5rem 0;
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.wv-offcanvas__link:hover {
    opacity: 0.7;
}

/* Aanmelden link in nav */
.wv-nav__link {
    font-size: 0.875rem;
    color: var(--brand-primary);
    text-decoration: none;
    white-space: nowrap;
}

.wv-nav__link:hover {
    opacity: 0.7;
}

/* Archief dropdown: scrollable list */
.wv-nav__archief-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Override Bootstrap active item kleur */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary);
    color: #fff;
}

/* Accessibility helpers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-mobile {
    display: none;
}

@media (min-width: 600px) {
    .visually-hidden-mobile {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

}

/* Focus styles for accessibility */
.wv-button:focus,
.wv-item__image-link:focus {
    outline: 2px solid var(--wv-primary);
    outline-offset: 2px;
}

a:focus {
    outline: 2px solid var(--wv-primary);
    outline-offset: 2px;
}

/* Wrapper — transparent zodat body.webversie background (incl. Pattern_Top
   no-repeat top center voor o.a. cl010) doorschijnt. */
.wv-wrapper {
    background: transparent;
    min-height: 100vh;
    padding: 0;
}

.wv-container {
    max-width: var(--wv-max-width);
    margin: 0 auto;
    background: transparent;
}

.wv-wrapper--wide .wv-container {
    max-width: 800px;
}

/* Header with logo */
.wv-header {
    background: var(--wv-header-bg);
    padding: var(--wv-header-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.wv-header img {
    display: block;
    max-width: var(--wv-logo-width);
    height: auto;
}

.wv-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wv-primary);
    text-decoration: underline;
    text-decoration-color: var(--wv-link-underline-color);
}

.wv-header__link:hover {
    opacity: 0.8;
}

.wv-header__link-icon {
    vertical-align: middle;
}

/* Header image */
.wv-header-image {
    width: 100%;
}

.wv-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Tagline */
.wv-tagline {
    background: var(--wv-tagline-bg);
    color: var(--wv-tagline-color);
    font-size: var(--wv-tagline-font-size);
    font-weight: var(--wv-tagline-font-weight);
    padding: var(--wv-tagline-padding);
    font-family: var(--wv-font-body);
}

/* Content — geen flex-gap; tussen-items spacers via expliciete
   <div class="wv-row wv-item-divider"> elementen (mirror mail spacer-rows). */
.wv-content {
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

/* Row wrapper for alternating colors + edge-padding cells (mirror mail 5/90/5 outer cols).
   Geen default background-color: elke .wv-row matched nth-of-type(odd) OR (even)
   hieronder, die rules dragen `:not(.wv-row--has-bg)` waardoor has-bg-rows
   transparant blijven en body-bg doorschijnt. */
.wv-row {
    display: grid;
    grid-template-columns: var(--wv-edge-padding) 1fr var(--wv-edge-padding);
}
/* Alle children in midden-cel (edge-cellen blijven leeg voor accent::after). */
.wv-row > * { grid-column: 2; }
/* Big items mogen volle row vullen — edge-padding geldt alleen voor L/R (5/90/5 layout)
   conform mail-renderer (renderItemBig vs renderItemHalfEdge). */
.wv-row > .wv-item--f,
.wv-row > .wv-item--full,
.wv-row > .wv-item--b,
.wv-row > .wv-item--big {
    grid-column: 1 / -1;
}

/* Alternating colors: odd rows use color 1, even rows use color 2.
   Rows die zelf een expliciete bg-kleur dragen (event-band, footer-dark,
   voorwoord-transparent, etc.) krijgen modifier .wv-row--has-bg en worden
   uitgesloten — webversie.php zet die class op de relevante rows. */
.wv-row:nth-of-type(odd):not(.wv-row--has-bg):not(.wv-item-divider):not(.wv-footer):not(.wv-footer-social-row) {
    background-color: var(--wv-alt-color-1);
}

.wv-row:nth-of-type(even):not(.wv-row--has-bg):not(.wv-item-divider):not(.wv-footer):not(.wv-footer-social-row) {
    background-color: var(--wv-alt-color-2, var(--wv-alt-color-1));
}

/* Grid layout (2 columns) - inherits background from .wv-row */
.wv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: transparent;
}

/* Grid item wrapper + per-cell rules komen uit wv_*.css (per template) */

/* Grid button row (below items, matching email layout) */
.wv-grid--buttons {
    padding: 0;
}

/* Mobile button (inside item, hidden on desktop) */
.wv-item__mobile-button {
    display: none;
}

/* Item - inherits background from .wv-row */
.wv-item {
    background: transparent;
    font-family: var(--wv-font-body);
}

/* Target highlight animation when jumping from TOC */
@keyframes target-border-fade {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: var(--wv-primary);
    }
    100% {
        border-color: transparent;
    }
}

.wv-item {
    scroll-margin-top: 80px; /* Ruimte voor sticky nav */
}

.wv-item:target {
    border: 1px solid transparent;
    animation: target-border-fade 2s ease-in-out 0.5s forwards;
}

.wv-item__image-link {
    display: block;
}

.wv-item__image img,
.wv-item__image-link img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--wv-img-radius);
}

.wv-item__image,
.wv-item__image-link {
    margin-bottom: 0;
}

.wv-item__body {
    padding: 0;
}

.webversie .wv-item__title {
    font-family: var(--wv-font-kop);
    font-weight: var(--wv-font-weight-kop);
    font-size: var(--wv-size-kop);
    color: var(--wv-color-kop);
    margin: 0;
    line-height: var(--wv-line-height-kop);
    /* Per-item-type margin/padding wordt per .wv-item--{type} scope gezet in wv_*.css */
}

/* Float-item kop-marge: 1-op-1 uit items.{side}.padding.kop (mail-config),
   niet uit de grid-afgeleide --wv-kop-margin. */
.webversie .wv-item--float-r .wv-item__title {
    margin: var(--wv-float-r-kop-margin);
}
.webversie .wv-item--float-l .wv-item__title {
    margin: var(--wv-float-l-kop-margin);
}

.webversie .wv-item__lead {
    font-family: var(--wv-font-body);
    font-size: var(--wv-size-body);
    color: var(--wv-body-color);
    margin: var(--wv-body-margin);
}

.wv-item__lead p {
    margin: var(--wv-paragraph-margin);
    line-height: var(--wv-line-height-body);
}

.wv-item ul,
.wv-item ol {
    padding-left: var(--wv-list-padding-left);
    margin: var(--wv-list-margin);
}

/* Button row (below grid) */
.wv-button-row {
    background: #fff;
    padding: 0 15px 20px;
}

/* Button — outline style activates when --wv-btn-border is set by template */
.wv-button {
    display: inline-block;
    background: var(--wv-btn-bg);
    color: var(--wv-btn-color);
    padding: var(--wv-btn-padding);
    font-size: var(--wv-btn-font-size);
    font-weight: var(--wv-btn-font-weight);
    text-decoration: none;
    border-radius: var(--wv-btn-radius);
    font-family: var(--wv-font-body);
    border: var(--wv-btn-border);
    transition: background 0.3s, color 0.3s;
}


/* Big items (full width): structural framework — outer 0, content/image padding via wv_*.css emit */
.wv-item--f,
.wv-item--full,
.wv-item--b,
.wv-item--big {
    padding: 0;
}

/* L/R items: structural framework — 2-column grid, padding 0 op outer, per-cel padding via wv_*.css emit */
.wv-item--l,
.wv-item--left,
.wv-item--lv,
.wv-item--r,
.wv-item--right,
.wv-item--rv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    align-items: start;
}

/* Title margin-top behouden in L/R voor uitlijning met foto */

.wv-item--r .wv-item__image,
.wv-item--right .wv-item__image,
.wv-item--rv .wv-item__image {
    order: 2;
}

/* Footer spacing (between content and footer area) */
.wv-footer-spacing {
    height: var(--wv-footer-spacing-height);
    background-color: var(--wv-footer-spacing-bg);
    border: none;
    margin: 0;
    padding: 0;
}

/* Voorwoord row: bg uit voorwoord.background_color (transparent voor cl010,
   wit voor WIR — mail-mirror). */
.wv-row--voorwoord {
    background-color: var(--wv-voorwoord-bg);
    box-shadow:
        calc(-1 * var(--wv-band-overhang, 0px)) 0 0 var(--wv-voorwoord-bg),
        var(--wv-band-overhang, 0px) 0 0 var(--wv-voorwoord-bg);
}

/* Band-overhang: visuele "shoulders" L/R van de 600px content in row-bg-kleur
   (web-only — templates.web_band_overhang). Geen overhang = NULL → 0px.

   Implementatie: twee box-shadows zonder spread/blur, geoffset L/R met
   overhang-breedte. Geen clip-path: dat creërt een nieuwe containing block
   waardoor browser-native anchor-scroll (#item-N) faalt op ancestor-rows.

   Per row-type een eigen color voor de overhang:
   - Normale content-rows (white tile): overhang in --wv-page-bg (canvas)
   - section_header: in --wv-section-header-bg
   - event-row: in --wv-event-band-bg
   - voorwoord/footer-dark: zie eigen rules elders */

/* Normale content-rows: overhang = page-bg (canvas-kleur, mail-mirror voor
   "tile op canvas"-look). Excludes: divider/has-bg/footer/footer-social. */
.wv-row:not(.wv-item-divider):not(.wv-row--has-bg):not(.wv-footer):not(.wv-footer-social-row) {
    box-shadow:
        calc(-1 * var(--wv-band-overhang, 0px)) 0 0 var(--wv-page-bg),
        var(--wv-band-overhang, 0px) 0 0 var(--wv-page-bg);
}

/* AGENDA section_header */
.wv-section-header {
    box-shadow:
        calc(-1 * var(--wv-band-overhang, 0px)) 0 0 var(--wv-section-header-bg),
        var(--wv-band-overhang, 0px) 0 0 var(--wv-section-header-bg);
}

/* Event-row */
.wv-row--event {
    box-shadow:
        calc(-1 * var(--wv-band-overhang, 0px)) 0 0 var(--wv-event-band-bg),
        var(--wv-band-overhang, 0px) 0 0 var(--wv-event-band-bg);
}

/* Voorwoord */
.wv-voorwoord {
    background-color: var(--wv-voorwoord-bg);
    padding: var(--wv-voorwoord-padding);
}

.webversie .wv-voorwoord__title {
    font-family: var(--wv-font-kop);
    font-size: var(--wv-size-kop);
    color: var(--wv-kop-color);
    line-height: var(--wv-line-height-kop);
    margin: 0 0 12px 0;
}

.wv-voorwoord__content,
.wv-item--voorwoord .wv-item__lead,
.wv-item--voorwoord .wv-item__body {
    font-family: var(--wv-font-body);
    font-size: var(--wv-voorwoord-body-size, var(--wv-size-body));
    color: var(--wv-voorwoord-body-color, var(--wv-body-color));
    line-height: var(--wv-line-height-body);
}

.wv-voorwoord--no-title {
    padding-top: var(--wv-voorwoord-padding-no-title);
}

.wv-voorwoord__content p:first-child {
    margin-top: 0;
}

.wv-voorwoord__content p:last-child {
    margin-bottom: 0;
}

/* Item date (above title) */
.wv-item__date {
    font-family: var(--wv-font-body);
    font-size: var(--wv-datum-font-size);
    font-weight: var(--wv-datum-font-weight);
    line-height: var(--wv-datum-line-height);
    color: var(--wv-datum-color);
    text-transform: var(--wv-datum-transform);
    margin: 0;
    padding: var(--wv-datum-padding);
}

/* Category Header */
.wv-category-header {
    background-color: var(--wv-cat-bg);
    padding: var(--wv-cat-padding);
}

/* Eerste item na categorie-header: geen padding-top — behalve float-items,
   die houden hun text_section padding-top (mirror mail renderItemFloat). */
.wv-category-header + .wv-row .wv-item:not(.wv-item--float-r):not(.wv-item--float-l) {
    padding-top: 0;
}

.wv-category-header h3 {
    margin: 0;
    font-family: var(--wv-font-kop);
    font-size: var(--wv-cat-font-size);
    color: var(--wv-cat-color);
    text-transform: var(--wv-cat-transform);
    font-weight: var(--wv-cat-weight);
}

.wv-category-header img {
    display: block;
    width: var(--wv-cat-image-width);
    max-width: 100%;
    height: auto;
}

/* Text button style (when --wv-btn-style is 'text') */
.wv-button--text {
    background: none;
    border: none;
    padding: 0;
    color: var(--wv-btn-color);
    font-size: var(--wv-btn-font-size);
    font-weight: normal;
    text-decoration: underline;
}

.wv-button--text:hover {
    background: none;
    opacity: 0.8;
}

/* Contact Footer (from template config) */
.wv-contact-footer {
    background-color: var(--wv-footer-bg);
    color: var(--wv-footer-color);
    padding: var(--wv-footer-padding);
    font-family: var(--wv-font-body);
    font-size: var(--wv-footer-font-size);
    line-height: 1.4;
}

.wv-contact-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 639px) {
    .wv-contact-footer__columns {
        grid-template-columns: 1fr;
    }
}

.wv-contact-footer__col a {
    color: var(--wv-footer-link-color);
}

.wv-contact-footer__bottom {
    margin-top: 15px;
    font-size: var(--wv-footer-font-size);
    color: var(--wv-footer-link-color);
}

.wv-contact-footer__bottom a {
    color: var(--wv-footer-link-color);
}

.wv-contact-footer__links {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: var(--wv-footer-font-size);
}

.wv-contact-footer__links a {
    color: var(--wv-footer-link-color);
}

/* Header overlay (header.overlay.show === true) */
.wv-header-overlay {
    position: relative;
}

.wv-header-overlay__bg {
    display: block;
    width: 100%;
    height: auto;
}

.wv-header-overlay__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--wv-header-overlay-justify);
    align-items: flex-start;
    padding: var(--wv-header-overlay-padding);
    box-sizing: border-box;
}

.wv-header-overlay__title {
    font-family: var(--wv-header-overlay-title-font);
    font-size: var(--wv-header-overlay-title-size);
    color: var(--wv-header-overlay-title-color);
    font-weight: var(--wv-header-overlay-title-weight);
    line-height: var(--wv-header-overlay-title-line-height);
    padding: var(--wv-header-overlay-title-padding);
    margin: 0;
}

.wv-header-overlay__body {
    font-family: var(--wv-header-overlay-body-font);
    font-size: var(--wv-header-overlay-body-size);
    color: var(--wv-header-overlay-body-color);
    line-height: var(--wv-header-overlay-body-line-height);
    padding: var(--wv-header-overlay-body-padding);
    margin: 0;
}

/* Per-item category badge — padding per-side via wv_*.css (uit items.{side}.padding.category) */
.wv-item__category {
    margin: 0;
}

.wv-item__category img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Three-column contact footer (footer.layout === 'three_column_contact') */
.wv-contact-footer__divider {
    background-color: var(--wv-footer-bg);
    line-height: 0;
    font-size: 0;
}

.wv-contact-footer__divider img {
    display: block;
    width: 100%;
    height: auto;
    max-width: var(--wv-max-width);
    margin: 0 auto;
}

.wv-contact-footer--3col {
    padding: 0 0 var(--wv-footer-link-row-gap) 0;
}

.wv-contact-footer__columns--3 {
    grid-template-columns: 26fr 37fr 37fr;
    gap: 0;
    padding: 0 30px;
}

.wv-contact-footer__columns--3 > .wv-contact-footer__col {
    padding: 0 10px;
}

.wv-contact-footer__columns--3 > .wv-contact-footer__col:first-child {
    padding-left: 0;
}

.wv-contact-footer__columns--3 > .wv-contact-footer__col:last-child {
    padding-right: 0;
}

.wv-contact-footer__columns--3 > .wv-contact-footer__col + .wv-contact-footer__col {
    border-left: 1px solid var(--wv-footer-col-divider);
}

@media (max-width: 639px) {
    .wv-contact-footer__columns--3 {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    .wv-contact-footer__columns--3 > .wv-contact-footer__col,
    .wv-contact-footer__columns--3 > .wv-contact-footer__col:first-child,
    .wv-contact-footer__columns--3 > .wv-contact-footer__col:last-child {
        padding: 10px 0;
        border-left: 0;
    }
}

.wv-contact-footer__links--grid {
    justify-content: center;
    margin-top: var(--wv-footer-link-row-gap);
    padding: 0 20px;
}

/* two_column_contact_subrow (TK): 2-col contact + flat link-row beneden.
   Col-padding via CSS-vars uit wv_*.css (footer.contact_left_padding / contact_right_padding).
   Mail-mirror: outer padding=0, full-row span (edge-padding negeren). */
.wv-row.wv-contact-footer--subrow {
    padding: 0;
}
.wv-row.wv-contact-footer--subrow > * {
    grid-column: 1 / -1;
}
.wv-contact-footer--subrow .wv-contact-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.wv-contact-footer--subrow .wv-contact-footer__col:nth-child(1) {
    padding: var(--wv-footer-col-left-padding);
}
.wv-contact-footer--subrow .wv-contact-footer__col:nth-child(2) {
    padding: var(--wv-footer-col-right-padding);
}
.wv-contact-footer__subrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--wv-footer-subrow-padding);
    font-size: var(--wv-footer-font-size);
}
.wv-contact-footer__subrow a {
    color: var(--wv-footer-link-color);
    text-decoration: underline;
}

/* content_with_logo_row (Eschmarkerveld): full-width content + logo-row */
.wv-row.wv-custom-footer--content-logo {
    background-color: var(--wv-footer-bg);
    color: var(--wv-footer-color);
}
.wv-custom-footer--content-logo .wv-custom-footer__content {
    padding: var(--wv-footer-content-padding);
    font-family: var(--wv-font-body);
    font-size: var(--wv-footer-font-size);
    line-height: 1.2;
    color: var(--wv-footer-color);
}
.wv-custom-footer--content-logo .wv-custom-footer__logo-row {
    text-align: right;
    padding: var(--wv-footer-logo-padding);
}
.wv-custom-footer--content-logo .wv-custom-footer__logo-row img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

/* Inline socials in 3-col footer col 2 */
.wv-cf-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-cf-social-gap);
    margin-top: 10px;
}

.wv-cf-socials__link img,
.wv-cf-feedback__link img {
    display: block;
    border: 0;
}

/* Inline feedback in 3-col footer col 3 */
.wv-cf-feedback__icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    vertical-align: middle;
}

/* Custom Footer (edition-specific) */
.wv-custom-footer {
    background-color: var(--wv-footer-bg);
    color: var(--wv-footer-color);
    padding: 20px;
    margin-top: 20px;
}

.wv-custom-footer__title {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: var(--wv-footer-font-size);
}

.wv-custom-footer__content {
    font-size: var(--wv-footer-font-size);
}

/* Footer Social */
.wv-row.wv-footer-social-row {
    background-color: var(--wv-footer-social-bg);
}

.wv-footer-social {
    color: var(--wv-footer-social-color);
    padding: var(--wv-footer-social-padding);
    text-align: center;
    font-family: var(--wv-font-body);
}

.wv-footer__unsub {
    padding: var(--wv-footer-padding);
    font-size: var(--wv-footer-font-size);
    text-align: center;
    line-height: 1.6;
}

.wv-footer__unsub a {
    color: var(--wv-footer-link-color);
    text-decoration: underline;
}

.wv-footer__unsub p {
    margin: 0;
}

.wv-footer-social__title {
    margin: 0 0 15px 0;
    line-height: 1.2;
    font-size: var(--wv-footer-social-font-size);
    font-weight: var(--wv-footer-social-font-weight);
}

.wv-footer-social__links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wv-footer-social__link {
    display: inline-block;
}

.wv-footer-social__link img {
    display: block;
    border-radius: 3px;
    width: 32px;
    height: 32px;
}

/* Partner Logos (gebruikt .wv-item--l layout) */
.wv-partner-logos {
    background-color: var(--wv-page-bg);
}

.wv-partner-logos__left {
    text-align: left;
}

.wv-partner-logos__right {
    text-align: right;
}

.wv-partner-logos img {
    display: inline-block;
    height: auto;
}

.wv-partner-logos__left img,
.wv-partner-logos__right img {
    max-width: 200px;
}

/* Footer */
.wv-row.wv-footer {
    background-color: var(--wv-unsub-bg);
    color: var(--wv-footer-color);
    padding: var(--wv-footer-padding);
    font-size: var(--wv-footer-font-size);
    text-align: center;
    font-family: var(--wv-font-body);
    line-height: 1.6;
}

.wv-footer a {
    color: var(--wv-footer-link-color);
    text-decoration: underline;
}

.wv-footer__unsub p {
    margin: 0;
}

/* Full width layout override */
.public-main.full-width {
    padding: 0;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .wv-grid {
        grid-template-columns: 1fr;
    }

    .wv-grid .wv-item {
        padding: var(--wv-grid-image-padding);
    }

    .wv-grid .wv-item:last-child {
        padding-top: var(--wv-grid-mobile-gap);
    }

    /* Show mobile button, hide desktop button row */
    .wv-item__mobile-button {
        display: block;
        margin-top: 16px;
    }

    .wv-grid--buttons {
        display: none;
    }

    .wv-item--l,
    .wv-item--left,
    .wv-item--lv,
    .wv-item--r,
    .wv-item--right,
    .wv-item--rv {
        grid-template-columns: 1fr;
    }

    .wv-item--r .wv-item__image,
    .wv-item--right .wv-item__image,
    .wv-item--rv .wv-item__image {
        order: 0;
    }
}

/* === DEFAULT layout-CSS voor sectie-features ===
   Specifieke bg/text-colors/sizes komen via CSS-vars uit
   wv_{tenant}_{templateId}.css (EmailTemplateConfig::generateWebCss). */

/* Event-zone band: wv-row krijgt event-band-bg voor event-items
   (mirror ItemRenderer::wrapItemBand). Bump specificity met .wv-row.wv-row--event
   zodat het nth-of-type alt-color overrulet. */
.wv-row.wv-row--event {
    background-color: var(--wv-event-band-bg, transparent);
}

/* Corner-image (mirror ItemRenderer::renderItemCorner — bar_2/bar_2_w 20px rechts) */
.wv-item__corner {
    text-align: right;
    padding: 0;
    line-height: 0;
    background-color: var(--wv-item-bg, #ffffff);
}

/* In event-rows blijft de corner óók wit (matcht het inner-item bg).
   De bar_2.png speech-bubble-tail is ontworpen op witte bg; transparent
   zou teal-band door de tail laten schemeren (= "blauwe balk links van
   de driehoek"). */

.wv-item__corner img {
    display: inline-block;
    border: 0;
    height: auto;
}

/* Section-header (gegroepeerde sectiekop, bv. AGENDA) */
.wv-section-header {
    padding: var(--wv-section-header-padding, 32px 20px);
    background-color: var(--wv-section-header-bg, transparent);
    text-align: left;
}

/* Specificiteits-bump (.webversie prefix) zodat deriver's
   `.webversie h1, .webversie h2, .webversie h3 { color: var(--wv-color-kop) }`
   (later in source) niet wint van section_header. */
.webversie .wv-section-header h2 {
    margin: 0;
    color: var(--wv-section-header-color, inherit);
    font-family: var(--wv-section-header-font, inherit);
    font-size: var(--wv-section-header-font-size, 30px);
    font-weight: var(--wv-section-header-font-weight, 700);
    line-height: var(--wv-section-header-line-height, 120%);
    text-transform: var(--wv-section-header-text-transform, none);
    border-top: var(--wv-section-header-border, none);
    border-bottom: var(--wv-section-header-border, none);
    padding: var(--wv-section-header-h2-padding, 0);
}