/*
Theme Name: Sarapiqui Race Park
Theme URI: https://srp.cr
Author: Sarapiqui Race Park
Author URI: https://srp.cr
Description: Tema de bloques a medida para Sarapiqui Race Park, parque de go karts off-road en Horquetas de Sarapiqui, Costa Rica. Paleta y tipografia de marca (Anton / Barlow), mobile-first, bilingue ES/EN.
Version: 1.0.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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarapiqui-race-park
*/

/* =========================================================================
   Sarapiqui Race Park - hoja de estilos base
   -------------------------------------------------------------------------
   La mayoria de los tokens de marca (color, tipografia, tamanos fluidos)
   viven en theme.json. Este archivo cubre: reset minimo, mobile-first para
   componentes que el editor de bloques no cubre (header, footer, boton
   flotante de WhatsApp, CTA de reserva) y accesibilidad (foco visible,
   areas tactiles >= 44x44px). Ver README.md para los ratios de contraste
   documentados y la lista de transparencias de negro permitidas.
   ========================================================================= */

/* ---- Reset minimo, mobile-first -------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--wp--preset--color--elite-sand, #E6DFD1);
  color: var(--wp--preset--color--total-force, #000000);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Foco visible en TODO interactivo ---------------------------------
   Impact Red sobre Elite Sand da 3.41:1: insuficiente para texto normal,
   pero un anillo de foco de 2px es un indicador grafico/UI (umbral 3:1
   de WCAG 2.2 SC 1.4.11), no texto, asi que el color es valido aqui. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-navigation-item > a:focus-visible {
  outline: 3px solid var(--wp--preset--color--impact-red, #CB492C);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace "saltar al contenido", visible solo con teclado */
.srp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  padding: 0.75em 1.25em;
  font-family: 'Anton', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

