/*
Theme Name: Technology Hill Early Learning Center
Theme URI: https://earlylearningcenternh.org/
Description: Custom Gesso child theme for Technology Hill Early Learning Center by Easterseals NH.
Author: Ryan Bolduc
Author URI: https://eastersealsnh.org/
Template: gesso
Version: 1.0.6
Text Domain: gesso-child-elc
*/

/* ==========================================================================
	 Technology Hill Early Learning Center
	 Child Theme Styles
	 ========================================================================== */

/* ==========================================================================
	 Gesso Brand Variable Overrides
	 ========================================================================== */

/*
 * Keep the Gesso shell aligned with the ELC design system regardless of
 * which site-theme modifier is assigned by the parent theme.
 */
.site-theme--primary,
.site-theme--secondary,
.site-theme--tertiary {
	--es-primary-nav-accent: var(--wp--preset--color--coral);

	--es-utility-bg: var(--wp--preset--color--navy);
	--es-utility-bg-active: var(--wp--preset--color--navy);

	--es-button-color: var(--wp--preset--color--coral);
	--es-button-color-hover: var(--wp--preset--color--coral);

	--es-color-main: var(--wp--preset--color--navy);
	--es-color-accent: var(--wp--preset--color--orange);
	--es-bg-tint: var(--wp--preset--color--sky-10);

	--es-footer-border: rgba(255, 255, 255, 0.25);
	--es-footer-link: var(--wp--preset--color--white);
	--es-footer-cta: var(--wp--preset--color--navy);
	--es-footer-arrow: var(--wp--preset--color--navy);
}

/* ==========================================================================
	 Base
	 ========================================================================== */

body {
	/* background-color: var(--wp--preset--color--white); */
	background: var(--wp--preset--color--sky-10);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 400;
	line-height: 1.6;
}

img {
	height: auto;
	max-width: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

p,
li {
	overflow-wrap: break-word;
}

.is-style-lead-paragraph {
	font-size: 1.375em;
	line-height: 1.375;
}

/* ==========================================================================
	 Links
	 ========================================================================== */

a {
	/* color: var(--wp--preset--color--coral); */
}

/* Button variations inherit layout and interaction styles from Gesso. */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: 10px;
	font-weight: 500;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
}

.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: #fff;
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

/* Keep the inherited arrow visible in every button state. */
.wp-block-button.is-style-fill .wp-block-button__link::after,
.wp-block-button.is-style-outline .wp-block-button__link::after {
	border-color: currentColor;
}

/*
 * Technology Hill Early Learning Center form tabs
 */

:where(.wp-block-tab-list.elc-form-tabs, .elc-form-tabs .wp-block-tab-list)
	> [role="tab"] {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--coral) !important;
	color: var(--wp--preset--color--navy) !important;
}

:where(.wp-block-tab-list.elc-form-tabs, .elc-form-tabs .wp-block-tab-list)
	> [role="tab"]:is(:hover, [aria-selected="true"]) {
	background-color: var(--wp--preset--color--coral) !important;
	border-color: var(--wp--preset--color--coral) !important;
	color: var(--wp--preset--color--navy) !important;
}

:where(.wp-block-tab-list button)[aria-selected="true"]:before {
	border-bottom: 0px;
}

/* ==========================================================================
	 Scroll Reveal
	 ========================================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.scroll-reveal {
			animation-fill-mode: both;
			animation-name: elc-reveal;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
			animation-timing-function: linear;
		}

		.scroll-reveal--image {
			animation-name: elc-reveal-image;
		}
	}
}

@keyframes elc-reveal {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes elc-reveal-image {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================================================
	 Global Header
	 ========================================================================== */

/* ------------------------------------------------------------
 * Utility navigation
 * ------------------------------------------------------------ */

.elc-utility-bar {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	margin: 0;
	min-height: 2.5rem;
	padding: 0;
	width: 100%;
}

.elc-utility-bar__inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-inline: auto;
	min-height: 2.5rem;
	padding-inline: 1.5rem;
	width: 100%;
}

/*
 * Prevent default WordPress block margins from affecting
 * the height and vertical alignment of the utility bar.
 */
