/* ============================================================
   Centre de Fisioteràpia Castelldefels
   Design token estratti dagli HTML forniti
   Da incollare nel child theme (Kadence) o in Aspetto > CSS personalizzato
   ============================================================ */

:root {
  /* ---- Colori marca (già dichiarati negli HTML originali) ---- */
  --amarillo:      #E8A820;  /* accento primario / CTA */
  --amarillo-dark: #d49618;  /* hover CTA */
  --turquesa:      #00BFB2;  /* accento secondario / label */
  --beis:          #C4B9A8;  /* accento terziario */
  --blanco-roto:   #F3F2EE;  /* fondo pagina */
  --negro:         #0D0D0D;  /* testo principale */
  --negro-deep:    #050505;  /* fondi sezioni scure */

  /* ---- Grigi ---- */
  --gris-medio: #666;  /* testo secondario, icone */
  --gris-claro: #999;  /* testo terziario */
  --gris-888:   #888;
  --gris-555:   #555;
  --gris-444:   #444;

  /* ---- Trasparenze ricorrenti ---- */
  --nav-bg-scroll:  rgba(243,242,238,0.96);
  --overlay-hero:   rgba(13,13,13,0.4);
  --overlay-fuerte: rgba(13,13,13,0.65);
  --card-dark:      rgba(13,13,13,0.93);
  --linea-suave:    rgba(13,13,13,0.1);
  --linea-borde:    rgba(0,0,0,0.08);
  --tint-turquesa:  rgba(0,191,178,0.06);
  --tint-amarillo:  rgba(232,168,32,0.05);

  /* ---- Tipografia: Outfit (Google Fonts) ---- */
  /* pesi effettivamente usati: 300 400 500 600 700 — l'800 caricato non serve, toglilo */
  --font-base: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scala titoli: già fluida negli originali, si adatta da sola */
  --h1-hero:      clamp(48px, 6.5vw, 88px);
  --h2-section:   clamp(36px, 4vw, 52px);
  --h2-alt:       clamp(32px, 4vw, 50px);
  --h3:           clamp(24px, 3vw, 36px);
  --h4:           clamp(20px, 2.5vw, 28px);

  /* Corpo e dettagli: valori FISSI negli originali → da rivedere sotto i 480px */
  --txt-lg:  17px;
  --txt-md:  15px;
  --txt-sm:  14px;
  --txt-xs:  13px;
  --txt-xxs: 12px;
  --txt-micro: 11px;

  /* ---- Letter-spacing (le label maiuscole sono spaziate) ---- */
  --ls-label:  0.12em;  /* il più usato */
  --ls-nav:    0.1em;
  --ls-wide:   0.14em;
  --ls-xwide:  0.28em;
  --ls-titolo: 0.02em;

  /* ---- Layout ---- */
  --container:      1100px;  /* larghezza contenuto standard */
  --container-wide: 1400px;  /* sezioni full-bleed */
  --container-text: 600px;   /* paragrafi introduttivi */
  --pad-section:    100px;   /* verticale desktop */
  --pad-side:       48px;    /* orizzontale desktop */

  /* ---- Forme ---- */
  --radius-card: 16px;
  --radius-sm:   12px;
  --radius-pill: 50px;  /* bottoni */

  /* ---- Transizioni ---- */
  --t-fast: 0.2s;
  --t-med:  0.35s;
  --t-slow: 0.4s;
}

/* ============================================================
   BREAKPOINT — NON esistono negli HTML originali.
   Questa è una proposta di partenza, da validare sui mockup.
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --pad-section: 72px;
    --pad-side: 32px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --pad-section: 56px;
    --pad-side: 20px;
    --ls-label: 0.1em;   /* la spaziatura larga spezza le righe su schermo stretto */
    --ls-xwide: 0.18em;
  }
}

/* ============================================================
   NOTA SUGLI HOVER
   Flip card macchinari e card trattamenti negli originali si
   aprono solo con :hover. Su touch non funzionano.
   Isolare gli effetti hover dietro questa query e prevedere
   una variante tap/accordion per il resto.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  /* qui dentro tutti gli effetti :hover di card e flip card */
}

/* ============================================================
   RIPIEGO INIZIALI — scheda professionista senza foto
   ============================================================ */
.equipo-card-iniziali {
  background: var(--beis);
  display: flex;
  align-items: center;
  justify-content: center;
}
.equipo-card-iniziali span {
  font-family: var(--font-base);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--negro);
  opacity: 0.45;
}

/* ============================================================
   OUTFIT ospitato in proprio
   I woff2 sono in /font. Nessuna chiamata a Google: l'IP del
   visitatore non esce dal server prima del consenso ai cookie.
   Subset latino, cinque pesi, 80 KB in tutto.
   ============================================================ */

@font-face { font-family:'Outfit'; font-style:normal; font-weight:300;
  src:url('font/outfit-300.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400;
  src:url('font/outfit-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500;
  src:url('font/outfit-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600;
  src:url('font/outfit-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700;
  src:url('font/outfit-700.woff2') format('woff2'); font-display:swap; }

/* Kadence imposta i suoi font sul body: qui gli diciamo il nostro. */
body, button, input, select, textarea,
.site-title, .entry-title,
h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); }


/* ============================================================
   PULSANTE "RESERVAR CITA" — misure esatte degli HTML originali

   I nomi delle classi di Kadence non li ho potuti verificare sul
   tuo sito, quindi il selettore copre le varianti plausibili più
   un aggancio generico. Se il pulsante non cambia, ispezionalo
   nel browser, leggi la sua classe vera e aggiungila all'elenco.
   ============================================================ */

.site-header .header-button,
.site-header .kadence-button,
.site-header .button,
.site-header .wp-block-button__link,
#masthead .header-button,
#masthead a[class*="button"],
.btn-reservar {
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 12px 28px;
  border-radius: 50px;
  background: var(--amarillo);
  color: var(--negro);
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
}

.site-header .header-button:hover,
.site-header .kadence-button:hover,
.site-header .button:hover,
.site-header .wp-block-button__link:hover,
#masthead .header-button:hover,
#masthead a[class*="button"]:hover,
.btn-reservar:hover {
  background: var(--amarillo-dark);
  color: var(--negro);
  transform: translateY(-1px);
}

/* voci di menu */
.site-header .main-navigation a,
.site-header .primary-menu-container a,
#masthead nav a {
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}