/* =========================================================
   GORIZIAMIA – user.css (pulito e ottimizzato)
   Template: cassiopeia_extended

   OBIETTIVI:
   - Topbar “stile Joomla 1.5” (desktop)
   - Topbar centrata come il sito e fixed su desktop
   - Mobile: menu in 1 riga scrollabile, topbar sticky (non fixed)
   - iPad verticale (768px): NON deve usare le regole “mobile”
   - Banner full-width, senza tagli:
       * desktop: altezza controllata con variabile
       * mobile: altezza automatica (niente “spazio bianco”)
   - Spaziature: ridotti stacchi tra banner e contenuti
   ========================================================= */


/* =========================================================
   0) VARIABILI GLOBALI RESPONSIVE (una sola volta)
   ========================================================= */
:root{
  /* Larghezza “foglio”/contenuto (desktop) */
  --gm-site-w: 1440px;

  /* Altezza menu topbar (desktop) */
  --gm-topbar-h: 56px;

  /* Altezza banner (desktop) */
  --gm-banner-h: 250px;

  /* Colori */
  --gm-red: #b60000;
  --gm-dark: #3f3f3f;
  --gm-border: #cfcfcf;
}

/* =========================================================
   BREAKPOINTS CORRETTI
   - MOBILE:   fino a 767.98px  (iPhone, Android, ecc.)
   - TABLET:   768px → 991.98px (iPad verticale incluso)
   ========================================================= */

/* TABLET / laptop piccoli (iPad compreso) */
@media (min-width: 768px) and (max-width: 991.98px){
  :root{
    --gm-site-w: 100%;
    --gm-topbar-h: 52px;
    --gm-banner-h: 300px;
  }
}

/* SMARTPHONE (IMPORTANTE: 767.98 così iPad 768 NON entra qui) */
@media (max-width: 767.98px){
  :root{
    --gm-site-w: 100%;
    --gm-topbar-h: 48px;
    --gm-banner-h: 240px; /* qui serve poco: su mobile usiamo height:auto */
  }
}

/* SCHERMI GRANDI */
@media (min-width: 1600px){
  :root{
    --gm-site-w: 1560px;
    --gm-banner-h: 420px;
  }
}

/* SCHERMI MOLTO GRANDI (opzionale) */
@media (min-width: 1920px){
  :root{
    --gm-site-w: 1720px;
    --gm-banner-h: 450px;
  }
}


/* =========================================================
   1) HEADER / BRANDING CASSIOPEIA (pulizia)
   ========================================================= */
header .navbar-brand,
header .site-title,
header .site-description{
  display: none !important;
}
.header,
.container-header{
  background: #fff !important;
  background-image: none !important;
}


/* =========================================================
   2) TOPBAR (DESKTOP/TABLET) – fixed e centrata come il sito
   (NOTA: su MOBILE la rendiamo sticky nel blocco dedicato)
   ========================================================= */
.header .container-topbar{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--gm-site-w));
  z-index: 99999;

  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);

  /* colore base testo menu (usa currentColor nei link) */
  color: #111 !important;
}

/* Il banner (below-top) deve partire sotto al menu fixed */
.header .container-below-top{
  margin-top: var(--gm-topbar-h) !important;
}


/* =========================================================
   3) MENU TOPBAR – stile tipo Joomla 1.5 (desktop/tablet)
   ========================================================= */
.container-topbar ul.mod-menu{
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important;

  margin: 0 auto !important;
  padding: 0 12px !important;

  list-style: none !important;
}

