/*
Theme Name: Villalar
Theme URI: https://restaurantevillalar.com/
Description: Tema de bloques a medida para Restaurante Villalar, Baeza (Jaén). Cocina de mercado. Paleta y estructura del canvas de diseño, tipografía y sistema de tokens del prototipo. Sin tema padre y sin constructor visual.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villalar
Tags: block-theme, full-site-editing, restaurant, one-column, custom-colors, custom-menu
*/

/* -------------------------------------------------------------------------
   Reglas que theme.json no sabe expresar.
   Todo lo que sea color, tipografía, espaciado o layout vive en theme.json;
   aquí solo queda lo que necesita un selector propio.
   ---------------------------------------------------------------------- */

/* Versalitas espaciadas: la etiqueta pequeña que encabeza cada sección del
   canvas —«EL CUADERNO», «HOY ABIERTO»— y los rótulos de los botones. */
.vll-cintillo {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 400;
}

.vll-rotulo {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 400;
}

/* Enlaces: heredan color y se apagan al pasar por encima, como el prototipo. */
a {
  text-decoration: none;
  transition: opacity 0.18s ease;
}

a:hover {
  opacity: 0.7;
}

/* Botón de filete: el patrón dominante del canvas, un rectángulo de un pixel
   sin relleno. En verde sobre crema y en claro sobre el verde hondo. */
.wp-block-button.is-style-filete .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Sin esto hereda el crema que theme.json da a los botones sólidos y
     desaparece sobre el fondo claro. Heredando, sirve en ambas bandas. */
  color: inherit;
}

/* -------------------------------------------------------------------------
   Cubierta de portada.
   El canvas la dibuja a 900 px de alto con el logotipo a 420 px. En pantallas
   estrechas el alto se suelta y el logotipo se encoge con el viewport, que si
   no se sale por los lados.
   ---------------------------------------------------------------------- */

/* Las bandas a sangre no reciben el padding lateral del tema: WordPress solo
   se lo pasa a los bloques «alignfull» dentro de un layout constrained, y
   estas son grupos flex. Se lo damos aquí, con el mismo valor que la raíz. */
