/*
Theme Name: Eat N' Chill
Theme URI: https://eatnchillcr.com
Author: Warren Barrantes
Author URI: mailto:warren249@gmail.com
Description: Tema a la medida para Eat N' Chill Foods, comida semanal a domicilio en Costa Rica. Tema de bloques con los colores y la tipografía de la marca. Funciona junto al plugin "Eat N' Chill · Pedidos".
Version: 3.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eatnchill
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
::selection { background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--tinta); }
:where(a, button, summary, input, select, textarea, .wp-block-button__link):focus-visible { outline: 3px solid var(--wp--preset--color--amarillo); outline-offset: 3px; }
.has-verde-background-color :where(a, button, summary, .wp-block-button__link):focus-visible,
.has-verde-profundo-background-color :where(a, button, summary, .wp-block-button__link):focus-visible { outline-color: var(--wp--preset--color--amarillo); }
.has-amarillo-background-color :where(a, button, summary, input, .wp-block-button__link):focus-visible { outline-color: var(--wp--preset--color--verde-profundo); }

.en-seccion { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.en-intro { max-width: 40rem; font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--gris); }
.en-centro { text-align: center; }
.en-centro .en-intro { margin-left: auto; margin-right: auto; }

/* Títulos sobre fondos de color heredan el color del bloque */
:is(.has-verde-background-color, .has-verde-profundo-background-color, .has-amarillo-background-color) :is(h1, h2, h3, h4) { color: inherit; }
:is(.has-verde-background-color, .has-verde-profundo-background-color) .en-intro { color: var(--wp--preset--color--crema); }
.has-amarillo-background-color .en-intro { color: var(--wp--preset--color--tinta); }
:is(.has-verde-background-color, .has-verde-profundo-background-color) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--amarillo); }

/* Botón verde (para fondos claros y amarillos) */
.en-boton-verde .wp-block-button__link { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--blanco); }
.en-boton-verde .wp-block-button__link:is(:hover, :focus) { background: var(--wp--preset--color--verde-profundo); color: var(--wp--preset--color--blanco); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Secciones pegadas (sin espacios entre bloques de color) ---------- */
body .wp-site-blocks > * + * { margin-block-start: 0; }
.en-principal.en-principal > * { margin-block-start: 0; }
.en-pasos.en-pasos > * { margin-block-start: 0; }
.en-paso.en-paso > * { margin-block-start: 0; }
.en-paso__num { margin: 0; }
.en-faq.en-faq > * { margin-block-start: 0; }
.en-pedido h2 { color: var(--wp--preset--color--amarillo); }
.en-footer h3 { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; color: var(--wp--preset--color--amarillo); margin-bottom: .75rem; }
.en-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

/* ---------- Encabezado ---------- */
.en-sitio-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }
.en-sitio-header:has(.encp-cierre) { top: calc(var(--wp-admin--admin-bar--height, 0px) - 2.5rem); }
@media (max-width: 600px) { .admin-bar .en-sitio-header, .admin-bar .en-sitio-header:has(.encp-cierre) { top: 0; } .admin-bar .en-sitio-header:has(.encp-cierre) { top: -2.5rem; } }
.en-header { background: var(--wp--preset--color--crema); border-bottom: 1px solid rgba(17, 94, 78, .14); padding-top: .65rem; padding-bottom: .65rem; transition: box-shadow .2s; }
body.en-con-scroll .en-header { box-shadow: 0 8px 24px -16px rgba(11, 63, 52, .45); }
.en-logo { margin: 0 !important; flex: none; }
.en-logo img { display: block; height: 3.6rem; width: auto; }
.en-header .en-logo img { width: 3.5rem; height: 3.5rem; border-radius: 14px; }
/* El encabezado fijo siempre lleva fondo sólido, aunque se le agreguen bloques */
.en-sitio-header { background: var(--wp--preset--color--crema); }
.en-sitio-header .wp-block-site-title { font-size: 1.5rem; margin: 0; }
.en-sitio-header :is(h1, h2) { font-size: 1.5rem; }
.en-header .wp-block-navigation__container { gap: 1.75rem; }
.en-header .wp-block-navigation-item__content { padding: .35rem 0; }
.en-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--crema); padding: 2rem; }
.en-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; }
.en-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--fredoka); font-size: 2rem; font-weight: 600; }
.en-header .wp-block-navigation__responsive-container-open svg,
.en-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
@media (max-width: 781px) {
	.en-header .en-logo img { width: 3rem; height: 3rem; border-radius: 12px; }
	.en-header .en-header__pedir .wp-block-button__link { padding: .7rem 1.1rem; font-size: .95rem; }
}
@media (max-width: 600px) {
	/* Celular: todo en una fila (logo a la izquierda; menú, carrito y botón a la derecha) */
	.en-header .wp-block-group.is-layout-flex { gap: .55rem; }
	.en-header .en-header__pedir .wp-block-button__link { padding: .6rem .95rem; font-size: .9rem; white-space: nowrap; }
	.en-header .wp-block-woocommerce-customer-account { display: none; }
	.en-header .en-logo img { width: 2.75rem; height: 2.75rem; border-radius: 11px; }
}

