/**
 * Global Styles — Atomicdust
 *
 * 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--).
 */

/* -----------------------------------------------
   WP Margin Resets
   Sections control their own vertical spacing.
   ----------------------------------------------- */
.wp-site-blocks > *,
.editor-styles-wrapper > .is-root-container > *,
.entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -----------------------------------------------
   Adjacent same-color section hairline fix
   Fluid clamp() line-heights produce fractional section heights; at
   DPR >= 2, sub-pixel rounding can briefly open a 1-device-pixel seam
   between two sections of the same background. Overlap adjacent
   same-color sections by 1px — invisible because the overlap is on
   matching colors. `primary` and `dark` slugs both resolve to #0e0e0e
   so they're treated as the same color here.
   ----------------------------------------------- */
.has-primary-background-color + .has-primary-background-color,
.has-primary-background-color + .has-dark-background-color,
.has-dark-background-color + .has-primary-background-color,
.has-dark-background-color + .has-dark-background-color,
.has-secondary-background-color + .has-secondary-background-color,
.has-muted-background-color + .has-muted-background-color,
.has-tone-light-background-color + .has-tone-light-background-color {
	margin-top: -1px;
}

/* Restore native block-gap spacing for single post content.
   Pages use section-level groups that manage their own spacing;
   single posts contain paragraphs/headings that need vertical rhythm. */
.single-post .entry-content > * + * {
	margin-block-start: var(--wp--style--block-gap);
	margin-block-end: 0;
}

/* Text Page template: same restoration. These pages hold flowing prose
   (paragraphs, headings, lists) inside post-content rather than self-spacing
   section patterns, so the native block-gap rhythm zeroed above is reinstated. */
.ad-text-page .entry-content > * + * {
	margin-block-start: var(--wp--style--block-gap);
	margin-block-end: 0;
}

/* Single Insights + Work posts: H1 + H2 default to weight 400 (lighter than
   the site-wide 500 from theme.json). Specificity of 0,2,1 beats WP core's
   .wp-block-heading cascade. Inline styles from the editor's typography
   panel (0,1,0,0) still win per-instance. Editor preview is injected
   conditionally via ad_editor_lighter_headings() in functions.php. */
.single-post h1.wp-block-heading,
.single-post h2.wp-block-heading,
.single-post .wp-block-post-title,
.single-work h1.wp-block-heading,
.single-work h2.wp-block-heading,
.single-work .wp-block-post-title {
	font-weight: 400;
}

/* Vertical rhythm is handled by WordPress native blockGap (24px in theme.json).
   Section-to-section gaps zeroed via .wp-site-blocks > * above.
   Per-pattern blockGap overrides control tighter spacing where needed. */

/* -----------------------------------------------
   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: 400;
	--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--primary);
	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 {
	font-weight: 400;
	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);
}

/* Outline buttons on dark grounds carry white text — flip it dark when the
   hover tint appears, or the label vanishes into the light background. */
.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* 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;
}

/* White: inverted button for dark sections */
.wp-block-button.is-style-white .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-white .wp-block-button__link:hover {
	opacity: 0.85;
}

@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: 3px;
	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: #585858;
}

@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 {
	color: #000;
	background-color: #fff;
}

.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);
}

/* -----------------------------------------------
   Hero Pills Strip — feature pills between hero
   and showcase (e.g. Website Design page)
   ----------------------------------------------- */

.ad-hero-pills-strip {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ad-hero-pills-strip .ad-hero-pills {
	row-gap: 0.75rem;
}

.ad-hero-pill {
	align-items: center;
}

/* Modern stroked checkmark icon rendered via SVG data URI.
   Accent blue, rounded linecaps, hairline stroke. */
.ad-hero-pill::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23559ff0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ad-hero-pill .ad-hero-pill__text {
	letter-spacing: 0.01em;
}

/* -----------------------------------------------
   Cookie Policy table
   Page content from atomicdust-consent uses .adc-cookie-table; the plugin
   ships no styling for it, so the theme provides readable defaults.
   ----------------------------------------------- */
.adc-cookie-table {
	width: 100%;
	border-collapse: collapse;
}

.adc-cookie-table th,
.adc-cookie-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--tone-dark);
}

.adc-cookie-table thead th {
	font-weight: 500;
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Narrow viewports: let the wide 5-column table scroll instead of overflowing. */
@media (max-width: 600px) {
	.adc-cookie-table {
		display: block;
		overflow-x: auto;
	}
}