/* ElektroSupport: the few things theme.json can't express. */

:root {
	--es-signal: var(--wp--preset--color--signal, #ffc21a);
	--es-ink: var(--wp--preset--color--ink, #16191d);
	--es-line: var(--wp--preset--color--line, #e3e0d9);
	--es-signal-text: var(--wp--preset--color--signal-text, #8a5c00);
	--es-header-h: 76px;
}

/* Sections sit flush: no gap between header, main and footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Sticky header */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
body.admin-bar header.wp-block-template-part {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}
.es-header {
	border-bottom: 1px solid var(--es-line);
}
[id] {
	scroll-margin-top: calc(var(--es-header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Logo */
.es-logo img {
	display: block;
	height: auto;
}
@media (max-width: 480px) {
	.es-logo img {
		width: 160px !important;
	}
	.es-header-call .wp-block-button__link {
		padding: 10px 16px;
		font-size: 15px;
	}
}

/* Eyebrow label above a heading */
.es-label {
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--es-signal-text);
}
.has-ink-background-color .es-label,
.has-ink-soft-background-color .es-label {
	color: var(--es-signal);
}

/* Service number in a card */
.es-num {
	font-size: 14px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--es-signal-text);
}

/* Slanted marker at the bolt's angle */
.es-tick::before,
.es-checks > li::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--es-signal);
	transform: skewX(-31deg);
}
.es-tick {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}
.es-checks {
	list-style: none;
	padding-left: 0;
}
.es-checks > li {
	position: relative;
	padding-left: 30px;
	margin-block: 10px;
}
.es-checks > li::before {
	position: absolute;
	left: 4px;
	top: 0.6em;
}

/* Plain link lists (footer) */
.es-plain {
	list-style: none;
	padding-left: 0;
}
.es-plain > li {
	margin-block: 6px;
}
.es-plain a {
	text-decoration: none;
}
.es-plain a:hover {
	text-decoration: underline;
}

/* Value columns with a yellow top rule */
.es-value {
	border-top: 4px solid var(--es-signal);
	padding-top: 24px;
}

/* "Learn more" link */
.es-more a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--es-signal);
	padding-bottom: 2px;
}
.es-more a:hover {
	border-bottom-color: currentColor;
}

/* Cards fill their grid cell */
.es-card {
	height: 100%;
	box-sizing: border-box;
}

/* Hero mark */
.es-hero-mark img {
	width: 100% !important;
	max-width: 380px;
	height: auto;
	margin-inline: auto;
	display: block;
}
@media (max-width: 781px) {
	.es-hero-mark {
		display: none;
	}
}

/* Page body spacing (page.html, single.html) */
.es-page-content {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* Phones: call button sits left of the menu icon */
@media (max-width: 599px) {
	.es-header-call {
		order: -1;
	}
}

/* Big phone number */
.es-phone a {
	text-decoration: none;
	white-space: nowrap;
}
.es-phone a:hover {
	text-decoration: underline;
}

/* Outline buttons: hover fills with signal yellow */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--es-signal);
	border-color: var(--es-signal);
	color: var(--es-ink);
}

/* Ink button (on yellow) */
.wp-block-button__link.has-ink-background-color:hover {
	background-color: #000 !important;
}

/* Keyboard focus */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--es-ink);
	outline-offset: 2px;
}
:where(.has-ink-background-color, .has-ink-soft-background-color) :where(a, button, .wp-element-button):focus-visible {
	outline-color: var(--es-signal);
}

/* Navigation overlay on phones */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 20px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: 17px;
	font-weight: 500;
}