/**
 * Portaalstijl, afgestemd op tdmconsultancy.be.
 *
 * De publieke site draait op Salient met WPBakery; de portaalinstallatie op
 * Bricks (childthema bricks-child). Dit bestand moet op beide werken, vandaar
 * dat het zo weinig mogelijk vastlegt. Twee uitgangspunten:
 *
 * 1. Typografie wordt NIET gedeclareerd. Salient laadt Roboto, Cabin en een
 *    zelfgehoste Open Sans en wijst die zelf toe aan body en koppen. Zou dit
 *    bestand een font-family zetten, dan wint het van het thema en gaat het
 *    portaal juist afwijken. Alles erft; hier staan alleen groottes en
 *    gewichten waar de hiërarchie dat vraagt.
 *
 * 2. Kleuren staan in --tdm-*-variabelen op .tdm-portal. De waarden hieronder
 *    zijn de terugval; de plugin schrijft de ingestelde accentkleur er als
 *    inline stijl overheen (Instellingen → Accentkleur van het portaal).
 *
 *    Draait de site op Salient, dan pikken we die z'n eigen accentvariabele
 *    op zodat het portaal meeverandert met de themaopties. Op Bricks bestaat
 *    die variabele niet en valt alles terug op de ingestelde waarde — vandaar
 *    dat de instelling er is en niet alleen een themavariabele.
 *
 * De pagina's renderen binnen get_header()/get_footer(), dus logo, navigatie
 * en footer komen van het thema — bij Bricks alleen wanneer het header- en
 * footer-template als voorwaarde "hele website" heeft staan.
 */

/* ---------- Eigen header en footer ----------
   Alleen zichtbaar wanneer het thema er zelf geen rendert; zie
   tdm_portal_shell_header(). De variabelen staan hier nog een keer omdat de
   shell buiten .tdm-portal valt. */

/*
 * De breedte van het portaal staat op één plek. Ze stond eerder als los
 * getal in de kop én in de inhoud, wat betekent dat een aanpassing aan één van
 * de twee ze stil uit elkaar laat lopen.
 */
:root {
	--tdm-width: 1300px;
}

/*
 * Expliciet border-box. Zonder dit hangt de werkelijke breedte af van of het
 * actieve thema een reset meebrengt — Bricks doet dat, een kaal thema niet —
 * en dan is 1300px op de ene installatie 1300 en op de andere 1340.
 */
.tdm-portal-page,
.tdm-portal,
.tdm-portal *,
.tdm-portal-shell,
.tdm-portal-shell *,
.tdm-portal-shell-footer,
.tdm-portal-shell-footer * {
	box-sizing: border-box;
}

/*
 * De voet blijft onderaan het scherm staan, ook op een korte pagina — het
 * account- of een leeg dossierscherm hing anders halverwege met wit eronder.
 *
 * Een flexkolom van minstens schermhoogte, waarbij alleen de inhoud mag groeien.
 * Bewust geen position:fixed: dan zou de voet over de inhoud van een lange
 * pagina liggen en op een telefoon permanent ruimte innemen.
 */
.tdm-portal-page {
	display: flex;
	flex-direction: column;

	/*
	 * 100vh als terugval; dvh trekt op mobiel de adresbalk mee, wat op iOS het
	 * verschil is tussen "onderaan" en "net buiten beeld". De adminbalk van
	 * WordPress hoort er af — die telt bij de schermhoogte op en zou anders een
	 * scrollbalk van 32px veroorzaken. Klanten zien die balk niet, beheerders
	 * wel, en die laatsten testen dit.
	 */
	min-height: 100vh;
	min-height: calc( 100dvh - var( --wp-admin--admin-bar--height, 0px ) );
}

.tdm-portal-page > .tdm-portal {
	/* Alleen de inhoud groeit; kop en voet houden hun eigen hoogte. */
	flex: 1 0 auto;
}

.tdm-portal-page > .tdm-portal-shell,
.tdm-portal-page > .tdm-portal-shell-footer {
	flex: 0 0 auto;
}

