/**
 * Component Token CSS — Styles patterns using Style Guide tokens.
 *
 * Two delivery mechanisms:
 * 1. CSS classes (sg-card, sg-badge, sg-section-dark) — pattern team adds manually
 * 2. Global overrides (buttons, links, images, inputs) — automatic, no class needed
 *
 * Works WITH Spectra's existing CSS variable rendering:
 * - Containers use --spectra-background-color via ::before
 * - Buttons use --spectra-background-color + --spectra-text-color
 *
 * @package SpectraBlocksPro\StyleGuide
 * @since   3.2.0
 */

/* ================================================================
   CARDS
   sg-card → applied to uagb/container blocks that serve as cards
   ================================================================ */

.sg-card {
	border-width: var(--spectra-card-border-width) !important;
	border-style: var(--spectra-card-border-style) !important;
	border-color: var(--spectra-card-border-color) !important;
	border-radius: var(--spectra-radius-card) !important;
	box-shadow: var(--spectra-card-shadow) !important;
	overflow: hidden;
	transition:
		box-shadow var(--spectra-transition-normal, 250ms) ease,
		transform var(--spectra-transition-normal, 250ms) ease;
}

/* Override Spectra container's ::before background when card class is present. */
.sg-card.spectra-background-color::before {
	background: var(--spectra-card-bg) !important;
	border-radius: inherit;
}

/* Ensure card border-radius applies to inner content. */
.sg-card > .uagb-container-inner_wrap {
	border-radius: inherit;
}

/* Card hover states. */
.sg-card:hover {
	box-shadow: var(--spectra-card-hover-shadow) !important;
	transform: translateY(var(--spectra-card-hover-translate-y));
}

/* ================================================================
   GLOBAL BUTTON OVERRIDE
   Targets ALL buttons — no sg-btn-primary class needed on patterns.
   Primary: default .wp-element-button
   Secondary: .is-style-outline .wp-element-button
   ================================================================ */

/*
 * Primary button: background-color and color use NO !important so that
 * inline styles (e.g. background-color:#ffffff00 for ghost/link buttons)
 * take precedence. Structural properties (border, radius, shadow) keep
 * !important to ensure consistent design system styling.
 */
.wp-block-button:not(.is-style-outline) .wp-element-button,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--spectra-btn-bg);
	color: var(--spectra-btn-text);
	border-width: var(--spectra-btn-border-width) !important;
	border-style: var(--spectra-btn-border-style) !important;
	border-color: var(--spectra-btn-border-color) !important;
	border-radius: var(--spectra-radius-interactive) !important;
	box-shadow: var(--spectra-btn-shadow) !important;
	transition:
		background-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease,
		transform var(--spectra-transition-normal, 250ms) ease;
}

.wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--spectra-btn-hover-bg);
	color: var(--spectra-btn-hover-text);
	box-shadow: var(--spectra-btn-hover-shadow) !important;
	transform: translateY(var(--spectra-btn-hover-translate-y));
}

.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--spectra-btn-secondary-bg);
	color: var(--spectra-btn-secondary-text);
	border-width: var(--spectra-btn-secondary-border-width) !important;
	border-style: var(--spectra-btn-secondary-border-style) !important;
	border-color: var(--spectra-btn-secondary-border-color) !important;
	border-radius: var(--spectra-radius-interactive) !important;
	transition:
		background-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease,
		transform var(--spectra-transition-normal, 250ms) ease;
}

.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	transform: translateY(var(--spectra-btn-hover-translate-y));
}

/* Spectra button blocks (uagb/buttons-child). */
.spectra-button__link {
	transition:
		background-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease,
		transform var(--spectra-transition-normal, 250ms) ease;
}

.spectra-button__link:hover {
	transform: translateY(var(--spectra-btn-hover-translate-y));
}

/* Keep sg-btn-primary/secondary classes for backwards compatibility. */
.sg-btn-primary .wp-block-button__link,
.sg-btn-primary.wp-block-button__link {
	--spectra-background-color: var(--spectra-btn-bg) !important;
	--spectra-text-color: var(--spectra-btn-text) !important;
	border-width: var(--spectra-btn-border-width) !important;
	border-style: var(--spectra-btn-border-style) !important;
	border-color: var(--spectra-btn-border-color) !important;
	border-radius: var(--spectra-radius-interactive) !important;
	box-shadow: var(--spectra-btn-shadow) !important;
}

