/*
Theme Name: Lotje Clean@7
Theme URI: https://lotjeclean7.nl
Author: Lotje Clean@7
Author URI: https://lotjeclean7.nl
Description: Block theme (Full Site Editing) voor Lotje Clean@7, professionele schoonmaak in Den Haag en Rijswijk. Vijf paginapatronen (Home, Diensten, Over ons, Werkwijze, Contact), header en footer als template parts, Manrope lokaal gehost en volledig aanpasbaar via de Site Editor.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotje-clean7
Tags: full-site-editing, block-patterns, business, one-column, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* =========================================================================
   Lotje Clean@7 themestijlen
   Tokens (kleuren, fonts, spacing) staan in theme.json. Dit bestand bevat
   alleen wat theme.json niet kan uitdrukken: iconen, kaartdetails,
   stippellijnen, formulierstijl en responsive gedrag.
   ========================================================================= */

:root {
  --c7-radius-card: 12px;
  --c7-radius-field: 8px;
  --c7-shadow-card: 0 1px 4px rgba(0, 0, 0, .05);
  --c7-shadow-icon: 0 1px 4px rgba(0, 0, 0, .09);
  --c7-dotted: #B9C4CF;
  --c7-field-border: #D7DDE3;
  --c7-field-placeholder: #8A949E;
  --c7-hairline: #ECECEC;
}

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Voorkomt dat iOS de tekst opblaast bij het draaien naar landschap. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; }

/* Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   1. Header
   ---------------------------------------------------------------------- */
.c7-header {
  background: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--c7-hairline);
  /* Lijnt de header uit op dezelfde contentkolom (1104px) als de secties. */
  padding-inline: max(clamp(20px, 4vw, 48px), calc((100% - 1104px) / 2));
}
.c7-header .c7-brand { flex: 0 0 auto; }
.c7-logo img,
.c7-logo .custom-logo {
  border-radius: 50%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1;
}
.c7-wordmark {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.1;
}
.c7-wordmark a { color: inherit; text-decoration: none; }

/* De rode @ is inline gekleurde tekst. Valt de inline achtergrondstijl weg
   (bijvoorbeeld nadat WordPress de markup door kses heeft gehaald), dan mag
   er geen gele markeerachtergrond overblijven. */
mark.has-inline-color { background-color: transparent; }

/* Navigatie */
.c7-nav {
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 600;
  color: #3A3A3A;
}
/* padding-block vergroot het tikdoel naar 32px (WCAG 2.5.8 vraagt 24px) zonder
   de plek van de rode onderstreping te veranderen: die hangt aan de onderkant,
   en die padding blijft 4px. */
.c7-nav .wp-block-navigation-item__content {
  color: #3A3A3A;
  text-decoration: none;
  padding-block: 6px 4px;
}
.c7-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }
/* Actieve pagina: zwart + rode onderstreping */
.c7-nav .current-menu-item > .wp-block-navigation-item__content,
.c7-nav .current_page_item > .wp-block-navigation-item__content,
.c7-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color: #111;
  border-bottom: 2.5px solid var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   Mobiel overlay-menu
   WordPress levert een kaal wit vlak met rechts uitgelijnde links. Hieronder
   wordt dat een echt menupaneel: sluitknop op de plek van de hamburger, links
   over de volle breedte met scheidingslijnen, en de actieve pagina met een
   rode balk links (de verticale tegenhanger van de rode onderstreping).
   ---------------------------------------------------------------------- */
.c7-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--white);
  padding: 0 !important;
  /* Overschrijft de rechts-uitlijning die van de desktopnavigatie komt. */
  --navigation-layout-justification-setting: stretch;
  animation: c7-menu-in 160ms ease-out;
}
@keyframes c7-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Sluitknop blijft staan waar de hamburger stond. Bewust 'fixed': WordPress
   plaatst hem absoluut binnen de dialog, en die krijgt voor ingelogde
   gebruikers een marge van 46px voor de adminbalk, dan zakt de knop mee. */
.c7-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed;
  top: 30px;
  right: clamp(20px, 4vw, 48px);
  z-index: 100002;
  color: var(--wp--preset--color--ink);
}
body.admin-bar .c7-nav .is-menu-open .wp-block-navigation__responsive-container-close { top: 76px; }

/* Ruimte voor de bovenbalk. Let op: padding, geen margin. Een marge op dit
   element werkt door op de dialog eromheen en sleept de sluitknop mee. */
.c7-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 84px !important;
  width: 100%;
}

