/*
Theme Name: Hello Elementor Child - De VisZaeck
Theme URI: https://hsdigisolutions.com
Description: Child theme for De VisZaeck Huissen, built on Hello Elementor. Carries site-specific CSS and enqueue logic only. All layout and design is managed through Elementor.
Author: HS Digital Solutions
Author URI: https://hsdigisolutions.com
Template: hello-elementor
Version: 1.8.8
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: deviszaeck-child
License: GNU General Public License v2 or later
*/

/* =========================================================
   De VisZaeck, custom styles

   Rules for anyone editing this file:
   - Never target .elementor- classes or auto-generated element IDs.
     Those change whenever the client edits a page.
   - Only target WooCommerce classes (.wc-block-*, .woocommerce-*)
     or our own dvz- prefixed classes.
   - Never use !important against Elementor output. If a rule needs it,
     the enqueue dependency in functions.php is wrong instead.
   ========================================================= */

/* ---------------------------------------------------------
   Brand tokens.

   Each one points at the matching Elementor global colour, so a
   palette change in Elementor, Site Settings, Global Colors flows
   straight through to any CSS written here. The hex after the comma
   is only a fallback for the case where Elementor is not loaded.

   Mapped by meaning, verified against the generated kit CSS at
   uploads/elementor/css/post-9.css.
   --------------------------------------------------------- */
