/*
Theme Name: Francesco Ferro Intermediazioni
Description: Tema base per il nuovo sito francescoferro.it — hero Home, in attesa del tema definitivo costruito con Pinegrow.
Author: Gianluca
Version: 0.1.4
Text Domain: ff-tema
*/

:root{
  --rosso: #8B1A1A;
  --rosso-acceso: #A8281F;
  --antracite: #2c2c2c;
  --crema: #F4EEE2;
  --oro: #C9A24B;
  --verde-prato: #5C6B3F;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  font-family:'Archivo', sans-serif;
  background: var(--crema);
  color: var(--antracite);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Solo la Home (hero a piena pagina) blocca lo scroll: le pagine interne scorrono normalmente. */
html.ff-hero, html.ff-hero body{
  height:100%;
  overflow:hidden;
}
html.ff-hero body{
  background:#111;
  color: var(--crema);
}

.hero{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.hero-bg, .hero-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  z-index:0;
}

/* Scrim: più scuro in basso a sinistra dove poggia il testo, leggero in alto per il logo */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(20,18,14,0.55) 0%, rgba(20,18,14,0.05) 28%, rgba(20,18,14,0.10) 55%, rgba(20,18,14,0.78) 100%),
    linear-gradient(90deg, rgba(20,18,14,0.55) 0%, rgba(20,18,14,0.05) 45%);
}

.hero-topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding: 14px clamp(20px, 5vw, 64px);
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.brand{
  display:flex;
  align-items:center;
}
/* Logo PNG con trasparenza reale e scritta chiara: sta direttamente
   sulla barra scura, senza più il chip crema necessario col vecchio JPEG. */
.logo-mark{
  height:36px;
  width:auto;
  display:block;
}

.nav{
  display:flex;
  align-items:center;
  gap: clamp(14px, 2vw, 32px);
  list-style:none;
}
.nav a{
  color: rgba(244,238,226,0.88);
  text-decoration:none;
  font-size:0.86rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:500;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition: border-color .2s ease, color .2s ease;
}
.nav a:hover{ color:var(--crema); border-color:var(--oro); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid rgba(244,238,226,0.5);
  border-radius:3px;
  background: transparent;
  cursor:pointer;
  position:relative;
  flex:none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:9px; right:9px;
  height:2px;
  background: var(--crema);
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:720px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:16px;
    background: rgba(20,18,14,0.97);
    padding: 96px 28px 28px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index:2;
  }
  .nav.is-open{ transform: translateX(0); }
  .nav a{
    display:block; /* inline + padding verticale = aree cliccabili sovrapposte/spostate */
    width:100%;
    padding: 18px 0;
    border-bottom:1px solid rgba(244,238,226,0.12);
    font-size:1.15rem;
    letter-spacing:0.02em;
  }
  .nav li{ width:100%; }
  .nav a:hover{ border-color: rgba(244,238,226,0.12); }
  /* Foto decorativa in fondo al pannello, sotto le voci di menu */
  .nav::after{
    content:"";
    flex:1 1 auto;
    min-height:140px;
    width:100%;
    margin-top:24px;
    background: url('img/maialino.jpg') center 30% / cover no-repeat;
    border-radius:6px;
  }
}

.hero-content{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  padding: 0 clamp(20px, 5vw, 64px);
  max-width: 880px;
}

.badge{
  position:absolute;
  right: calc(clamp(20px, 5vw, 64px) + 70px);
  bottom: clamp(96px, 11vw, 150px);
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 18px;
  background: rgba(20,18,14,0.35);
  border:1px solid rgba(201,162,75,0.55);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  max-width: min(280px, 70vw);
}
/* Su schermi bassi il blocco centrale scende: il badge si abbassa a filo
   dell'hero per non coprire i bottoni; sotto i 520px di altezza sparisce. */
@media (max-height: 700px){
  .badge{ bottom: 20px; }
}
@media (max-height: 520px){
  .badge{ display:none; }
}
/* Mobile: le CTA impilate arrivano in basso, il badge sta a filo del fondo
   solo se lo schermo è abbastanza alto, altrimenti sparisce. */
@media (max-width: 720px){
  .badge{ bottom: 16px; right: clamp(20px, 5vw, 64px); }
}
@media (max-width: 720px) and (max-height: 760px){
  .badge{ display:none; }
}

.badge svg{ flex:none; width:16px; height:16px; color:var(--oro); }
.badge span{
  color: var(--crema);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.3;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:560;
  font-optical-sizing:auto;
  color: var(--crema);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing:-0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 4px 18px rgba(0,0,0,0.55), 0 12px 40px rgba(0,0,0,0.4);
}
h1 em{
  font-style:normal;
  color: #fff;
  background: linear-gradient(180deg, transparent 62%, rgba(139,26,26,0.65) 62%);
  padding: 0 2px;
}

