/* Landingspagina communicatietraining.
   De opmaak komt uit handboeken.css (gelijk aan de MindManager-werkboeken).
   Hier staan alleen de gele premium-accenten en wat het formulier extra nodig heeft. */

html:has(body.aom-embed) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.aom-embed) {
		scroll-behavior: auto;
	}
}

/* Balk onder het menu (alleen deze pagina). Kleuren en font uit het thema. */
.aom-topbalk {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 16px;
	background: #000000;
	color: #ffffff;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
}

.aom-topbalk strong {
	font-weight: 700;
}

.aom-topbalk span {
	color: #00aeef;
	font-weight: 700;
	white-space: nowrap;
}

.aom-topbalk:hover,
.aom-topbalk:focus {
	color: #ffffff;
	text-decoration: none;
}

.aom-topbalk:hover span,
.aom-topbalk:focus span {
	text-decoration: underline;
}

.aom-topbalk:focus-visible {
	outline: 3px solid #00aeef;
	outline-offset: -3px;
}

@media (max-width: 600px) {
	.aom-topbalk {
		font-size: 14px;
	}
}

/* Eén H1 op deze pagina: logo en paginatitel van het thema zijn hier een div.
   Zelfde opmaak als de oorspronkelijke h1 (theme.css, media.css en de themakleuren inline). */
.logo .aom-logo-kop {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: 'BebasNeueRegular', sans-serif;
	font-size: 80px;
	font-style: normal;
	font-weight: normal;
	line-height: inherit;
	text-transform: none;
	color: #000000;
}

.title .aom-paginatitel {
	position: relative;
	display: inline-block;
	margin: 0 0 20px;
	padding: 10px;
	border: none;
	background: none;
	box-shadow: none;
	vertical-align: baseline;
	font-family: 'BebasNeueRegular', sans-serif;
	font-size: 80px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
	color: inherit;
}

@media only screen and (max-width: 767px) {
	.logo .aom-logo-kop {
		line-height: 1;
	}

	.title .aom-paginatitel {
		font-size: 40px;
	}
}

/* Melding na verzenden: h2 met hetzelfde uiterlijk als de vroegere h1 (.aom-land h1 + .aom-laden h1). */
.aom-ct .aom-laden h2 {
	margin: 0 0 10px;
	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000000;
}

/* Veelgestelde vragen: zelfde stijl als de voorwaarden in het formulier. */
.aom-ct .aom-faq-lijst {
	display: grid;
	gap: 8px;
	max-width: 820px;
}

.aom-ct .aom-faq-item {
	background: #fff;
	border: 1px solid #e6e6e6;
	padding: 12px 16px;
}

.aom-ct .aom-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wom-heading);
}

.aom-ct .aom-faq-item summary:focus-visible {
	outline: 3px solid var(--wom-cyan);
	outline-offset: 2px;
}

.aom-ct .aom-faq-item[open] summary {
	color: var(--wom-cyan);
}

.aom-ct .aom-faq-item p {
	margin: 8px 0 0;
	line-height: 1.6;
}

/* Basistekst van het thema volgen, zoals op de werkboekenpagina */
.aom-ct:has(.aom-verkoop) {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.aom-ct .aom-kies-lead {
	max-width: 62ch;
	margin: 0 0 16px;
}

/* Kaften: echte afbeeldingen. Hero-kaft maximaal 320px (mobiel 220px), gecentreerd,
   zodat de knop eronder direct zichtbaar is. */
.aom-ct .aom-land-cover .aom-hb-cover {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	background: transparent;
}

@media (max-width: 767px) {
	.aom-ct .aom-land-cover .aom-hb-cover {
		max-width: 220px;
	}
}

.aom-ct .aom-land-cover .aom-hb-cover img {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
}

.aom-ct #werkboeken .aom-hb-cover img {
	padding: 16px 16px 0;
	box-sizing: border-box;
}

/* Premium: gele accenten */
.aom-ct .aom-hb-card.is-paid {
	border: 2px solid #ffb600;
}

.aom-ct .aom-hb-card.is-paid .aom-hb-pill,
.aom-ct .aom-hb-card.is-paid .aom-hb-facts li {
	background: #fff1cc;
}

.aom-ct .aom-hb-card.is-paid .aom-prijs-nu {
	color: #9a6b00;
}