:root {
    --dvz-diepblauw: var( --e-global-color-primary,   #00377A ); /* brand, primary buttons   */
    --dvz-azuur:     var( --e-global-color-secondary, #4A9BF5 ); /* accent line, links       */
    --dvz-tekst:     var( --e-global-color-text,      #5A667E ); /* body copy                */
    --dvz-marine:    var( --e-global-color-accent,    #0B2455 ); /* headings, card titles    */
    --dvz-ijs:       var( --e-global-color-dvzice,    #EFF5FC ); /* soft panels, hero ground */
    --dvz-lucht:     var( --e-global-color-dvzlucht,  #9CC2E8 ); /* eyebrows, squiggles      */
    --dvz-lijn:      var( --e-global-color-dvzlijn,   #DCE7F3 ); /* hairlines, card borders  */
}

/* ---------------------------------------------------------
   WooCommerce cart and checkout.

   These are WooCommerce block classes, not Elementor markup, so they
   are safe to style here. functions.php makes sure this file loads
   after wc-blocks-style on pages where that is present.

   Nothing is styled yet: rules land here during the design phase.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Hero slider.

   Mirrors the reference site's behaviour: manual only, one
   forward arrow that wraps around, a position counter, and a
   0.7s cross-fade. No autoplay, because the reference has none.

   Every selector is dvz- prefixed. Each slide is an ordinary
   Elementor container, so a new slide is added by duplicating
   one in Elementor. The script counts them at load.
   --------------------------------------------------------- */
.dvz-hero-slider { position: relative; }

.dvz-hero-slide { transition: opacity 0.7s ease; }

/* ---------------------------------------------------------
   De hero zelf, naar het ontwerp van de klant: een doorlopend
   ijsblauw vlak met een vaag visschubbenpatroon links, en de
   schotel die er rechts als losse foto op ligt in plaats van
   in een strak wit vak ernaast.

   Het patroon is een SVG-tegel van twee rijen halve cirkels,
   in de kleur Lucht, en vervaagt naar rechts zodat het de foto
   niet in de weg zit. De foto zelf krijgt een slagschaduw; is
   het nog de foto met witte achtergrond (geen uitsnede), dan
   vervaagt een radiaal masker de randen weg in het vlak.
   --------------------------------------------------------- */
.dvz-hero-slide.dvz-hero-slide--photo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #EAF2FB 0%, #F3F7FC 48%, #FBFDFF 100%);
}

.dvz-hero-slide--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%239CC2E8' stroke-width='1.3'%3E%3Cpath d='M0 0a42 42 0 0 0 84 0'/%3E%3Cpath d='M-42 42a42 42 0 0 0 84 0'/%3E%3Cpath d='M42 42a42 42 0 0 0 84 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 84px 84px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 70%);
            mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 70%);
}

.dvz-hero-copy { position: relative; z-index: 2; }

.dvz-hero-media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvz-hero-plate,
.dvz-hero-plate .elementor-widget-container { width: 100%; }

.dvz-hero-plate img {
    display: block;
    width: 112%;
    max-width: none;
    height: auto;
    margin-left: 4%;
    transform: rotate(-3deg);
    filter: drop-shadow(0 34px 44px rgba(11, 36, 85, 0.22));
}

/* Zolang de foto zijn eigen witte achtergrond nog heeft, verdwijnen de randen
   in het vlak. Zodra er een uitsnede staat (is-cutout) is dat niet meer nodig. */
.dvz-hero-plate:not(.is-cutout) img {
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 52%, transparent 76%);
            mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 52%, transparent 76%);
    filter: none;
}

@media (max-width: 1024px) {
    .dvz-hero-plate img { width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------
   Mobiel (klant, 10 sep 2026): de schotel moet meteen in beeld,
   net zo nadrukkelijk als op desktop, en niet pas onder de tekst.
   De tekstkolom wordt op mobiel "doorzichtig" (display: contents),
   zodat kop, foto, regel en knoppen als losse blokken onder elkaar
   staan: eyebrow, Mediterraanse Visschotels, dan groot de schotel,
   dan de regel en de knoppen. De blokken hebben hun eigen dvz-
   klassen (gezet in de Elementor-data van de homepage), dus de
   volgorde staat hier en niet in de editor.
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .dvz-hero-slide--photo::before {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
    }

    .dvz-hero-slide--photo > .dvz-hero-copy { display: contents; }

    .dvz-hero-eyebrow   { order: 1; padding: 34px 24px 0; }
    .dvz-hero-title     { order: 2; padding: 0 24px; }
    .dvz-hero-subtitle  { order: 3; padding: 0 24px; }
    .dvz-hero-media     { order: 4; }
    .dvz-hero-text      { order: 5; padding: 0 24px; }
    .dvz-hero-actions   { order: 6; padding: 0 24px 40px; }

    .dvz-hero-slide--photo .dvz-hero-title,
    .dvz-hero-slide--photo .dvz-hero-subtitle { margin-bottom: 0; }

    /* De foto: volle breedte, iets over de rand, zonder het randenmasker
       zodat hij niet klein en vaag oogt maar als één grote schotel. */
    .dvz-hero-media { width: 100%; min-height: 0; padding: 6px 0 14px; }
    .dvz-hero-plate img {
        width: 108%;
        max-width: none;
        margin: 0 0 0 -4%;
        transform: rotate(-2deg);
    }
    .dvz-hero-plate:not(.is-cutout) img {
        -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 50%, #000 58%, transparent 80%);
                mask-image: radial-gradient(ellipse 60% 64% at 50% 50%, #000 58%, transparent 80%);
    }
}

/* Slides render normally by default. Only once the script has run does the
   slider begin hiding inactive slides, so with JavaScript unavailable the hero
   still shows rather than collapsing to an empty band. */
.dvz-hero-slider.is-ready .dvz-hero-slide:not(.is-active) {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dvz-hero-slide.is-active { opacity: 1; visibility: visible; }

.dvz-hero-nav {
    position: absolute;
    right: 34px;
    bottom: 28px;
    z-index: 3;
    width: auto;
}

.dvz-hero-nav[hidden] { display: none; }

/* Styled on our own class only, never on Elementor's generated markup,
   so a client edit in the editor cannot break it. */
.dvz-hero-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(11, 36, 85, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}

.dvz-hero-arrow:hover {
    background: var(--dvz-ijs);
    transform: translateY(-1px);
}

.dvz-hero-counter p { margin: 0; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
    .dvz-hero-slide { transition: none; }
}

/* =========================================================
   KALE KNOPPEN

   Hello Elementor zet dit in zijn theme.css:

       button:hover, button:focus,
       [type="button"]:hover, [type="submit"]:focus { background-color: #c36 }

   Knalroze, geen kleur uit dit merk, en het raakt elke <button> waar wij niet
   zelf al een achtergrond op hover hebben gezet. Dat waren er meer dan gedacht:
   de terugknop in de popup, het kruisje, de wisknop in het zoekveld, de
   wijzigknop bij een product, en de tweede keuzeknop in de popup.

   De regel hieronder heeft dezelfde soortelijke zwaarte als die van het thema
   (een element plus een pseudoklasse) en laadt later, dus hij wint. :where()
   telt niet mee voor de zwaarte, waardoor elke eigen component-regel met een
   echte klasse er nog altijd overheen gaat. Zo blijft de gevulde knop gevuld en
   wordt alleen het roze weggenomen.
   ========================================================= */

:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) button:hover,
:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) button:focus,
:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) [type="button"]:hover,
:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) [type="button"]:focus,
:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) [type="submit"]:hover,
:where(.dvz-modal, .dvz-modebar, .dvz-shop, .dvz-product, .dvz-footer,
       .elementor-menu-cart, .woocommerce) [type="submit"]:focus {
    background-color: transparent;
    color: inherit;
}
/* Het thema zet [type=button]:focus ook op roze, en een attribuut plus een
   pseudoklasse weegt zwaarder dan element plus pseudoklasse. Vandaar dat de
   :focus-varianten van de attribuutselectors hierboven expliciet meedoen:
   "Terug" in de popup werd anders roze zodra het script hem de focus gaf. */

