/*
 * ==========================================================================
 * # 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: "Poppins", 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; }*/
.serif { font-family: "Merriweather", Times, serif; }

blockquote {
	font-size: var(--p);
	line-height: 1.75;
	padding: 0 var(--space-50);
	border-left: solid var(--border-width) var(--hue-primary);

	@media( min-width: 500px ) {
		line-height: 1.666;
	}

	@media( min-width: 1500px ) {
		line-height: 1.5;
		padding: 0 var(--space-75);
	}
}





/*
 * 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;
	
	h1 { margin-top: var(--space-50); font-weight: 600; }
	h2 { margin-top: var(--space-50); font-weight: 600; }
	h3 { margin-top: var(--space-50); font-weight: 600; }
	h4 { margin-top: var(--space-50); font-weight: 600; }
	h5 { margin-top: var(--space-50); }
	h6 { margin-top: var(--space-50); }
	p { margin-top: var(--space-50); }
	ul, ol { margin-top: var(--space-50); }
	table { margin-top: var(--space-50); }
	blockquote { margin-top: var(--space-50); }
	pre { margin-top: var(--space-50); }
	figure { margin-top: var(--space-50); }
	picture { margin-top: var(--space-50); }
	hr { margin-top: var(--space-50); }
}



/*
 * 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
 * ==========================================================================
 */



/*
 * 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-primary-light-light {
	background-color: var(--hue-primary-light-light);
	color: var(--hue-dark);
}
.fill-primary-light {
	background-color: var(--hue-primary-light);
	color: var(--hue-dark);
}
.fill-secondary-light-light {
	background-color: var(--hue-secondary-light-light);
	color: var(--hue-dark);
}
.fill-secondary-light {
	background-color: var(--hue-secondary-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-primary-dark-dark {
	background-color: var(--hue-primary-dark-dark);
	color: var(--hue-light);
}
.fill-secondary {
	background-color: var(--hue-secondary);
	color: var(--hue-light);
}
.fill-secondary-dark {
	background-color: var(--hue-secondary-dark);
	color: var(--hue-light);
}
.fill-secondary-dark-dark {
	background-color: var(--hue-secondary-dark-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);
}



/*
 * 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-light-light { color: var(--hue-primary-light-light); }
.text-primary-dark { color: var(--hue-primary-dark); }
.text-primary-dark-dark { color: var(--hue-primary-dark-dark); }
.text-secondary { color: var(--hue-secondary); }
.text-secondary-light { color: var(--hue-secondary-light); }
.text-secondary-light-light { color: var(--hue-secondary-light-light); }
.text-secondary-dark { color: var(--hue-secondary-dark); }
.text-secondary-dark-dark { color: var(--hue-secondary-dark-dark); }
.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); }






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

button,
.button {
	font-size: var(--p);
	font-weight: 500;
	/*border-radius: var(--space-min);*/
	border-radius: calc(var(--p) * 3);
	padding: 0 calc(var(--p) * 1.5);
	letter-spacing: calc(var(--border-width)/3);
	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);
	border-radius: 0;
}

.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 {
	box-shadow: 
		0 0 var(--border-width)  color-mix(in srgb, var(--hue-primary) 25%, transparent),
		0 var(--border-width) calc(var(--space-100)/2) color-mix(in srgb, var(--hue-primary) 25%, transparent);

		@media( min-width: 1000px ) {
			box-shadow: 
				0 0 var(--border-width)  color-mix(in srgb, var(--hue-primary) 35%, transparent),
				0 var(--border-width) calc(var(--space-100)/1) color-mix(in srgb, var(--hue-primary) 35%, 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);
}