/*
 * Token settings and block styles for core blocks (includes/core-ext.php). Values are token
 * variables set on the element by the block; nothing here holds a raw colour or size.
 */

/* ---- Type: letter-spacing, line-height, weight, text column ---- */
.has-sd-tracking,
.wp-block-button__link.has-sd-tracking { letter-spacing: var(--sd-tracking); }
.has-sd-leading { line-height: var(--sd-leading); }
.has-sd-weight,
.wp-block-button__link.has-sd-weight { font-weight: var(--sd-weight); }
.has-sd-text-measure {
	/* No percentage here: inside a grid cell it's cyclic while the tracks are sized, and the
	 * text collapses to one word per line. A block can't grow past its container anyway. */
	max-width: var(--sd-measure);
	margin-inline: 0 auto;
}
.has-sd-text-measure.has-text-align-center { margin-inline: auto; }
.has-sd-text-measure.has-text-align-right { margin-inline: auto 0; }
/* A grid cell sizes an item with auto margins to fit its content, which Chrome can collapse
 * to nothing: fill the cell, then the measure and the margins place the text. */
.sd-grid > :where(.has-sd-text-measure) { width: 100%; box-sizing: border-box; }
/*
 * Core's constrained layout (post content, Group) centres its children with margin-inline:
 * auto !important, so only there the text column needs !important to line up with the content
 * column's left edge. (A Section places children with grid tracks and leaves margins alone.)
 */
.is-layout-constrained > .has-sd-text-measure {
	max-width: min(var(--sd-measure), var(--wp--style--global--content-size, 100%));
	margin-inline: max(0px, (100% - var(--wp--style--global--content-size, 100%)) / 2) auto !important;
}
.is-layout-constrained > .has-sd-text-measure.has-text-align-center { margin-inline: auto !important; }
.is-layout-constrained > .has-sd-text-measure.has-text-align-right {
	margin-inline: auto max(0px, (100% - var(--wp--style--global--content-size, 100%)) / 2) !important;
}

/* Inline colour from the palette (core's format without its transparent background). */
mark.has-inline-color { background: none; }

/* ---- Images: size, aspect ratio, fit, alignment ---- */
/* The Desktop value at zero strength: layout.css switches --_media-now per device (this file
   loads after it, so a class-strength default here would win on every screen). */
:where(.wp-block-image.has-sd-media) {
	--_media: var(--sd-media);
	--_media-now: var(--_media);
}
.wp-block-image.has-sd-media {
	width: min(var(--_media-now), 100%);
	max-width: 100%;
}
.wp-block-image.has-sd-media img { width: 100%; height: auto; }
.wp-block-image.has-sd-aspect {
	/* Public --sd-* values don't inherit; the image reads this private copy. */
	--_aspect: var(--sd-aspect);
}
.wp-block-image.has-sd-aspect img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--_aspect);
	object-fit: cover;
}
.wp-block-image.is-sd-fit-contain img { object-fit: contain; }
.wp-block-image.is-sd-fit-cover img { object-fit: cover; }
.wp-block-image.is-sd-align-start { margin-inline: 0 auto !important; }
.wp-block-image.is-sd-align-center { margin-inline: auto !important; }
.wp-block-image.is-sd-align-end { margin-inline: auto 0 !important; }
/* In a column Stack, a sized image keeps its size instead of stretching. */
.sd-stack > .wp-block-image[class*="is-sd-align-"] { align-self: auto; }
/* Tablet / Mobile sizes: layout.css (it knows the theme's breakpoints). */

/* Rounded corners and shadow from the tokens. */
.wp-block-image.has-sd-radius { --_radius: var(--sd-radius); }
.wp-block-image.has-sd-radius img { border-radius: var(--_radius); }
.wp-block-image.has-sd-shadow { --_shadow: var(--sd-shadow); }
.wp-block-image.has-sd-shadow img { box-shadow: var(--_shadow); }

/* Icons: size from the media tokens; a circle or square behind (background = the block's
 * background colour, or a soft tint of the icon colour). */
/* The Desktop value at zero strength: layout.css switches --_media-now per device (this file
   loads after it, so a class-strength default here would win on every screen). */