/* En dan alsnog een echte hoverstijl voor elke kale knop die we hebben, zodat
   ze niet alleen "niet roze" zijn maar ook antwoord geven op de muis. */

.dvz-back:hover,
.dvz-back:focus-visible {
    background-color: transparent;
    color: var(--dvz-diepblauw);
}

.dvz-modal__x:hover,
.dvz-modal__x:focus-visible {
    background-color: var(--dvz-ijs);
    color: var(--dvz-marine);
}

.dvz-shop__clear:hover,
.dvz-shop__clear:focus-visible {
    background-color: #dbe7f4;
    color: var(--dvz-marine);
}

.dvz-product__notechange:hover,
.dvz-product__notechange:focus-visible {
    background-color: transparent;
    color: var(--dvz-marine);
}

/* De tweede keuze in de popup had wel een randkleur op hover maar geen
   achtergrond, en werd daardoor roze. */
.dvz-choice--ghost:hover:not([disabled]),
.dvz-choice--ghost:focus-visible:not([disabled]) {
    background-color: var(--dvz-ijs);
    color: var(--dvz-diepblauw);
}

.dvz-choice--primary:hover,
.dvz-choice--primary:focus-visible {
    background-color: var(--dvz-marine);
    color: #fff;
}

.dvz-modal__submit:hover:not(:disabled),
.dvz-modal__submit:focus-visible:not(:disabled) {
    background-color: var(--dvz-marine);
    color: #fff;
}

.dvz-modal__submit:disabled:hover,
.dvz-modal__submit:disabled:focus {
    background-color: #cdd7e4;
    color: #6b7a8f;
}

.dvz-modebar__change:hover,
.dvz-modebar__change:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Zichtbare toetsenbordfocus in de merkkleur, overal gelijk. */
.dvz-modal :focus-visible,
.dvz-shop :focus-visible,
.dvz-product :focus-visible,
.dvz-modebar :focus-visible,
.elementor-menu-cart :focus-visible {
    outline: 2px solid var(--dvz-azuur);
    outline-offset: 2px;
}

/* =========================================================
   KOPTEKST OP SMALLE SCHERMEN

   De koptekst is een Elementor-sjabloon met logo, menu, twee
   bestelknoppen, zoeken en de winkelwagen op een rij die niet
   afbreekt. Onder ongeveer 1000 pixels is daar geen ruimte
   meer voor: de twee knoppen kropen samen tot zeven pixels
   breed terwijl hun inhoud gewoon 120 pixels bleef, en dat
   schoof dwars over het karretje heen.

   De twee knoppen in de rechterkolom verdwijnen daarom onder
   1024 pixels. In het sjabloon staat een tweede, eigen rij met
   dezelfde twee knoppen (dvz-header__order) die alleen op tablet
   en telefoon zichtbaar is, over de volle breedte onder de
   logo-rij. Zo blijft afhalen of bezorgen op elk scherm een
   klik, zonder dat de bovenste rij ooit vol raakt.

   De containers dragen eigen klassen (dvz-header, __brand, __nav,
   __actions, __order), zodat hieronder geen enkele .elementor-
   klasse nodig is behalve die van het menu-uitklapvenster zelf,
   dat nu eenmaal door de widget wordt opgebouwd.
   ========================================================= */

/* Lager, en compacter zodra je scrolt: het logo krimpt en de rij verliest
   wat lucht, zoals de referentie doet. De klasse komt uit header.js; de
   selector heeft vier klassen zodat hij wint van Elementors eigen regel voor
   deze container. */
.dvz-header.e-con.e-parent { transition: padding 0.25s ease, box-shadow 0.25s ease; }
.dvz-header__brand img { transition: width 0.25s ease; }

.dvz-header.is-compact.e-con.e-parent {
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: 0 6px 24px rgba(11, 36, 85, 0.08);
}

@media (min-width: 1025px) {
    .dvz-header.is-compact .dvz-header__brand img { width: 170px; }
}

