/*
 * ==========================================================================
 * # THEME STYLESCAPE
 * ==========================================================================
 */



/*
 * Breakpoints
 
@media( min-width: 500px )  {}
@media( min-width: 1000px ) {}
@media( min-width: 1500px ) {}
 
 */





/* -- html -- */
html {
	scroll-behavior: smooth;
	/* CSS to apply easing effect */
	scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
	/* Custom cubic-bezier easing */
}



/* -- body -- */

body,
.body {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: var(--p);
	font-weight: 400;
	line-height: 1.5;
	color: var(--hue-neutral-90);
	min-height: 100vh;
	/* Helps with Copyright Section on empty pages */
}





/*
 * ==========================================================================
 * Typography Helpers
 * ==========================================================================
 */

a {
	text-decoration: none;
}



/*
 * Font Size
 * Applies the fluid font size variables from 0-root.css to any element.
 */

h1,
.h1 {
	font-size: var(--h1);
	line-height: 1.333;
}

h2,
.h2 {
	font-size: var(--h2);
	line-height: 1.333;
}

h3,
.h3 {
	font-size: var(--h3);
}

h4,
.h4 {
	font-size: var(--h4);
}

h5,
.h5 {
	font-size: var(--h5);
}

h6,
.h6 {
	font-size: var(--h6);
}

p,
.p {
	font-size: var(--p);
	line-height: 1.75;
}

label,
.label {
	font-size: var(--label);
}

small,
.small {
	font-size: var(--small);
}

@media(min-width: 500px) {

	body,
	.body {
		line-height: 1.425;
	}

	h1,
	.h1 {
		line-height: 1.275;
	}

	h2,
	.h2 {
		line-height: 1.275;
	}

	p,
	.p {
		line-height: 1.666;
	}
}

@media(min-width: 1500px) {

	body,
	.body {
		line-height: 1.333;
	}

	h1,
	.h1 {
		line-height: 1.2;
	}

	h2,
	.h2 {
		line-height: 1.2;
	}

	p,
	.p {
		line-height: 1.5;
	}
}



/*
 * Font Weight
 * Controls the boldness of text.
 */

.w-100 {
	font-weight: 100;
}

.w-200 {
	font-weight: 200;
}

.w-300 {
	font-weight: 300;
}

.w-400 {
	font-weight: 400;
}

.w-500 {
	font-weight: 500;
}

strong,
.strong,
.w-600 {
	font-weight: 600;
}

.w-700 {
	font-weight: 700;
}

.w-800 {
	font-weight: 800;
}

.w-900 {
	font-weight: 900;
}



/*
 * Font Style
 */

em,
.em {
	font-style: italic;
}

.condensed {
	font-family: "Dosis", Impact, sans-serif;
}



/*
 * Line Height
 * Controls the vertical space between lines of text.
 */

/*.line-height-tight { line-height: 1.25; }
.line-height-normal { line-height: 1.5; }
.line-height-loose { line-height: 1.75; }

.line-height-tight-tight { line-height: 1; }
.line-height-loose-loose { line-height: 2; }*/



/*
 * HR Dashed
 */
hr.dashed {
	border-style: dashed;
}


/*
 * Post Content
 */

.post-content {
	overflow: clip;
	display: grid;
	gap: var(--space-50);

	li {
		line-height: 1.5;
	}

	blockquote {
		margin: 0;
		padding: var(--space-50);
		display: flex;
		gap: var(--space-50);
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: color-mix(in srgb, var(--hue-primary-light) 50%, var(--hue-light));
		border-left: calc(var(--border-width) * 5) solid var(--hue-primary);
	}

	@media(min-width: 1000px) {
		gap: var(--space-75);

		blockquote {
			padding: var(--space-75);
		}
	}
}



/*
 * Letter Spacing
 * Controls the horizontal space between characters.
 */

.letter-space {
	letter-spacing: calc(var(--p) / 6);
}

.letter-spacing-normal {
	letter-spacing: normal;
}

.letter-spacing-tight {
	letter-spacing: calc((var(--space-25)/15)* -1);
}

.letter-spacing-loose {
	letter-spacing: calc(var(--space-25)/15);
}

.letter-spacing-tight-tight {
	letter-spacing: calc((var(--space-25)/7.5)* -1);
}

