/*
Theme Name: Pure Surf School
Theme URI: https://puresurfschoolgc.es
Author: Àlex Català
Description: Tema a medida de Pure Surf School, construido a partir del diseño "Pure Surf School.dc.html". Las tipografías y los estilos son los del diseño, sin constructores de por medio. Trilingüe: inglés, español y alemán, con las traducciones escritas a mano dentro del tema.
Version: 6.5.1
Requires at least: 6.0
Tested up to: 7.0
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: puresurf
Tags: surf, woocommerce, custom
WC requires at least: 8.0
WC tested up to: 10.9
*/

/* ============================================================
   BASE — copiado literal del <helmet> del diseño.
   No tocar sin volver al diseño primero.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #0d1b2a;
  background: #eef4f9;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
  overflow-x: hidden;
}

a { color: #1ca3d8; text-decoration: none; }
a:hover { color: #0f7ba8; }
input, select, button, textarea { font-family: inherit; }
::selection { background: #f4b01e; color: #082444; }

img { max-width: 100%; height: auto; }

@keyframes psFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ------------------------------------------------------------
   Paleta y tipografías del diseño, como variables.
   Sirven para que WooCommerce y el editor las hereden.
   ------------------------------------------------------------ */
:root {
  --ps-navy:       #082444;
  --ps-navy-dark:  #05182f;
  --ps-yellow:     #f4b01e;
  --ps-yellow-sh:  #c98a12;
  --ps-blue:       #1ca3d8;
  --ps-blue-dark:  #0f7ba8;
  --ps-ice:        #eef6fc;
  --ps-bg:         #eef4f9;
  --ps-text:       #41525f;
  --ps-muted:      #5a6b7b;
  --ps-grey:       #8496a6;
  --ps-line:       #dbe6ef;
  --ps-green:      #2fae4e;

  --ps-font-body:    'Montserrat', system-ui, sans-serif;
  --ps-font-display: 'Permanent Marker', cursive;
  --ps-font-hand:    'Caveat', cursive;
}

/* ------------------------------------------------------------
   Rejillas responsivas — idénticas al diseño.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .ps-desktop-nav { display: none !important; }
  .ps-burger      { display: block !important; }
}

@media (max-width: 900px) {
  .ps-widget-grid   { grid-template-columns: 1fr 1fr !important; }
  .ps-feat-strip    { grid-template-columns: 1fr 1fr !important; }
  .ps-lessons-grid  { grid-template-columns: 1fr 1fr !important; }
  .ps-includes-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .ps-why-grid      { grid-template-columns: 1fr 1fr !important; }
  .ps-rentals-grid  { grid-template-columns: 1fr 1fr !important; }
  .ps-detail-grid   { grid-template-columns: 1fr !important; }
  .ps-about-grid    { grid-template-columns: 1fr !important; }
  .ps-gallery-grid  { grid-template-columns: 1fr 1fr !important; }
  .ps-reviews-grid  { grid-template-columns: 1fr !important; }
  .ps-contact-grid  { grid-template-columns: 1fr !important; }
  .ps-footer-grid   { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .ps-widget-grid   { grid-template-columns: 1fr !important; }
  .ps-feat-strip    { grid-template-columns: 1fr !important; }
  .ps-lessons-grid  { grid-template-columns: 1fr !important; }
  .ps-includes-grid { grid-template-columns: 1fr 1fr !important; }
  .ps-why-grid      { grid-template-columns: 1fr !important; }
  .ps-rentals-grid  { grid-template-columns: 1fr 1fr !important; }
  .ps-info-row      { grid-template-columns: 1fr 1fr !important; }
  .ps-inc-grid      { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   Accesibilidad: el diseño usa divs clicables, aquí además
   se navegan con teclado.
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ps-blue);
  outline-offset: 2px;
}

.ps-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ps-yellow); color: var(--ps-navy);
  padding: 12px 20px; font-weight: 900; border-radius: 0 0 8px 0;
}
.ps-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   WOOCOMMERCE — que el carrito, la caja y la cuenta hereden
   la tipografía y los colores del diseño en vez de los suyos.
   ------------------------------------------------------------ */
