/* ============================================================
   MASSERIA CAMARDA — RESTYLING 2026 (camarda.css)
   Sostituisce: style.css, udt_shortcodes.css, udt_media_queries.css,
   flexslider.css, s3slider.css, epicfullscreen.css, fancybox css.
   Palette invariata: bianco, oro #b3912b / #b8902e / #efc640,
   rosso #e70000. Font invariati: Bebas Neue + Quicksand.
   Responsive automatico: desktop / tablet / mobile.
   ============================================================ */

:root{
  --oro:        #b3912b;
  --oro-scuro:  #8f7320;
  --oro-chiaro: #efc640;
  --rosso:      #e70000;
  --testo:      #4a4a4a;
  --grigio:     #666;
  --panna:      #faf8f2;
  --linea:      #e6e0d0;
  --bianco:     #ffffff;
  --font-tit:   'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  --font-testo: 'Quicksand', 'Trebuchet MS', sans-serif;
  --raggio:     8px;
  --ombra:      0 2px 14px rgba(0,0,0,.08);
  --larghezza:  1180px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}
body{
  margin:0;
  font-family:var(--font-testo);
  font-size:16px;
  line-height:1.75;
  color:var(--testo);
  background:var(--bianco);
}
img,svg,iframe,video{ max-width:100%; }
img{ height:auto; border:0; }
p,li,td,a{ overflow-wrap:break-word; }
a{ color:var(--oro); transition:color .2s; }
a:hover{ color:var(--oro-scuro); }
a:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.clearfix::after{ content:""; display:table; clear:both; }
.clear{ clear:both; }

/* Titoli: schema invariato (oro, maiuscolo, Bebas) */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-tit);
  font-weight:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--oro);
  line-height:1.2;
  margin:0 0 .8em;
}
h1{ font-size:clamp(1.8rem, 4vw, 2.6rem); }
h2{ font-size:clamp(1.5rem, 3.2vw, 2.1rem); }
h3{ font-size:1.4rem; }
.text_bold{ font-weight:700; }
.text_uppercase{ text-transform:uppercase; }

/* ============================================================
   HEADER + NAVIGAZIONE (schema invariato: logo, menu con
   sottomenu, bandiere, link F1 e PROMOZIONI, toggle mobile)
   ============================================================ */
#header-wrapper{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
  box-shadow:0 1px 10px rgba(0,0,0,.05);
}
#header-inner{ max-width:var(--larghezza); margin:0 auto; padding:0 20px; }
#header-inner header{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 22px; padding:10px 0; position:relative;
}
#logo{ margin-right:auto; }
#logo img{ display:block; height:72px; width:auto; }

/* --- Menu principale --- */
nav{ position:relative; }
ul.navigation{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:4px;
}
ul.navigation > li{ position:relative; }
ul.navigation > li > a{
  display:block; padding:12px 14px;
  font-family:var(--font-tit);
  font-size:1.15rem; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none;
  color:var(--grigio); white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
ul.navigation > li > a:hover,
ul.navigation > li > a.active,
ul.navigation > li.open > a{
  color:var(--oro); border-bottom-color:var(--oro);
}
ul.navigation img.flag{
  display:block; width:24px; height:auto;
  border-radius:3px; box-shadow:0 0 0 1px var(--linea);
}
ul.navigation > li > a:has(img.flag){ padding:12px 6px; border-bottom:0; }

/* --- Sottomenu a tendina --- */
ul.sub-menu{
  list-style:none; margin:0; padding:8px 0;
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--bianco);
  border:1px solid var(--linea); border-top:3px solid var(--oro);
  border-radius:0 0 var(--raggio) var(--raggio);
  box-shadow:var(--ombra);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:950;
}
ul.navigation > li:hover > ul.sub-menu,
ul.navigation > li:focus-within > ul.sub-menu,
ul.navigation > li.open > ul.sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
ul.sub-menu li a{
  display:block; padding:9px 18px;
  font-size:.95rem; text-decoration:none; color:var(--grigio);
  transition:background .15s, color .15s, padding-left .15s;
}
ul.sub-menu li a:hover{
  background:var(--panna); color:var(--oro); padding-left:24px;
}

