/* ============================================================
   Thuisdaime Toegang — styling (portable: hoort bij de plugin)
   ============================================================ */

/* --- Hero-knoppen: alle drie gelijk (hoogte + vaste breedte),
       gecentreerd naast elkaar. .tdt-hero staat op de hero-groep. --- */
/* Uitlijning van de knoppengroep kies je in de editor (Knoppen → uitlijning).
   De vroegere regel "justify-content: center" hier overschreef die keuze,
   waardoor editor en site van elkaar verschilden. (23-9-2026) */
.tdt-hero .wp-block-button {
	margin: 0;
}
.tdt-hero .wp-block-button__link {
	width: 200px;
	min-width: 0;
	justify-content: center;
	text-align: center;
}
@media (max-width: 1100px) and (min-width: 782px) {
	/* smallere desktop/tablet: kleinere knoppen zodat de twee middenknoppen naast elkaar blijven */
	.tdt-hero .wp-block-button__link { width: 150px; }
}

/* Hero op tablet en telefoon (kolommen onder elkaar): foto en cirkel niet
   schermbreed maar maximaal 340 px en gecentreerd; 40 px ruimte aan de zijkant,
   omdat de schermbrede hero op tablets anders net buiten beeld valt. (23-9-2026) */
@media (max-width: 1199px) and (min-width: 768px) {
	.tdt-hero .kb-row-layout-wrap > .kt-row-column-wrap { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1024px) {
	.tdt-hero .wp-block-buttons { justify-content: center; } /* onder elkaar: knoppen in het midden */
	.tdt-hero .wp-block-image { text-align: center; }
	.tdt-hero .wp-block-image img { width: 100%; max-width: 340px; height: auto; margin-left: auto; margin-right: auto; display: block; }
}

/* Hero op desktop: bovenkanten én onderkanten van de drie kolommen op één lijn.
   Eerste blok (foto, titel, cirkel) bovenaan, laatste blok (kop, knoppen) onderaan. (23-9-2026) */
@media (min-width: 1025px) {
	.tdt-hero .kt-row-column-wrap > .wp-block-kadence-column { justify-content: flex-start; }
	.tdt-hero .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; height: 100%; }
}

/* Klikbaar groepje-icoon: subtiele hover */
.tdt-hero .wp-block-image a {
	display: inline-block;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.tdt-hero .wp-block-image a:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

/* --- Formulieren (inloggen / aanmelden / wachtwoord instellen) --- */
.tdt-forms {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.tdt-forms .tdt-card {
	flex: 1 1 300px;
}
.tdt-card {
	background: #fff9e8;
	border: 1px solid #e6d9a8;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 20px;
	max-width: 520px;
}
.tdt-card h3 {
	margin: 0 0 6px;
	color: #123a63;
}
.tdt-help {
	font-size: 14px;
	color: #5a5a5a;
	margin: 0 0 16px;
}
.tdt-card label {
	display: block;
	font-weight: 600;
	color: #123a63;
	margin-bottom: 14px;
	font-size: 15px;
}
.tdt-card input[type="text"],
.tdt-card input[type="email"],
.tdt-card input[type="password"],
.tdt-card select,
.tdt-card textarea {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 10px 12px;
	border: 1px solid #cdbd86;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 400;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
}
.tdt-card textarea { resize: vertical; }

/* "Wachtwoord zichtbaar maken"-vinkje */
.tdt-card label.tdt-showpw {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 14px;
	color: #5a5a5a;
	margin: -6px 0 16px;
	cursor: pointer;
}
.tdt-card label.tdt-showpw input {
	width: auto;
	margin: 0;
	padding: 0;
}

/* --- Knoppen (zelfde look als de site-knoppen) --- */
.tdt-btn {
	display: inline-block;
	background: #009b3a;
	color: #fff !important;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.tdt-btn:hover { background: #007c2e; }
.tdt-btn--ghost {
	background: transparent;
	color: #009b3a !important;
	border: 1px solid #009b3a;
}
.tdt-btn--ghost:hover { background: rgba(0, 155, 58, 0.08); }

/* Tekst-knop (Wachtwoord vergeten) */
.tdt-btn--link {
	background: transparent;
	color: #123a63 !important;
	padding: 8px 4px;
	font-weight: 600;
	text-decoration: underline;
}
.tdt-btn--link:hover { background: transparent; color: #009b3a !important; }

/* Knoppenrij(en) onder een formulier */
.tdt-btnrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 4px;
}
.tdt-btnrow--sub { margin-top: 10px; }

.tdt-request {
	margin-top: 8px;
}
.tdt-request a {
	color: #123a63;
	font-weight: 600;
}

/* --- Meldingen --- */
.tdt-notice {
	padding: 12px 16px;
	border-radius: 8px;
	margin: 0 0 18px;
	font-size: 15px;
	max-width: 520px;
}
.tdt-notice--error   { background: #fdecec; border: 1px solid #f3b5b5; color: #8a1f1f; }
.tdt-notice--success { background: #eafaf0; border: 1px solid #9fdcb6; color: #1c6b3a; }

/* Annuleer/uitlog-link boven "Kies je eigen wachtwoord" (subtiele terug-link). */
.tdt-cancel { margin: 0 0 10px; }
.tdt-btn--small { padding: .3em .9em; font-size: .85em; }