/* Electrician Squad theme — additions only. Colors/type-scale/spacing/buttons,
   and the header/footer nav, all come from the plugin's assets/css/site.css
   (enqueued as a dependency in functions.php) — that stylesheet is shared with
   the plugin's own shell.php so header/footer render identically everywhere.
   Only what's unique to themed content pages (not plugin virtual pages)
   belongs here. */

/* ── Post meta (non-plugin pages) ─────────────────────────────────────────── */

.es-post__date { color: var(--es-color-text-muted); font-size: var(--es-text-small); margin-top: -0.5em; }

/* ── Contact page: 3-up CTA grid — admin-authored HTML pasted into a page's
   content (e.g. Contact Us). Equal width via flex-basis 0 (not just a
   min-width) and equal height via the container's default align-items:
   stretch, so all three cards match regardless of how much text is in each. */

.es-contact-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--es-space-gap-lg);
	margin: var(--es-space-gap-lg) 0;
}
.es-contact-card {
	flex: 1 1 0;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--es-color-bg);
	border: 1px solid var(--es-color-border);
	border-radius: var(--es-radius-card);
	padding: var(--es-space-gap-lg);
	text-align: center;
}
.es-contact-card > *:first-child { margin-top: 0; }
.es-contact-card h3 { margin-bottom: 0.5em; }
.es-contact-card p { margin-bottom: var(--es-space-gap-md); }
.es-contact-card .es-btn { margin-top: auto; }

/* ── Eyebrow label (small caps kicker above a section heading) ───────────── */

.es-eyebrow {
	color: var(--es-color-primary);
	font-weight: 800;
	font-size: var(--es-text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.5em;
}

/* ── Services split: two cards, both pointing at /our-services/#anchor ──────
   Uses the same dark/light "Card" pattern from the design system (README's
   Card (dark)/(light) tokens) — no new colors, just existing --es-color-*. */

.es-services-split { background: var(--es-color-bg); }
.es-services-split__header {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto var(--es-space-gap-lg);
}
.es-services-split__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--es-space-gap-lg);
}
.es-service-card {
	flex: 1 1 320px;
	border-radius: var(--es-radius-card);
	padding: var(--es-space-gap-lg);
}
.es-service-card--dark { background: var(--es-color-secondary); }
.es-service-card--dark h3 { color: var(--es-color-white); }
.es-service-card--dark p { color: var(--es-color-text-muted-dark); }
.es-service-card--dark .es-service-card__link { color: var(--es-color-primary); }
.es-service-card--light { background: var(--es-color-surface-alt); }
.es-service-card--light .es-service-card__link { color: var(--es-color-secondary); }
.es-service-card__link {
	display: inline-flex;
	font-weight: 700;
	margin-top: var(--es-space-gap-sm);
	text-decoration: none;
	/* Underline drawn as a background line (not text-decoration) so its width
	   can transition smoothly — a collapsing-to-nothing wipe on hover. */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 0.2em;
	transition: background-size 0.25s ease;
}
.es-service-card__link:hover { background-size: 0% 1px; }

/* ── Reviews slider — 8 hardcoded testimonials, 2-up on desktop. Draggable
   (native scrollLeft, same pointer-drag technique as the plugin's marquee)
   plus prev/next arrows that wrap around at either end for an "infinite"
   feel. JS in assets/js/reviews-slider.js, enqueued on the front page only. */

.es-reviews { background: var(--es-color-white); overflow: hidden; }
.es-reviews__slider {
	display: flex;
	align-items: center;
	gap: var(--es-space-gap-sm);
	max-width: 60rem;
	margin: 0 auto;
}
.es-reviews__track {
	display: flex;
	flex: 1;
	gap: var(--es-space-gap-lg);
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}
.es-reviews__track::-webkit-scrollbar { display: none; }
.es-reviews__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.es-review-card {
	/* Overrides site.css's `li + li { margin-top: 0.5em }` (meant for vertical
	   list stacking) — in this horizontal flex track it was shrinking every
	   card but the first by 0.5em, breaking the equal-height stretch. */
	margin: 0;
	scroll-snap-align: start;
	flex: 0 0 calc(50% - var(--es-space-gap-lg) / 2);
	background: var(--es-color-bg);
	border: 1px solid var(--es-color-border);
	border-radius: var(--es-radius-card);
	padding: var(--es-space-gap-md);
}
.es-review-card__stars {
	color: var(--es-color-primary);
	letter-spacing: 0.15em;
	font-size: var(--es-text-small);
	margin-bottom: var(--es-space-gap-sm);
}
.es-review-card__author {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: var(--es-space-gap-sm);
}
.es-review-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.es-review-card__name {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: var(--es-text-small);
	color: var(--es-color-secondary);
}
.es-review-card__location {
	display: block;
	font-size: var(--es-text-small);
	color: var(--es-color-text-muted);
}
.es-review-card blockquote {
	margin: 0;
	color: var(--es-color-text-muted);
	font-size: var(--es-text-body);
	line-height: 1.7;
}

.es-reviews__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--es-color-border);
	background: var(--es-color-white);
	color: var(--es-color-secondary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.es-reviews__arrow:hover { border-color: var(--es-color-primary); color: var(--es-color-primary-hover); }

/* Mobile: one card per view (with a slight peek of the next) and no arrows —
   same 760px exception as the header burger, native touch-scroll drag suffices. */
@media (max-width: 760px) {
	.es-review-card { flex-basis: 85%; }
	.es-reviews__arrow { display: none; }
}