/* --- Link evento F1 e PROMOZIONI (funzioni invariate) --- */
#event_link a,
#promo_link a{
  display:inline-block; padding:8px 18px;
  font-family:var(--font-tit); font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius:999px;
  white-space:nowrap;
}
#event_link a{
  color:var(--oro); border:1.5px solid var(--oro);
  transition:background .2s, color .2s;
}
#event_link a:hover{ background:var(--oro); color:#fff; }
#promo_link a{
  color:#fff; background:var(--rosso);
  border:1.5px solid var(--rosso);
}
#promo_link a:hover{ background:#c00000; }
/* il "lampeggio" storico diventa una pulsazione discreta */
.text_blinking{ animation:cam-pulse 2s ease-in-out infinite; }
@keyframes cam-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(231,0,0,.45); }
  55%    { box-shadow:0 0 0 9px rgba(231,0,0,0); }
}

/* --- Toggle menu mobile (markup esistente .mobileMenuToggle) --- */
.mobileMenuToggle{ display:none; }
.mobileMenuToggle a{
  display:block; width:44px; height:44px; position:relative;
  border:1px solid var(--linea); border-radius:var(--raggio);
}
.mobileMenuToggle a::before,
.mobileMenuToggle a::after,
.mobileMenuToggle a span{ pointer-events:none; }
.mobileMenuToggle a::before{
  content:""; position:absolute; left:11px; right:11px; top:14px;
  height:2px; background:var(--oro);
  box-shadow:0 6px 0 var(--oro), 0 12px 0 var(--oro);
  transition:transform .25s, box-shadow .25s;
}
.mobileMenuToggle.open a::before{
  transform:translateY(6px) rotate(45deg);
  box-shadow:0 0 0 rgba(0,0,0,0), 0 0 0 var(--oro);
}
.mobileMenuToggle.open a::after{
  content:""; position:absolute; left:11px; right:11px; top:20px;
  height:2px; background:var(--oro); transform:rotate(-45deg);
}

/* ============================================================
   CONTENUTI
   ============================================================ */
#content-wrapper{
  max-width:var(--larghezza);
  margin:0 auto;
  padding:34px 20px 60px;
}
section.pages, section.homepage{ display:block; }

/* Immagini di sezione / titoli-immagine */
#display-image{ margin:0 0 34px; text-align:center; }
#display-image img{
  display:inline-block; max-width:100%;
  border-radius:var(--raggio); box-shadow:var(--ombra);
}
#section-title{ margin:0 0 34px; text-align:center; }
#section-title img{ border-radius:var(--raggio); }
.centra{ display:block; margin-left:auto; margin-right:auto; }

/* Blocchi di testo */
.contenuto, .contenuto_press, .contenuto_promo{
  max-width:880px; margin:0 auto 34px;
  font-size:1.03rem;
}
.contenuto img, .contenuto_press img, .contenuto_promo img{
  display:block; margin:0 auto;
}
h1.contenuto{
  max-width:880px; margin:0 auto 20px; text-align:center;
}
.contenuto strong{ color:var(--oro-scuro); }

/* Immagine affiancata al testo (pagina Storia) */
.imm_aff_text{ float:left; margin:0 30px 16px 0; max-width:42%; }
.imm_aff_text img{ border-radius:var(--raggio); box-shadow:var(--ombra); }
.text_aff_imm{ overflow:hidden; max-width:880px; margin:0 auto 34px; }

/* ============================================================
   GRIGLIA HOMEPAGE (#grid, ex Masonry — ora CSS Grid fluida)
   ============================================================ */
#grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:150px;
  grid-auto-flow:dense;
  gap:14px;
  margin:0 0 40px;
}
#grid .thumb{
  position:relative; overflow:hidden;
  border-radius:var(--raggio);
  grid-column:span 2; grid-row:span 2;   /* base: 1/3 di riga */
}
#grid .thumb-type-2{ grid-column:span 4; }               /* largo */
#grid .thumb-type-3{ grid-column:span 4; grid-row:span 3; }
#grid .thumb-type-4{ grid-column:span 2; grid-row:span 3; }
#grid .thumb-type-6{ grid-column:1 / -1; grid-row:span 2; } /* banner video */
#grid .thumb a{ display:block; width:100%; height:100%; cursor:pointer; }
#grid .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
#grid .thumb:hover img{ transform:scale(1.05); }
#grid .thumb a::after{                   /* velo dorato al passaggio */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(179,145,43,0) 40%, rgba(179,145,43,.45));
  opacity:0; transition:opacity .35s;
}
#grid .thumb:hover a::after{ opacity:1; }

/* ============================================================
   SLIDER (markup invariato: #s3slider e .flexslider;
   il JS moderno aggiunge .cam-slider, .cam-attivo, .cam-dots)
   ============================================================ */
