@layer reset, universal, components, utility;

:root {
	--fs-min: 0.875rem;
	--fs-max: 1.2rem;

	--ff-primary:
		Roboto,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		Helvetica,
		"Helvetica Neue",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji";

	--ff-heading:
		Passion One,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		Helvetica,
		"Helvetica Neue",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji";

	--border-radius: 5px;

	--clr-black-100: hsl(0, 0%, 80%);
	--clr-black-200: hsl(0, 0%, 60%);
	--clr-black-400: hsl(0, 0%, 5%);

	--clr-white-400: hsl(0, 0%, 100%);

	--clr-background-400: hsl(0, 0%, 100%);

	--clr-link-400: LinkText;
	--clr-visited-400: VisitedText;
	--clr-active-400: ActiveText;

	
		--clr-accent-100: hsl(152, 100%, 97%);
		--clr-accent-400: hsl(152, 100%, 22%);
		--clr-accent-800: hsl(152, 38%, 13%);
	

	--clr-hint-400: hsl(0, 0%, 30%);

	--clr-focus-400: hsl(59, 100%, 95%);

	--clr-disabled-400: hsl(0, 0%, 93%);

	--clr-invalid-100: hsl(0, 100%, 95%);
	--clr-invalid-400: hsl(0, 100%, 50%);

	--clr-info-100: hsl(207, 100%, 95%);
	--clr-info-400: hsl(207, 100%, 50%);

	--clr-warning-100: hsl(45, 100%, 95%);
	--clr-warning-400: hsl(40, 100%, 50%);

	--clr-danger-100: hsl(0, 45%, 95%);
	--clr-danger-400: hsl(0, 45%, 54%);

	--clr-error-100: hsl(0, 100%, 95%);
	--clr-error-400: hsl(0, 100%, 50%);

	--clr-highlight-100: hsl(43, 100%, 90%);
	--clr-highlight-400: hsl(43, 100%, 85%);

	--clr-btn-loading-spinner: var(--clr-accent-100);

	--icon-external-link: url(
		'data:image/svg+xml,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> \
			<g style="stroke: rgb(35, 82, 124); stroke-width: 1"> \
				<line x1="5" y1="5" x2="5" y2="14" /> \
				<line x1="14" y1="9" x2="14" y2="14" /> \
				<line x1="5" y1="14" x2="14" y2="14" /> \
				<line x1="5" y1="5" x2="9" y2="5" /> \
				<line x1="10" y1="2" x2="17" y2="2"  /> \
				<line x1="17" y1="2" x2="17" y2="9" /> \
				<line x1="10" y1="9" x2="17" y2="2" style="stroke-width: 1.5" /> \
			</g> \
		</svg>'
	);
}

@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html:focus-within {
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
		line-height: 1.3;
		text-rendering: optimizeSpeed;
	}

	img, picture {
		display: block;
		max-inline-size: 100%;
	}

	button, input, select, textarea {
		font: inherit;
	}
}

