@import url('https://fonts.googleapis.com/css2?family=Barriecito&family=Onest:wght@100..900&family=Outfit:wght@100..900&display=swap');
:root {
	--cream:  #FAF1E1;
  	--black:  #1A1A1A;
  	/* --white:  #FFFFFF; */
  	--grey:   #E5D9C4;
	--blue:   #003681;
	--light-blue: #1A55A6;
	--dark-blue: #002251;

	/* spacing */
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-ex-lg: 3rem;

	/* fonts */
	--logo-font: 'Barriecito', sans-serif;
	--heading-font: 'Outfit', sans-serif;
	--body-font: 'Onest', sans-serif;

	/* font sizes */
	--text-sm:   0.875rem;
	--text-body: 1rem;
	--text-h1:   5rem;
	--text-h2:   3rem;
	--text-h3:   2rem;
	--text-h4:   1.5rem;

	--border: 0.0625rem;
	--border-thicker: 0.125rem;
}

/* --------------- type ---------------*/
p {
	line-height: 1.4rem;
	font-family: var(--body-font);
	font-size: var(--text-body);
	padding-block: 0.5rem;
	font-weight: 400;
}

h1 {
	font-family: var(--logo-font);
	color: var(--blue);
}
h2, h3, h4 {
	font-family: var(--heading-font);
	color: var(--blue);
	font-weight: 500;
}

h1 {
	text-transform: uppercase;
	font-size: var(--text-h1);
	cursor: pointer;
}

h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

/* --------------- layout ---------------*/
body {
	display: flex;
	flex-direction: column;
	max-inline-size: 50rem;
	padding: var(--space-md);
	background-color: var(--blue);
	block-size: 100svh;
	max-block-size: 100svh;
	margin-inline: auto;

	&:has(#form-section.active) {
		background-color: var(--cream);
	}
	

	@media (width>800px) {
		padding: var(--space-ex-lg);
	}
}

main {
	display: grid;
	gap: var(--space-md);
	flex: 1;

	@media (width<800px) {
		gap: var(--space-lg);
	}
}

/* --------------- buttons ---------------*/
.primary-button,
.secondary-button {
	display: inline-block;
	inline-size: fit-content;
	font-family: var(--body-font);
	font-size: var(--text-body);
	font-weight: 400;
	padding: var(--space-md) var(--space-lg);
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 0.2s ease-in, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;

	&:hover {
		transform: rotate(-2deg);
	}

	&:active {
		transform: translateY(5%), rotate(-2deg);
		transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
	}

	&.pressed {
		transform: rotate(-2deg);
	}

	&:disabled {
		background-color: var(--grey);
		border-color: var(--grey);
		color: var(--cream);
		cursor: not-allowed;
		opacity: 0.6;
	}

	&[hidden] {
		display: none;
	}
}


.primary-button {
	border: var(--border) solid var(--cream);
	background-color: var(--cream);
	color: var(--blue);
	
	&:hover {
		color: var(--blue);
		background-color: color-mix(in srgb, var(--cream) 90%, transparent);
	}

	&:active {
		color: var(--dark-blue);
		background-color: color-mix(in srgb, var(--cream) 80%, transparent)
	}

	&.pressed {
		border-color: var(--dark-blue);
		color: var(--dark-blue);
	}
}

.secondary-button {
	border: var(--border) solid var(--cream);
	background-color: var(--blue);
	color: var(--cream);

	&:hover {
		border-color: var(--cream);
		color: var(--cream);
		background-color: color-mix(in srgb, var(--cream) 10%, transparent);
	}

	&:active {
		border-color: var(--cream);
		color: var(--cream);
		background-color: color-mix(in srgb, var(--cream) 20%, transparent);
	}

	&.pressed {
		border-color: var(--dark-blue);
		color: var(--dark-blue);
	}
}

