/* =====================================================================
   BYITALY STORE - variables.css
   Design tokens globali + font + componenti base riutilizzabili
   ---------------------------------------------------------------------
   Tema:    byitaly (child di Classic) - PrestaShop 8.2.6
   Autore:  Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   Origine valori: FASE 1 - ANALISI.md (sezione 0, Design Tokens)
   Priorità caricamento: 10 (primo file, tutto il resto dipende da qui)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONT - Cormorant Garamond self-hosted (woff2)
   ---------------------------------------------------------------------
   Percorsi relativi a /themes/byitaly/assets/css/
   font-display: swap -> il testo appare subito col font di sistema e
   viene sostituito al load: evita FOIT e migliora LCP/CLS.
   I pesi 500 e 700 sono preloadati da ff_theme (hook displayHeader).
--------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-garamond-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2. CUSTOM PROPERTIES (design tokens)
   ---------------------------------------------------------------------
   Tutti i CSS successivi usano SOLO queste variabili: cambiare un hex
   qui ricolora l'intero sito (incluse le parti Classic armonizzate).
--------------------------------------------------------------------- */
:root {
  /* -- Palette ------------------------------------------------------ */
  --ff-navy:        #1B2A4A;  /* primario: titoli, bottoni, footer     */
  --ff-navy-dark:   #14203A;  /* hover primari, sub-footer             */
  --ff-red:         #D32F2F;  /* tricolore, CTA outline, badge cart    */
  --ff-red-dark:    #B32424;  /* hover elementi rossi                  */
  --ff-green:       #2E7D32;  /* tricolore, check, link azione         */
  --ff-text:        #2B3445;  /* testo corpo                           */
  --ff-text-light:  #5A6577;  /* testi secondari                       */
  --ff-bg:          #FFFFFF;
  --ff-bg-soft:     #F5F7FA;  /* sezioni alternate, cerchi icone       */
  --ff-border:      #E5E9F0;  /* bordi card / input / divider          */
  --ff-footer-link: #B9C2D4;  /* link footer su navy                   */
  --ff-dark-band:   #171B21;  /* barra USP scura hero                  */
  --ff-white:       #FFFFFF;

  /* -- Tipografia ---------------------------------------------------- */
  --ff-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Scala (da ANALISI.md 0.2). Fluid con clamp: min mobile / max desktop */
  --ff-fs-h1:       clamp(2rem, 4.5vw, 2.75rem);   /* 32 -> 44px  */
  --ff-fs-hero:     clamp(2.125rem, 5vw, 4.5rem); /* 34 -> 52px  */
  --ff-fs-h2:       clamp(1.75rem, 3.5vw, 2.375rem);/* 28 -> 38px */
  --ff-fs-h3:       1.3125rem;                      /* 21px        */
  --ff-fs-body:     1rem;                           /* 16px        */
  --ff-fs-small:    0.875rem;                       /* 14px        */
  --ff-fs-label:    0.8125rem;                      /* 13px label uppercase */
  --ff-fs-counter:  clamp(2rem, 4vw, 2.625rem);     /* contatori   */
  --ff-lh-body:     1.65;
  --ff-ls-label:    0.09em;   /* letter-spacing label/bottoni uppercase */

  /* -- Layout -------------------------------------------------------- */
  --ff-container:   1180px;
  --ff-radius:      10px;     /* card                                  */
  --ff-radius-sm:   8px;      /* input, bottoni, pill                  */
  --ff-radius-lg:   12px;     /* immagini grandi, card form            */
  --ff-section-y:   72px;     /* padding verticale sezioni desktop     */
  --ff-section-y-m: 44px;     /* ...mobile (usato in responsive.css)   */
  --ff-gap:         28px;     /* gap griglie card                      */

  /* -- Effetti ------------------------------------------------------- */
  --ff-shadow-sm:   0 1px 3px rgba(27, 42, 74, 0.06);
  --ff-shadow-md:   0 8px 24px rgba(27, 42, 74, 0.10);
  --ff-transition:  0.25s ease;

  /* -- Feature flags del tema (vedi FASE 3 §11) ---------------------- */
  /* Wishlist header: impostare a none per nascondere il cuore senza
     disinstallare blockwishlist (visibile in 1 sola immagine su 7).   */
  --ff-show-wishlist: inline-flex;
}

/* ---------------------------------------------------------------------
   3. BASE - applicazione globale del font e armonizzazione Classic
   ---------------------------------------------------------------------
   Cormorant Garamond è otticamente leggero: i pesi salgono di uno step
   rispetto ai sans dell'analisi (body 500, bold 700). Il size base sale
   a 17px sui blocchi di lettura per compensare l'x-height ridotta.
--------------------------------------------------------------------- */
body,
#wrapper,
.btn,
input, select, textarea, button {
  font-family: var(--ff-font);
}

body {
  font-size: var(--ff-fs-body);
  font-weight: 500;
  line-height: var(--ff-lh-body);
  color: var(--ff-text);
  background: var(--ff-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font);
  color: var(--ff-navy);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: var(--ff-fs-h1); }
h2 { font-size: var(--ff-fs-h2); }
h3 { font-size: var(--ff-fs-h3); }

