/* ==========================================================================
   Beate Ackermans Coaching — huisstijl
   (C) Dean Evers - Zeriso 2026
   Laatst bijgewerkt: 01-11-2026

   1. Fonts
   2. Tokens
   3. Basis
   4. Header en menu
   5. Offcanvas
   6. Knoppen
   7. Secties
   8. Footer
   9. Formulieren
  10. Lijnen en meta
  11. Focus en selectie
  12. Componenten
  13. Juridische pagina's
  14. Pagina-specifiek
   ========================================================================== */


/* 1. Fonts ================================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/media/beate/fonts/montserrat-v30-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/media/beate/fonts/montserrat-v30-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/media/beate/fonts/montserrat-v30-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/media/beate/fonts/playfair-display-v37-latin_latin-ext-regular.woff2') format('woff2');
}


/* 2. Tokens =============================================================== */

:root {
  --ba-navy:        #222C36;
  --ba-olive:       #5E603F;
  --ba-beige:       #F4EADE;

  --ba-navy-hover:  #1A2128;   /* navy  +25% zwart */
  --ba-olive-hover: #494B31;   /* olijf +22% zwart */
  --ba-olive-light: #A8AB86;   /* olijf opgelicht, 5.96:1 op navy */
  --ba-white:       #F9F3ED;   /* beige +45% wit, page background */
  --ba-body:        #535A62;   /* navy  +22% wit, 6.34:1 op --ba-white */
  --ba-muted:       #7F858A;   /* navy  +42% wit, 3.39:1, alleen groot of bold */
  --ba-line:        #D2C9BF;   /* beige +14% zwart */
  --ba-footer-text: #B9BEC2;   /* 7.56:1 op navy */

  --ba-serif: "Playfair Display", Georgia, serif;
  --ba-sans:  "Montserrat", system-ui, -apple-system, sans-serif;
}


/* 3. Basis ================================================================ */

body.site {
  background-color: var(--ba-white);
  color: var(--ba-body);
  font-family: var(--ba-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--ba-serif);
  font-weight: 400;          /* niet bold: botst met de logo-wordmark */
  color: var(--ba-navy);
  letter-spacing: -0.005em;
}

h4, h5, h6 {
  font-family: var(--ba-sans);
  font-weight: 600;
  color: var(--ba-navy);
}

a {
  color: var(--ba-olive);
  text-decoration: none;
}

a:hover,
a:focus { color: var(--ba-navy); }


/* 4. Header en menu ======================================================= */

#sp-header {
  background-color: var(--ba-white);
  box-shadow: none;
  border-bottom: 1px solid var(--ba-line);
}

#sp-header .logo-image {
  max-height: 48px;
  width: auto;
}

#sp-header .container-inner > .row { align-items: center; }

#sp-menu { flex: 1 1 auto; }

#sp-menu .sp-column {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#sp-menu .sp-megamenu-parent { margin-left: auto; }

.sp-megamenu-parent > li > a {
  font-family: var(--ba-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ba-navy);
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a { color: var(--ba-olive); }

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background-color: #FFFFFF;
  border: 1px solid var(--ba-line);
  box-shadow: 0 8px 24px rgba(34, 44, 54, 0.08);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { color: var(--ba-body); }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: var(--ba-navy);
  background-color: var(--ba-beige);
}


/* 5. Offcanvas ============================================================ */

.offcanvas-menu { background: var(--ba-white); }

.offcanvas-menu .offcanvas-inner .sp-module ul > li > a { color: var(--ba-navy); }

.offcanvas-menu .offcanvas-inner .sp-module ul > li > a:hover { color: var(--ba-olive); }


/* 6. Knoppen ============================================================== */

.btn-primary,
.sppb-btn-primary,
#sp-header .sp-menu-button .btn {
  background-color: var(--ba-navy);
  border-color: var(--ba-navy);
  color: var(--ba-white);
  font-family: var(--ba-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;        /* strak past beter bij een serif-wordmark */
  transition: background-color .2s ease, border-color .2s ease;
}