.text-button {
	font-family: var(--heading-font);
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--blue);
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease, color 0.15s ease;

	&:hover {
		transform: rotate(-2deg);
		color: var(--black);
	}

	&:active {
		transform: translateY(5%), rotate(-2deg);
		transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
	}

	&.pressed {
		transform: rotate(-2deg);
	}

	&[hidden] {
		display: none;
	}
}

/* submit */
#submit:not([hidden]) {
	align-self: center;
}

#submit:not(:disabled):not([hidden]) {
	background-color: var(--blue);
	color: var(--cream);
}

/* --------------- home (blue bg) ---------------*/
#home {
	display: none;

	&.active {
		background-color: var(--blue);
		max-block-size: 100svh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-md);
	}

	h1, h2, p{
		color: var(--cream);
	}

	#intro {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		align-items: center;
		text-align: center;

		#intro-text {
			display: flex;
			flex-direction: column;
			gap: var(--space-sm);

			hgroup {
				display: flex;
				flex-direction: column;
				gap: 0;
			}
		}

		#intro-buttons {
			display: flex;
			gap: var(--space-md);
		}
	}
}

/* --------------- progress bar ---------------*/
#progress-bar {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0.2rem;

	&.active {
		display: flex;
	}

	li {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.segment {
		inline-size: 100%;
		block-size: 0.375rem;
		border-radius: 3px;
		background-color: var(--grey);
		transition: background-color 0.3s ease;

		&.active {
			background-color: var(--dark-blue);
		}

		&.done {
			background-color: var(--blue);
			cursor: pointer;
		}
	}

	.label {
		font-size: var(--text-sm);
		color: var(--grey);
		text-align: center;
		padding-block: 0;
		transition: color 0.3s ease;
	}

	.segment.active ~ .label,
	.segment.done ~ .label {
		color: var(--black);
		cursor: pointer;
	}
}

/* --------------- form layout ---------------*/
main:has(#form-section.active),
main:has(#results.active),
main:has(#results-randomized.active) {
	grid-template-rows: 1fr;
	gap: var(--space-md);
	padding: 0;

	@media (width>800px) {
		gap: var(--space-lg);
	}
}

#form-section {
	display: none;

	&.active {
		display: flex;
		flex-direction: column;
		flex: 1;
		gap: var(--space-lg);
		background-color: var(--cream);

		h1 {
			font-size: var(--text-h2);
			text-align: center
		}

		@media (width > 800px) {
			gap: var(--space-ex-lg);
		}
	}

	form {
		background-color: var(--cream);
		display: flex;
		flex-direction: column;
		flex: 1;
		font-family: var(--body-font);

		&#nightcap-form {
			padding: 0;
			gap: var(--space-md);
		}
	}
}

/* --------------- form questions ---------------*/
.question {
	display: none;

	&.active {
		display: flex;
		flex-direction: column;
		flex: 1;
		gap: var(--space-lg);
	}
}

/* --------------- fieldset ---------------*/
fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--space-sm);

	legend {
		inline-size: 100%;
		margin-bottom: var(--space-lg);
		font-weight: 600;
	}

	input[type="radio"],
	input[type="checkbox"] {
		display: none;
	}

	input[type="radio"]:checked + label,
	input[type="checkbox"]:checked + label {
		background-color: var(--blue);
		border-color: var(--blue);
		color: var(--cream);
	}

	.input-layout {
		display: flex;
		flex-direction: row;
		gap: var(--space-sm);
		justify-content: center;
		margin-block-start: var(--space-md);
	}

	&.active:has(#activity-cozy) {
		.input-layout {
			flex-wrap: wrap;
		}
	}

	label {
		display: flex;
		/* flex: 1; */
		flex-direction: column;
		align-items: start;
		inline-size: fit-content;
		justify-content: center;
		padding: var(--space-md) var(--space-lg);
		border: var(--border) solid var(--blue);
		border-radius: 9999px;
		cursor: pointer;
		font-family: var(--body-font);
		font-size: var(--text-body);
		font-weight: 400;
		text-align: center;
		transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;

		&:hover {
			background-color: var(--blue);
			color: var(--cream);
		}

		&:active {
			transform: translateY(5%);
			transition: transform 0.15s ease;
		}
	}
}

