/*
Theme Name: CrossFit Lorca
Theme URI: https://crossfitlorca.com
Description: Tema puente para las páginas dinámicas (horarios, bonos, portal cliente) que siguen en WordPress. Reproduce la cabecera, el pie y los estilos globales del sitio Astro para mantener continuidad visual.
Author: CrossFit Lorca
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: crossfit-lorca
*/

/* ========================================================================
   TOKENS + BASE — de crossfitlorca/src/styles/global.css
   Solo lo que necesita el marco (cabecera/pie) y el contenido del plugin.
   Las utilidades de marketing de Astro (.label, .btn, .band, .marquee…) NO
   se incluyen: sus nombres chocan con el Bootstrap del plugin (p. ej. .label
   dejaba los badges rojo sobre rojo) y solo hacen falta en las páginas Astro.
   ponytail: duplicado de la fuente Astro; single-source necesitaría un build.
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Bebas Neue auto-alojada + font-display:block (y preload en header.php): evita
   el FOUT/flashazo del titular del pie al cambiar de la fuente fallback a Bebas. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/bebas-neue.woff2?v=2') format('woff2');
}

:root {
  --night: #11110f;
  --night-2: #17140f;
  --night-3: #221d18;
  --paper: #f5f4f1;
  --paper-2: #ecebe6;
  --surface: #ffffff;
  --ink: #16130f;
  --ink-soft: #3f3a33;
  --muted: #6f685e;
  --muted-d: #a9a196;

  --wine: #bb2014;
  --wine-bright: #f14c38;
  --wine-dark: #94180f;
  --wine-tint: #f9e6e1;

  --wa: #25d366;
  --bone: #f5f4f1;

  --line: #ddd8ce;
  --line-d: rgba(245,244,241,.14);

  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --display: 'Manrope', system-ui, sans-serif;
  --banner: 'Bebas Neue', 'Archivo', sans-serif;

  --wrap: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* El flash azul al pulsar era la selección de texto por defecto (los controles
   del plugin son <div>/<button> con texto). La recoloreamos a marca y evitamos
   seleccionar texto en controles. */
::selection { background: var(--wine); color: #fff; }
button, [role="button"], .day-pill, [data-filter] { -webkit-user-select: none; user-select: none; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* Sin display:block: forzaba a bloque los iconos inline del plugin (p. ej. el
   icono de WhatsApp saltaba de línea). */
img, svg, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

/* Bootstrap 3 (del plugin) pinta a:focus y .btn:focus con el outline azul del
   sistema (-webkit-focus-ring-color), y su especificidad gana a un :focus-visible
   pelado. Lo neutralizamos por elemento y dejamos solo un focus de marca por teclado. */
a:focus, button:focus, .btn:focus, [data-filter]:focus,
input:focus, select:focus, textarea:focus { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, [data-filter]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--wine-bright); outline-offset: 2px; }

/* Contenedor propio del tema (prefijo cfl- para no chocar con .wrap del plugin). */
.cfl-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }
@media(max-width: 600px) { .cfl-wrap { padding-inline: 22px; } }

.cfl-main { min-height: 50vh; }
.cfl-main .cfl-wrap { padding-block: 60px; }
/* px, no rem: el plugin fija html{font-size:62.5%} (base 10px) y escalaría los rem. */
.cfl-title { font-family: var(--banner); font-weight: 400; text-transform: uppercase; font-size: clamp(45px, 5.6vw, 80px); line-height: .98; }

.cfl-ico { display: inline-block; vertical-align: middle; flex: none; }

.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; background: white; color: #111; padding: 15px; }
.skip-link:focus { top: 12px; }

/* ========================================================================
   CABECERA — de crossfitlorca/src/components/Header.astro
   z-index alto: el plugin de horarios tiene .mobile-days-nav en z:100 y, como
   .hdr crea stacking context, el menú (dentro de .hdr) debe componer por encima.
   ======================================================================== */
