/* ================================================================
   PattiOnLine — pol-chrome.css  (CHROME, Fase B — BOZZA)
   NON caricare in Fase A. Contiene:
     A. stili .pol-* della chrome del mockup (per inject futuro: topbar/masthead/navbar/footer)
     B. override .uk-navbar del tema reale → brand
   La chrome del mockup e' solida a 3 fasce; l'header YOOtheme attuale e' overlay
   trasparente → la Fase B e' una ristrutturazione, non un semplice recolor.
   ================================================================ */

/* ----- A. chrome del mockup (scopata .pol-home, per inject) ----- */

/* ============ TOPBAR ============ */
.pol-home .topbar {background:var(--sabbia);color:var(--blu);border-bottom:1px solid #eaddc2}
.pol-home .topbar .wrap {display:flex;align-items:center;justify-content:space-between;
  min-height:40px;gap:16px;font-size:13px;font-weight:500}
.pol-home .topbar .left {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pol-home .topbar .meteo {display:flex;align-items:center;gap:6px}
.pol-home .topbar .meteo svg {width:16px;height:16px}
.pol-home .topbar .dot {width:4px;height:4px;border-radius:50%;background:var(--oro)}
.pol-home .topbar .right {display:flex;align-items:center;gap:14px}
.pol-home .search {display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid #eaddc2;border-radius:0;padding:5px 12px;min-width:210px}
.pol-home .search input {border:0;outline:0;font-family:inherit;font-size:13px;width:100%;color:var(--ink);background:transparent}
.pol-home .search svg {width:15px;height:15px;color:var(--grigio);flex:none}
.pol-home .socials {display:flex;gap:8px}
.pol-home .socials a {width:28px;height:28px;border-radius:50%;background:var(--blu);color:#fff;
  display:grid;place-items:center;transition:.2s}
.pol-home .socials a:hover {background:var(--verde);transform:translateY(-1px)}
.pol-home .socials svg {width:14px;height:14px}

/* ============ MASTHEAD ============ */
.pol-home .masthead {background:var(--paper);padding:20px 0 18px}
.pol-home .masthead .wrap {display:flex;align-items:center;justify-content:space-between;gap:24px}
.pol-home .brand {display:flex;align-items:center;gap:18px}
.pol-home .brand .logo {height:96px;width:auto;display:block}
.pol-home .brand .brand-sep {width:1px;height:52px;background:var(--line)}
.pol-home .brand .tag {font-size:13px;color:var(--grigio);font-weight:500;letter-spacing:.01em;line-height:1.35}
.pol-home .masthead .estd {text-align:right;font-size:11.5px;color:#9aa3ae;line-height:1.5;font-weight:500;flex:none}
.pol-home .masthead .estd .big {font-family:"Fraunces",serif;font-size:15px;color:var(--oro);font-weight:600;display:block;letter-spacing:.02em}
.pol-home .mast-search {flex:1;max-width:560px;margin:0 clamp(24px,4vw,64px);display:flex;align-items:center;gap:11px;
  background:var(--mist);border:1px solid var(--line);border-radius:0;padding:13px 22px;transition:.16s}
.pol-home .mast-search:focus-within {border-color:var(--verde);background:#fff;box-shadow:0 0 0 3px rgba(14,158,142,.14)}
.pol-home .mast-search svg {width:18px;height:18px;color:var(--grigio);flex:none}
.pol-home .mast-search input {border:0;outline:0;background:transparent;font-family:inherit;font-size:14px;width:100%;color:var(--ink)}
.pol-home .topbar .follow {font-size:12px;color:var(--grigio)}

/* ============ NAVBAR ============ */
.pol-home nav.main {background:var(--blu);position:sticky;top:0;z-index:100;
  box-shadow:0 2px 0 var(--oro), var(--shadow-sm)}
.pol-home nav.main .wrap {display:flex;align-items:center;justify-content:space-between;gap:12px}
.pol-home .nav-links {display:flex;list-style:none;gap:2px;overflow-x:auto}
.pol-home .nav-links a {display:block;color:#dfe7fb;font-weight:600;font-size:15px;
  padding:16px 18px;position:relative;white-space:nowrap;transition:.18s}
.pol-home .nav-links a::after {content:"";position:absolute;left:18px;right:18px;bottom:10px;height:2px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.pol-home .nav-links a:hover {color:#fff}
.pol-home .nav-links a:hover::after,.pol-home .nav-links a.active::after {transform:scaleX(1)}
.pol-home .nav-links a.active {color:#fff}
/* CTA "Visita la Sicilia" — bottone oro in evidenza */
.pol-home .nav-links li.polv-cta-li {display:flex;align-items:center;margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}
.pol-home .nav-links a.polv-cta {display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#DDA65A,#e8b76a);color:#2a1e06 !important;font-weight:700;font-size:14.5px;
  padding:9px 17px;border-radius:0;white-space:nowrap;box-shadow:0 4px 14px rgba(221,166,90,.42);
  animation:polvGlow 2.8s ease-in-out infinite;transition:.2s}
.pol-home .nav-links a.polv-cta::after {display:none}
.pol-home .nav-links a.polv-cta svg {width:16px;height:16px;flex:none}
.pol-home .nav-links a.polv-cta:hover {background:linear-gradient(135deg,#e8b76a,#f0c47e);
  box-shadow:0 6px 22px rgba(221,166,90,.6);transform:translateY(-1px)}
@keyframes polvGlow {0%,100%{box-shadow:0 4px 14px rgba(221,166,90,.42)}50%{box-shadow:0 5px 24px rgba(221,166,90,.72)}}
@media (prefers-reduced-motion:reduce){.pol-home .nav-links a.polv-cta{animation:none}}
.pol-home .nav-toggle {display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:10px;margin-left:auto}
.pol-home .nav-toggle span {width:24px;height:2px;background:#fff;border-radius:0;transition:.25s}
.pol-home .main.open .nav-toggle span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
.pol-home .main.open .nav-toggle span:nth-child(2) {opacity:0}
.pol-home .main.open .nav-toggle span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
.pol-home .nav-cta {display:flex;align-items:center;gap:10px}
.pol-home .nav-cta .live-mini {display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:600}
.pol-home .nav-cta .pulse {width:9px;height:9px;border-radius:50%;background:var(--terra);
  box-shadow:0 0 0 0 rgba(193,90,60,.6);animation:polh-pulse 1.8s infinite}
@keyframes polh-pulse {0%{box-shadow:0 0 0 0 rgba(193,90,60,.55)}70%{box-shadow:0 0 0 9px rgba(193,90,60,0)}100%{box-shadow:0 0 0 0 rgba(193,90,60,0)}}

/* ============ FOOTER ============ */
.pol-home footer {background:#08205c;color:#c7d2ee;padding:46px 0 26px;margin-top:0;border-top:3px solid var(--oro)}
.pol-home .foot-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:36px}
.pol-home .foot-logo {height:66px;width:auto;margin-bottom:14px}
.pol-home .foot-brand p {font-size:12.5px;margin-top:0;max-width:300px;color:#9fb0da;line-height:1.6}
.pol-home .foot-social {display:flex;gap:10px;margin-top:18px}
.pol-home .foot-social a {width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fff;transition:.18s}
.pol-home .foot-social a:hover {background:var(--oro);color:#08205c;transform:translateY(-2px)}
.pol-home .foot-social svg {width:17px;height:17px}
.pol-home footer h5 {font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.pol-home footer ul {list-style:none}
.pol-home footer li a {display:block;padding:6px 0;font-size:14px;color:#c7d2ee;transition:.15s}
.pol-home footer li a:hover {color:#fff;padding-left:4px}
.pol-home .foot-contact li {padding:6px 0}
.pol-home .foot-contact li span {display:block;font-size:12px;color:#8fa0cc;margin-bottom:2px}
.pol-home .foot-contact li a {padding:0}
.pol-home .foot-contact li:first-child a {color:var(--oro);font-weight:600}
.pol-home .foot-contact li:first-child a:hover {color:#fff;padding-left:0}
.pol-home .foot-bottom {border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;
  font-size:12px;color:#8fa0cc;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pol-home .foot-sign {flex-basis:100%;text-align:center;margin-top:10px;color:#aeb9da;letter-spacing:.02em}
.pol-home .foot-sign .fs-heart {font-style:normal;color:#e0674a;display:inline-block;transform-origin:center;animation:fsbeat 1.8s ease-in-out infinite}
@keyframes fsbeat {0%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1)}36%{transform:scale(1.18)}48%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pol-home .foot-sign .fs-heart{animation:none}}

/* ----- B. override del tema reale ----- */

/* ===== HIDE chrome YOOtheme + integrazione nostra chrome =====
   pol-chrome.css si carica dove vogliamo la nostra chrome (globale in Fase B):
   quindi nasconde header/footer YOOtheme in modo incondizionato (niente FOUC). */
.tm-header, .tm-header-mobile { display: none !important; }
.tm-page > footer, footer:not(.pol-footer) { display: none !important; }

/* wrapper header/footer a tutta larghezza */
#pol-chrome-header.pol-home, #pol-chrome-footer.pol-home {
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow-x: clip;
}
/* wrapper navbar: display:contents → la navbar diventa figlia diretta del body,
   cosi' position:sticky si aggancia rispetto all'intera pagina (non a un div corto).
   NIENTE overflow qui: rompeva lo sticky. */
#pol-chrome-nav { display: contents; }
.pol-home nav.main { z-index: 980; }
/* ticker sticky SOTTO la navbar (il top esatto = altezza navbar, impostato via JS) */
#pol-chrome-ticker { position: sticky; z-index: 970; }

/* ===== HEADER COMPATTO (override, vince per ordine sulle regole della chrome sopra) ===== */
.pol-home .topbar .wrap { min-height: 34px; }
.pol-home .masthead { padding: 10px 0; }
.pol-home .brand .logo { height: 62px; }
.pol-home .brand .brand-sep { height: 40px; }
.pol-home .nav-links a { padding-top: 11px; padding-bottom: 11px; }
.pol-home .mast-search { padding: 10px 20px; }

/* ===== FIX MOBILE (hamburger) =====
   Il menu mobile era gia' definito in pol.css @820px, ma pol-chrome.css si
   carica DOPO e la sua riga 59 (.nav-toggle{display:none}, senza media query)
   vinceva per ordine di cascata → hamburger mai visibile su mobile.
   Riasserisco qui il menu mobile: pol-chrome.css e' l'ultimo caricato → vince. */
@media (max-width: 820px) {
  .pol-home .nav-toggle { display: flex; }
  .pol-home .main .wrap { position: relative; }
  .pol-home .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; overflow-x: hidden; overflow-y: auto;
    background: var(--blu); max-height: 0; transition: max-height .32s ease;
    box-shadow: 0 14px 26px rgba(0,0,0,.28);
  }
  .pol-home .main.open .nav-links { max-height: 75vh; }
  .pol-home .nav-links a { padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
  .pol-home .nav-links li.polv-cta-li { margin: 12px 16px; }
  .pol-home .nav-links a.polv-cta { justify-content: center; padding: 14px 18px; animation: none; }
  .pol-home .nav-links a::after { display: none; }
}

/* Footer responsive: stesso clobber del menu — la .foot-grid a 4 colonne
   (riga 72) vinceva sulle media query di pol.css → footer schiacciato su mobile.
   Riasserito qui (pol-chrome.css e' l'ultimo caricato → vince). */
@media (max-width: 980px) {
  .pol-home .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pol-home .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .pol-home .foot-bottom { flex-direction: column; gap: 6px; }
}