/* OJO: WooCommerce pone estas clases en el <body>, no en un contenedor.
   Si aquí se pone un max-width, se encoge la página ENTERA — cabecera y pie
   incluidos. El ancho lo fija cada plantilla en su propio <main>. */
body.woocommerce, body.woocommerce-page {
  font-family: var(--ps-font-body);
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  color: var(--ps-navy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--ps-yellow);
  color: var(--ps-navy);
  border: none;
  border-radius: 10px;
  padding: 14px 26px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 5px 0 var(--ps-yellow-sh);
  transition: transform .08s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #ffc043;
  color: var(--ps-navy);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ps-yellow-sh); }

.woocommerce .price,
.woocommerce span.amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ps-navy);
  font-weight: 900;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--ps-blue); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--ps-blue); }
.woocommerce .woocommerce-error { border-top-color: #d64545; }

.woocommerce table.shop_table {
  border-radius: 14px;
  border-color: #d9e8f4;
}
.woocommerce table.shop_table th { color: var(--ps-navy); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  padding: 12px 13px;
  border: 2px solid var(--ps-line);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ps-navy);
}

.woocommerce .quantity .qty { width: 74px; text-align: center; }

/* Ocultamos el breadcrumb por defecto: el diseño tiene su propio "volver". */
.woocommerce .woocommerce-breadcrumb { display: none; }

/* ------------------------------------------------------------
   Galería por actividad

   Cuadrícula regular: todas las fotos del mismo tamaño y cuadradas.
   Las columnas se ajustan solas al ancho disponible, así que nunca se
   sale nada de la pantalla ni hacen falta media queries.
   ------------------------------------------------------------ */
.ps-galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  /* Sitio para la sombra amarilla, que si no la corta el borde. */
  padding: 0 6px 6px 0;
}
.ps-galeria-grid[hidden] { display: none; }

.ps-foto {
  all: unset;
  box-sizing: border-box;
  display: block;
  position: relative;
  cursor: zoom-in;
  min-width: 0;
  aspect-ratio: 1 / 1;
}

.ps-foto-marco {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 3px solid #082444;
  box-shadow: 6px 6px 0 #f4b01e;
  background: #082444;
  transition: transform .12s ease, box-shadow .12s ease;
}

.ps-foto:hover .ps-foto-marco,
.ps-foto:focus-visible .ps-foto-marco {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 #f4b01e;
}