.c7-nav .is-menu-open .wp-block-navigation__container,
.c7-nav .is-menu-open .wp-block-page-list {
  width: 100%;
  gap: 0 !important;
  padding: 0 !important;
}
.c7-nav .is-menu-open .wp-block-navigation-item { width: 100%; }

/* Menu-items: volle breedte, dus de hele regel is aantikbaar. */
.c7-nav .is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  /* !important omdat de kern-CSS van het navigatieblok hier padding:0 zet
     met dezelfde specificiteit. */
  padding: 17px clamp(20px, 4vw, 48px) !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--ink) !important;
  border-bottom: 1px solid var(--c7-hairline);
  border-left: 3px solid transparent;
  transition: background-color 150ms ease;
}
.c7-nav .is-menu-open .wp-block-navigation-item__content::after {
  content: "\203A";
  color: var(--wp--preset--color--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.c7-nav .is-menu-open .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--surface-gray) !important;
}
/* Actieve pagina: rode balk links, lichtblauwe regel. */
.c7-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.c7-nav .is-menu-open .current_page_item > .wp-block-navigation-item__content {
  border-left-color: var(--wp--preset--color--primary);
  border-bottom: 1px solid var(--c7-hairline);
  background: var(--wp--preset--color--surface-blue) !important;
  color: #111 !important;
}
.c7-nav .is-menu-open .wp-block-navigation-item__content:focus-visible { outline-offset: -3px; }

/* -------------------------------------------------------------------------
   Contactgegevens onderin het mobiele menu.
   Staat in parts/header.html en verwijst naar hetzelfde contactgegeven-pattern
   als de footer, zodat er één plek is om ze aan te passen.
   ---------------------------------------------------------------------- */
.c7-mobile-extra { display: none; }

/* -------------------------------------------------------------------------
   Bovenbalk van het geopende menu.
   Het overlay dekt de header af, dus zou je je oriëntatie kwijtraken. In
   plaats van logo en woordmerk te dupliceren wordt het echte merkblok uit de
   header boven het overlay getild. Eén bron: past de klant het woordmerk aan,
   dan verandert het hier vanzelf mee.
   ---------------------------------------------------------------------- */
html.has-modal-open .c7-header .c7-brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  height: 84px;
  box-sizing: border-box;
  padding-inline: clamp(20px, 4vw, 48px);
  padding-right: 68px; /* ruimte voor de sluitknop */
  border-bottom: 1px solid var(--c7-hairline);
  /*
   * Bewust zonder achtergrond en zonder muisdoel. Het overlay eronder heeft
   * z-index 100000 en vormt daarmee een eigen stacking context: alles wat
   * daarboven ligt dekt de sluitknop af, ongeacht diens eigen z-index. Het
   * overlay is toch al wit, dus een transparante balk ziet er identiek uit
   * en laat de knop zichtbaar en klikbaar.
   */
  background: none;
  pointer-events: none;
}
html.has-modal-open .c7-header .c7-brand > * { pointer-events: auto; }
html.has-modal-open body.admin-bar .c7-header .c7-brand { top: 46px; }

html.has-modal-open .c7-mobile-extra {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  background: var(--wp--preset--color--surface-blue);
  border-top: 1px solid #D6E2EF;
  padding: 16px clamp(20px, 4vw, 48px) 20px;
}
.c7-mobile-extra .c7-mobile-extra__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.c7-mobile-extra p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--ink); }
.c7-mobile-extra a {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  font-weight: 700;
}
.c7-mobile-extra a:hover { text-decoration: underline; }

/* Boven het breekpunt van het overlay nooit tonen. */
@media (min-width: 601px) {
  .c7-mobile-extra { display: none !important; }
}

/* -------------------------------------------------------------------------
   2. Hero (tekst links, foto full-bleed rechts)
   ---------------------------------------------------------------------- */
.c7-hero { background: var(--wp--preset--color--surface-gray); overflow: hidden; }
.c7-hero > .wp-block-columns,
.c7-hero .c7-hero__inner {
  max-width: none;
  margin-inline: 0;
  gap: 0 !important;
  align-items: stretch;
}
/*
 * De tekst lijnt links uit op dezelfde contentkolom (1104px) als de secties
 * eronder; de foto loopt daardoor vanzelf door tot de rechter schermrand.
 */
.c7-hero__text {
  padding: 72px 40px 72px max(clamp(20px, 4vw, 48px), calc((100% - 1104px) / 2));
  align-self: center;
}
.c7-hero__text h1 { margin: 0; }
/*
 * De foto vult de kolom volledig, maar bepaalt niet de hoogte van de hero:
 * die volgt uit de tekst ernaast, precies zoals in het ontwerp.
 */
