/**
 * White Hat Canvas — capa de marca White Hat.
 *
 * CSS original de White Hat Management. Define tokens de marca y unos
 * valores por defecto discretos que NO compiten con los diseños de Elementor
 * (colores de selección, foco accesible, acento del enlace de salto y detalles
 * de WooCommerce). Todo cuelga de variables para poder re-tematizar en un sitio.
 *
 * @package WhiteHatCanvas
 */

:root {
	--wh-navy: #141b2d;
	--wh-navy-soft: #1f2a44;
	--wh-ink: #1a2340;
	--wh-cream: #f5f0e6;
	--wh-cream-light: #faf7f0;
	--wh-gold: #d4af6e;
	--wh-white: #fff;
	--wh-muted: #6b7280;
	--wh-radius: 8px;
	--wh-focus: var(--wh-gold);
}

/* Selección de texto en tono de marca. */
::selection {
	background: var(--wh-gold);
	color: var(--wh-navy);
}

/* Foco visible y accesible en toda interacción por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wh-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Enlace de salto (accesibilidad) con acento de marca. */
.skip-link:focus {
	background: var(--wh-navy);
	color: var(--wh-cream);
	outline: 2px solid var(--wh-gold);
}

/* Detalles discretos para la tienda WooCommerce, sin pisar Elementor. */
.woocommerce .onsale {
	background-color: var(--wh-gold);
	color: var(--wh-navy);
	border-radius: var(--wh-radius);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--wh-gold);
}

/* Marca de agua de marca en la selección de imágenes del editor, inofensiva. */
body.wh-brand {
	--wp--custom--brand--accent: var(--wh-gold);
}

/* -------------------------------------------------------------------------
 * Blindaje responsive — evita roturas y desbordes en cualquier dispositivo.
 * NO cambia márgenes ni paddings: no altera el espaciado del tema ni de
 * Elementor; solo garantiza que nada provoque scroll horizontal.
 * ------------------------------------------------------------------------- */

/* Medios siempre fluidos (el reset ya cubre img; añadimos el resto). */
img,
svg,
canvas,
video,
audio {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

/* Palabras y URLs muy largas no rompen el ancho en móvil. */
body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Tablas anchas del contenido: se desplazan en su caja en vez de desbordar. */
.entry-content table,
.page-content table,
.comment-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Guarda de seguridad: ningún elemento debe empujar el ancho del documento. */
html,
body {
	max-width: 100%;
}