/*
 * Ecom Heroes — component styles.
 * Everything reads theme.json tokens (--wp--preset--*). No hard-coded values.
 * Handles the motifs FSE/theme.json can't express: gold rule, cards,
 * ink bands, ticks, operator grid, accordion, focus states.
 *
 * Brand rules enforced here (see style guide):
 *   · Gold (#C6A15B) is an ACCENT — rules, borders, marks, and text on dark only.
 *     Gold text on Warm White is 2.3:1 and fails: light backgrounds use
 *     --wp--preset--color--accent-ink (deep gold, 6.1:1) instead.
 *   · Dusty Rose buttons take black/charcoal text, never white.
 *   · Balance: ~50% Warm White · 25% Black/Charcoal · 15% Soft Blush · 10% Gold.
 */

:root {
	--ehl-shadow-hover: 0 10px 30px rgba(13, 13, 13, 0.10);
	--ehl-transition: 160ms ease-out;
	--ehl-radius: 4px;
	--ehl-radius-lg: 8px;
}

/* ---------- Base niceties ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
:where(p, li) {
	max-width: 68ch;
}
.wp-block-heading,
.ehl-stat__num {
	font-variant-numeric: tabular-nums;
}

/* ---------- Accessibility: visible focus + skip link ---------- */
:where(a, button, input, select, textarea, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	border-radius: 3px;
}
.is-style-ink-band :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
	padding: 10px 16px; border-radius: var(--ehl-radius); text-decoration: none;
}

/* ---------- Eyebrow / label (Montserrat SemiBold, wide tracking) ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 0.9rem;
}
.is-style-ink-band .is-style-eyebrow { color: var(--wp--preset--color--accent); }

/* ---------- Gold rule under a heading (the brand signature) ---------- */
.is-style-gold-underline {
	position: relative;
	padding-bottom: 0.6rem;
}
.is-style-gold-underline::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 3rem; height: 2px;
	background: var(--wp--preset--color--accent);
}
.has-text-align-center.is-style-gold-underline::after { left: 50%; transform: translateX(-50%); }

/* ---------- Card ---------- */
.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ehl-radius-lg);
	padding: var(--wp--preset--spacing--50);
	transition: box-shadow var(--ehl-transition), transform var(--ehl-transition), border-color var(--ehl-transition);
}
.is-style-card:hover {
	box-shadow: var(--ehl-shadow-hover);
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent);
}
a.is-style-card, .is-style-card a { text-decoration: none; }

/* ---------- Ink band (dark section) ---------- */
.is-style-ink-band {
	background: var(--wp--preset--color--ink-band);
	color: var(--wp--preset--color--on-ink);
}
.is-style-ink-band :where(h1, h2, h3, h4, .wp-block-heading) { color: var(--wp--preset--color--on-ink); }
.is-style-ink-band :where(p) { color: var(--wp--preset--color--on-ink-muted); }
/* Links inherit the global ink colour, which is invisible on a black band. */
.is-style-ink-band :where(p, li) a:not(.wp-element-button) {
	color: var(--wp--preset--color--on-ink);
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}
.is-style-ink-band :where(p, li) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
}
.is-style-ink-band .is-style-gold-underline::after { background: var(--wp--preset--color--accent); }
.is-style-ink-band .wp-element-button,
.is-style-ink-band .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}
.is-style-ink-band .wp-element-button:hover,
.is-style-ink-band .wp-block-button__link:hover {
	background: var(--wp--preset--color--on-ink);
	color: var(--wp--preset--color--ink);
}
.is-style-ink-band .is-style-card {
	background: color-mix(in srgb, var(--wp--preset--color--on-ink) 6%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--on-ink) 16%, transparent);
}

/* ---------- Blush band (the feminine, warm counterweight to ink) ---------- */
.is-style-blush-band { background: var(--wp--preset--color--soft-blush); }
.is-style-beige-band { background: var(--wp--preset--color--warm-beige); }
.is-style-blush-band .is-style-eyebrow,
.is-style-beige-band .is-style-eyebrow { color: var(--wp--preset--color--charcoal); }
.is-style-blush-band .is-style-card,
.is-style-beige-band .is-style-card { border-color: rgba(13, 13, 13, 0.10); }

/* ---------- Secondary (outline) button ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
	border-color: var(--wp--preset--color--ink);
}
.is-style-ink-band .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--on-ink);
	border-color: var(--wp--preset--color--on-ink-muted);
	background: transparent;
}
.is-style-ink-band .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--on-ink);
	color: var(--wp--preset--color--ink);
}

/* ---------- Rose button (secondary accent — BLACK text, never white) ---------- */
.wp-block-button.is-style-rose .wp-block-button__link {
	background: var(--wp--preset--color--dusty-rose);
	color: var(--wp--preset--color--ink);
	border: 1px solid transparent;
}
.wp-block-button.is-style-rose .wp-block-button__link:hover {
	background: var(--wp--preset--color--soft-blush);
	color: var(--wp--preset--color--ink);
}

/* ---------- Ticks list (checklist) ---------- */
.is-style-ticks {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.is-style-ticks li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
	max-width: none;
}
.is-style-ticks li::before {
	content: "";
	position: absolute; left: 0; top: 0.35em;
	width: 1.1rem; height: 1.1rem;
	background: var(--wp--preset--color--accent-ink);
	-webkit-mask: no-repeat center / 0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
	mask: no-repeat center / 0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
	border-radius: 2px;
}
.is-style-ink-band .is-style-ticks li::before { background: var(--wp--preset--color--accent); }

/* ---------- Divided columns (thin rule between) ---------- */
@media (min-width: 782px) {
	.is-style-divide > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: var(--wp--preset--spacing--60);
	}
}