/* De knoppen in de koptekst breken nooit af, ook niet als een browser de
   tekst vertaalt en "Afhalen" ineens "To take off" wordt. Ze houden hun eigen
   breedte; de menukolom ernaast mag krimpen. */
.dvz-header__actions { flex-wrap: nowrap; }
.dvz-header__actions .elementor-widget-button { flex: 0 0 auto; }
.dvz-header__actions .elementor-button { white-space: nowrap; }
.dvz-header__actions .elementor-button-text { white-space: nowrap; }
.dvz-header__nav { min-width: 0; }

@media (max-width: 1024px) {
    .dvz-header__actions .elementor-widget-button { display: none; }

    /* De onderste rij: twee even brede knoppen. */
    .dvz-header__order { order: 10; }
    .dvz-header__order .elementor-widget-button { flex: 1 1 0; min-width: 0; }
    .dvz-header__order .elementor-button { width: 100%; }
}

/* Onder 768 pixels is het logo klein en staat er niets meer tussen
   logo en iconen; dan mag de bovenste rij wat strakker. */
@media (max-width: 767px) {
    .dvz-header__brand img { width: 150px; max-width: 100%; height: auto; }
    .dvz-header__actions { gap: 2px; }
}

/* =========================================================
   MOBIEL MENU

   De navigatiewidget klapt onder 1024 pixels uit tot een paneel.
   Met "stretch" in het sjabloon loopt dat paneel van rand tot
   rand; hier krijgt het de maat van een echt menu in plaats van
   een lijstje in de menukleur: grote serifkoppen, ruime
   klikvlakken, een dunne lijn ertussen en een zachte schaduw
   eronder zodat het los van de pagina leest.
   ========================================================= */

.dvz-header .elementor-nav-menu--dropdown {
    background: #fff;
    box-shadow: 0 24px 48px rgba(11, 36, 85, 0.14);
    border-top: 1px solid var(--dvz-lijn);
}

.dvz-header .elementor-nav-menu--dropdown .elementor-item {
    justify-content: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--dvz-ijs);
    font-family: Lora, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--dvz-marine);
}

.dvz-header .elementor-nav-menu--dropdown li:last-child .elementor-item { border-bottom: 0; }

.dvz-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.dvz-header .elementor-nav-menu--dropdown .elementor-item:hover,
.dvz-header .elementor-nav-menu--dropdown .elementor-item:focus-visible {
    background: var(--dvz-ijs);
    color: var(--dvz-diepblauw);
}

/* De knop zelf: een rustig vierkant zonder kader, in de merkkleur. */
.dvz-header .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--dvz-marine);
}

.dvz-header .elementor-menu-toggle:hover,
.dvz-header .elementor-menu-toggle.elementor-active {
    background: var(--dvz-ijs);
    color: var(--dvz-diepblauw);
}

/* =========================================================
   STANDAARD LINKKLEUR

   Hello Elementor zet in zijn reset.css:

       a { background-color: transparent; color: #c36; text-decoration: none }

   Datzelfde knalroze als bij de knoppen. Elke link waar wij geen
   kleur op gezet hebben werd daarmee roze: de productnamen in de
   winkelwagen en in de lade, en alles wat WooCommerce zelf
   uitprint. Een merkkleur als standaard lost dat in een keer op.
   Deze regel is net zo zwaar als die van het thema en laadt later,
   dus hij wint; elke eigen regel met een klasse wint nog altijd
   hiervan.
   ========================================================= */
a { color: var(--dvz-diepblauw); }
a:hover { color: var(--dvz-marine); }

/* =========================================================
   TEKSTPAGINA'S (page.php in dit thema)

   Voorwaarden, privacy, cookies, retourneren, allergenen en
   andere gewone pagina's: ijsblauwe kop met het schubben-
   patroon van de hero, een rij chips naar de andere
   informatiepagina's, en een leeskolom van ~72 tekens met
   Lora-koppen in marine, tekst in de bodykleur, tabellen op
   ijsblauwe koprij. Alleen eigen dvz-klassen en elementen
   binnen .dvz-page__content; niets van Elementor.
   ========================================================= */
/* Hello Elementor zet .site-main in een kolom van 1140 px; de kop moet de
   volle breedte hebben, de leeskolom regelt zijn eigen breedte. */