@media (min-width: 600px) and (max-width: 1023px) {
	.en-header .wp-block-navigation .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.en-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Pantallas pequeñas de laptop: un poco menos de espacio entre enlaces */
@media (min-width: 1024px) and (max-width: 1180px) {
	.en-header .wp-block-navigation__container { gap: 1.25rem; }
}

/* ---------- Portada ---------- */
.en-hero { position: relative; overflow: hidden; isolation: isolate; }
.en-hero::before { content: ""; position: absolute; z-index: -1; width: min(75vw, 900px); aspect-ratio: 932 / 596; left: -14%; bottom: -18%; background: url("assets/images/hoja-fondo.svg") no-repeat center / contain; opacity: .55; transform: rotate(-12deg); pointer-events: none; }
.en-hero h1 { font-size: clamp(2.6rem, 9vw, 5.25rem) !important; color: var(--wp--preset--color--amarillo); font-weight: 700; line-height: .98; letter-spacing: -0.02em; max-width: 11ch; text-wrap: balance; }
.en-hero .en-intro { max-width: 34rem; }
.en-hero .en-detalle { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--crema); opacity: .85; }
.en-hero .wp-block-columns { gap: clamp(2rem, 5vw, 4.5rem); }
.en-hero .encp-semana { max-width: 30rem; margin-left: auto; transform: rotate(1.5deg); }
@media (max-width: 781px) {
	.en-hero .encp-semana { transform: none; margin: 0 auto; }
	.en-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.en-hero .wp-block-button, .en-hero .wp-block-button__link { width: 100%; text-align: center; }
}