.aom-ct .aom-hb-card.is-paid .aom-hb-btn,
.aom-ct .aom-aanvraag-form.is-paid .aom-hb-btn {
	background: #ffb600;
	color: #141414;
}

.aom-ct .aom-hb-card.is-paid .aom-hb-btn:hover,
.aom-ct .aom-aanvraag-form.is-paid .aom-hb-btn:hover {
	background: #ffc533;
}

.aom-ct .aom-ideeen-tabel a.is-premium {
	color: #9a6b00;
}

.aom-ct .aom-ideeen-tabel a.is-premium:hover,
.aom-ct .aom-ideeen-tabel a.is-premium:focus-visible {
	color: #141414;
}

.aom-ct .aom-actie.is-premium {
	background: #fff8e5;
	border-left-color: #ffb600;
}

/* Aanvraagformulier, zelfde vorm als .aom-hb-mail */
.aom-ct #start .aom-hb-keuze {
	grid-column: 1 / -1;
}

.aom-ct #start .aom-hb-keuze-rij {
	cursor: pointer;
}

.aom-ct #start .aom-hb-keuze-rij:last-child {
	border-bottom: 0;
}

.aom-ct #start .aom-hb-keuze-rij em {
	font-style: normal;
	font-weight: 700;
	color: var(--wom-cyan);
}

.aom-ct #start .aom-hb-keuze-rij small {
	display: block;
	color: var(--wom-muted);
	font-size: 13px;
}

.aom-ct #start .aom-hb-keuze-rij.is-premium em {
	color: #9a6b00;
}

.aom-ct #start .aom-hb-keuze-rij.is-premium:has(input:checked) {
	background: #fff8e5;
	box-shadow: inset 4px 0 0 #ffb600;
	padding-left: 10px;
}

.aom-ct #start .aom-hb-mail label > span:first-child {
	font-weight: 700;
	color: inherit;
}

.aom-ct #start .aom-coupon,
.aom-ct #start .aom-coupon-uitkomst {
	grid-column: 1 / -1;
}

.aom-ct #start .aom-coupon {
	max-width: 280px;
}

.aom-ct #start .aom-coupon input {
	text-transform: uppercase;
}

.aom-ct #start .aom-aanvraag-form:not(.is-paid) .aom-coupon,
.aom-ct #start .aom-aanvraag-form:not(.is-paid) .aom-coupon-uitkomst {
	display: none;
}

.aom-ct #start .aom-coupon-uitkomst {
	margin: 0;
	color: #1f7a3a;
}

.aom-ct #start .aom-coupon-uitkomst.is-fout {
	color: #9b2c2c;
}

.aom-ct #start .aom-hb-keuze-nu {
	color: var(--wom-muted);
	font-weight: 400;
}

.aom-ct #start .aom-aanvraag-fout {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fff4f4;
	border-left: 4px solid #c0392b;
}

.aom-ct #start .aom-hb-voorwaarden a,
.aom-ct #start .aom-form-privacy a {
	color: var(--wom-heading);
}

/* Aanvraagformulier: 2 kolommen op desktop, 1 kolom onder 640px.
   Rij 1 Voornaam | Achternaam, rij 2 Werk-e-mailadres (breed), rij 3 Organisatie | Ik werk bij,
   rij 4 Functie | Telefoonnummer. Velden in een rij beginnen op dezelfde hoogte en zijn even hoog. */
.aom-ct #start .aom-hb-mail {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px 16px;
	align-items: start;
}

@media (max-width: 640px) {
	.aom-ct #start .aom-hb-mail {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aom-ct #start .aom-verplicht-uitleg,
.aom-ct #start .aom-veld-breed,
.aom-ct #start .aom-marketing {
	grid-column: 1 / -1;
}

.aom-ct #start .aom-verplicht-uitleg {
	margin: 4px 0 -4px;
	font-size: 14px;
	color: var(--wom-muted);
}

.aom-ct #start .aom-ster {
	margin-left: 2px;
	font-weight: 700;
	color: #0089be;
}

.aom-ct #start .aom-hb-mail input[type="text"],
.aom-ct #start .aom-hb-mail input[type="email"],
.aom-ct #start .aom-hb-mail input[type="tel"],
.aom-ct #start .aom-hb-mail select {
	box-sizing: border-box;
	height: 44px;
	line-height: normal;
}

