/**
 * CSL Homepage — design tokens.
 *
 * Type scale, spacing scale, radii, shadows, section rhythm and button styles. Loaded once,
 * only on pages where a section actually renders.
 *
 * Deliberately sets no font-family. The sections live inside the Divi theme and must match the
 * surrounding page, so they inherit whatever the theme sets and control only size, weight and
 * spacing. If a section ever needs its own face, set it on `--csl-font` here rather than
 * scattering font-family declarations through the section stylesheets.
 *
 * The token and box-sizing blocks name `.csl-card` as well as `.csl-section`. The shop grid
 * renders cards standalone inside a Divi Loop, where there is no `.csl-section` ancestor to
 * inherit from. Scheme colours survive that on their own — the card carries its own
 * `csl-scheme--*` class — but every spacing, type and transition token would go missing.
 *
 * `.csl-scope` is the same widening for a third case: a page whose markup this plugin does not
 * render at all. The child theme puts it on `<body>` of the WooCommerce pages so their stylesheets
 * can consume this scale rather than restating it, which is the only alternative and the one that
 * drifts. It is on the token block and on the fallback scheme below — that page needs a ground,
 * an ink and a rule — and deliberately NOT on the box-sizing block: `.csl-scope` sits on `<body>`,
 * so widening that block would put `box-sizing: inherit` on every element of a Divi page.
 *
 * The fallback scheme cannot collide with a real one here the way it did with `.csl-card`. That
 * was element-versus-element at equal specificity; this is an ancestor, and a `csl-scheme--*`
 * element inside still defines the property on itself, which is nearer and therefore wins.
 */

.csl-section,
.csl-card,
.csl-scope {
	/* Brand — the five Divi global colours, verbatim. */
	--csl-brand-navy: #143242;
	--csl-brand-orange: #ff8728;
	--csl-brand-yellow: #ffb740;
	--csl-brand-neutral: #eeeeee;
	--csl-brand-pink: #ef357f;

	/* Brand pink fails AA under small white text; this is the button/badge-safe variant. */
	--csl-brand-pink-deep: #d22f70;

	/*
	 * Divi's heading face, for display copy that is not a heading element. Section titles are
	 * real `<h2>`s and get it from the theme; the promo rail's headline is a `<p>` — it is
	 * campaign copy, not a document heading — and has to ask for it.
	 */
	--csl-font-heading: var( --et_global_heading_font, inherit );

	/* Type scale — 1.25 ratio, rem so it respects the user's base size. */
	--csl-text-2xs: 0.6875rem;
	--csl-text-xs: 0.75rem;
	--csl-text-sm: 0.875rem;
	--csl-text-base: 1rem;
	--csl-text-lg: 1.125rem;
	--csl-text-xl: 1.375rem;
	--csl-text-2xl: 1.75rem;
	--csl-text-3xl: clamp( 1.75rem, 1.35rem + 1.8vw, 2.5rem );
	--csl-text-4xl: clamp( 2.25rem, 1.6rem + 2.8vw, 3.5rem );

	--csl-leading-tight: 1.15;
	--csl-leading-snug: 1.35;
	--csl-leading-normal: 1.55;

	--csl-weight-regular: 400;
	--csl-weight-medium: 500;
	--csl-weight-semibold: 600;
	--csl-weight-bold: 700;

	--csl-tracking-tight: -0.015em;
	--csl-tracking-normal: 0;
	--csl-tracking-wide: 0.08em;
	--csl-tracking-caps: 0.12em;

	/* Spacing — 4px base. */
	--csl-space-1: 0.25rem;
	--csl-space-2: 0.5rem;
	--csl-space-3: 0.75rem;
	--csl-space-4: 1rem;
	--csl-space-5: 1.25rem;
	--csl-space-6: 1.5rem;
	--csl-space-8: 2rem;
	--csl-space-10: 2.5rem;
	--csl-space-12: 3rem;
	--csl-space-16: 4rem;

	/* Grid gaps used by every section type. */
	--csl-gap: var( --csl-space-4 );
	--csl-gap-lg: var( --csl-space-6 );

	/*
	 * The gutter between coloured tiles inside one section — the feature grid and the
	 * recommendation row. One token because the two sections sit on the same page and any
	 * difference between them reads as a mistake; it was two hard-coded `2px` values, which is
	 * exactly the shape that drifts.
	 */
	--csl-tile-gap: var( --csl-space-2 );

	/*
	 * Containers are square in the approved design — rails, hero, cards and tiles all meet at a
	 * hard edge. Small components are not: the button and badge references the client supplied
	 * are both softly rounded, and `-sm` is the radius they share.
	 */
	--csl-radius-sm: 6px;

	/*
	 * Buttons take the same asymmetric corners as the discount flag — square on the top-left and
	 * bottom-right, 10px on the other two — so the two components read as one shape language.
	 * A shorthand, so it stays one lever. `-sm` remains for the stock chip, arrows and dots.
	 */
	--csl-radius-btn: 0 10px;
	--csl-radius: 0;
	--csl-radius-lg: 0;
	--csl-radius-pill: 0;

	--csl-shadow-sm: 0 1px 2px rgba( 20, 50, 66, 0.06 );
	--csl-shadow: 0 2px 6px rgba( 20, 50, 66, 0.08 ), 0 12px 28px -18px rgba( 20, 50, 66, 0.25 );

	--csl-transition: 160ms ease;
}