#s3slider, .flexslider{
  position:relative; overflow:hidden;
  border-radius:var(--raggio); box-shadow:var(--ombra);
  margin:0 auto 40px; max-width:980px;
  background:#000;
}
#s3sliderContent, .flexslider .slides{
  list-style:none; margin:0; padding:0; position:relative;
}
#s3sliderContent li, .flexslider .slides > li{
  margin:0; padding:0;
}
.cam-slider li.cam-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1s ease;
}
.cam-slider li.cam-slide.cam-attivo{ opacity:1; position:relative; }
.cam-slider li.cam-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* didascalie (span.textalign nel markup esistente) */
.cam-slider .textalign, .cam-slider .flex-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 26px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
  color:#fff; font-size:1.02rem; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* pallini di navigazione generati dal JS */
.cam-dots{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:8px; z-index:5;
}
.cam-dots button{
  width:11px; height:11px; padding:0; border-radius:50%;
  border:1px solid #fff; background:transparent; cursor:pointer;
}
.cam-dots button[aria-current="true"]{ background:var(--oro-chiaro); border-color:var(--oro-chiaro); }
.cam-dots button:focus-visible{ outline:2px solid var(--oro-chiaro); outline-offset:2px; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-container{
  max-width:900px; margin:0 auto 40px;
  aspect-ratio:16/9; position:relative;
  border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra);
  background:#000;
}
.video-container iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ============================================================
   MAPPA (iframe incorporato, pagina Contatti)
   ============================================================ */
.map-embed{
  max-width:980px; margin:0 auto 40px;
  aspect-ratio:16/9; position:relative;
  border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra);
}
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   TABELLE (tariffe #fares_table, #press, #promo, F1)
   ============================================================ */
#fares_table, #press, #promo{
  max-width:980px; margin:0 auto 40px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--raggio); box-shadow:var(--ombra);
}
#fares_table table, #press table, #promo table{
  width:100%; min-width:720px;
  border-collapse:collapse; background:var(--bianco);
}
#fares_table td, #press td, #promo td{
  padding:12px 14px; text-align:center;
  border-bottom:1px solid var(--linea);
  font-size:.97rem;
}
#fares_table tr.header td{
  background:var(--oro); color:#fff;
  font-family:var(--font-tit); font-size:1.05rem;
  letter-spacing:.06em; text-transform:uppercase;
  border-bottom:0;
}
#fares_table tr:nth-child(even) td{ background:var(--panna); }
#fares_table td.alt{ background:transparent; } /* neutralizza vecchia zebratura */
#fares_table tr:nth-child(even) td.alt{ background:var(--panna); }
#press td, #promo td{ text-align:left; }
#press img, #promo img{ border-radius:6px; }

/* voci press statiche */
.news_title{ font-family:var(--font-tit); color:var(--oro); font-size:1.3rem; }
.date{ color:#999; font-size:.85rem; }

/* ============================================================
   FOOTER (schema invariato: 3 colonne + barra social)
   ============================================================ */
#footer-wrapper{
  background:var(--panna);
  border-top:3px double var(--oro);
  margin-top:40px;
}
#footer-top{ max-width:var(--larghezza); margin:0 auto; padding:44px 20px 22px; }
#footer-top footer{
  display:flex; flex-wrap:wrap; gap:30px;
  justify-content:space-between; align-items:flex-start;
}
.column_one_third{ flex:1 1 260px; min-width:230px; }
.column-footer-widget p{ margin:0 0 10px; font-size:.95rem; color:var(--grigio); }
.widgettitle{
  font-size:1.25rem; margin-bottom:14px;
  padding-bottom:8px; border-bottom:1px solid var(--oro-chiaro);
  display:inline-block;
}
#footer-logo img{ max-height:88px; width:auto; margin-bottom:12px; }
.residenzedepoca{ text-align:center; }
.residenzedepoca img{ max-width:150px; }
.float_right{ float:none; }

/* riconoscimenti (TripAdvisor / Customer Alliance) */
#eccellence{ max-width:var(--larghezza); margin:0 auto; padding:0 20px 26px; }
#eccellence table{ margin:0 auto; border-collapse:collapse; }
#eccellence td{ padding:0 18px; vertical-align:middle; }