.c7-hero__media { padding: 0; position: relative; min-height: 320px; }
.c7-hero__media > figure,
.c7-hero__media > .wp-block-image { position: absolute; inset: 0; margin: 0; }
.c7-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-left: 1px solid #E5E5E5;
}
/*
 * De constrained layout van WordPress zet 'margin-inline: auto !important' op
 * elk direct kind. In combinatie met deze max-width zou de lead midden in de
 * hero belanden terwijl kop en knoppen links staan (zichtbaar op 404 en op
 * gewone pagina's). Vandaar de expliciete marge.
 */
.c7-hero .c7-lead {
  color: var(--wp--preset--color--ink-soft);
  max-width: 460px;
  /*
   * De constrained layout centreert elk direct kind met
   * 'margin-inline: auto !important'. Omdat de lead smaller is dan de
   * contentkolom zou hij daardoor midden in de hero belanden terwijl kop en
   * knoppen links staan (zichtbaar op 404). Deze marge legt de linkerrand op
   * exact dezelfde plek als die van de kop. In de gesplitste hero is de kolom
   * smaller dan 1104px, dan valt de berekening op 0 terug.
   */
  margin-left: max(0px, calc((100% - 1104px) / 2)) !important;
  margin-right: auto !important;
}
.c7-hero .wp-block-buttons { margin-top: 30px; }

/* -------------------------------------------------------------------------
   3. Secties en sectietitels
   ---------------------------------------------------------------------- */
.c7-section { padding-block: 56px; }
.c7-section--tight { padding-block: 24px 56px; }
.c7-section--blue { background: var(--wp--preset--color--surface-blue); }

/* Sectietitel met rood streepje eronder */
.c7-stt {
  text-align: center;
  margin: 0;
  font-size: var(--wp--preset--font-size--section-title);
  font-weight: 800;
  letter-spacing: -.3px;
}
.c7-stt::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--primary);
  margin: 10px auto 0;
}
.c7-stt--left { text-align: left; }
.c7-stt--left::after { margin-inline: 0; }

/* De eerste rij onder een sectietitel start 36px lager */
.c7-stt + * { margin-top: 36px; }

/* -------------------------------------------------------------------------
   4. Iconen (Lucide, stroke 1.6, kleur volgt het palet "Blauw (iconen)")
   ---------------------------------------------------------------------- */
.c7-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  box-shadow: var(--c7-shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
}
.c7-ico::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--wp--preset--color--accent);
  -webkit-mask: var(--c7-icon, none) center / 26px 26px no-repeat;
  mask: var(--c7-icon, none) center / 26px 26px no-repeat;
}
/* Variant op witte kaarten: lichtblauwe cirkel, geen schaduw */
.c7-ico--soft { background: var(--wp--preset--color--surface-blue); box-shadow: none; }
/* Kleinere variant (48px) voor de focus-kaarten */
.c7-ico--sm { width: 48px; height: 48px; }
.c7-ico--sm::before { width: 22px; height: 22px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }

/* Icoonblok: cirkel + titel + korte tekst, gecentreerd */
.c7-ib { text-align: center; align-items: center; }
.c7-ib > * { margin-block: 0; }
.c7-ib h3, .c7-ib h4 { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.c7-ib p {
  color: var(--wp--preset--color--ink-muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 200px;
  margin-inline: auto;
}
/* Compacte variant zonder tekst (doelgroep-iconen) */
.c7-ib--label h3, .c7-ib--label h4 { font-size: 13.5px; }
/* Lange samenstellingen ("Studentenhuisvesters") mogen afbreken in plaats van
   uit hun kolom te lopen; op 320px scheelt dat een horizontale scrollbalk. */
.c7-ib h3, .c7-ib h4 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* -------------------------------------------------------------------------
   5. Kaarten
   ---------------------------------------------------------------------- */
.c7-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--c7-radius-card);
  box-shadow: var(--c7-shadow-card);
  overflow: hidden;
}
.c7-card > :first-child { margin-top: 0; }
.c7-card > :last-child { margin-bottom: 0; }

/* Dienstkaart op de homepage: foto boven, tekst gecentreerd */
.c7-card--media .wp-block-image,
.c7-card--media figure { margin: 0; }
.c7-card--media img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #EEE;
}
.c7-card__body { padding: 22px; text-align: center; }
.c7-card__body h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--card-title); }
.c7-card__body p { margin: 0; color: var(--wp--preset--color--ink-muted); font-size: 13.5px; }

