/*
Theme Name: Pure Surf School
Theme URI: https://puresurfschoolgc.com
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.
Version: 1.0.0
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 (GTranslate) en la cabecera
   ------------------------------------------------------------ */
.ps-idiomas .gtranslate_wrapper,
.ps-idiomas .gt_container,
.ps-idiomas .gt_selector { margin: 0 !important; }

.ps-idiomas select,
.ps-idiomas .gt_selector {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.ps-idiomas select option { color: #082444; background: #fff; }

/* Que las banderas no se descoloquen dentro de la barra. */
.ps-idiomas img { display: inline-block; vertical-align: middle; }

/* En móvil el selector estorba: lo escondemos y queda el flotante. */
@media (max-width: 1080px) {
  .ps-idiomas { display: none !important; }
}

/* ------------------------------------------------------------
   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;
}

.ps-marca-texto {
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  font-size: 19px;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.ps-idiomas { flex-shrink: 0; display: flex; align-items: center; }

.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; }
}