.container-topbar ul.mod-menu > li > a{
  display: block !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;

  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

.container-topbar ul.mod-menu > li > a:hover,
.container-topbar ul.mod-menu > li > a:focus{
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  background: #e9e9e9 !important;
  text-decoration: none !important;
  box-shadow: inset 0 -3px 0 var(--gm-red);
}

.container-topbar ul.mod-menu > li.active{
  color: #fff !important; /* currentColor = bianco */
}
.container-topbar ul.mod-menu > li.active > a,
.container-topbar ul.mod-menu > li.active > a:hover,
.container-topbar ul.mod-menu > li.active > a:focus,
.container-topbar ul.mod-menu > li > a[aria-current="page"],
.container-topbar ul.mod-menu > li > a[aria-current="page"]:hover,
.container-topbar ul.mod-menu > li > a[aria-current="page"]:focus{
  background: var(--gm-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
}


/* =========================================================
   4) BANNER (below-top) – full width + “contained”
   ========================================================= */

/* Contenitore below-top full width e senza stacco sotto */
.header .container-below-top{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Il modulo custom dentro below-top deve occupare tutta la larghezza */
.header .container-below-top .mod-custom{
  width: 100% !important;
  margin: 0 !important;
}

/* Desktop/Tablet: altezza controllata da variabile (immagine centrata senza crop) */
.gm-banner{
  width: 100%;
  background: #fff;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;

  height: var(--gm-banner-h);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Immagine: sempre tutta visibile, proporzionale */
.gm-banner img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}


/* =========================================================
   5) SPAZIATURE: riduci “stacco” tra banner e contenuti
   ========================================================= */
.site-grid{
  padding-top: 0 !important;
}
.site-grid .container-component{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   6) BOX LATERALI stile Joomla 1.5 (gm-box)
   ========================================================= */
.gm-box{
  border: 1px solid var(--gm-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}

.gm-box > h3{
  margin: 0 !important;
  padding: 10px 14px !important;
  background: var(--gm-dark);
  color: #fff !important;
  font-weight: 700 !important;
}

.gm-box .module-content,
.gm-box .mod-custom,
.gm-box .mod-articleslatest,
.gm-box .mod-menu{
  padding: 12px 14px;
}


/* =========================================================
   7) Sidebar-right come gm-box (card)
   ========================================================= */
.grid-child.container-sidebar-right > .sidebar-right.card.gm-box{
  border: 1px solid var(--gm-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
}
.grid-child.container-sidebar-right > .sidebar-right.card.gm-box > .card-header{
  margin: 0 !important;
  padding: 10px 14px !important;
  background: var(--gm-dark) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.grid-child.container-sidebar-right > .sidebar-right.card.gm-box > .card-body{
  padding: 12px 14px !important;
}


/* =========================================================
   8) Notizie flash (gm-flash)
   ========================================================= */
.gm-flash{
  font-size: 0.95rem;
  line-height: 1.35;
}
.gm-flash a{
  font-weight: 700;
  text-decoration: none;
}
.gm-flash a:hover{
  text-decoration: underline;
}
.gm-flash p{
  margin: 0.35rem 0 0.8rem 0;
}


/* =========================================================
   9) SONDAGGI (SP Poll) – se è l’ULTIMO box in sidebar-right
   ========================================================= */
.grid-child.container-sidebar-right > .sidebar-right.card:last-child{
  border: 1px solid var(--gm-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
}
.grid-child.container-sidebar-right > .sidebar-right.card:last-child > .card-header{
  margin: 0 !important;
  padding: 10px 14px !important;
  background: var(--gm-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.grid-child.container-sidebar-right > .sidebar-right.card:last-child > .card-body{
  padding: 12px 14px !important;
}
.grid-child.container-sidebar-right > .sidebar-right.card:last-child button,
.grid-child.container-sidebar-right > .sidebar-right.card:last-child input[type="submit"]{
  background: #083 !important; /* verde scuro (puoi cambiare) */
  border-color: var(--gm-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.mod-sppoll .sppoll-actions{
  padding: 12px 14px;
}
.mod-sppoll .sppoll-actions .btn{
  width: 100%;
}


/* =========================================================
   10) Bottone “Chiudi” articolo (se presente)
   ========================================================= */
.gm-article-close{
  text-align: right;
}


/* =========================================================
   11) Box con testata ROSSA (gm-redbox)
   ========================================================= */
.gm-redbox{
  border: 1px solid var(--gm-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.gm-redbox > .card-header,
.gm-redbox > h3,
.gm-redbox .card-header{
  background: var(--gm-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
}
.gm-redbox > .card-body,
.gm-redbox .card-body,
.gm-redbox .module-content{
  padding: 12px 14px !important;
}


/* =========================================================
   12) Bottom-a: 3 colonne desktop, 1 mobile
   ========================================================= */
.grid-child.container-bottom-a{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 24px;
  align-items: stretch;
}
.grid-child.container-bottom-a .gm-bottombox{
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}
.grid-child.container-bottom-a .gm-bottombox:last-of-type{
  margin-left: auto;
}
@media (max-width: 991.98px){
  .grid-child.container-bottom-a{
    justify-content: flex-start;
  }
  .grid-child.container-bottom-a .gm-bottombox{
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
}


/* =========================================================
   13) MOBILE (SMARTPHONE) – menu 1 riga scrollabile + banner senza “bianco”
   (IMPORTANTE: max-width 767.98px, così iPad verticale NON entra)
   ========================================================= */
@media (max-width: 767.98px){

  /* Topbar: sticky (non fixed) e a larghezza piena */
  .header .container-topbar{
    position: sticky !important;
    top: 0 !important;

    left: auto !important;
    transform: none !important;
    width: 100% !important;

    padding: 0 !important;
  }

  /* Se la topbar non è fixed, il banner non va “spinto” sotto */
  .header .container-below-top{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Menu: 1 riga con scroll orizzontale */
  .container-topbar ul.mod-menu{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 6px 8px !important;
    gap: 6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
  }
  .container-topbar ul.mod-menu > li{
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .container-topbar ul.mod-menu > li > a{
    display: inline-block !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border-radius: 8px !important;
  }

  /* Banner: su mobile altezza AUTO (così niente spazi bianchi sopra/sotto) */
  .gm-banner{
    height: auto !important;
    display: block !important;
    line-height: 0 !important;
  }
  .gm-banner img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }

  /* Breadcrumbs: più compatti (facoltativo) */
  .mod-breadcrumbs,
  nav.breadcrumbs,
  .breadcrumb{
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
/* =========================================================
   FIX TABLET + MOBILE (<= 991.98px)
   - evita menu verticale su iPad
   - topbar sticky (non fixed) per non “mangiarsi” la testata
   - menu 1 riga scrollabile
   ========================================================= */
@media (max-width: 991.98px){

  /* 1) Topbar: NON fixed su tablet/mobile */
  .header .container-topbar{
    position: sticky !important;
    top: 0 !important;

    left: auto !important;
    transform: none !important;
    width: 100% !important;

    z-index: 99999;
    padding: 0 !important;
  }

  /* 2) Se topbar non è fixed, NON spingere il banner sotto */
  .header .container-below-top{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3) Menu: forza riga unica + scroll orizzontale (mai verticale) */
  .container-topbar ul.mod-menu{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
  }

  .container-topbar ul.mod-menu > li{
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-topbar ul.mod-menu > li > a{
    display: inline-block !important;
    padding: 10px 12px !important;
    line-height: 1.1 !important;
    border-radius: 10px !important;
  }

  /* 4) Banner: su tablet/mobile meglio senza “contenitore alto fisso” */
  .gm-banner{
    height: auto !important;
    display: block !important;
    line-height: 0 !important;
  }
  .gm-banner img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }
}

/* (opzionale) smartphone: testo menu un filo più piccolo */
@media (max-width: 767.98px){
  .container-topbar ul.mod-menu > li > a{
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
}