@layer universal {
	html {
		font-family: var(--ff-primary);
		font-size: var(--fs-min);
	}

	body {
		background: var(--clr-background-400);
		color: var(--clr-black-400);
		padding-inline: 1rem;
	}

	dialog {
		width: 800px;
		max-width: calc(100vw - 2rem);
	}

	dialog::backdrop {
		background: var(--clr-black-400);
		opacity: 0;
	}

	dialog:open::backdrop {
		opacity: 0.75;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--clr-accent-400);
		font-family: var(--ff-heading);
		font-weight: 400;
		margin-block: 1rem;
	}

	h1 {
		font-size: 4rem;
	}

	h2 {
		font-size: 3rem;
	}

	h3 {
		font-size: 2rem;
	}

	a {
		color: var(--clr-link-400);
	}

	a:visited {
		color: var(--clr-visited-400);
	}

	a:active {
		color: var(--clr-active-400);
	}

	hr {
		inline-size: 100%;
		border: none;
		border-block-start: 1px solid var(--clr-black-200);
	}

	details {
		margin-block: 0.5rem;
	}

	summary {
		cursor: pointer;
	}

	table {
		border-spacing: 0;
	}

	thead, th {
		position: sticky;
		top: 0;
		background: var(--clr-background-400);
		text-align: left;
		vertical-align: bottom;
		z-index: 1;
	}

	td {
		vertical-align: top;
	}

	th, td {
		padding: 0.5rem 1rem;
	}

	button, input:not([type="checkbox"]), select {
		min-height: 1.5rem;
	}

	textarea {
		resize: vertical;
		max-height: 500px;
	}

	iframe {
		max-width: 100%;
	}

	input, textarea, select {
		background: var(--clr-white-400);
		border: 1px solid var(--clr-black-200);
		transition: background 300ms;
		max-width: 100%;
	}

	button, input, textarea, select {
		padding-block: 0.4rem;
		padding-inline: 0.6rem;
		border-radius: var(--border-radius);
	}

	button {
		border: none;
	}

	:is(button, input, textarea, select):focus {
		outline: 2px solid var(--clr-link-400);
	}

	:is(input, textarea, select).invalid:placeholder-shown,
	:is(input, textarea, select).invalid:not(:placeholder-shown),
	:is(input:not([type="time"], [type="date"], [type="file"]), textarea):invalid:not(:placeholder-shown),
	[data-invalid] :is(input, textarea, select):invalid {
		background: var(--clr-invalid-100);
		border-color: var(--clr-invalid-400);
	}

	:is(input, textarea, select).invalid:focus,
	:is(input, textarea, select):invalid:focus,
	:is(input:not([type="time"], [type="date"], [type="file"]), textarea):invalid:focus {
		background: var(--clr-focus-400);
	}

	:is(input, textarea):placeholder-shown {
		background: var(--clr-white-400);
	}

	[disabled] :is(input, textarea, select),
	input[disabled], textarea[disabled], select[disabled] {
		background: var(--clr-disabled-400);
	}

	label.required::after {
		content: "*";
		color: var(--clr-invalid-400);
		margin-inline-start: 0.2em;
	}

	.form,
	form,
	fieldset {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	:is(.form, form, fieldset) + :is(.form, form, fieldset) {
		margin-top: 0.8rem;
	}

	fieldset {
		padding: 0;
		border: none;
	}

	.form > p,
	form > p,
	fieldset > p {
		margin-block: 0.4rem;
	}

	legend {
		font-size: 1.3rem;
		font-weight: bold;
		padding: 0;
		padding-block-end: 0.5rem;
	}

	:is(form, .form) input:not([type="checkbox"]),
	:is(form, .form) textarea,
	:is(form, .form) button {
		display: block;
	}

	label small {
		color: var(--clr-hint-400);
	}

	label small::before {
		content: "(";
	}

	label small::after {
		content: ")";
	}

	a[href^="//"]::after,
	a[href^="http://"]::after,
	a[href^="https://"]::after {
		content: "";
		background-image: var(--icon-external-link);
		background-repeat: no-repeat;
		padding-right: 1rem;
	}
}

