/*.menu {
    background-color: #2d3f5e !important;
}

.site-footer {
    background-color: #2d3f5e !important;
}*/

.entry-title,
.page-title {
    display: none !important;
}

@media (max-width: 768px) {

    /* Volledige breedte benutten, witruimte weghalen */
    .site-content,
    .entry-content,
    .panel-row-style,
    .siteorigin-panels-stretch,
    .widget-area,
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Lettertype verkleinen */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    p {
        font-size: 1rem !important;
    }
		
		 .site-main,
    .full-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   Schasfoort Insights – Aangepaste huisstijl
   Plak dit in: Weergave → Aanpassen → Aanvullende CSS
   ============================================================

   Kleurenpalet (logo-kleuren als basis):
   --navy:  #2d3f5e  →  primaire kleur (achtergronden, koppen)
   --teal:  #4a8a7a  →  accentkleur (knoppen, links, highlights)
   --dark:  #1c2a3a  →  footer, diepte
   ============================================================ */

/* ── 1. CSS-variabelen (centrale kleurendefinitie) ─────────── */
:root {
  --si-navy:       #2d3f5e;
  --si-navy-dark:  #1c2a3a;
  --si-teal:       #4a8a7a;
  --si-teal-light: #5fa090;
  --si-white:      #ffffff;
  --si-off-white:  #f5f7f4;
  --si-grey:       #8a9aaa;
  --si-text:       #2a3545;
}

/* ── 2. Navigatie ──────────────────────────────────────────── */
#masthead,
.site-header,
header.site-header {
  background-color: var(--si-white) !important;
  border-bottom: 1px solid rgba(45, 63, 94, 0.12) !important;
}

/* Alle navigatielinks: teal/groen */
.main-navigation a,
#site-navigation a,
.nav-menu a,
.main-navigation ul li a {
  color: var(--si-teal) !important;
}

/* Hover en actief menu-item: groene achtergrond, navy tekst */
.main-navigation a:hover,
#site-navigation a:hover,
.nav-menu a:hover,
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.nav-menu .current-menu-item > a {
  background-color: var(--si-teal) !important;
  color: var(--si-navy) !important;
 /* padding-left: 12px !important;
  padding-right: 12px !important;*/
}

/*
 *  ── 3. Koppen (H1, H2, H3) ────────────────────────────────── */
/*h1, h2, h3,
.entry-title,
.page-title {
  color: var(--si-navy) !important;
}
*/

/* Koppen op donkere achtergrond (laat wit) */
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
[style*="background-color: #0f1923"] h1,
[style*="background-color: #0f1923"] h2,
[style*="background-color: #0f1923"] h3,
[style*="background-color:#0f1923"] h1,
[style*="background-color:#0f1923"] h2,
[style*="background-color:#0f1923"] h3 {
  color: var(--si-white) !important;
}

/* ── 4. Achtergrondkleuren – inline stijlen overschrijven ──── */

/* Donkere secties: #0f1923 → navy */
[style*="background-color: #0f1923"],
[style*="background-color:#0f1923"],
[style*="background: #0f1923"],
[style*="background:#0f1923"] {
  background-color: var(--si-navy) !important;
}

/* Donkere secties met iets andere tinten → navy-dark */
[style*="background-color: #1a1a2e"],
[style*="background-color: #111827"],
[style*="background-color: #0d1117"] {
  background-color: var(--si-navy-dark) !important;
}

/* ── 5. Knoppen ────────────────────────────────────────────── */
.wp-block-button__link,
.button,
a.button,
input[type="submit"],
button[type="submit"],
.sow-button,
.sow-btn,
.vc_btn {
  background-color: var(--si-teal) !important;
  border-color: var(--si-teal) !important;
  color: var(--si-white) !important;
}

.wp-block-button__link:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
.sow-button:hover,
.sow-btn:hover {
  background-color: var(--si-teal-light) !important;
  border-color: var(--si-teal-light) !important;
}

/* Ghost / outline knop variant */
.button.outline,
.sow-button.outline {
  background-color: transparent !important;
  border: 2px solid var(--si-teal) !important;
  color: var(--si-teal) !important;
}

/* ── 6. Links ──────────────────────────────────────────────── */
a {
  color: var(--si-teal) !important;
}

a:hover {
  color: var(--si-teal-light) !important;
}

/* Links in navigatie en footer behouden eigen stijl */
.main-navigation a,
footer a,
.site-footer a {
  color: inherit !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--si-teal-light) !important;
}

/* ── 7. Accentelementen (borders, highlights) ──────────────── */
.wp-block-separator,
hr {
  border-color: var(--si-teal) !important;
}

/* SiteOrigin divider widget */
.sow-image-overlay,
.so-widget-sow-divider .divider {
  background-color: var(--si-teal) !important;
  border-color: var(--si-teal) !important;
}

/* ── 8. Footer ─────────────────────────────────────────────── */
.site-footer,
footer.site-footer,
#colophon {
  background-color: var(--si-navy-dark) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.site-footer p,
#colophon p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── 9. Formulieren ────────────────────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--si-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 138, 122, 0.2) !important;
}

/* ── 10. Gouden accentkleur (#d4ad5a) overschrijven → teal ── */

/* Tekst */
[style*="color: #d4ad5a"],
[style*="color:#d4ad5a"],
[style*="color: #D4AD5A"],
[style*="color:#D4AD5A"] {
  color: var(--si-teal) !important;
}

/* Achtergrond */
[style*="background-color: #d4ad5a"],
[style*="background-color:#d4ad5a"],
[style*="background-color: #D4AD5A"],
[style*="background-color:#D4AD5A"] {
  background-color: var(--si-teal) !important;
}

/* Border / belijning */
[style*="border-color: #d4ad5a"],
[style*="border-color:#d4ad5a"],
[style*="border-color: #D4AD5A"],
[style*="border-color:#D4AD5A"],
[style*="border: 1px solid #d4ad5a"],
[style*="border: 2px solid #d4ad5a"] {
  border-color: var(--si-teal) !important;
}

/* SiteOrigin specifieke divider/separator widget */
.so-widget-sow-divider [style*="#d4ad5a"],
.sow-divider [style*="#d4ad5a"] {
  background-color: var(--si-teal) !important;
  border-color: var(--si-teal) !important;
}

/* ── 11. Selectie (tekst markeren) ────────────────────────── */
::selection {
  background-color: var(--si-teal) !important;
  color: var(--si-white) !important;
}