/* --------------- form bottom --------------- */
.form-bottom {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;

	.thinking-dog[hidden] {
		display: none;
	}

	.thinking-dog {
		inline-size: 50%;
		block-size: auto;
		display: block;

		@media (width > 500px) {
			max-inline-size: 40%;
			inline-size: 30%;
		}
	}
}

/* --------------- energy slider --------------- */
.slider-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-ex-lg);
	inline-size: 100%;

	.slider-labels-top {
		display: flex;
		justify-content: space-between;
		font-family: var(--body-font);
		font-size: var(--text-sm);
	}

	.slider-track-wrapper {
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: calc(2 * var(--space-sm));
			inline-size: calc(100% - 2 * var(--space-md));
			block-size: var(--border-thicker);
			background: var(--blue);
			transform: translateY(-50%);
			z-index: 0;
		}

		.slider-ticks {
			position: absolute;
			inset-inline-start: calc(2 * var(--space-sm));
			inline-size: calc(100% - 2 * var(--space-md));
			display: flex;
			justify-content: space-between;
			align-items: center;
			pointer-events: none;
			z-index: 2;

			& span {
				display: block;
				inline-size: 1rem;
				block-size: 1rem;
				border-radius: 50%;
				border: var(--border) solid var(--blue);
				background: var(--cream);
				flex-shrink: 0;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					inset: 3px;
					border-radius: 50%;
					background: var(--blue);
				}
			}
		}
	}

	.slider-labels-bottom {
		display: flex;
		justify-content: space-between;
		font-family: var(--body-font);
		font-size: var(--text-sm);
		color: var(--blue);
		padding-inline: calc(2.5*var(--space-sm));
	}
}

/* https://claude.ai/share/22bdfb3e-9c7b-4860-99d2-f81f2c9b1aed */
input[type="range"]#energy {
	-webkit-appearance: none;
	appearance: none;
	inline-size: 100%;
	block-size: var(--border-thicker);
	background: transparent;
	outline: none;
	cursor: pointer;
	position: relative;
	z-index: 3;


	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		inline-size: 3rem;
		block-size: 3rem;
		background-image: url('assets/icons/PawPrintCircle.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: transparent;
		border: none;
		box-shadow: none;
		cursor: pointer;
		position: relative;
		z-index: 3;
	}

	&::-moz-range-thumb {
		inline-size: 3rem;
		block-size: 3rem;
		background-image: url('assets/icons/PawPrintCircle.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: transparent;
		border: none;
		box-shadow: none;
		cursor: pointer;
		position: relative;
		z-index: 3;
	}

	&:hover::-webkit-slider-thumb {
		transform: rotate(10deg);
	}

	&:hover::-moz-range-thumb {
		transform: rotate(10deg);
	}

	&:active::-webkit-slider-thumb {
		transform: rotate(10deg) scale(0.8);
	}

	&:active::-moz-range-thumb {
		transform: rotate(10deg) scale(0.8);
	}
}

/* --------------- results layout --------------- */
#results {
	display: none;

	&.active {
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: var(--blue);
		gap: var(--space-md);

		@media (width > 800px) {
			gap: var(--space-lg);
		}

		h1 {
			font-size: var(--text-h2);
			text-align: center;
		}

		h1, h2, h3, p {
			color: var(--cream);
		}

		h4 {
			color: var(--blue)
		}
	}	
}

/* --------------- results randomized layout --------------- */
#results-randomized {
	display: none;

	&.active {
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: var(--blue);
		gap: var(--space-md);

		@media (width > 800px) {
			gap: var(--space-lg);
		}

		h1 {
			font-size: var(--text-h2);
			text-align: center;
		}

		h1, h2, h3, p {
			color: var(--cream);
		}

		h4 {
			color: var(--blue)
		}
	}
}