.elc-utility-bar__inner > * {
	margin-block: 0;
}

/* Utility navigation links. */
.elc-utility-bar .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* ------------------------------------------------------------
 * Shared utility control styles
 * ------------------------------------------------------------ */

.elc-utility-bar .collapsed-search__toggle,
.elc-utility-bar .gtranslate_wrapper,
.elc-utility-bar .gtranslate-wrapper,
.elc-utility-bar .gtranslate_wrapper a,
.elc-utility-bar .gtranslate-wrapper a {
	color: var(--wp--preset--color--white);
	font-size: 0.875rem !important;
	font-weight: 500;
}

/* ------------------------------------------------------------
 * Collapsed search
 * ------------------------------------------------------------ */

.elc-utility-bar .collapsed-search__toggle {
	align-items: center;
	background-color: transparent;
	border: 0;
	border-radius: 0.375rem;
	color: var(--wp--preset--color--white);
	display: inline-flex;
	gap: 0.375rem;
	justify-content: center;
	margin: 0;
	min-height: 2rem;
	padding: 0.25rem 0.625rem;
}

.elc-utility-bar .collapsed-search__toggle:hover {
	background-color: rgb(255 255 255 / 10%);
}

.elc-utility-bar .collapsed-search__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.elc-utility-bar .collapsed-search__toggle svg {
	color: currentcolor;
	height: 1rem;
	width: 1rem;
}

.elc-utility-bar .collapsed-search__content {
	background-color: var(--wp--preset--color--navy);
	display: none;
	left: var(--search-content-left);
	padding: 1rem;
	position: absolute;
	top: var(--search-top, 100%);
	width: var(--search-content-width);
}

.has-open-search .elc-utility-bar .collapsed-search__content {
	border-top: 1px solid var(--wp--preset--color--lime);
	display: flex;
	justify-content: center;
	z-index: 1000;
}

.elc-utility-bar .wp-block-search.is-style-collapsed {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	margin: auto;
	max-width: 1280px;
	width: 100%;
}

/* ------------------------------------------------------------
 * GTranslate
 * ------------------------------------------------------------ */

.elc-utility-bar .gtranslate_wrapper,
.elc-utility-bar .gtranslate-wrapper {
	align-items: center;
	display: flex;
	margin: 0;
}

.elc-utility-bar .gtranslate_wrapper select,
.elc-utility-bar .gtranslate-wrapper select,
.elc-utility-bar select.gt_selector {
	background-color: transparent !important;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 0.375rem;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem !important;
	font-weight: 500;
	height: 2rem;
	line-height: 1;
	margin: 0;
	padding: 0.25rem 0.625rem;
}

.elc-utility-bar .gtranslate_wrapper select:hover,
.elc-utility-bar .gtranslate-wrapper select:hover,
.elc-utility-bar select.gt_selector:hover {
	background-color: rgb(255 255 255 / 10%) !important;
}

.elc-utility-bar .gtranslate_wrapper select:focus-visible,
.elc-utility-bar .gtranslate-wrapper select:focus-visible,
.elc-utility-bar select.gt_selector:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/*
 * Native select dropdown options typically open on
 * a light operating-system background.
 */
.elc-utility-bar .gtranslate_wrapper option,
.elc-utility-bar .gtranslate-wrapper option,
.elc-utility-bar select.gt_selector option {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------
 * Responsive utility navigation
 * ------------------------------------------------------------ */

@media (max-width: 47.9375rem) {
	.elc-utility-bar__inner {
		gap: 0.5rem;
		padding-inline: 1rem;
	}
}

/* Primary header. */
.elc-primary-header {
	background-color: var(--wp--preset--color--sky-10);
	/* border-bottom: 1px solid var(--wp--preset--color--gray); */
	/* position: sticky;
	top: 0;
	z-index: 100; */
}

.wp-block-site-logo.is-default-size img {
	height: auto;
	width: auto;
}

/*
.wp-block-site-logo img {
	height: auto;
	max-height: 60px;
	max-width: 100%;
	width: auto;
}
*/

.elc-header-logo {
	height: auto;
	max-height: 60px;
	max-width: 100%;
	width: auto;
}

.elc-primary-header__inner {
	min-height: 80px;
}

.elc-primary-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
}