.btn-primary:hover,
.sppb-btn-primary:hover,
#sp-header .sp-menu-button .btn:hover {
  background-color: var(--ba-olive);
  border-color: var(--ba-olive);
  color: var(--ba-white);
}

.btn-secondary,
.sppb-btn-secondary {
  background-color: transparent;
  border-color: var(--ba-navy);
  color: var(--ba-navy);
}

.btn-secondary:hover,
.sppb-btn-secondary:hover {
  background-color: var(--ba-navy);
  color: var(--ba-white);
}

/* Convert Forms levert zijn eigen knop; die haakt hierop aan */
.cf .cf-button-submit,
.cf-form .cf-button-submit {
  background-color: var(--ba-navy);
  border-color: var(--ba-navy);
  color: var(--ba-white);
  font-family: var(--ba-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
}

.cf .cf-button-submit:hover,
.cf-form .cf-button-submit:hover {
  background-color: var(--ba-olive);
  border-color: var(--ba-olive);
  color: var(--ba-white);
}


/* 7. Secties ============================================================== */

.sppb-section-beige,
.sp-section-alt { background-color: var(--ba-beige); }

.sppb-section-navy { background-color: var(--ba-navy); }

.sppb-section-navy,
.sppb-section-navy p { color: var(--ba-footer-text); }

.sppb-section-navy h1,
.sppb-section-navy h2,
.sppb-section-navy h3 { color: var(--ba-white); }

/* olijf haalt maar 2.17:1 op navy, dus links krijgen daar de lichte variant */
.sppb-section-navy a { color: var(--ba-olive-light); }

.sppb-section-navy a:hover,
.sppb-section-navy a:focus { color: var(--ba-white); }


/* 8. Footer =============================================================== */

#sp-footer,
#sp-bottom {
  background-color: var(--ba-navy);
  color: var(--ba-white);
}

#sp-footer a,
#sp-bottom a { color: var(--ba-white); }

#sp-footer a:hover,
#sp-bottom a:hover { color: var(--ba-olive-light); }

#sp-bottom .sp-module-title {
  color: var(--ba-white);
  font-family: var(--ba-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#sp-footer ul.menu {
  display: block;
  margin: 0;
}

#sp-footer ul.menu li {
  display: block;
  margin: 0 0 10px 0;
}

#sp-footer ul.menu li:last-child { margin-bottom: 0; }

#sp-copyright-banner {
  color: var(--ba-footer-text);
  background: var(--ba-navy);
  min-height: 100px;
  border-top: 1px solid #171E25;        /* schaduw */
  box-shadow: inset 0 1px 0 #303C48;    /* highlight, direct eronder */
}

#sp-copyright-banner p,
#sp-copyright-banner a,
#sp-copyright-banner b,
#sp-copyright-banner h3,
#sp-copyright-banner h4 { color: var(--ba-footer-text); }


/* 9. Formulieren ========================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select,
.form-control {
  background-color: #FFFFFF;
  border: 1px solid var(--ba-line);
  border-radius: 2px;
  color: var(--ba-body);
  font-family: var(--ba-sans);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--ba-olive);
  box-shadow: 0 0 0 3px rgba(94, 96, 63, 0.15);
  outline: none;
}


/* 10. Lijnen en meta ====================================================== */

hr,
.sp-module ul.menu > li,
table td,
table th { border-color: var(--ba-line); }

.breadcrumb,
.article-info,
.sppb-addon-article-meta {
  color: var(--ba-muted);
  font-size: 14px;
}


/* 11. Focus en selectie =================================================== */

::selection {
  background: var(--ba-olive);
  color: var(--ba-white);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ba-olive);
  outline-offset: 2px;
}


/* 12. Componenten ========================================================= */

/* kleine bovenkop boven een h1 of h2 */
.eyebrow {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--ba-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ba-olive);
}

.sppb-section-navy .eyebrow { color: var(--ba-olive-light); }

/* prijstabel */
.prijslijst {
  width: 100%;
  border-collapse: collapse;
}

