/* Vexel Base — front-end base styles
 * Block-specific CSS lives next to each block (style.css inside /blocks/<cat>/<name>/).
 * This file covers global resets, utilities and shared components.
 */

:root {
	/* Easier-to-read aliases for theme.json custom tokens */
	--vexel-radius-sm: var(--wp--custom--radius--sm);
	--vexel-radius-md: var(--wp--custom--radius--md);
	--vexel-radius-lg: var(--wp--custom--radius--lg);
	--vexel-radius-xl: var(--wp--custom--radius--xl);
	--vexel-radius-pill: var(--wp--custom--radius--pill);
	--vexel-shadow-sm: var(--wp--custom--shadow--sm);
	--vexel-shadow-md: var(--wp--custom--shadow--md);
	--vexel-shadow-lg: var(--wp--custom--shadow--lg);

	/* A11y tokens — used by .skip-link, focus rings and reduced-motion fallbacks
	 * to keep the values centralised and overridable by child themes. */
	--vexel-focus-ring-color: var(--wp--preset--color--primary);
	--vexel-focus-ring-width: 2px;
	--vexel-focus-ring-offset: 2px;
	--vexel-focus-ring-radius: var(--vexel-radius-sm);
}

/* Base reset layers */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------------ *
 * Accessibility — foundation layer (F6.4a)
 *
 * Utilities that any block can rely on:
 *   .sr-only                — visually hidden, exposed to screen readers
 *   .skip-link              — first interactive element of the page,
 *                             only visible when focused via keyboard
 *   :focus-visible          — uniform ring across all interactive elements
 *   prefers-reduced-motion  — neutralises animations/transitions site-wide
 *   prefers-contrast: more  — strengthens borders and focus rings
 * ------------------------------------------------------------------------ */

/* Visually hidden but exposed to assistive tech (Bootstrap / WP convention). */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Bypass-block link — rendered at the top of every page in parts/header.html.
 * Off-screen until focused, then snaps to the top with high contrast. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
}
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	left: var(--wp--preset--spacing--30);
	top: var(--wp--preset--spacing--30);
	width: auto;
	height: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--vexel-radius-md);
	box-shadow: var(--vexel-shadow-md);
	outline: var(--vexel-focus-ring-width) solid #FFFFFF;
	outline-offset: var(--vexel-focus-ring-offset);
}

/* Focus-visible — consistent ring using primary color.
 * Uses CSS custom properties so child themes can override per-brand. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--vexel-focus-ring-width) solid var(--vexel-focus-ring-color);
	outline-offset: var(--vexel-focus-ring-offset);
	border-radius: var(--vexel-focus-ring-radius);
}

/* Targeted region (skip-link destination) — short visual cue when jumped to.
 * :target is harmless on regular page loads. */
:where(main):target {
	scroll-margin-top: var(--wp--preset--spacing--40);
}

/* Reduced motion — collapse animations and transitions across all blocks
 * including third-party (carruseles use prefers-reduced-motion in JS too). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* High-contrast / forced-colors — strengthen focus and borders so users with
 * Windows High Contrast or "more contrast" macOS get adequate cues. */
@media (prefers-contrast: more), (forced-colors: active) {
	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline-width: 3px;
		outline-offset: 3px;
	}
}

/* Utility classes used by patterns & blocks */
.vexel-stack > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.vexel-shadow-md { box-shadow: var(--vexel-shadow-md); }
.vexel-radius-lg { border-radius: var(--vexel-radius-lg); }

/* Section defaults — consistent vertical rhythm for demo pages */
.wp-block-group.is-vexel-section { padding-block: var(--wp--preset--spacing--70); }

/* -----------------------------------------------------------------------
 * Layout alignment — basic WP blocks + header/footer ↔ custom blocks
 * Custom blocks (vexel-*) use max-width: var(--wp--style--global--wide-size)
 * with padding-inline: var(--wp--preset--spacing--40) on their __inner div.
 * These rules replicate that constraint for core blocks and template parts.
 * ----------------------------------------------------------------------- */

/* Post title (alignwide) — padding para alinear texto con bloques custom */
.wp-block-post-title.alignwide {
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
	box-sizing: border-box;
}

/* Basic WP blocks inside post-content (is-layout-flow) */
.wp-block-post-content.is-layout-flow > :where(
	[class*="wp-block-"]:not(.alignfull):not(.alignwide):not([class*="vexel-"])
) {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
	box-sizing: border-box;
}

.wp-block-post-content.is-layout-flow > :where(.alignwide) {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * Header — sticky, fondo blanco, borde inferior sutil.
 * Sigue la linea de vexel/header-primary: logo + nav + CTA opcional.
 * ----------------------------------------------------------------------- */

.vexel-header {
	background: var(--wp--preset--color--bg);
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.vexel-header.is-sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	box-shadow: var(--wp--custom--shadow--sm);
}

.vexel-header > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size, 1280px);
}

.vexel-header .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}

.vexel-header .wp-block-site-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 120ms ease;
}

.vexel-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary);
}

.vexel-header .wp-block-navigation {
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--md);
}

.vexel-header .wp-block-navigation a {
	font-weight: 500;
	transition: color 120ms ease;
}

.vexel-header .wp-block-navigation a:hover,
.vexel-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.vexel-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * Footer — fondo suave, dos filas (logo+nav / copyright).
 * Sigue la linea de vexel/footer-simple.
 * ----------------------------------------------------------------------- */

.vexel-footer {
	padding-block: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--sm);
	margin-top: auto;
}

.vexel-footer > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size, 1280px);
}

.vexel-footer .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.vexel-footer .wp-block-site-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 120ms ease;
}

.vexel-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary);
}

.vexel-footer .wp-block-navigation {
	gap: var(--wp--preset--spacing--40);
}

.vexel-footer .wp-block-navigation a {
	font-weight: 500;
	transition: color 120ms ease;
}

.vexel-footer .wp-block-navigation a:hover,
.vexel-footer .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.vexel-footer__top {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.vexel-footer__bottom {
	padding-block-start: var(--wp--preset--spacing--30);
}