.table>tbody>tr>th:first-child,
.table>thead>tr>th:first-child,
table>tbody>tr>th:first-child,
table>thead>tr>th:first-child,
table > tbody > tr > td:first-child,
table > tfoot > tr > td:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > td:first-child {
    padding-left: var(--ui-block-padding-base);
}



.lagom .package-content {
Text-align: left;


}

/* =========================================================
   ZENTIC UI POLISH v1  (260628) — Fase 1
   Direct geladen via theme-custom.css.
   Rollback: cp ~/backups/theme-custom.css.bak-260628-2152 over dit bestand
   (let op: backup mist de afsluitende } van .package-content — die is hier toegevoegd).
   ========================================================= */

/* 1) CONTRAST FIX — uit Google Docs geplakte spans (inline color, bv. rgb(31,41,55))
   waren onleesbaar op de donkere hero- en domein-secties. Forceer leesbare kleur op
   de child-spans zelf (verslaat inline color zonder !important). */
.dark-text .banner-subtitle,
.dark-text .banner-subtitle p,
.dark-text .banner-subtitle span,
.dark-text .banner-subtitle a,
.section-primary .section-desc,
.section-primary .section-desc p,
.section-primary .section-desc span,
.section-primary .section-desc a,
.section-primary .section-subtitle,
.section-primary .section-subtitle p,
.section-primary .section-subtitle span {
  color: var(--zentic-color-white) !important;
}
.dark-text .banner-subtitle span,
.section-primary .section-desc span,
.section-primary .section-subtitle span {
  background-color: transparent !important;
}

/* 2) HERO — subtitel-ritme, titel-balance en prijs/CTA-uitlijning */
.dark-text .banner-content .banner-title {
  text-wrap: balance;
}
.dark-text .banner-content .banner-subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.dark-text .banner-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.dark-text .banner-actions-price.price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

/* 3) PRICING — 2-koloms pakketrij centreren (loze ruimte rechts weg) + gelijke kaarthoogte */
.wp-hosting-home .row-packages-2 {
  justify-content: center;
}
.wp-hosting-home .package-col .package.is-boxed {
  height: 100%;
}

/* =========================================================
   ZENTIC DARK MODE v1  (260629)
   Maakt Zentic's lichte overrides dark-proof. Alle regels zijn
   .lagom-dark-mode-gescoped -> raken light mode NIET (geen regressie).
   Rollback: cp ~/backups/theme-custom.css.bak-260629-2348 over dit bestand.
   ========================================================= */

/* 1) Veilig te flippen Zentic-vars (alleen als achtergrond / als dark-text gebruikt) */
.lagom-dark-mode {
  --zentic-color-bg: #0d1b24;        /* body + lichte secties -> donker navy */
  --zentic-color-text-dark: #e8eef2; /* .section-default titels -> licht */
}

/* 2) Surfaces die var(--zentic-color-white) of hardcoded wit als ACHTERGROND gebruiken
   (--zentic-color-white kan niet geflipt worden: ook gebruikt als tekstkleur) */
