/* ==========================================================================
   #settings
   ========================================================================== */


:root {
	--wisp-spacing-lg:					1.5rem;
	--wisp-body-font-family: 			Poppins, sans-serif;
	--wisp-font-size-md: 				18px;
	--wisp-font-size-5xl:				4rem;
	--wisp-font-size-sm: 				16px;
	--wisp-body-line-height:			1.8;
	--wisp-font-size-hero: 				4rem;
	--wisp-table-cell-block-padding: 	1.25rem;
	--wisp-table-cell-inline-padding: 	1.25rem;
	--wisp-color-text: 					#1a1a1a;
	--wisp-color-primary:				#00564f;
	--wisp-color-primary-text:			#ffffff;
	--wisp-color-secondary:				#99d60e;
	--wisp-color-secondary-text: 		#1a1a1a;
	--wisp-color-neutral:				#ececec;
	--wisp-color-neutral-text: 			#1a1a1a;
	--wisp-container-width: 			1616px;
}

/* =========================================================================
   #foundation
   ========================================================================= */

@layer foundation {

	/* ======================================================================
   	   root
	   ====================================================================== */

	html {
		font-size: 112.5%; /* 18px */
	}

	/* ======================================================================
   	   tables
	   ====================================================================== */

	/**
	 * This is opinionated, but our tables will always match the brand.
	 */
 	table {
		border-radius: 8px;
		overflow: hidden;
	}

	thead {
		background-color: #00564f;
		           color: #ffffff;
	}

	th,
	td {
		border: 1px solid #ccc;
	}

}

/* =========================================================================
   #objects
   ========================================================================= */

@layer objects {

	/* =====================================================================
	   o-cluster
	   ===================================================================== */

	/* --legal ============================================================== */

	@media (min-width: 48rem) {
		.o-cluster--legal .c-link-inline + .c-link-inline::before {
			display: inline-block;
			content: "/";
			margin-inline: .5rem;
		}

		.o-cluster--legal .c-link-inline {
			font-size: 0.875rem;
		}
	}
}

/* ==========================================================================
   #components
   ========================================================================== */

 @layer components {

	/* ======================================================================
   	   c-cover
	   ====================================================================== */

	/**
	 * Sets the background image on an element.
	 *
	 * Example:
	 *
	 * <div class="c-cover c-cover--green"></div>
	 */
	.c-cover {
		background-size: cover;
	}

	.c-cover--green {
		background-image: url('/images/template/cover-green.png');
	}

	.c-cover--denim {
		background-image: url('/images/template/cover-denim.png');
	}

	.c-cover--smoke {
		background-image: url('/images/template/cover-smoke.png');
	}

	.c-cover--graph {
		background-image: url('/images/template/cover-graph.png');
	}

	/* ======================================================================
	   c-box
	   ====================================================================== */

	/* --lime =============================================================== */

	/**
	 * Adds a thick lime border to the left-side.
	 */
	 .c-box--lime {
		border-width: 1px;
		border-style: solid;
		border-color: #cbd5e1;
		border-left-width: 14px;
		border-left-style: solid;
		border-left-color: #99d60e;
		border-radius: 8px;
	}
	/* --red =============================================================== */

	/**
	 * Adds a thick lime border to the left-side.
	 */
	 .c-box--orange {
		border-width: 1px;
		border-style: solid;
		border-color: #cbd5e1;
		border-left-width: 14px;
		border-left-style: solid;
		border-left-color: #cc6600;
		border-radius: 8px;
	}

	/* --waves ============================================================== */

	.c-box--waves {
		padding-inline-start: var(--wisp-spacing-xl);
		border-width: 1px;
		border-style: solid;
		border-color: #cbd5e1;
		border-radius: 8px;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-image: url("/images/template/box-wave.png");
	}

	/* ======================================================================
	   c-keyline
	   ====================================================================== */

	 /**
	  * Adds a pointless underline to words in a heading. It's visual noise. But
	  * what the fuck do I know, I'm just a programmer.
	  *
	  * @example
	  *
	  * <span class="c-keyline">Text</span>
	  */
	 .c-keyline {
		position: relative;
		display: inline-block;
		line-height: 1;
		z-index: 0;
		color: var(--wisp-color-secondary);
	}

	.c-keyline::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 0.45em;
		z-index: -1;
		background-color: #00302C;
	}

	/* ======================================================================
   	   c-tab
	   ====================================================================== */

	.c-tab-wrapper {
		border-block-end-width: 2px;
		border-block-end-style: dotted;
		border-block-end-color: var(--wisp-color-border);
	}

	.c-tab-wrapper > .o-cluster {
		column-gap: 2.5rem;
	}

	.c-tab {
		margin-block-end: -2px;
		padding-block: var(--wisp-spacing-xs);
		border-block-end-width: 6px;
		border-block-end-style: solid;
		border-block-end-color: transparent;
		font-size: var(--wisp-font-size-2xl);
		font-weight: 600;
		text-decoration: none;
		color: currentColor;
		transition-property: border-color, color;
		transition-duration: 200ms;
		transition-timing-function: ease;
	}

	.c-tab:hover,
	.c-tab:active,
	.c-tab.is-active {
		color: var(--wisp-color-primary);
		border-block-end-color: var(--wisp-color-primary);
	}
}

/* ==========================================================================
   #behaviors
   ========================================================================== */

@layer behaviors {

	/* ======================================================================
	   b-press-flip
	   ====================================================================== */

	/**
	 * Behavior to flip the button color on hover or active.
	 *
	 * Example:
	 *
	 * <button class="c-button b-press-flip"></button>
	 */
	.b-press-flip:hover,
	.b-press-flip:active {
		transition-property: background-color, color;
		transition-duration: 200ms;
		transition-timing-function: ease-out;
		color: var(--wisp-color-secondary-text);
		background-color: var(--wisp-color-secondary);
	}

	/* --surface ============================================================ */

	.b-press-flip--surface {
		color: var(--wisp-color-secondary-text);
		background-color: var(--wisp-color-secondary);
	}
}

/* ==========================================================================
   #utilities
   ========================================================================== */

@layer utilities {
	.u-color-util-bar {
		background-color: #0d6a63;
		           color: #fff;
	}

	.u-padding-block-lg {
		padding-block: 3rem;
	}

	.u-radius-md {
		border-radius: 6px;
	}
	.u-radius-lg {
		border-radius: 8px;
	}
}