/*
Theme Name: Ricas Raspas El Guero
Theme URI: https://ricasraspaselguero.com
Author: Ricas Raspas El Guero
Description: A festive, mobile-first block theme for the Ricas Raspas El Guero food trailer. Bilingual-friendly, built around the trailer's logo palette of mango yellow, chile red, agave teal and warm carbon. Showcase only - no e-commerce.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ricas-raspas
Tags: block-theme, food-and-drink, restaurant, one-column, custom-colors, custom-menu, block-patterns, full-site-editing
*/

/* ==========================================================================
   Ricas Raspas El Guero - supplementary styles
   Design tokens live in theme.json. This file only carries the decorative
   components that block supports cannot express.
   ========================================================================== */

/* --- Papel picado banner ------------------------------------------------ */
.rr-papel {
  --rr-papel-h: 26px;
  height: var(--rr-papel-h);
  width: 100%;
  flex: 0 0 auto;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wp--preset--color--mango) 50%),
    linear-gradient(-45deg, transparent 50%, var(--wp--preset--color--mango) 50%);
  background-size: 40px var(--rr-papel-h);
  background-repeat: repeat-x;
  background-position: 0 0, 20px 0;
}
.rr-papel--fiesta {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wp--preset--color--chile) 50%),
    linear-gradient(-45deg, transparent 50%, var(--wp--preset--color--chile) 50%),
    linear-gradient(45deg, transparent 50%, var(--wp--preset--color--agave) 50%),
    linear-gradient(-45deg, transparent 50%, var(--wp--preset--color--agave) 50%),
    linear-gradient(45deg, transparent 50%, var(--wp--preset--color--mango) 50%),
    linear-gradient(-45deg, transparent 50%, var(--wp--preset--color--mango) 50%);
  background-size: 120px var(--rr-papel-h);
  background-repeat: repeat-x;
  background-position: 0 0, 20px 0, 40px 0, 60px 0, 80px 0, 100px 0;
}
.rr-papel--flip { transform: scaleY(-1); }

/* --- Menu board --------------------------------------------------------- */
.rr-board {
  border: 4px solid var(--wp--preset--color--carbon);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--wp--preset--color--carbon);
}

.rr-menu-group + .rr-menu-group { margin-top: var(--wp--preset--spacing--40); }

.rr-menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 0.35rem;
}
.rr-menu-item__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.15;
  color: var(--wp--preset--color--mango);
  letter-spacing: 0.01em;
}
.rr-menu-item__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: flex-end;
  height: 0;
  transform: translateY(-0.35em);
  border-bottom: 2px dotted rgba(247, 228, 188, 0.38);
}
.rr-menu-item__price {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--crema);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rr-menu-item__price--tbd {
  color: rgba(247, 228, 188, 0.45);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-style: italic;
}
.rr-menu-item__desc {
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
  color: rgba(247, 228, 188, 0.72);
  max-width: 52ch;
}
.rr-menu-item__desc em { font-style: normal; color: var(--wp--preset--color--agave); }

/* Flavour chips */
.rr-flavors {
  list-style: none;
  margin: 0.15rem 0 0.9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rr-flavors li {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  line-height: 1;
  padding: 0.42em 0.85em;
  border-radius: 999px;
  background: rgba(247, 228, 188, 0.10);
  border: 1px solid rgba(247, 228, 188, 0.24);
  color: var(--wp--preset--color--crema);
}

/* Light-background variant of the menu list, for use outside the dark board */
.rr-menu--light .rr-menu-item__name  { color: var(--wp--preset--color--chile); }
.rr-menu--light .rr-menu-item__price { color: var(--wp--preset--color--carbon); }
.rr-menu--light .rr-menu-item__dots  { border-bottom-color: rgba(30, 27, 16, 0.28); }
.rr-menu--light .rr-menu-item__desc  { color: var(--wp--preset--color--humo); }
.rr-menu--light .rr-flavors li {
  background: rgba(30, 27, 16, 0.05);
  border-color: rgba(30, 27, 16, 0.18);
  color: var(--wp--preset--color--carbon);
}

/* --- Section eyebrow ---------------------------------------------------- */
.rr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--chile);
  margin: 0 0 0.5rem;
}
.rr-eyebrow::before,
.rr-eyebrow::after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.rr-eyebrow--on-dark { color: var(--wp--preset--color--mango); }

/* --- Sticker card ------------------------------------------------------- */
.rr-sticker {
  border: 3px solid var(--wp--preset--color--carbon) !important;
  border-radius: 16px !important;
  box-shadow: 5px 5px 0 var(--wp--preset--color--carbon);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
a.rr-sticker:hover,
.rr-sticker:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--wp--preset--color--carbon);
}

/* --- Buttons: sticker variant ------------------------------------------- */
.wp-block-button.is-style-rr-sticker .wp-block-button__link {
  border: 3px solid var(--wp--preset--color--carbon);
  box-shadow: 4px 4px 0 var(--wp--preset--color--carbon);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.wp-block-button.is-style-rr-sticker .wp-block-button__link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wp--preset--color--carbon);
}
.wp-block-button.is-style-rr-sticker .wp-block-button__link:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--wp--preset--color--carbon);
}