#result-recs-random[data-dir="right"]      .results-card { animation: slideFromRight 0.35s ease-out; }
#result-recs-random[data-dir="left"]       .results-card { animation: slideFromLeft  0.35s ease-out; }
#result-recs-random[data-dir="exit-left"]  .results-card { animation: slideToLeft    0.2s ease-in forwards; }
#result-recs-random[data-dir="exit-right"] .results-card { animation: slideToRight   0.2s ease-in forwards; }

#result-recs-random {
	overflow: hidden;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --------------- result cards --------------- */
@keyframes slideFromRight {
	from { transform: translateX(60%); opacity: 0; scale: 0.95; }
	to   { transform: translateX(0);   opacity: 1; scale: 1; }
}

@keyframes slideFromLeft {
	from { transform: translateX(-60%); opacity: 0; scale: 0.95; }
	to   { transform: translateX(0);    opacity: 1; scale: 1; }
}

@keyframes slideToLeft {
	from { transform: translateX(0);    opacity: 1; scale: 1; }
	to   { transform: translateX(-60%); opacity: 0; scale: 0.95; }
}

@keyframes slideToRight {
	from { transform: translateX(0);   opacity: 1; scale: 1; }
	to   { transform: translateX(60%); opacity: 0; scale: 0.95; }
}

#result-recs[data-dir="right"]      .results-card { animation: slideFromRight 0.35s ease-in; }
#result-recs[data-dir="left"]       .results-card { animation: slideFromLeft  0.35s ease-in; }
#result-recs[data-dir="exit-left"]  .results-card { animation: slideToLeft    0.2s ease-out forwards; }
#result-recs[data-dir="exit-right"] .results-card { animation: slideToRight   0.2s ease-out forwards; }

#result-recs,
#result-recs-random {
	overflow: hidden;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: auto;
}

.results-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	background-color: var(--cream);
	border-radius: var(--space-sm);
	border: var(--border) solid var(--blue);
	padding: var(--space-md);
	overflow: hidden;
	color: var(--blue);
	flex: 1 1 auto;
	text-align: center;

	h1, h2, h3, h4, p {
		color: var(--blue);
	}

	img {
		inline-size: 100%;
		max-block-size: 20rem;
		flex: 1;
		object-fit: cover;
		border-radius: calc(var(--space-sm) / 2);
	}
}

/* --------------- empty state --------------- */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg);
	background-color: var(--cream);
	border-radius: var(--space-sm);
	inline-size: fit-content;

	img {
		inline-size: 3.5rem;
		block-size: 3.5rem;
	}
}

#results .empty-state p,
#results-randomized .empty-state p {
	color: var(--blue);
	text-align: center;
}

/* --------------- results nav --------------- */
#results-nav {
	display: flex;
	flex-direction: column;
	/* gap: var(--space-md); */
	gap: var(--space-lg);

	@media (width > 800px) {
		gap: var(--space-lg);
	}
}

#result-dots {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-sm);

	.result-dot[hidden] {
		display: none;
	}

	.result-dot {
		inline-size: 0.625rem;
		block-size: 0.625rem;
		border-radius: 50%;
		background-color: var(--light-blue);
		transition: background-color 0.2s ease;

		&.active {
			background-color: var(--cream);
		}
	}
}

#result-counter {
	font-family: var(--heading-font);
	font-size: var(--text-body);
	color: var(--cream);
	text-align: center;
	padding-block: 0;

	&[hidden] {
		display: none;
	}

	@media (width > 800px) {
		font-size: var(--text-h3);
	}
}

#result-arrows {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-md);

	#prev-recs,
	#next-recs {
		display: flex;

		&[hidden] { display: none; }
		align-items: center;
		justify-content: center;
		padding: 0;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: 50%;

		img {
			display: block;
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}
	}
}

.results-controls {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
}