.ps-foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 560px) {
  .ps-galeria-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ps-foto-marco { border-width: 2.5px; box-shadow: 4px 4px 0 #f4b01e; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-foto-marco { transition: none; }
}

/* ------------------------------------------------------------
   Selector de idioma

   Un botón con la bandera y el nombre del idioma actual que despliega
   los tres. No es un <select>: así se puede pintar con la tipografía y
   los colores del diseño, y cada opción es un enlace de verdad (con su
   ?lang=), que funciona aunque el JavaScript falle.
   ------------------------------------------------------------ */
.ps-idiomas { position: relative; flex-shrink: 0; }

.ps-idiomas-boton {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 8px 11px;
  font-family: var(--ps-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ps-idiomas-boton:hover,
.ps-idiomas-boton[aria-expanded="true"] {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(244, 176, 30, .8);
}

.ps-idiomas-bandera { font-size: 15px; line-height: 1; }

/* En la barra ancha se lee «English»; en el teléfono, «EN». */
.ps-idiomas-codigo { display: none; }

.ps-idiomas-flecha {
  font-size: 10px;
  opacity: .8;
  transition: transform .15s ease;
}
.ps-idiomas-boton[aria-expanded="true"] .ps-idiomas-flecha { transform: rotate(180deg); }

.ps-idiomas-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 165px;
  background: #fff;
  border: 3px solid #082444;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #f4b01e;
}
.ps-idiomas-lista[hidden] { display: none; }

.ps-idiomas-lista a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #082444;
  font-family: var(--ps-font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.ps-idiomas-lista a:hover { background: #f2f7fb; }
.ps-idiomas-lista a[aria-current="true"] { background: #f4b01e; }

/* En el teléfono el botón sigue en la barra, pero encogido: bandera y las
   dos letras del idioma. Con «English» entero no cabía junto a RESERVAR y la
   hamburguesa, y por eso antes se escondía — que era peor. */
@media (max-width: 1080px) {
  .ps-idiomas { margin-left: auto; }
  .ps-idiomas + .ps-reservar { margin-left: 0; }
}

@media (max-width: 720px) {
  .ps-idiomas-nombre { display: none; }
  .ps-idiomas-codigo { display: inline; }
  .ps-idiomas-boton  { gap: 5px; padding: 8px 9px; }
}

/* Muy estrecho: solo la bandera, que ya se entiende sola. */
@media (max-width: 350px) {
  .ps-idiomas-codigo { display: none; }
  .ps-idiomas-boton  { padding: 8px; }
}

/* La flecha sobra en cuanto el botón se encoge: ocupa sitio y no dice nada
   que la bandera no diga ya. */
@media (max-width: 720px) {
  .ps-idiomas-flecha { display: none; }
}

.ps-idiomas-movil {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.ps-idiomas-movil a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-family: var(--ps-font-body);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.ps-idiomas-movil a[aria-current="true"] {
  background: #f4b01e;
  border-color: #f4b01e;
  color: #082444;
}

/* ------------------------------------------------------------
   CABECERA

   En móvil se ocultan el menú y el selector de idioma, y quedan el
   logo, el nombre, RESERVAR, el carrito y la hamburguesa. Todo junto
   no cabe en una pantalla de teléfono: se desbordaba por la derecha y
   la página se podía arrastrar de lado. Aquí se ajusta cada pieza.
   ------------------------------------------------------------ */
html { overflow-x: hidden; }

.ps-barra {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ps-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;          /* deja que el nombre se recorte antes que desbordar */
  flex: 0 1 auto;
}

/* Logo subido desde Personalizar → Identidad del sitio.
   Sin esto, the_custom_logo() pinta la imagen a su tamaño real: un PNG de
   varios cientos de píxeles se saldría de la cabecera en vez de ocupar el
   mismo hueco de 44px que ocupaba el círculo de aviso. object-fit: contain
   respeta la proporción del archivo — no lo recorta ni lo deforma — así que
   vale igual para un PNG cuadrado que para uno con fondo ya quitado. */
.ps-marca .custom-logo-link {
  display: flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.ps-marca img.custom-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ps-marca-texto {
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  font-size: 19px;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Con logo subido, .ps-marca-texto es un <a> (ver header.php) — el hover
   azul global de los enlaces no pega aquí, así que se mantiene en blanco. */
a.ps-marca-texto:hover { color: #fff; }

.ps-desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-reservar {
  margin-left: 8px;
  background: #f4b01e;
  color: #082444;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 4px 0 #c98a12;
  flex-shrink: 0;
  white-space: nowrap;
}

.ps-carrito { position: relative; flex-shrink: 0; color: #fff; display: flex; align-items: center; }

/* Sin menú de escritorio no hay nada que empuje a la derecha:
   lo hace el propio botón de reservar. */
@media (max-width: 1080px) {
  .ps-reservar { margin-left: auto; }
}

@media (max-width: 560px) {
  .ps-barra { padding: 0 14px; gap: 10px; }
  .ps-marca-texto { font-size: 15px; }
  .ps-reservar { padding: 10px 14px; font-size: 11px; box-shadow: 0 3px 0 #c98a12; }
  .ps-burger { padding: 6px !important; }
}

/* En pantallas muy estrechas el nombre sobra: se queda el logo. */
@media (max-width: 400px) {
  .ps-marca-texto { display: none; }
}

/* -------------------------------------------------------------------------
 * El alto del hero
 *
 * Va aquí y no en el atributo style de la portada porque en el móvil hace
 * falta más alto: el texto está arriba, en el cielo, y la cara de la chica
 * tiene que caber entera debajo. Con los 640 px de escritorio se quedaba
 * apretado y el título volvía a montarse sobre ella.
 * ---------------------------------------------------------------------- */
.ps-hero { min-height: 640px; }

@media (max-width: 820px) {
  .ps-hero { min-height: 86vh; }
}