/* --- Header ------------------------------------------------------------- */
.rr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
.rr-header .wp-block-site-logo img {
  transition: transform 0.2s ease;
}
.rr-header .wp-block-site-logo a:hover img { transform: rotate(-3deg) scale(1.04); }

.rr-header .wp-block-navigation .wp-block-navigation-item__content {
  padding-block: 0.35em;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rr-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--wp--preset--color--mango);
}
.rr-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--chile);
}

/* --- Hero --------------------------------------------------------------- */
.rr-hero { position: relative; overflow: hidden; }
.rr-hero__logo img {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
.rr-hero__title {
  text-shadow: 3px 3px 0 var(--wp--preset--color--carbon);
}

/* --- Info rows (hours / location) --------------------------------------- */
.rr-info dt {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--mango);
}
.rr-info dd { margin: 0 0 0.8rem; }

.rr-hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--medium);
}
.rr-hours th,
.rr-hours td {
  text-align: left;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px dashed rgba(30, 27, 16, 0.18);
}
.rr-hours th {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  white-space: nowrap;
}
.rr-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.rr-hours tr:last-child th,
.rr-hours tr:last-child td { border-bottom: 0; }
.rr-hours .is-closed { color: var(--wp--preset--color--humo); }

/* --- Booking / contact form --------------------------------------------- */
.rr-form { display: grid; gap: 1.1rem; }
.rr-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .rr-form__row--2 { grid-template-columns: 1fr 1fr; } }

.rr-field { display: grid; gap: 0.4rem; }
.rr-field > label {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.01em;
}
.rr-field .rr-opt { font-weight: 400; color: var(--wp--preset--color--humo); }
.rr-field input,
.rr-field select,
.rr-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--carbon);
  background: var(--wp--preset--color--blanco);
  border: 2px solid rgba(30, 27, 16, 0.28);
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rr-field textarea { min-height: 8.5rem; resize: vertical; }
.rr-field input:focus,
.rr-field select:focus,
.rr-field textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--agave);
  box-shadow: 0 0 0 3px rgba(16, 134, 143, 0.22);
}
.rr-field input[aria-invalid="true"],
.rr-field textarea[aria-invalid="true"],
.rr-field select[aria-invalid="true"] { border-color: var(--wp--preset--color--chile); }
.rr-field__error {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  color: var(--wp--preset--color--chile-oscuro);
}
.rr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rr-submit {
  justify-self: start;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--masa);
  background: var(--wp--preset--color--chile);
  border: 3px solid var(--wp--preset--color--carbon);
  border-radius: 999px;
  padding: 0.9rem 2rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--wp--preset--color--carbon);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.rr-submit:hover { background: var(--wp--preset--color--chile-oscuro); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wp--preset--color--carbon); }
.rr-submit:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--wp--preset--color--carbon); }

.rr-notice {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 2px solid;
  font-weight: 600;
}
.rr-notice--ok  { border-color: var(--wp--preset--color--lima); background: rgba(90, 158, 59, 0.12); }
.rr-notice--err { border-color: var(--wp--preset--color--chile); background: rgba(208, 48, 26, 0.10); }
.rr-notice ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-weight: 400; }

/* --- Social row --------------------------------------------------------- */
.rr-social { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --- Gallery tweaks ----------------------------------------------------- */
.rr-gallery .wp-block-image img,
.wp-block-gallery.rr-gallery figure img {
  border-radius: 14px;
  border: 3px solid var(--wp--preset--color--carbon);
}

/* --- Utility ------------------------------------------------------------ */
.rr-balance { text-wrap: balance; }
.rr-pretty  { text-wrap: pretty; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  clip-path: none; height: auto; width: auto; margin: 0;
  padding: 0.9rem 1.4rem; top: 0.5rem; left: 0.5rem; z-index: 999;
  background: var(--wp--preset--color--carbon); color: var(--wp--preset--color--masa);
  border-radius: 10px; font-weight: 700; text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Links on dark ground ----------------------------------------------
   Chile red does not carry enough contrast against carbon, so links inside
   dark sections switch to mango. */
.has-carbon-background-color a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)),
.has-carbon-suave-background-color a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)),
.rr-hero a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)) {
  color: var(--wp--preset--color--mango);
}
.has-carbon-background-color a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)):hover,
.has-carbon-suave-background-color a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)):hover,
.rr-hero a:where(:not(.wp-element-button):not(.wp-block-social-link-anchor)):hover {
  color: var(--wp--preset--color--mango-claro);
}

/* Site title in the header must not pick up the link colour. */
.rr-header .wp-block-site-title a { color: var(--wp--preset--color--carbon); }

/* --- Small-screen safety ------------------------------------------------
   Long unbroken words (URLs, run-on names) must never widen the document. */
h1, h2, h3, h4, h5, h6,
.rr-menu-item__name,
.wp-block-site-title {
  overflow-wrap: break-word;
}