.letter-spacing-loose-loose {
	letter-spacing: calc(var(--space-25)/7.5);
}





/*
 * ==========================================================================
 * Color & Fill Helpers
 * ==========================================================================
 */



/*
 * Text Color Utilities
 * Applies a specific theme color to the text.
 */

.text-light {
	color: var(--hue-light);
}

.text-dark {
	color: var(--hue-dark);
}

.text-primary {
	color: var(--hue-primary);
}

.text-primary-light {
	color: var(--hue-primary-light);
}

.text-primary-dark {
	color: var(--hue-primary-dark);
}

.text-secondary {
	color: var(--hue-secondary);
}

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

.text-success {
	color: var(--hue-success);
}

.text-warning {
	color: var(--hue-warning);
}

.text-neutral-10 {
	color: var(--hue-neutral-10);
}

.text-neutral-20 {
	color: var(--hue-neutral-20);
}

.text-neutral-30 {
	color: var(--hue-neutral-30);
}

.text-neutral-40 {
	color: var(--hue-neutral-40);
}

.text-neutral-50 {
	color: var(--hue-neutral-50);
}

.text-neutral-60 {
	color: var(--hue-neutral-60);
}

.text-neutral-70 {
	color: var(--hue-neutral-70);
}

.text-neutral-80 {
	color: var(--hue-neutral-80);
}

.text-neutral-90 {
	color: var(--hue-neutral-90);
}



/*
 * Background Fill Utilities
 * Applies a background color and automatically sets a contrasting text color.
 */

/* Light Backgrounds, Dark Text */
.fill-light {
	background-color: var(--hue-light);
	color: var(--hue-dark);
}

.fill-secondary {
	background-color: var(--hue-secondary);
	color: var(--hue-dark);
}

.fill-primary-light {
	background-color: var(--hue-primary-light);
	color: var(--hue-dark);
}

.fill-neutral-10 {
	background-color: var(--hue-neutral-10);
	color: var(--hue-dark);
}

.fill-neutral-20 {
	background-color: var(--hue-neutral-20);
	color: var(--hue-dark);
}

.fill-neutral-30 {
	background-color: var(--hue-neutral-30);
	color: var(--hue-dark);
}

.fill-warning {
	background-color: var(--hue-warning);
	color: var(--hue-dark);
}

/* Dark Backgrounds, Light Text */
.fill-dark {
	background-color: var(--hue-dark);
	color: var(--hue-light);
}

.fill-primary {
	background-color: var(--hue-primary);
	color: var(--hue-light);
}

.fill-primary-dark {
	background-color: var(--hue-primary-dark);
	color: var(--hue-light);
}

.fill-neutral-40 {
	background-color: var(--hue-neutral-40);
	color: var(--hue-light);
}

.fill-neutral-50 {
	background-color: var(--hue-neutral-50);
	color: var(--hue-light);
}

.fill-neutral-60 {
	background-color: var(--hue-neutral-60);
	color: var(--hue-light);
}

.fill-neutral-70 {
	background-color: var(--hue-neutral-70);
	color: var(--hue-light);
}

.fill-neutral-80 {
	background-color: var(--hue-neutral-80);
	color: var(--hue-light);
}

.fill-neutral-90 {
	background-color: var(--hue-neutral-90);
	color: var(--hue-light);
}

.fill-error {
	background-color: var(--hue-error);
	color: var(--hue-light);
}

.fill-success {
	background-color: var(--hue-success);
	color: var(--hue-light);
}






/*
 * ==========================================================================
 * Input Elements
 * ==========================================================================
 */

button,
.button {
	font-size: var(--small);
	/*border-radius: calc(var(--p) * 3);*/
	border-radius: var(--space-min);
	padding: 0 calc(var(--p) * 2);
	letter-spacing: calc(var(--p)/8);
	text-transform: uppercase;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	font-size: var(--p);
	border-color: var(--hue-primary);
	border-color: color-mix(in srgb, var(--hue-primary) 50%, transparent);
	border-radius: var(--space-min);
}

.form {}

.form-input {}

.input-label {
	cursor: pointer;
	font-size: var(--small);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--hue-primary);
}

.input-field {}

.form-input:focus-within .input-label {
	color: var(--hue-primary-dark);
}