.elc-primary-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--coral);
}

.elc-primary-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray);
}

.nav-button a {
	padding: 0.6875em 1em;
	font-size: 1rem;
}

/* Match the button hover state to the Gesso button hover state. */
.nav-button a:hover {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--charcoal) !important;
}

.nav-button a::after {
	border: 3px solid var(--es-color-main);
	border-width: 3px 3px 0 0;
}

/* Sub-navigation */
.wp-block-navigation .wp-block-navigation__submenu-container {
	gap: 0;
	margin: 0;
	min-width: 14rem;
	padding: 0;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item {
	margin: 0;
	width: 100%;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	display: block;
	padding: 0.625rem 1rem;
	width: 100%;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--sky-10);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.l-footer {
	/*background: transparent;*/
	background: var(--wp--preset--color--navy);
	margin-top: 5rem;
}

.l-footer__cta {
	background: var(--wp--preset--color--sky-10) !important;
	border-radius: 10px;
	box-shadow: 0 8px 35px -6px rgba(0, 0, 0, 0.1);
	outline: 1px solid var(--es-footer-border);
	outline-offset: 1px;
}

.l-footer__cta::before {
	background: var(--wp--preset--color--sky-10) !important;
}

.l-footer__cta h2 {
	border-right: 4px solid var(--wp--preset--color--lime);
}

/* --------------------------------------------------------------------------
   Colophon / copyright
   -------------------------------------------------------------------------- */
.l-footer__colophon p {
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.l-footer__cta .l-footer__arrow {
		transition: none;
	}
}

/* ==========================================================================
	 Header/Footer Responsive Styles
	 ========================================================================== */

@media (max-width: 781px) {
	.elc-utility-bar > .wp-block-group,
	.elc-primary-header > .wp-block-group,
	.elc-site-footer > .wp-block-columns,
	.elc-site-footer > .wp-block-group {
		padding-inline: 1rem;
	}

	.elc-primary-header__inner {
		min-height: 72px;
	}

	.elc-header-logo img {
		max-height: 44px;
		width: auto;
	}

	.elc-header-cta {
		display: none;
	}
}

/* ==========================================================================
	 Gesso Parent Theme Overrides
	 ========================================================================== */

.page:not(.home) .entry-content,
.archive-listing::before {
	background: linear-gradient(
			to bottom,
			var(--wp--preset--color--white) 0%,
			var(--wp--preset--color--sky-10) 100%
		)
		repeat-y;
}

.page-hero {
	column-gap: 3.125rem;
}

.page-hero,
.page-hero figure {
	margin-bottom: 0;
}

.page-hero--no-image {
	padding: 2.5rem 0 4rem;
}

@media (min-width: 768px) {
	.page-hero--no-image {
		padding: 3.5rem 0 6rem;
	}
}

.single-post {
	background: none;
}
.single-post__main::before {
	background: none;
}

.single-post .featured-image--with-caption::before {
	background: none;
}

/* ==========================================================================
	 ELC Group Block Styles
	 ========================================================================== */

/* Split content with a full-bleed image. */

.split-feature {
	grid-template-columns: 1fr 1fr;
}

.split-feature__content {
	justify-content: center;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline-start: max(
		var(--wp--preset--spacing--40),
		calc((100vw - var(--wp--style--global--wide-size)) / 2)
	);
	padding-inline-end: var(--wp--preset--spacing--60);
}

.split-feature__image {
	height: 100%;
	margin: 0;
}

.split-feature__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 781px) {
	.split-feature {
		grid-template-columns: 1fr;
	}

	.split-feature__content {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* Arrow Link */
.is-style-arrow-link a {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--coral);
}

.is-style-arrow-link a::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: 0.4em;
	background-color: currentColor;
	vertical-align: -0.05em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 2.5 14 8l-5.5 5.5-1.1-1.1 3.6-3.6H2V7.2h9L7.4 3.6z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 2.5 14 8l-5.5 5.5-1.1-1.1 3.6-3.6H2V7.2h9L7.4 3.6z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	transition: transform 0.2s ease;
}

