/* ============================================================================
   EUX Blocks — Shared utility classes
   ----------------------------------------------------------------------------
   Used across multiple blocks. All selectors require an .eux-block ancestor
   so we beat Salient's specificity without resorting to !important.
   ============================================================================ */

.eux-block,
.eux-block *,
.eux-block *::before,
.eux-block *::after {
	box-sizing: border-box;
}

.eux-block {
	font-family: var(--eux-font-body);
	color: var(--eux-black);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Override Salient's broad element styles within EUX blocks. */
.eux-block :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--eux-font-display);
	font-weight: 400;
	color: var(--eux-black);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}
.eux-block :where(p) {
	font-family: var(--eux-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	text-wrap: pretty;
}
.eux-block :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.eux-block :where(img) { max-width: 100%; display: block; }
.eux-block :where(button) { font-family: inherit; }

/* ==========================================================================
   Responsive body-text bump (v0.36.46, hardened v0.36.47/48, sized v0.36.49)
   --------------------------------------------------------------------------
   On viewports of 1080px and wider (the threshold where sections that have
   side-by-side layouts split into two columns and where lede measures
   stop being narrow), body copy across all the section blocks lifts from
   its various base sizes (13-15px depending on the block) to a uniform
   16px. Below 1080px the per-block base sizes stay — they read better at
   narrower measure on tablets and phones.

   Note on eyebrows: the global `:where(p) { font-size: 16px !important }`
   rule below catches `<p class="eux-eyebrow">` markup (which is how all
   the section eyebrows are authored — see e.g. blocks/bento-box/editor.js
   line ~62 where the eyebrow is a core/paragraph with className
   "eux-eyebrow"). !important beats the eyebrow's own 12px declaration
   regardless of specificity, so eyebrows render at 16px on laptops+.
   That's intentional as of v0.36.49 — Adrian wanted eyebrows and body
   copy harmonised at one size on larger viewports rather than the
   eyebrows being noticeably smaller. Below 1080px eyebrows fall back to
   their natural 12px via the `.eux-block .eux-eyebrow` rule further
   down in this file.

   Earlier history: v0.36.46 shipped this rule without !important and it
   silently lost the tie-on-specificity to per-block rules declared later
   in the cascade (shared.css loads BEFORE each block's style.css because
   block.json's `"style": [ "eux-shared", "file:./style.css" ]` declares
   shared.css as a dependency). v0.36.47 added !important. v0.36.48
   added <li> descendant selectors because the per-block `<li>` rules
   beat <ul>-rule inheritance. v0.36.49 dropped the size from 18px to
   16px after the 18px proved too heavy in production.

   ---- Why !important is justified here ------------------------------------
   Both my rule and each per-block rule have identical specificity (0,2,0).
   WordPress loads shared.css BEFORE each block's style.css (block.json's
   `"style": [ "eux-shared", "file:./style.css" ]` makes shared.css a
   dependency), so the per-block rule is declared LATER in the cascade.
   When specificity ties, declaration order wins — and the later per-block
   16px would beat the earlier shared.css 18px every time.

   Options considered:
     1. Bump specificity to 0,3,0 with `.eux-block.eux-block--xxx` doubled
        compound classes. Works but introduces a non-obvious specificity
        trick that future maintainers will read twice.
     2. Move the media query into each block's style.css. Works but
        scatters the same responsive typography rule across 9 files,
        defeating the single-source-of-truth goal.
     3. !important. Confined to one media query, one section, well
        documented. This is exactly the use case salient-coexistence.md
        calls out: an override that needs to beat tie-on-specificity
        declarations from a later-loaded stylesheet.

   Option 3 chosen. The salient-coexistence playbook ("Don't fight inline
   styles" / Defence 1) explicitly allows !important when the conflict is
   over a tie-on-specificity rule declared later, which is exactly this
   case.

   ---- Three groups of selectors below -------------------------------------
     1. Global :where(p) — catches paragraphs in any block that don't
        have a dedicated per-block paragraph rule. :where() gives 0
        specificity, so any element-specific override (eyebrows, captions,
        small UI text) still wins. !important is still safe here because
        eyebrows etc. use explicit font-size in their own rules and
        !important does not promote :where(p) over a more specific rule
        also marked !important — and no per-block rule does that.
     2. Per-block compound selectors — explicitly override the per-block
        font-size rules.
     3. Salient-defensive list forms — `ul.X.wp-block-list` variants for
        the list selectors that have Salient list resets to beat.

   Eyebrows stay safe: `.eux-block .eux-eyebrow` is 0,2,0 with explicit
   font-size:12px. None of my per-block rules target the eyebrow class,
   so eyebrows never enter this rule's selector set.

   service-hero is handled separately in its own block CSS (added in
   v0.36.45 with the additional `:not(.eux-eyebrow)` exclusion needed
   because hero paragraphs use core/paragraph markup that could carry
   the eyebrow class). The two rules produce the same outcome; keeping
   them separate so each file describes its own typography.

   To add new selectors here later, just append them to the comma list.
   ========================================================================== */
@media (min-width: 1080px) {
	/* Global — any unstyled <p> inside any eux-block. */
	.eux-block :where(p) {
		font-size: 16px !important;
	}

	/* Per-block ledes, sub-copy, list items, and faq text.

	   Lists need <li> descendant selectors as well as the <ul> selectors,
	   because each block's existing rule targets the <li> child directly
	   (e.g. `.eux-block--bento-box .eux-bento-card__list li`). A rule on
	   the parent <ul> inherits, but a more-specific rule on the <li>
	   beats inheritance every time. !important on my 0,2,1 selectors
	   still wins against problem-trio's 0,3,1 theme-variant li rules
	   because !important beats non-!important regardless of specificity.
	   This was the v0.36.48 fix — v0.36.47 only listed the <ul>
	   selectors and lists kept rendering at their base 13/13.5px. */
	.eux-block--problem-trio .eux-problem-section__sub,
	.eux-block--problem-trio .eux-problem-card__list,
	.eux-block--problem-trio .eux-problem-card__list li,
	.eux-block--problem-trio ul.eux-problem-card__list.wp-block-list,
	.eux-block--problem-trio ul.eux-problem-card__list.wp-block-list li,
	.eux-block--split-feature .eux-split__lede,
	.eux-block--split-feature p.eux-split__lede,
	.eux-block--split-feature .eux-split__tiles,
	.eux-block--split-feature .eux-split__tiles > li,
	.eux-block--split-feature ul.eux-split__tiles.wp-block-list,
	.eux-block--split-feature ul.eux-split__tiles.wp-block-list > li,
	.eux-block--bento-box .eux-bento-section__sub,
	.eux-block--bento-box .eux-bento-card__list,
	.eux-block--bento-box .eux-bento-card__list li,
	.eux-block--bento-box ul.eux-bento-card__list.wp-block-list,
	.eux-block--bento-box ul.eux-bento-card__list.wp-block-list li,
	.eux-block--bento-box .eux-bento-card__inner > p,
	.eux-block--daas-themed .eux-daas-themed__left ul,
	.eux-block--daas-themed .eux-daas-themed__left ul li,
	.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list,
	.eux-block--daas-themed .eux-daas-themed__left ul.wp-block-list li,
	.eux-block--case-studies .eux-cs__sub,
	.eux-block--simple-cta .eux-simple-cta__sub,
	.eux-block--process .eux-process-section__sub,
	.eux-block--process .eux-process-step__body,
	.eux-block--pro-partner .eux-pro-partner__sub,
	.eux-block--pro-partner .eux-pro-row__body,
	.eux-block--big-cta .eux-big-cta__sub,
	.eux-block--faqs .eux-faqs__sub,
	.eux-block--faqs .eux-faq-item__q,
	.eux-block--faqs .eux-faq-item__ans {
		font-size: 16px !important;
	}
}

/* Salient adds underline border-bottom on links inside content areas. Reset. */
.eux-block a { text-decoration: none; border-bottom: 0; }
.eux-block a:hover { border-bottom: 0; }

/* ==========================================================================
   Container
   ========================================================================== */
.eux-block .eux-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}
@media (min-width: 768px) {
	.eux-block .eux-container { padding-inline: 48px; }
}
.eux-block .eux-container--wide { max-width: 1320px; }

