@layer reset, infrastructure, page, block, utilities;

@layer reset {
	*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
		all: unset;
		display: revert;
	}

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

	a,
	button {
		cursor: revert;
	}

	ol,
	ul,
	menu,
	summary {
		list-style: none;
	}

	img {
		max-width: 100%;
	}

	table {
		border-collapse: collapse;
	}

	::placeholder {
		color: unset;
	}

	:where([hidden]) {
		display: none;
	}

	:where([contenteditable]:not([contenteditable="false"])) {
		-moz-user-modify: read-write;
		-webkit-user-modify: read-write;
		overflow-wrap: break-word;
		-webkit-line-break: after-white-space;
		-webkit-user-select: auto;
	}

	:where([draggable="true"]) {
		-webkit-user-drag: element;
	}
}

@layer infrastructure {
	@font-face {
		font-family: 'icomoon';
		src: url("../woff/icomoon.woff") format("woff");
		font-weight: normal;
		font-style: normal;
	}

	:root {
		--bg-primary: hsl(0deg, 0%, 100%);
		--bg-secondary: hsl(43deg, 30%, 95%);
		--bg-tertiary: hsl(196deg, 100%, 34%);
		--bg-sys: hsl(78deg, 50%, 61%);
		--bg-prominence: hsl(24deg, 100%, 57%);

		--clr-primary: hsl(0deg, 0%, 12%);
		--clr-secondary: hsl(196deg, 100%, 34%);
		--clr-tertiary: hsl(0deg, 0%, 100%);

		--font-strong: 'Roboto Condensed', sans-serif;
		--font-copy: 'Montserrat', sans-serif;
		--font-sys: 'Source Sans Pro', sans-serif;
		--font-icon: 'icomoon';
		--font-awe: 'Font Awesome 5 Free';

		--max-width: 75rem; /* 1200px */
	}

	html {
		font-size: 1rem;
		line-height: 1.4;
	}

	body {
		font-family: var(--font-copy);
		color: var(--clr-primary);
		min-height: 100vh;
	}
}

