/* FidelSec modules — vormgeving voor inc/modules.php (Brandbook V2).
   Tokens: Tech Aged White #E4E3E4 / Black #111111, Fidelity Black #3B3B3B,
   Nebula Blue #476EA1 / Purple #8065AC, Cyber Dusk (45°), Encrypted Teal #3E6868.
   Vormtaal: afgeschuinde hoek rechtsonder, haarlijnen, stippenraster. */

:root {
	--fs-ch: 18px;
	--fs-line: #E4E3E4;
	--fs-dusk: linear-gradient(45deg, #476EA1 0%, #8065AC 100%);
	--fs-teal: #3E6868;
	--fs-ink: #111111;
	--fs-body: #3B3B3B;
}
.fs-sec, .fs-cta-compact, .fs-announce { --p: #8065AC; --b: #476EA1; }

/* ---------- Sectie, toon en binnenkolom ---------- */
.fs-sec { padding: clamp(3rem, 6vw, 5rem) 0; margin: 0; }
.fs-sec.fs-sec--hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.fs-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.fs-wrap > :first-child { margin-top: 0; }
.fs-wrap > :last-child { margin-bottom: 0; }
.fs-narrow .fs-wrap { max-width: 800px; }

.fs-tone-white { background: #fff; color: var(--fs-body); }
.fs-tone-grey { background: #E4E3E4; color: var(--fs-body); }
.fs-tone-dots {
	background-color: #E4E3E4;
	background-image: radial-gradient(rgba(17, 17, 17, 0.16) 1px, transparent 1px);
	background-size: 20px 20px;
	color: var(--fs-body);
}
.fs-tone-ink { background: var(--fs-ink); color: #E4E3E4; --p: #B9B5B5; }
.fs-tone-ink.fs-grid-dots {
	background-image: radial-gradient(rgba(228, 227, 228, 0.22) 1px, transparent 1px);
	background-size: 20px 20px;
}
.fs-tone-dusk { background: var(--fs-dusk); color: #fff; --p: #fff; }
.fs-tone-teal { background: var(--fs-teal); color: #fff; --p: #fff; }
.fs-tone-ink :is(h1, h2, h3, h4), .fs-tone-dusk :is(h1, h2, h3, h4), .fs-tone-teal :is(h1, h2, h3, h4) { color: #fff !important; }
.fs-tone-dusk .wp-element-button:not(.has-background), .fs-tone-teal .wp-element-button:not(.has-background),
.fs-highlight .wp-element-button { background: #fff; color: #111; }
.fs-tone-dusk .is-style-outline .wp-element-button, .fs-tone-teal .is-style-outline .wp-element-button,
.fs-tone-ink .is-style-outline .wp-element-button { background: transparent; color: #fff; border: 1px solid #fff; }
.fs-tone-dusk .wp-element-button:hover, .fs-tone-teal .wp-element-button:hover, .fs-highlight .wp-element-button:hover { background: #111; color: #fff; }

/* ---------- Koppen en tekst ---------- */
.fs-head { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.fs-head > h2 { margin: .4rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.01em; }
.fs-head--center { text-align: center; }
.fs-head--center .fs-lead { margin-inline: auto; }
.fs-head--center .fs-eyebrow { justify-content: center; }
.fs-lead { font-size: 1.1rem; line-height: 1.6; max-width: 62ch; }
.fs-display { font-size: clamp(2.2rem, 5vw, 3.7rem) !important; line-height: 1.05 !important; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 1rem; }
.fs-note { font-size: .875rem; opacity: .85; }
.fs-more { margin: auto 0 0; color: #476EA1; font-weight: 600; }
.fs-tone-ink .fs-eyebrow, .fs-tone-ink .fs-eyebrow::before { color: #B9B5B5; background: transparent; }
.fs-tone-ink .fs-eyebrow::before { background: #B9B5B5; }
.fs-tone-dusk .fs-eyebrow::before, .fs-tone-teal .fs-eyebrow::before { background: #fff; }

/* ---------- Kolommen ---------- */
.fs-split { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: center; }
.fs-split--center { align-items: center; }
.fs-grid-3 { gap: 1.25rem !important; margin-bottom: 1.25rem; }
.fs-grid-3:last-child { margin-bottom: 0; }
.fs-grid-3 > .wp-block-column > .fs-card, .fs-grid-3 > .wp-block-column > .fs-feature { height: 100%; }
.fs-stats { gap: 1rem !important; }
.fs-reverse { flex-direction: row-reverse; }
@media (max-width: 781px) { .fs-reverse { flex-direction: column; } }

/* ---------- Kaart: wit vlak, haarlijn, afgeschuinde hoek ---------- */
.fs-card, .fs-highlight, .fs-callout, .fs-cta-compact {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fs-ch)), calc(100% - var(--fs-ch)) 100%, 0 100%);
}
.fs-card {
	position: relative; display: flex; flex-direction: column; gap: .35rem;
	background: #fff; border: 1px solid var(--fs-line); padding: 1.6rem 1.5rem 1.8rem; color: var(--fs-body);
}
.fs-card::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: var(--fs-ch); height: var(--fs-ch); pointer-events: none;
	background: linear-gradient(to top left, #fff calc(50% - .5px), var(--fs-line) calc(50% - .5px), var(--fs-line) calc(50% + .5px), transparent calc(50% + .5px));
}
.fs-tone-grey .fs-card::after, .fs-tone-dots .fs-card::after { background: linear-gradient(to top left, #E4E3E4 calc(50% - .5px), #bdbcbd calc(50% - .5px), #bdbcbd calc(50% + .5px), transparent calc(50% + .5px)); }
.fs-tone-grey .fs-card, .fs-tone-dots .fs-card { border-color: #fff; }
.fs-card > * { margin: 0; }
.fs-card h3 { font-size: 1.2rem; line-height: 1.25; color: #111; margin-top: .15rem; }
.fs-card .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.fs-card--link { transition: border-color .15s, transform .15s; }
.fs-card--link:hover { border-color: #476EA1; transform: translateY(-2px); }
.fs-card--frame { border-color: #476EA1; }
.fs-card--frame::after { background: linear-gradient(to top left, #fff calc(50% - .5px), #476EA1 calc(50% - .5px), #476EA1 calc(50% + .5px), transparent calc(50% + .5px)); }
.fs-tag, .fs-tier {
	align-self: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: #476EA1;
}
.fs-tag { background: #E4E3E4; padding: .2rem .55rem; color: #3B3B3B; }

/* ---------- Highlight (gradientkaart) ---------- */
.fs-highlight { background: var(--fs-dusk); color: #fff; padding: clamp(1.75rem, 3vw, 2.5rem); }
.fs-highlight h3 { color: #fff !important; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.fs-highlight p { color: #fff; }

/* ---------- Voordelen, stappen, cijfers ---------- */
.fs-feature { border-top: 3px solid transparent; border-image: var(--fs-dusk) 1; padding-top: 1.25rem; }
.fs-feature > * { margin: 0 0 .5rem; }
.fs-feature__n, .fs-step__n, .fs-stat__n { font-family: 'MONO RGO Modular', monospace; line-height: 1; }
.fs-feature__n { font-size: 1.5rem; color: #8065AC; }
.fs-feature h3 { font-size: 1.25rem; color: #111; }
.fs-stat { border-left: 1px solid #476EA1; padding: .25rem 0 .25rem 1.1rem; position: relative; }
.fs-stat::before { content: ""; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; background: #476EA1; }
.fs-stat > * { margin: 0; }
.fs-stat__n { font-size: clamp(2.6rem, 5vw, 4rem); background: var(--fs-dusk); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; }
.fs-stat__l { margin-top: .5rem; font-size: .95rem; max-width: 22ch; }
.fs-steps { position: relative; display: grid; gap: 1.5rem; }
.fs-step { display: flex; gap: 1.25rem; align-items: flex-start; position: relative; }
.fs-step:not(:last-child)::after { content: ""; position: absolute; left: 1.55rem; top: 3.4rem; bottom: -1.5rem; width: 1px; background: #476EA1; opacity: .35; }
.fs-step__n { flex: none; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; background: #111; color: #fff; font-size: 1.1rem; margin: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.fs-step__b > * { margin: 0 0 .3rem; }
.fs-step__b h3 { font-size: 1.15rem; color: #111; }

/* ---------- Vertrouwensregel ---------- */
.fs-trust { padding: 1.4rem 0; }
.fs-trust .fs-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.8rem; }
.fs-trust__item { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #3B3B3B; }

/* ---------- Testimonials ---------- */
.fs-stars { color: #E67A45; letter-spacing: .1em; }
.fs-quote-text { font-size: 1.02rem; line-height: 1.6; color: #111; flex: 1; }
.fs-cite { font-size: .88rem; }

/* ---------- Checks, tabel, FAQ ---------- */
.fs-checks { list-style: none; padding: 0; margin: 0 0 .5rem; }
.fs-checks li { position: relative; padding: .3rem 0 .3rem 1.7rem; }
.fs-checks li::before { content: ""; position: absolute; left: 0; top: .72rem; width: .9rem; height: .5rem; border-left: 2px solid #8065AC; border-bottom: 2px solid #8065AC; transform: rotate(-45deg) scale(.9); }
.fs-checks--lg li { font-size: 1.1rem; padding-block: .65rem; border-bottom: 1px solid var(--fs-line); }
.fs-checks--lg li::before { top: 1.05rem; }
.fs-card--featured .fs-checks li::before { border-color: #B9B5B5; }

.fs-table table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.fs-table th, .fs-table td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid var(--fs-line); }
.fs-table th:first-child, .fs-table td:first-child { text-align: left; font-weight: 600; color: #111; }
.fs-table thead th { background: #111; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; border: 0; }
.fs-table tbody tr:nth-child(even) td { background: #F4F3F4; }
.fs-table td { color: #476EA1; font-weight: 700; }

.fs-faq .wp-block-details { border-bottom: 1px solid var(--fs-line); padding: 1rem 0; }
.fs-faq .wp-block-details summary { cursor: pointer; font-weight: 700; color: #111; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.fs-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.fs-faq .wp-block-details summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; color: #476EA1; font-size: 1.3rem; line-height: 1; }
.fs-faq .wp-block-details[open] summary::after { content: "–"; }
.fs-faq .wp-block-details p { margin: .75rem 0 0; max-width: 60ch; }

/* ---------- Callouts, pull-quote, kerngegevens ---------- */
.fs-callout { padding: 1.1rem 1.4rem 1.2rem; margin: 1rem 0; border-left: 4px solid #476EA1; background: #E4E3E4; }
.fs-callout > * { margin: 0; }
.fs-callout__l { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35rem !important; }
.fs-callout--info { border-left-color: #476EA1; }
.fs-callout--info .fs-callout__l { color: #476EA1; }
.fs-callout--warn { border-left-color: #E67A45; background: rgba(237, 219, 190, .5); }
.fs-callout--warn .fs-callout__l { color: #a8481c; }
.fs-callout--tip { border-left-color: #8065AC; }
.fs-callout--tip .fs-callout__l { color: #6a4f98; }
.fs-callout--ok { border-left-color: #3E6868; background: rgba(62, 104, 104, .1); }
.fs-callout--ok .fs-callout__l { color: #3E6868; }
.fs-pullquote { border-left: 4px solid transparent; border-image: linear-gradient(180deg, #476EA1, #8065AC) 1; padding: .4rem 0 .4rem 1.75rem; }
.fs-pullquote > * { margin: 0; }
.fs-pullquote__t { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; font-weight: 700; color: #111; letter-spacing: -0.01em; }
.fs-pullquote .fs-cite { margin-top: 1rem; font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.fs-facts > p { display: flex; flex-direction: column; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--fs-line); }
.fs-facts > p:last-child { border-bottom: 0; }
.fs-facts strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #476EA1; margin-bottom: .15rem; }

/* ---------- Pakketten ---------- */
.fs-card--tier { padding-bottom: 1.6rem; }
.fs-price { font-size: 1.7rem; font-weight: 800; color: #111; line-height: 1.1; margin: .2rem 0 !important; }
.fs-card--featured { background: #111; color: #E4E3E4; border-color: #3E6868; }
.fs-card--featured::after { background: linear-gradient(to top left, #E4E3E4 calc(50% - .5px), #3E6868 calc(50% - .5px), #3E6868 calc(50% + .5px), transparent calc(50% + .5px)); }
.fs-tone-grey .fs-card--featured::after { background: linear-gradient(to top left, #E4E3E4 calc(50% - .5px), #3E6868 calc(50% - .5px), #3E6868 calc(50% + .5px), transparent calc(50% + .5px)); }
.fs-card--featured :is(h3, .fs-price) { color: #fff; }
.fs-card--featured .fs-tier { color: #B9B5B5; }
.fs-card--featured .wp-element-button { background: #fff; color: #111; }

/* ---------- CTA compact, announce, team, badges ---------- */
.fs-cta-compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; background: #E4E3E4; border-left: 4px solid #476EA1; padding: 1.5rem 1.75rem; margin-block: 2rem; }
.fs-cta-compact__t > * { margin: 0; }
.fs-cta-compact h3 { font-size: 1.25rem; color: #111; }
.fs-cta-compact .wp-block-buttons { margin: 0; }
.fs-announce { background: #111; color: #E4E3E4; text-align: center; padding: .65rem 1rem; font-size: .9rem; }
.fs-announce p { margin: 0; }
.fs-announce a { color: #fff; font-weight: 700; text-decoration: underline; }
.fs-avatar { width: 3.75rem; height: 3.75rem; display: grid; place-items: center; margin: 0 0 .6rem !important; background: var(--fs-dusk); color: #fff; font-family: 'MONO RGO Modular', monospace; font-size: 1.3rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.fs-role { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #476EA1; }
.fs-badges { display: flex; flex-wrap: wrap; gap: .8rem; }
.fs-badges > * { margin: 0; }
.fs-cta-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .fs-cta-buttons { justify-content: flex-start; } }

/* ---------- Stijlgids: modulelabel-blokken laten ruimte onder het label ---------- */
.fs-sec + .fs-sec { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .fs-card--link { transition: none; } .fs-card--link:hover { transform: none; } }

/* ---------- Verfijningen ---------- */
.fs-sec :is(h1, h2, h3), .fs-highlight h3, .fs-cta-compact h3 { font-weight: 700; }
.fs-sec .fs-display { font-weight: 800; letter-spacing: -0.01em; }
.fs-sec .fs-eyebrow { margin-bottom: .9rem; }
.fs-sec .fs-badge { margin-bottom: 1.1rem; }
.fs-note { margin-top: .9rem; }
.fs-split > .wp-block-column > .wp-block-buttons { margin-top: 1.4rem; }
/* Kaarten in een rij even hoog, knoppen/links onderaan. */
.fs-grid-3 > .wp-block-column { display: flex; flex-direction: column; }
.fs-grid-3 > .wp-block-column > * { flex: 1; }
.fs-card .fs-more { margin-top: auto; padding-top: .9rem; }
.fs-step__b h3 { margin-top: .6rem; }
.fs-hero-heading, .has-cyber-dusk-gradient-background h1 { font-weight: 800; }
/* Stijlgids: groepskoppen over de volle breedte. */
.sg-grouphead { width: 100vw; margin-left: calc(50% - 50vw); }

/* Contrast (WCAG AA): Nebula Blue/Purple halen op Tech Aged White geen 4,5:1 voor kleine tekst. */
.fs-tone-grey .fs-eyebrow, .fs-tone-dots .fs-eyebrow, .fs-tone-grey .fs-tag { color: #3B3B3B; }
.fs-tone-grey .fs-eyebrow::before, .fs-tone-dots .fs-eyebrow::before { background: #8065AC; }
.fs-callout--info .fs-callout__l, .fs-callout--tip .fs-callout__l { color: #3B3B3B; }

/* ---------- Volledige pagina's: leesbreedte en kaarten op de gradient-hero ---------- */
.fs-prose .fs-wrap > :where(p, ul, ol, h2, h3, h4, .wp-block-details) { max-width: 760px; }
.fs-prose .fs-wrap > h3, .fs-sec h3 { margin-top: 1.5rem; }
.fs-tone-dusk .fs-card :is(h1, h2, h3, h4) { color: #111111 !important; }
.fs-tone-dusk .fs-card :is(p, li) { color: #3B3B3B; }
.fs-tone-dusk .fs-card .fs-eyebrow { color: #8065AC; }
.fs-person { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fs-ch)), calc(100% - var(--fs-ch)) 100%, 0 100%); }
.fs-person .wp-block-heading { margin: 0; color: #fff !important; }
.fs-person p { margin: .25rem 0 0; color: #fff; }
.fs-person a { color: #fff; }

/* ---------- Partners & klanten ---------- */
.fs-logos .fs-logo { margin: 0 0 .5rem; }
.fs-logos .fs-logo img { height: auto; max-width: 100%; }
.fs-logos .wp-block-column { text-align: center; }

/* ---------- Genummerde kaarten (tegels en stappen): nummer via CSS, geen extra tekst ---------- */
.fs-numbered { counter-reset: fsn; }
.fs-numbered .fs-card { counter-increment: fsn; }
.fs-numbered .fs-card::before {
	content: counter(fsn, decimal-leading-zero); display: block; margin-bottom: .6rem; color: #8065AC;
	font-family: 'MONO RGO Modular', monospace; font-size: 1.1rem; line-height: 1;
}
.fs-numbered .fs-card > h3 { margin-top: 0; }
.fs-numbered .fs-card > p:first-child { margin-top: 0; }