/* Horizontale dienstkaart (Diensten): foto links, tekst rechts */
.c7-service {
  grid-template-columns: 1fr 1.4fr !important;
  gap: 0 !important;
  align-items: stretch;
}
.c7-service .c7-service__media,
.c7-service figure { margin: 0; height: 100%; min-height: 230px; }
.c7-service img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  display: block;
  border-right: 1px solid #EEE;
}
.c7-service__body { padding: 28px 32px; align-self: center; }
.c7-service__body h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--card-title-lg); }
.c7-service__body > p { margin: 0 0 16px; color: #555; font-size: 14px; }

/* Focus-kaart (Over ons): icoon links, tekst rechts */
.c7-focus { padding: 24px; align-items: flex-start !important; gap: 16px !important; }
.c7-focus h3 { margin: 0 0 6px; font-size: 16px; }
.c7-focus p { margin: 0 0 10px; color: var(--wp--preset--color--ink-muted); font-size: 13.5px; }
.c7-focus .c7-more { font-size: 13.5px; font-weight: 700; margin: 0; }
.c7-more a { color: var(--wp--preset--color--primary); text-decoration: none; }
.c7-more a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; }

/* Contact-infokaart: icoon links, label + waarde rechts */
/* width:100% houdt de kaarten even breed in de verticale flex-kolom. */
.c7-infocard { padding: 20px; width: 100%; align-items: center !important; gap: 16px !important; }
.c7-infocard h3 { margin: 0; font-size: 16px; }
.c7-infocard p { margin: 0; color: var(--wp--preset--color--ink-muted); font-size: 13.5px; }
.c7-infocard p a { color: var(--wp--preset--color--ink-muted); text-decoration: none; }
.c7-infocard p a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* -------------------------------------------------------------------------
   6. Checklist
   ---------------------------------------------------------------------- */
.c7-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #333;
  margin: 0;
}
.c7-check::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--wp--preset--color--accent);
  -webkit-mask: var(--c7-icon) center / 16px 16px no-repeat;
  mask: var(--c7-icon) center / 16px 16px no-repeat;
}
.c7-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c7-checklist--stack { grid-template-columns: 1fr; gap: 6px; }

/* -------------------------------------------------------------------------
   7. Stappenrij met stippellijnen
   ---------------------------------------------------------------------- */