.tdm-portal-shell,
.tdm-portal-shell-footer {
	--tdm-accent: var( --nectar-accent-color, #00aa6e );
	--tdm-ink: #000;
	--tdm-line: #e3e6e4;
}

.tdm-portal-shell {
	border-bottom: 1px solid var( --tdm-line );
	background: #fff;
}

.tdm-portal-shell__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: var( --tdm-width );
	margin: 0 auto;
	padding: 1.25rem;
}

.tdm-portal-shell__logo {
	display: inline-flex;
	align-items: center;
	color: var( --tdm-ink );
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

.tdm-portal-shell__logo img {
	display: block;
	width: auto;
	max-width: 220px;
	height: 48px;
	object-fit: contain;
}

.tdm-portal-shell__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;

	/*
	 * Vaste 15px in plaats van 0.9375rem. Een rem-waarde is relatief aan de
	 * root-fontgrootte, en die zet niet elk thema op 16px — bij Bricks hangt
	 * dat van de typografie-instellingen af. Met px staat de menu- en
	 * footertekst overal op exact 15px, ongeacht het thema.
	 */
	font-size: 15px;
}

.tdm-portal-shell__nav a {
	color: var( --tdm-ink );

	/*
	 * Expliciet erven: een themaregel als "header a { font-size: … }" heeft
	 * genoeg specificiteit om de maat op de <a> zelf te overschrijven, ook al
	 * staat 15px hierboven op de nav. Deze regel zet dat terug.
	 */
	font-size: inherit;
	text-decoration: none;
}

.tdm-portal-shell__nav a:hover {
	color: var( --tdm-accent );
}

.tdm-portal-shell__logout {
	padding: 0.625rem 1.5rem;
	font-size: inherit;
	border-radius: 200px;
	background: var( --tdm-accent );
	color: #fff !important;
	font-weight: 600;
}

.tdm-portal-shell-footer {
	margin-top: 4rem;
	background: #000;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 15px;
}

.tdm-portal-shell-footer a {
	color: #fff;
	font-size: inherit;
	text-decoration: none;
}

.tdm-portal-shell-footer a:hover {
	text-decoration: underline;
}

/* ---------- Portaalinhoud ---------- */