/* ==========================================================================
   Section
   ========================================================================== */
.eux-block .eux-section { padding-block: 96px; }
.eux-block .eux-section--alt { background: var(--eux-white); }
.eux-block .eux-section--ink { background: var(--eux-black); color: var(--eux-cream); }
@media (max-width: 720px) {
	.eux-block .eux-section { padding-block: 64px; }
}

/* ==========================================================================
   v0.36.14 — SMALL-DESKTOP SCALE-DOWN
   --------------------------------------------------------------------------
   The base design is calibrated for 1920px-class displays. Section title
   clamps land at a 52px ceiling that kicks in at any viewport above ~1156px,
   meaning a 1280px laptop and a 1920px monitor render identical 52px
   headings — even though the laptop has 33% less horizontal real estate.
   Result: on Surface Laptop / MacBook Air 13" / HP/Dell business laptops at
   125-150% OS scaling (~1280-1599 logical CSS px), headings dominate the
   viewport and section padding feels generous.

   This isn't an edge case. Per StatCounter 2026, the 1280-1600 band is
   roughly 30% of desktop traffic (1366×768 ≈ 10.5%, 1536×864 ≈ 10.8%,
   1440×900 ≈ 4.1%, 1280×720 ≈ 5.4%). The 1920×1080 cohort the base scale
   targets is only 24%.

   Two staged breakpoints below ratchet the type and rhythm down in
   proportion. They're centralised here (not per-block) so the entire
   design system shifts together — no block-by-block tweaks, single
   rollback point.

   ## Stage 1 — 1600px small-desktop
   1400-1599 (Rupert's Surface Laptop at 150% lands at 1519px here).
   Headings down ~15%, hero down ~14%, section padding down ~25%.

   ## Stage 2 — 1280px tight-desktop
   1100-1399 (HP/Dell 1366×768, MacBook Air half-snapped on 27" panels).
   Stronger ratchet — headings down ~20% from base, padding down ~33%.

   ## Selectors
   We target every per-block title class our blocks emit. New title
   selectors should be added to this list when new blocks ship, otherwise
   they'll keep the desktop ceiling. Padding targets `.eux-block`
   directly so every section block scales without enumeration.
   ========================================================================== */