.is-style-arrow-link a:hover,
.is-style-arrow-link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-style-arrow-link a:hover::after,
.is-style-arrow-link a:focus-visible::after {
	transform: translateX(0.2em);
}

/* Feature cards */

.feature-card {
	--feature-card-accent: var(--wp--preset--color--coral);
	background: var(--wp--preset--color--white);
	border-bottom: 3px solid var(--feature-card-accent);
	border-radius: 0.625rem;
	height: 100%;
}

.feature-card--lime {
	--feature-card-accent: var(--wp--preset--color--lime);
}

.feature-card--yellow {
	--feature-card-accent: var(--wp--preset--color--yellow);
}

.feature-card--coral {
	--feature-card-accent: var(--wp--preset--color--coral);
}

.feature-card--orange {
	--feature-card-accent: var(--wp--preset--color--orange);
}

.feature-card--navy {
	--feature-card-accent: var(--wp--preset--color--navy);
}

.feature-card--sky {
	--feature-card-accent: var(--wp--preset--color--sky);
}

/* Plain feature card with a full-width image. */
.feature-card--plain {
	background: var(--wp--preset--color--white);
	border-radius: 0.625rem;
	height: 100%;
	overflow: hidden;
}

.feature-card--plain > .wp-block-image {
	margin: 0;
}

.feature-card--plain > .wp-block-image img {
	display: block;
	width: 100%;
}

/* ==========================================================================
	 ELC Image Block Styles
	 ========================================================================== */
/* Image feature card */
.feature-card--image {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--orange);
	border-radius: 0.625rem;
	height: 100%;
	overflow: hidden;
}

/* Full-width card image */
.feature-card--image > .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.feature-card--image > .wp-block-image img {
	display: block;
	height: auto;
	transition: transform 0.3s ease;
	width: 100%;
}

/* Enlarge card images for pointer and keyboard interaction. */
.feature-card--image > .wp-block-image:hover img,
.feature-card--image:focus-within > .wp-block-image img {
	transform: scale(1.04);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.feature-card--image > .wp-block-image img {
		transition: none;
	}

	.feature-card--image > .wp-block-image:hover img,
	.feature-card--image:focus-within > .wp-block-image img {
		transform: none;
	}
}

/* ==========================================================================
	 ELC Paragraph Block Styles
	 ========================================================================== */

/* Eyebrow / Section Label
	 ---------------------------------------------------------- */

.is-style-elc-eyebrow {
	color: var(--wp--preset--color--orange);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

/* Checkmark List */
.is-style-checkmark-list {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-checkmark-list > li {
	position: relative;
	margin-block-end: 1rem;
	padding-inline-start: 2rem;
}

.is-style-checkmark-list > li:last-child {
	margin-block-end: 0;
}

.is-style-checkmark-list > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.25em;
	inset-inline-start: 0;
	width: 1.125em;
	height: 1.25em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--lime);
}

.is-style-checkmark-list > li::after {
	content: "";
	position: absolute;
	inset-block-start: 0.47em;
	inset-inline-start: 0.43em;
	width: 0.3em;
	height: 0.55em;
	border-bottom: 2px solid var(--wp--preset--color--white);
	border-right: 2px solid var(--wp--preset--color--white);
	transform: rotate(45deg);
}

/* ==========================================================================
	 ELC Layout Utilities
	 ========================================================================== */
.wp-block-group.is-style-section {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.wp-block-group.is-style-section-lime-10 {
	padding-block: clamp(3rem, 7vw, 5rem);
	background-color: var(--wp--preset--color--lime-10);
}

.wp-block-group.is-style-section-yellow-10 {
	padding-block: clamp(3rem, 7vw, 5rem);
	background-color: var(--wp--preset--color--yellow-10);
}

.elc-container {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	width: 100%;
}

/* ==========================================================================
	 Reduced Motion
	 ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.nav-button a {
		transition: none;
	}
}