/* ==========================================================================
   Essly site chrome: custom header/footer layout (header.php, footer.php)
   and the header live search field. Global, loaded on every page.
   Design tokens follow the approved mock-up and the prototype palette.
   ========================================================================== */

/* Design tokens ----------------------------------------------------------- */

.essly-site-header {
	--ech-bg: #ffffff;
	--ech-card: #ffffff;
	--ech-border: #e2e8f0;
	--ech-text: #0f172a;
	--ech-muted: #64748b;
	--ech-faint: #94a3b8;
	--ech-soft: #f1f5f9;
	--ech-accent: #4f46e5;
	--ech-accent-text: #4338ca;
	--ech-radius-pill: 999px;

	/* Same token names as the prototype search styles use. */
	--eti-card: var( --ech-card );
	--eti-border: var( --ech-border );
	--eti-text: var( --ech-text );
	--eti-muted: var( --ech-muted );
	--eti-faint: var( --ech-faint );
	--eti-soft: var( --ech-soft );
	--eti-accent: var( --ech-accent );
	--eti-accent-text: var( --ech-accent-text );
	--eti-shadow-sm: 0 1px 2px rgba( 15, 23, 42, .04 );
	--eti-shadow: 0 12px 25px -5px rgba( 15, 23, 42, .08 ), 0 8px 10px -6px rgba( 15, 23, 42, .04 );
	position: relative;
	z-index: 50;
	background: var( --ech-bg );
	border-bottom: 1px solid var( --ech-border );
}

.essly-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: min( 1240px, calc( 100% - 2rem ) );
	margin: 0 auto;
	padding: .85rem 0;
}

/* Logo -------------------------------------------------------------------- */

.essly-logo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: inherit;
	text-decoration: none;
}

.essly-logo__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient( 135deg, #6366f1, #4f46e5 );
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
}

.essly-logo__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.essly-logo__name {
	color: var( --ech-text );
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
}

.essly-logo__tag {
	color: var( --ech-faint );
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Pill navigation --------------------------------------------------------- */

.essly-nav {
	margin: 0 auto;
}

.essly-nav__list {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-nav__list .menu-item {
	margin: 0;
	padding: 0;
}

.essly-nav__list .sub-menu {
	position: absolute;
	z-index: 60;
	display: none;
	min-width: 200px;
	margin: 0;
	padding: .4rem;
	background: var( --ech-card );
	border: 1px solid var( --ech-border );
	border-radius: 14px;
	box-shadow: var( --eti-shadow );
	list-style: none;
}

.essly-nav__list li {
	position: relative;
}

.essly-nav__list li:hover > .sub-menu,
.essly-nav__list li:focus-within > .sub-menu {
	display: block;
}

.essly-nav__list a {
	display: block;
	padding: .55rem 1rem;
	border-radius: var( --ech-radius-pill );
	color: #334155;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}

.essly-nav__list .sub-menu a {
	padding: .5rem .75rem;
	border-radius: 10px;
	font-size: .875rem;
	white-space: normal;
}

.essly-nav__list a:hover,
.essly-nav__list a:focus,
.essly-nav__list .current-menu-item > a,
.essly-nav__list .current_page_item > a {
	background: var( --ech-soft );
	color: var( --ech-text );
}

/* Header search ----------------------------------------------------------- */

.essly-site-header__search {
	position: relative;
	flex: none;
	width: min( 390px, 32vw );
	margin-left: auto;
}

/* Header live search (moved from the prototype toolbar) -------------------- */

.essly-test-search {
	position: relative;
	width: 100%;
}

.essly-test-search__icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY( -50% );
	display: inline-flex;
	font-size: 1rem;
	color: var( --eti-faint );
	pointer-events: none;
}

/* The parent theme styles `input[type="search"]` with an attribute selector,
   which is more specific than a single class. The field rules are scoped to
   the wrapper so they win the cascade. */
.essly-test-search input.essly-test-search__input {
	display: block;
	width: 100%;
	margin: 0;
	padding: .7rem 2.75rem .7rem 2.6rem;
	background: var( --ech-soft );
	border: 1px solid var( --ech-border );
	border-radius: var( --ech-radius-pill );
	color: var( --ech-text );
	font-size: .875rem;
	line-height: 1.4;
	transition: border-color .2s, box-shadow .2s;
	-moz-appearance: none;
	appearance: none;
}

.essly-test-search input.essly-test-search__input::placeholder {
	color: var( --ech-faint );
	opacity: 1;
}

.essly-test-search input.essly-test-search__input:focus {
	outline: none;
	background: var( --ech-soft );
	border-color: #818cf8;
	color: var( --ech-text );
	box-shadow: 0 0 0 4px rgba( 79, 70, 229, .12 );
}

.essly-test-search input.essly-test-search__input::-webkit-search-cancel-button {
	display: none;
}

.essly-test-search__clear {
	position: absolute;
	top: 50%;
	right: .9rem;
	transform: translateY( -50% );
	display: inline-flex;
	padding: .15rem;
	background: none;
	border: 0;
	color: var( --eti-faint );
	cursor: pointer;
}

.essly-test-search__clear:hover {
	color: var( --eti-text );
}

.essly-test-search__panel {
	position: absolute;
	z-index: 60;
	top: calc( 100% + .5rem );
	right: 0;
	left: 0;
	max-height: 24rem;
	overflow-y: auto;
	padding: .5rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 18px;
	box-shadow: var( --eti-shadow );
}

.essly-test-search__status {
	margin: 0;
	padding: .5rem .75rem;
	color: var( --eti-muted );
	font-size: .75rem;
}

.essly-test-search__results {
	display: flex;
	flex-direction: column;
}

.essly-test-search__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .6rem .75rem;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}

.essly-test-search__item:hover,
.essly-test-search__item:focus {
	background: var( --eti-soft );
}

.essly-test-search__item-title {
	color: var( --eti-text );
	font-size: .8125rem;
	font-weight: 700;
}

.essly-test-search__item-meta {
	color: var( --eti-faint );
	font-size: .6875rem;
}

.essly-test-search__more {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem .75rem;
	color: var( --eti-accent-text );
	font-size: .75rem;
	font-weight: 700;
	text-decoration: none;
}

/* Page frame -------------------------------------------------------------- */

/* The parent theme reserves 121px under the body, which leaves an empty band
   below the footer. The custom chrome renders no fixed bottom element, so the
   reservation is dropped and the footer sits at the very bottom. */
body {
	margin-bottom: 0;
}

/* Sticky footer: on short pages the footer is pushed to the bottom of the
   viewport instead of floating in the middle of the screen. */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content {
	flex: 1 0 auto;
}

/* Keep the sticky footer correct while the admin bar shifts the page down. */
body.admin-bar #page {
	min-height: calc( 100vh - 32px );
}

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