.lagom-dark-mode .wrapper .main-content { background-color: #0d1b24 !important; }
.lagom-dark-mode .section-faq .faq-item-boxed { background: #16242e !important; }
.lagom-dark-mode .legal .section-body { background-color: #16242e !important; }
.lagom-dark-mode .verification-banner,
.lagom-dark-mode .email-verification { background-color: #16242e !important; }

/* 3) Donkere navigatie-/dropdown-teksten leesbaar maken op donkere dropdown */
.lagom-dark-mode #Primary_Navbar-Support-Contact_Us a,
.lagom-dark-mode #Primary_Navbar-Support-News a,
.lagom-dark-mode #Primary_Navbar-Support-Belafspraak_maken a,
.lagom-dark-mode #Primary_Navbar-Support-Knowledgebase a { color: #e8eef2 !important; }
.lagom-dark-mode .black-text .item-text { color: #e8eef2 !important; }

/* 4) Sectie-bodytekst (default/CMS/uit Google Docs geplakt) leesbaar op donker.
   Donkere tekst in .section-desc/-subtitle/feature-desc werd onzichtbaar op donkere bg. */
.lagom-dark-mode .section-desc,
.lagom-dark-mode .section-desc :is(p, span, li, strong, em),
.lagom-dark-mode .section-subtitle,
.lagom-dark-mode .section-subtitle :is(p, span, li),
.lagom-dark-mode .feature-desc,
.lagom-dark-mode .feature-desc :is(p, span, li),
.lagom-dark-mode .feature-title {
  color: #cdd9e1 !important;
}
/* Links binnen sectietekst: Zentic mint-accent i.p.v. donker navy */
.lagom-dark-mode .section-desc a,
.lagom-dark-mode .section-subtitle a,
.lagom-dark-mode .feature-desc a {
  color: #a8edc0 !important;
}

/* 5) Sectie-captions (kleine labels boven titels) gedempt-licht op donker */
.lagom-dark-mode .section-caption,
.lagom-dark-mode .section-caption :is(p, span) {
  color: #8aa0ad !important;
}

/* 6) Legal-paginas (.zentic-legal) — hardcoded donkere koppen/tekst onzichtbaar op donker */
.lagom-dark-mode .zentic-legal :is(h1, h3, h4, h5) { color: #e8eef2 !important; }
.lagom-dark-mode .zentic-legal h2 { color: #ffffff !important; }
.lagom-dark-mode .zentic-legal p,
.lagom-dark-mode .zentic-legal li { color: #cdd9e1 !important; }
.lagom-dark-mode .zentic-legal a { color: #a8edc0 !important; }
.lagom-dark-mode .zentic-legal a:hover { color: #c9f5d8 !important; }
.lagom-dark-mode .zentic-legal hr { background: #2a3a45 !important; }
.lagom-dark-mode .zentic-legal th {
  background: #16242e !important;
  color: #e8eef2 !important;
  border-bottom-color: #2a3a45 !important;
}
.lagom-dark-mode .zentic-legal td { border-bottom-color: #2a3a45 !important; }
.lagom-dark-mode .zentic-legal .zentic-highlight { background: #16242e !important; }

/* 7) Legal-secties: tekst staat als kale <p>/<li> in .section-legal (NIET in .section-desc).
   Default donkere sectie-tekst was onzichtbaar op donker. */
.lagom-dark-mode .section-legal,
.lagom-dark-mode .section-legal :is(p, li, span, strong, em, td, th, blockquote) {
  color: #cdd9e1 !important;
}
.lagom-dark-mode .section-legal :is(h1, h2, h3, h4, h5, h6) { color: #e8eef2 !important; }
.lagom-dark-mode .section-legal a { color: #a8edc0 !important; }
/* Legal zijbalk-navigatie */
.lagom-dark-mode .nav-legal a { color: #cdd9e1 !important; }
.lagom-dark-mode .nav-legal a:hover,
.lagom-dark-mode .nav-legal .active > a { color: #ffffff !important; }

/* =========================================================
   ZENTIC DARK MODE v2  (260630) — navy surfaces + blauwe-tekst fix
   Feedback: grijze cards passen niet bij navy -> donkerder blauw;
   resterende blauwe teksten (packages, prijzen, login-links, dashboard) -> licht.
   ========================================================= */

/* 1) Lagom dark-palet naar NAVY i.p.v. grijs (DRY: raakt alle blocks/panels/knoppen) */
.lagom-dark-mode {
  --ui-block-bg: #12283a;             /* cards/panels: grijs #242424 -> navy */
  --ui-block-divider-color: #20415a;
  --state-default-bg: #173044;        /* secundaire knoppen/inputs (Beheren, Bijwerken) */
  --state-default-bg-hover: #1f4058;
  --state-default-text: #cdd9e1;
  --state-default-text-hover: #ffffff;
  --state-default-border: #24465f;
  --state-default-border-active: #2e5878;
  --state-default-divider: #24465f;
  /* Links: waren var(--brand-primary) = navy #014466 -> licht blauw */
  --link-color: #8fc7e8;
  --link-hover-color: #bfe0f5;
  /* Icoon-hover was fel blauw #009AFF -> gedempt */
  --dark-mode-gray-icons-hover: #8fc7e8;
}

/* 2) Pakket-cards: beschrijving + prijs waren donker/blauw op donker */
.lagom-dark-mode .package-content,
.lagom-dark-mode .package-content :is(p, span, li, strong) {
  color: #cdd9e1 !important;
}
.lagom-dark-mode .package .price,
.lagom-dark-mode .package .price :is(.price-title, .price-cycle, span) {
  color: #cdd9e1 !important;
}
.lagom-dark-mode .package .price .price-ammount { color: #ffffff !important; }

/* 3) Login-footer links (Wachtwoord vergeten / Nog geen klant / Taal) leesbaar */
.lagom-dark-mode .app-login a,
.lagom-dark-mode .section-login a,
.lagom-dark-mode .panel-login a,
.lagom-dark-mode .login-footer a,
.lagom-dark-mode .app-login .lang-name { color: #8fc7e8 !important; }

/* =========================================================
   ZENTIC DARK MODE v3  (260630) — dropdowns, knoppen, faint tekst
   Feedback-ronde 2: nav-dropdown grijs, grijze knoppen, onzichtbare
   prijzen (TLD-tabel), footer-copyright + faded tekst blauw/onleesbaar.
   ========================================================= */
.lagom-dark-mode {
  /* Nav-dropdownmenu's: grijs #242424 -> navy */
  --dropdown-bg: #12283a;
  --dropdown-collapse-bg: #12283a;

  /* Default/secundaire knoppen (Meer informatie, Nieuw contact, Beheren) -> navy + lichte tekst */
  --btn-default-bg: #173044;
  --btn-default-color: #e3ebf0;
  --btn-default-border: #294b65;
  --btn-default-hover-bg: #1f4058;
  --btn-default-active-bg: #1f4058;

  /* Restant grijs-schaal -> navy (vangt diverse grijze surfaces/gradients) */
  --dark-mode-gray-faded: #16314a;
  --dark-mode-gray-lighter-4: #173044;
  --dark-mode-gray-lighter-3: #1f4058;
  --dark-mode-gray-gradient-start: #12283a;
  --dark-mode-gray-gradient-end: #12283a;

  /* Faded/secundaire tekst was var(--brand-primary)=navy -> onzichtbaar */
  --text-secondary-faded-color: rgba(205, 217, 225, 0.78);
}

/* Footer-copyright (was donkerblauw op donker) */
.lagom-dark-mode .footer-copyright,
.lagom-dark-mode .footer-copyright :is(a, span) { color: #8aa0ad !important; }

/* TLD-prijstabel: bedragen (td) waren navy-op-navy = onzichtbaar */
.lagom-dark-mode .tld-table td { color: #cdd9e1 !important; }
.lagom-dark-mode .tld-table td:first-child { color: #ffffff !important; }


/* =========================================================
   ZENTIC TEAL RESTYLE v1 (260630) — felle teal #00C2B2 als hoofdaccent.
   Navy basis (#014466) behouden. Direct geladen via theme-custom.css.
   Rollback: cp ~/backups/theme-custom.css.bak-260630-<ts> over dit bestand.
   ========================================================= */

/* 1) Accent-tokens + variabele-overrides (light mode) */
:root {
  --zentic-teal:       #00C2B2;
  --zentic-teal-dark:  #009E91;
  --zentic-teal-mint:  #2DD4BF;
  --zentic-teal-tint:  #ECFDFB;
  --zentic-teal-ink:   #012E45;   /* leesbare tekst op teal */

  /* Primaire CTA (was crème #faefd2) -> felle teal + navy tekst */
  --btn-primary-bg:          var(--zentic-teal);
  --btn-primary-color:       #ffffff;   /* witte knoptekst op teal */
  --btn-primary-hover-bg:    var(--zentic-teal-dark);
  --btn-primary-hover-color: #ffffff;

  /* Faded CTA-variant (lichte knoppen, bv. "Lees meer") -> teal-tint i.p.v. crème */
  --btn-primary-faded-bg:          var(--zentic-teal-tint);
  --btn-primary-faded-color:       var(--zentic-teal-dark);
  --btn-primary-faded-hover-bg:    #c7f2ec;
  --btn-primary-faded-hover-color: var(--zentic-teal-ink);

  /* Zentic-eigen accent harmoniseren naar felle teal */
  --zentic-color-accent:            var(--zentic-teal-mint);
  --zentic-spotlight-bg:            #9ff0e6;
  --svg-banner-primary-shape-right: var(--zentic-teal);

  /* Links/accenten naar teal i.p.v. navy */
  --link-color:       var(--zentic-teal-dark);
  --link-hover-color: var(--zentic-teal);
}

/* 2) Dark-mode parity — teal blijft accent, iets lichter voor contrast op donker */
.lagom-dark-mode {
  --btn-primary-bg:       #10d4c3;
  --btn-primary-color:    #04261f;
  --btn-primary-hover-bg: #2dd4bf;
  --link-color:           #5fd6c9;
  --link-hover-color:     #8fe7dd;
  --zentic-color-accent:  #34d3be;
}


/* =========================================================
   ZENTIC BANNER COVER + OVERLAY v1 (260630)
   Hoort bij de custom sectie "Banner – Cover" (config/banner-cover/).
   - type-7: cover achtergrondafbeelding, links uitgelijnde tekst
   - tekstkleur light/dark (.banner-text-light / .banner-text-dark)
   - gradient overlay donker->transparant, links->rechts (.banner-overlay-*)
   Direct geladen via theme-custom.css.
   Rollback: cp ~/backups/theme-custom.css.bak-260630-<ts> over dit bestand.
   ========================================================= */

/* 1) Cover-laag: achtergrondafbeelding full-bleed achter de content */
.banner-cover {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
}
.banner-cover .banner-cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.banner-cover .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* Linksuitlijning + ademruimte zoals de hero in het ontwerp */
.banner-cover .banner-content {
  max-width: 640px;
}

/* 2) Gradient overlay — links donker -> rechts transparant.
   Navy (#012E45) i.p.v. zwart = on-brand. Intensiteit via root-class;
   werkt alleen als er een achtergrondafbeelding is. */
.banner-overlay .banner-graphic-background-image::after,
.banner-overlay .banner-cover-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.banner-overlay-subtle .banner-graphic-background-image::after,
.banner-overlay-subtle .banner-cover-bg::after {
  background: linear-gradient(90deg, rgba(1, 46, 69, 0.55) 0%, rgba(1, 46, 69, 0.28) 40%, rgba(1, 46, 69, 0) 75%);
}
.banner-overlay-medium .banner-graphic-background-image::after,
.banner-overlay-medium .banner-cover-bg::after {
  background: linear-gradient(90deg, rgba(1, 46, 69, 0.78) 0%, rgba(1, 46, 69, 0.45) 45%, rgba(1, 46, 69, 0) 80%);
}
.banner-overlay-strong .banner-graphic-background-image::after,
.banner-overlay-strong .banner-cover-bg::after {
  background: linear-gradient(90deg, rgba(1, 46, 69, 0.92) 0%, rgba(1, 46, 69, 0.6) 50%, rgba(1, 46, 69, 0.05) 85%);
}

/* 3) Tekstkleur-schema's (werken op elk banner-type, mits expliciet gekozen) */
.banner-text-light .banner-caption,
.banner-text-light .banner-title,
.banner-text-light .banner-subtitle,
.banner-text-light .banner-subtitle :is(p, span, li, a, strong, em) {
  color: var(--zentic-color-white, #ffffff) !important;
}
.banner-text-dark .banner-caption,
.banner-text-dark .banner-title,
.banner-text-dark .banner-subtitle,
.banner-text-dark .banner-subtitle :is(p, span, li, strong, em) {
  color: var(--zentic-teal-ink, #012E45) !important;
}

/* 4) Content-uitlijning binnen de cover banner (alleen .banner-cover / type-7).
   Verticaal via flex (align-items), horizontaal via marge + text-align.
   content_position "vpos-hpos" -> classes banner-vpos-* + banner-hpos-*. */
.banner-cover.banner-vpos-top { align-items: flex-start; }
.banner-cover.banner-vpos-center { align-items: center; }
.banner-cover.banner-vpos-bottom { align-items: flex-end; }
.banner-cover.banner-hpos-left .banner-content { margin-right: auto; text-align: left; }
.banner-cover.banner-hpos-center .banner-content { margin-left: auto; margin-right: auto; text-align: center; }
.banner-cover.banner-hpos-right .banner-content { margin-left: auto; margin-right: 0; text-align: right; }

/* ============================================================
   ZENTIC DARK MODE v4 — 260701
   Root cause: het Zentic-palet mapt veel tekst-vars naar
   var(--brand-primary); Lagom remapt --brand-primary in dark
   mode naar #012f47 (bedoeld als bg-kleur) zonder deze
   tekst-vars een lichte dark-waarde te geven -> navy-op-navy.
   Alles strikt .lagom-dark-mode-gescoped (geen light-impact).
   ============================================================ */
html.lagom-dark-mode {
  --text-body-color: #cdd9e1;
  --text-secondary-heading-color: #e8eef2;
  --text-secondary-lighter-color: #b7c7d3;
  --ui-nav-link-active-color: #8fc7e8;
  --ui-nav-link-hover-color: #8fc7e8;
  --ui-nav-secondary-link-color: #cdd9e1;
  --ui-nav-secondary-link-active-color: #8fc7e8;
  --ui-nav-secondary-link-icon-color: #cdd9e1;
  --search-field-combined-icon-color: #8fc7e8;
  --primary-block-input-icon-color: #cdd9e1;
  --range-slider-price-color: #e8eef2;
  --range-slider-value-active-color: #8fc7e8;
}

/* Header-nav: custom.css (gecompileerd) forceert navy
   (--zentic-teal-ink !important) op de nav in scroll-up/
   header-on-light states — bedoeld voor de witte header in
   light mode; in dark mode blijft de header donker. */
html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up .app-nav-primary ul.top-nav > li > a:not(.btn),
html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up .app-nav-primary ul.top-nav > li > a:not(.btn) > i {
  color: #e8eef2 !important;
}
@media (min-width: 992px) {
  html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up #main-menu ul.menu-primary > li > a:not(.btn) .item-text,
  html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up #main-menu ul.menu-primary > li > a:not(.btn) > i,
  html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up #main-menu ul.menu-primary > li > a:not(.btn) .ls-caret,
  html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) .app-nav-primary ul.top-nav > li > a:not(.btn),
  html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) .app-nav-primary ul.top-nav > li > a:not(.btn) > i,
  html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) #main-menu ul.menu-primary > li > a:not(.btn) .item-text,
  html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) #main-menu ul.menu-primary > li > a:not(.btn) > i,
  html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) #main-menu ul.menu-primary > li > a:not(.btn) .ls-caret {
    color: #e8eef2 !important;
  }
}

/* Banner-teksten: uit Google Docs geplakte content heeft inline
   color op geneste spans (bijv. rgb(31,41,55)) -> onleesbaar op
   donkere banners. Laat spans erven van hun (correct gethemede)
   parent — alleen in dark mode. */
html.lagom-dark-mode .banner-title span,
html.lagom-dark-mode .banner-subtitle span,
html.lagom-dark-mode .banner-caption span {
  color: inherit !important;
}

/* Sticky header (scroll-up state): custom.css forceert een witte
   balk (#fff !important) — in dark mode een donkere balk, passend
   bij --ui-block-bg, zodat de lichte nav-tekst leesbaar blijft. */
html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up .app-nav,
html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up .app-nav-menu {
  background: #12283a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Logo: custom.css wisselt in scroll-up/header-on-light states naar
   het donkere logo (content: url) voor de witte balk in light mode.
   In dark mode blijft de balk donker -> witte inverse-logo behouden. */
html.lagom-dark-mode .page-lagom-cms.lagom-layout-top.scroll-up .app-nav a.logo .logo-img,
html.lagom-dark-mode body:has(.header-on-light).page-lagom-cms.lagom-layout-top:not(.scroll-up) .app-nav a.logo .logo-img {
  content: url('/templates/lagom2/assets/img/logo/logo_big_inverse.918193365.png');
}