/**
 * PX Doelkeuze: de keuze "Mijn donatie gaat naar" als witte tegels.
 *
 * Eén opmaak voor elk formulier met een radioveld met de klasse
 * px-crowdfunding-doel. De module zet de wikkelklasse px-doelkeuze om het
 * formulier heen: px-actie op de steunkaart, px-lp-content op de gele kaart
 * van een landingspagina.
 *
 * De markup komt uit includes/reusable-components/px-doelkeuze.php, het gedrag
 * van het informatie-icoon uit assets/js/px-doelkeuze.js.
 *
 * De wikkel plus .gform_wrapper staan bewust in bijna elke selector: base.css
 * stuurt dezelfde eigenschappen aan voor elk radioveld van Gravity Forms en
 * weegt met twee of drie klassen even zwaar.
 */

/* Pakketten: de keuzes staan onder elkaar en niet naast elkaar, want in een
   kolom van 27rem wordt drie naast elkaar te krap. Elke regel heeft nu ruimte
   voor het beeld en de hele naam.

   Een raster in plaats van een rij onder elkaar: de legenda houdt zijn eigen
   hoogte en de keuzes eronder delen die van de langste. Zo zijn alle regels even
   hoog, ook als een naam over twee regels valt. */
.px-doelkeuze .gform_wrapper :is(.px-steun__doelen, .px-crowdfunding-doel) {
	margin: 0;
	padding: 0;
	border: 0;
}

.px-doelkeuze .gform_wrapper :is(.px-steun__doelen, .px-crowdfunding-doel) > legend {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: var(--space-d025);
}

.px-doelkeuze .gform_wrapper :is(.px-steun__doelen, .px-crowdfunding-doel) .gfield_radio {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-auto-rows: 1fr;
	gap: var(--space-d05);
}

/* Gravity Forms zet elke keuze als rij naast de radioknop. Die knop staat hier
   buiten beeld en het label is zelf de knop, dus de keuze wordt weer een blok en
   vult daarmee de hele kolom. */
.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) {
	display: block;
	margin: 0;
	gap: 0;
}

.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Dezelfde knop als de bedragen eronder: wit, rand van drie pixels, dezelfde
   radius en dezelfde schaduw. Alleen de vorm verschilt, want hier moet een
   pakket en een naam naast elkaar passen. */
.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) label {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: center;
	height: 100%;
	gap: var(--space-d1);
	padding: var(--space-d05) var(--space-d1) var(--space-d05) var(--space-d075);
	background-color: var(--white);
	border: solid 3px var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	color: var(--gray-dark);
	cursor: pointer;
	transition: var(--transition-btn);
}

.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) label:hover {
	background-color: var(--sky-blue);
	border-color: var(--sky-blue);
	box-shadow: var(--shadow-pressed);
}

/* De gekozen regel houdt een donkere rand, zodat je hem ook terugvindt als de
   muis ergens anders staat. */
.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) input:checked + label {
	background-color: var(--sky-blue);
	border-color: var(--gray-dark);
	box-shadow: var(--shadow-pressed);
}

.px-doelkeuze .gform_wrapper :is(.px-steun__doel, .px-crowdfunding-doel .gchoice) input:focus-visible + label {
	outline: 2px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Het vak voor het pakket houdt overal dezelfde maat. De beelden zijn namelijk
   niet even hoog, en zonder vaste maat verschilt elke regel een paar pixels. */
.px-doelkeuze .px-steun__doel-beeld {
	display: block;
	justify-self: center;
	width: 100%;
	max-width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
}

/* Een keuze zonder pakket staat wel op dezelfde plek en in hetzelfde vak als de
   beelden, zodat de regels even hoog blijven. */
.px-doelkeuze .px-steun__doel-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
}

.px-doelkeuze .px-steun__doel-icoon svg {
	width: var(--space-d2);
	height: var(--space-d2);
}

.px-doelkeuze .px-steun__doel-icoon svg path {
	fill: var(--navy);
}

/* Informatie-icoon met toelichting: de knop staat rechts op de keuze, maar
   buiten het label, zodat een tik op het icoon nooit de radio kiest. De
   wikkel van de keuze is het anker voor de knop en het paneel. */
.px-doelkeuze .gform_wrapper .px-steun__doel--met-info {
	position: relative;
}

/* De naam blijft vrij van het icoon. De selector telt de wikkelklassen mee,
   anders wint de algemene labelregel hierboven met zijn padding. */
.px-doelkeuze .gform_wrapper .px-crowdfunding-doel .gchoice.px-steun__doel--met-info label {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

.px-doelkeuze .px-steun__doel-info {
	position: absolute;
	top: 50%;
	right: var(--space-d05);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-d15);
	height: var(--space-d15);
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-smooth);
}

.px-doelkeuze .px-steun__doel-info svg {
	width: 100%;
	height: 100%;
}

.px-doelkeuze .px-steun__doel-info:hover,
.px-doelkeuze .px-steun__doel-info[aria-expanded="true"] {
	color: var(--gray-dark);
}

.px-doelkeuze .px-steun__doel-info:focus-visible {
	outline: 2px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Het paneel met de toelichting: rechte hoeken, boven de keuze, over de volle
   breedte van de keuze zodat het nergens uit de kaart loopt. Het paneel ligt
   over de regels erboven heen; de wikkels van de keuzes maken geen eigen
   stapelcontext, dus deze z-index wint daar. */
.px-doelkeuze .px-steun__doel-tooltip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + var(--space-d025));
	z-index: 30;
	display: block;
	padding: var(--space-d075) var(--space-d1);
	background-color: var(--white);
	border: 1px solid var(--gray-dark);
	box-shadow: var(--shadow-elevated);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-align: left;
	cursor: auto;
}

/* Een display uit een klasse wint normaal van het hidden attribuut. Dat is hier
   niet de bedoeling: een dicht paneel blijft dicht. Op de actiepagina deed
   .px-actie [hidden] dat werk; de doelkeuze regelt het nu zelf, zodat het ook
   op een landingspagina klopt. */
.px-doelkeuze .px-steun__doel-tooltip[hidden] {
	display: none;
}

.px-doelkeuze .px-steun__doel-tooltip-kop {
	display: block;
	margin-bottom: var(--space-d025);
	font-weight: var(--weight-semibold);
	color: var(--navy);
}

.px-doelkeuze .px-steun__doel-tooltip-tekst {
	display: block;
}