/**
 * Hello Elementor trae `color: #c36` para <a> en su propio reset
 * (wp-content/themes/hello-elementor/assets/css/reset.css) — sin esto,
 * todos los links del sitio se ven rosado/rojo por defecto del tema
 * padre. Se sobreescribe con el azul de marca real.
 */
a {
	color: var(--color-secondary);
}

a:hover {
	color: var(--color-secondary-hover);
}

/*
 * Mismo problema que el `<a>` de arriba, pero para botones: Hello
 * Elementor define color/border rosado (#c36) en `button`,
 * `[type="button"]` y `[type="submit"]` — en su estado base Y en
 * :hover/:focus (confirmado en vivo vía document.styleSheets, no
 * adivinado). Sin este reset a la misma altura de especificidad, CADA
 * botón/input nuevo del sitio (aunque no tenga ninguna clase nuestra,
 * como los botones nativos <button type="button"> de un carrusel)
 * hereda ese rosado en vez del azul de marca — de raíz acá, para no
 * tener que parchar color en cada componente nuevo uno por uno.
 */
button,
[type="button"],
[type="submit"] {
	color: var(--color-cta);
	border-color: var(--color-cta);
}

button:hover,
button:focus,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active {
	color: var(--color-cta-hover);
	border-color: var(--color-cta-hover);
}

/*
 * Header: full-width, efecto glass (blanco con baja opacidad + blur),
 * sticky. Grid de 3 columnas (logo | menú | acciones) para que el menú
 * quede realmente centrado — carrito y buscador se agrupan en
 * .techsalud-header-actions (template-parts/header.php) para contar
 * como una sola columna, no dos ítems sueltos que romperían el centrado.
 * No existe equivalente Storefront de esto para portar — es CSS nuevo
 * apuntando al markup real de este tema.
 */
#site-header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: var(--shadow-sm);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: 0.75rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	color: var(--color-primary);
}

.site-branding {
	grid-column: 1;
	justify-self: start;
	margin-left: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.site-branding .site-title,
.site-branding .site-title a {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.site-branding .site-description {
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.site-branding img {
	display: block;
	max-height: 34px;
	width: auto;
}

nav.site-navigation {
	grid-column: 2;
	justify-self: center;
}

nav.site-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

nav.site-navigation a {
	color: var(--color-primary);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

nav.site-navigation a:hover {
	color: var(--color-secondary);
}

.techsalud-header-actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.techsalud-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-primary);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.techsalud-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.3em;
	border-radius: var(--radius-pill);
	background: var(--color-cta);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

/*
 * .techsalud-search-trigger trae color:#fff por defecto en
 * search-modal.css (pensado para un header navy) — se sobreescribe acá
 * porque este archivo carga después (ver enqueue en functions.php).
 */
.techsalud-search-trigger {
	color: var(--color-primary);
}

.techsalud-search-trigger:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

@media (max-width: 767px) {
	#site-header.site-header {
		grid-template-columns: 1fr auto;
	}

	nav.site-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
	}

	nav.site-navigation ul {
		justify-content: flex-start;
		gap: 1rem;
	}

	.techsalud-header-actions {
		grid-column: 2;
		grid-row: 1;
	}
}

#site-footer.site-footer {
	background: var(--color-primary);
	color: rgba(255, 255, 255, 0.85);
	padding: 2rem 1.5rem;
	margin-top: 3rem;
	text-align: center;
}

#site-footer.site-footer nav.site-navigation {
	margin: 0 0 1rem;
	justify-content: center;
}

#site-footer.site-footer nav.site-navigation ul {
	justify-content: center;
}

#site-footer.site-footer nav.site-navigation a {
	color: rgba(255, 255, 255, 0.85);
}

.techsalud-footer-nap {
	font-size: var(--font-size-sm);
}

.techsalud-footer-nap strong {
	color: #fff;
}

@media (min-width: 992px) {
	nav.site-navigation {
		margin-left: 1.5rem;
	}
}

/*
 * Bug real encontrado en producción: el grid de productos (ul.products,
 * display:grid, definido en woocommerce.css) armaba las columnas bien
 * (270px cada una, confirmado con getComputedStyle) pero cada
 * ul.products li.product se achicaba a 83px. Causa: WooCommerce core
 * (woocommerce-layout.css/woocommerce-smallscreen.css, del PLUGIN, no
 * del tema) trae reglas legacy de layout con float+width en porcentaje
 * (`.columns-3 li.product{width:30.75%}`, `[class*="columns-"] li.product
 * {width:48%}`) con MÁS especificidad que nuestra regla plana
 * `ul.products li.product` (3 clases vs 1) — ganan sin importar el orden
 * de carga. Storefront neutralizaba esto con su propio CSS de producto;
 * Hello Elementor no trae nada equivalente, así que hay que hacerlo acá.
 * Selector igualado a la especificidad real de WooCommerce (verificada
 * contra el CSS real del plugin, no adivinada) para ganar el empate sin
 * usar !important.
 */
.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: 100%;
	float: none;
}