.form-input:focus-within .input-field {
	color: var(--hue-primary-dark);
	border-color: var(--hue-primary-dark);
}

select.button {
	background-image: url('/media/select-white.png');
	background-size: auto 45%;
	background-repeat: no-repeat;
	background-position: right var(--p) center;
}


/*
 * ==========================================================================
 * Border & Shadow Helpers
 * ==========================================================================
 */



/*
 * Border Radius
 * Applies rounded corners using the fluid spacing variables.
 */

.radius-min {
	border-radius: var(--space-min);
}

.radius-25 {
	border-radius: var(--space-25);
}

.radius-50 {
	border-radius: var(--space-50);
}

.radius-round {
	border-radius: 9999px;
}

/* For creating circles/pills */




/*
 * Box Shadow
 * Applies pre-defined, theme-aware shadow styles.
 * Shadow dimensions are proportional to the base paragraph font size (--p).
 */

.box-shadow-small {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-dark) 10%, transparent),
		0 var(--border-width) calc(var(--space-min)/2) color-mix(in srgb, var(--hue-dark) 10%, transparent);
}

.box-shadow,
.box-shadow-medium {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-dark) 15%, transparent),
		0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-dark) 15%, transparent);
}

.box-shadow-large {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-dark) 20%, transparent),
		0 var(--border-width) calc(var(--space-min)*2) color-mix(in srgb, var(--hue-dark) 20%, transparent);
}

.box-shadow-inset {
	box-shadow:
		inset 0 0 var(--border-width) color-mix(in srgb, var(--hue-dark) 15%, transparent),
		inset 0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-dark) 15%, transparent);
}

.box-shadow-primary-small {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-primary) 20%, transparent),
		0 var(--border-width) calc(var(--space-min)/2) color-mix(in srgb, var(--hue-primary) 20%, transparent);
}

.box-shadow-primary,
.box-shadow-primary-medium {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-primary) 25%, transparent),
		0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-primary) 25%, transparent);
}

.box-shadow-primary-large {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-primary) 30%, transparent),
		0 var(--border-width) calc(var(--space-min)*2) color-mix(in srgb, var(--hue-primary) 30%, transparent);
}



/*
 * Box Border (using box-shadow)
 * A clever way to add an inset border without affecting layout.
 */

.box-border-dark {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-dark);
}

.box-border-light {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-dark);
}

.box-border-primary {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-primary);
}



/*
 * ==========================================================================
 * Animation Helpers
 * ==========================================================================
 */

/*
 * Scroll-Triggered Animations
 * These animations activate when an element enters the viewport.
 * Uses modern CSS @supports to only apply to browsers that support
 * `animation-timeline: view()`.
 */

@supports (animation-timeline: view()) {

	/* --- Fade Up Animation --- */
	.fade-up-animation {
		scale: 0.9;
		opacity: 0;
		animation: fade-up linear forwards;
		animation-timeline: view();
		animation-range: entry 10% cover 40%;
	}

	@keyframes fade-up {
		to {
			scale: 1;
			opacity: 1;
		}
	}

	/* --- Slide In From Left Animation --- */
	.slide-in-left-animation {
		translate: -50px 0;
		opacity: 0;
		animation: slide-in-left linear forwards;
		animation-timeline: view();
		animation-range: entry 10% cover 40%;
	}

	@keyframes slide-in-left {
		to {
			translate: 0 0;
			opacity: 1;
		}
	}
}





/*
 * ==========================================================================
 * Section
 * ==========================================================================
 */

.gap {
	margin-top: calc(var(--container-width)/4);
}

@media(min-width: 500px) {
	.gap {
		margin-top: calc(var(--container-width)/6);
	}
}

@media(min-width: 1000px) {
	.gap {
		margin-top: calc(var(--container-width)/8);
	}
}

.small-gap {
	margin-top: calc(var(--container-width)/8);
}

@media(min-width: 500px) {
	.small-gap {
		margin-top: calc(var(--container-width)/12);
	}
}

@media(min-width: 1000px) {
	.small-gap {
		margin-top: calc(var(--container-width)/16);
	}
}

.section-heading {}

.section-label {
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: var(--space-25);
	letter-spacing: calc(var(--label)/16);
}