/*
Theme Name: Modern Isolatie
Theme URI: https://modernisolatie.nl
Author: Modern Isolatie
Author URI: https://modernisolatie.nl
Description: Een lichtgewicht, Elementor-vriendelijk WordPress-thema voor Modern Isolatie. Specialist in woningisolatie en subsidieadvies. Eco-groene huisstijl, geoptimaliseerd voor gebruik met Elementor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modern-isolatie
Tags: business, two-columns, custom-menu, custom-logo, featured-images, theme-options, translation-ready
*/

/* ============================================================
   Modern Isolatie — global design tokens & base styles
   These load site-wide so colors/fonts are consistent even
   outside Elementor (header, footer, fallback content).
   Elementor pages inherit these CSS variables too.
   ============================================================ */

:root {
  /* ── 3-colour brand palette ── */
  --mi-logo:       #181918;   /* logo charcoal — primary text & icon colour  */
  --mi-green:      #1d4d38;   /* brand green   — buttons, headings, nav       */
  --mi-lime:       #b9e34a;   /* lime accent   — highlights, CTA, hover       */

  /* ── Derived tints (keep CSS working) ── */
  --mi-green-900: #0e2620;
  --mi-green-800: #16382a;
  --mi-green-700: #1d4d38;   /* = --mi-green */
  --mi-green-600: #277a52;
  --mi-green-500: #2f9163;
  --mi-green-400: #4fae7e;
  --mi-green-300: #8fd0ad;

  /* ── Neutrals ── */
  --mi-cream:  #f4f1e9;
  --mi-paper:  #fbfaf6;
  --mi-ink:    #181918;      /* = --mi-logo */
  --mi-muted:  #5e6b62;
  --mi-line:   #e3e0d6;

  /* ── Typography ── */
  --mi-display: 'Fraunces', Georgia, serif;
  --mi-body:    'Archivo', system-ui, sans-serif;

  /* ── Spacing & shadow ── */
  --mi-radius:    18px;
  --mi-radius-lg: 28px;
  --mi-shadow-sm: 0 2px 8px  rgba(24,25,24,.06);
  --mi-shadow-md: 0 12px 40px rgba(24,25,24,.10);
  --mi-shadow-lg: 0 30px 80px rgba(24,25,24,.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--mi-body);
  color: var(--mi-ink);
  background: var(--mi-paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mi-display);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--mi-green-900);
}

a { color: var(--mi-green-700); text-decoration: none; }
a:hover { color: var(--mi-green-500); }
img { max-width: 100%; height: auto; display: block; }

.mi-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Site header (theme-level, not Elementor) ---------- */
.mi-topbar { background: var(--mi-logo); color: #cfe6da; font-size: .82rem; }
.mi-topbar .mi-container { display: flex; justify-content: space-between; align-items: center; height: 42px; gap: 20px; }
.mi-topbar a { color: #cfe6da; }
.mi-topbar a:hover { color: var(--mi-lime); }
.mi-topbar .mi-tb-left { display: flex; gap: 24px; align-items: center; }

.mi-header {
  position: sticky; top: 0; z-index: 999;
  background: rgba(251,250,246,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mi-line);
}
.mi-nav { display: flex; align-items: center; justify-content: space-between; min-height: 110px; gap: 20px; }

/* Logo in header */
.mi-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.mi-logo-img {
  height: 90px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  filter: brightness(0);
}

/* Legacy brand (fallback) */
.mi-brand { display: flex; align-items: center; gap: 12px; font-family: var(--mi-display); font-weight: 700; font-size: 1.32rem; color: var(--mi-green-900); flex-shrink: 0; }
.mi-brand .mi-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, var(--mi-green-600), var(--mi-green-800)); display: grid; place-items: center; }
.mi-brand .mi-mark svg { width: 22px; height: 22px; stroke: var(--mi-lime); }
.mi-brand b { color: var(--mi-green-600); }

.mi-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mi-menu li { position: relative; }
.mi-menu a { font-family: var(--mi-body); font-weight: 600; font-size: .94rem; padding: 10px 16px; border-radius: 100px; color: var(--mi-ink); display: block; transition: background .2s, color .2s; }
.mi-menu a:hover, .mi-menu .current-menu-item > a { background: rgba(47,145,99,.1); color: var(--mi-green-700); }
.mi-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border: 1px solid var(--mi-line); border-radius: 14px; box-shadow: var(--mi-shadow-md); padding: 8px; }
.mi-menu li:hover > .sub-menu { display: block; }
.mi-menu .sub-menu a { border-radius: 10px; }