:where(.wp-block-icon.has-sd-media) {
	--_media: var(--sd-media);
	--_media-now: var(--_media);
}
.wp-block-icon.has-sd-media {
	width: var(--_media-now) !important;
	box-sizing: border-box;
}
.wp-block-icon.is-sd-shape-circle,
.wp-block-icon.is-sd-shape-square {
	display: inline-grid;
	place-items: center;
	aspect-ratio: 1;
	padding: calc(var(--_media-now, 3rem) * 0.2);
	box-sizing: border-box;
}
.wp-block-icon.is-sd-shape-circle { border-radius: 50%; }
.wp-block-icon.is-sd-shape-square { border-radius: var(--wp--custom--radius--medium, 0.5rem); }
.wp-block-icon.is-sd-shape-circle:not(.has-background),
.wp-block-icon.is-sd-shape-square:not(.has-background) {
	background: color-mix(in srgb, currentColor 12%, transparent);
}
/* Core puts the block's colours on the <svg>, not the wrapper: with a shape, the svg becomes the
 * shape (its background fills the circle or square) and the wrapper's tint and padding go. */
.wp-block-icon.is-sd-shape-circle:has(> svg.has-background),
.wp-block-icon.is-sd-shape-square:has(> svg.has-background) {
	background: none;
	padding: 0;
}
.wp-block-icon.is-sd-shape-circle > svg.has-background,
.wp-block-icon.is-sd-shape-square > svg.has-background {
	width: 100%;
	height: 100%;
	padding: calc(var(--_media-now, 3rem) * 0.2);
	border-radius: inherit;
}

/* Logos shown grey and a little faded, in colour on hover. */
.wp-block-image.is-style-logo-muted img {
	filter: grayscale(1);
	opacity: var(--_opacity, var(--wp--custom--opacity--70, 0.7));
}
/* Effects (0.25): one filter with one strength (--sd-fa, 0–1) and a blend mode, on the img. */
.wp-block-image.has-sd-fa { --_fa: var(--sd-fa); }
.wp-block-image.is-sd-filter-grayscale img { filter: grayscale(var(--_fa, 1)); }
.wp-block-image.is-sd-filter-sepia img { filter: sepia(var(--_fa, 1)); }
.wp-block-image.is-sd-filter-blur img { filter: blur(calc(var(--_fa, 0.25) * 20px)); }
.wp-block-image.is-sd-filter-blur img { clip-path: inset(0); } /* no halo past the edges */
.wp-block-image.is-sd-filter-brightness img { filter: brightness(calc(1 + var(--_fa, 0.2))); }
.wp-block-image.is-sd-filter-contrast img { filter: contrast(calc(1 + var(--_fa, 0.2))); }
.wp-block-image.is-sd-filter-drop-shadow img { filter: drop-shadow(0 8px 16px rgb(0 0 0 / var(--_fa, 0.35))); }
.wp-block-image.is-sd-blend-multiply img { mix-blend-mode: multiply; }
.wp-block-image.is-sd-blend-screen img { mix-blend-mode: screen; }
.wp-block-image.is-sd-blend-overlay img { mix-blend-mode: overlay; }
.wp-block-image.is-sd-blend-darken img { mix-blend-mode: darken; }
.wp-block-image.is-sd-blend-lighten img { mix-blend-mode: lighten; }
.wp-block-image.is-sd-blend-luminosity img { mix-blend-mode: luminosity; }
.wp-block-image.is-sd-blend-soft-light img { mix-blend-mode: soft-light; }

/* Image opacity (sdOpacity): on its own, or how faded a muted logo is. */
.wp-block-image.has-sd-opacity { --_opacity: var(--sd-opacity); }
.wp-block-image.has-sd-opacity:not(.is-style-logo-muted) img { opacity: var(--_opacity); }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-image.is-style-logo-muted img { transition: filter 0.2s ease, opacity 0.2s ease; }
}
.wp-block-image.is-style-logo-muted:hover img,
.wp-block-image.is-style-logo-muted a:focus-visible img {
	filter: none;
	opacity: 1;
}

