/*
Theme Name: Reformer Club
Description: Tema child di GeneratePress per il sito vetrina di Reformer Club, Roma. Design system custom (Poppins autoospitato, palette navy/rosa/crema, zero border-radius) + template header/footer/page-title + blocchi Gutenberg dal plugin "reformerclub-blocks".
Template: generatepress
Author: Reformer Club
Version: 1.0.0
Text Domain: reformerclub-child
*/

/* =========================================================================
   1. DESIGN TOKENS
   Fonte unica di verità per colori, tipografia, spaziatura, layout.
   Qualsiasi blocco/template deve leggere da qui, mai valori hardcoded.
   ========================================================================= */
:root{

  /* --- Colori --- */
  --rc-navy:         #1e2a3a;  /* primario: testi importanti, header, CTA principale */
  --rc-navy-hover:    #2f4258;
  --rc-rosa:          #c9a9a6;  /* accento: tagline corsivo, badge, CTA accento */
  --rc-rosa-light:    #e2cfc9;
  --rc-rosa-deep:     #a97b76;  /* variante più scura, per testo su sfondo chiaro (leggibilità) */
  --rc-crema:         #faf7f2;  /* sfondo principale */
  --rc-crema-dark:    #f0eae1;
  --rc-neutro:        #9c9488;  /* testi secondari, bordi */
  --rc-neutro-light:  #d8d3c9;
  --rc-ink:           #2b2926;  /* titoli ad alto contrasto su sfondo chiaro */
  --rc-white:         #ffffff;

  /* --- Tipografia --- */
  --rc-font: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scala tipografica (rem, base 16px) */
  --rc-text-xs:    0.8125rem;  /* 13px  — badge, etichette, footer legal   */
  --rc-text-sm:    0.9375rem;  /* 15px  — testo secondario, caption        */
  --rc-text-base:  1rem;       /* 16px  — corpo testo                      */
  --rc-text-lg:    1.125rem;   /* 18px  — corpo testo enfatizzato, intro   */
  --rc-text-xl:    1.375rem;   /* 22px  — sottotitoli piccoli              */
  --rc-text-2xl:   1.75rem;    /* 28px  — H3                               */
  --rc-text-3xl:   2.25rem;    /* 36px  — H2                               */
  --rc-text-4xl:   clamp(2.25rem, 4vw, 3.25rem);   /* H1 pagine interne     */
  --rc-text-5xl:   clamp(2.5rem, 5vw, 3.75rem);    /* H1 Hero homepage      */

  /* Pesi */
  --rc-weight-light:    300;
  --rc-weight-regular:  400;
  --rc-weight-medium:   500;
  --rc-weight-semibold: 600;
  --rc-weight-bold:     700;

  /* Interlinea */
  --rc-leading-tight:  1.15;
  --rc-leading-snug:   1.35;
  --rc-leading-normal: 1.6;

  /* --- Spaziatura (scala 4px) --- */
  --rc-space-1: 4px;
  --rc-space-2: 8px;
  --rc-space-3: 16px;
  --rc-space-4: 24px;
  --rc-space-5: 32px;
  --rc-space-6: 48px;
  --rc-space-7: 64px;
  --rc-space-8: 96px;
  --rc-space-9: 128px;

  /* --- Layout --- */
  --rc-container:       1180px; /* larghezza massima contenuto "contained" */
  --rc-container-narrow: 760px; /* per testo lungo: pagine editoriali      */
  --rc-container-pad:   24px;   /* padding laterale minimo, anche a full width */
  --rc-radius: 0;                /* nessun angolo arrotondato, mai */
  --rc-border-w: 1px;
  --rc-header-h: 88px;

  /* --- Ombre (uso minimo, solo dove serve profondità reale: card hover) --- */
  --rc-shadow-sm: 0 1px 2px rgba(30, 42, 58, 0.06);
  --rc-shadow-md: 0 4px 16px rgba(30, 42, 58, 0.10);
}

/* =========================================================================
   2. FONT-FACE — Poppins autoospitato (nessuna chiamata esterna a Google)
   ========================================================================= */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/poppins/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/poppins/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/poppins/poppins-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/poppins/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/poppins/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:italic; font-weight:600; font-display:swap; src:url("fonts/poppins/poppins-latin-600-italic.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/poppins/poppins-latin-700-normal.woff2") format("woff2"); }

/* =========================================================================
   3. RESET DI BASE — sovrascrive le opinioni di stile di GeneratePress
   ========================================================================= */
html{ box-sizing: border-box; overflow-x: hidden; }
*, *::before, *::after{ box-sizing: inherit; }