.hdr { position: sticky; top: 0; z-index: 200; background: #191917; border-bottom: 1px solid var(--line-d); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.logo { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.logo-divider { height: 38px; width: 1px; background: var(--line-d); }
.logo-badge { width: 60px; height: 60px; object-fit: contain; }
.logo-img { height: 54px; width: auto; object-fit: contain; }
.nav { display: flex; gap: 22px; }
.nav a { position: relative; padding-block: 8px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #d5d4cd; transition: color .15s; white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--wine-bright); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1400px){ .nav { gap: 16px; } }
.burger, .menu-panel { display: none; }
.burger { align-items: center; gap: 12px; height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); }
.burger-ico { position: relative; width: 24px; height: 10px; }
.burger-ico i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s cubic-bezier(.7,0,.3,1), top .35s cubic-bezier(.7,0,.3,1); }
.burger-ico i:first-child { top: 0; }
.burger-ico i:last-child { top: 8px; }
.burger[aria-expanded="true"] .burger-ico i { top: 4px; }
.burger[aria-expanded="true"] .burger-ico i:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-ico i:last-child { transform: rotate(-45deg); }
.menu-panel { position: fixed; inset: 88px 0 0; z-index: 110; height: calc(100dvh - 88px); flex-direction: column; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); background: #191917; counter-reset: nl; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.menu-panel.open { visibility: visible; opacity: 1; transition: opacity .3s; }
.menu-panel > a { counter-increment: nl; display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-d); font: 400 clamp(34px, 10vw, 52px)/1 var(--banner); color: var(--bone); opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), color .2s; }
.menu-panel > a::before { content: counter(nl, decimal-leading-zero); font: 700 11px var(--display); letter-spacing: .1em; color: #8d8c86; }
.menu-panel > a:is(:hover, :focus-visible), .menu-panel > a[aria-current="page"] { color: var(--wine-bright); }
.menu-panel.open > a { opacity: 1; transform: none; }
.menu-panel.open > a:nth-child(2) { transition-delay: .04s; } .menu-panel.open > a:nth-child(3) { transition-delay: .08s; } .menu-panel.open > a:nth-child(4) { transition-delay: .12s; }
.menu-panel.open > a:nth-child(5) { transition-delay: .16s; } .menu-panel.open > a:nth-child(6) { transition-delay: .2s; } .menu-panel.open > a:nth-child(7) { transition-delay: .24s; } .menu-panel.open > a:nth-child(8) { transition-delay: .28s; }
@media (max-width: 1250px){ .nav { display: none; } .burger { display: flex; } .menu-panel { display: flex; } html.menu-open { overflow: hidden; } }
@media (prefers-reduced-motion: reduce){ .menu-panel, .menu-panel > a, .burger-ico i { transition: none; } }
@media(max-width: 600px){ .logo { gap: 10px; } .logo-img { width: 118px; height: auto; } .logo-badge { width: 54px; height: 54px; } }

/* ========================================================================
   PIE — de crossfitlorca/src/components/Footer.astro
   ======================================================================== */
.ft{background:#191917;color:var(--bone);overflow:hidden;border-top:1px solid #ffffff25}
.ft .label{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wine-bright);display:inline-flex;align-items:center;gap:10px}
.ft .label::before{content:"";width:24px;height:2px;background:currentColor}
.ft-invitation{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:52px 42px;border-bottom:1px solid var(--line-d)}
.ft h2{font-family:var(--banner);font-size:clamp(64px,8vw,112px);line-height:.93;font-weight:400;margin-top:22px}
.ft h2 span{color:transparent;-webkit-text-stroke:1px var(--bone)}
.ft-start{display:grid;justify-items:center;gap:22px}
.ft-start>span{width:122px;height:122px;border-radius:50%;background:var(--wine);display:grid;place-items:center;line-height:1;transition:transform .25s,background .25s}
.ft-start>span .cfl-ico{width:52px;height:52px;stroke-width:1.5}
.ft-start:hover>span{transform:rotate(45deg);background:var(--wine-dark)}
.ft-start strong{font-size:11px;letter-spacing:.08em}
.ft-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:60px;padding-block:40px}
.ft-brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.ft-brand img{width:130px;height:auto}
.ft-brand span{font-size:9px;letter-spacing:.11em;line-height:1.8;border-left:1px solid var(--line-d);padding-left:18px}
.ft-location p{font-size:14px;color:#c4c4bb;line-height:1.7}
.ft-map{display:inline-flex;gap:28px;align-items:center;min-height:48px;font-size:13px;border-bottom:1px solid #77776b}
.ft h3{font-family:var(--sans);font-size:10px;letter-spacing:.13em;color:#b9b9ae;margin:0 0 18px}
.ft-nav{display:flex;flex-direction:column;align-items:start}
.ft-nav a{font-size:14px;min-height:44px;display:flex;align-items:center}
.ft a:hover{color:#ff7b69}
.ft-phone{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:21px;font-weight:700;letter-spacing:.01em;line-height:1.2;color:var(--bone)}
.ft-phone .cfl-ico{color:var(--wine-bright)}
.ft-phone:hover{color:#ff7b69}
.ft-social{display:flex;gap:25px;margin-top:20px}
.ft-social a{font-size:12px;min-height:44px;display:inline-flex;align-items:center;gap:12px}
.ft-local{display:flex;flex-wrap:wrap;gap:8px 30px;border-block:1px solid var(--line-d);padding-block:14px}
.ft-local a{font-size:12px;color:#c4c4bb;min-height:44px;display:flex;align-items:center}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px 30px;font-size:10px;color:#b9b9ae}
.ft-bottom nav{display:flex;gap:22px}
.ft-bottom a{display:inline-flex;align-items:center;min-height:44px}
.ft a:focus-visible{outline-color:#ff7b69}
@media(max-width:1000px){.ft-grid{gap:30px;grid-template-columns:1fr 1fr}.ft-contact{grid-column:1/-1}.ft-bottom{flex-wrap:wrap}}
@media(max-width:600px){.ft-invitation{padding-block:48px 35px;gap:20px;align-items:start}.ft h2{font-size:58px}.ft .label{font-size:8px;letter-spacing:.07em}.ft-start{max-width:90px;text-align:center;padding-top:55px;gap:15px}.ft-start>span{width:72px;height:72px}.ft-start>span .cfl-ico{width:34px;height:34px}.ft-start strong{font-size:9px}.ft-grid{grid-template-columns:1fr;gap:35px;padding-block:38px}.ft-contact{grid-column:auto}.ft-local{gap:0 20px}.ft-local a{font-size:11px}.ft-bottom{align-items:start;flex-direction:column;gap:0;padding-bottom:90px}.ft-bottom nav{gap:18px}.ft-phone{font-size:19px}}

/* ========================================================================
   INTEGRACIÓN CON EL PLUGIN DE HORARIOS
   Su .mobile-days-nav es sticky top:0 y choca con la cabecera sticky:
   la tapaba al hacer scroll y se colaba por encima del menú abierto.
   La anclamos bajo la cabecera (88px) y el menú queda por encima (z:110).
   ponytail: acopla el tema al markup del plugin; si cambia el selector, ajustar aquí.
   ======================================================================== */
.mobile-days-nav { top: 88px !important; }