.c7-steps { gap: 12px !important; align-items: flex-start !important; }
.c7-steps > * { flex: 1 1 0 !important; position: relative; }
.c7-steps > :not(:last-child)::after {
  content: "";
  position: absolute;
  top: 29px;
  left: calc(50% + 34px);
  right: calc(22px - 50%);
  border-top: 2px dotted var(--c7-dotted);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   8. Genummerde stapkaarten (Werkwijze): nummering via CSS-counter,
      dus een extra of verwijderde kaart hernummert automatisch.
   ---------------------------------------------------------------------- */
.c7-step-grid { counter-reset: c7step; }
.c7-step-card {
  padding: 20px 16px;
  position: relative;
  counter-increment: c7step;
  /* Zet de checklist onderaan, zodat de scheidingslijnen op één lijn liggen. */
  display: flex;
  flex-direction: column;
}
.c7-step-card::before {
  content: counter(c7step);
  position: absolute;
  top: 14px;
  left: 14px;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--wp--preset--color--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  line-height: 1;
}
/*
 * De constrained layout van WordPress zet 'margin-inline: auto !important' op
 * de kinderen. In een flex-kolom laat dat ze krimpen tot hun inhoud, waardoor
 * de scheidingslijn te smal wordt. Vandaar de expliciete breedte.
 */
.c7-step-card > :not(.c7-ico) { width: 100%; }
.c7-step-card .c7-ico { margin: 8px auto 12px; }
.c7-step-card h3 { text-align: center; font-size: 14px; margin: 0; }
.c7-step-card > p { margin: 8px 0 12px; color: var(--wp--preset--color--ink-muted); font-size: 12.5px; text-align: center; }
.c7-step-card .c7-checklist--stack {
  border-top: 1px solid #EEE;
  padding-top: 10px;
  margin-top: auto;
}
.c7-step-card .c7-check { font-size: 12px; }

/* -------------------------------------------------------------------------
   9. FAQ (core/details block)
   ---------------------------------------------------------------------- */
.c7-faq {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--c7-radius-card);
  padding: 18px 20px;
  box-shadow: var(--c7-shadow-card);
  height: 100%;
}
.c7-faq > summary {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.c7-faq > summary::-webkit-details-marker { display: none; }
.c7-faq > summary::after {
  content: "+";
  color: var(--wp--preset--color--accent);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: transform 150ms ease;
}
.c7-faq[open] > summary::after { content: "−"; }
.c7-faq > :not(summary) { margin: 8px 0 0; color: var(--wp--preset--color--ink-muted); font-size: 13.5px; }

/* -------------------------------------------------------------------------
   10. Knoppen: secundair = witte knop met blauwe rand
   ---------------------------------------------------------------------- */
.wp-block-button__link { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.c7-btn-secondary > .wp-block-button__link {
  background: var(--wp--preset--color--white) !important;
  color: #16324F !important;
  border: 1.5px solid #9DB3C8 !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.c7-btn-secondary > .wp-block-button__link:hover {
  background: var(--wp--preset--color--surface-blue) !important;
  border-color: var(--wp--preset--color--accent) !important;
  color: #16324F !important;
}

/* -------------------------------------------------------------------------
   11. Footer
   ---------------------------------------------------------------------- */
.c7-footer {
  background: var(--wp--preset--color--footer);
  color: var(--wp--preset--color--footer-text);
  font-size: 13.5px;
  /* Los opgeschreven: een padding-shorthand zou de horizontale padding op nul
     zetten, en dan plakt de footer op smalle schermen tegen de schermrand. */
  padding-block: 44px 0;
  padding-inline: clamp(20px, 4vw, 48px);
}
.c7-footer .c7-footer__cols { padding-bottom: 28px; align-items: flex-start; }
.c7-footer h2, .c7-footer h3, .c7-footer h4 {
  color: var(--wp--preset--color--white);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0;
}
/* De blockGap van 24px zou hier bovenop komen; het ontwerp wil 10px. */
.c7-footer h2 + *, .c7-footer h3 + *, .c7-footer h4 + * { margin-top: 0 !important; }
.c7-footer p { margin: 0; color: var(--wp--preset--color--footer-text); }
.c7-footer a { color: var(--wp--preset--color--footer-text); text-decoration: none; }
.c7-footer a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
.c7-footer .c7-wordmark { color: var(--wp--preset--color--white); font-size: 16px; }
.c7-footer .c7-logo img { width: 44px; height: 44px; }
.c7-footer .wp-block-navigation { gap: 6px; font-size: 13.5px; font-weight: 400; }
.c7-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--footer-text); }
.c7-footer .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white); border: 0; padding-bottom: 0;
}
.c7-footer__bar {
  border-top: 1px solid #3A3A3A;
  text-align: center;
  padding: 14px 0;
  font-size: 12.5px;
  color: #8F8F8F;
  margin: 0;
}

/* -------------------------------------------------------------------------
   12. Formulier: Fluent Forms (en WPForms) in de huisstijl
        Werkt zodra de plugin actief is; zonder plugin heeft dit geen effect.
   ---------------------------------------------------------------------- */
.c7-form-card { padding: 32px; }
.c7-form-card > h2, .c7-form-card > h3 { margin: 0 0 20px; font-size: var(--wp--preset--font-size--form-title); font-weight: 800; }

.c7-form-card .ff-el-group { margin-bottom: 12px; }
.c7-form-card .ff-el-input--label label,
.c7-form-card .wpforms-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #3A3A3A;
  margin-bottom: 5px;
}
.c7-form-card .frm-fluent-form .ff-el-form-control,
.c7-form-card .ff-el-form-control,
.c7-form-card select.ff-el-form-control,
.c7-form-card textarea.ff-el-form-control,
.c7-form-card .wpforms-field input,
.c7-form-card .wpforms-field select,
.c7-form-card .wpforms-field textarea {
  width: 100%;
  border: 1px solid var(--c7-field-border);
  border-radius: var(--c7-radius-field);
  padding: 11px 13px;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 13.5px;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--white);
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.c7-form-card .ff-el-form-control::placeholder,
.c7-form-card .wpforms-field input::placeholder,
.c7-form-card .wpforms-field textarea::placeholder { color: var(--c7-field-placeholder); }
.c7-form-card .ff-el-form-control:focus,
.c7-form-card .wpforms-field input:focus,
.c7-form-card .wpforms-field select:focus,
.c7-form-card .wpforms-field textarea:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 137, .12);
  outline: none;
}
.c7-form-card textarea.ff-el-form-control,
.c7-form-card .wpforms-field textarea { min-height: 88px; resize: vertical; }

