/*
 * Slaidz front-end styles.
 *
 * Post view is the theme-styled baseline: only structure (box-sizing, layout,
 * images, markers) lives in the base scope so the theme styles the text. Every
 * view clips its images to the same CSS-owned frame; the default ratios come
 * from the emitted defaults block (`Slaidz_Settings::defaults_css()`), and
 * `--slaidz-clip-ratio*` are overridden per shortcode by the server so
 * `ratio` / `ratio_narrow` can change each breakpoint. Slider mode,
 * the opt-in enhancement added by assets/js/slaidz.js, carries the component's
 * text styling, plus the full-page view, pointer glide and reduced-motion
 * handling.
 *
 * The navigation is styled by two alternative designs selected by the root
 * class PHP always emits: `slaidz--nav-default` owns the shipped design
 * below, and `slaidz--nav-custom` is a hook for the site's CSS — it gets no
 * navigation design from the plugin. The plumbing every style shares, and the
 * design/plumbing boundary, are documented in docs/settings-page.md.
 */

.slaidz {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/*
	 * Bottom-navigation scale. One fixed sizing, on `.slaidz` as the base so
	 * the bottom stripe needs no settings markup.
	 */
	--slaidz-nav-pad: 0.3125rem;
	--slaidz-nav-pad-wide: 0.625rem;
	--slaidz-nav-icon: 24px;
	--slaidz-nav-toggle-font: 1rem;
}

/* Slider mode is the styled enhancement; post view inherits the theme. */

/*
 * The inline slider is the containing block for its clipped top stripe (see
 * the top-stripe rules below), so the clipped box and its focus-reveal
 * overlay pin to the guide's top-left. Gated off the full-page view, whose
 * root is `position: fixed` and must never be touched.
 */
.slaidz--slider:not(.slaidz--fullscreen) {
	position: relative;
}

/*
 * The inline slider palette from the Slider view settings. The properties are
 * defined by the emitted defaults block and overridden inline on the root when
 * a color is saved. Gated off the full-page view, which keeps its own palette,
 * and the toggled post view and the no-JS stack never carry `.slaidz--slider`.
 */
.slaidz--slider:not(.slaidz--fullscreen) {
	background: var( --slaidz-slider-bg );
	color: var( --slaidz-slider-text );
}

/*
 * Slider-view rounded corners from the settings, gated on the emitted
 * class so a radius left at 0 keeps the corners square. The root is the
 * only bordered and backgrounded element and the transparent bottom stripe
 * is flush with its bottom edge, so this one root radius rounds both
 * requested corner groups: the top of the title container and the bottom
 * of the navigation bar. The full-page view is excluded — it is pinned to
 * the viewport edges — and the post view (toggled or `display="post"`) and
 * the no-JS stack never carry `.slaidz--slider`, so their corners stay
 * square.
 */
.slaidz--rounded-corners.slaidz--slider:not(.slaidz--fullscreen) {
	border-radius: var( --slaidz-rounded-corners );
}

.slaidz *,
.slaidz *::before,
.slaidz *::after {
	box-sizing: inherit;
}

.slaidz [hidden] {
	display: none;
}

/* The nav is JS-dependent chrome: hide it until the script enhances the guide. */
.slaidz:not(.slaidz--enhanced) .slaidz__nav {
	display: none;
}

/*
 * The shipped navigation design. Anchored on `.slaidz--nav-default`, plus
 * `.slaidz--post` copies for the rules the toggled post view needs (its root
 * carries the chosen style class, so a Custom slider toggled to the
 * post view still gets today's centred toggle row). The toggled post view
 * surfaces the top stripe as well, so the row bookends the Sections; in the
 * inline slider the top stripe is hidden except when it carries the toggle,
 * which is then clipped to keep it in the reading order — see the top-stripe
 * rules below.
 */
.slaidz--nav-default .slaidz__nav,
.slaidz--post .slaidz__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	border-bottom: 1px solid #e0e0e0;
}