.essly-site-footer {
	background: var( --ech-bg, #ffffff );
	border-top: 1px solid var( --ech-border, #e2e8f0 );
}

.essly-site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min( 1240px, calc( 100% - 2rem ) );
	margin: 0 auto;
	padding: 2.25rem 0;
}

.essly-footer-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
}

.essly-footer-brand__text {
	color: var( --ech-text, #0f172a );
	font-size: .9375rem;
	font-weight: 700;
}

.essly-footer-brand__name {
	font-weight: 800;
}

.essly-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-footer-nav__list li {
	margin: 0;
	padding: 0;
}

.essly-footer-nav__list a {
	color: var( --ech-muted, #64748b );
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s;
}

.essly-footer-nav__list a:hover,
.essly-footer-nav__list a:focus {
	color: var( --ech-accent-text, #4338ca );
}

.essly-footer-social {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.essly-social__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --ech-soft, #f1f5f9 );
	color: #334155;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.essly-social__item:hover,
.essly-social__item:focus {
	background: var( --ech-accent, #4f46e5 );
	color: #fff;
}

.essly-social__item.is-disabled {
	cursor: default;
}

.essly-social__icon {
	width: 18px;
	height: 18px;
}

/* Responsive -------------------------------------------------------------- */

@media ( max-width: 1199px ) {
	.essly-site-header__search {
		width: min( 320px, 34vw );
	}
}

@media ( max-width: 991px ) {
	.essly-site-header__inner {
		gap: .9rem;
	}

	.essly-nav__list a {
		padding: .5rem .7rem;
		font-size: .875rem;
	}

	.essly-site-footer__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.25rem 2rem;
		text-align: center;
	}
}

@media ( max-width: 767px ) {
	.essly-site-header__inner {
		flex-wrap: wrap;
		gap: .75rem;
		padding: .7rem 0;
	}

	.essly-logo__badge {
		width: 36px;
		height: 36px;
		font-size: .95rem;
	}

	.essly-logo__name {
		font-size: 1rem;
	}

	.essly-site-header__search {
		order: 2;
		width: auto;
		flex: 1;
		margin-left: 0;
	}

	.essly-nav {
		order: 3;
		width: 100%;
		margin: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.essly-nav::-webkit-scrollbar {
		display: none;
	}

	.essly-nav__list {
		flex-wrap: nowrap;
		width: max-content;
		padding-bottom: .15rem;
	}

	.essly-site-footer__inner {
		flex-direction: column;
		gap: 1.25rem;
		padding: 2rem 0;
	}

	.essly-footer-nav__list {
		justify-content: center;
		gap: .25rem 1.25rem;
	}
}