/* ---- Paragraph styles ---- */
/* Eyebrow with a short accent line in front. */
.is-style-sd-eyebrow-line {
	/* Line colour and length: sdLineColor / sdLineWidth (private copies for ::before). */
	--_eyebrow-c: var(--sd-eyebrow-c, var(--wp--preset--color--accent, currentColor));
	--_eyebrow-w: var(--sd-eyebrow-w, 2.5em);
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider, 0.1em);
	text-transform: uppercase;
}
.is-style-sd-eyebrow-line.has-text-align-center { justify-content: center; }
.is-style-sd-eyebrow-line::before {
	content: "";
	flex: none;
	width: var(--_eyebrow-w);
	height: var(--wp--custom--border--thin, 2px);
	background: var(--_eyebrow-c);
}

/* Link with an arrow after it (paragraph whose text is a link, or a text-link button). */
.is-style-link-arrow a::after,
.wp-block-button.is-style-link-arrow .wp-block-button__link::after {
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.4em;
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-link-arrow a::after,
	.wp-block-button.is-style-link-arrow .wp-block-button__link::after { transition: transform 0.2s ease; }
	.is-style-link-arrow a:hover::after,
	.wp-block-button.is-style-link-arrow .wp-block-button__link:hover::after { transform: translateX(0.25em); }
}
.is-style-link-arrow a {
	font-weight: 600;
	text-decoration: none;
}

/* ---- Buttons ---- */
.wp-block-button__link.is-sd-size-sm {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-button__link.is-sd-size-lg {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--large);
}
/* Tag: a small pill chip. */
.wp-block-button.is-style-tag .wp-block-button__link {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	box-shadow: none;
	transform: none;
}
.wp-block-button.is-style-tag .wp-block-button__link:not(.has-background) {
	background: color-mix(in srgb, currentColor calc(var(--wp--custom--opacity--10, 0.1) * 100%), transparent);
}
.wp-block-button.is-style-tag .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary, currentColor);
}
/* Text link: no box. */
.wp-block-button.is-style-link .wp-block-button__link,
.wp-block-button.is-style-link-arrow .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-weight: 600;
}
.wp-block-button.is-style-link .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-link-arrow .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary, currentColor);
}
.wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link-arrow .wp-block-button__link:hover { text-decoration: underline; }
/* Buttons that stack full width on phones: layout.css. */

/* ---- Quote and list styles ---- */
.wp-block-quote.is-style-plain {
	margin-inline: 0;
	padding: 0;
	border: 0;
}
.wp-block-list.is-style-none { list-style: none; padding-inline-start: 0; }
.wp-block-list.is-style-dash { list-style: none; padding-inline-start: 1.25em; }
.wp-block-list.is-style-dash > li { position: relative; }
.wp-block-list.is-style-dash > li::before {
	content: "\2013";
	position: absolute;
	inset-inline-start: -1.25em;
	color: var(--wp--preset--color--accent, currentColor);
}
ol.wp-block-list.is-style-numbered-circle {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: sd-step;
}
ol.wp-block-list.is-style-numbered-circle > li {
	position: relative;
	padding-inline-start: 2.5em;
	counter-increment: sd-step;
}
ol.wp-block-list.is-style-numbered-circle > li::before {
	content: counter(sd-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, currentColor);
	color: var(--wp--preset--color--primary-contrast, Canvas);
	font-size: 0.85em;
	font-weight: 700;
}

/* ---- Divider (sd/divider) ----
 * The line is the content box painted with the colour (or gradient) and cut by a mask: the
 * pattern (dashes, dots, double) and the fade are two mask layers, intersected. Padding adds room
 * around the line without painting it. */