.sg-btn-secondary .wp-block-button__link,
.sg-btn-secondary.wp-block-button__link {
	--spectra-background-color: var(--spectra-btn-secondary-bg) !important;
	--spectra-text-color: var(--spectra-btn-secondary-text) !important;
	border-width: var(--spectra-btn-secondary-border-width) !important;
	border-style: var(--spectra-btn-secondary-border-style) !important;
	border-color: var(--spectra-btn-secondary-border-color) !important;
	border-radius: var(--spectra-radius-interactive) !important;
}

/* ================================================================
   SECTIONS
   sg-section → section wrappers with token-based padding
   ================================================================ */

.sg-section {
	padding-top: var(--spectra-section-padding-y) !important;
	padding-bottom: var(--spectra-section-padding-y) !important;
}

/* ================================================================
   GLOBAL FORM INPUT OVERRIDE
   Targets all form elements — no class needed on patterns.
   ================================================================ */

.entry-content
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
		[type='hidden']
	),
.entry-content textarea,
.entry-content select:not(.ts-hidden-accessible),
.wp-block-search__input {
	background-color: var(--spectra-input-bg) !important;
	color: var(--spectra-input-text) !important;
	border-color: var(--spectra-input-border-color) !important;
	border-width: var(--spectra-input-border-width) !important;
	border-style: var(--spectra-input-border-style) !important;
	border-radius: var(--spectra-radius-input) !important;
	transition:
		border-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease;
}

.entry-content
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
		[type='hidden']
	)::placeholder,
.entry-content textarea::placeholder,
.wp-block-search__input::placeholder {
	color: var(--spectra-input-placeholder) !important;
}

.entry-content
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
		[type='hidden']
	):focus,
.entry-content textarea:focus,
.entry-content select:not(.ts-hidden-accessible):focus,
.wp-block-search__input:focus {
	border-color: var(--spectra-input-focus-border) !important;
	box-shadow: var(--spectra-input-focus-shadow) !important;
	outline: none;
}

/* ================================================================
   SUREFORMS INTEGRATION
   Apply Spectra Pro input tokens to SureForms form fields.
   ================================================================ */

.srfm-form-container .srfm-input-common:not(.srfm-input-number),
.srfm-form-container .srfm-input-number,
.srfm-form-container .srfm-input-textarea,
.srfm-form-container textarea,
.srfm-form-container select:not(.ts-hidden-accessible) {
	background-color: var(--spectra-input-bg) !important;
	color: var(--spectra-input-text) !important;
	border-color: var(--spectra-input-border-color) !important;
	border-width: var(--spectra-input-border-width) !important;
	border-style: var(--spectra-input-border-style) !important;
	border-radius: var(--spectra-radius-input) !important;
	transition:
		border-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease;
}

/* TomSelect: reset hidden select and inner input to prevent double border. */
.srfm-form-container select.ts-hidden-accessible {
	border: none !important;
	background: transparent !important;
}