@layer page {

	@layer header {
		.layout__header {
			position: fixed;
			width: 100%;
			background-color: var(--bg-primary);

			display: grid;
			grid-template-columns: 1fr 2fr 1fr;
			place-content: center;
			place-items: center;

			top: 0;
			z-index: 900;
		}

		.nav-icon {
			text-align: center;
			color: var(--clr-secondary);

			margin-right: auto;
			padding: 1.4em;
			cursor: pointer;
		}

		.nav-icon .fa-bars {
			font-size: 2rem;
		}

		.header-logo {
			padding-block: 1em;
		}

		.call-icon {
			color: var(--clr-tertiary);
			background-color: var(--bg-tertiary);
			margin-left: auto;
			padding: 0.5em;
			font-size: 2rem;

			display: flex;
			place-content: center;
			place-items: center;
		}

		.nav-menu--mobile {
			position: relative;
			background-color: var(--bg-primary);
			grid-column: 1 / -1;
			width: 100%;
			padding: 2em 1em;
			text-align: center;
			text-transform: uppercase;
			z-index: 100;
			right: 100%;
			transition: right 0.1s ease-out;
		}

		.nav-menu--mobile[data-open] {
			right: 0;
		}

		.nav-list {
			display: flex;
			flex-flow: column nowrap;
			place-content: center;
			place-items: center;
			row-gap: 1.4em;

			text-transform: uppercase;
		}

		.nav-menu--desktop {
			display: none;
		}

		/* 768px */
		@media (min-width: 48rem) {
			.layout__header {
				position: initial;
				grid-template-columns: 1fr 2fr;
				padding: 0 2em;
			}
	
			.nav-icon,
			.call-icon,
			.nav-menu--mobile {
				display: none;
			}
	
			.header-logo {
				margin-right: auto;
			}
	
			.nav-menu--desktop {
				display: initial;
				margin-left: auto;
			}
	
			.nav-list {
				flex-direction: row;
				column-gap: 3em;
	
				font-size: 0.9rem;
				text-align: center;
			}
		}
	}

	@layer main {
		.layout__main {
			margin-top: 120px;
		}

		.hero-banner {
			display: grid;
			grid-template-areas: 'content';
			place-items: center;
		}

		.hero-banner > * {
			grid-area: content;
			place-items: stretch;
		}

		.hero-video {
			aspect-ratio: 16/9;
			width: 100%;
		}

		.hero-image img {
			display: block;
		}

		.video-area {
			padding: 4rem;
		}

		.video-area .container {
			display: grid;
			row-gap: 3rem;
			column-gap: 1.5rem;
			justify-content: center;
			max-width: 75rem;
			grid-template-columns: 1fr;
			margin: 0 auto;
		}
		
		.container > * {
			flex: 1 0 24rem;
		}

		.video-box {
			display: grid;
			place-items: center;
			gap: 0.25rem;
		}
		
		.video-box iframe {
			margin-top: 0.5rem;
			width: 100%;
			aspect-ratio: 16/9;
		}

		.promo-cards {
			padding: 2em;
		}

		.card-layout {
			display: grid;
			grid-template-columns: 1fr;
			gap: 3em;
		}

		.card {
			display: flex;
			flex-flow: column nowrap;
			place-content: start;
			place-items: center;
			text-align: center;
			row-gap: 1em;
		}

		.card img {
			max-width: 150px;
			aspect-ratio: 1;
		}

		.card a {
			margin-bottom: auto;
		}

		.card .blurb {
			margin-top: auto;
		}

		.callout {
			color: var(--clr-tertiary);
			font-family: var(--font-strong);
			font-size: 1.2rem;
			padding: 2em;
		}

		.callout__wrapper {
			display: flex;
			flex-flow: column nowrap;
			place-items: center;
			gap: 2em;
		}
		
		.callout img {
			max-width: min(500px, 100%);
		}

		.callout__content {
			display: flex;
			flex-flow: column nowrap;
			place-items: center;
			row-gap: 1.4em;
			text-align: center;
		}

		.callout__content h2 {
			font-family: var(--font-strong);
			font-size: 1.5em;
		}

		.callout__content a {
			display: flex;
			flex-flow: row nowrap;
			place-items: center;
			gap: 0.25em;
			font-size: 0.75em;
		}

		.callout__content .fa-chevron-right {
			font-size: 0.5rem;
		}

		.callout__content ul {
			display: flex;
			flex-flow: column nowrap;
			place-items: center;
			row-gap: 1em;
		}

		.callout__content li,
		.pronounced-link-wrapper {
			display: flex;
			flex-flow: row nowrap;
			place-items: center;
			gap: 0.25em;
		}

		:is(.callout__content li, .pronounced-link-wrapper):is(:hover, :focus, :active) {
			color: var(--clr-primary);
		}

		/* 768px */
		@media (min-width: 48rem) {
			.layout__main {
				margin-top: unset;
			}

			.promo-cards {
				padding: 6em 2em;
			}

			.card-layout {
				grid-template-columns: repeat(3, 1fr);
			}

			.hero-image img {
				object-fit: cover;
				object-position: left;
			}
			
			.video-area .container {
				grid-template-columns: 1fr 1fr;
			}
		}
		
		/* 1024px */
		@media (min-width: 64rem) {
			.callout {
				font-size: 1.4rem;
			}

			.callout__wrapper {
				flex-direction: row;
			}

			.callout img {
				max-width: clamp(500px, 54vw, 620px);
			}

			.callout__content h2 {
				font-size: 1.8em;
			}

			.callout__content {
				row-gap: 1.2em;
			}

			.callout__content,
			.callout__content ul {
				place-items: start;
				text-align: left;
			}
		}
	}

	@layer footer {
		.layout__footer {
			background-color: var(--bg-primary);
			font-family: var(--font-sys);
			display: flex;
			flex-flow: column nowrap;
			row-gap: 1em;
			padding-inline: 1.4em;
			padding-block: 2em;
		}

		.footer__info {
			display: grid;
			grid-template-columns: 1fr;
			row-gap: 1.6em;
		}

		.footer-logo {
			text-align: center;
			width: fit-content;
			margin-inline: auto;
		}

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

		.footer__addendum {
			font-family: var(--font-strong);
			text-transform: uppercase;
			text-align: center;

			display: flex;
			flex-flow: row wrap;
			place-content: center;
			row-gap: 1.4em;
		}

		.footer__addendum > * {
			flex: 0 1 auto;
			padding-inline: 0.75em;
			line-height: 1.6;
		}

		.footer__addendum > *:first-child {
			padding-left: 0;
		}

		.footer__addendum > * + * {
			border-left: 1px solid var(--clr-primary);
		}

		.footer__links {
			display: flex;
			flex-flow: column nowrap;
			place-content: center;
			place-items: center;
			row-gap: 1.6em;
		}

		.footer__social-links {
			display: flex;
			flex-flow: row wrap;
			place-content: center;
			place-items: center;
			gap: 0.5em 1em;
		}

		/* 768px */
		@media (min-width: 48rem) {
			.layout__footer {
				padding-inline: 2em;
			}

			.footer__info {
				grid-template-columns: 1fr 1fr;
			}

			.footer-logo {
				text-align: left;
				margin: unset;
			}

			.mychart-blurb {
				grid-column: span 2;
				text-align: left;
			}

			.footer__links {
				place-items: end;
			}

			.footer__addendum {
				place-content: start;
			}
		}
	}
}

