/*
Theme Name: FAAM
Theme URI: https://faam.be
Author: FAAM BV
Description: Thema voor FAAM: tools en kennis voor makers en starters.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faam
*/

/* ---------- Algemeen ---------- */

:where(body) {
	-webkit-font-smoothing: antialiased;
}

.faam-label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen);
}

.faam-label.is-oker { color: var(--wp--preset--color--oker); }
.has-bos-background-color .faam-label { color: var(--wp--preset--color--salie); }

.faam-lead {
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.55;
	color: var(--wp--preset--color--tekst-zacht);
	max-width: 38rem;
}

.faam-klein {
	font-size: 0.875rem;
	color: var(--wp--preset--color--grijs);
}

.faam-sectie {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.faam-sectie.is-krap-boven { padding-top: 0; }

/* Outline-knop */
.wp-block-button.is-style-outline > .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--inkt);
	border: 1px solid currentColor;
	padding-top: calc(0.95rem - 1px);
	padding-bottom: calc(0.95rem - 1px);
}
.wp-block-button.is-style-outline > .wp-element-button:hover {
	background: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}

/* ---------- Header ---------- */

.faam-header {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.faam-header .wp-block-buttons .wp-element-button {
	padding: 0.7rem 1.25rem;
	font-size: 0.95rem;
}

@media (max-width: 781px) {
	.faam-header .faam-header-knoppen .is-style-outline { display: none; }
}

/* ---------- Hero ---------- */

.faam-hero {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
}

.faam-hero h1 {
	font-size: var(--wp--preset--font-size--kop-xl);
	line-height: 0.98;
}

.faam-hero h1 em {
	color: var(--wp--preset--color--groen);
}

.faam-voorbeeldkaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 20px;
	padding: 1.75rem;
}

.faam-voorbeeldkaart .faam-bedrag {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 2.75rem;
	line-height: 1.1;
	color: var(--wp--preset--color--bos);
}

.faam-balk {
	display: flex;
	width: 100%;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	margin: 0.25rem 0;
}

.faam-balk span {
	display: block;
	height: 100%;
}

.faam-voorbeeldkaart > * { width: 100%; }

/* ---------- Bewijs / tijdlijn ---------- */

.faam-mijlpaal {
	border-top: 1px solid var(--wp--preset--color--inkt);
	padding-top: 1.25rem;
}

.faam-mijlpaal h3 { margin: 0 0 0.5rem; font-size: 2.25rem; }
.faam-mijlpaal p { margin: 0; color: var(--wp--preset--color--tekst-zacht); }

/* ---------- Kaarten ---------- */

.faam-kaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 18px;
	padding: 1.75rem;
	height: 100%;
	box-sizing: border-box;
}

.faam-kaart h3 { margin-top: 0.25rem; font-size: 1.875rem; line-height: 1.1; }
.faam-kaart p { color: var(--wp--preset--color--tekst-zacht); }

.faam-toolkaart {
	background: var(--wp--preset--color--bos-licht);
	border-radius: 18px;
	padding: 1.75rem;
	height: 100%;
	box-sizing: border-box;
}

.faam-toolkaart h3 {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0.25rem 0 0.5rem;
}

.faam-toolkaart h3 a { color: inherit; text-decoration: none; }
.faam-toolkaart h3 a:hover { text-decoration: underline; }
.faam-toolkaart p { color: #C9D8D1; margin: 0; }

.faam-toolkaart .faam-nr {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--salie);
	margin: 0;
}

.faam-status {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: #3C6356;
	color: #E6EFEA;
	margin: 0;
}

.faam-status.is-live {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--bos);
}

.faam-kop-rij {
	align-items: flex-end;
}

.faam-kop-rij h2 { margin: 0; }

.has-bos-background-color .faam-kop-rij p { color: #C9D8D1; }

/* ---------- Lidmaatschap ---------- */

.faam-prijskaart {
	background: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--groen);
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	height: 100%;
	box-sizing: border-box;
}

.faam-prijs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	margin: 0;
}

.faam-prijs span {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1rem;
	color: var(--wp--preset--color--grijs);
}

.faam-vinkjes {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 2rem;
}

.faam-vinkjes li {
	position: relative;
	padding-left: 1.75rem;
}

.faam-vinkjes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.9rem;
	height: 0.5rem;
	border-left: 2px solid var(--wp--preset--color--groen);
	border-bottom: 2px solid var(--wp--preset--color--groen);
	transform: rotate(-45deg);
}

@media (max-width: 600px) {
	.faam-vinkjes { grid-template-columns: 1fr; }
}

.faam-maakkaart {
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	height: 100%;
	box-sizing: border-box;
}

/* ---------- FAQ ---------- */

.faam-faq .wp-block-details {
	border-top: 1px solid #CFC8B8;
	padding: 1.4rem 0;
}

.faam-faq .wp-block-details:last-child {
	border-bottom: 1px solid #CFC8B8;
}

.faam-faq summary {
	font-size: 1.1875rem;
	font-weight: 600;
	cursor: pointer;
}

.faam-faq .wp-block-details p {
	color: var(--wp--preset--color--tekst-zacht);
	margin-bottom: 0;
}

/* ---------- Kennisbank-lijst ---------- */

.faam-kennis .wp-block-post-template {
	gap: 1.5rem;
}

.faam-kennis .wp-block-post-terms a {
	color: var(--wp--preset--color--groen);
	text-decoration: none;
}

.faam-kennis .wp-block-post-excerpt {
	color: var(--wp--preset--color--tekst-zacht);
}

/* ---------- Footer ---------- */

.faam-footer {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
	font-size: 0.875rem;
}

.faam-footer .wp-block-site-title a,
.faam-footer .faam-footer-titel {
	color: var(--wp--preset--color--ivoor);
}

.faam-footer a { color: #C9C4B8; }
.faam-footer a:hover { color: var(--wp--preset--color--ivoor); }
.faam-footer p { margin: 0; color: #C9C4B8; }

/* ---------- Pagina's en artikels ---------- */

.faam-pagina {
	padding-bottom: var(--wp--preset--spacing--70);
}

.faam-pagina > .faam-maakkaart {
	margin-top: var(--wp--preset--spacing--60);
}

.faam-artikel-kop {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.faam-artikel .wp-block-post-content > * + h2 { margin-top: 2.5rem; }
.faam-artikel .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--kop-s); }