/* Twee kolommen: Fluent Forms "Two Column Container" */
.c7-form-card .ff-t-cell { padding-inline: 6px; }
.c7-form-card .ff-t-container { margin-inline: -6px; }

/*
 * Verzendknop. Fluent Forms zet zelf een kleur op de knop via de regel
 * `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)`. Die staat inline
 * in de body en heeft specificiteit (0,3,1); daarom mikken we hier op vier
 * klassen. De variabele hieronder zorgt dat ook de rest van het formulier
 * (focusranden, links) de huisstijlkleur volgt.
 */
.c7-form-card .fluentform { --fluentform-primary: var(--wp--preset--color--primary); }

.c7-form-card .frm-fluent-form .ff-btn-submit.ff-btn,
.c7-form-card .ff-btn-submit,
.c7-form-card .wpforms-submit {
  width: 100%;
  display: block;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border: 1.5px solid var(--wp--preset--color--primary);
  border-radius: var(--c7-radius-field);
  padding: 13px 24px;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.c7-form-card .frm-fluent-form .ff-btn-submit.ff-btn:hover,
.c7-form-card .ff-btn-submit:hover,
.c7-form-card .wpforms-submit:hover {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
}

/* Meldingen */
.c7-form-card .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--primary); }
.c7-form-card .error-text, .c7-form-card .ff-el-is-error .text-danger { color: var(--wp--preset--color--primary); font-size: 12.5px; }
.c7-form-card .ff-message-success {
  background: var(--wp--preset--color--surface-blue);
  border: 1px solid #C6D8EA;
  border-radius: var(--c7-radius-field);
  padding: 14px 16px;
  color: #16324F;
  font-size: 14px;
}
/* Melding zolang de formulierplugin nog niet actief is */
.c7-form-placeholder {
  border: 1px dashed var(--c7-field-border);
  border-radius: var(--c7-radius-field);
  padding: 20px;
  color: var(--wp--preset--color--ink-muted);
  font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   13. Layout-hulpklassen voor de grids uit het ontwerp
   ---------------------------------------------------------------------- */
.c7-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.c7-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.c7-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.c7-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.c7-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.c7-split { grid-template-columns: 1fr 1.15fr !important; gap: 48px !important; align-items: center !important; }
.c7-split .wp-block-image img { border-radius: var(--c7-radius-card); width: 100%; height: 280px; object-fit: cover; display: block; }
.c7-split--tall .wp-block-image img { height: 290px; }
.c7-contact-split { grid-template-columns: 1.5fr 1fr !important; gap: 28px !important; align-items: start !important; }

/* Gelijke hoogte voor kaarten in een grid */
.c7-grid-2 > *, .c7-grid-3 > *, .c7-grid-4 > *,
.c7-grid-5 > *, .c7-grid-6 > * { height: 100%; }

/* -------------------------------------------------------------------------
   14. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .c7-hero > .wp-block-columns { flex-wrap: wrap !important; }
  .c7-hero__text { padding: 56px 0 40px !important; flex-basis: 100% !important; }
  .c7-hero__media { flex-basis: 100% !important; position: static; min-height: 0; }
  .c7-hero__media > figure,
  .c7-hero__media > .wp-block-image { position: static; }
  .c7-hero { padding-inline: clamp(20px, 4vw, 48px) !important; }
  .c7-hero__media img { min-height: 260px; height: 260px; border-left: 0; border-radius: var(--c7-radius-card); }

  .c7-grid-3, .c7-grid-4, .c7-grid-5,
  .c7-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .c7-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .c7-split, .c7-contact-split { grid-template-columns: 1fr !important; gap: 28px !important; }
  .c7-service { grid-template-columns: 1fr !important; }
  .c7-service img { min-height: 200px; height: 200px; border-right: 0; border-bottom: 1px solid #EEE; }

  /*
   * Stappenrij wordt een verticale tijdlijn: icoon links, tekst rechts, met de
   * stippellijn van icoon naar icoon. Zo blijft de volgorde die op desktop door
   * de horizontale stippellijn wordt getoond ook op smallere schermen zichtbaar;
   * los onder elkaar of in een raster zijn het losse blokken.
   * De kolom is begrensd zodat het op een tablet niet uitgerekt oogt.
   */
  .c7-steps {
    display: block !important;
    gap: 0 !important;
    max-width: 560px;
    margin-inline: auto;
  }
  .c7-steps > * {
    display: grid !important;
    grid-template-columns: 58px 1fr;
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    text-align: left;
    position: relative;
    padding-bottom: 26px;
  }
  .c7-steps > :last-child { padding-bottom: 0; }
  .c7-steps > * > .c7-ico { grid-area: 1 / 1 / 3 / 2; }
  .c7-steps > * > h3,
  .c7-steps > * > h4 { grid-area: 1 / 2 / 2 / 3; align-self: center; }
  .c7-steps > * > p {
    grid-area: 2 / 2 / 3 / 3;
    max-width: none;
    margin-inline: 0;
    font-size: 13px;
  }
  /* Verticale stippellijn, uitgelijnd op het midden van de icooncirkel. */
  .c7-steps > :not(:last-child)::after {
    display: block;
    top: 64px;
    bottom: 4px;
    left: 28px;
    right: auto;
    border-top: 0;
    border-left: 2px dotted var(--c7-dotted);
  }

  .c7-section { padding-block: 44px; }
}

