/**
 * The choice cards and the content sections they switch between.
 *
 * Everything that hides content sits under .dvv-signup-js, which a script in
 * <head> sets: without JavaScript every section shows, each with its label,
 * and the cards — which would do nothing — stay hidden.
 */

/* Cards */
.dvv-signup-choice {
	display: none;
}

.dvv-signup-js .dvv-signup-choice {
	display: block;
}

.dvv-signup-choice .dvv-signup-choice__heading {
	margin-bottom: var(--spacing-15);
}

.dvv-signup-choice__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-15);
	margin-bottom: var(--spacing-30);
}

.dvv-signup-choice__card {
	display: grid;
	grid-template-columns: 1fr auto;
	/* Title, then the description filling the rest, so the card's rows span
	   its full height and the icon and tick centre on the card itself. */
	grid-template-rows: auto 1fr;
	gap: var(--spacing-5) var(--spacing-15);
	width: 100%;
	padding: var(--spacing-15) var(--spacing-20);
	text-align: left;
	font: inherit;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 2px solid var(--color-blue-light);
	border-radius: var(--border-radius-l);
	cursor: pointer;
	transition: var(--transition-fast);
}

.dvv-signup-choice__card:hover {
	border-color: var(--color-brand);
}

.dvv-signup-choice__card:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 2px;
}

.dvv-signup-choice__card[aria-checked="true"] {
	border-color: var(--color-brand);
	background-color: var(--color-gray-light);
}

/* With an icon the card gets a column for it on the left. */
.dvv-signup-choice__card.has-icon {
	grid-template-columns: auto 1fr auto;
}

.dvv-signup-choice__icon {
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-gray-light);
	color: var(--color-brand);
}

.dvv-signup-choice__card[aria-checked="true"] .dvv-signup-choice__icon {
	background-color: var(--color-white);
}

.dvv-signup-choice__icon svg {
	width: 24px;
	height: 24px;
}

.dvv-signup-choice__card.has-icon .dvv-signup-choice__description {
	grid-column: 2;
}

.dvv-signup-choice__card.has-icon .dvv-signup-choice__tick {
	grid-column: 3;
}

.dvv-signup-choice__title {
	font-size: var(--size-m);
	font-weight: var(--weight-bold);
	color: var(--color-blue-dark-2);
}

.dvv-signup-choice__description {
	grid-column: 1;
	font-size: var(--size-xs);
	line-height: 1.4;
	color: var(--color-gray);
}

.dvv-signup-choice__tick {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-blue-light);
	border-radius: 50%;
	font-size: 11px;
	color: transparent;
	transition: var(--transition-fast);
}

.dvv-signup-choice__card[aria-checked="true"] .dvv-signup-choice__tick {
	border-color: var(--color-brand);
	background-color: var(--color-brand);
	color: var(--color-white);
}

/* Sections */
.dvv-signup-section__label {
	font-size: var(--size-caps-s);
	font-weight: var(--weight-bold);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.dvv-signup-js .dvv-signup-section,
.dvv-signup-js .dvv-signup-section__label {
	display: none;
}

.dvv-signup-js .dvv-signup-section.is-active {
	display: block;
}

/* The sidebar's menu and direct buttons are toggled with [hidden], which the
   theme's display on .wp-block-button would otherwise override. */
.sidebar-event .sidebar-event__buttons [hidden] {
	display: none !important;
}

.sidebar-event .sidebar-event__signup-direct {
	flex: 1 1 100%;
}

/* On paper every section prints, labelled, and the cards do not. */
@media print {
	.dvv-signup-js .dvv-signup-choice {
		display: none;
	}

	.dvv-signup-js .dvv-signup-section,
	.dvv-signup-js .dvv-signup-section__label {
		display: block;
	}
}