.prijslijst th,
.prijslijst td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ba-line);
  text-align: left;
  vertical-align: top;
}

.prijslijst th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ba-muted);
}

.prijslijst th:nth-child(n+2),
.prijslijst td:nth-child(n+2) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prijslijst small { color: var(--ba-muted); }

@media (max-width: 560px) {
  .prijslijst { font-size: 15px; }
  .prijslijst th,
  .prijslijst td { padding: 10px 8px; }
}

/* opsomming met een olijfstreepje */
.opbrengsten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.opbrengsten li {
  position: relative;
  padding-left: 26px;
}

.opbrengsten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--ba-olive);
}

.opbrengsten strong { color: var(--ba-navy); }

.sppb-section-navy .opbrengsten li::before { background: var(--ba-olive-light); }

.sppb-section-navy .opbrengsten strong { color: var(--ba-white); }


/* 13. Juridische pagina's ================================================= */

/* artikel- en lidnummers komen uit counters, dus de nummering
   hernummert zich als er een artikel bij komt of weg gaat */

.av {
  counter-reset: av-artikel;
  max-width: 48rem;
}

.av-versie {
  margin: 0 0 2.5rem;
  font-family: var(--ba-sans);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ba-muted);
}

.av-inhoud {
  margin: 0 0 3.5rem;
  padding: 1.75rem 2rem;
  background: var(--ba-beige);
  border-left: 3px solid var(--ba-olive);
}

.av-inhoud-kop {
  margin: 0 0 1rem;
  font-family: var(--ba-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ba-olive);
}

.av-inhoud ol {
  margin: 0;
  padding-left: 1.5rem;
  columns: 2;
  column-gap: 2.5rem;
}

.av-inhoud li {
  margin: 0 0 .4rem;
  padding-left: .25rem;
  break-inside: avoid;
}

.av-inhoud li::marker {
  color: var(--ba-olive);
  font-variant-numeric: tabular-nums;
}

.av-inhoud a {
  color: var(--ba-body);
  border-bottom: 1px solid transparent;
}

.av-inhoud a:hover,
.av-inhoud a:focus-visible {
  color: var(--ba-navy);
  border-bottom-color: var(--ba-olive);
}

@media (max-width: 575px) {
  .av-inhoud { padding: 1.25rem; }
  .av-inhoud ol { columns: 1; }
}

.av-artikel {
  counter-increment: av-artikel;
  counter-reset: av-lid;
  margin: 0 0 3rem;
  scroll-margin-top: 7rem;   /* vaste header niet over de kop heen */
}

body .av-artikel h2 {
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  font-size: 1.35rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--ba-line);
}

.av-artikel h2::before {
  content: "Artikel " counter(av-artikel);
  display: block;
  margin-bottom: .4rem;
  font-family: var(--ba-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ba-olive);
}

.av-artikel > ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.av-artikel > ol > li {
  counter-increment: av-lid;
  position: relative;
  margin: 0 0 1rem;
  padding-left: 3.25rem;
}

.av-artikel > ol > li::before {
  content: counter(av-artikel) "." counter(av-lid);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  font-family: var(--ba-sans);
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ba-olive);
  line-height: inherit;
}

.av-artikel > ol > li:last-child { margin-bottom: 0; }

.av-definities { margin: 1.25rem 0 0; }

.av-definities dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--ba-navy);
}

.av-definities dt:first-child { margin-top: 0; }

.av-definities dd { margin: .15rem 0 0; }

.av-nawgegevens {
  display: block;
  font-style: normal;
  line-height: 1.8;
}

.av-nawgegevens strong { color: var(--ba-navy); }

.pv-verwerkers {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pv-verwerkers li {
  position: relative;
  padding-left: 22px;
}

.pv-verwerkers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 2px;
  background: var(--ba-olive);
}

.pv-verwerkers strong { color: var(--ba-navy); }

@media print {
  .av-inhoud { display: none; }
  .av { max-width: none; }
  .av-artikel {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
  }
  body .av-artikel h2 { page-break-after: avoid; }
  .av a { color: inherit; }
}