/*
 * Standalone basis voor de proefles-templates.
 *
 * Brengt precies datgene mee wat de templates uit de thema-bundle (grow-styles)
 * gebruikten: het OT Sono merkfont en de Bootstrap-utility/layout-classes die in
 * de markup staan. Hierdoor is de plugin niet meer afhankelijk van het thema.
 * Alle proefles-specifieke styling staat in grow-free-trial.css (incl. eigen
 * :root merk-variabelen).
 */

/* ─── Merkfont: OT Sono ─────────────────────────────────────────────────── */
@font-face {
	font-family: "OT Sono";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/OTSono-Light.woff2") format("woff2"),
	     url("../fonts/OTSono-Light.woff")  format("woff");
}
@font-face {
	font-family: "OT Sono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/OTSono-Regular.woff2") format("woff2"),
	     url("../fonts/OTSono-Regular.woff")  format("woff");
}
@font-face {
	font-family: "OT Sono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/OTSono-Bold.woff2") format("woff2"),
	     url("../fonts/OTSono-Bold.woff")  format("woff");
}

/* ─── Basis-reset (alleen actief op de proefles-pagina's) ───────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.proefles-page {
	margin: 0;
	font-family: "OT Sono", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Bootstrap-subset: alleen de classes die de templates gebruiken ─────── */

/* Container */
.proefles-page .container {
	width: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 576px)  { .proefles-page .container { max-width: 540px; } }
@media (min-width: 768px)  { .proefles-page .container { max-width: 720px; } }
@media (min-width: 992px)  { .proefles-page .container { max-width: 960px; } }
@media (min-width: 1200px) { .proefles-page .container { max-width: 1140px; } }
@media (min-width: 1400px) { .proefles-page .container { max-width: 1320px; } }

/* Row (geen kolommen in gebruik — flex-wrap container, Bootstrap-getrouw) */
.proefles-page .row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* Display-utilities */
.proefles-page .d-none         { display: none !important; }
.proefles-page .d-block        { display: block !important; }
.proefles-page .d-flex         { display: flex !important; }
.proefles-page .d-inline-flex  { display: inline-flex !important; }
.proefles-page .d-grid         { display: grid !important; }
@media (min-width: 992px) {
	.proefles-page .d-lg-none        { display: none !important; }
	.proefles-page .d-lg-block       { display: block !important; }
	.proefles-page .d-lg-flex        { display: flex !important; }
	.proefles-page .d-lg-inline-flex { display: inline-flex !important; }
	.proefles-page .d-lg-grid        { display: grid !important; }
}

/* Flex-uitlijning + spacing */
.proefles-page .align-items-center    { align-items: center !important; }
.proefles-page .justify-content-start { justify-content: flex-start !important; }
.proefles-page .gap-1                 { gap: .25rem !important; }
.proefles-page .mt-2                  { margin-top: .5rem !important; }

/* Tekst-utilities */
.proefles-page .fw-bold      { font-weight: 700 !important; }
.proefles-page .text-primary { color: #022D26 !important; }
.proefles-page .text-white   { color: #fff !important; }
.proefles-page .rounded-pill { border-radius: 50rem !important; }

/* Knoppen (basis + secondary-variant; verdere styling via .proefles-cta) */
.proefles-page .btn {
	display: inline-block;
	padding: .375rem .75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #022D26;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: .375rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.proefles-page .btn:hover { color: #022D26; }
.proefles-page .btn-secondary {
	color: #000;
	background-color: #A2FF4B;
	border-color: #A2FF4B;
}