/* ---------- Cómo funciona ---------- */
.en-pasos { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: paso; }
.en-pasos__pista { position: absolute; top: 1.75rem; left: 1.75rem; right: 12%; height: 4px; border-radius: 4px; background: rgba(17, 94, 78, .15); overflow: hidden; }
.en-pasos__pista i { display: block; height: 100%; width: 0; background: var(--wp--preset--color--amarillo); transition: width .2s linear; }
.en-paso { position: relative; }
.en-paso__num { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--wp--preset--color--salvia); color: var(--wp--preset--color--verde); font-family: var(--wp--preset--font-family--fredoka); font-size: 1.6rem; font-weight: 700; position: relative; transition: background-color .3s, color .3s; }
.en-paso.is-activo .en-paso__num { background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--tinta); }
.en-paso h3 { margin: 1.1rem 0 .4rem; font-size: 1.45rem; }
.en-paso p { margin: 0; color: var(--wp--preset--color--gris); max-width: 22ch; }
@media (max-width: 781px) {
	.en-pasos { grid-template-columns: 1fr; gap: 1.75rem; }
	.en-pasos__pista { top: 1.75rem; bottom: 1.75rem; left: calc(1.75rem - 2px); right: auto; width: 4px; height: auto; }
	.en-pasos__pista i { width: 100% !important; height: var(--en-progreso, 0%); }
	.en-paso { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1.25rem; }
	.en-paso h3 { margin: .6rem 0 .3rem; }
	.en-paso p { grid-column: 2; max-width: none; }
	.en-paso__num { grid-row: span 2; }
}
@media (min-width: 782px) and (max-width: 1100px) {
	.en-pasos { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
	.en-pasos__pista { display: none; }
	.en-paso p { max-width: 32ch; }
}

/* ---------- Menú ---------- */
.en-menu .en-encabezado-seccion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.en-menu .en-encabezado-seccion > * { margin: 0; }

/* ---------- Arma tu pedido ---------- */
.en-pedido .wp-block-columns { gap: clamp(2rem, 5vw, 4.5rem); }
.en-pedido .en-lista-reglas { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.en-pedido .en-lista-reglas li { position: relative; padding-left: 2.1rem; }
.en-pedido .en-lista-reglas li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--wp--preset--color--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2314231F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* ---------- Chef April ---------- */
.en-chef .wp-block-columns { gap: clamp(2rem, 5vw, 5rem); }
.en-chef .en-foto img { border-radius: 200px 200px 28px 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.en-cita { margin: 0; padding: 0; border: 0; }
.en-cita p { font-family: var(--wp--preset--font-family--fredoka); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1.15; color: var(--wp--preset--color--verde); margin: 0; text-wrap: balance; }
.en-cita cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--wp--preset--color--gris); }

@media (max-width: 781px) {
	.en-chef .en-foto { max-width: 22rem; margin-inline: auto; }
}

/* ---------- Preguntas frecuentes ---------- */
.en-faq { display: grid; gap: .75rem; }
.en-faq .wp-block-details { background: var(--wp--preset--color--blanco); border-radius: 18px; padding: 0; margin: 0; }
.en-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem; font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--tinta); cursor: pointer; }
.en-faq summary::-webkit-details-marker { display: none; }
.en-faq summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wp--preset--color--salvia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23115E4E' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat; transition: transform .2s; }
.en-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--wp--preset--color--amarillo); }
.en-faq .wp-block-details > :not(summary) { margin: 0; padding: 0 1.5rem 1.3rem; color: var(--wp--preset--color--gris); max-width: 62ch; }

/* ---------- Recibe el menú (leads) ---------- */
.en-leads { border-radius: 36px; padding: clamp(1.75rem, 5vw, 4rem); }
.en-leads .wp-block-columns { gap: clamp(1.5rem, 4vw, 4rem); }
.en-leads .en-o { margin: 1.25rem 0 .75rem; font-weight: 600; }

/* ---------- Pie ---------- */
.en-footer { padding-top: var(--wp--preset--spacing--50); padding-bottom: 2rem; }
.en-footer .en-logo img { height: 7rem; }
.en-footer a { color: var(--wp--preset--color--crema); }
.en-footer a:hover { color: var(--wp--preset--color--amarillo); }
.en-footer .wp-block-social-links { gap: .5rem; }
.en-footer .wp-social-link { background: rgba(255, 255, 255, .1) !important; }
.en-footer .wp-social-link a { padding: .6rem !important; }
.en-footer .en-legal { border-top: 1px solid rgba(251, 246, 234, .18); padding-top: 1.25rem; font-size: var(--wp--preset--font-size--small); opacity: .85; }
.en-footer .en-legal p { margin: 0; }

@media (max-width: 781px) {
	.en-header { padding-top: .5rem; padding-bottom: .5rem; }
	.en-footer .en-logo img { height: 5.5rem; }
	.en-footer .en-legal { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ---------- Páginas internas ---------- */
.en-interna h1 { font-size: var(--wp--preset--font-size--xx-large); }
.en-pagina-pedido { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--wp--preset--spacing--60); }

/* Animaciones solo si la persona no las desactivó */
@media (prefers-reduced-motion: reduce) {
	.en-header, .en-paso__num, .en-pasos__pista i, .en-faq summary::after { transition: none; }
}