/*
 * The inline slider shows only the bottom stripe; the top stripe is the
 * full-page view's invisible side-arrow layer (see .slaidz--fullscreen) and,
 * in the toggled post view, a second centred toggle row before the first
 * Section. This blanket hide is the base and the fallback for engines without
 * `:has()`; the clipped rule below overrides it when the stripe carries the
 * toggle.
 */
.slaidz:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top {
	display: none;
}

/* AT-only top stripe: when the inline slider's top stripe carries the post-view
 * toggle, it swaps the blanket hide (above — the fallback for engines without
 * :has()) for the clipped technique, so "Show all steps" stays in the reading
 * order *before* the first Section while sighted users keep today's chrome.
 * These are the highest-specificity rules on the stripe — future inline
 * top-stripe rules must account for them. */
.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top:has(.slaidz__nav-toggle) {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Never duplicate navigation in the clipped stripe: its arrows and actions
 * cells leave the tree, so the top landmark carries exactly the toggle. */
.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top .slaidz__nav-arrows,
.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top .slaidz__nav-actions {
	display: none;
}

/* Focus reveal (skip-link pattern): any focus inside the stripe un-clips it as
 * an overlay chip pinned to the guide's top-left, so keyboard focus stays
 * perceivable (WCAG 2.4.7) without shifting the page. The toggle takes the
 * bottom stripe's icon metrics so the chip matches it, and the chip takes the
 * inline slider's palette — the background color at 80%. */
.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top:has(.slaidz__nav-toggle):focus-within {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.25rem;
	overflow: visible;
	clip: auto;
	white-space: normal;
	top: 0.25rem;
	left: 0.25rem;
	z-index: 3;
	background: var( --slaidz-slider-chip-bg );
	border-radius: 3px;
}

.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top:has(.slaidz__nav-toggle):focus-within .slaidz__post-toggle {
	padding: var( --slaidz-nav-pad );
}

.slaidz--slider:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__nav--top:has(.slaidz__nav-toggle):focus-within .slaidz__post-toggle svg {
	width: var( --slaidz-nav-icon );
	height: var( --slaidz-nav-icon );
}

.slaidz--nav-default .slaidz__nav-toggle,
.slaidz--post .slaidz__nav-toggle {
	display: flex;
	grid-column: 1;
	align-items: center;
	justify-self: start;
	gap: 0.25rem;
}

/* In post view the toggle is the only visible control; centre it. */
.slaidz--post .slaidz__nav-toggle {
	grid-column: 1 / -1;
	justify-self: center;
}

.slaidz--nav-default .slaidz__nav-arrows {
	display: flex;
	grid-column: 2;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.slaidz--nav-default .slaidz__nav-actions {
	display: flex;
	grid-column: 3;
	align-items: center;
	justify-self: end;
	gap: 0.25rem;
}

.slaidz--nav-default .slaidz__nav--bottom,
.slaidz--post .slaidz__nav--bottom {
	padding: var( --slaidz-nav-pad );
	border-bottom: 0;
}

/* The toggled post view's top stripe mirrors the bottom row's padding (after
 * the base grid rule, so source order wins); the grid rule's border-bottom is
 * the row separator. */
.slaidz--post .slaidz__nav--top {
	padding: var( --slaidz-nav-pad );
}

.slaidz__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
}

/*
 * An unavailable end arrow keeps its slot in a visible muted treatment:
 * pointer interaction is suppressed and keyboard focus restores full opacity,
 * so `:focus-visible` stays perceivable on the muted control.
 */
.slaidz__button--unavailable {
	opacity: 0.4;
	pointer-events: none;
}

.slaidz__button--unavailable:focus-visible {
	opacity: 1;
}

.slaidz__post-toggle {
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	white-space: nowrap;
}

/* The toggle carries both states' contents; the root mode shows one. */
.slaidz--slider .slaidz__post-toggle .slaidz__post-text {
	display: none;
}

.slaidz--post .slaidz__post-toggle .slaidz__post-icon {
	display: none;
}

/*
 * The bottom stripe consumes the navigation size scale (custom properties on
 * `.slaidz`). Scoped to the default design's bottom stripe so the full-page
 * view's side-arrow strips (which also use `.slaidz__button` inside
 * `.slaidz__nav--top`) keep their own sizing.
 */
.slaidz--nav-default .slaidz__nav--bottom .slaidz__button {
	padding: var( --slaidz-nav-pad );
}

.slaidz--nav-default .slaidz__nav--bottom .slaidz__button svg {
	width: var( --slaidz-nav-icon );
	height: var( --slaidz-nav-icon );
}

/*
 * The position counter shares the bottom stripe's design; Custom ships no
 * styling, like the rest of its navigation. Tabular
 * digits keep the number's width stable as it grows.
 */
.slaidz--nav-default .slaidz__nav--bottom .slaidz__counter {
	font-size: 0.875rem;
	line-height: 1.4;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * The toggle's wide padding and larger font belong to its text state (post
 * view); the icon state falls through to the stripe's icon-button padding.
 * Both stripes carry the toggle there, so both are sized alike.
 */
.slaidz--post .slaidz__nav--top .slaidz__post-toggle,
.slaidz--post .slaidz__nav--bottom .slaidz__post-toggle {
	padding: var( --slaidz-nav-pad ) var( --slaidz-nav-pad-wide );
	font-size: var( --slaidz-nav-toggle-font );
}

/*
 * Post view hides navigation, the full-page control and the counters; the
 * toggle stays.
 */
.slaidz--post .slaidz__nav-arrows,
.slaidz--post .slaidz__fullscreen,
.slaidz--post .slaidz__counter {
	display: none;
}

.slaidz__viewport {
	position: relative;
}

.slaidz:not(.slaidz--fullscreen):not(.slaidz--post) .slaidz__viewport{
	margin-left: 2px;
	margin-right: 2px;
}

.slaidz--animating {
	overflow: hidden;
}

.slaidz__section {
	display: block;
}

.slaidz__title {
	position: relative;
}

/*
 * Post-view spacing from the settings. Each rule is gated on its own class,
 * emitted only when the matching margin is greater than zero, so an install
 * that leaves the margins at 0 keeps the theme's spacing untouched. Both the
 * `display="post"` output and a slider toggled to the post view carry
 * `.slaidz--post`, so one rule serves both.
 */
.slaidz--post-title-margin.slaidz--post .slaidz__title {
	margin-bottom: var( --slaidz-post-title-margin );
}

.slaidz--post-image-margin.slaidz--post .slaidz__image-band {
	margin-bottom: var( --slaidz-post-image-margin );
}

.slaidz--post-section-margin.slaidz--post .slaidz__section + .slaidz__section {
	margin-top: var( --slaidz-post-section-margin );
}

/*
 * Post-view image rounded corners from the settings, gated on the emitted
 * class so a radius left at 0 keeps the frames square, and double gated on
 * `.slaidz--post` so the inline slider and the full-page view are unaffected.
 */
.slaidz--post-image-radius.slaidz--post .slaidz__image-wrap {
	border-radius: var( --slaidz-post-image-radius );
}

/*
 * Universal clip frames. The frame is CSS-owned from first paint, so no-JS
 * visitors and pre-JS readers get the same box in every view; the script only
 * maps the image's `object-position` and the marker inside it. Without
 * JavaScript the image stays centered and the marker keeps its raw stored
 * coordinates (the documented no-JS exception).
 */
.slaidz__image-wrap {
	position: relative;
	display: block;
	width: 100%;
	background: #f3f3f3;
	aspect-ratio: var( --slaidz-clip-ratio );
	overflow: hidden;
}

/*
 * The media/image/placeholder rules are shared by every view: all follow one
 * markup contract, so the declarations live once.
 */
.slaidz__image-media {
	display: block;
	height: 100%;
}

.slaidz__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.slaidz__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.slaidz__image--placeholder {
	color: #757575;
}

.slaidz__pointer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var( --slaidz-pointer-size, 24px );
	height: var( --slaidz-pointer-size, 24px );
	border: var( --slaidz-pointer-border, 2px ) solid #fff;
	border-radius: 50%;
	background: var( --slaidz-pointer-bg );
	box-shadow: 0 0 0 calc( var( --slaidz-pointer-size, 24px ) * 0.0833 ) rgba( 0, 0, 0, 0.25 );
	transform: translate(-50%, -50%);
	transition: left 0.6s ease, top 0.6s ease, opacity 0.3s ease;
	animation: slaidz-pointer-pulse 1.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.slaidz__pointer--is-hidden {
	opacity: 0;
}

/* In slider mode the injected viewport marker replaces the per-Section ones. */
.slaidz--slider .slaidz__section .slaidz__pointer {
	display: none;
}

/* In post view the injected viewport marker is hidden. */
.slaidz--post .slaidz__pointer--persistent {
	display: none;
}

/*
 * Branding badge: the "Made with Slaidz" anchor on the guide's last image.
 * A sibling of the image group and the marker inside the clip frame, so it
 * is never cover-mapped with the image. The marker keeps z-index 1 and wins
 * over the badge in the inline view; the full-page side-arrow strips
 * (z-index 2) cover the frame's right edge whenever it is full-bleed, so the
 * badge must sit above them to stay clickable instead of triggering
 * navigation.
 */
.slaidz__brand {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.125rem 0.375rem;
	border-radius: 3px 0 0 0;
	background:rgb(11 125 146 / 74%);
	color: #fff;
	font-size: .9rem;
	line-height: 1.3;
	text-decoration: none;
}

.slaidz__brand:hover,
.slaidz__brand:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	color: #1d2327;
	text-decoration: underline;
}

