/*
Theme Name: Seluxe Child
Template: kadence
Version: 1.0.0
Description: Child theme per Seluxe
Author: Raffaele Scaglione
*/

/* ============================================================
   SELUXE — DESIGN SYSTEM
   Mini framework CSS a variabili globali
   Compatibile con Kadence Ultimate (child theme / CSS aggiuntivo)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TIPOGRAFIA
     Font principale: Cormorant Garamond (serif, simile a Yoox)
     Font secondario: Jost (sans-serif neutra, leggibile)
     Entrambi disponibili su Google Fonts, caricamento leggero
     ---------------------------------------------------------- */

  --font-display:   'Cormorant Garamond', 'Didot', 'Georgia', serif;
  --font-body:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:    'Cormorant Garamond', serif; /* per citazioni, prezzi grandi */

  /* Scala tipografica fluida — clamp(min, preferito, max)
     Scala tra 390px (mobile) e 1440px (desktop)
     ---------------------------------------------------------- */
  --text-xs:        clamp(0.7rem,   1vw,   0.875rem); /*  11-14px — etichette, badge */
  --text-sm:        clamp(0.8rem,   1.2vw, 0.875rem); /*  13-14px — testo secondario, filtri */
  --text-base:      clamp(0.875rem, 1.2vw, 1rem);     /*  14-16px — testo corpo */
  --text-md:        clamp(1rem,     1.4vw, 1.125rem); /*  16-18px — testo enfatizzato */
  --text-lg:        clamp(1rem,     1.8vw, 1.25rem);  /*  16-20px — sottotitolo hero, nomi prodotto */
  --text-xl:        clamp(1.2rem,   2.5vw, 2rem);     /*  19-32px — titoli sezione */
  --text-2xl:       clamp(1.4rem,   3vw,   2.75rem);  /*  22-44px — titoli pagina (UOMO, DONNA) */
  --text-3xl:       clamp(1.8rem,   4vw,   3.5rem);   /*  29-56px — hero headline */

  /* Peso */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Spaziatura lettere */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;  /* per titoli in maiuscolo stile Yoox */
  --tracking-wider:   0.15em;  /* per label e badge */

  /* Altezza riga */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;


  /* ----------------------------------------------------------
     PALETTE COLORI
     Ispirata alle maquette di Alessandro + stile Yoox
     ---------------------------------------------------------- */

  /* Neutri — base del sito */
  --color-bg:         #f5f2ed;  /* beige caldo — sfondo generale */
  --color-bg-alt:     #faf8f4;  /* beige più chiaro — header, card */
  --color-bg-dark:    #2f2a26;  /* quasi-nero caldo — footer, sezioni scure */
  --color-surface:    #ffffff;  /* bianco puro — card prodotto */

  /* Testo */
  --color-text:       #2f2a26;  /* quasi-nero caldo — testo principale */
  --color-text-muted: #6f6861;  /* grigio caldo — testo secondario */
  --color-text-light: #a09890;  /* grigio chiaro — placeholder, etichette */
  --color-text-white: #ffffff;  /* bianco — testo su sfondi scuri */

  /* Bordi e linee */
  --color-line:       #ddd4ca;  /* beige/grigio — separatori, bordi card */
  --color-line-dark:  #c5b9af;  /* bordo più marcato */

  /* Accento — colore brand Seluxe */
  --color-accent:     #c8ab86;  /* oro caldo — CTA principale, hover */
  --color-accent-dark:#b8976d;  /* oro scuro — hover su CTA */
  --color-accent-light:#e8d9c4; /* oro chiarissimo — badge, highlight */

  /* Stato */
  --color-success:    #3f8c58;  /* verde — condizione "Ottima" */
  --color-error:      #c0392b;  /* rosso — errori form */
  --color-warning:    #e67e22;  /* arancio — avvisi stock */


  /* ----------------------------------------------------------
     SPAZIATURE — scala 4px
     ---------------------------------------------------------- */

  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* Spaziature semantiche */
  --gap-card:       var(--space-5);   /* gap tra card prodotto */
  --gap-section:    var(--space-16);  /* spazio tra sezioni homepage */
  --padding-card:   var(--space-4);   /* padding interno card */
  --padding-section:var(--space-12);  /* padding verticale sezioni */


  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-max:    1240px;
  --container-fluid:  92%;      /* percentuale su viewport stretti */
  --sidebar-width:    280px;    /* colonna filtri */
  --header-height:    88px;


  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;    /* card prodotto, bottoni */
  --radius-lg:     8px;    /* modali, panel filtri */
  --radius-full:   9999px; /* badge, chip taglia */


  /* ----------------------------------------------------------
     OMBRE — stile Yoox: leggere, quasi piatte
     ---------------------------------------------------------- */

  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(47, 42, 38, 0.06);
  --shadow-sm:     0 2px 8px rgba(47, 42, 38, 0.08);   /* card a riposo */
  --shadow-md:     0 4px 16px rgba(47, 42, 38, 0.12);  /* card hover */
  --shadow-lg:     0 8px 32px rgba(47, 42, 38, 0.16);  /* modali, drawer */
  --shadow-inset:  inset 0 1px 3px rgba(47, 42, 38, 0.08); /* input */


  /* ----------------------------------------------------------
     TRANSIZIONI
     ---------------------------------------------------------- */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;


  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:     1;
  --z-dropdown: 100;
  --z-header:   200;
  --z-modal:    300;
  --z-toast:    400;

}


/* ============================================================
   UTILITÀ BASE — applicazione delle variabili
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Titoli display — serif elegante stile Yoox */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Label in maiuscolo — stile Yoox */
.label, .nav-item, .badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Prezzo grande */
.price-display {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* Container principale */
.container {
  width: min(var(--container-max), var(--container-fluid));
  margin-inline: auto;
}

/* Card prodotto */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
}

/* Bottone CTA principale */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

/* Bottone outline */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-line-dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-outline:hover {
  border-color: var(--color-text);
}

/* Badge condizione */
.badge-condition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-success);
  letter-spacing: var(--tracking-wide);
}

/* Header */
.site-header {
  height: var(--header-height);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: var(--shadow-xs);
}

/* Footer */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
  padding-block: var(--space-8);
}

/* Tipografia fluida — sovrascrive i valori fissi di Kadence */
h1, .wp-block-kadence-advancedheading.kt-adv-heading[data-level="1"] {
  font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
}
h2, .wp-block-kadence-advancedheading.kt-adv-heading[data-level="2"] {
  font-size: clamp(1.4rem, 3vw, 2.75rem) !important;
}
h3, .wp-block-kadence-advancedheading.kt-adv-heading[data-level="3"] {
  font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
}
body, p {
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
}

/* Sottotitolo hero */
.atf-sottotitolo {
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  color: #ffffff !important;
}