@layer block {
	.btn-green {
		background-color: var(--bg-sys);
		color: hsl(0deg, 0%, 0%);

		font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1;

		flex: 1;
		width: min(100%, 250px);
		padding: 1em 1.2em;

		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color 0.25s ease-out;
	}

	.btn-green:is(:hover, :focus, :active) {
		background-color: hsl(228deg, 2%, 46%);
		color: hsl(0deg, 0%, 100%);
	}

	.btn-rounded {
		background-color: var(--bg-prominence);
		color: hsl(0deg, 0%, 100%);

		font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1;

		width: min(100%, 250px);
		border-radius: 7px;
		padding: 1em 1.2em;

		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color 0.25s ease-out;
	}

	.pronounced-link {
		font-family: var(--font-copy);
		text-transform: uppercase;
		text-decoration: underline;
		transition: color 0.25s ease-out;
	}

	.pronounced-link:is(:hover, :focus, :active) {
		color: var(--clr-primary);
	}

	.circle-icon {
		color: var(--bg-sys);
		font-size: 2rem;
		transition: opacity 0.25s ease-out;
	}

	.circle-icon:is(:hover, :focus, :active) {
		opacity: 0.8;
	}
}

@layer utilities {
	.flow > * + * {
		margin-top: 2.66em;
	}

	.full-bleed-contain {
		max-width: var(--max-width);
		margin-inline: auto;
	}

	.font-strong {
		font-family: var(--font-strong);
	}

	.emphasis {
		font-style: italic;
	}

	.heading-print {
		font-size: 1.5rem;
	}

	.small-print {
		font-size: 0.9rem;
	}

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

	.underline-interact:is(:hover, :focus, :active) {
		text-decoration: underline;
	}

	.bg-secondary {
		background-color: var(--bg-secondary);
	}

	.bg-tertiary {
		background-color: var(--bg-tertiary);
	}

	.bg-prominence {
		background-color: var(--bg-prominence);
	}

	.clr-secondary {
		color: var(--clr-secondary);
	}

	.clr-tertiary {
		color: var(--clr-tertiary);
	}

	[class^="icon-"],
	[class*=" icon-"] {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: 'icomoon';
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		line-height: 1;
		text-transform: none;
	}

	.icon-facebook:before {
		content: "\e900";
	}
	
	.icon-twitter:before {
		content: "\e901";
	}
	
	.icon-instagram:before {
		content: "\e902";
	}
	
	.icon-pinterest:before {
		content: "\e903";
	}
	
	.icon-youtube:before {
		content: "\e904";
	}
	
	.icon-linkedin:before {
		content: "\e905";
	}

	.sr-only:not(:focus):not(:active) {
		position: absolute;
		width: 1px;
		height: 1px;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		overflow: hidden;
	}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */