/*
Theme Name: Wellness Child
Theme URI: https://wellnessrc.it
Author: Danilo Emo
Description: Child theme di Abheda per A.S.D. Centro Palestre Wellness, Reggio Calabria. Ridefinisce palette, tipografia e blocchi della home.
Template: abheda
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: wellness-child
*/

/* ==========================================================================
   1. PALETTE E TIPOGRAFIA
   Abheda imposta tutte le sue variabili su `body` dentro css/defaults.css.
   Questo foglio viene caricato dopo, quindi qui basta riscriverle.
   Per cambiare il colore del sito modifichi SOLO i valori qui sotto.
   ========================================================================== */
body{
  /* --- Colori di marca --- */
  --wellness--arancio:        #F4670E;
  --wellness--nero:           #000000;
  --wellness--carta:          #EDEDEA;

  /* --- Corpo pagina --- */
  --abheda--body-background:  var(--wellness--carta);
  --abheda--text-color:       #2E2E2E;
  --abheda--link-color:       var(--wellness--arancio);
  --abheda--link-color-hover: var(--wellness--nero);

  /* --- Header --- */
  --abheda--header-background-color:        var(--wellness--carta);
  --abheda--header-text-color:              var(--wellness--nero);
  --abheda--header-link-color:              var(--wellness--nero);
  --abheda--header-link-hover-color:        var(--wellness--arancio);
  --abheda--sticky-header-background-color: var(--wellness--carta);
  --abheda--site-title-color:               #FFFFFF;
  --abheda--site-title-bg-color:            var(--wellness--nero);

  /* --- Navigazione --- */
  --abheda--navigation-background-color:         transparent;
  --abheda--navigation-text-color:               var(--wellness--nero);
  --abheda--navigation-background-hover-color:   var(--wellness--arancio);
  --abheda--navigation-text-hover-color:         #FFFFFF;
  --abheda--navigation-background-current-color: var(--wellness--nero);
  --abheda--navigation-text-current_color:       #FFFFFF;
  --abheda--navigation-border-color:             var(--wellness--nero);
  --abheda--subnavigation-background-color:      var(--wellness--nero);
  --abheda--subnavigation-text-color:            #FFFFFF;
  --abheda--subnavigation-background-hover-color:var(--wellness--arancio);

  /* --- Pulsanti --- */
  --abheda--form-button-background-color:       var(--wellness--arancio);
  --abheda--form-button-background-color-hover: var(--wellness--nero);
  --abheda--form-button-text-color:             #FFFFFF;
  --abheda--form-button-text-color-hover:       #FFFFFF;
  --abheda--form-button-border-color:           var(--wellness--arancio);
  --abheda--form-button-border-color-hover:     var(--wellness--nero);
  --abheda--button-radius:  0px;
  --abheda--button-top:     16px;
  --abheda--button-right:   32px;
  --abheda--button-bottom:  16px;
  --abheda--button-left:    32px;

  /* --- Footer --- */
  --wpkoi--footer-background-color: var(--wellness--nero);
  --wpkoi--footer-text-color:       #8E8E90;
  --wpkoi--footer-link-color:       #FFFFFF;
  --wpkoi--footer-link-hover-color: var(--wellness--arancio);

  /* --- Form --- */
  --abheda--form-background-color:       #FFFFFF;
  --abheda--form-border-color:           #C9C9C4;
  --abheda--form-border-color-focus:     var(--wellness--arancio);
  --abheda--form-background-color-focus: #FFFFFF;
  --abheda--form-text-color-focus:       var(--wellness--nero);

  /* --- Barra scorrimento e torna-su --- */
  --wpkoi--scrollbar-thumb-color:        var(--wellness--arancio);
  --wpkoi--scrollbar-thumb-hover-color:  var(--wellness--nero);
  --wpkoi--back-to-top-background-color: var(--wellness--nero);
  --wpkoi--back-to-top-text-color:       #FFFFFF;
  --wpkoi--back-to-top-background-color-hover: var(--wellness--arancio);

  /* --- Tipografia: Bebas Neue sui titoli, Inter Tight sul testo --- */
  --abheda--font-heading-1: BebasNeue;
  --abheda--font-heading-2: BebasNeue;
  --abheda--font-heading-3: BebasNeue;
  --abheda--font-site-title: BebasNeue;

  --abheda--heading-1-transform:  uppercase;
  --abheda--heading-1-weight:     400;
  --abheda--heading-1-font-size:  clamp(56px, 9vw, 130px);
  --abheda--mobile-heading-1-font-size: 52px;
  --abheda--heading-1-line-height: 0.9em;

  --abheda--heading-2-transform:  uppercase;
  --abheda--heading-2-weight:     400;
  --abheda--heading-2-font-size:  clamp(34px, 5vw, 64px);
  --abheda--mobile-heading-2-font-size: 34px;
  --abheda--heading-2-line-height: 0.95em;

  --abheda--heading-3-transform:  uppercase;
  --abheda--heading-3-weight:     400;
  --abheda--heading-3-font-size:  28px;

  --abheda--body-font-size:        19px;
  --abheda--mobile-body-font-size: 18px;
  --abheda--body-line-height:      1.6;

  --abheda--container-width: 1280px;
}

