/*
 * hi-Jet Child Theme — home.css
 * Stile dei pattern Gutenberg "hi-Jet" (basato sulla Bozza A — corporate chiaro).
 * Caricato su TUTTO il sito (non solo sulla home): i pattern si possono usare
 * anche su altre pagine, come richiesto.
 *
 * Il contenuto della homepage e delle altre pagine è gestito direttamente in
 * Gutenberg dall'utente — questo file contiene SOLO lo stile visivo, non testi.
 * Vedi funzioni "hijet_register_block_patterns()" in functions.php per i pattern.
 */

:root {
  --hijet-p-ink: #1a2430;
  --hijet-p-muted: #6b7785;
  --hijet-p-border: #dbe4ec;
  --hijet-p-bg: #ffffff;
  --hijet-p-panel: #eaf5ff;   /* sezione Vantaggi — azzurro chiaro richiesto */
  --hijet-p-blue: #2d6fa8;
  --hijet-p-blue-dark: #1a3f6f;
  --hijet-p-blue-bg: #eef4fa;
  --hijet-p-card: #ffffff;
}

/* ─── FASCIA EMERGENZA (pattern facoltativo, in cima alla pagina) ─── */
.hijet-emergenza {
  background: var(--hijet-p-blue-dark) !important;
  color: #fff;
  padding: 0.7rem 5vw !important;
}
.hijet-emergenza, .hijet-emergenza p { color: #fff; margin: 0; }
.hijet-emergenza .hijet-emergenza-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  max-width: 1180px; margin: 0 auto;
}
.hijet-emergenza a { color: #fff; text-decoration: none; font-weight: 700; }
.hijet-emergenza a:hover { text-decoration: underline; }

/* ─── HERO ─── */
.hijet-hero { padding: 4rem 5vw !important; background: var(--hijet-p-bg); }
.hijet-hero .hijet-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hijet-p-blue);
  margin-bottom: 1rem !important;
}
.hijet-hero h1 {
  font-family: var(--hijet-font-title, 'DM Sans', sans-serif) !important;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.5rem); /* Michroma è molto larga: corpo ridotto */
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--hijet-p-ink);
  margin-bottom: 1.2rem !important;
}
.hijet-hero .hijet-hero-sub {
  font-size: 1.05rem;
  color: var(--hijet-p-muted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 1.5rem !important;
}
.hijet-hero-photo {
  aspect-ratio: 4 / 3.2;
  background: var(--hijet-p-blue-bg);
  border: 1px solid var(--hijet-p-border);
  border-radius: 8px;
  overflow: hidden;
}
.hijet-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pulsanti — usa il blocco Pulsante di Gutenberg con questa classe aggiuntiva */
.hijet-btn-primary .wp-block-button__link {
  background: var(--hijet-p-blue) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px !important;
  padding: 0.95rem 1.8rem !important;
}
.hijet-btn-primary .wp-block-button__link:hover { background: var(--hijet-p-blue-dark) !important; }
.hijet-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--hijet-p-ink) !important;
  border: 1.5px solid var(--hijet-p-border) !important;
  font-weight: 700;
  border-radius: 4px !important;
  padding: 0.9rem 1.8rem !important;
}
.hijet-btn-outline .wp-block-button__link:hover { border-color: var(--hijet-p-blue) !important; color: var(--hijet-p-blue) !important; }

/* ─── ETICHETTE DI SEZIONE (facoltative, sopra i titoli) ─── */
.hijet-section-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hijet-p-blue);
  margin-bottom: 0.6rem !important;
}

/* ─── VANTAGGI (3 colonne) ─── */
.hijet-vantaggi {
  background: var(--hijet-p-panel) !important;   /* #eaf5ff, come richiesto */
  padding: 3.5rem 5vw !important;
}
.hijet-vantaggi .wp-block-column {
  background: #fff;
  border: 1px solid var(--hijet-p-border);
  border-radius: 8px;
  padding: 1.8rem !important;
}
.hijet-vantaggi h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem !important; color: var(--hijet-p-ink); }
.hijet-vantaggi p { font-size: 0.9rem; color: var(--hijet-p-muted); line-height: 1.6; }

/* ─── CATALOGO (righe di card foto + testo) ─── */
.hijet-catalogo { padding: 4rem 5vw !important; }
.hijet-catalogo-tile {
  border: 1px solid var(--hijet-p-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--hijet-p-card);
}
.hijet-catalogo-tile .wp-block-image {
  margin: 0 !important;
  aspect-ratio: 4/3;
  background: var(--hijet-p-blue-bg);
  overflow: hidden;
}
.hijet-catalogo-tile .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.hijet-catalogo-tile .hijet-catalogo-body { padding: 1.2rem 1.3rem 1.4rem !important; }
.hijet-catalogo-tile h4 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.3rem !important; color: var(--hijet-p-ink); }
.hijet-catalogo-tile p.hijet-catalogo-desc { font-size: 0.85rem; color: var(--hijet-p-muted); margin: 0; }

/* ─── OFFICINA / USATO ─── */
.hijet-officina {
  background: var(--hijet-p-blue-dark) !important;
  color: #fff;
  padding: 4rem 5vw !important;
  border-radius: 8px;
}
.hijet-officina h2 {
  font-family: var(--hijet-font-title, 'DM Sans', sans-serif) !important;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: #fff !important;
  margin-bottom: 1rem !important;
}
.hijet-officina p { color: rgba(255,255,255,0.82) !important; font-size: 1rem; line-height: 1.7; }
.hijet-officina-photo {
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  overflow: hidden;
}
.hijet-officina-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── MARCHI ─── */
.hijet-marchi { padding: 3rem 5vw !important; text-align: center; }
.hijet-marchi h3 { font-size: 0.95rem; font-weight: 700; color: var(--hijet-p-muted); }
.hijet-marchi p { font-family: 'DM Mono', monospace; letter-spacing: 0.05em; color: var(--hijet-p-ink); opacity: 0.6; font-size: 1rem; }

/* ─── FOOTER SITO (Blocksy, condiviso su tutte le pagine) ───
   Ritocco colore richiesto: sfondo blu scuro come nella Bozza C.
   Selettori tipici Blocksy: se il tuo footer non cambia colore, mandami uno
   screenshot con l'elemento ispezionato (F12) così trovo il selettore esatto. */
.ct-footer,
footer.site-footer,
#colophon {
  background-color: var(--hijet-p-blue-dark) !important;
  color: #fff !important;
}
.ct-footer a, footer.site-footer a, #colophon a { color: #cfe3f5 !important; }