@media (max-width: 1599px) {
	/* Section padding: 96px → 72px (-25%).
	   Targets the `.eux-section` utility AND per-block sections that set
	   their own padding-block: 96px (most do for the silk-bg overlay). */
	.eux-block.eux-section,
	.eux-block .eux-section,
	.eux-block--bento-box,
	.eux-block--big-cta,
	.eux-block--capabilities,
	.eux-block--case-studies,
	.eux-block--daas-slack,
	.eux-block--daas-themed,
	.eux-block--daas,
	.eux-block--examples,
	.eux-block--faqs,
	.eux-block--good-fit-themed,
	.eux-block--good-fit,
	.eux-block--integration-cta-themed,
	.eux-block--integration-cta,
	.eux-block--pro-partner,
	.eux-block--problem-trio,
	.eux-block--process,
	.eux-block--simple-cta,
	.eux-block--split-feature,
	.eux-block--stats {
		padding-block: 72px;
	}

	/* Section title clamps — pull down ~15%.
	   Selector pattern matches each block's own title rule (e.g.
	   `.eux-block--problem-trio .eux-problem-section__title`) so the
	   cascade order works in our favour — shared.css loads BEFORE per-
	   block CSS, but our `@media` query wraps the rule, and within a
	   given specificity the later rule wins. Equal specificity to the
	   source rules means we'd lose if these rules sat outside `@media`,
	   but inside a media query they still lose. The reliable fix is to
	   bump specificity one notch by using the compound `.eux-block.eux-
	   block--<name>` selector — which is just `.eux-block--<name>` with
	   an extra `.eux-block` qualifier on the same element (every block
	   has both classes), giving us (0,3,0) vs source's (0,2,0). */
	.eux-block.eux-block--bento-box .eux-bento-section__title,
	.eux-block.eux-block--big-cta .eux-big-cta__title,
	.eux-block.eux-block--capabilities .eux-cap-section__title,
	.eux-block.eux-block--case-studies .eux-cs__title,
	.eux-block.eux-block--daas-slack .eux-slack__title,
	.eux-block.eux-block--daas-themed .eux-daas-themed__title,
	.eux-block.eux-block--daas .eux-daas__title,
	.eux-block.eux-block--examples .eux-cap-section__title,
	.eux-block.eux-block--faqs .eux-faqs__title,
	.eux-block.eux-block--good-fit-themed .eux-good-fit__title,
	.eux-block.eux-block--good-fit .eux-fit__title,
	.eux-block.eux-block--pro-partner .eux-pro-partner__title,
	.eux-block.eux-block--problem-trio .eux-problem-section__title,
	.eux-block.eux-block--process .eux-process-section__title,
	.eux-block.eux-block--process-tabbed .eux-process-tabbed__title,
	.eux-block.eux-block--simple-cta .eux-simple-cta__title,
	.eux-block.eux-block--split-feature .eux-split__title,
	.eux-block.eux-block--stats .eux-stats__title {
		font-size: clamp(32px, 4vw, 44px);
	}

	/* Hero title — bigger to begin with, scale proportionally. */
	.eux-block.eux-block--service-hero .eux-hero__title {
		font-size: clamp(36px, 4.6vw, 48px);
	}

	/* Big CTA — pull-quote sized, sits between hero and section title. */
	.eux-block.eux-block--big-cta .eux-big-cta__title {
		font-size: clamp(36px, 4.4vw, 54px);
	}

	/* Integration CTA — same family as Big CTA. */
	.eux-block.eux-block--integration-cta .eux-icta__title,
	.eux-block.eux-block--integration-cta-themed .eux-icta-themed__title {
		font-size: clamp(32px, 4.6vw, 54px);
	}
}

