@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--navy: #201a4a;
	--navy-deep: #14102f;
	--focus-ring: #ffd166;
}

body {
	color: var(--navy);
}

body #container_main,
body footer {
	font-family: "Urbanist", sans-serif;
}

main section,
.hero-wrap {
	padding-block: 2.5rem;
}

main section h2 {
	color: var(--navy);
	font-weight: 700;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---------- Hero + habits callouts ---------- */

.hero-wrap {
	padding-inline: 1rem;
	padding: 0;
	background-color: transparent;
}

.hero-wrap .container {
	max-width: 1100px;
	height: 750px;
}

.hero {
	background-color: var(--navy-deep);
	background-image: url("/kidshealth/images/hero-2400w.png");
	background-size: cover;
	background-position: top center;
	border-radius: 1.5rem 1.5rem 0 0;
	padding: 3rem 1.5rem;
	text-align: center;
}

.hero-logo {
	margin: 0 0 1rem;
}

.hero-logo img {
	width: auto;
	max-width: 100%;
	max-height: 300px;
	margin-top: 4vh;
}

.hero-tagline {
	color: #fff;
	max-width: 32rem;
	margin: 0 auto;
	font-size: 1.125rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.callouts {
	border-radius: 0 0 1.5rem 1.5rem;
	overflow: hidden;
	padding: 0;
}

.habits-heading {
	background-color: #513f93;
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 1.25rem 1.5rem;
	font-size: 1.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.habit-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	height: 100%;
	padding: 1.75rem;
	color: #fff;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.habit-card__icon {
	width: 170px;
	flex-shrink: 0;
}

.habit-card h3 {
	font-size: 1.1rem;
	margin-bottom: 0.35rem;
}

.habit-card p {
	/* font-size: 0.9rem; */
	margin: 0;
}

/* light-callout background isn't dark enough for white text at this size,
   use navy text on the two light cards to meet contrast requirements */
.habit-card.light-callout {
	color: var(--navy);
}

.habit-card--5 {
	background-image: url("/kidshealth/images/stars-1.png");
	background-position: top left;
	background-color: #6465A9;
}

.habit-card--2 {
	background-image: url("/kidshealth/images/stars-2.png");
	background-position: top right;
	background-color: #8889D0;
}

.habit-card--1 {
	background-image: url("/kidshealth/images/stars-3.png");
	background-position: bottom left;
	background-color: #8889D0;
}

.habit-card--0 {
	background-image: url("/kidshealth/images/stars-4.png");
	background-position: bottom right;
	background-color: #6465A9;
}

.light-callout {
	background-color: #888AD0;
}

.dark-callout {
	background-color: #6466AA;
}

/* ---------- Data & impact ---------- */

.video-embed {
	background-color: #EFEFF5;
	border-radius: 1.5rem;
	overflow: hidden;
}

.video-embed video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.data-impact {
	background-color: #FAF6D4;
	border-radius: 1.5rem;
	padding: 1.75rem 2rem;
}

.data-impact h2 {
	font-size: 1.5rem;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
	position: relative;
}

.data-impact h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1.25rem;
	width: 3rem;
	height: 4px;
	background-color: #02ADD6;
}

.data-impact ul {
	padding-left: 1.25rem;
	margin-bottom: 0;
}

.data-impact li {
	margin-bottom: 0.4rem;
}

/* ---------- Ways to use every day ---------- */

.cards-container {
	background-color: #523F94;
	border-radius: 1.5rem;
	padding: 2rem 1.5rem;
}

.cards-container h2 {
	color: #FCF3B0;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.way-card {
	margin: 0;
	padding: 1rem;
}

.way-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 1rem;
	display: block;
}

.way-card figcaption {
	color: #fff;
	margin-top: 0.75rem;
}

/* ---------- Coloring page ---------- */

.coloring-page-container,
.additional-resources-container,
footer div.disclaimer {
	background-color: #C8CAF5;
}

.coloring-page-container {
	border-radius: 1.5rem;
	padding: 2rem;
}

.coloring-page-container .crayon-bg {
	background-image: url("/kidshealth/images/crayons.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 40%;
}

.coloring-page-intro {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-left: 30%;
	position: relative;
	top: 30%;
}

.coloring-page-intro h2 {
	font-size: 1.5rem;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
	position: relative;
}

.coloring-page-intro h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1.25rem;
	width: 3rem;
	height: 4px;
	background-color: #02ADD6;
}