@layer components {
	.bag {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
	}

	.bag.reverse {
		flex-direction: row-reverse;
	}

	.stack {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.stack.reverse {
		flex-direction: column-reverse;
	}

	.warning-box {
		padding-inline: 1rem;
		background: var(--clr-warning-100);
		border: 1px solid var(--clr-warning-400);
		border-radius: var(--border-radius);
	}

	.flash-banner,
	.error-banner,
	.warning-banner {
		margin-block: 1rem;
		padding: 0 1rem;
		border-radius: var(--border-radius);
	}

	.flash-banner {
		background: var(--clr-info-100);
		border: 1px solid var(--clr-info-400);
		text-align: center;
	}

	.flash-banner--warning {
		background: var(--clr-warning-100);
		border-color: var(--clr-warning-400);
	}

	.flash-banner--important {
		background: var(--clr-danger-100);
		border-color: var(--clr-danger-400);
	}

	.warning-banner {
		background: var(--clr-warning-100);
		border: 1px solid var(--clr-warning-400);
	}

	.error-text {
		color: var(--clr-error-400);
	}

	.error {
		color: var(--clr-error-400);
		margin-block: 0;
	}

	.error:empty {
		display: none;
	}

	.error-banner::first-letter,
	.error-banner *::first-letter,
	.error-text::first-letter,
	.error-text *::first-letter,
	.error::first-letter,
	.error *::first-letter {
		text-transform: capitalize;
	}

	.error-banner {
		background: var(--clr-error-100);
		border: 1px solid var(--clr-error-400);
		color: var(--clr-black-400);
		text-align: center;
	}

	button, .btn {
		display: inline-flex;
		padding-block: 0.6rem;
		padding-inline: 1rem;
		background: var(--clr-accent-400);
		color: var(--clr-white-400);
		text-decoration: none;
		cursor: default;
		border-radius: var(--border-radius);
		gap: 0.5rem;
		align-items: center;
		justify-content: center;
	}

	:is(button, .btn):not([disabled], [aria-disabled], [data-disable="loading"]):hover,
	:is(button, .btn):not([disabled], [aria-disabled], [data-disable="loading"]):focus {
		filter: brightness(1.2);
	}

	:is(button, .btn):is([disabled], [aria-disabled], [data-disable="loading"]) {
		cursor: not-allowed;
		filter: saturate(0.5);
		opacity: 0.6;
	}

	:is(button, .btn):is([disabled], [aria-disabled], [data-disable="loading"]):active {
		pointer-events: none;
	}

	.btn--alt {
		background: var(--clr-white-400);
		color: var(--clr-accent-400);
		outline: 1px solid var(--clr-accent-400);
	}

	.btn--danger {
		background: var(--clr-danger-400);
	}

	.btn--large {
		padding-block: 0.7rem;
		padding-inline: 3rem;
	}

	.btn--tel {
		width: 100%;
		justify-content: space-between;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"/></svg>');
		background-size: 15px;
		background-repeat: no-repeat;
		background-position: center right 10px;
		padding-inline-end: 35px;
	}

	.btn--cta {
		width: 100%;
		justify-content: space-between;
	}

	.btn--cta::after {
		content: ">";
		font-family: consolas;
		font-weight: bold;
		background-image: none;
		padding-right: 0;
	}

	.btn--no-external::after {
		background-image: none;
		padding-right: 0;
	}

	.btn--link {
		display: inline;
		padding: 0;
		background: transparent;
		color: var(--clr-link-400);
		cursor: pointer;
		text-decoration: underline;
	}

	.btn--link.btn--danger {
		color: var(--clr-danger-400);
	}

	.btn--loading.btn--alt {
		--clr-btn-loading-spinner: var(--clr-accent-800);
	}

	.btn--loading::before {
		content: "";
		display: block;
		width: 0.9rem;
		height: 0.9rem;
		border-radius: 50%;
		border: 2px solid transparent;
		transition: border-color 300ms;
		animation: btn-loading-spinner 1.2s ease-in-out infinite;
	}

	.btn--loading::before {
		border-color:
			var(--clr-btn-loading-spinner)
			transparent
			var(--clr-btn-loading-spinner)
			transparent;
	}

	@keyframes btn-loading-spinner {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.sign-in-alt {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.sign-in-alt__title {
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 1rem;
		font-weight: bold;
		text-transform: uppercase;
		color: var(--clr-black-100);
		margin-block-end: 0.5rem;
	}

	.sign-in-alt__title::before,
	.sign-in-alt__title::after {
		content: "";
		flex: 1 1;
		border-bottom: 1px solid var(--clr-black-100);
		margin: auto;
	}

	.g_id_signin {
		display: inline-block;
	}

	@media screen and (min-width: 450px) {
		.btn--cta,
		.btn--tel {
			width: auto;
		}
	}
}

@layer utility {
	.inline-block {
		display: inline-block;
	}

	.inline-flex {
		display: inline-flex;
	}

	.text-italic {
		font-style: italic;
	}

	.text-bold {
		font-weight: bold;
	}

	.text-left {
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.no-wrap {
		white-space: nowrap;
	}

	.push-inline-end {
		margin-inline-start: auto;
	}

	.grow {
		flex-grow: 1;
	}

	.align-self-center {
		align-self: center;
	}
}