.mi-header-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--mi-green-700); color: #fff !important; font-weight: 700; font-size: .9rem; padding: 13px 24px; border-radius: 100px; transition: background .25s, transform .25s; }
.mi-header-cta:hover { background: var(--mi-green-800); transform: translateY(-2px); color: #fff !important; }

.mi-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.mi-burger span { width: 26px; height: 2.5px; background: var(--mi-logo); border-radius: 2px; transition: .3s; }

@media (max-width: 980px) {
  .mi-menu, .mi-header-cta.mi-desktop-cta { display: none; }
  .mi-burger { display: flex; }
  .mi-menu.mi-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 12px; right: 12px;
    background: #fff; padding: 14px; border-radius: var(--mi-radius); box-shadow: var(--mi-shadow-lg); gap: 4px;
  }
  .mi-menu.mi-open .sub-menu { display: block; position: static; box-shadow: none; border: none; padding-left: 12px; }
}

/* ---------- Site footer (theme-level) ---------- */
.mi-footer { background: var(--mi-logo); color: #a9c4b5; padding: 60px 0 0; margin-top: 0; }
.mi-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.mi-footer-logo {
  height: 90px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.mi-footer .mi-brand { color: #fff; margin-bottom: 16px; display: flex; align-items: center; }
.mi-footer .mi-brand b { color: var(--mi-lime); }
.mi-footer p { font-size: .9rem; max-width: 300px; margin: 0; line-height: 1.6; }
.mi-footer h5 { color: #fff; font-family: var(--mi-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.mi-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mi-footer ul a, .mi-footer li { color: #a9c4b5; font-size: .9rem; }
.mi-footer ul a:hover { color: var(--mi-lime); }
.mi-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #7a9e8a; }
@media (max-width: 1100px) { .mi-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } }
@media (max-width: 700px) { .mi-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .mi-footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .mi-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Helper button classes (usable inside Elementor HTML widgets) ---------- */
.mi-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mi-body); font-weight: 700; font-size: .92rem; padding: 15px 28px; border-radius: 100px; cursor: pointer; border: none; transition: transform .25s, box-shadow .25s, background .25s; }
.mi-btn-primary { background: var(--mi-green-700); color: #fff; }
.mi-btn-primary:hover { background: var(--mi-green-800); transform: translateY(-2px); box-shadow: var(--mi-shadow-md); color: #fff; }
.mi-btn-lime { background: var(--mi-lime); color: var(--mi-green-900); }
.mi-btn-lime:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(185,227,74,.4); color: var(--mi-green-900); }

/* default WP content width when not using Elementor full-width */
.mi-page-content { padding: 60px 0; }
.mi-page-content .mi-container { max-width: 820px; }

/* screen-reader text (accessibility) */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }


/* ============================================================
   Service cards — copied from reference site, 4-column grid
   Targets the Elementor section containing the service cards
   ============================================================ */

/* Force 4 equal columns on the service cards section */
.elementor-section .elementor-container .elementor-column.elementor-col-50,
.elementor-section .elementor-container .elementor-column[data-col="50"] {
  width: 25% !important;
}

/* Card container style */
.mi-svc-section .elementor-column,
.mi-svc-section .e-con {
  padding: 0 !important;
}

/* Apply these styles to ALL image-box cards on the page */
.elementor-widget-image-box .elementor-image-box-wrapper {
  background: #f4f1e9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(16,39,28,.07);
  transition: transform .3s, box-shadow .3s;
  height: 100%;
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(16,39,28,.13);
}
.elementor-widget-image-box .elementor-image-box-img {
  margin: 0 !important;
  width: 100% !important;
}
.elementor-widget-image-box .elementor-image-box-img img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block;
}
.elementor-widget-image-box .elementor-image-box-content {
  padding: 18px 20px 22px !important;
  text-align: center;
}
.elementor-widget-image-box .elementor-image-box-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  color: #1d4d38 !important;
  margin: 0 0 8px !important;
}
.elementor-widget-image-box .elementor-image-box-description {
  font-size: .9rem !important;
  color: #5e6b62 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 4 columns on desktop, 2 on tablet, 1 on mobile */
@media (max-width: 1024px) {
  .elementor-section .elementor-container .elementor-column.elementor-col-50,
  .elementor-section .elementor-container .elementor-column[data-col="50"] {
    width: 50% !important;
  }
}
@media (max-width: 600px) {
  .elementor-section .elementor-container .elementor-column.elementor-col-50,
  .elementor-section .elementor-container .elementor-column[data-col="50"] {
    width: 100% !important;
  }
}


/* ============================================================
   GLOBAL COLOR CONSISTENCY + MOBILE FIXES
   Overrides any hardcoded colors from copied sections
   Uses only the 3 brand variables — no hardcoded hex
   ============================================================ */

/* ── Headings: only override if no inline color is set ── */
.elementor-widget-heading .elementor-heading-title:not([style*="color"]) {
  color: var(--mi-green);
}

/* ── Fix blue/teal icon-box titles (copied sections) ── */
.elementor-widget-icon-box .elementor-icon-box-title a[style*="color: rgb(0"],
.elementor-widget-icon-box .elementor-icon-box-title a[style*="color: teal"],
.elementor-widget-icon-box .elementor-icon-box-title a:not([style*="color"]) {
  color: var(--mi-green) !important;
}
.ck-process-title {
  color: var(--mi-green) !important;
  font-family: var(--mi-display) !important;
}

/* ── Fix specific teal/cyan colors from copied sections ── */
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(0, 188"],
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(0, 150"],
.elementor-widget-heading .elementor-heading-title[style*="color: rgb(26, 188"] {
  color: var(--mi-lime) !important;
}

/* ── Buttons: only override if no inline background set ── */
.elementor-button:not([style*="background"]),
.elementor-button-wrapper .elementor-button:not([style*="background"]) {
  background-color: var(--mi-green) !important;
  border-color: var(--mi-green) !important;
  color: #ffffff !important;
  font-family: var(--mi-body) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
}

/* ── Lime CTA buttons (on dark sections) ── */
.elementor-section.mi-cta-section .elementor-button,
.elementor-button.mi-lime {
  background-color: var(--mi-lime) !important;
  color: var(--mi-green-900) !important;
  border-color: var(--mi-lime) !important;
}

/* ── Icon colors ── */
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon .elementor-icon,
.elementor-widget-icon .elementor-icon i {
  color: var(--mi-green) !important;
}

/* ── Process section colors (ck-process) ── */
.ck-process-step {
  background: linear-gradient(180deg, #f0fae0 0%, #d4f08a 100%) !important;
  border-color: var(--mi-lime) !important;
  color: var(--mi-green) !important;
}
.ck-process-text { color: var(--mi-muted) !important; }
.ck-process-icon * { stroke: var(--mi-green) !important; }
.ck-process-card { background: #ffffff !important; }
.ck-process-card::after {
  background: linear-gradient(90deg, rgba(185,227,74,0), var(--mi-lime), rgba(185,227,74,0)) !important;
}

/* ── Subsidy cards text ── */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  color: var(--mi-muted);
  font-family: var(--mi-body);
}

/* Section overlays — not overridden globally, set per section in Elementor */

/* ── Links ── */
a { color: var(--mi-green); }
a:hover { color: var(--mi-green-500); }

/* ============================================================
   FOOTER — 2 services only + consistent styling
   ============================================================ */


/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */

/* Header mobile */
@media (max-width: 768px) {
  .mi-topbar .mi-tb-right { display: none; }
  .mi-topbar .mi-container { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .mi-logo-img { height: 60px !important; }
  .mi-nav { min-height: 70px !important; padding: 0 16px; }
  .mi-header-cta.mi-desktop-cta { display: none !important; }
}

/* Elementor sections on mobile */
@media (max-width: 768px) {
  .elementor-section > .elementor-container { padding: 0 16px !important; }
  .elementor-column { width: 100% !important; }
  .elementor-widget-heading .elementor-heading-title { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
  .elementor-row { flex-wrap: wrap !important; }
  .elementor-widget-image-box .elementor-image-box-img img { height: 180px !important; }
}

/* Service cards mobile */
@media (max-width: 600px) {
  .elementor-section .elementor-container .elementor-column.elementor-col-50 {
    width: 100% !important;
  }
}

/* Process section mobile */
@media (max-width: 768px) {
  .ck-process-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .ck-process-line { display: none !important; }
  .ck-process-card-featured { transform: none !important; }
  .ck-process-section { padding: 40px 20px !important; }
}

/* Footer mobile */
@media (max-width: 768px) {
  .mi-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .mi-footer-grid > div:first-child { grid-column: 1 / -1; }
  .mi-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 420px) {
  .mi-footer-grid { grid-template-columns: 1fr !important; }
}

/* Contact page mobile */
@media (max-width: 768px) {
  .elementor-widget-icon-box { text-align: center !important; }
}





/* ============================================================
   ABOUT SPLIT SECTION — precise fix
   Forces 50/50 columns and correct image sizing
   ============================================================ */

/* Force section to use full container width */
.elementor-section .elementor-container {
  max-width: 1140px !important;
  width: 100% !important;
}

/* Force row to flex side by side */
.elementor-section .elementor-container .elementor-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Each column takes 50% */
.elementor-section .elementor-container .elementor-row > .elementor-column {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

/* Image inside column fills correctly */
.elementor-column .elementor-widget-image,
.elementor-column .elementor-widget-image .elementor-widget-container {
  height: 100% !important;
}

.elementor-column .elementor-widget-image img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 16px !important;
  display: block !important;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .elementor-section .elementor-container .elementor-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .elementor-section .elementor-container .elementor-row > .elementor-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .elementor-column .elementor-widget-image img {
    height: 250px !important;
    border-radius: 12px !important;
  }
}