@media (max-width: 1399px) {
	/* Stronger ratchet for the genuinely cramped 1100-1399 range —
	   1366×768 and 1280×720 laptops, half-snapped windows on 27" panels. */
	.eux-block.eux-section,
	.eux-block .eux-section,
	.eux-block--bento-box,
	.eux-block--big-cta,
	.eux-block--capabilities,
	.eux-block--case-studies,
	.eux-block--daas-slack,
	.eux-block--daas-themed,
	.eux-block--daas,
	.eux-block--examples,
	.eux-block--faqs,
	.eux-block--good-fit-themed,
	.eux-block--good-fit,
	.eux-block--integration-cta-themed,
	.eux-block--integration-cta,
	.eux-block--pro-partner,
	.eux-block--problem-trio,
	.eux-block--process,
	.eux-block--simple-cta,
	.eux-block--split-feature,
	.eux-block--stats {
		padding-block: 64px;
	}

	.eux-block.eux-block--bento-box .eux-bento-section__title,
	.eux-block.eux-block--big-cta .eux-big-cta__title,
	.eux-block.eux-block--capabilities .eux-cap-section__title,
	.eux-block.eux-block--case-studies .eux-cs__title,
	.eux-block.eux-block--daas-slack .eux-slack__title,
	.eux-block.eux-block--daas-themed .eux-daas-themed__title,
	.eux-block.eux-block--daas .eux-daas__title,
	.eux-block.eux-block--examples .eux-cap-section__title,
	.eux-block.eux-block--faqs .eux-faqs__title,
	.eux-block.eux-block--good-fit-themed .eux-good-fit__title,
	.eux-block.eux-block--good-fit .eux-fit__title,
	.eux-block.eux-block--pro-partner .eux-pro-partner__title,
	.eux-block.eux-block--problem-trio .eux-problem-section__title,
	.eux-block.eux-block--process .eux-process-section__title,
	.eux-block.eux-block--process-tabbed .eux-process-tabbed__title,
	.eux-block.eux-block--simple-cta .eux-simple-cta__title,
	.eux-block.eux-block--split-feature .eux-split__title,
	.eux-block.eux-block--stats .eux-stats__title {
		font-size: clamp(28px, 4vw, 40px);
	}

	.eux-block.eux-block--service-hero .eux-hero__title {
		font-size: clamp(32px, 4.6vw, 42px);
	}

	.eux-block.eux-block--big-cta .eux-big-cta__title {
		font-size: clamp(32px, 4.4vw, 46px);
	}

	.eux-block.eux-block--integration-cta .eux-icta__title,
	.eux-block.eux-block--integration-cta-themed .eux-icta-themed__title {
		font-size: clamp(28px, 4.6vw, 46px);
	}
}