.btn-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--navy);
	color: #fff;
	border-radius: 2rem;
	padding: 0.6rem 1.25rem;
	font-weight: 600;
	margin-top: 0.75rem;
	text-decoration: none;
}

.btn-download:hover,
.btn-download:focus-visible {
	background-color: #6466AA;
	color: #fff;
}

.coloring-page-preview {
	background-color: #fff;
	border-radius: 1rem;
	padding: 0.75rem;
	box-shadow: 0 8px 20px rgba(20, 16, 47, 0.12);
	max-width: 320px;
	margin-inline: auto;
}

.coloring-page-preview img {
	width: 100%;
	display: block;
	border-radius: 0.5rem;
}

/* ---------- Additional resources ---------- */

.coloring-page-container .row .col,
.additional-resources-container .row .col {
	background-color: #E6E7FB;
}

.additional-resources-container {
	border-radius: 1.5rem;
	padding: 2rem;
}

.additional-resources-container>h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.additional-resources-container .row>.col-12>.col {
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%;
}

.additional-resources-container h3 {
	text-align: center;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.additional-resources-container ul {
	list-style: none;
	padding-left: 0;
	/* font-size: 0.9rem; */
}

.additional-resources-container li {
	margin-bottom: 0.75rem;
}

.additional-resources-container li a {
	color: var(--navy);
	text-decoration: none;
}

.additional-resources-container li a:hover,
.additional-resources-container li a:focus-visible {
	text-decoration: underline;
}

.resources-footnote {
	font-size: 0.75rem;
	margin: 1.5rem 0 0;
}

/* ---------- Footer ---------- */

footer {
	background-color: #E1E2EA;
	padding: 2rem;
}

footer .footer {
	margin: 0 auto;
	max-width: calc(1600px + 2rem);
}

footer .disclaimer {
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	font-size: 0.75rem;
}

footer .disclaimer p {
	margin: 0;
}

.footer-logos {
	display: flex;
	align-items: center;
	/* gap: 1.5rem; */
	flex-wrap: wrap;
}

/* no divider on small screens, right border at md+ (Bootstrap has no
   responsive border-side utilities, so this is handled with plain CSS) */
@media (min-width: 768px) {
	.footer-logos__divider {
		border-inline-end: 1px solid var(--bs-dark-border-subtle);
	}
}

.footer-logos img {
	height: auto;
	width: 100%;
	padding: 1rem;
}

address {
	font-size: 0.9rem;
	margin: 0 1rem;
}

address p {
	margin-bottom: 0;
}

address a {
	color: var(--navy);
	text-decoration: none;
}

address a:hover,
address a:focus-visible {
	text-decoration: underline;
}

.social-icons {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: flex-start;
}

@media (min-width: 992px) {
	.social-icons {
		justify-content: center;
		flex-wrap: wrap;
	}
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #433d6c;
	text-decoration: none;
	font-size: 1.25rem;
}

.social-icons a:hover,
.social-icons a:focus,
.social-icons a:active,
.social-icons a:focus-visible {
	color: var(--navy);
}


/* ---------- Tablet ---------- */
/* ----- 1024 for ipad pro ----- */
@media (max-width: 1024px) {

	.hero-wrap .container {
		height: 400px;
	}

	.hero-logo img {
		max-height: 18vh;
		margin-top: 3vh;
	}

	.hero-tagline {
		max-width: 40vw;
	}

	.habit-card__icon {
		width: 100px;
	}

	.coloring-page-container .crayon-bg {
		background-size: 23%;
		min-height: 300px;
	}

	.coloring-page-intro {
		margin-left: 11vw;
		top: 8vw;
	}

	footer {
		padding: 2rem 1rem;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {

	.hero {
		padding: 2rem 1rem;
	}

	.hero-tagline {
		max-width: 40vw;
	}

	.coloring-page-container .crayon-bg {
		min-height: 320px;
	}

	.coloring-page-intro {
		flex-direction: column;
		align-items: center;
		margin-left: 10%;
		top: 13%;
	}
}

/* ---------- BS, template overrides ---------- */

@media (max-width: 1023.98px) {
	body main article section:first-of-type:not(:has(.main-banner)):not(:has(.banner-container)):not(:has(.sub-banner-container)):not(:has(.rotating-banner)):not(:has([class*=rotating-banner])):not(:has([id*=banner])):not(.info-internal-banner) {
		margin-top: 1rem;
	}
}

.container-md,
.container-sm,
.container {
	padding: 0;
}


@media (min-width: 640px) {

	.container-md,
	.container-sm,
	.container {
		max-width: none;
	}
}