.srfm-form-container
	.ts-wrapper
	.ts-control
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
		[type='hidden']
	) {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* TomSelect dropdown wrapper — used by SureForms for dropdowns. */
.srfm-form-container .ts-wrapper .ts-control {
	background-color: var(--spectra-input-bg) !important;
	color: var(--spectra-input-text) !important;
	border-color: var(--spectra-input-border-color) !important;
	border-width: var(--spectra-input-border-width) !important;
	border-style: var(--spectra-input-border-style) !important;
	border-radius: var(--spectra-radius-input) !important;
	transition:
		border-color var(--spectra-transition-normal, 250ms) ease,
		box-shadow var(--spectra-transition-normal, 250ms) ease;
}

.srfm-form-container .srfm-input-common::placeholder,
.srfm-form-container .srfm-input-textarea::placeholder,
.srfm-form-container textarea::placeholder {
	color: var(--spectra-input-placeholder) !important;
}

.srfm-form-container .srfm-input-common:focus,
.srfm-form-container .srfm-input-number:focus,
.srfm-form-container .srfm-input-textarea:focus,
.srfm-form-container textarea:focus,
.srfm-form-container select:not(.ts-hidden-accessible):focus {
	border-color: var(--spectra-input-focus-border) !important;
	box-shadow: var(--spectra-input-focus-shadow) !important;
	outline: none;
}

.srfm-form-container .ts-wrapper.focus .ts-control {
	border-color: var(--spectra-input-focus-border) !important;
	box-shadow: var(--spectra-input-focus-shadow) !important;
}

.srfm-form-container .srfm-input-common:focus-visible,
.srfm-form-container .srfm-input-number:focus-visible,
.srfm-form-container .srfm-input-textarea:focus-visible,
.srfm-form-container textarea:focus-visible {
	outline: var(--spectra-focus-ring-width) var(--spectra-focus-ring-style) var(--spectra-focus-ring-color) !important;
	outline-offset: var(--spectra-focus-ring-offset) !important;
}

/* ================================================================
   BADGES / TAGS
   sg-badge → applied to eyebrow labels by pattern team
   ================================================================ */

.sg-badge {
	display: inline-block;
	background: var(--spectra-badge-bg) !important;
	color: var(--spectra-badge-text) !important;
	border-width: var(--spectra-badge-border-width);
	border-style: solid;
	border-color: var(--spectra-badge-border-color);
	border-radius: var(--spectra-radius-badge) !important;
	font-size: var(--spectra-badge-font-size) !important;
	font-weight: var(--spectra-badge-font-weight) !important;
	letter-spacing: var(--spectra-badge-letter-spacing) !important;
	text-transform: var(--spectra-badge-text-transform) !important;
	padding: var(--spectra-badge-padding-y) var(--spectra-badge-padding-x);
	line-height: 1.4;
}

/* ================================================================
   GLOBAL LINK OVERRIDE
   Targets all content links — no class needed on patterns.
   ================================================================ */

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.spectra-button__link) {
	color: var(--spectra-link-color);
	text-decoration: var(--spectra-link-decoration);
	transition: color var(--spectra-transition-normal, 250ms) ease;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.spectra-button__link):hover {
	color: var(--spectra-link-hover-color);
	text-decoration: var(--spectra-link-hover-decoration);
}

/* ================================================================
   GLOBAL IMAGE OVERRIDE
   Targets all block images — no class needed on patterns.
   Applies border-radius, shadow, border, overlay, and filter.
   ================================================================ */

.entry-content .wp-block-image img {
	border-radius: var(--spectra-radius-image) !important;
	filter: var(--spectra-image-filter);
}

.entry-content .wp-block-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--spectra-radius-image);
}

/* Image shadow and border from image treatment tokens. */
.entry-content .wp-block-image figure,
.entry-content figure.wp-block-image {
	border-radius: var(--spectra-radius-image);
	box-shadow: var(--spectra-shadow-sm);
	border: var(--spectra-image-border);
	overflow: hidden;
}

/* Image overlay via ::after pseudo-element. */
.entry-content .wp-block-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--spectra-image-overlay);
	pointer-events: none;
	border-radius: inherit;
}

/* Spectra image blocks also get treatment. */
.entry-content .wp-block-spectra-image img {
	border-radius: var(--spectra-radius-image);
	box-shadow: var(--spectra-shadow-sm);
	border: var(--spectra-image-border);
	filter: var(--spectra-image-filter);
}

/* ================================================================
   DARK SECTIONS
   sg-section-dark → applied to sections with dark backgrounds.
   Inverts card/button styles automatically.
   ================================================================ */

.sg-section-dark .sg-card {
	border-color: var(--spectra-dark-card-border-color) !important;
	box-shadow: var(--spectra-dark-card-shadow) !important;
}

.sg-section-dark .sg-card.spectra-background-color::before {
	background: var(--spectra-dark-card-bg) !important;
}

/* Dark section primary buttons — for pattern-based pages that use sg-section-dark class. */
.sg-section-dark .wp-block-button:not(.is-style-outline) .wp-element-button,
.sg-section-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--spectra-dark-btn-bg);
	color: var(--spectra-dark-btn-text);
}

/* Dark section secondary/outline buttons. */
.sg-section-dark .wp-block-button.is-style-outline .wp-element-button,
.sg-section-dark .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--spectra-dark-btn-secondary-bg);
	color: var(--spectra-dark-btn-secondary-text);
	border-color: var(--spectra-dark-btn-secondary-border-color) !important;
}

/* Dark section links. */
.sg-section-dark a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--spectra-white);
}

/* Dark section badges. */
.sg-section-dark .sg-badge {
	background: color-mix(in srgb, var(--spectra-white) 15%, transparent) !important;
	color: var(--spectra-white) !important;
	border-color: transparent !important;
}

