:root {
	--common-width: 700px;
}

:root {
	--card-radius: calc(var(--spacing-double) * 2);
	--card-shadow: var(--color-primary) 0.1em 0.1em var(--spacing-double);
}

header h1 {
	/* Matches the About page and Name Generator titles */
	font-size: 2rem;
	color: var(--hq-card-text-dark);
	padding-block: var(--spacing);
}

.content {
	min-height: var(--content-height);
	width: clamp(100px, 100%, var(--common-width));
	box-sizing: border-box;
	padding-inline: var(--spacing-double);
	/* Room between the last card and the footer */
	padding-bottom: calc(var(--spacing-double) * 2);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-double);
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-double);

	&.hidden {
		display: none;
	}

	.hero-results {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-double);

		.hero-results--next-results {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-double);
		}

		.hero-results__again {
			align-items: center;
			text-align: center;

			/* Same size as the quiz's Previous and Next buttons */
			.button {
				width: auto;
				padding-inline: calc(var(--spacing-double) * 2);
				font-size: 1.25rem;
			}
		}
	}
}

.page, .question {
	/* Section card, the same as the About page's .card */
	max-width: var(--common-width);
	padding: var(--spacing-double);
	background-color: var(--color-background-offset);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	gap: var(--spacing-double);

	> h2 {
		text-align: center;
	}

	p {
		margin: 0;
	}

	
	fieldset{
		padding: var(--spacing);
		border-radius: var(--spacing-double);	
	}

	/* Image and text sit side by side and wrap onto separate lines when space runs out */
	&.page--intro {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--spacing-double);

		.page__image {
			flex: 1 1 240px;
			min-width: 0;
			height: auto;
			border-radius: var(--spacing);
			object-fit: cover;
			object-position: center;
		}

		.page__text {
			flex: 1 1 280px;
			display: flex;
			flex-direction: column;
			gap: var(--spacing);

			p {
				margin: 0;
			}
		}

		.button--container {
			display: flex;
			flex-direction: column;
			gap: var(--spacing);
			margin-top: auto;

			button {
				font-size: 1.25rem;
			}
		}
	}

	& progress {
		width: 100%;
		height: 1rem;
		border-radius: var(--spacing);
		background-color: var(--color-primary);

		&::-webkit-progress-value {
			background-color: var(--color-primary);
			border-radius: 5px;
		}
	}

	.question__title {
		text-align: center;
	}

	.question__text {

		img {
			float: right;
			margin-left: var(--spacing);
			width: 33%;
			object-fit: cover;
			border-radius: var(--spacing);
		}
	}

	.question__options {
		display: flex;
		flex-direction: column;
		gap: var(--spacing);
		margin: 0;
		padding: 0;
		border-radius: 0.5rem;
		list-style-type: none;

		.option {
			position: relative;
			display: flex;
			flex-direction: column;
			padding: var(--spacing-double);

			background-color: var(--color-foreground);
			color: var(--color-primary);
			border: var(--size-border) solid var(--color-primary);
			border-radius: var(--spacing-double);

			&:has(:checked) {
				background-color: var(--color-primary);
				color: var(--color-foreground);
				border-radius: var(--spacing);
			}

			/* Visually hidden but still focusable, so the quiz works with a keyboard */
			.option__input {
				position: absolute;
				opacity: 0;
				width: 1px;
				height: 1px;
				margin: 0;
				pointer-events: none;
			}

			&:has(:focus-visible) {
				outline: 3px solid var(--color-info);
				outline-offset: 2px;
			}

			&:hover {
				background-color: var(--color-primary);
				color: var(--color-foreground);
				border-radius: var(--spacing);
				cursor: pointer;
			}
		}
	}

	.action__container {
		display: flex;
		justify-content: space-between;

		.button.button--action {
			margin: 0;
			font-size: 1.25rem;

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}

/*
 * Hero tiles, styled like the About page's Community Support tiles. Portrait and
 * name share a header row and the description wraps onto its own line below.
 */
.tile {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	/* Keep content at the top when a tile is stretched to match its row */
	align-content: flex-start;
	column-gap: var(--spacing-double);
	row-gap: var(--spacing);
	padding: var(--spacing-double);
	background-color: var(--color-foreground);
	border: 4px solid var(--color-primary);
	border-radius: var(--spacing-double);

	/* Drops below the portrait when the name doesn't fit beside it */
	h3 {
		order: 2;
		flex: 1 1 auto;
		text-align: start;
		font-size: 1.5rem;
		color: var(--color-primary);
	}

	/* Lets the image and description inside the paragraph become flex items */
	p {
		display: contents;
	}

	img {
		order: 1;
		flex: none;
		width: 64px;
		height: 64px;
		object-fit: cover;
		object-position: top;
		border-radius: var(--spacing);
	}

	p > span {
		order: 3;
		flex: 1 1 100%;
		text-align: start;
		line-height: 1.4;
	}

	&.page--results-primary {
		h3 {
			font-size: clamp(2rem, 8vw, 2.5rem);
		}

		img {
			width: 120px;
			height: 120px;
		}

		p > span {
			font-size: 1.15rem;
		}
	}
}

.card--0 {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

.results__container {
	max-width: var(--common-width);
}

.heroImageContainer {
	display: flex;
	flex-direction: row;
	max-width: var(--common-width);
	flex-wrap: wrap;
	gap: var(--spacing-double);

	/* Wide enough that every hero's name fits beside its portrait */
	&>* {
		flex: 1 1 280px;
	}
}