/*
Theme Name:   Brunas Cookies
Theme URI:    https://brunascookies.cl
Description:  Child theme de Blocksy con la identidad de Brunas Cookies, galletería artesanal plant-based.
Author:       Brunas Cookies
Template:     blocksy
Version:      1.1.0
Text Domain:  brunas-cookies
Tags:         e-commerce, food-and-drink
*/

/* ==========================================================================
   Tipografía
   --------------------------------------------------------------------------
   Playfair Display autoalojada (SIL Open Font License), subset latin, que
   cubre el español completo. Nada se pide a servidores externos: mejor
   rendimiento y sin fugas de IP de quien visita.

   Es una serif de alto contraste, del mismo registro que el logotipo
   "BRUNAS": el sitio y la marca hablan el mismo idioma tipográfico.
   ========================================================================== */

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 500 700;      /* fuente variable: un archivo, todos los pesos */
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin.woff2") format("woff2");
	/* Sin unicode-range: el subset ya viene recortado desde el archivo. */
}

/* ==========================================================================
   Paleta
   --------------------------------------------------------------------------
   El azul #114086 NO es una elección de diseño: es el color exacto extraído
   del logotipo de Instagram (69,8% de los píxeles). Todo lo demás se deriva
   de él. Cambiar estos valores repinta el sitio completo.
   ========================================================================== */

:root {
	/* Azules de marca */
	--brunas-azul: #114086;
	--brunas-azul-oscuro: #0c2e60;
	--brunas-azul-profundo: #0a2551;
	--brunas-azul-medio: #1b54a8;
	--brunas-azul-suave: #7fa0d4;
	--brunas-azul-claro: #dce6f5;
	--brunas-azul-tenue: #f1f5fb;

	/* Neutros cálidos: es una galletería, no un banco */
	--brunas-crema: #fdfaf5;
	--brunas-masa: #efd9b8;
	--brunas-chocolate: #4a2c17;
	--brunas-borde: #e4e1da;

	/* Texto */
	--brunas-texto: #1a2438;
	--brunas-texto-suave: #5b6579;

	/* Geometría */
	--brunas-radio: 14px;
	--brunas-radio-sm: 8px;
	--brunas-sombra: 0 2px 8px rgba(17, 64, 134, 0.07);
	--brunas-sombra-alta: 0 10px 28px rgba(17, 64, 134, 0.14);

	/* Tokens que consume el plugin brunas-core */
	--brunas-aviso-bg: var(--brunas-azul-tenue);
	--brunas-aviso-borde: var(--brunas-azul);
	--brunas-aviso-texto: var(--brunas-texto);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--brunas-crema);
	color: var(--brunas-texto);
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--brunas-azul);
}

a {
	color: var(--brunas-azul);
}

a:hover,
a:focus-visible {
	color: var(--brunas-azul-medio);
}

/* Foco visible y de marca: navegar con teclado no debería ser adivinanza. */
:focus-visible {
	outline: 3px solid var(--brunas-azul-suave);
	outline-offset: 2px;
}

/* ==========================================================================
   Cabecera y logotipo
   --------------------------------------------------------------------------
   El logo es un cuadrado azul con la palabra en blanco. Se le redondean las
   esquinas para que no choque contra el fondo crema.
   ========================================================================== */

.site-logo-container img,
.custom-logo {
	border-radius: var(--brunas-radio-sm);
}

/* ==========================================================================
   Botones
   ========================================================================== */

/* `:not(.has-background)` y `:not(.has-text-color)` respetan el color que se
   elija en el editor de bloques. Sin eso, un botón blanco puesto a mano sobre
   el hero azul volvería a pintarse de azul sobre azul. */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	border-radius: 999px;      /* pastilla: más cercano a repostería que a software */
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.75em 1.6em;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button__link:not(.has-background),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--brunas-azul);
	border: 2px solid var(--brunas-azul);
}

