/**
 * Global Styles — Atomicdust Base Theme v3
 *
 * Site-wide styles that extend theme.json.
 * No hardcoded hex values — use var(--wp--preset--color--).
 * No hardcoded font stacks — use var(--wp--preset--font-family--).
 */

/* -----------------------------------------------
   Vertical Rhythm
   ----------------------------------------------- */

/* Consistent spacing between content blocks.
   Uses margin-top on siblings so first-child has no extra space.
   Override per-pattern only when needed. */

/*
 * DISABLED — these rules fight native blockGap and use !important overrides.
 * Spacing is now handled via block attributes (blockGap, margin) per pattern.
 *
 * .wp-block-heading + *, etc. → --ad-space-md
 * * + .wp-block-heading → --ad-space-lg
 * .ad-section-label + .wp-block-heading → --ad-space-xs
 * .wp-block-heading + .wp-block-paragraph, etc. → --ad-space-sm !important
 * h3–h6 + .wp-block-paragraph → --ad-space-sm !important
 * h2/h3 + .wp-block-group/.wp-block-columns → --ad-space-lg !important
 */

/* -----------------------------------------------
   Button Tokens
   ----------------------------------------------- */

:root {
	/* Spacing tokens — vertical rhythm */
	--ad-space-xs: clamp(0.4rem, 0.8vw, 0.8rem);
	--ad-space-sm: clamp(0.8rem, 1.6vw, 1.2rem);
	--ad-space-md: clamp(1.2rem, 2.4vw, 2rem);
	--ad-space-lg: clamp(2.4rem, 4.8vw, 4rem);

	/* Button tokens */
	--ad-btn-radius: 0.25rem;
	--ad-btn-padding: 1rem 2rem;
	--ad-btn-font-size: var(--wp--preset--font-size--sm);
	--ad-btn-font-weight: 500;
	--ad-btn-line-height: 1;
	--ad-btn-transition: 0.25s ease;

	/* Shadow tokens */
	--ad-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--ad-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
	--ad-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------------
   Button Base
   ----------------------------------------------- */

.ad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ad-btn-padding);
	border-radius: var(--ad-btn-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ad-btn-font-size);
	font-weight: var(--ad-btn-font-weight);
	line-height: var(--ad-btn-line-height);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ad-btn-transition), color var(--ad-btn-transition), opacity var(--ad-btn-transition);
}

.ad-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-btn--outline {
	border: 1px solid rgba(10, 10, 10, 0.2);
	background: none;
	color: var(--wp--preset--color--primary);
}

.ad-btn--outline:hover {
	background-color: var(--wp--preset--color--muted);
}

.ad-btn--filled {
	border: 1px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
}

.ad-btn--filled:hover {
	opacity: 0.85;
}

/* -----------------------------------------------
   Core Button — Hover & Focus States
   (Base styles in theme.json: styles.elements.button
   + styles.blocks.core/button.variations.outline)
   ----------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition: background-color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}

/* Filled: subtle dim on hover */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	opacity: 0.85;
}

/* Outline: tint background on hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	border-color: rgba(10, 10, 10, 0.35);
}

/* Focus ring for keyboard navigation */
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* -----------------------------------------------
   Pause/Play Button
   ----------------------------------------------- */

/* Shared pause/play toggle for any animated component.
   Uses CSS custom properties so each context can set colors.
   Default: light background (dark icon on subtle tint). */

.ad-pause-btn {
	--_pause-bg: rgba(0, 0, 0, 0.5);
	--_pause-bg-hover: rgba(0, 0, 0, 0.7);
	--_pause-color: var(--wp--preset--color--secondary);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 0.5rem;
	background: var(--_pause-bg);
	color: var(--_pause-color);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ad-pause-btn:hover {
	background: var(--_pause-bg-hover);
}

.ad-pause-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-pause-btn svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Light-background variant — subtle tint with muted icon */
.ad-pause-btn--light {
	--_pause-bg: rgba(10, 10, 10, 0.06);
	--_pause-bg-hover: rgba(10, 10, 10, 0.12);
	--_pause-color: rgba(10, 10, 10, 0.4);
}

.ad-pause-btn--light:hover {
	color: rgba(10, 10, 10, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.ad-pause-btn {
		transition: none;
	}
}

/* -----------------------------------------------
   Carousel Nav Buttons (Shared)
   ----------------------------------------------- */

/* Shared prev/next control for any scroll-based carousel.
   Uses CSS custom properties so each context can set colors.
   Default: outlined style — subtle border with dark arrows. */

.ad-carousel-btn {
	--_carousel-border: rgba(10, 10, 10, 0.2);
	--_carousel-color: var(--wp--preset--color--primary);
	--_carousel-bg-hover: rgba(10, 10, 10, 0.04);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--_carousel-border);
	border-radius: 50%;
	background: transparent;
	color: var(--_carousel-color);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ad-carousel-btn:hover {
	background: var(--_carousel-bg-hover);
	border-color: rgba(10, 10, 10, 0.35);
}

.ad-carousel-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-carousel-btn:disabled {
	opacity: 0.3;
	pointer-events: none;
}

.ad-carousel-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Dark-background variant — light border with white arrows */
.ad-carousel-btn--dark {
	--_carousel-border: rgba(255, 255, 255, 0.25);
	--_carousel-color: var(--wp--preset--color--secondary);
	--_carousel-bg-hover: rgba(255, 255, 255, 0.1);
}

.ad-carousel-btn--dark:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.ad-carousel-btn {
		transition: none;
	}
}

/* -----------------------------------------------
   Screen Reader Utilities
   ----------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #000;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* -----------------------------------------------
   Cover — Site Padding pass-through
   ----------------------------------------------- */

/* WP core cancels has-global-padding on the cover's inner container.
   When the editor toggle adds has-global-padding to the cover itself,
   route the padding to the inner container so the background stays
   full-bleed while content respects site margins. */
.wp-block-cover.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-cover.has-global-padding > .wp-block-cover__inner-container {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}