.slaidz--fullscreen .slaidz__brand {
	z-index: 3;
}

/* Dark full-page overlay: flip the badge with the rest of the palette. */
.slaidz--overlay-dark.slaidz--fullscreen .slaidz__brand {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__brand:hover,
.slaidz--overlay-dark.slaidz--fullscreen .slaidz__brand:focus-visible {
	background: rgba(0, 0, 0, 0.7);
}

.slaidz .slaidz__ghost {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.slaidz__description,
.slaidz__long-description {
	position: relative;
}

/*
 * Slider-mode text styling. Post view carries none of this, so its text
 * inherits the active theme.
 */
.slaidz--slider .slaidz__title {
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	text-align: center;
	color: inherit;
}

.slaidz--slider .slaidz__title-text {
	display: block;
	padding: 0.5rem 0.75rem;
}

.slaidz--slider .slaidz__figure {
	margin: 0;
}

.slaidz--slider .slaidz__caption {
	display: block;
}

.slaidz--slider .slaidz__description {
	min-height: 0;
	margin: 0;
	padding: 0;
	white-space: pre-line;
}

.slaidz--slider .slaidz__description-text {
	display: block;
	padding: 0.5rem 0.75rem;
	text-align: center;
}

.slaidz--slider:not(.slaidz--fullscreen) .slaidz__description-text {
	background-color: #222;
	color: #fff;
}

/*
 * Caption swap. Without JavaScript (and in post view) a Section with a long
 * description shows it instead of the short one; the slider swaps back.
 */
.slaidz:not(.slaidz--slider) .slaidz__section--has-long .slaidz__description {
	display: none;
}

.slaidz--slider .slaidz__long-description {
	display: none;
}

/*
 * Full-page view: the slider root is promoted out of page flow to the
 * viewport. A placeholder spacer (sized by the script) holds the root's place
 * so the page does not reflow. One render path serves inline and fullscreen,
 * so only layout changes here.
 */
.slaidz__fullscreen-spacer {
	display: block;
	width: 100%;
}

.slaidz--fullscreen {
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	max-width: none;
	background: #ffffff;
	border: 0;
	color: #1d2327;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * `.slaidz.slaidz--fullscreen` (not `.slaidz--fullscreen` alone) outranks the
 * default design rules (`.slaidz--nav-default .slaidz__nav…`, equal
 * specificity otherwise), so the full-page presentation wins on specificity
 * rather than source order — a later default-design rule cannot leak the
 * stripe grid, padding or border into the promoted view.
 */
.slaidz.slaidz--fullscreen .slaidz__nav--bottom,
.slaidz.slaidz--fullscreen .slaidz__nav-toggle,
.slaidz.slaidz--fullscreen .slaidz__nav-actions,
.slaidz.slaidz--fullscreen .slaidz__post-toggle,
.slaidz.slaidz--fullscreen .slaidz__fullscreen {
	display: none;
}

/*
 * The top stripe becomes a transparent full-viewport layer with vertically 
 * centered arrows (pointer-active), the rest of the layer click-through.
 */
.slaidz.slaidz--fullscreen .slaidz__nav--top {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	padding: 0;
	border: 0;
	pointer-events: none;
}

.slaidz--fullscreen .slaidz__nav--top .slaidz__nav-arrows {
	position: absolute;
	inset: 0;
	display: flex;
	margin: 0 1em;
	justify-content: space-between;
	gap: 0;
}

.slaidz--fullscreen .slaidz__nav--top .slaidz__button {
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.08);
	color: #1d2327;
	padding: 10px;
	border-radius: 100%;
}

.slaidz--fullscreen .slaidz__nav--top .slaidz__button.slaidz__prev{
}

.slaidz--fullscreen .slaidz__nav-arrows svg {
	width: calc(var( --slaidz-nav-icon ) * 1.5);
	height: calc(var( --slaidz-nav-icon ) * 1.5);
}

/* Only available strips take clicks; the unavailable rule's suppression stands. */
.slaidz--fullscreen .slaidz__nav--top .slaidz__button:not(.slaidz__button--unavailable) {
	pointer-events: auto;
}

.slaidz--fullscreen .slaidz__nav--top .slaidz__button:hover,
.slaidz--fullscreen .slaidz__nav--top .slaidz__button:focus-visible {
	background: rgba(0, 0, 0, 0.16);
}

.slaidz--fullscreen .slaidz__viewport {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.slaidz--fullscreen .slaidz__section:not([hidden]) {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.slaidz--fullscreen .slaidz__title {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #1d2327;
}

.slaidz--fullscreen .slaidz__title-text {
	padding: 1rem 11%;
}

/*
 * The figure is a column: the image band takes the free space, the caption sits
 * below it. The band — not the figure — is the size query container, so `100cqh`
 * measures the image area alone; the ratio-fit frame is never overestimated by
 * the caption's height. `ratio` / `ratio_narrow` move it with the emitted
 * custom property.
 */
.slaidz--fullscreen .slaidz__figure {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.slaidz--fullscreen .slaidz__image-band {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	container-type: size;
}

.slaidz--fullscreen .slaidz__image-wrap {
	width: min(100cqw, calc(100cqh * var(--slaidz-clip-ratio)));
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: var(--slaidz-clip-ratio);
	background: #2a2a2a;
}

.slaidz--fullscreen .slaidz__image--placeholder {
	color: #757575;
}

.slaidz--fullscreen .slaidz__caption {
	flex: 0 0 auto;
	display: block;
}

.slaidz--fullscreen .slaidz__description {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #3c434a;
	white-space: pre-line;
}

.slaidz--fullscreen .slaidz__description-text {
	padding: 0.75rem 11%;
}

/*
 * Description blob: the small rectangle with the current Section's short
 * description and its own prev/next arrows, shown beside the Pointer in the
 * full-page view on wide screens. It ships `hidden`; JavaScript positions it
 * in pixels (the Pointer's left/top are a centre, so the blob adds half the
 * pointer size as the gap) and removes the attribute when it shows. Outside
 * the gate below — narrow viewports, the inline slider, the post view — it
 * stays `display: none`; `--is-hidden` fades it like the Pointer and takes
 * its arrows out of clicks, and `slaidz.js` skips them in the focus trap.
 *
 * Both the blob and its caption swap are gated on `.slaidz--blob-ready`,
 * which the script adds only when the markup carries a usable blob — so
 * older cached markup keeps its caption instead of hiding text it cannot
 * replace.
 */
.slaidz__blob {
	display: none;
}

.slaidz__blob-text{
	margin-bottom: 6px !important;
	font-size: 1.1rem;
}

@media (min-width: 1280px) {
	.slaidz--fullscreen.slaidz--blob-ready .slaidz__blob {
		position: absolute;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		width: max-content;
		max-width: 15vw;
		padding: 0.375rem 0.5rem;
		border-radius: 6px;
		background: var( --slaidz-blob-bg );
		color: var( --slaidz-blob-text );
		font-size: 0.8125rem;
		line-height: 1.4;
		white-space: pre-line;
		transition: left 0.6s ease, top 0.6s ease, opacity 0.3s ease;
	}

	.slaidz--fullscreen .slaidz__blob--is-hidden {
		opacity: 0;
		pointer-events: none;
	}

	.slaidz--fullscreen .slaidz__blob-arrows {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
	}

	/* The blob replaces the bottom caption of a Pointer Section. */
	.slaidz--fullscreen.slaidz--blob-ready .slaidz__section--has-pointer .slaidz__description {
		display: none;
	}
}

/*
 * The full-page control group — the position counter and the close control —
 * exists only in the full-page view, anchored top-right; the counter inherits
 * the view's palette, so it flips on the dark overlay for free.
 */
.slaidz__fullscreen-controls {
	display: none;
}

.slaidz--fullscreen .slaidz__fullscreen-controls {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.slaidz--fullscreen .slaidz__close {
	display: inline-flex;
	color: #1d2327;
	border-radius: 100px;
	padding: 14px;
	background: rgba(0, 0, 0, 0.08);
}

.slaidz--fullscreen .slaidz__close:hover,
.slaidz--fullscreen .slaidz__close:focus-visible {
	background: rgba(0, 0, 0, 0.16);
}

/*
 * Dark full-page overlay (`overlay_bg` = black). The gate class is appended to
 * the shortcode root by PHP; `.slaidz--fullscreen` is added at runtime by
 * `slaidz.js`, so the pair selects only the promoted view. Placed after the
 * light palette above so its higher-specificity rules win.
 */
.slaidz--overlay-dark.slaidz--fullscreen {
	background: #000000;
	color: #ffffff;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__title {
	color: #ffffff;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__description {
	color: #f0f0f0;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__image--placeholder {
	color: #bbbbbb;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__nav--top .slaidz__button {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__nav--top .slaidz__button:hover,
.slaidz--overlay-dark.slaidz--fullscreen .slaidz__nav--top .slaidz__button:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__close {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

.slaidz--overlay-dark.slaidz--fullscreen .slaidz__close:hover,
.slaidz--overlay-dark.slaidz--fullscreen .slaidz__close:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

/* Visually hidden live region announcing the landed Section in both views. */
.slaidz__live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.slaidz-overlay-open {
	overflow: hidden;
}

@keyframes slaidz-pointer-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 calc( var( --slaidz-pointer-size, 24px ) * 0.0833 ) rgba( 0, 0, 0, 0.25 );
	}

	50% {
		box-shadow: 0 0 0 calc( var( --slaidz-pointer-size, 24px ) * 0.2917 ) var( --slaidz-pointer-ring );
	}
}

@media (max-width: 782px) {
	.slaidz__image-wrap {
		aspect-ratio: var( --slaidz-clip-ratio-narrow );
	}

	.slaidz--fullscreen .slaidz__image-wrap {
		width: min(100cqw, calc(100cqh * var(--slaidz-clip-ratio-narrow)));
		aspect-ratio: var( --slaidz-clip-ratio-narrow );
	}
}

@media (prefers-reduced-motion: reduce) {
	.slaidz__pointer,
	.slaidz__blob {
		transition: none;
		animation: none;
	}
}