/*
 * Fallback scheme, so a section with no scheme set is still readable.
 *
 * Scoped to .csl-section and .csl-scope — never .csl-card. Every card carries a csl-scheme--* class, and
 * this stylesheet loads after csl-schemes.css at equal specificity (both a single class), so
 * defining these here for .csl-card would beat the scheme's own --csl-ground and paint every card
 * white. That is why the structural tokens above are shared with .csl-card and these are not.
 */
.csl-section,
.csl-scope {
	--csl-ground: #ffffff;
	--csl-surface: #f6f6f6;
	--csl-ink: #143242;
	--csl-ink-soft: #5a6e79;
	--csl-rule: #d9dee1;
	--csl-accent: #143242;
	--csl-on-accent: #ffffff;
}

/* ------------------------------------------------------------------ rhythm */

.csl-section,
.csl-card {
	box-sizing: border-box;
}

.csl-section *,
.csl-card *,
.csl-section *::before,
.csl-card *::before,
.csl-section *::after,
.csl-card *::after {
	box-sizing: inherit;
}

.csl-spacing-top--none { padding-top: 0; }
.csl-spacing-top--sm { padding-top: clamp( 1rem, 2vw, 1.5rem ); }
.csl-spacing-top--lg { padding-top: clamp( 3rem, 6vw, 5.5rem ); }

.csl-spacing-bottom--none { padding-bottom: 0; }
.csl-spacing-bottom--sm { padding-bottom: clamp( 1rem, 2vw, 1.5rem ); }
.csl-spacing-bottom--md { padding-bottom: clamp( 2rem, 4vw, 3.5rem ); }
.csl-spacing-bottom--lg { padding-bottom: clamp( 3rem, 6vw, 5.5rem ); }

/* ----------------------------------------------------------------- headings */

.csl-section-title {
	margin: 0 0 var( --csl-space-3 );
	font-size: calc( var( --csl-text-3xl ) * 1.25 );
	font-weight: var( --csl-weight-bold );
	line-height: var( --csl-leading-tight );
	letter-spacing: var( --csl-tracking-tight );
	color: var( --csl-ink );
	text-wrap: balance;
}

.csl-section-description {
	margin: 0 0 var( --csl-space-5 );
	max-width: 46ch;
	font-size: var( --csl-text-lg );
	line-height: var( --csl-leading-normal );
	color: var( --csl-ink-soft );
}

.csl-eyebrow {
	display: block;
	margin-bottom: var( --csl-space-2 );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-caps );
	text-transform: uppercase;
	color: var( --csl-ink-soft );
}

/* ------------------------------------------------------------------ buttons */

.csl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --csl-space-2 );
	padding: 0.7em 1.4em;
	border: 2px solid transparent;
	border-radius: var( --csl-radius-btn );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-normal );
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var( --csl-transition ), color var( --csl-transition ), border-color var( --csl-transition );
}

.csl-btn:focus-visible {
	outline: 2px solid var( --csl-ink );
	outline-offset: 2px;
}

/*
 * cta_style values. Each fill is paired with the only label colour that clears AA against it:
 *   pink   #d22f70 + white  = 4.79:1   (brand pink itself is 3.83:1 and fails)
 *   amber  #ffb740 + navy   = 7.73:1   (white on either amber fails badly — 2.40:1 on orange)
 *   orange #ff8728 + navy   = 5.59:1   (white on it is 2.40:1 and fails)
 *   navy   #143242 + white  = 13.42:1
 *
 * Amber is brand yellow with a navy outline, per the client's button reference; orange is the
 * same shape in brand orange, for buttons that need the warm fill at full strength.
 *
 * The navy outline is the family trait, so pink carries it too — it is what the VIEW MORE buttons
 * are drawn with. .csl-btn already reserves the 2px as a transparent border, so colouring it in
 * costs no layout.
 */
