/**
 * Appsclavitud Custom Blocks CSS
 *
 * Additional styles that complement theme.json
 */

/* Smooth scroll — disabled when user prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Enhanced focus visibility on dark surfaces */
.has-surface-dark-background-color a:focus-visible,
.has-surface-dark-background-color button:focus-visible,
.has-surface-dark-background-color input:focus-visible,
.has-surface-dark-background-color textarea:focus-visible,
.has-surface-dark-background-color select:focus-visible,
.has-surface-dark-background-color [tabindex]:focus-visible,
[style*="background-color:var(--wp--preset--color--surface-dark)"] a:focus-visible,
[style*="background-color: var(--wp--preset--color--surface-dark)"] a:focus-visible {
	outline-color: var(--wp--preset--color--tertiary);
	outline-width: 3px;
}

/* Button hover transitions */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Card hover lift — light surfaces */
.wp-block-group.is-style-card,
.wp-block-group[style*="border-color:var(--wp--preset--color--border)"] {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-group.is-style-card:hover,
.wp-block-group[style*="border-color:var(--wp--preset--color--border)"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}

/* Card hover on dark surfaces — subtler shadow using bone tint */
.has-surface-dark-background-color .wp-block-group.is-style-card:hover,
.has-surface-dark-background-color .wp-block-group[style*="border-color:var(--wp--preset--color--border-dark)"]:hover,
[style*="background-color:var(--wp--preset--color--surface-dark)"] .wp-block-group.is-style-card:hover,
[style*="background-color: var(--wp--preset--color--surface-dark)"] .wp-block-group[style*="border-color:var(--wp--preset--color--border-dark)"]:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--bone) 6%, transparent);
}

/* Image defaults */
.wp-block-image img {
	height: auto;
	max-width: 100%;
}

/* Responsive typography scaling */
@media (max-width: 782px) {
	.wp-block-heading[style*="font-size:var(--wp--preset--font-size--display-xl)"],
	.wp-block-heading[style*="font-size: var(--wp--preset--font-size--display-xl)"] {
		font-size: var(--wp--preset--font-size--display-lg) !important;
	}

	.wp-block-heading[style*="font-size:var(--wp--preset--font-size--display-lg)"],
	.wp-block-heading[style*="font-size: var(--wp--preset--font-size--display-lg)"] {
		font-size: var(--wp--preset--font-size--h1) !important;
	}

	.wp-block-heading[style*="font-size:var(--wp--preset--font-size--6xl)"] {
		font-size: var(--wp--preset--font-size--4xl) !important;
	}

	.wp-block-heading[style*="font-size:var(--wp--preset--font-size--5xl)"] {
		font-size: var(--wp--preset--font-size--3xl) !important;
	}
}

/* Query loop grid fallback */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--40);
}

/* Fix WordPress .has-text-color overriding specific color classes and inline styles.
   WordPress global styles output .has-text-color after .has-background-color in CSS,
   so elements with both classes get dark text (#1E293B) instead of the intended color. */
.has-background-color.has-text-color {
	color: var(--wp--preset--color--background) !important;
}

.has-text-color[style*="color:var(--wp--preset--color--background)"],
.has-text-color[style*="color: var(--wp--preset--color--background)"] {
	color: var(--wp--preset--color--background) !important;
}

.has-text-color[style*="color:var(--wp--preset--color--primary)"],
.has-text-color[style*="color: var(--wp--preset--color--primary)"] {
	color: var(--wp--preset--color--primary) !important;
}

/* Navigation overlay improvements */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-button__link:hover,
	.wp-block-group.is-style-card:hover,
	.wp-block-group[style*="border-color:var(--wp--preset--color--border)"]:hover,
	.has-surface-dark-background-color .wp-block-group.is-style-card:hover,
	.has-surface-dark-background-color .wp-block-group[style*="border-color:var(--wp--preset--color--border-dark)"]:hover,
	[style*="background-color:var(--wp--preset--color--surface-dark)"] .wp-block-group.is-style-card:hover,
	[style*="background-color: var(--wp--preset--color--surface-dark)"] .wp-block-group[style*="border-color:var(--wp--preset--color--border-dark)"]:hover {
		transform: none !important;
	}
}