a { color: var(--ff-navy); transition: color var(--ff-transition); }
a:hover { color: var(--ff-red); text-decoration: none; }

/* Link "azione" (email, telefono, web) in verde come da grafica Contatti */
a.ff-link-action { color: var(--ff-green); }
a.ff-link-action:hover { color: var(--ff-navy); }

/* Container coerente col token (il Classic usa .container Bootstrap) */
@media (min-width: 1200px) {
  .container { max-width: var(--ff-container); }
}

/* Selezione testo brandizzata (dettaglio di cura) */
::selection { background: var(--ff-navy); color: #fff; }

/* ---------------------------------------------------------------------
   4. BOTTONI (pattern FASE 1 §0.4)
   ---------------------------------------------------------------------
   Tre varianti: primario navy / outline rosso / outline navy.
   Applicati sia alle classi custom .ff-btn* sia rimappati sulle classi
   Bootstrap/Classic (.btn-primary ecc.) per armonizzare le pagine
   native (checkout, account) SENZA override di template.
--------------------------------------------------------------------- */
.ff-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--ff-radius-sm);
  font-size: var(--ff-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ff-ls-label);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ff-transition), color var(--ff-transition),
              border-color var(--ff-transition), transform var(--ff-transition),
              box-shadow var(--ff-transition);
}

/* Primario navy */
.ff-btn--primary,
.btn-primary {
  background: var(--ff-navy);
  border: 1px solid var(--ff-navy);
  color: #fff;
}
.ff-btn--primary:hover, .ff-btn--primary:focus,
.btn-primary:hover, .btn-primary:focus {
  background: var(--ff-navy-dark);
  border-color: var(--ff-navy-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ff-shadow-md);
}

/* Outline rosso (CTA secondaria: "Richiedi una consulenza/informazioni") */
.ff-btn--red {
  background: #fff;
  border: 1px solid var(--ff-red);
  color: var(--ff-red);
}
.ff-btn--red:hover, .ff-btn--red:focus {
  background: var(--ff-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline navy ("Scopri di più") */
.ff-btn--outline,
.btn-secondary, .btn-outline-primary {
  background: #fff;
  border: 1px solid var(--ff-navy);
  color: var(--ff-navy);
}
.ff-btn--outline:hover, .ff-btn--outline:focus,
.btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--ff-navy);
  color: #fff;
}

/* Variante compatta (card Settori) */
.ff-btn--sm { padding: 10px 18px; font-size: 0.75rem; }

/* Focus visibile - accessibilità WCAG 2.2 (2.4.7 / 2.4.13) */
.ff-btn:focus-visible, .btn:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ff-navy);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   5. SEPARATORE TRICOLORE (componente firma del brand)
   ---------------------------------------------------------------------
   <span class="ff-tricolore" aria-hidden="true"></span>
   Modificatori: --wide (larghezza piena colonna, hero)
   aria-hidden: è puramente decorativo, non va letto dagli screen reader.
--------------------------------------------------------------------- */
.ff-tricolore {
  display: block;
  width: 120px;
  height: 4px;
  margin: 18px 0;
  background: linear-gradient(
    to right,
    var(--ff-green)  0 33.33%,
    var(--ff-border) 33.33% 66.66%,
    var(--ff-red)    66.66% 100%
  );
  border-radius: 2px;
}
.ff-tricolore--wide { width: 100%; }
.ff-tricolore--center { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   6. CERCHIO-ICONA (Font Awesome dentro cerchio grigio - FASE 1 §0.4)
   ---------------------------------------------------------------------
   <span class="ff-icircle"><i class="fa-solid fa-award"></i></span>
--------------------------------------------------------------------- */
.ff-icircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ff-bg-soft);
  color: var(--ff-navy);
  font-size: 1.5rem;   /* ~24px icona */
  flex-shrink: 0;
}
.ff-icircle--sm { width: 48px; height: 48px; font-size: 1.125rem; }
/* Variante quadrata (pagina Contatti) */
.ff-ibox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-border);
  background: #fff;
  color: var(--ff-navy);
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   7. CARD BASE (pattern comune servizi/settori/valori/CTA)
--------------------------------------------------------------------- */
.ff-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-card--hover:hover {
  box-shadow: var(--ff-shadow-md);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------
   8. UTILITY DI SEZIONE
--------------------------------------------------------------------- */
.ff-section { padding: var(--ff-section-y) 0; }
.ff-section--soft { background: var(--ff-bg-soft); }

/* Eyelet: etichetta uppercase sopra i titoli ("CHI SIAMO", "CONTATTI") */
.ff-eyelet {
  display: block;
  font-size: var(--ff-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ff-text-light);
  margin-bottom: 10px;
}

/* Lista con check verdi (schede servizio, card informative) */
.ff-checklist { list-style: none; margin: 0; padding: 0; }
.ff-checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: var(--ff-fs-small);
}
.ff-checklist li > .fa-circle-check,
.ff-checklist li > i:first-child {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--ff-green);
  font-size: 1.05rem;
}

/* Riduzione movimento - accessibilità (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}