/* ==========================================================================
   2. CORREZIONI DI IMPAGINAZIONE
   ========================================================================== */
h1,h2,h3{ letter-spacing: 0.005em; }

/* Bebas Neue è molto stretto: i titoli lunghi hanno bisogno di più respiro */
.wp-block-heading{ margin-block-end: 0.5em; }

/* ==========================================================================
   3. BLOCCHI DELLA HOME
   Classi da assegnare ai blocchi Gutenberg nel pannello "Avanzate >
   Classi CSS aggiuntive". Il markup pronto è nel file blocchi-home.html.
   ========================================================================== */

/* Scheda orari arancione */
.scheda-orari{
  background: var(--wellness--arancio);
  color: var(--wellness--nero);
  padding: 32px 34px;
}
.scheda-orari .wp-block-heading{ margin-block-end: 18px; }
.scheda-orari p{ margin: 0; }
.scheda-orari .riga{
  border-top: 2px solid rgba(0,0,0,.24);
  padding: 13px 0;
}
.scheda-orari .giorni{
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; opacity: .72;
}
.scheda-orari .ore{
  font-family: BebasNeue, sans-serif;
  font-size: 30px; line-height: 1.05;
}
.scheda-orari .ore.chiuso{ opacity: .5; }

/* Numeri dei metri quadri */
.dato-mq{ border-top: 3px solid var(--wellness--nero); padding-top: 18px; }
.dato-mq:first-child{ border-color: var(--wellness--arancio); }
.dato-mq .numero{
  font-family: BebasNeue, sans-serif;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .85;
  margin: 0;
}
.dato-mq .numero sup{ font-family: InterTight, sans-serif; font-size: .22em; font-weight: 600; }
.dato-mq h3{ margin: 14px 0 6px; }
.dato-mq p{ font-size: 17px; margin: 0; }