.srp-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---- Areas tactiles minimas 44x44px ------------------------------------ */
.srp-tap-target,
.wp-block-navigation-item > a,
.srp-cta,
.srp-lang-switch a,
.srp-whatsapp-float {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   Header
   ========================================================================= */
.srp-header {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* Acento de marca: linea roja de separacion. */
  border-bottom: 2px solid var(--wp--preset--color--impact-red, #CB492C);
  position: sticky;
  top: 0;
  z-index: 100;
}

.srp-header__logo img {
  width: 160px;
  height: auto;
}

@media (min-width: 782px) {
  .srp-header {
    padding: 1rem 2rem;
  }
  .srp-header__logo img {
    width: 220px;
  }
}

.srp-header .wp-block-navigation {
  font-family: 'Anton', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  text-transform: uppercase;
  font-size: 0.9375rem;
}

/* Menu en header: colores para legibilidad sobre fondo negro.
   Elite Sand sobre negro = 15.44:1; Impact Red sobre negro = 4.53:1.
   Ambos validos para texto. */
.srp-header .wp-block-navigation a,
.srp-header .wp-block-navigation .wp-block-navigation-item__label {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-header .wp-block-navigation a:hover,
.srp-header .wp-block-navigation a:focus-visible {
  color: var(--wp--preset--color--impact-red, #CB492C);
}

/* Menu movil desplegable de core/navigation: fondo negro solido, no
   transparencia, para maxima legibilidad del texto Elite Sand (15.44:1).
   ACOTADO: solo cuando el menu esta realmente abierto. */
.srp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  background-color: var(--wp--preset--color--total-force, #000000);
}

.srp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog a,
.srp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .wp-block-navigation-item__label {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

/* Selector de idioma ES/EN, siempre visible (no oculto en el menu movil) */
.srp-lang-switch {
  display: flex;
  gap: 0.5rem;
  font-family: 'Anton', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  font-size: 0.875rem;
}

.srp-lang-switch a {
  padding: 0.25rem 0.6rem;
  text-decoration: none;
  color: var(--wp--preset--color--total-force, #000000);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

.srp-lang-switch a[aria-current="true"] {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  border-color: var(--wp--preset--color--total-force, #000000);
}

/* =========================================================================
   Footer
   ========================================================================= */
.srp-footer {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  padding: 2rem 1rem 1.5rem;
}

.srp-footer a {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-footer a:hover,
.srp-footer a:focus-visible {
  /* Impact Red sobre negro = 4.53:1, valido para texto normal. */
  color: var(--wp--preset--color--impact-red, #CB492C);
}

/* Override de especificidad para que el CTA secundario en el footer
   no herede el color de enlace del footer. */
.srp-footer .srp-cta--secondary {
  color: var(--wp--preset--color--total-force, #000000);
}

.srp-footer .srp-cta--secondary:hover,
.srp-footer .srp-cta--secondary:focus-visible {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .srp-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.srp-footer__legal {
  margin-top: 1.5rem;
  padding-top: 1rem;
  /* Separador sobre fondo negro: blanco al 15% simulado con Elite Sand
     a baja opacidad para no introducir un cuarto color. */
  border-top: 1px solid rgba(230, 223, 209, 0.15);
  font-size: 0.8125rem;
}

/* =========================================================================
   CTA de reserva (markup generado por inc/cta-reserva.php)
   ========================================================================= */
.srp-cta {
  font-family: 'Anton', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.85rem 1.5rem;
  line-height: 1.2;
  gap: 0.5rem;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Variante primaria: negro sobre Elite Sand / Elite Sand sobre negro =
   15.44:1. Es la combinacion mas legible de la paleta, por eso es la
   variante por defecto del boton de reserva. */
.srp-cta--primary {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-cta--primary:hover,
.srp-cta--primary:focus-visible {
  background-color: var(--wp--preset--color--impact-red, #CB492C);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

/* Variante secundaria: fondo Elite Sand con texto NEGRO (no rojo: rojo
   sobre arena solo da 3.41:1, insuficiente para texto normal). El rojo se
   usa unicamente como borde, un elemento grafico sujeto al umbral de 3:1. */
.srp-cta--secondary {
  background-color: var(--wp--preset--color--elite-sand, #E6DFD1);
  color: var(--wp--preset--color--total-force, #000000);
  border-color: var(--wp--preset--color--impact-red, #CB492C);
}

.srp-cta--secondary:hover,
.srp-cta--secondary:focus-visible {
  background-color: var(--wp--preset--color--impact-red, #CB492C);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  border-color: var(--wp--preset--color--impact-red, #CB492C);
}

.srp-cta--sm {
  font-size: 0.8125rem;
  padding: 0.6rem 1rem;
}

.srp-cta--md {
  font-size: 0.9375rem;
}

.srp-cta--lg {
  font-size: 1.0625rem;
  padding: 1rem 2rem;
}

/* ---- Boton flotante de WhatsApp, inyectado via wp_footer -------------- */
.srp-whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}

.srp-whatsapp-float:hover,
.srp-whatsapp-float:focus-visible {
  background-color: var(--wp--preset--color--impact-red, #CB492C);
}

.srp-whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (min-width: 782px) {
  .srp-whatsapp-float {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* Respeta a quien pidio menos movimiento: sin animaciones de entrada */
@media (prefers-reduced-motion: reduce) {
  .srp-cta,
  .srp-whatsapp-float {
    transition: none;
  }
}
/* =========================================================================
   Margen lateral del contenido
   -------------------------------------------------------------------------
   El contenido usa el layout "constrained" de WordPress, que centra dentro
   del ancho maximo pero no aplica margen lateral propio. Por debajo de ese
   ancho -es decir, en movil- el texto quedaba pegado al borde de la
   pantalla. Mobile-first: el valor base es el de pantallas pequenas.
   ========================================================================= */
.wp-site-blocks > main {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 782px) {
  .wp-site-blocks > main {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* =========================================================================
   FASE 2 — Presencia de Impact Red
   -------------------------------------------------------------------------
   El manual de marca asigna a Impact Red los botones/CTAs y los acentos de
   energia y velocidad. Hasta ahora el rojo solo aparecia en hovers y en la
   linea del header. Aqui se lleva a los CTAs, los precios y los remates de
   seccion, siempre respetando los umbrales de contraste:

     Elite Sand  sobre Total Force .......... 15.44:1  texto normal  OK
     Impact Red  sobre Total Force ..........  4.53:1  texto normal  OK
     Total Force sobre Impact Red ...........  4.53:1  texto normal  OK
     Elite Sand  sobre Impact Red ...........  3.41:1  solo grafico / texto grande
     Impact Red  sobre Elite Sand ...........  3.41:1  solo grafico / texto grande

   Regla seguida: sobre Impact Red el texto va en Total Force (4.53:1), nunca
   en Elite Sand. Impact Red sobre Elite Sand se usa solo en texto grande
   (>=24px, o >=18.66px en negrita) o en elementos graficos, donde el umbral
   de WCAG 2.2 baja a 3:1.
   ========================================================================= */

/* ---- CTA primario: ahora en Impact Red -------------------------------- */
.srp-cta--primary {
  background-color: var(--wp--preset--color--impact-red, #CB492C);
  color: var(--wp--preset--color--total-force, #000000);
}

/* En hover pasa a negro con texto arena (15.44:1). El borde se tine de rojo
   para que el boton no se funda con los fondos negros (header, panel final). */
.srp-cta--primary:hover,
.srp-cta--primary:focus-visible {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
  border-color: var(--wp--preset--color--impact-red, #CB492C);
}

/* ---- Boton flotante de WhatsApp --------------------------------------- */
.srp-whatsapp-float {
  background-color: var(--wp--preset--color--impact-red, #CB492C);
  color: var(--wp--preset--color--total-force, #000000);
}

.srp-whatsapp-float:hover,
.srp-whatsapp-float:focus-visible {
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

/* ---- Remate rojo bajo cada titulo de seccion --------------------------
   Elemento puramente grafico: no transporta texto, asi que el umbral
   aplicable es 3:1 y Impact Red lo cumple sobre ambos fondos. */
.wp-site-blocks main h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 0.6rem;
  background-color: var(--wp--preset--color--impact-red, #CB492C);
}

/* ---- Tarjetas de precio ------------------------------------------------
   La maquetacion vivia en atributos style= dentro de la plantilla, lo que
   impedia darles tratamiento de marca. Ahora vive aqui. */
.srp-pricing-scroll {
  overflow-x: auto;
}

.srp-pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.srp-price-card {
  flex: 1 1 220px;
  min-width: 220px;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 5px solid var(--wp--preset--color--impact-red, #CB492C);
  border-radius: 6px;
}

.srp-price-card h3 {
  margin-top: 0;
}

/* El importe en Impact Red sobre Elite Sand da 3.41:1: insuficiente para
   texto normal, valido para texto grande. Por eso se fija en 2rem (32px)
   con Anton, muy por encima del umbral de "texto grande" de WCAG. */
.srp-price-card__precio {
  font-family: 'Anton', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0.25rem 0;
  color: var(--wp--preset--color--impact-red, #CB492C);
}

/* ---- Panel de cierre con el CTA de reserva ---------------------------- */
.srp-cta-final {
  margin-top: 2.5rem;
  padding: 1.5rem 1.25rem;
  border: 2px solid var(--wp--preset--color--impact-red, #CB492C);
  border-radius: 6px;
  background-color: var(--wp--preset--color--total-force, #000000);
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-cta-final a:not(.srp-cta) {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

.srp-cta-final a:not(.srp-cta):hover,
.srp-cta-final a:not(.srp-cta):focus-visible {
  color: var(--wp--preset--color--impact-red, #CB492C);
}

/* ---- Titulos del footer en Impact Red (4.53:1 sobre negro) ------------ */
.srp-footer h3 {
  color: var(--wp--preset--color--impact-red, #CB492C);
}

@media (min-width: 782px) {
  .srp-cta-final {
    padding: 2rem;
  }
}

/* ---- Encabezados dentro del panel de cierre ---------------------------
   theme.json fija h1-h6 en Total Force de forma explicita, asi que el color
   del contenedor NO se hereda: sobre el fondo negro del panel el titulo
   quedaba negro sobre negro. Se fuerza Elite Sand (15.44:1).
   El mismo motivo explica la regla .srp-footer h3 de mas arriba. */
.srp-cta-final h2,
.srp-cta-final h3 {
  color: var(--wp--preset--color--elite-sand, #E6DFD1);
}

/* =========================================================================
   Videos de la galeria (YouTube Shorts, verticales 9:16)
   ========================================================================= */
.srp-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 600px) {
  .srp-videos {
    grid-template-columns: repeat(2, 1fr);
  }
}


.srp-video {
  margin: 0;
}

.srp-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  border: 0;
  border-radius: 6px;
  background-color: var(--wp--preset--color--total-force, #000000);
}