.tdm-portal {
	--tdm-accent: var( --nectar-accent-color, #00aa6e );
	--tdm-accent-dark: var( --nectar-extra-color-1, #008c64 );
	--tdm-ink: #000;
	--tdm-muted: #5f6b66;
	--tdm-line: #e3e6e4;
	--tdm-line-strong: #c9cfcc;
	--tdm-surface: #fff;
	--tdm-surface-soft: #f6f8f7;

	/* Salient zet data-button-style="rounded_shadow": pilvormig met schaduw. */
	--tdm-radius-pill: 200px;
	--tdm-radius: 8px;
	--tdm-shadow: 0 6px 18px rgba( 0, 0, 0, 0.08 );

	/* Dezelfde variabele als de kop en de voet: één bron, altijd uitgelijnd. */
	max-width: var( --tdm-width );
	margin: 0 auto;
	padding: 3rem 1.25rem 4rem;
}

.tdm-portal :where( h1, h2, h3 ) {
	color: var( --tdm-ink );
}

/* ---------- Kop en introductie ---------- */

.tdm-portal__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.tdm-portal__header h1 {
	margin: 0;
}

.tdm-portal__intro {
	max-width: 90ch;
	color: var( --tdm-muted );
}

.tdm-portal__breadcrumb {
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	color: var( --tdm-muted );
}

.tdm-portal__breadcrumb a {
	color: inherit;
}

/* ---------- Meldingen ---------- */

.tdm-portal__alert {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var( --tdm-accent );
	border-radius: 0 var( --tdm-radius ) var( --tdm-radius ) 0;
	background: var( --tdm-surface-soft );
}

.tdm-portal__alert--success {
	border-left-color: var( --tdm-accent );
	background: rgba( 0, 170, 110, 0.08 );
}

.tdm-portal__alert--error {
	border-left-color: #c0392b;
	background: rgba( 192, 57, 43, 0.07 );
}

.tdm-portal__alert--warning {
	border-left-color: #d68910;
	background: rgba( 214, 137, 16, 0.08 );
}

/* ---------- Knoppen ---------- */

/* .tdm-portal__submit is de <p> rond de knop, niet de knop zelf: hem als
   knop opmaken leverde een groene pil in een groene pil op. */
.tdm-portal__submit {
	margin: 2rem 0 0;
}

.tdm-portal__button,
.tdm-portal button[type="submit"] {
	display: inline-block;
	padding: 1rem 2.25rem;
	border: 2px solid var( --tdm-ink );
	border-radius: var( --tdm-radius-pill );
	background: transparent;
	color: var( --tdm-ink );
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tdm-portal__button:hover,
.tdm-portal__button:focus-visible,
.tdm-portal button[type="submit"]:hover,
.tdm-portal button[type="submit"]:focus-visible {
	background: var( --tdm-ink );
	color: #fff;
	box-shadow: var( --tdm-shadow );
}

.tdm-portal__button--primary,
.tdm-portal button[type="submit"] {
	border-color: var( --tdm-accent );
	background: var( --tdm-accent );
	color: #fff;
	box-shadow: var( --tdm-shadow );
}

.tdm-portal__button--primary:hover,
.tdm-portal__button--primary:focus-visible,
.tdm-portal button[type="submit"]:hover,
.tdm-portal button[type="submit"]:focus-visible {
	border-color: var( --tdm-accent-dark );
	background: var( --tdm-accent-dark );
	color: #fff;
	transform: translateY( -1px );
}

/* De toetsenbordfocus mag nooit alleen uit een kleurwissel bestaan. */
.tdm-portal :where( a, button, input, select, textarea ):focus-visible,
.tdm-portal-shell a:focus-visible,
.tdm-portal-shell-footer a:focus-visible {
	outline: 2px solid var( --tdm-accent );
	outline-offset: 2px;
}

/* ---------- Navigatie en filters ---------- */

.tdm-portal__nav,
.tdm-portal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

/* :not(.tdm-portal__button) — het dashboard gebruikt échte knoppen binnen
   .tdm-portal__nav. Zonder deze uitsluiting won de pilstijl op specificiteit
   en werd de primaire knop zwart-op-groen, en bij hover groen-op-groen. */
.tdm-portal__nav a:not( .tdm-portal__button ),
.tdm-portal__filters a:not( .tdm-portal__button ) {
	display: inline-block;
	padding: 0.5rem 1.125rem;
	border: 1px solid var( --tdm-line-strong );
	border-radius: var( --tdm-radius-pill );
	color: var( --tdm-ink );
	font-size: 0.9375rem;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tdm-portal__nav a:not( .tdm-portal__button ):hover,
.tdm-portal__filters a:not( .tdm-portal__button ):hover {
	border-color: var( --tdm-accent );
	color: var( --tdm-accent );
}

/* ---------- Dossiertabel ---------- */

.tdm-portal__table {
	width: 100%;
	border-collapse: collapse;
}

.tdm-portal__table th {
	padding: 0 0.75rem 0.75rem;
	border-bottom: 2px solid var( --tdm-ink );
	color: var( --tdm-muted );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.tdm-portal__table td {
	padding: 1.125rem 0.75rem;
	border-bottom: 1px solid var( --tdm-line );
	text-align: left;
	vertical-align: top;
}

.tdm-portal__table tr:hover td {
	background: var( --tdm-surface-soft );
}

.tdm-portal__row-title {
	display: block;
	color: var( --tdm-ink );
	font-weight: 600;
	text-decoration: none;
}

.tdm-portal__row-title:hover {
	color: var( --tdm-accent );
}

.tdm-portal__row-sub {
	display: block;
	margin-top: 0.25rem;
	color: var( --tdm-muted );
	font-size: 0.875rem;
}

/* Op smalle schermen wordt een tabel van vier kolommen onleesbaar; de rijen
   worden dan kaarten met het kolomlabel ervoor. */
@media ( max-width: 40rem ) {
	.tdm-portal__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
	}

	.tdm-portal__table tr {
		display: block;
		margin-bottom: 1rem;
		padding: 1rem 1.25rem;
		border: 1px solid var( --tdm-line );
		border-radius: var( --tdm-radius );
		background: var( --tdm-surface );
	}

	.tdm-portal__table td {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: 0.375rem 0;
		border: 0;
		text-align: right;
	}

	.tdm-portal__table td::before {
		content: attr( data-label );
		color: var( --tdm-muted );
		font-size: 0.8125rem;
		text-align: left;
	}

	.tdm-portal__table td:first-child {
		display: block;
		margin-bottom: 0.5rem;
		text-align: left;
	}

	.tdm-portal__table td:first-child::before {
		content: none;
	}
}

/* ---------- Lijsten en documenten ---------- */

.tdm-portal__list,
.tdm-portal__files {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdm-portal__list-item,
.tdm-portal__file {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	border-bottom: 1px solid var( --tdm-line );
}

.tdm-portal__folder {
	margin-bottom: 2.5rem;
}

/* ---------- Mapnavigatie en documenticonen ---------- */

.tdm-portal__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	margin: 0 0 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var( --tdm-line );
	font-size: 15px;
}

.tdm-portal__crumbs a {
	color: var( --tdm-accent-dark );
}

.tdm-portal__crumbs-current {
	font-weight: 600;
}

.tdm-portal__crumbs-sep {
	color: var( --tdm-line-strong );
}

/* De hele rij is één kliklink, met het icoon ervoor. */
.tdm-portal__file-link {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	min-width: 0;
	color: var( --tdm-ink );
	text-decoration: none;
}

.tdm-portal__file-link:hover .tdm-portal__file-name {
	text-decoration: underline;
}

.tdm-portal__file-name {
	overflow-wrap: anywhere;
}

.tdm-portal__icon {
	flex: 0 0 auto;
	color: var( --tdm-line-strong );
}

/*
 * Kleur per type, zodat het onderscheid ook zonder de vorm te lezen opvalt.
 * Een map krijgt de accentkleur: dat is het enige item waar je op doorklikt in
 * plaats van downloadt, en dat verschil mag zichtbaar zijn.
 */
.tdm-portal__icon--folder {
	color: var( --tdm-accent );
}

.tdm-portal__icon--pdf {
	color: #c0392b;
}

.tdm-portal__icon--image {
	color: #2f80c4;
}

.tdm-portal__icon--sheet {
	color: #1e7a45;
}

.tdm-portal__icon--doc {
	color: #2b579a;
}

.tdm-portal__file--folder .tdm-portal__file-name {
	font-weight: 600;
}

.tdm-portal__status,
.tdm-portal__file-meta,
.tdm-portal__meta {
	color: var( --tdm-muted );
	font-size: 0.875rem;
}

/* ---------- Statuskaart ---------- */

.tdm-portal__status-card {
	margin: 0 0 2.5rem;
	padding: 1.75rem 2rem;
	border: 1px solid var( --tdm-line );
	border-radius: var( --tdm-radius );
	background: var( --tdm-surface );
	box-shadow: var( --tdm-shadow );
}

.tdm-portal__status-label {
	margin: 0 0 0.375rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.tdm-portal__status-text {
	margin: 0;
	color: var( --tdm-muted );
}

/* ---------- Voortgangsbalk ----------
   Kleur is nooit de enige aanduiding: een bereikte stap krijgt ook een dikkere
   bovenrand, een gevuld nummer en een zwaarder lettergewicht. */

.tdm-portal__stepper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.tdm-portal__step {
	flex: 1 1 8rem;
	padding-top: 0.875rem;
	border-top: 4px solid var( --tdm-line-strong );
	color: var( --tdm-muted );
	font-size: 0.8125rem;
}

.tdm-portal__step.is-reached {
	border-top-color: var( --tdm-accent );
	color: var( --tdm-ink );
	font-weight: 600;
}

.tdm-portal__step-number {
	display: inline-block;
	min-width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var( --tdm-line-strong );
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.5rem;
	text-align: center;
}

.tdm-portal__step.is-reached .tdm-portal__step-number {
	background: var( --tdm-accent );
}

/* ---------- Detailgegevens ---------- */

.tdm-portal__details {
	display: grid;
	grid-template-columns: minmax( 10rem, 16rem ) 1fr;
	gap: 0.75rem 2rem;
	margin: 0 0 2.5rem;
	padding: 0;
}

.tdm-portal__details dt {
	color: var( --tdm-muted );
	font-size: 0.875rem;
}

.tdm-portal__details dd {
	margin: 0;
}

/* ---------- Aanmelden en wachtwoord: gecentreerde kaart ----------
   Deze twee pagina's krijgen géén shell: ze worden aan een uitgelogde
   bezoeker getoond, dus er is geen navigatie en geen afmeldknop. Zonder
   eigen opmaak stond hier een kaal WordPress-formulier links bovenaan een
   lege pagina. */

.tdm-portal--login,
.tdm-portal--password {
	/*
	 * De 1300px van .tdm-portal geldt hier niet: de zachte achtergrond moet het
	 * hele scherm vullen, anders staat er op een breed scherm een grijze baan
	 * van 1300px met wit ernaast.
	 */
	max-width: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: calc( 100dvh - var( --wp-admin--admin-bar--height, 0px ) );

	/*
	 * 2rem en niet 3rem: met de royalere maat paste de kaart niet meer in een
	 * scherm van 900px hoog en kreeg de aanmeldpagina een scrollbalk. Gemeten,
	 * niet geschat.
	 */
	padding: 2rem 1.25rem;
}

/*
 * De achtergrond als vaste laag over het hele scherm, niet als background op
 * het element zelf.
 *
 * Reden: dit element staat ergens in de body, en wat er precies boven zit
 * verschilt per thema — Bricks kan een eigen wrapper met breedte en padding
 * meebrengen, en dan reikt een gewone background niet tot de randen. Met
 * position: fixed hangt de laag aan het scherm en niet aan een ouder, dus het
 * maakt niet uit waar de pagina in de DOM belandt. Hij blijft ook staan als de
 * pagina toch scrollt, bijvoorbeeld met een foutmelding erbij.
 */
.tdm-portal--login::before,
.tdm-portal--password::before {
	content: '';
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var( --tdm-surface-soft );
}

/*
 * De kaart boven die laag. Geen z-index nodig: een gepositioneerd element komt
 * boven een niet-gepositioneerd, en tussen twee gepositioneerde broers beslist
 * de documentvolgorde — ::before staat vooraan, de kaart erna.
 */
.tdm-portal--login > *,
.tdm-portal--password > * {
	position: relative;
}

.tdm-portal__card {
	width: 100%;
	max-width: 40rem;
	padding: 2.5rem;
	border: 1px solid var( --tdm-line );
	border-radius: var( --tdm-radius );
	background: var( --tdm-surface );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.06 );
}

.tdm-portal__card-head {
	margin-bottom: 1.5rem;
	text-align: center;
}

.tdm-portal__card-logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: 52px;
	margin: 0 auto 1.25rem;
	object-fit: contain;
}

.tdm-portal__card-brand {
	margin: 0 0 1.5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.tdm-portal__card h1 {
	margin: 0 0 0.5rem;
	font-size: clamp( 22px, 3vw, 28px );
}

.tdm-portal__card-intro {
	margin: 0;
	color: var( --tdm-muted );
	font-size: 15px;
}

/* De klassen hieronder komen uit wp_login_form(); we schrijven ze niet zelf
   uit, dus ze moeten hier op naam aangesproken worden. */

.tdm-portal__card .login-username,
.tdm-portal__card .login-password {
	margin: 0 0 1.25rem;
}

.tdm-portal__card .login-username label,
.tdm-portal__card .login-password label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	font-size: 15px;
}

.tdm-portal__card input[type="text"],
.tdm-portal__card input[type="email"],
.tdm-portal__card input[type="password"] {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0.875rem 1rem;
	border: 1px solid var( --tdm-line-strong );
	border-radius: var( --tdm-radius );
	background: var( --tdm-surface );
	color: var( --tdm-ink );
	font: inherit;
	font-size: 16px; /* Onder 16px zoomt Safari op iOS het veld in bij focus. */
}

.tdm-portal__card input[type="text"]:focus,
.tdm-portal__card input[type="email"]:focus,
.tdm-portal__card input[type="password"]:focus {
	border-color: var( --tdm-accent );
	outline: 2px solid rgba( 0, 170, 110, 0.25 );
	outline-offset: 1px;
}

.tdm-portal__card .login-remember {
	margin: 0 0 1.5rem;
	color: var( --tdm-muted );
	font-size: 15px;
}

.tdm-portal__card .login-remember label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.tdm-portal__card .login-submit {
	margin: 0;
}

/*
 * wp_login_form() rendert een <input type="submit">, geen <button>. De
 * bestaande knopregels in dit bestand mikken op button[type="submit"] en
 * misten dit veld dus volledig — vandaar de standaardknop van de browser.
 */
.tdm-portal__card input[type="submit"] {
	display: block;
	width: 100%;
	padding: 1rem 2.25rem;
	border: 2px solid var( --tdm-accent );
	border-radius: var( --tdm-radius-pill );
	background: var( --tdm-accent );
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: var( --tdm-shadow );
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.tdm-portal__card input[type="submit"]:hover,
.tdm-portal__card input[type="submit"]:focus-visible {
	border-color: var( --tdm-accent-dark );
	background: var( --tdm-accent-dark );
}

.tdm-portal__card-foot {
	margin: 1.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var( --tdm-line );
	text-align: center;
	font-size: 15px;
}

.tdm-portal__card-foot a {
	color: var( --tdm-accent-dark );
}

.tdm-portal__card-below {
	margin: 0;
	font-size: 15px;
}

.tdm-portal__card-below a {
	color: var( --tdm-muted );
	text-decoration: none;
}

.tdm-portal__card-below a:hover {
	color: var( --tdm-ink );
	text-decoration: underline;
}

/* Binnen de kaart is de breedte de kaart zelf. */
.tdm-portal__card .tdm-portal__form {
	max-width: none;
}

.tdm-portal__card .tdm-portal__field input,
.tdm-portal__card .tdm-portal__field select {
	max-width: none;
}

.tdm-portal__card .tdm-portal__submit {
	margin-top: 1.75rem;
}

.tdm-portal__card .tdm-portal__button {
	display: block;
	width: 100%;
	text-align: center;
}

@media ( max-width: 30rem ) {
	.tdm-portal__card {
		padding: 1.75rem 1.25rem;
	}
}

/* ---------- Formulieren ---------- */

/*
 * Het formulierblok liep tot 40rem terwijl de rest van het portaal 1300px is;
 * de aanvraagpagina zag daardoor smaller uit dan alle andere views. Het blok
 * loopt nu mee met de view. De invoervelden zelf blijven wél begrensd: een
 * tekstveld van 1300px breed is meetbaar lastiger correct in te vullen dan een
 * veld dat in één blik past.
 */
.tdm-portal__form {
	max-width: none;
}

.tdm-portal__field input,
.tdm-portal__field select,
.tdm-portal__field textarea {
	max-width: 40rem;
}

.tdm-portal__field {
	margin-bottom: 1.5rem;
}

.tdm-portal__field label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.tdm-portal__field input[type="text"],
.tdm-portal__field input[type="email"],
.tdm-portal__field input[type="tel"],
.tdm-portal__field input[type="number"],
.tdm-portal__field input[type="date"],
.tdm-portal__field input[type="password"],
.tdm-portal__field input[type="file"],
.tdm-portal__field select,
.tdm-portal__field textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var( --tdm-line-strong );
	border-radius: var( --tdm-radius );
	background: var( --tdm-surface );
	font: inherit;
	transition: border-color 0.2s ease;
}

.tdm-portal__field :where( input, select, textarea ):focus {
	border-color: var( --tdm-accent );
}

.tdm-portal__help {
	margin: 0.375rem 0 0;
	color: var( --tdm-muted );
	font-size: 0.875rem;
	font-weight: 400;
}

/* ---------- Klein scherm ---------- */

@media ( max-width: 40rem ) {
	.tdm-portal {
		padding: 2rem 1rem 3rem;
	}

	.tdm-portal__details {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.tdm-portal__details dd {
		margin-bottom: 1rem;
	}

	.tdm-portal__button,
	.tdm-portal__submit {
		width: 100%;
		text-align: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tdm-portal * {
		transition: none !important;
	}
}