/*
 * 781px is het punt waarop het kolommenblok van WordPress zelf naar één kolom
 * gaat. Daaronder zou de footer vier rijen hoog worden; deze regels maken er
 * twee kolommen van.
 */
@media (max-width: 781px) {
  /*
   * Footer: merk en "Meer informatie" over de volle breedte, Navigatie en
   * Contact ernaast in twee kolommen. Scheelt zo'n 150px hoogte. Die twee
   * staan al naast elkaar in de HTML, dus de tabvolgorde blijft kloppen.
   * De selector moet zwaar genoeg zijn: de kern-CSS van het kolommenblok zet
   * hier zelf flex-basis:100% met !important.
   */
  .c7-footer .wp-block-columns { flex-wrap: wrap !important; gap: 26px 16px !important; }
  .c7-footer .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 8px) !important; }
  .c7-footer .wp-block-columns > .wp-block-column:first-child,
  .c7-footer .wp-block-columns > .wp-block-column:last-child { flex-basis: 100% !important; }

  /*
   * Footerlinks waren 18-22px hoog. WCAG 2.5.8 vraagt minimaal 24px voor een
   * tikdoel; op een telefoon is dat ook gewoon prettiger. De extra padding
   * vergroot het doel zonder de regelafstand te veranderen, de gap krimpt
   * met dezelfde waarde mee.
   */
  .c7-footer .wp-block-navigation a,
  .c7-footer .wp-block-columns p > a {
    display: inline-block;
    padding-block: 5px;
  }
  .c7-footer .wp-block-navigation { gap: 2px !important; }
  .c7-footer .wp-block-columns p:has(> a) { margin-block: -3px; }
}

@media (max-width: 600px) {
  /*
   * Korte icoonblokken blijven twee naast elkaar: alle vier de argumenten
   * staan dan in één blik op het scherm in plaats van achter een halve
   * schermlengte scrollen. Alles met een foto of veel tekst gaat wel naar
   * één kolom.
   */
  .c7-grid-4, .c7-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 16px !important;
  }
  .c7-grid-4 .c7-ib p, .c7-grid-6 .c7-ib p { font-size: 12.5px; }
  .c7-grid-4 .c7-card.c7-ib { padding: 22px 12px; }

  .c7-grid-2, .c7-grid-3, .c7-grid-5,
  .c7-step-grid { grid-template-columns: 1fr !important; }


  .c7-checklist { grid-template-columns: 1fr !important; }
  .c7-form-card { padding: 22px; }
  .c7-hero__text { padding: 40px 0 32px !important; }
  h1, .wp-block-post-title { font-size: 34px !important; }
  .c7-stt { font-size: 24px; }
  .c7-header { flex-wrap: wrap; }
}

/* Printen: navigatie en decoratie weglaten */
@media print {
  .c7-header, .c7-footer, .wp-block-navigation { display: none !important; }
  .c7-card, .c7-faq { box-shadow: none; }
}

/* -------------------------------------------------------------------------
   15. Icoonset: Lucide, stroke 1.6. Wissel van icoon door in de Site Editor
        de klasse c7-ico--<naam> aan te passen (Blok → Geavanceerd → CSS-klasse).
   ---------------------------------------------------------------------- */