/* ---------- Stat ---------- */
.ehl-stat { text-align: center; }
.ehl-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.2vw, 2.85rem);
	line-height: 1.0;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.is-style-ink-band .ehl-stat__num { color: var(--wp--preset--color--on-ink); }
.ehl-stat__num em { color: var(--wp--preset--color--accent-ink); font-style: normal; }
.is-style-ink-band .ehl-stat__num em { color: var(--wp--preset--color--accent); }
.ehl-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
.is-style-ink-band .ehl-stat__label { color: var(--wp--preset--color--on-ink-muted); }

/* ---------- Operator card ---------- */
.ehl-operator { display: flex; flex-direction: column; }
/* WP's constrained layout puts `margin-inline: auto` on every child, which in a
   flex column centres them. Card contents are left-aligned. */
.ehl-operator > * {
	margin-inline: 0 !important;
	max-width: none;
	align-self: stretch;
}
.ehl-operator__tag { align-self: flex-start; }
.ehl-operator__photo img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: var(--ehl-radius-lg);
	margin-bottom: 0.9rem;
	/* One consistent grade so a grid of different photos reads as one League. */
	filter: grayscale(0.15) contrast(1.02);
}
/* Monogram placeholder — the uniform stand-in until real headshots land.
   Deliberately identical for every operator so the grid still reads as a set. */
.ehl-operator__monogram {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 0.9rem;
	border-radius: var(--ehl-radius-lg);
	background: var(--wp--preset--color--warm-beige);
	box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.06);
}
.ehl-operator__monogram span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}
.ehl-operator__company {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-2);
	max-width: none;
}
.ehl-operator__company a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--line-strong); }
.ehl-operator__company a:hover { color: var(--wp--preset--color--accent-ink); border-bottom-color: var(--wp--preset--color--accent); }
.ehl-operator__credential {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-muted);
	max-width: none;
}
.ehl-operator__link {
	margin: 0.9rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	max-width: none;
}
.ehl-operator__link a { color: var(--wp--preset--color--ink-muted); text-decoration: none; }
.ehl-operator__link a:hover { color: var(--wp--preset--color--accent-ink); }
/* Push the LinkedIn rule to the bottom so cards of unequal height still align. */
.ehl-operator .ehl-operator__link { margin-top: auto; }
.ehl-operator__tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}

/* ---------- Membership card (one tier, not a grid) ----------
   Anchored to the same left edge as the section heading, which WP's constrained
   layout would otherwise centre away from. */
.ehl-membership {
	max-width: 40rem;
	margin-left: max(0px, calc((100% - var(--col)) / 2)) !important;
	margin-right: auto !important;
}

/* ---------- Comparison table ---------- */
.ehl-compare table { border-collapse: collapse; width: 100%; }
.ehl-compare :where(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.9rem 1rem;
	text-align: left;
	vertical-align: top;
}
.ehl-compare thead th {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
.ehl-compare tbody td:last-child {
	background: var(--wp--preset--color--accent-soft);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* ---------- FAQ accordion (native details/summary, no JS) ---------- */
.ehl-faq details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.1rem 0;
}
.ehl-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.15rem;
	line-height: 1.25;
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.ehl-faq summary::-webkit-details-marker { display: none; }
.ehl-faq summary::after {
	content: "+"; font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem; color: var(--wp--preset--color--accent-ink); line-height: 1;
	transition: transform var(--ehl-transition);
}
.ehl-faq details[open] summary::after { transform: rotate(45deg); }
.ehl-faq details > :not(summary) { margin-top: 0.75rem; color: var(--wp--preset--color--ink-2); }

/* ---------- Header / nav ---------- */
.wp-block-template-part.site-header,
.ehl-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent);
	-webkit-backdrop-filter: saturate(1.1) blur(8px);
	backdrop-filter: saturate(1.1) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--accent-ink); }

/* ---------- Footer ---------- */
/* The root blockGap otherwise opens a 24px paper seam between the last dark
   section and the dark footer. Template parts sit flush. */
.wp-site-blocks > .wp-block-template-part { margin-block: 0; }
.ehl-footer a { color: var(--wp--preset--color--on-ink); text-decoration: none; }
.ehl-footer a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.ehl-footer ul { list-style: none; margin: 0; padding: 0; }
.ehl-footer li { padding-left: 0; margin-bottom: 0.45rem; max-width: none; }
.ehl-footer .is-style-ticks li::before { display: none; }
.ehl-footer li a { color: var(--wp--preset--color--on-ink-muted); }
.ehl-footer li a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Hero ---------- */
.ehl-hero .wp-block-heading { max-width: 16ch; }
.ehl-hero__sub { max-width: 60ch; }
/* Width-capped children (heading/intro) are centered by WP's constrained layout, which
   misaligns them from the full-width grid below. Re-anchor their left edge to the same
   centered 1120 column the full-width children sit in, using a self-computing left margin.
   --col matches the section contentSize (1120). */
:root { --col: 1120px; }
.ehl-hero > .wp-block-heading,
.ehl-hero__sub,
.ehl-section:not(.is-style-ink-band) > .wp-block-heading,
.ehl-section:not(.is-style-ink-band) > p {
	margin-left: max(0px, calc((100% - var(--col)) / 2)) !important;
	margin-right: auto !important;
}

/* ---------- Section rhythm helper ---------- */
.ehl-section { padding-block: var(--wp--preset--spacing--90); }
.ehl-section:not(.is-style-ink-band) > .wp-block-heading { max-width: 26ch; }
.ehl-section:not(.is-style-ink-band) > p:not(.has-text-align-center) { max-width: 72ch; }

/* ---------- Blog: readable article ---------- */
.ehl-prose :where(h2, h3) { margin-top: 2em; }
.ehl-post-card { text-decoration: none; }

/* ---------- Screen-reader-only text ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Motion: respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}