/* ═══════════════════════════════════════════════════════════
   ClyM marketingsite — Module-iconen (monochroom)
   Regel: wit/licht sectie → navy icon; navy sectie → wit icon.
   SVG's gebruiken currentColor; kleur komt uit de parent.
   ═══════════════════════════════════════════════════════════ */

/* Standaard 56×56 icoon boven "Module N"-label */
.m-icoon {
    width: 56px;
    height: 56px;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.m-icoon svg {
    width: 56px;
    height: 56px;
    display: block;
}

/* Gecentreerde sectie-kop — icoon ook centreren */
.sectie-kop.gecentreerd .m-icoon {
    display: flex;
    margin: 0 auto 20px;
}

/* Wit of licht sectie (default) → navy icon */
.sectie-wit .m-icoon,
.sectie-licht .m-icoon {
    color: var(--navy);
}

/* Navy-sectie → wit icon (geen gouden uitzondering meer) */
.sectie-navy .m-icoon,
.sectie-navy .m-icoon-inline {
    color: #fff;
}

/* Pagina's met donker-navy foto-overlay (page-bg-*): alle
   iconen wit, ongeacht de sectie-class. Op deze pagina's is
   een "witte" sectie in werkelijkheid transparant met de
   navy-overlay eronder — een navy icoon zou onleesbaar zijn.
   !important omdat clym.css op hoge specificity andere kleuren
   kan zetten; contrast op navy overlay is de enige regel die telt. */
html body.page-bg .m-icoon,
html body.page-bg .m-icoon-inline,
html body[class*="page-bg-"] .m-icoon,
html body[class*="page-bg-"] .m-icoon-inline {
    color: #fff !important;
}
html body.page-bg .m-icoon svg,
html body.page-bg .m-icoon-inline svg,
html body[class*="page-bg-"] .m-icoon svg,
html body[class*="page-bg-"] .m-icoon-inline svg {
    color: #fff !important;
    fill: currentColor;
}
html body.page-bg .m-icoon svg [fill]:not([fill="none"]),
html body[class*="page-bg-"] .m-icoon svg [fill]:not([fill="none"]) {
    fill: #fff !important;
}
html body.page-bg .m-icoon svg [stroke]:not([stroke="none"]),
html body[class*="page-bg-"] .m-icoon svg [stroke]:not([stroke="none"]) {
    stroke: #fff !important;
}

/* Kleine inline-variant voor samenhang-regels (h4 met pijl) —
   ook navy op witte/lichte sectie */
.m-icoon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--navy);
    margin-right: 10px;
    vertical-align: -5px;
    flex-shrink: 0;
}
.m-icoon-inline svg {
    width: 24px;
    height: 24px;
    display: block;
}