/**
 * Olimpia Milano - Global Typography
 * Classi riutilizzabili per applicare stili tipografici globali
 * Uso: aggiungi una classe a qualsiasi elemento (Elementor, custom HTML, shortcodes, etc.)
 * 
 * Esempio:
 * <h2 class="font-h1">Titolo grande</h2>
 * <p class="font-body">Testo corpo</p>
 * <button class="font-button">Bottone</button>
 */

/* ===========================
   MAIN TEXT / BODY
   =========================== */

.font-body,
.font-primary,
.font-text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Mobile override for body */
@media (max-width: 767px) {
  .font-body,
  .font-primary,
  .font-text {
    font-size: 15px !important;
    line-height: 24px !important;
  }
}

/* ===========================
   HEADING SCALE
   =========================== 
   
   Desktop → Tablet = Mobile (nessun ulteriore shrink su mobile)
   
   h1 = 120px → 64px
   h2 = 80px  → 32px
   h3 = 64px  → 24px
   h4 = 32px  → 20px
   h5 = 24px  → 20px
   h6 = 20px  → 18px
   =========================== */

/* ===========================
   HEADING 1 (H1) — 120px
   Alias: .font-title-120, .font-title-extra-big
   =========================== */

.font-h1,
.font-title-120,
.font-title-extra-big,
h1 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 120px !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet: h1 → dimensione h3 desktop (64px) */
@media (max-width: 1279px) {
  .font-h1,
  .font-title-120,
  .font-title-extra-big,
  h1 {
    font-size: 64px !important;
    line-height: 1.06 !important;
  }
}

/* Mobile: h1 → stesso valore tablet (64px) */
@media (max-width: 767px) {
  .font-h1,
  .font-title-120,
  .font-title-extra-big,
  h1 {
    font-size: 64px !important;
    line-height: 1.06 !important;
  }
}

/* ===========================
   HEADING 2 (H2) — 80px
   Alias: .font-title-80, .font-title-big
   =========================== */

.font-h2,
.font-title-80,
.font-title-big,
h2 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 80px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet: h2 → dimensione h4 desktop (32px) */
@media (max-width: 1279px) {
  .font-h2,
  .font-title-80,
  .font-title-big,
  h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
}

/* Mobile: h2 → stesso valore tablet (32px) */
@media (max-width: 767px) {
  .font-h2,
  .font-title-80,
  .font-title-big,
  h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
}

/* ===========================
   HEADING 3 (H3) — 64px
   Alias: .font-title-64, .font-title-medium, .font-title-60 (retrocompat)
   =========================== */

.font-h3,
.font-title-64,
.font-title-medium,
.font-title-60,
h3 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet: h3 → dimensione h5 desktop (24px) */
@media (max-width: 1279px) {
  .font-h3,
  .font-title-64,
  .font-title-medium,
  .font-title-60,
  h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}

/* Mobile: h3 → stesso valore tablet (24px) */
@media (max-width: 767px) {
  .font-h3,
  .font-title-64,
  .font-title-medium,
  .font-title-60,
  h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}

/* ===========================
   HEADING 4 (H4) — 32px
   Alias: .font-title-32, .font-title-standard
   =========================== */