.sd-divider-rule {
	--_w: var(--sd-dw, 2.5rem);
	--_t: var(--sd-dt, 2px);
	--_dash: var(--sd-dash, calc(var(--_t) * 4));
	--_gap: var(--sd-dgap, calc(var(--_t) * 2));
	--_dir: 90deg;
	--_pat: linear-gradient(#000 0 0);
	--_psize: 100% 100%;
	--_prep: no-repeat;
	--_fade: linear-gradient(#000 0 0);
	box-sizing: content-box;
	width: min(var(--_w), 100%);
	height: var(--_t);
	margin-block: var(--sd-dspace, 0);
	border: 0;
	background: var(--sd-dg, var(--sd-dc, currentColor));
	background-clip: content-box;
	opacity: 1;
	mask-image: var(--_pat), var(--_fade);
	mask-size: var(--_psize), 100% 100%;
	mask-repeat: var(--_prep), no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-composite: intersect;
}
.sd-divider-rule.is-len-full { width: auto; }
.sd-divider-rule.is-line-dashed {
	--_pat: repeating-linear-gradient(var(--_dir), #000 0 var(--_dash), #0000 0 calc(var(--_dash) + var(--_gap)));
}
.sd-divider-rule.is-line-dots {
	--_pat: radial-gradient(circle closest-side, #000 calc(100% - 0.5px), #0000);
	--_psize: calc(var(--_t) + var(--_gap)) 100%;
	--_prep: round no-repeat;
}
.sd-divider-rule.is-line-double {
	--_pat: linear-gradient(calc(var(--_dir) + 90deg), #000 0 33.4%, #0000 0 66.6%, #000 0);
	height: max(var(--_t), 3px);
}
.sd-divider-rule.has-fade-both { --_fade: linear-gradient(var(--_dir), #0000, #000 25% 75%, #0000); }
.sd-divider-rule.has-fade-start { --_fade: linear-gradient(var(--_dir), #0000, #000 45%); }
.sd-divider-rule.has-fade-end { --_fade: linear-gradient(var(--_dir), #000 55%, #0000); }
.sd-divider-rule.is-rounded { border-radius: 999px; }

/* Vertical: thickness across, length down. Full length fills the row it sits in. */
.sd-divider-rule.is-vertical {
	--_dir: 180deg;
	width: var(--_t);
	height: var(--_w);
	min-height: 1em;
}
.sd-divider-rule.is-vertical.is-len-full { width: var(--_t); height: auto; align-self: stretch; }
.sd-divider-rule.is-vertical.is-line-dots {
	--_psize: 100% calc(var(--_t) + var(--_gap));
	--_prep: no-repeat round;
}
.sd-divider-rule.is-vertical.is-line-double { width: max(var(--_t), 3px); height: var(--_w); }
.sd-divider-rule.is-vertical:is(.is-len-full, .is-sd-grow) {
	flex: 0 0 auto;
	align-self: stretch;
	width: var(--_t);
	height: auto;
}
.sd-divider-rule.is-vertical.is-line-double:is(.is-len-full, .is-sd-grow) { width: max(var(--_t), 3px); }
.sd-divider-rule.is-align-start { margin-inline: 0 auto !important; }
.sd-divider-rule.is-align-center { margin-inline: auto !important; }
.sd-divider-rule.is-align-end { margin-inline: auto 0 !important; }
/* A vertical rule in a row keeps its place; alignment is for horizontal rules. */
.sd-divider-rule.is-vertical:is(.is-align-start, .is-align-center, .is-align-end) { margin-inline: 0 !important; }


/* ---- Rating (sd/rating): five stars filled to the value ---- */
.sd-rating {
	--_c: var(--sd-rating-color, currentColor);
	position: relative;
	display: inline-flex;
	width: max-content;
	line-height: 1;
	color: var(--_c);
}
.sd-rating__base,
.sd-rating__fill {
	display: inline-flex;
	gap: 0.15em;
}
.sd-rating__base { opacity: 0.25; }
.sd-rating__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--_rating, 100%)) 0 0);
}
/* Public --sd-* values don't inherit; the fill reads this private copy. */
.sd-rating { --_rating: var(--sd-rating); }
.sd-rating svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---- A setting on the block beats the look of its style variation ---- */
.is-style-sd-eyebrow-line.has-sd-tracking { letter-spacing: var(--sd-tracking); }
.is-style-sd-eyebrow-line.has-sd-weight { font-weight: var(--sd-weight); }
.wp-block-button .wp-block-button__link.has-sd-tracking { letter-spacing: var(--sd-tracking); }
.wp-block-button .wp-block-button__link.has-sd-weight { font-weight: var(--sd-weight); }

/* ---- 0.14.0: list markers, quote citation, button hover ---- */
.wp-block-list.has-sd-marker { --_marker: var(--sd-marker); }
.wp-block-list.has-sd-marker > li::marker,
.wp-block-list.is-style-dash.has-sd-marker > li::before { color: var(--_marker); }
ol.wp-block-list.is-style-numbered-circle.has-sd-marker > li::before { background: var(--_marker); }

.wp-block-quote.has-sd-cite-size > cite { font-size: var(--sd-cite-size); }
.wp-block-quote.has-sd-cite-color > cite { color: var(--sd-cite-color); }
.wp-block-quote.has-sd-cite-weight > cite { font-weight: var(--sd-cite-weight); }

.wp-block-button .wp-block-button__link.has-sd-hover-bg:is(:hover, :focus-visible) { background: var(--sd-hover-bg) !important; }
.wp-block-button .wp-block-button__link.has-sd-hover-text:is(:hover, :focus-visible) { color: var(--sd-hover-text) !important; }
.wp-block-button .wp-block-button__link.has-sd-hover-border:is(:hover, :focus-visible) { border-color: var(--sd-hover-border) !important; }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:is(.has-sd-hover-bg, .has-sd-hover-text, .has-sd-hover-border) {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
}

/* ---- Editorial type (0.26): first-line indent; font and colour for <em> accent words. ---- */
.has-sd-indent { text-indent: var(--sd-indent); }
.has-sd-em-f em { font-family: var(--sd-em-f); }
.has-sd-em-c em { color: var(--sd-em-c); }

/* ---- Icon (sd/icon) ---- */
.sd-icon {
	--_media: var(--sd-media, var(--wp--custom--media--xs, 3rem));
	--_media-now: var(--_media);
	--_icon-bg: var(--sd-icon-bg, color-mix(in srgb, currentColor 12%, transparent));
	display: grid;
	place-items: center;
	width: var(--_media-now);
	max-width: 100%;
	aspect-ratio: 1;
	box-sizing: border-box;
	line-height: 0;
}
.sd-icon.has-sd-icon-color { color: var(--sd-icon-c); }
.sd-icon__svg { width: 100%; height: 100%; }
/* Stormwerx icons are filled shapes; uploaded SVGs keep their own fill and stroke, and follow the
 * colour setting wherever they use currentColor. */
.sd-icon__svg:not(.is-uploaded) { fill: currentColor; }
.sd-icon.is-bg-circle,
.sd-icon.is-bg-square {
	padding: calc(var(--_media-now) * 0.22);
	background: var(--_icon-bg);
}
.sd-icon.is-bg-circle { border-radius: 50%; }
.sd-icon.is-bg-square { border-radius: var(--wp--custom--radius--medium, 0.5rem); }
/* 0.26: ring (a circle outline, no fill), a custom radius, a border, and a text badge. */
.sd-icon.is-bg-ring {
	padding: calc(var(--_media-now) * 0.22);
	border-radius: 50%;
	border: var(--sd-icon-bw, 2px) solid var(--sd-icon-bc, currentColor);
}
.sd-icon.is-bg-ring.has-sd-icon-bg { background: var(--_icon-bg); }
.sd-icon.has-sd-icon-r { border-radius: var(--sd-icon-r); }
.sd-icon:is(.is-bg-circle, .is-bg-square).has-sd-icon-bw { border: var(--sd-icon-bw) solid var(--sd-icon-bc, currentColor); }
.sd-icon__text {
	font-size: calc(var(--_media-now) * 0.42);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
/* Centre / end when the text around it is centred (Stack alignment handles columns). */
.has-text-align-center > .sd-icon { margin-inline: auto; }

/* ---- Query Loop load more (0.30) ---- */
.wp-block-query:is(.is-sd-load-more-button, .is-sd-load-more-scroll) .wp-block-query-pagination > :not(.wp-block-query-pagination-next) { display: none; }
.wp-block-query:is(.is-sd-load-more-button, .is-sd-load-more-scroll) .wp-block-query-pagination { justify-content: center; }
.sd-load-more__next { text-decoration: none; cursor: pointer; }
.sd-load-more__next.is-loading { opacity: 0.6; pointer-events: none; }
.wp-block-query.is-sd-load-more-done .wp-block-query-pagination { display: none; }