/* barra social in basso */
#footer-bottom{ background:var(--oro); }
#footer-bottom footer{
  max-width:var(--larghezza); margin:0 auto; padding:14px 20px;
  display:flex; justify-content:center;
}
#footer-bottom ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
#footer-bottom ul a{
  display:inline-block; padding:8px 20px;
  border:1px solid rgba(255,255,255,.6); border-radius:999px;
  color:#fff; text-decoration:none;
  font-family:var(--font-tit); font-size:1rem; letter-spacing:.08em;
  transition:background .2s;
}
#footer-bottom ul a:hover{ background:rgba(255,255,255,.18); }
/* le vecchie icone erano immagini di sfondo: ora etichette testuali */
#footer-bottom a#facebook::after{ content:"Facebook"; }
#footer-bottom a#wikipedia::after{ content:"Cesare Fiorio · Wikipedia"; }

/* ============================================================
   LIGHTBOX (sostituisce Fancybox: a.lightbox / a.media)
   ============================================================ */
.cam-lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  padding:30px;
}
.cam-lightbox img, .cam-lightbox iframe{
  max-width:min(1100px,92vw); max-height:86vh;
  border-radius:var(--raggio); box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.cam-lightbox iframe{ width:min(900px,92vw); aspect-ratio:16/9; height:auto; border:0; background:#000; }
.cam-lightbox .cam-chiudi{
  position:absolute; top:18px; right:22px;
  width:44px; height:44px; border:0; border-radius:50%;
  background:var(--oro); color:#fff; font-size:22px; line-height:1;
  cursor:pointer;
}
.cam-lightbox .cam-titolo{
  position:absolute; bottom:20px; left:0; right:0;
  text-align:center; color:#fff; font-size:1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.8); padding:0 30px;
}

/* elementi legacy resi innocui */
.epicFullscreen{ display:none; }

/* ============================================================
   TABLET  (≤ 1000px)
   ============================================================ */
@media (max-width:1000px){
  #logo img{ height:58px; }
  ul.navigation > li > a{ padding:10px 9px; font-size:1.02rem; }
  #grid{ grid-auto-rows:120px; gap:10px; }
}

/* ============================================================
   MOBILE  (≤ 820px) — menu hamburger
   ============================================================ */
@media (max-width:820px){
  #header-inner header{ gap:8px 12px; }
  #logo img{ height:50px; }

  .mobileMenuToggle{ display:block; order:2; margin-left:auto; }

  nav{ order:5; width:100%; }
  ul.navigation{
    display:none;
    flex-direction:column; align-items:stretch; gap:0;
    border-top:1px solid var(--linea);
    padding:6px 0 12px;
  }
  body.nav-aperta ul.navigation{ display:flex; }
  ul.navigation > li > a{
    padding:13px 8px; font-size:1.2rem;
    border-bottom:1px solid var(--linea);
  }
  ul.navigation > li > a:has(img.flag){
    display:inline-block; border-bottom:0; padding:12px 10px;
  }
  /* sottomenu: in colonna, aperti al tocco (li.open dal JS) */
  ul.sub-menu{
    position:static; min-width:0;
    opacity:1; visibility:visible; transform:none;
    display:none;
    border:0; border-left:3px solid var(--oro);
    border-radius:0; box-shadow:none;
    margin:0 0 6px 10px; padding:2px 0;
    background:var(--panna);
  }
  ul.navigation > li.open > ul.sub-menu{ display:block; }
  ul.sub-menu li a{ padding:11px 16px; font-size:1rem; }

  #event_link{ order:3; }
  #promo_link{ order:4; }
  #event_link a, #promo_link a{ font-size:.9rem; padding:7px 13px; }

  #content-wrapper{ padding:22px 14px 44px; }
  #display-image{ margin-bottom:24px; }

  #grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  #grid .thumb,
  #grid .thumb-type-2,
  #grid .thumb-type-3,
  #grid .thumb-type-4{ grid-column:span 1; grid-row:span 2; }
  #grid .thumb-type-2, #grid .thumb-type-3{ grid-column:span 2; }
  #grid .thumb-type-6{ grid-column:1 / -1; }

  .imm_aff_text{ float:none; max-width:100%; margin:0 0 18px; text-align:center; }

  #footer-top footer{ flex-direction:column; text-align:center; }
  .widgettitle{ margin-left:auto; margin-right:auto; }
  #eccellence td{ display:block; padding:10px 0; text-align:center; }
}

/* ============================================================
   TELEFONI PICCOLI (≤ 400px)
   ============================================================ */
@media (max-width:400px){
  body{ font-size:15px; }
  #grid{ grid-template-columns:1fr; }
  #grid .thumb, #grid .thumb-type-2, #grid .thumb-type-3,
  #grid .thumb-type-4, #grid .thumb-type-6{ grid-column:1 / -1; }
  #event_link a, #promo_link a{ font-size:.82rem; padding:6px 11px; }
}