/* ==========================================================================
   Eyebrow
   --------------------------------------------------------------------------
   v0.36.13 — Default-includes the 28×1px purple dash bar. Previously,
   each section block had to define its own `::before` rule to render the
   dash; blocks that DIDN'T define it (case-studies, faqs) inherited just
   the text styling from here and never showed a dash on light/cream
   themes — only the `--dark` variants worked because those WERE defined
   per-block. Centralising the base dash here means every `.eux-eyebrow`
   gets one for free; per-block CSS only needs to add a `--dark` override
   to swap the colour to woo-200 against an ink-black background.
   ========================================================================== */
.eux-block .eux-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eux-woo-purple);
	margin-bottom: 18px;
}
.eux-block .eux-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
	flex: 0 0 28px;
}

/* ==========================================================================
   Accent — applied via the eux/accent RichText format
   --------------------------------------------------------------------------
   Editors highlight text in a heading or paragraph and click the Accent
   button in the formatting toolbar to wrap it in <span class="eux-accent">.

   Selector note:
   On the front-end, the hero's wrapper has BOTH .eux-block and
   .eux-hero--dark on the same element. So we use the compound selector
   (no space) `.eux-block.eux-hero--dark .eux-accent` — a descendant
   selector with a space wouldn't match because there's no nested
   .eux-hero--dark inside .eux-block. We also include the descendant
   form for cases where someone manually nests a dark hero inside
   another EUX block.
   ========================================================================== */
.eux-block .eux-accent {
	color: var(--eux-woo-purple);
	font-style: italic;
	font-weight: 300;
}
.eux-block.eux-hero--dark .eux-accent,
.eux-block .eux-hero--dark .eux-accent {
	color: var(--eux-woo-200);
}

/* ==========================================================================
   Custom block styles for core/button
   --------------------------------------------------------------------------
   Registered via register_block_style() in PHP. CSS targets the standard
   core/button output (.wp-block-button > .wp-block-button__link) and is
   scoped to .eux-block so these styles do nothing outside an EUX block.
   ========================================================================== */
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link,
.eux-block .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 30px;
	border-radius: var(--eux-r-pill);
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--eux-dur-fast) var(--eux-ease-out),
	            color var(--eux-dur-fast) var(--eux-ease-out),
	            border-color var(--eux-dur-fast) var(--eux-ease-out),
	            box-shadow var(--eux-dur-fast) var(--eux-ease-out);
}

/* ==========================================================================
   Hero buttons — block styles registered as `is-style-eux-hero-cream`
   (primary / filled) and `is-style-eux-hero-ghost` (outline).
   --------------------------------------------------------------------------
   v0.36.27 design intent:

   PRIMARY uses the accent colour as background on every hero theme. That
   means the WP accent (--eux-woo-purple remapped to #21759B in
   tokens.css) lands as a blue button on a WordPress-themed page, while
   the default Woo accent stays purple. This is the most visible signal of
   the accent setting in the hero — Adrian explicitly asked for the
   buttons to swap colour with the accent. v0.36.26 had the primary
   sitting cream-on-dark / ink-on-light at rest and only showing the
   accent on hover; that read as "buttons not swapping" to editors.

   GHOST is theme-neutral. On dark heros: cream text, faint white border
   (sits well against the dark background). On cream/light heros: ink-900
   text, ink-200 border (sits well against the warm/white background).
   The ghost intentionally doesn't show the accent at rest — it would
   compete with the primary. Hover firms up the border to the theme's
   foreground colour.

   Class name is still `is-style-eux-hero-cream` even though the primary
   is no longer cream — keeping the class name avoids a save-content
   migration on every existing hero. The class was always a stylistic
   identifier, not a colour description.
   ========================================================================== */