.wp-block-button__link:not(.has-text-color),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	color: #fff;
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:not(.has-background):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--brunas-azul-oscuro);
	border-color: var(--brunas-azul-oscuro);
	color: #fff;
}

/* Botón claro sobre el hero azul: se oscurece apenas al pasar el cursor. */
.wp-block-button__link.has-background:hover {
	filter: brightness(0.94);
}

/* Botón secundario: mismo peso visual, menos urgencia. */
.woocommerce a.button.wc-backward,
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--brunas-azul);
}

/* Un botón deshabilitado debe parecerlo. */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--brunas-azul-suave);
	border-color: var(--brunas-azul-suave);
	opacity: 1;
}

/* ==========================================================================
   Catálogo
   ========================================================================== */

.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--brunas-borde);
	border-radius: var(--brunas-radio);
	box-shadow: var(--brunas-sombra);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--brunas-sombra-alta);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem;
	padding-inline: 1rem;
}

/* El precio es lo que más se busca en una galletería. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--brunas-azul);
	font-size: 1.2rem;
	font-weight: 700;
}

.woocommerce div.product p.price {
	font-size: 1.75rem;
}

/* Precio anterior tachado: gris, para que no compita con el vigente. */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--brunas-texto-suave);
	font-weight: 400;
	opacity: 0.7;
}

/* ==========================================================================
   Estados de stock
   --------------------------------------------------------------------------
   El menú rota cada semana: "agotado" es parte del modelo, no un fallo.
   Por eso se muestra en tonos de masa y chocolate, no en rojo de error.
   ========================================================================== */

.woocommerce ul.products li.product .out-of-stock,
.woocommerce div.product .stock.out-of-stock {
	background: var(--brunas-masa);
	border-radius: 999px;
	color: var(--brunas-chocolate);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.3rem 0.85rem;
}

.woocommerce div.product .stock.in-stock {
	color: var(--brunas-chocolate);
	font-weight: 600;
}

/* Etiqueta de oferta */
.woocommerce span.onsale {
	background: var(--brunas-masa);
	border-radius: 999px;
	color: var(--brunas-chocolate);
	font-weight: 700;
	min-height: auto;
	min-width: auto;
	padding: 0.35rem 0.9rem;
}

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--brunas-radio);
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--brunas-borde);
	color: var(--brunas-texto-suave);
	font-size: 0.9rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
}

/* La etiqueta plant-based es EL diferenciador de la marca: se destaca. */
.woocommerce div.product .product_meta .tagged_as a {
	background: var(--brunas-azul-claro);
	border-radius: 999px;
	color: var(--brunas-azul-oscuro);
	display: inline-block;
	font-weight: 600;
	padding: 0.15rem 0.7rem;
	text-decoration: none;
}

/* ==========================================================================
   Carrito y checkout
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: #fff;
	border-radius: var(--brunas-radio);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--brunas-azul-tenue);
	color: var(--brunas-azul-oscuro);
}

/* Avisos de WooCommerce en el azul de la marca, no en el celeste por defecto. */
.woocommerce-message,
.woocommerce-info {
	background: var(--brunas-azul-tenue);
	border-top-color: var(--brunas-azul);
	color: var(--brunas-texto);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--brunas-azul);
}

/* Los errores SÍ van en rojo: es información de seguridad, no de marca. */
.woocommerce-error {
	border-top-color: #b3261e;
}

/* Bloques de carrito y checkout (checkout de bloques) */
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
	color: var(--brunas-azul);
	font-weight: 700;
}

.wc-block-components-button {
	background-color: var(--brunas-azul);
	border-radius: 999px;
	font-weight: 600;
}

.wc-block-components-button:hover {
	background-color: var(--brunas-azul-oscuro);
}

/* ==========================================================================
   Pie de página
   ========================================================================== */

.site-footer {
	background: var(--brunas-azul);
	color: var(--brunas-azul-claro);
}

.site-footer a {
	color: #fff;
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button {
		transition: none;
	}

	.woocommerce ul.products li.product:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover {
		transform: none;
	}
}