.font-h4,
.font-title-32,
.font-title-standard,
h4 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet: h4 → dimensione h6 desktop (20px) */
@media (max-width: 1279px) {
  .font-h4,
  .font-title-32,
  .font-title-standard,
  h4 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* Mobile: h4 → stesso valore tablet (20px) */
@media (max-width: 767px) {
  .font-h4,
  .font-title-32,
  .font-title-standard,
  h4 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* ===========================
   HEADING 5 (H5) — 24px
   Alias: .font-title-24, .font-title-small
   =========================== */

.font-h5,
.font-title-24,
.font-title-small,
h5 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet */
@media (max-width: 1279px) {
  .font-h5,
  .font-title-24,
  .font-title-small,
  h5 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* Mobile: h5 → stesso valore tablet (20px) */
@media (max-width: 767px) {
  .font-h5,
  .font-title-24,
  .font-title-small,
  h5 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* ===========================
   HEADING 6 (H6) — 20px
   Alias: .font-title-20, .font-title-extra-small
   =========================== */

.font-h6,
.font-title-20,
.font-title-extra-small,
h6 {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tablet */
@media (max-width: 1279px) {
  .font-h6,
  .font-title-20,
  .font-title-extra-small,
  h6 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
}

/* Mobile: h6 → stesso valore tablet (18px) */
@media (max-width: 767px) {
  .font-h6,
  .font-title-20,
  .font-title-extra-small,
  h6 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
}

/* ===========================
   BUTTONS
   =========================== */

.font-button,
button,
.wp-block-button__link,
.elementor-button {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* ===========================
   NAVIGATION / MENUS
   =========================== */

/* Main Menu */
.font-menu,
.menu-main a,
.primary-menu a,
nav.main-navigation a {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5em !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
}

/* Submenu / Dropdown */
.font-submenu,
.menu-submenu a,
.submenu a,
nav.main-navigation ul ul a {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4em !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
}

/* ===========================
   FORM ELEMENTS
   =========================== */

/* Input Fields */
.font-input,
input,
textarea,
select,
.wp-block-search__input,
.elementor-field {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6em !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* ===========================
   META & SECONDARY TEXT
   =========================== */

/* Post Meta (dates, authors, categories) */
.font-meta,
.post-meta,
.entry-meta,
.meta-info,
.published-on,
.posted-by {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5em !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* ===========================
   LOGO / BRANDING
   =========================== */

.font-logo,
.site-title,
.site-title a {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 35px !important;
  font-weight: 600 !important;
  line-height: 1.115em !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
}

/* Responsive Logo */
@media (max-width: 1279px) {
  .font-logo,
  .site-title,
  .site-title a {
    font-size: 28px !important;
    line-height: 1.143em !important;
  }
}

@media (max-width: 767px) {
  .font-logo,
  .site-title,
  .site-title a {
    font-size: 26px !important;
    line-height: 1.154em !important;
  }
}

/* ===========================
   UTILITY CLASSES
   =========================== */

/* Bold version */
.font-bold {
  font-weight: 700 !important;
}

/* Extra bold */
.font-extra-bold {
  font-weight: 800 !important;
}

/* Regular weight */
.font-regular {
  font-weight: 400 !important;
}

/* Medium weight */
.font-medium {
  font-weight: 500 !important;
}

/* Semibold weight */
.font-semibold {
  font-weight: 600 !important;
}

/* Uppercase */
.font-uppercase {
  text-transform: uppercase !important;
}

/* Lowercase */
.font-lowercase {
  text-transform: lowercase !important;
}

/* Capitalize */
.font-capitalize {
  text-transform: capitalize !important;
}

/* Letter spacing adjustments */
.font-tracking-tight {
  letter-spacing: -0.03em !important;
}

.font-tracking-normal {
  letter-spacing: 0 !important;
}

.font-tracking-wide {
  letter-spacing: 0.08em !important;
}

/* ===========================
   COMBINATION CLASSES
   =========================== */

/* Bold body text */
.font-body-bold {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

@media (max-width: 767px) {
  .font-body-bold {
    font-size: 15px !important;
    line-height: 24px !important;
  }
}

/* Small text */
.font-small,
.small-text,
.text-sm {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5em !important;
}

/* Extra small text */
.font-extra-small,
.text-xs {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4em !important;
}

/* Large text */
.font-large,
.text-lg {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.6em !important;
}

/* ===========================
   SPECIAL / ACCENT
   =========================== */

/* Lead paragraph */
.font-lead,
.lead {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.6em !important;
}

/* Accent / Highlight */
.font-accent {
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ===========================
   MONOSPACE / CODE
   =========================== */

.font-mono,
code,
pre,
.wp-block-code {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6em !important;
  letter-spacing: 0 !important;
}

/* ===========================
   RESET UTILITIES
   =========================== */

/* Remove all font styling */
.font-reset {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* ===========================
   DOCUMENTATION
   =========================== */

/**
 * USAGE GUIDE
 * 
 * 1. HEADING SCALE (Desktop → Tablet/Mobile)
 *    h1 / .font-title-120 / .font-title-extra-big  = 120px → 64px
 *    h2 / .font-title-80  / .font-title-big         = 80px  → 32px
 *    h3 / .font-title-64  / .font-title-medium      = 64px  → 24px
 *    h4 / .font-title-32  / .font-title-standard    = 32px  → 20px
 *    h5 / .font-title-24  / .font-title-small       = 24px  → 20px
 *    h6 / .font-title-20  / .font-title-extra-small = 20px  → 18px
 *
 *    Retrocompat: .font-title-60 → alias di h3 (era 60, ora 64)
 *
 *    <h1>Titolo hero</h1>
 *    <h2 class="font-h2">Titolo sezione</h2>
 *    <p class="font-title-32">Titolo custom</p>
 *
 * 2. BODY TEXT
 *    <p class="font-body">Testo corpo standard</p>
 *    <p class="font-body font-bold">Testo corpo bold</p>
 *    <p class="font-small">Testo piccolo (14px)</p>
 *    <p class="font-lead">Paragrafo di apertura</p>
 *
 * 3. BUTTONS
 *    <button class="font-button">Bottone</button>
 *    <a href="#" class="font-button">Link button</a>
 *
 * 4. NAVIGATION
 *    <nav>
 *      <a href="#" class="font-menu">Menu item</a>
 *      <ul>
 *        <li><a href="#" class="font-submenu">Submenu</a></li>
 *      </ul>
 *    </nav>
 *
 * 5. FORMS
 *    <input type="text" class="font-input" placeholder="Input">
 *    <textarea class="font-input"></textarea>
 *
 * 6. META/SECONDARY
 *    <span class="font-meta">Posted on January 15, 2026</span>
 *
 * 7. IN ELEMENTOR (via CSS class in Advanced → Additional CSS Classes)
 *    Widget: Add class "font-h1" oppure "font-button"
 *    Text Widget: Add class "font-body"
 *
 * 8. COMBINATION EXAMPLES
 *    <p class="font-body font-bold font-uppercase">BOLD UPPERCASE TEXT</p>
 *    <h3 class="font-h3 font-tracking-tight">Tight letter spacing</h3>
 *    <span class="font-meta font-uppercase">METADATA</span>
 *
 * 9. IN CUSTOM ELEMENTOR WIDGETS
 *    echo '<h2 class="font-h2">' . $title . '</h2>';
 *
 * 10. IN SHORTCODES
 *    sprintf( '<p class="font-body">%s</p>', $content )
 *
 * RESPONSIVE STRATEGY
 * I primi 4 heading (h1-h4) in responsive si "shiftano" di 2 livelli:
 *   h1 tablet/mobile = h3 desktop size (64px)
 *   h2 tablet/mobile = h4 desktop size (32px)
 *   h3 tablet/mobile = h5 desktop size (24px)
 *   h4 tablet/mobile = h6 desktop size (20px)
 * Tablet e mobile condividono lo stesso valore.
 *
 * Breakpoints:
 *   - Desktop: ≥ 1280px
 *   - Tablet: 768px - 1279px
 *   - Mobile: < 768px
 */