/* Fascia nera e fascia arancione a tutta larghezza */
.fascia-nera{ background: var(--wellness--nero); color: #FFFFFF; }
.fascia-nera h1,.fascia-nera h2,.fascia-nera h3{ color: #FFFFFF; }
.fascia-nera a{ color: #FFFFFF; border-bottom: 2px solid var(--wellness--arancio); }
.fascia-nera a:hover{ color: var(--wellness--arancio); }

.fascia-arancio{ background: var(--wellness--arancio); color: var(--wellness--nero); }
.fascia-arancio h2{ color: var(--wellness--nero); }
.fascia-arancio li{
  border-top: 2px solid rgba(0,0,0,.28);
  padding-top: 14px; font-weight: 600; list-style: none;
}
.fascia-arancio ul{ padding-left: 0; }

/* Card corso: titolo sovrapposto alla foto */
.card-corso{ position: relative; }
.card-corso figure{ margin: 0; }
.card-corso .titolo{
  position: absolute; inset: auto 0 0 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  color: #FFFFFF; margin: 0;
}

/* Riquadro mappa: miniatura statica servita dal nostro server */
/* Mappa: immagine cliccabile che apre Google Maps */
.mappa-wellness{
  position: relative; display: block;
  aspect-ratio: 4/3;
  background: url('img/mappa-sede.jpg') center / cover no-repeat;
  text-decoration: none;
  overflow: hidden;
}
.mappa-wellness::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  transition: background .25s;
}
.mappa-wellness:hover::before{ background: rgba(244,103,14,.55); }
.mappa-wellness .etichetta{
  position: absolute; inset: auto 0 0 0;
  padding: 20px 24px;
  background: var(--wellness--arancio); color: #FFFFFF;
  font-family: BebasNeue, sans-serif; font-size: 19px;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
}
.mappa-wellness:hover .etichetta{ background: var(--wellness--nero); }

/* ==========================================================================
   4. ACCESSIBILITÀ
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--wellness--arancio);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ==========================================================================
   5. CORREZIONI SUL TEMA PADRE
   Abheda scrive alcuni colori direttamente nel markup dei template part
   (parts/footer.html, parts/topbar.html): 49 valori esadecimali fissi che
   le variabili CSS non possono toccare. Il child li risolve sostituendo
   quei due file (cartella parts/ di questo tema), non con !important.
   Qui restano solo le correzioni che richiedono davvero il CSS.
   ========================================================================== */

/* In home il titolo della pagina ("Home") non serve: il titolo e' l'hero */
.home .wp-block-post-title{ display: none; }

/* Il tema padre imposta contentSize a 3000px in theme.json, quindi i blocchi
   "constrained" non si fermano. I gruppi della home hanno percio' una
   larghezza esplicita nel markup. Questa e' la rete di sicurezza per
   i contenuti scritti a mano nelle pagine interne. */
.entry-content > *:not(.alignfull):not(.alignwide){
  max-width: var(--abheda--container-width);
  margin-left: auto;
  margin-right: auto;
}
/* Logo al posto del titolo scritto.
   Il testo resta nel codice per Google e per i lettori di schermo. */
.site-header .main-title a{
  display: block;
  width: 240px;               /* larghezza del logo su desktop */
  height: 60px;               /* altezza del logo */
  background: url('img/logo.png') left center / contain no-repeat;
  text-indent: -9999px;       /* spinge il testo fuori dallo schermo */
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 768px){
  .site-header .main-title a{ width: 150px; height: 40px; }
}
/* Il riquadro nero dietro il titolo: toglilo se il logo ha già il suo fondo */
.site-branding{ background-color: transparent; }
/* Card corsi: stessa proporzione per tutte, qualunque foto carichi */
.card-corso figure,
.card-corso img{
  aspect-ratio: 1 / 1;        /* verticale. Per quadrato: 1 / 1 */
  object-fit: cover;          /* ritaglia invece di deformare */
  width: 100%;
  height: 100%;
}
.card-corso figure{ overflow: hidden; }
/* Riduce l'ingombro delle tre card corsi */
.griglia-corsi,
.corsi .wp-block-columns{
  max-width: 900px;        /* prova 900, 800, 760 */
  margin-inline: auto;     /* le centra */
}
/* Logo Wellness al posto del titolo scritto */
.site-header .main-title a{
  display: block;
  width: 240px;
  height: 60px;
  background: url('img/logo-wellness.png') left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 768px){
  .site-header .main-title a{
    width: 230px;
    height: 58px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}
.site-branding{ background-color: transparent; }
/* Solo in home: via contenitore e margini, le fasce vanno da bordo a bordo */
.home{
  --abheda--content-top: 0px;
  --abheda--content-right: 0px;
  --abheda--content-bottom: 0px;
  --abheda--content-left: 0px;
  --abheda--container-width: 100%;
}
/* Il testo dentro le fasce si ferma prima del bordo */
.home .wp-block-cover__inner-container,
.home .fascia-nera > .wp-block-group__inner-container,
.home .fascia-arancio > .wp-block-group__inner-container,
.home .fascia-nera,
.home .fascia-arancio,
.home .spazi,
.home .corsi{
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}

/* Il contenuto non si allarga oltre il leggibile sugli schermi grandi */
.home .wp-block-cover__inner-container,
.home .wp-block-group__inner-container{
  max-width: 1400px;
  margin-inline: auto;
}
/* Le grafiche dei corsi hanno già la loro identità: niente filtro */
.corsi .foto-duotone{ background: none; }
.corsi .foto-duotone img{
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}
/* Regole in sala: fascia arancione, testo nero */
.fascia-arancio{ background: var(--wellness--arancio); color: var(--wellness--nero); }
.fascia-arancio h2{ color: var(--wellness--nero); }
.fascia-arancio li{ border-top-color: rgba(0,0,0,.28); color: var(--wellness--nero); }
}
/* Niente spazi tra una fascia e l'altra: le sezioni si toccano */
.home .entry-content > *,
.home .wp-block-post-content > *,
.home #main > *,
.home #primary > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Le fasce della home si toccano, nessuna striscia di fondo pagina */
.home .wp-block-group,
.home .wp-block-cover{ margin: 0 !important; }


/* Footer: azzera ogni spaziatura ereditata dal tema */
.wpkoi-footer,
.wpkoi-footer *{
  --wp--style--block-gap: 12px !important;
}
.wpkoi-footer .wp-block-columns,
.wpkoi-footer .wp-block-column{
  gap: 12px !important;
  row-gap: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wpkoi-footer .wp-block-column > *{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.wpkoi-footer{
  padding: 48px clamp(24px,4vw,64px) !important;
}
/* Footer attaccato alla sezione sopra */
.wpkoi-footer{
  margin-top: 0 !important;
  border-top: 0 !important;
}
.site-footer,
#page,
#content{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* WordPress mette 24px sopra ogni blocco constrained */
.home .is-layout-constrained > *{
  margin-block-start: 0 !important;
}
body{
  --abheda--mobile-side-top: 0px;
  --abheda--mobile-side-right: 0px;
  --abheda--mobile-side-bottom: 0px;
  --abheda--mobile-side-left: 0px;
  --abheda--mobile-content-top: 0px;
  --abheda--mobile-content-right: 0px;
  --abheda--mobile-content-bottom: 0px;
  --abheda--mobile-content-left: 0px;
  --abheda--side-padding-radius: 0px;
}
.abheda-body-padding-content{ padding: 0 !important; border-radius: 0 !important; }

@media (max-width: 768px){
  .home .wp-block-group__inner-container,
  .home .wp-block-cover__inner-container,
  .home .wp-block-columns,
  .home .intro,
  .home .wp-block-heading{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Le fasce restano a tutta larghezza */
  .home .fascia-arancio,
  .home .fascia-nera,
  .home .wp-block-cover{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px){
  .home .wp-block-group > .wp-block-paragraph,
  .home .wp-block-group > p{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px){
  .home .wp-block-cover h1,
  .home .wp-block-cover h2{
    margin-left: -20px;
  }
}
/* Le pagine interne mantengono i margini laterali */
body:not(.home) .entry-content{
  padding-left: clamp(24px, 5vw, 60px) !important;
  padding-right: clamp(24px, 5vw, 60px) !important;
  max-width: 900px;
  margin-inline: auto !important;
}
body:not(.home) .wp-block-post-title,
body:not(.home) .entry-title{
  padding-left: clamp(24px, 5vw, 60px) !important;
  padding-right: clamp(24px, 5vw, 60px) !important;
  max-width: 900px;
  margin-inline: auto !important;
}