/* ==========================================================================
   Beate Ackermans Coaching — huisstijl

   (C) Dean Evers  - Zeriso 2026

   Laatst bijgewerkt: 14-08-2026
   ========================================================================== */
@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');
}

:root {
  /* --- kern (uit logo) --- */
  --ba-navy:        #222C36;
  --ba-olive:       #5E603F;
  --ba-beige:       #F4EADE;

  /* --- afgeleid --- */
  --ba-navy-hover:  #1A2128;   /* navy  +25% zwart */
  --ba-olive-hover: #494B31;   /* olijf +22% zwart */
  --ba-olive-light: #A8AB86;   /* olijf opgelicht, voor donkere footer */
  --ba-white:       #F9F3ED;   /* beige +45% wit, page background */
  --ba-body:        #535A62;   /* navy  +22% wit,  6.3:1 */
  --ba-muted:       #7F858A;   /* navy  +42% wit,  3.4:1 — alleen groot/bold */
  --ba-line:        #D2C9BF;   /* beige +14% zwart */
  --ba-footer-text: #B9BEC2;

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

/* --------------------------------------------------------------------------
   1. Algemeen  (Helix: Background / Text / Heading / Link Color)
   -------------------------------------------------------------------------- */

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); }

/* --------------------------------------------------------------------------
   2. Header en hoofdmenu
   -------------------------------------------------------------------------- */

#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-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);
}

/* --------------------------------------------------------------------------
   3. Dropdown
   -------------------------------------------------------------------------- */

.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);
}

/* --------------------------------------------------------------------------
   4. 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);
}

/* --------------------------------------------------------------------------
   5. Secties  (Helix-presets dekken dit NIET)
   -------------------------------------------------------------------------- */

.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); }

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

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

#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;
}

/* --------------------------------------------------------------------------
   7. Details: randen, formulieren, muted tekst
   -------------------------------------------------------------------------- */

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; }

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

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

/* Zichtbare focus voor toetsenbordnavigatie — vaak weggestyled in templates */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ba-olive);
  outline-offset: 2px;
}