.subtitle{
  margin-top:22px;
  max-width: 540px;
  color: rgba(244,238,226,0.86);
  font-size: 1.4rem;
  line-height:1.6;
  font-weight:400;
}

.cta-row{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 26px;
  font-family:'Archivo', sans-serif;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:3px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{
  background: var(--rosso);
  color: var(--crema);
  border: 1px solid var(--rosso);
}
.btn-primary:hover{ background: var(--rosso-acceso); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--crema);
  border: 1px solid rgba(244,238,226,0.55);
}
.btn-ghost:hover{ border-color: var(--crema); transform: translateY(-1px); }

.scroll-cue{
  position:absolute;
  right: clamp(20px, 5vw, 64px);
  bottom: 28px;
  z-index:2;
  color: rgba(244,238,226,0.65);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  writing-mode: vertical-rl;
  display:flex;
  align-items:center;
  gap:10px;
}
.scroll-cue::after{
  content:"";
  width:1px; height:40px;
  background: rgba(244,238,226,0.5);
}
@media (max-width:720px){ .scroll-cue{ display:none; } }

.site-footer{
  flex:none;
  background: var(--antracite);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(244,238,226,0.08);
}
.footer-text{
  color: rgba(244,238,226,0.62);
  font-family:'Archivo', sans-serif;
  font-size:0.7rem;
  letter-spacing:0.01em;
  line-height:1.5;
  text-align:center;
}
.footer-text .sep{
  color: rgba(244,238,226,0.3);
  margin: 0 8px;
}
@media (max-width:720px){
  .footer-text{ font-size:0.66rem; }
}

/* ===== Pagine interne (Azienda, Mercato Suini, Tagli di Carne Fresca, Contatti) ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding: 14px clamp(20px, 5vw, 64px);
  background: var(--antracite);
}
.site-header .logo-mark{ height:42px; }

.site-main{
  flex:1 1 auto;
}

.page-banner{
  background: var(--antracite);
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 64px);
}
.page-banner h1{
  font-family:'Fraunces', serif;
  font-weight:560;
  font-optical-sizing:auto;
  color: var(--crema);
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.page-banner p{
  margin-top:10px;
  color: rgba(244,238,226,0.8);
  font-size:1.05rem;
  max-width:640px;
}

.page-content{
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 64px);
}

.page-illustration{
  margin-bottom: clamp(24px, 4vw, 40px);
}
.page-illustration img{
  display:block;
  width:100%;
  height:auto;
}

.prose{
  max-width: 720px;
  font-size:1.05rem;
  line-height:1.75;
}
.prose h2{
  font-family:'Fraunces', serif;
  font-weight:560;
  color: var(--antracite);
  margin: 1.6em 0 0.5em;
  font-size:1.5rem;
}
.prose p{ margin-bottom:1.1em; }
.prose ul,
.prose ol{
  margin: 0 0 1.1em 1.4em;
}
.prose li{ margin-bottom:0.4em; }
.prose:first-child h2:first-child{ margin-top:0; }

/* Pagine listino prezzi: il markup della tabella arriva dallo shortcode del plugin */
.page-price-table{
  margin-top:8px;
}

/* Contatti */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 56px);
  align-items:start;
}
@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-form label{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color: var(--antracite);
  margin-bottom:5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d8d0bf;
  border-radius:3px;
  font-family:'Archivo', sans-serif;
  font-size:0.95rem;
  background:#fff;
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form .field-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width:520px){
  .contact-form .field-row{ grid-template-columns: 1fr; }
}
.gdpr-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.82rem;
  line-height:1.5;
  color:#555;
}
.gdpr-line input{ margin-top:3px; }
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-notice{
  padding:12px 16px;
  border-radius:3px;
  font-size:0.9rem;
  margin-bottom:16px;
}
.form-notice.ok{ background:#e9f0e1; color:#3f5228; border:1px solid #c3d4ac; }
.form-notice.errore{ background:#f7e4e1; color:#7a2318; border:1px solid #e3b6ac; }

.contact-info-card{
  background: var(--crema);
  border:1px solid #e3ddd0;
  border-radius:4px;
  padding: 22px 24px;
}
.contact-info-card h3{
  font-family:'Fraunces', serif;
  color: var(--antracite);
  margin-bottom:10px;
  font-size:1.15rem;
}
.contact-info-card p{
  font-size:0.92rem;
  line-height:1.6;
  color:#444;
  margin-bottom:14px;
}
.contact-info-card a{ color: var(--rosso); text-decoration:none; }
.contact-info-card a:hover{ text-decoration:underline; }

.contact-map{
  margin-top:18px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid #e3ddd0;
}
.contact-map iframe{ display:block; width:100%; height:280px; border:0; }