/**
 * Sideways8 Blocks — base tokens + shared component styles.
 *
 * TOKENS
 * Blocks only use the --sw8-* variables below. Each one maps to the theme's
 * theme.json preset first, then the legacy BB theme variable, then a fallback.
 * A theme can also override any --sw8-* variable directly on :root.
 */

:root {
	/* Colors */
	--sw8-primary: var(--wp--preset--color--primary, var(--sw-primary, #13294b));
	--sw8-primary-dark: var(--wp--preset--color--primary-dark, var(--sw-primary-dark, #0b1a30));
	--sw8-secondary: var(--wp--preset--color--secondary, var(--sw-secondary, #3c6e47));
	--sw8-accent: var(--wp--preset--color--accent, var(--sw-accent, #e3a72f));
	--sw8-white: var(--wp--preset--color--white, var(--sw-white, #ffffff));
	--sw8-black: var(--wp--preset--color--black, var(--core-black, #111111));
	--sw8-text: var(--wp--preset--color--contrast, var(--sw8-black));
	--sw8-surface: var(--wp--preset--color--surface, #f4f4f2);
	--sw8-border: var(--wp--preset--color--border, var(--sw-border, #d9d9d6));

	/* Typography */
	--sw8-font-heading: var(--wp--preset--font-family--heading, inherit);
	--sw8-font-body: var(--wp--preset--font-family--body, inherit);

	/* Shape + spacing */
	--sw8-radius: var(--wp--custom--radius, 8px);
	--sw8-radius-lg: var(--wp--custom--radius-lg, 16px);
	--sw8-gap: var(--wp--preset--spacing--40, 1.5rem);
	--sw8-gap-lg: var(--wp--preset--spacing--60, 3rem);
	--sw8-shadow: 0 10px 30px rgb(0 0 0 / 0.08);

	/* Motion */
	--sw8-ease: cubic-bezier(0.42, 0, 0.58, 1);
	--sw8-duration: 200ms;
}

/* ---------------------------------------------------------------------------
 * Editor placeholder (empty blocks)
 * ------------------------------------------------------------------------- */
.sw8-placeholder {
	padding: 1.5rem;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * Icons
 * ------------------------------------------------------------------------- */
.sw8-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: middle;
	object-fit: contain;
}

svg.sw8-icon:not([fill]) {
	fill: currentColor;
}

.sw8-icon.dashicons {
	font-size: 1em;
}

/* ---------------------------------------------------------------------------
 * Buttons (ported from bb-sideways src/sass/_button.scss)
 * ------------------------------------------------------------------------- */
.sw8-btn {
	--_btn-color: var(--button-primary--color-text, var(--sw8-white));
	--_btn-color-hover: var(--button-primary--color-text-hover, var(--sw8-white));
	--_btn-bg: var(--button-primary--color-background, var(--sw8-primary));
	--_btn-bg-hover: var(--button-primary--color-background-active, var(--sw8-primary-dark));
	--_btn-border: transparent;

	display: inline-block;
	margin: 0;
	padding: var(--button--padding-vertical, 0.875rem) var(--button--padding-horizontal, 1.75rem);
	border: var(--button--border-width, 2px) solid var(--_btn-border);
	border-radius: var(--button--border-radius, var(--sw8-radius));
	background-color: var(--_btn-bg);
	color: var(--_btn-color);
	font-family: var(--button--font-family, inherit);
	font-size: var(--button--font-size, 1rem);
	font-weight: var(--button--font-weight, 700);
	line-height: var(--button--line-height, 1.2);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition-property: color, background-color, border-color;
	transition-duration: var(--sw8-duration);
	transition-timing-function: var(--sw8-ease);

	&:hover,
	&:active {
		background-color: var(--_btn-bg-hover);
		color: var(--_btn-color-hover);
		text-decoration: underline;
	}

	&:focus-visible {
		outline: 2px dotted currentColor;
		outline-offset: -6px;
	}
}

.sw8-btn--secondary {
	--_btn-color: var(--button-secondary--color-text, var(--sw8-white));
	--_btn-color-hover: var(--button-secondary--color-text-hover, var(--sw8-white));
	--_btn-bg: var(--button-secondary--color-background, var(--sw8-secondary));
	--_btn-bg-hover: var(--button-secondary--color-background-active, var(--sw8-primary));
}

.sw8-btn--tertiary {
	--_btn-color: var(--button-tertiary--color-text, var(--sw8-primary));
	--_btn-color-hover: var(--button-tertiary--color-text-hover, var(--sw8-primary));
	--_btn-bg: var(--button-tertiary--color-background, var(--sw8-accent));
	--_btn-bg-hover: var(--button-tertiary--color-background-active, var(--sw8-white));
	--_btn-border: var(--button--border-color, transparent);
}

.sw8-btn--outline {
	--_btn-color: var(--button-outline--color-text, var(--sw8-primary));
	--_btn-color-hover: var(--button-outline--color-text-hover, var(--sw8-white));
	--_btn-bg: var(--button-outline--color-background, transparent);
	--_btn-bg-hover: var(--button-outline--color-background-active, var(--sw8-primary));
	--_btn-border: currentColor;
}

.sw8-btn--small {
	padding: 0.25rem 0.75rem;
	border-radius: 3px;
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Slider (shared by all carousel blocks — see assets/js/slider.js)
 * ------------------------------------------------------------------------- */
.sw8-slider {
	--_spv: var(--sw8-spv, 1);

	position: relative;

	@media (min-width: 768px) { --_spv: var(--sw8-spv-md, var(--sw8-spv, 1)); }
	@media (min-width: 992px) { --_spv: var(--sw8-spv-lg, var(--sw8-spv-md, var(--sw8-spv, 1))); }
	@media (min-width: 1200px) { --_spv: var(--sw8-spv-xl, var(--sw8-spv-lg, var(--sw8-spv-md, var(--sw8-spv, 1)))); }

	.swiper {
		overflow: hidden;
	}

	/* Before JS runs (and in the editor preview): same slides-per-view as the carousel, no wrapping. */
	&:not(.is-initialized) .swiper-wrapper {
		display: flex;
		gap: var(--sw8-slider-gap, var(--sw8-gap));
		overflow: hidden;
	}

	&:not(.is-initialized) .swiper-slide {
		flex: 0 0 auto;
		width: calc((100% - (var(--_spv) - 1) * var(--sw8-slider-gap, 24px)) / var(--_spv));
	}
}

.sw8-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.sw8-slider__prev,
.sw8-slider__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--sw8-duration) var(--sw8-ease), color var(--sw8-duration) var(--sw8-ease);

	svg {
		width: 20px;
		height: 20px;
	}

	&:hover:not(:disabled) {
		background-color: var(--sw8-primary);
		border-color: var(--sw8-primary);
		color: var(--sw8-white);
	}

	&:disabled,
	&.swiper-button-disabled {
		opacity: 0.35;
		cursor: default;
	}

	&.swiper-button-lock {
		display: none;
	}
}

.sw8-slider__dots {
	display: flex;
	gap: 0.5rem;

	&:empty {
		display: none;
	}

	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 !important;
		background: currentColor;
		opacity: 0.3;
	}

	.swiper-pagination-bullet-active {
		opacity: 1;
	}
}

/* Per-breakpoint hide classes added by sw8_slider(). sm = < 768, md = 768–991, lg = 992–1199, xl = ≥ 1200 */
@media (max-width: 767px) {
	.sw8-slider--no-arrows-sm .sw8-slider__prev,
	.sw8-slider--no-arrows-sm .sw8-slider__next,
	.sw8-slider--no-dots-sm .sw8-slider__dots { display: none; }
	.sw8-slider--no-arrows-sm.sw8-slider--no-dots-sm .sw8-slider__controls { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.sw8-slider--no-arrows-md .sw8-slider__prev,
	.sw8-slider--no-arrows-md .sw8-slider__next,
	.sw8-slider--no-dots-md .sw8-slider__dots { display: none; }
	.sw8-slider--no-arrows-md.sw8-slider--no-dots-md .sw8-slider__controls { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.sw8-slider--no-arrows-lg .sw8-slider__prev,
	.sw8-slider--no-arrows-lg .sw8-slider__next,
	.sw8-slider--no-dots-lg .sw8-slider__dots { display: none; }
	.sw8-slider--no-arrows-lg.sw8-slider--no-dots-lg .sw8-slider__controls { display: none; }
}
@media (min-width: 1200px) {
	.sw8-slider--no-arrows-xl .sw8-slider__prev,
	.sw8-slider--no-arrows-xl .sw8-slider__next,
	.sw8-slider--no-dots-xl .sw8-slider__dots { display: none; }
	.sw8-slider--no-arrows-xl.sw8-slider--no-dots-xl .sw8-slider__controls { display: none; }
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------- */
.sw8-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	[class*="wp-block-sw8-"] *,
	[class*="wp-block-sw8-"] *::before,
	[class*="wp-block-sw8-"] *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}