/* ================================================================
   PHASE 3 — PROFESSIONAL POLISH
   ================================================================ */

/* ================================================================
   OVERLAYS
   sg-overlay → applied to sections/images with overlays
   ================================================================ */

.sg-overlay {
	position: relative;
}

.sg-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.sg-overlay-dark::after {
	background: var(--spectra-overlay-dark);
}

.sg-overlay-light::after {
	background: var(--spectra-overlay-light);
}

.sg-overlay-brand::after {
	background: var(--spectra-overlay-brand);
}

.sg-overlay-gradient::after {
	background: var(--spectra-overlay-gradient);
}

.sg-overlay > * {
	position: relative;
	z-index: 1;
}

/* ================================================================
   GLOBAL DIVIDER / SEPARATOR OVERRIDE
   Targets all hr and separator blocks — no class needed.
   ================================================================ */

.entry-content hr,
.entry-content .wp-block-separator {
	border-color: var(--spectra-divider-color) !important;
	border-width: var(--spectra-divider-width) !important;
	border-style: var(--spectra-divider-style) !important;
	opacity: 1;
}

/* ================================================================
   GLOBAL NAVIGATION OVERRIDE
   Targets navigation blocks and header areas.
   ================================================================ */

.wp-block-navigation {
	--spectra-nav-link-color: var(--spectra-nav-text);
}

.wp-block-navigation a {
	color: var(--spectra-nav-text) !important;
	transition: color var(--spectra-transition-normal, 250ms) ease;
}

.wp-block-navigation a:hover {
	color: var(--spectra-nav-link-hover) !important;
}

/*
 * Solid-dark headers (spectra-one/header, header-2, header-3) use
 * backgroundColor:"foreground" which adds .has-foreground-background-color.
 * Override --spectra-nav-text inside that context so nav links render
 * white instead of the global heading color — otherwise dark-on-dark
 * makes them invisible.
 */
.has-foreground-background-color .wp-block-navigation {
	--spectra-nav-text: var(--wp--preset--color--white, #fff);
	--spectra-nav-link-hover: rgba(255, 255, 255, 0.8);
}

/* ================================================================
   GLOBAL ICON OVERRIDE
   Targets Spectra icon blocks.
   ================================================================ */

.wp-block-uagb-icon-list .uagb-icon-list__content-wrap .uagb-icon-list__source-icon svg {
	width: var(--spectra-icon-size) !important;
	height: var(--spectra-icon-size) !important;
}

/* Icon with container background. */
.sg-icon-contained .uagb-icon-list__source-icon {
	background: var(--spectra-icon-container-bg) !important;
	border-radius: var(--spectra-icon-container-radius) !important;
	width: var(--spectra-icon-container-size) !important;
	height: var(--spectra-icon-container-size) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ================================================================
   PHASE 4 — BEAT COMPETITION
   ================================================================ */

/* ================================================================
   MICRO-INTERACTIONS
   :active press scale on buttons.
   ================================================================ */

.wp-element-button:active,
.wp-block-button__link:active,
.spectra-button__link:active {
	transform: scale(var(--spectra-btn-press-scale)) !important;
}

/* ================================================================
   ACCESSIBILITY
   :focus-visible ring on all interactive elements.
   ================================================================ */

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.spectra-button__link:focus-visible,
.sg-card a:focus-visible,
.entry-content a:focus-visible {
	outline: var(--spectra-focus-ring-width) var(--spectra-focus-ring-style) var(--spectra-focus-ring-color) !important;
	outline-offset: var(--spectra-focus-ring-offset) !important;
}

.entry-content input:focus-visible,
.entry-content textarea:focus-visible,
.entry-content select:not(.ts-hidden-accessible):focus-visible {
	outline: var(--spectra-focus-ring-width) var(--spectra-focus-ring-style) var(--spectra-focus-ring-color) !important;
	outline-offset: var(--spectra-focus-ring-offset) !important;
}

/* ================================================================
   REDUCED MOTION
   Respects prefers-reduced-motion — disables all transitions,
   transforms, and animations when user prefers reduced motion.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.sg-card,
	.wp-element-button,
	.wp-block-button__link,
	.spectra-button__link,
	.entry-content a,
	.entry-content input,
	.entry-content textarea,
	.entry-content select,
	.wp-block-navigation a {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}

	.sg-card:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.spectra-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none !important;
	}
}