.c7-ico--user{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5'/%3E%3C/svg%3E")}
.c7-ico--users{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.3'/%3E%3Cpath d='M4 19c1-3 3-4.5 5-4.5s4 1.5 5 4.5'/%3E%3C/svg%3E")}
.c7-ico--group{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M3.5 19c.8-2.5 2.5-4 4.5-4s3.7 1.5 4.5 4M11.5 19c.8-2.5 2.5-4 4.5-4s3.7 1.5 4.5 4'/%3E%3C/svg%3E")}
.c7-ico--clipboard{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 9h6M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.c7-ico--clipboard-check{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 10l2 2 4-4'/%3E%3C/svg%3E")}
.c7-ico--shield{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.c7-ico--clock{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.c7-ico--pin{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-10a6 6 0 1112 0c0 4.5-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E")}
.c7-ico--file{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M10 12h5M10 16h5'/%3E%3C/svg%3E")}
.c7-ico--spray{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='10' width='8' height='11' rx='2'/%3E%3Cpath d='M10 10V7h4v3M12 4v1.5'/%3E%3C/svg%3E")}
.c7-ico--building{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18'/%3E%3Cpath d='M9.5 7h1.5M13 7h1.5M9.5 11h1.5M13 11h1.5M9.5 15h1.5M13 15h1.5'/%3E%3C/svg%3E")}
.c7-ico--building-sm{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18'/%3E%3Cpath d='M9.5 7h1.5M13 7h1.5M9.5 11h1.5M13 11h1.5'/%3E%3C/svg%3E")}
.c7-ico--buildings{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='7' height='14'/%3E%3Crect x='13' y='3' width='7' height='18'/%3E%3C/svg%3E")}
.c7-ico--hardhat{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15a8 8 0 0116 0v2H4z'/%3E%3Cpath d='M12 7V4'/%3E%3C/svg%3E")}
.c7-ico--apartment{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='16'/%3E%3Cpath d='M9 9h2M13 9h2M9 13h2M13 13h2M10.5 17h3v4h-3z'/%3E%3C/svg%3E")}
.c7-ico--graduation{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l9 4-9 4-9-4z'/%3E%3Cpath d='M7 11.5V16c0 1.6 10 1.6 10 0v-4.5'/%3E%3C/svg%3E")}
.c7-ico--check{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.c7-ico--message{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.c7-ico--message-dots{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M9 10.5h.01M12 10.5h.01M15 10.5h.01'/%3E%3C/svg%3E")}
.c7-ico--sparkles{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l1.5 5L19 10.5l-5.5 1.5L12 17l-1.5-5L5 10.5 10.5 9z'/%3E%3Cpath d='M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7z'/%3E%3C/svg%3E")}
.c7-ico--home{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3C/svg%3E")}
.c7-ico--stairs{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5a2 2 0 012-2h7v18'/%3E%3Cpath d='M14 21h5V9h-5'/%3E%3C/svg%3E")}
.c7-ico--leaf{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 9 13 5 20 5c0 7-4 15-15 14z'/%3E%3Cpath d='M5 19c3-6 7-9 11-11'/%3E%3C/svg%3E")}
.c7-ico--search{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E")}
.c7-ico--mail{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='M4 8l8 6 8-6'/%3E%3C/svg%3E")}
.c7-ico--phone{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h4l1 5-2.5 1.5a12 12 0 005 5L15 13l5 1v4a2 2 0 01-2 2A16 16 0 014 6a2 2 0 012-2z'/%3E%3C/svg%3E")}
.c7-ico--map{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l6-2.5 6 2.5 6-2.5v13l-6 2.5-6-2.5-6 2.5z'/%3E%3Cpath d='M9 4v13M15 6.5v13'/%3E%3C/svg%3E")}
.c7-ico--sliders{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v16M12 4v16M18 4v16'/%3E%3Ccircle cx='6' cy='9' r='2'/%3E%3Ccircle cx='12' cy='15' r='2'/%3E%3Ccircle cx='18' cy='7' r='2'/%3E%3C/svg%3E")}

/* Vinkje in checklists (stroke 2, zoals in de referentie) */
.c7-check{--c7-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}

/* -------------------------------------------------------------------------
   Uitsnede van foto's sturen. Toevoegen bij het afbeeldingsblok onder
   Geavanceerd, Extra CSS-klasse.
   ---------------------------------------------------------------------- */
.c7-focus-top img    { object-position: 50% 0% !important; }
.c7-focus-hoog img   { object-position: 50% 25% !important; }
.c7-focus-laag img   { object-position: 50% 75% !important; }
.c7-focus-bottom img { object-position: 50% 100% !important; }
.c7-focus-links img  { object-position: 0% 50% !important; }
.c7-focus-rechts img { object-position: 100% 50% !important; }