/* ----- Primary (filled, accent-coloured) — all themes -----
   Layout: flex container so the trailing arrow appended via ::after sits
   inline with the text and uses the same gap as the design ref's
   `<span class="arr">→</span>`. We use ::after rather than asking
   editors to type the span manually into every button. */
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link {
	background: var(--eux-woo-purple);
	color: #fff;
	border-color: transparent;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Arrow glyph — appended after the link text. Translates 3px on hover
   for the same small affordance the design ref uses. */
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	font-family: var(--eux-font-mono);
	font-weight: 400;
	font-size: 1em;
	line-height: 1;
	transition: transform var(--eux-dur-fast) var(--eux-ease-out);
}
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link:hover {
	background: var(--eux-woo-700);
	color: #fff;
}
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link:hover::after {
	transform: translateX(3px);
}
.eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--eux-woo-200);
}

/* ----- Ghost (outline) — DARK theme (default) ----- */
.eux-block .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link {
	background: transparent;
	color: var(--eux-cream);
	border-color: rgba(255, 255, 255, 0.25);
}
.eux-block .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:hover {
	border-color: var(--eux-cream);
	color: var(--eux-cream);
}
.eux-block .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(244, 240, 236, 0.4);
}

/* ----- Ghost (outline) — LIGHT and CREAM themes ----- */
.eux-block.eux-hero--light .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link,
.eux-block.eux-hero--cream .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link {
	background: transparent;
	color: var(--eux-ink-900);
	border-color: var(--eux-ink-200);
}
.eux-block.eux-hero--light .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:hover,
.eux-block.eux-hero--cream .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:hover {
	border-color: var(--eux-ink-900);
	color: var(--eux-ink-900);
}
.eux-block.eux-hero--light .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:focus-visible,
.eux-block.eux-hero--cream .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.18);
}

/* ----- Editor preview overrides ----- */
/* Primary — Gutenberg renders core/button slightly differently in the
   editor wrapper, so duplicate the relevant rules with the wrapper
   prefix. Theme-neutral primary so the same accent-coloured pill
   shows in admin canvas regardless of which hero variant. */
.editor-styles-wrapper .eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link {
	background: var(--eux-woo-purple); color: #fff;
	border: 1px solid transparent;
	display: inline-flex; align-items: center; gap: 10px;
}
.editor-styles-wrapper .eux-block .wp-block-button.is-style-eux-hero-cream .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	font-family: var(--eux-font-mono);
	font-weight: 400;
	font-size: 1em;
	line-height: 1;
}
/* Ghost on dark hero — editor canvas */
.editor-styles-wrapper .eux-block .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link {
	background: transparent; color: var(--eux-cream);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
/* Ghost on light/cream hero — editor canvas */
.editor-styles-wrapper .eux-block.eux-hero--light .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link,
.editor-styles-wrapper .eux-block.eux-hero--cream .wp-block-button.is-style-eux-hero-ghost .wp-block-button__link {
	background: transparent; color: var(--eux-ink-900);
	border: 1px solid var(--eux-ink-200);
}

/* Scroll reveal styles live in assets/css/animations.css (front-end only).
   Loaded via wp_enqueue_scripts to avoid the editor canvas hiding content
   that depends on JS-applied .eux-is-in-view (which frontend.js can't
   provide inside the editor). */

/* ==========================================================================
   Skeleton primitives
   ========================================================================== */
.eux-block .eux-sk { background: var(--eux-ink-100); border-radius: 4px; display: block; }
.eux-block .eux-sk--line { height: 8px; border-radius: 99px; }
.eux-block .eux-sk--bar  { height: 14px; border-radius: 99px; }
.eux-block .eux-sk--pill { height: 18px; border-radius: 99px; }
.eux-block .eux-sk--circle { border-radius: 999px; }

/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   Zero out durations on everything inside an .eux-block. Animation-specific
   reduced-motion handling (entrance reveals) lives in animations.css.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eux-block * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
	}
}

/* ============================================================================
   SILK WebGL BACKGROUND — shared system (v0.30.0+)
   ----------------------------------------------------------------------------
   Any eux block that opts into the silk background via its `silkBackground`
   attribute gets `has-silk` on its outer wrapper, and its render.php emits
   two direct-child divs: `.eux-silk-bg` (the canvas host) and
   `.eux-silk-overlay` (the dark gradient that keeps copy readable).

   These rules apply universally to any `.eux-block.has-silk` so the silk
   feature works the same way across every section-level block — no need
   for per-block silk CSS. silk-bg.js auto-inits the canvas inside every
   `.eux-silk-bg` it finds (regardless of which block it's in).

   Layering:
     z=0  .eux-silk-bg       — WebGL2 canvas
     z=1  .eux-silk-overlay   — dark gradient(s) for text contrast
     z=2  every other direct child  — the actual content

   WHY the universal "direct children sit at z=2" rule:
     Each section block has a different inner container class
     (.eux-hero__inner, .eux-container--wide, .wp-block-group, etc.) and
     we don't want to chase them one-by-one. The :not() selector lifts
     EVERY direct child of `.has-silk` to z=2 except the silk layers
     themselves. New blocks get silk support automatically.
   ============================================================================ */

