/*
Theme Name:   Rabisco Paper Studio
Template:     kadence
Description:  Tema hijo de Kadence para Rabisco Paper Studio (antes Stikka). Base crema y neutra; los colores del logo van como acentos.
Version:      0.4.0
Text Domain:  stikka-child
*/

/*
 * Paleta tomada del logo (branding/). Se define sobre body para ganarle a las variables
 * que Kadence imprime en :root, y se replica en scripts/fase1.sh para el Personalizador.
 */
body {
	--global-palette1: #b8461f; /* Terracota del logo oscurecido: botones y enlaces (AA con blanco) */
	--global-palette2: #2b2724; /* Tinta al pasar el cursor */
	--global-palette3: #2b2724; /* Tinta de "Paper Studio": títulos */
	--global-palette4: #3d3834; /* Texto fuerte */
	--global-palette5: #5e5751; /* Texto */
	--global-palette6: #8a817a; /* Texto suave */
	--global-palette7: #ece4d6; /* Bordes y fondos sutiles */
	--global-palette8: #fbf7ee; /* Crema del logo: fondo */
	--global-palette9: #ffffff;

	/* Colores de las letras de "rabisco", solo para detalles */
	--rabisco-terracota: #d2552b;
	--rabisco-azul: #2e4fb0;
	--rabisco-mostaza: #e2a21a;
	--rabisco-rosa: #d9487a;
	--rabisco-verde: #3f8a5a;
	--rabisco-turquesa: #2a9086;

	--stikka-turquesa-suave: #e2f1ee;
	--stikka-turquesa-texto: #1f6b63;
	--stikka-radio: 14px;

	/* Serifa tipo Bodoni como "Paper Studio" + redondeada para leer */
	--global-body-font-family: "Nunito", system-ui, sans-serif;
	--global-heading-font-family: "Bodoni Moda", "Didot", Georgia, serif;
}

h1, h2, h3, h4 {
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* Fondo crema del logo en todo el sitio */
body,
.content-bg,
.site-header-row-container-inner,
.site-footer-row-container-inner,
.mobile-drawer-content-wrap {
	background-color: var(--global-palette8) !important;
}

/* Logo del encabezado: el logo ya dice el nombre, no se repite en texto */
.site-branding .site-title-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.site-branding {
	padding: 10px 0;
}
.site-branding .custom-logo {
	max-width: 150px;
	height: auto;
}
@media (min-width: 768px) {
	.site-branding .custom-logo {
		max-width: 190px;
	}
}

/* Botones redondeados: amables, sin volverse infantiles */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.wc-block-components-button {
	border-radius: 999px !important;
	font-weight: 700;
}

/* Tarjetas de producto */
.woocommerce ul.products li.product .woocommerce-loop-image-link img,
.wc-block-grid__product-image img {
	border-radius: var(--stikka-radio);
}

/* ---------- Drop de Navidad (inicio) ---------- */

/* Confeti suave con los colores de las letras del logo */
.rabisco-drop-hero {
	padding: 4.5rem 1rem 4rem;
	background-color: var(--global-palette8);
	background-image:
		radial-gradient(circle at 8% 22%, var(--rabisco-terracota) 0 5px, transparent 6px),
		radial-gradient(circle at 92% 16%, var(--rabisco-turquesa) 0 6px, transparent 7px),
		radial-gradient(circle at 15% 78%, var(--rabisco-mostaza) 0 4px, transparent 5px),
		radial-gradient(circle at 85% 70%, var(--rabisco-azul) 0 5px, transparent 6px),
		radial-gradient(circle at 70% 90%, var(--rabisco-rosa) 0 4px, transparent 5px),
		radial-gradient(circle at 28% 10%, var(--rabisco-verde) 0 4px, transparent 5px);
	border-bottom: 1px solid var(--global-palette7);
}
.rabisco-drop-hero h1 {
	font-size: clamp(2.4rem, 7vw, 4rem);
	line-height: 1.05;
	margin: 0.4em 0 0.35em;
}
.rabisco-eyebrow {
	display: table;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0.35rem 1rem;
	border: 1.5px solid var(--global-palette1);
	border-radius: 999px;
	color: var(--global-palette1);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.rabisco-fecha {
	margin-top: 1.25rem;
	font-size: 0.95rem;
	color: var(--global-palette5);
}
.rabisco-seccion {
	padding: 3.5rem 1rem;
}
.rabisco-banda {
	padding: 3rem 1rem;
	background: var(--global-palette9);
	border-top: 1px solid var(--global-palette7);
	border-bottom: 1px solid var(--global-palette7);
}
.rabisco-banda h2 {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
}
/* Kadence le quita el padding lateral a los bloques de ancho completo */
.rabisco-drop-hero,
.rabisco-banda,
.rabisco-seccion {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
@media (max-width: 600px) {
	.rabisco-drop-hero {
		padding-top: 3rem;
		/* En celular el confeti va solo en las esquinas para no tapar texto */
		background-image:
			radial-gradient(circle at 6% 4%, var(--rabisco-terracota) 0 4px, transparent 5px),
			radial-gradient(circle at 94% 6%, var(--rabisco-turquesa) 0 5px, transparent 6px),
			radial-gradient(circle at 5% 97%, var(--rabisco-mostaza) 0 4px, transparent 5px),
			radial-gradient(circle at 95% 95%, var(--rabisco-azul) 0 4px, transparent 5px),
			radial-gradient(circle at 50% 2%, var(--rabisco-rosa) 0 3px, transparent 4px);
	}
	.rabisco-eyebrow {
		font-size: 0.7rem;
		letter-spacing: 0.06em;
	}
}

/* "Drop de Navidad" resaltado en el menú */
.menu-drop > a {
	color: var(--global-palette1) !important;
	font-weight: 800;
}
.menu-drop > a::before {
	content: "✦ ";
}

/* ---------- Producto: personalización y preventa ---------- */

.rabisco-campos {
	margin: 1rem 0 1.25rem;
	padding: 1.1rem 1.25rem;
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: var(--stikka-radio);
}
.rabisco-campos-titulo {
	font-family: var(--global-heading-font-family);
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.rabisco-campo {
	margin: 0 0 0.85rem;
}
.rabisco-campo label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}
.rabisco-campo input,
.rabisco-campo select {
	width: 100%;
	border-radius: 10px;
}
.rabisco-campo small,
.rabisco-opcional,
.rabisco-revisa {
	color: var(--global-palette6);
	font-size: 0.85rem;
	font-weight: 400;
}
.rabisco-revisa {
	margin: 0;
}
.rabisco-preventa {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--rabisco-azul);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.woocommerce div.product {
	position: relative;
}
.rabisco-entrega {
	font-weight: 700;
	color: var(--stikka-turquesa-texto);
}
.woocommerce div.product p.stock {
	font-weight: 700;
	color: var(--global-palette1);
}

/* Preguntas frecuentes en tarjetas desplegables */
.wp-block-details {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: var(--stikka-radio);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}
.wp-block-details summary {
	font-weight: 700;
	color: var(--global-palette3);
	cursor: pointer;
}
.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* Etiqueta de oferta en el azul del logo, no en el rojo por defecto */
.woocommerce span.onsale {
	background: var(--rabisco-azul);
	border-radius: 999px;
}