/* Uitleg onder het telefoonveld: gewone zinsopmaak (het thema zet labels in hoofdletters). */
.aom-ct #start .aom-veld-uitleg {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wom-muted);
}

/* Telefoon: hulptekst hoort zichtbaar bij het veld (6px: 4px rij-afstand in het label + 2px).
   Het thema geeft invoervelden 24px marge onder; die halen we hier weg. */
.aom-ct #start .aom-hb-mail .aom-veld-telefoon input {
	margin-bottom: 0;
}

/* Alleen voor schermlezers. */
.aom-ct .aom-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Mobiel (onder 640px): de hele pagina 16px zijkant in plaats van de vaste themacontainer
   (300px of 420px breed, plus 20px padding = ~57px rand). Alleen deze pagina: landing.css laadt alleen hier.
   Plus 18px tussen de formuliervelden. Desktop blijft zoals het is. */
@media (max-width: 640px) {
	body.aom-ct-page .section > .container,
	body.aom-ct-page main.aom-ct > .container {
		width: auto;
		max-width: none;
		margin-left: 16px;
		margin-right: 16px;
	}

	body.aom-ct-page .section > .container .sixteen.columns {
		width: auto;
		float: none;
	}

	body.aom-embed .aom-ct .aom-land {
		padding-left: 0;
		padding-right: 0;
	}

	.aom-ct #start .aom-hb-mail {
		row-gap: 18px;
	}

	.aom-ct #start .aom-hb-mail input[type="text"],
	.aom-ct #start .aom-hb-mail input[type="email"],
	.aom-ct #start .aom-hb-mail input[type="tel"],
	.aom-ct #start .aom-hb-mail select {
		margin-bottom: 0;
	}
}

/* Vinkjes: gewone zinsopmaak, over de hele breedte klikbaar, minimaal 44px hoog. */
.aom-ct #start .aom-hb-vink {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wom-ink);
	cursor: pointer;
}

.aom-ct #start .aom-hb-vink span {
	font-weight: 400;
	color: inherit;
}

.aom-ct #start .aom-hb-vink .aom-ster {
	font-weight: 700;
	color: #0089be;
}

.aom-ct #start .aom-hb-vink input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.aom-ct #start .aom-hb-voorwaarden {
	gap: 0;
}

.aom-ct #start .aom-voorwaarden-knop {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #0089be;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.aom-ct #start .aom-voorwaarden-knop:focus-visible {
	outline: 3px solid var(--wom-cyan);
	outline-offset: 2px;
}

.aom-ct #start .aom-voorwaarden-tekst {
	margin: 0 0 6px 32px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e6e6e6;
}

.aom-ct #start .aom-voorwaarden-tekst p {
	margin: 8px 0 0;
	font-weight: 400;
	line-height: 1.55;
}

.aom-ct #start .aom-voorwaarden-tekst a {
	color: var(--wom-heading);
	font-weight: 700;
}

/* Onder de knop: uitleg, privacyverklaring en link naar de veelgestelde vragen. */
.aom-ct #start .aom-hb-keuze-nu {
	margin: 0;
}

.aom-ct #start .aom-form-vragen {
	margin: 4px 0 0;
}

.aom-ct #start .aom-form-vragen a {
	color: var(--wom-heading);
	font-weight: 700;
}

/* Inkijkviewer: de hele pagina past op het scherm. Klik (muis) wisselt naar ware grootte;
   op touch zoom je met knijpen (inkijk.js). Vegen bladert. */
.aom-ct .aom-inkijk-blad-wrap {
	touch-action: pan-y;
}

.aom-ct .aom-inkijk-boek img {
	transition: none;
}

.aom-ct .aom-inkijk-licht-scroll {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	overflow: hidden;
	touch-action: none;
}

.aom-ct .aom-inkijk-licht img {
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 88vh;
	margin: 0;
	object-fit: contain;
	transform-origin: center center;
	cursor: zoom-in;
}

.aom-ct .aom-inkijk-licht.is-zoom .aom-inkijk-licht-scroll {
	display: block;
	padding: 24px;
	overflow: auto;
	touch-action: auto;
}

.aom-ct .aom-inkijk-licht.is-zoom img {
	max-width: none;
	max-height: none;
	margin: 0 auto;
	cursor: zoom-out;
}

@media (hover: none), (pointer: coarse) {
	.aom-ct .aom-inkijk-licht img {
		cursor: auto;
	}
}