body{
  font-family: var(--rc-font);
  background: var(--rc-crema);
  color: var(--rc-ink);
  font-weight: var(--rc-weight-regular);
  font-size: var(--rc-text-base);
  line-height: var(--rc-leading-normal);
  overflow-x: hidden; /* rete di sicurezza per gli elementi a piena larghezza (100vw) */
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--rc-font);
  color: var(--rc-navy);
  font-weight: var(--rc-weight-semibold);
  line-height: var(--rc-leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--rc-space-3);
}
h1{ font-size: var(--rc-text-4xl); }
h2{ font-size: var(--rc-text-3xl); }
h3{ font-size: var(--rc-text-2xl); }
h4{ font-size: var(--rc-text-xl); }

/* Rinforzo di specificità: vince su CSS "deboli" di GeneratePress o di
   plugin/blocchi di terze parti, senza usare !important — così un colore
   scelto volutamente per un singolo blocco (es. titolo bianco su sfondo
   scuro) resta comunque possibile, perché lo stile inline ha sempre
   la priorità più alta indipendentemente da questa regola. */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6,
#primary h1, #primary h2, #primary h3, #primary h4{
  font-family: var(--rc-font);
  color: var(--rc-navy);
  font-weight: var(--rc-weight-semibold);
}

p{ margin: 0 0 var(--rc-space-3); }

a{ color: var(--rc-navy); text-decoration: none; }
a:hover{ color: var(--rc-navy-hover); }

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

/* Zero angoli arrotondati ovunque, sempre — regola di stile non negoziabile */
*, *::before, *::after{
  border-radius: var(--rc-radius) !important;
}

/* Elemento "eyebrow" / tagline corsivo rosa, ricorrente in tutto il sito */
.rc-eyebrow{
  font-style: italic;
  font-weight: var(--rc-weight-regular);
  color: var(--rc-rosa);
  font-size: var(--rc-text-lg);
  letter-spacing: 0.01em;
}

/* Testo maiuscolo con tracking largo, per menu/etichette/badge */
.rc-caps{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--rc-weight-medium);
  font-size: var(--rc-text-xs);
}

/* Pulsanti — 3 varianti, componente di base riusato in tutto il sito
   (header, footer, hero, card prezzi...). Zero border-radius incluso
   nella regola globale sopra. */
.rc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-3) var(--rc-space-5);
  font-family: var(--rc-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-weight-semibold);
  text-decoration: none;
  border: var(--rc-border-w) solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1;
}
.rc-btn--primary{
  background: var(--rc-navy);
  color: var(--rc-white);
  border-color: var(--rc-navy);
}
.rc-btn--primary:hover{
  background: var(--rc-navy-hover);
  border-color: var(--rc-navy-hover);
  color: var(--rc-white);
}
.rc-btn--secondary{
  background: transparent;
  color: var(--rc-navy);
  border-color: var(--rc-navy);
}
.rc-btn--secondary:hover{
  background: var(--rc-navy);
  color: var(--rc-white);
}
.rc-btn--accent{
  background: var(--rc-rosa);
  color: var(--rc-navy);
  border-color: var(--rc-rosa);
}
.rc-btn--accent:hover{
  background: var(--rc-rosa-light);
  border-color: var(--rc-rosa-light);
  color: var(--rc-navy);
}

/* =========================================================================
   4. SISTEMA DI LAYOUT — "contained" vs "full width"
   Ogni sezione/blocco sceglie una delle due modalità:
   - .rc-container      → contenuto centrato, max 1180px, per testo/card/form
   - .rc-full            → sezione a piena larghezza (sfondo/immagine edge-to-edge),
                            con un .rc-container annidato dentro per il testo
   Coerente con i controlli nativi di allineamento blocco WordPress
   (align-wide/align-full), già abilitati in functions.php.
   ========================================================================= */
.rc-container{
  width: 100%;
  max-width: var(--rc-container);
  margin-inline: auto;
  padding-inline: var(--rc-container-pad);
}

.rc-container--narrow{
  max-width: var(--rc-container-narrow);
}

.rc-full{
  width: 100%;
  max-width: none;
}

/* I blocchi core con allineamento "wide"/"full" di WordPress usano già le
   classi alignwide/alignfull: le rendiamo coerenti con i nostri token. */
.alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.alignwide{
  max-width: calc(var(--rc-container) + 160px);
  margin-inline: auto;
}

@media (max-width: 782px){
  :root{ --rc-container-pad: 20px; }
}

/* Tipografia e spaziature più compatte su telefono */
@media (max-width: 600px){
  :root{
    --rc-text-base: 0.9375rem;
    --rc-text-lg:   1rem;
    --rc-text-xl:   1.125rem;
    --rc-text-2xl:  1.25rem;
    --rc-text-3xl:  1.5rem;
    --rc-text-4xl:  1.75rem;
    --rc-text-5xl:  2rem;
    --rc-space-6:   32px;
    --rc-space-7:   44px;
    --rc-space-8:   56px;
  }
  .rc-btn{ padding: 13px 20px; font-size: 0.72rem; }
}