.eux-block.has-silk {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;  /* fallback if WebGL2 unsupported — silk-bg.js bails silently */
}

/* Hide the standard background-image / ::before decorations that some
   blocks paint on top of their default background. With silk on, those
   layered backgrounds would obscure the shader. Each block can opt OUT
   of this by re-asserting its own ::before with higher specificity. */
.eux-block.has-silk::before {
	display: none;
}

/* Silk canvas — auto-init by silk-bg.js. */
.eux-block.has-silk .eux-silk-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Dark gradient overlays — straight from the Jaggards reference. Two
   stacked gradients: a horizontal left-darker fade for text legibility
   plus a subtle top/bottom vignette. */
.eux-block.has-silk .eux-silk-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to right,
			rgba(0,0,0,0.88) 0%,
			rgba(0,0,0,0.70) 25%,
			rgba(0,0,0,0.35) 50%,
			rgba(0,0,0,0.10) 75%,
			rgba(0,0,0,0.20) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0,0,0,0.30) 0%,
			rgba(0,0,0,0.00) 20%,
			rgba(0,0,0,0.00) 80%,
			rgba(0,0,0,0.70) 100%
		);
}

/* Lift every direct child of a silk section above the canvas + overlay
   except the two silk layers themselves. This catches whatever inner
   container the block uses (.eux-hero__inner, .eux-container--wide, a
   wp-block-group, etc.) without per-block selectors. */
.eux-block.has-silk > :not(.eux-silk-bg):not(.eux-silk-overlay) {
	position: relative;
	z-index: 2;
}

/* When silk is on, force readable type colours. The overlay darkens the
   shader enough that black text on the cream/light themes would still
   read poorly. Cream-on-ink is the legible default. Individual blocks
   that already use white/cream text on their dark theme will inherit
   their own colours unchanged. */
.eux-block.has-silk { color: var(--eux-cream-100, #F4F0EC); }

/* Editor canvas — show a static gradient that approximates the silk
   tonality. The WebGL shader is NOT executed in the editor (preview
   would tank canvas performance and slow editing). */
.editor-styles-wrapper .eux-block.has-silk {
	background:
		radial-gradient(ellipse 80% 60% at 70% 40%, rgba(60, 50, 90, 0.35), transparent 65%),
		radial-gradient(ellipse 60% 80% at 20% 70%, rgba(40, 35, 70, 0.30), transparent 60%),
		#0a0a0a;
}

/* ============================================================================
   UTILITY: eux-list--dash
   ----------------------------------------------------------------------------
   Reusable purple-dash bullet style. Drop the class on a `core/list` block
   inside ANY eux-block section to get the same purple-dash bullet treatment
   used in problem-trio cards, bento cards, etc. Works in both light and
   cream themes (the dash colour stays --eux-woo-300 either way; readable
   on both backgrounds).

   Usage in the editor:
     1. Add a List block.
     2. In the sidebar, "Advanced" → "Additional CSS class(es)" → eux-list--dash
     3. Or pre-populate via a block TEMPLATE: [ 'core/list', { className: 'eux-list--dash' } ]

   Selectors include `.wp-block-list` variant to beat WordPress core's
   resets which target that class with higher specificity.
   ============================================================================ */
.eux-block .eux-list--dash,
.eux-block .eux-list--dash.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 9px;
}

.eux-block .eux-list--dash li {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--eux-ink-700);
	padding-left: 18px;
	position: relative;
	list-style: none;
}
.eux-block .eux-list--dash li::marker { content: ''; }

.eux-block .eux-list--dash li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 2px;
	background: var(--eux-woo-300);
}