.vll-cubierta,
.vll-franja {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

.vll-cubierta {
  min-height: min(900px, 92vh);
  align-items: stretch;
}

/* Los hijos de la cubierta conservan su altura natural. Sin esto, el reparto
   vertical del flex estira la rejilla de accesos hasta ocupar media pantalla. */
.vll-cubierta > * {
  flex-grow: 0;
  flex-shrink: 0;
}

/* Oculto a la vista, no al lector de pantalla. Se evita display:none, que lo
   escondería también de la accesibilidad y del indexado. */
.vll-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El logotipo va incrustado como SVG para heredar el color del entorno. */
.vll-logo {
  color: inherit;
}

.vll-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.vll-cubierta-logo {
  margin: 0 auto;
}

/* Seis accesos en escritorio, tres en tableta y dos en móvil. */
@media (max-width: 1000px) {
  .wp-block-buttons.vll-accesos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .wp-block-buttons.vll-accesos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La franja de horario apila sus piezas en móvil, donde los separadores «·»
   sobran. */
@media (max-width: 640px) {
  .vll-franja > p:nth-child(3),
  .vll-franja > p:nth-child(5) {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Piezas de la portada.
   ---------------------------------------------------------------------- */

/* Cada plato destacado va entre filetes, como en el canvas. El último cierra
   la lista por abajo. */
.vll-plato {
  border-top: 1px solid var(--wp--preset--color--linea);
  padding: 22px 0;
}

.vll-plato-ultimo {
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

/* Ficha de dirección y horario: rótulo a la izquierda, dato a la derecha. */
.vll-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 26px;
  align-items: start;
}

@media (max-width: 600px) {
  .vll-datos {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .vll-datos > p:nth-child(odd) {
    margin-top: 14px;
  }
}

/* Las cifras de aforo y respuesta cuelgan de un filete. */
.vll-cifra {
  border-top: 1px solid var(--wp--preset--color--linea);
  padding-top: 20px;
}

/* El par reservar / visitarnos se separa con una línea vertical, que en móvil
   pasa a horizontal porque las columnas se apilan. */
@media (min-width: 782px) {
  .vll-par-derecha {
    border-left: 1px solid var(--wp--preset--color--linea);
  }
}

@media (max-width: 781px) {
  .vll-par-derecha {
    border-top: 1px solid var(--wp--preset--color--linea);
  }
}

/* -------------------------------------------------------------------------
   La carta.
   ---------------------------------------------------------------------- */

@media (min-width: 782px) {
  .vll-carta-lateral {
    border-right: 1px solid var(--wp--preset--color--linea);
  }
}

/* Los dos bloques de servicio de la columna izquierda cuelgan de un filete. */
.vll-carta-servicio,
.vll-carta-alergenos {
  border-top: 1px solid var(--wp--preset--color--linea);
  padding-top: 26px;
}

/* Cada plato: nombre a la izquierda, precio a la derecha, filete debajo. */
.vll-carta-plato {
  padding: 11px 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
  align-items: baseline;
  gap: 16px;
}

/* El precio no se parte ni se encoge; el nombre cede el espacio.
   Solo en las filas de dos piezas —nombre y precio, día y horario—, que son las
   que se montan en flex. La misma clase se reutiliza para listas de una sola
   línea en baeza, empleo y reservar: si el «nowrap» les llegara, el texto largo
   dejaría de partir y desbordaría la pantalla en móvil. */
.vll-carta-plato.is-layout-flex > p:last-child:not(:first-child) {
  white-space: nowrap;
}

.vll-curso h2 {
  margin-bottom: 16px;
}

/* Resultados de búsqueda: una lista sobria, sin cuadrícula ni fotos. */
.vll-resultado {
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

.vll-curso + .vll-curso {
  margin-top: 44px;
}

/* El visor del PDF encaja con el resto: sin bordes redondeados ni sombras. */
.wp-block-file__embed {
  border: 1px solid var(--wp--preset--color--linea-fuerte);
  background: #dcdbcb;
}

/* -------------------------------------------------------------------------
   La casa y contacto.
   ---------------------------------------------------------------------- */

/* Cubierta de página interior: la misma banda verde, más baja que la portada. */
.vll-cubierta-interior {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

/* Cada miembro del equipo cuelga de un filete, con su retrato a la izquierda. */
.vll-persona {
  border-top: 1px solid var(--wp--preset--color--linea);
  padding-top: 18px;
  align-items: flex-start;
}

.vll-retrato {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    -45deg,
    var(--wp--preset--color--linea) 0 2px,
    transparent 2px 10px
  );
  border: 1px solid var(--wp--preset--color--linea-fuerte);
}

/* Los días de cierre se apagan, para que se vean de un vistazo. */
.vll-cerrado > p:first-child {
  color: var(--wp--preset--color--salvia);
}

/* -------------------------------------------------------------------------
   Ajustes de móvil que valen para todo el sitio.
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
  /* Las columnas se apilan y arrastran el relleno lateral del escritorio —hasta
     88 px por lado—, que en una pantalla de 390 px se come la mitad del ancho.
     Aquí manda el mismo margen que la raíz. Lleva !important porque el relleno
     viene en el atributo style del bloque y no hay forma de ganarle si no. */
  .wp-block-columns.alignfull > .wp-block-column {
    padding-left: clamp(20px, 5vw, 32px) !important;
    padding-right: clamp(20px, 5vw, 32px) !important;
  }

  /* La etiqueta ámbar no parte nunca, y algunas son largas. En pantalla
     estrecha se le permite pasar a la línea siguiente. */
  .vll-pend-etiqueta {
    white-space: normal;
    margin-left: 0;
  }
}

/* -------------------------------------------------------------------------
   Contenido sin confirmar.
   El canvas resalta en ámbar lo que el restaurante todavía no ha validado y
   que, por tanto, no puede publicarse: nombres del equipo, la cita de reseña,
   los proveedores y los titulares del blog. La marca se conserva aquí para no
   perderla en el paso a WordPress. Se retira antes de publicar.
   ---------------------------------------------------------------------- */

.vll-pend {
  background: rgba(176, 124, 20, 0.15);
  box-shadow: inset 0 -1.5px 0 rgba(176, 124, 20, 0.8);
}

/* El salvia sobre el ámbar compuesto se queda en 4,22:1, por debajo del 4,5:1
   que pide la WCAG para texto pequeño. Dentro de una marca se oscurece a oliva.
   Solo ocurre sobre fondo claro: en las bandas verdes el texto es crema. */
.has-salvia-color .vll-pend,
.vll-pend .has-salvia-color {
  color: var(--wp--preset--color--oliva);
}

.vll-pend-etiqueta {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #7a5209;
  background: #f3e3be;
  padding: 2px 5px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Huecos de fotografía.
   No existe todavía ninguna foto del restaurante. Cada hueco lleva dentro su
   briefing, que hace las veces de lista de tomas para el fotógrafo.
   ---------------------------------------------------------------------- */

.vll-hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: repeating-linear-gradient(
    -45deg,
    var(--wp--preset--color--linea) 0 2px,
    transparent 2px 10px
  );
  border: 1px solid var(--wp--preset--color--linea-fuerte);
  color: var(--wp--preset--color--salvia);
  font-size: var(--wp--preset--font-size--chico);
  font-style: italic;
  min-height: 240px;
}