.site-main.dvz-page,
body:not([class*="elementor-page-"]) .site-main.dvz-page { max-width: none; width: 100%; margin: 0; padding: 0; background: #fff; }

.dvz-page__hero {
    position: relative;
    overflow: hidden;
    padding: 64px 24px 40px;
    background: linear-gradient(100deg, #EAF2FB 0%, #F3F7FC 55%, #FBFDFF 100%);
}

.dvz-page__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%239CC2E8' stroke-width='1.3'%3E%3Cpath d='M0 0a42 42 0 0 0 84 0'/%3E%3Cpath d='M-42 42a42 42 0 0 0 84 0'/%3E%3Cpath d='M42 42a42 42 0 0 0 84 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 84px 84px;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 75%);
            mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 75%);
}

.dvz-page__inner {
    position: relative;
    z-index: 1;
    max-width: 1190px;
    margin: 0 auto;
}

.dvz-page__hero .dvz-eyebrow { color: var(--dvz-azuur); }

.dvz-page__title {
    margin: 6px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.8px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

.dvz-page__title em { font-style: normal; color: var(--dvz-diepblauw); }

.dvz-page__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.dvz-page__chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--dvz-lijn);
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--dvz-marine);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dvz-page__chip:hover { border-color: var(--dvz-azuur); color: var(--dvz-diepblauw); }

.dvz-page__chip.is-current {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
}

.dvz-page__body { padding: 48px 24px 88px; }

.dvz-page__content {
    max-width: 780px;
    margin: 0 auto;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.68;
    color: var(--dvz-tekst);
}

.dvz-page__content > * { margin: 0 0 18px; }
.dvz-page__content > *:last-child { margin-bottom: 0; }

.dvz-page__content h2,
.dvz-page__content h3,
.dvz-page__content h4 {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    color: var(--dvz-marine);
    letter-spacing: -0.3px;
    text-wrap: balance;
}

.dvz-page__content h2 { font-size: 27px; line-height: 1.2; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--dvz-lijn); }
.dvz-page__content h3 { font-size: 21px; line-height: 1.3; margin: 30px 0 10px; }
.dvz-page__content h4 { font-size: 18px; margin: 24px 0 8px; }
.dvz-page__content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.dvz-page__content p strong { color: var(--dvz-marine); }

.dvz-page__content a {
    color: var(--dvz-diepblauw);
    text-decoration: underline;
    text-decoration-color: var(--dvz-lucht);
    text-underline-offset: 3px;
}
.dvz-page__content a:hover { text-decoration-color: var(--dvz-diepblauw); }

.dvz-page__content ul,
.dvz-page__content ol { padding-left: 24px; }
.dvz-page__content li { margin: 6px 0; }
.dvz-page__content li::marker { color: var(--dvz-azuur); font-weight: 600; }

/* Tabellen (allergenen): koprij op ijsblauw, dunne lijnen, op mobiel scrollbaar. */
.dvz-page__content table,
.dvz-page__content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
.dvz-page__content .wp-block-table { overflow-x: auto; }
.dvz-page__content th,
.dvz-page__content td {
    padding: 10px 12px;
    border: 1px solid var(--dvz-lijn);
    text-align: left;
    vertical-align: top;
}
.dvz-page__content th {
    background: var(--dvz-ijs);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-weight: 700;
    color: var(--dvz-marine);
}
.dvz-page__content tr:nth-child(even) td { background: #FBFDFF; }
.dvz-page__content td:first-child { font-weight: 600; color: var(--dvz-marine); }

.dvz-page__content hr { border: 0; border-top: 1px solid var(--dvz-lijn); margin: 32px 0; }

.dvz-page__content blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    border-left: 3px solid var(--dvz-azuur);
    border-radius: 0 12px 12px 0;
    background: var(--dvz-ijs);
}

/* De slotregel "Laatst bijgewerkt" op elke informatiepagina. */
.dvz-page__content > p:last-child:not(:first-child) {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--dvz-lijn);
    font-size: 14px;
    color: var(--dvz-tekst);
}

@media (max-width: 767px) {
    .dvz-page__hero { padding: 40px 20px 28px; }
    .dvz-page__hero::before {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 90%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 90%);
    }
    .dvz-page__nav { margin-top: 20px; gap: 8px; }
    .dvz-page__chip { min-height: 38px; padding: 7px 14px; font-size: 14px; }
    .dvz-page__body { padding: 32px 20px 64px; }
    .dvz-page__content { font-size: 16px; }
    .dvz-page__content h2 { font-size: 23px; margin-top: 36px; padding-top: 18px; }
    .dvz-page__content h3 { font-size: 19px; }
}