.csl-btn--pink {
	background-color: var( --csl-brand-pink-deep );
	color: #ffffff;
	border-color: var( --csl-brand-navy );
}

.csl-btn--pink:hover,
.csl-btn--pink:focus-visible {
	background-color: #ac265b;
	color: #ffffff;
}

/*
 * Every filled button carries white type, as the Design Tokens sheet draws all four fills
 * (client, 2026-10-05). White on amber measures 1.8:1 and on orange 2.6:1, below AA; the client
 * chose the style guide over the contrast figure.
 */
.csl-btn--amber {
	background-color: var( --csl-brand-yellow );
	color: #ffffff;
	border-color: var( --csl-brand-navy );
}

.csl-btn--amber:hover,
.csl-btn--amber:focus-visible {
	background-color: var( --csl-brand-orange );
	color: #ffffff;
}

/* Same navy outline as amber — the two read as one family, filled at different strengths. */
.csl-btn--orange {
	background-color: var( --csl-brand-orange );
	color: #ffffff;
	border-color: var( --csl-brand-navy );
}

.csl-btn--orange:hover,
.csl-btn--orange:focus-visible {
	background-color: #ec7a15;
	color: #ffffff;
}

.csl-btn--navy {
	background-color: var( --csl-brand-navy );
	color: #ffffff;
}

.csl-btn--navy:hover,
.csl-btn--navy:focus-visible {
	background-color: #0d222d;
	color: #ffffff;
}

/*
 * The outline variant takes its colour from the scheme rather than a fixed hex, so it stays
 * visible on the navy and amber grounds where a hard-coded navy outline would disappear.
 */
.csl-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: var( --csl-ink );
}

.csl-btn--outline:hover,
.csl-btn--outline:focus-visible {
	background-color: var( --csl-ink );
	color: var( --csl-ground );
}

/* Uses the scheme accent — always at least 3:1 against its own ground. */
.csl-btn--accent {
	background-color: var( --csl-accent );
	color: var( --csl-on-accent );
}

/* -------------------------------------------------------------------- badge */

/*
 * The discount flag, per the client's reference: one rounded chip, hard navy outline, split into
 * a pink half carrying the number and a navy half carrying "OFF".
 *
 * Appearance lives here, in the token layer that every section already depends on, so cards,
 * promo rails and the hero all draw the same flag. The section stylesheets only position it.
 */
.csl-badge {
	display: inline-flex;
	align-items: stretch;
	border: 2px solid var( --csl-brand-navy );
	border-radius: 0 10px;
	overflow: hidden;
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.csl-badge__pct {
	display: flex;
	align-items: center;
	padding: 0.45em 0.55em;
	background-color: var( --csl-brand-pink );
	color: #ffffff;
}

.csl-badge__off {
	display: flex;
	align-items: center;
	padding: 0.45em 0.55em;
	background-color: var( --csl-brand-navy );
	color: #ffffff;
}

/*
 * Solid variant — the promo rails only, and nothing else on the page.
 *
 * The rails draw a flat pink tag in the approved design, not the two-tone flag: one fill, no navy
 * half, and a lowercase "off" set smaller than the number beside it. It sits on the rail packshot
 * rather than on a white card, where the flag's navy half reads as a second object. The navy
 * outline is kept — it is what the Figma draws, and it inherits from `.csl-badge` above.
 *
 * Pink here is the deep variant, not `--csl-brand-pink`: white on a solid pink chip at this text
 * size needs the AA-safe tone, which is exactly what that token exists for.
 */
.csl-badge--solid {
	border-radius: 0 10px;
	background-color: var( --csl-brand-pink-deep );
	color: #ffffff;
	padding: 0.45em 0.6em;
	gap: 0.3em;
}

/* The halves stop being halves — they are just the two words inside one chip. */
.csl-badge--solid .csl-badge__pct,
.csl-badge--solid .csl-badge__off {
	padding: 0;
	background-color: transparent;
	color: inherit;
}

.csl-badge--solid .csl-badge__off {
	font-size: 0.85em;
	font-weight: var( --csl-weight-medium );
	text-transform: lowercase;
}

/* --------------------------------------------------------------- a11y bits */

.csl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.csl-section,
	.csl-section * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}