/* Dentro&Fuori: loghi vettoriali e footer (Mockup 1 approvato il 2/11/2026).
   Caricato in header.php dopo wp_head(), quindi prevale sul CSS del tema.
   Il tema impila i due loghi fino a 850 px e li affianca da 851 px (h_style.css). */

/* Header: un solo blocco blu, senza filo chiaro tra marchio e scritta */
#h_logo_def,
#h_logo_def_scritta,
#h_spacer {
	background: #005daa !important;
	border: 0 !important;
	outline: 0 !important;
}
@media (min-width: 851px) {
	#h_logo_def { position: relative; z-index: 1; box-shadow: 1px 0 0 #005daa; }
}
@media (max-width: 850px) {
	#h_logo_def { box-shadow: 0 1px 0 #005daa; }
	#h_spacer,
	#h_logo_def_scritta { margin-top: -1px !important; }
}

/* Footer: stessa larghezza dell'header (1010 px), colonne bilanciate */
.site_footer { padding: 28px 0 22px; }
.site_footer > .container { width: 1010px; max-width: calc(100% - 36px); margin: 0 auto; padding: 0; box-sizing: border-box; }
.site_footer .first_footer_row { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0; }
.site_footer .first_footer_row::before,
.site_footer .first_footer_row::after,
#ciao::before,
#ciao::after { display: none !important; }
.site_footer .first_footer_row > .widget_area { float: none; width: auto; padding: 0; margin: 0; }
#first_footer_widget { flex: 0 0 220px; }
#second_footer_widget { flex: 0 1 400px; }
#third_footer_widget { flex: 0 0 280px; }

/* Logo del footer: lo stesso marchio dell'header, sullo sfondo scuro ("Cernusco" grigio chiaro) */
#media_image-2 { display: flex; justify-content: center; }
#media_image-2 img { display: none !important; }
#media_image-2::before {
	content: "";
	display: block;
	width: 174px;
	height: 150px;
	background: url("loghi_banner/logo-def-footer.svg?v=20261102") center / contain no-repeat;
}

#text-3 .textwidget p { margin: 0; line-height: 1.75; }
#text-8 .textwidget > p { display: none; }
#text-8 .textwidget { display: flex; flex-direction: column; gap: 10px; }
#text-8 .textwidget > div {
	background: #1f1f1f !important;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	padding: 11px 12px !important;
	box-sizing: border-box;
	transition: border-color .15s, background-color .15s;
}
#text-8 .textwidget > div:hover { border-color: #005daa; background: #16263a !important; }

/* Barra del copyright: testo allineato ai bordi di header e footer */
#ciao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 14px max(18px, calc((100% - 1010px) / 2)) 12px !important;
}
#ciao #footerC,
#ciao #contatoreVisite,
#ciao #footerP { float: none !important; margin: 0 !important; width: auto !important; padding: 0 !important; }

/* Tablet (768-989 px): logo e dati affiancati, i tre pulsanti in riga sotto */
@media (min-width: 768px) and (max-width: 989px) {
	.site_footer .first_footer_row { flex-wrap: wrap; justify-content: flex-start; row-gap: 24px; }
	#first_footer_widget { flex: 0 0 220px; }
	#second_footer_widget { flex: 1 1 0; min-width: 0; }
	#third_footer_widget { flex: 1 0 100%; }
	#text-8 .textwidget { flex-direction: row; }
	#text-8 .textwidget > div { flex: 1 1 0; width: auto !important; }
}

/* Telefono: tutto in colonna, copyright compatto come prima */
@media (max-width: 767px) {
	.site_footer .first_footer_row { flex-direction: column; align-items: stretch; gap: 22px; }
	#first_footer_widget,
	#second_footer_widget,
	#third_footer_widget { flex: none; }
	#second_footer_widget { text-align: center; }
	#ciao { display: block; text-align: left; padding: 15px 18px 10px !important; }
	#ciao #footerP { text-align: left; }
}

/* ============================================================================
   Mockup 1 v5 (approvato il 2/11/2026): angoli vivi, manchette a tutto spazio,
   contatore Histats centrato, barra in alto bianca con pulsanti, spaziature.
   Selettori con ":root body" = stessa precedenza provata nel mockup.
   ============================================================================ */
/* Angoli vivi sui loghi */
:root body #h_logo_def,:root body #h_logo_def_scritta{border-radius:0 !important}

/* Manchette: riempie lo spazio a destra dei loghi (il tema la limitava a 350 px e la staccava di 20).
   Tocca il blocco blu, finisce allineata a banner top e menu, alta 150 px come i loghi. */
@media (min-width:851px){
  :root body #bannerSide{padding-left:0 !important;max-width:none !important;margin-right:0 !important}
  :root body #spacerManchette{display:none !important}
  :root body #bannerSide a{display:block;line-height:0}
  :root body #bannerSide img{display:block;width:100% !important;height:150px !important;object-fit:fill}
}
/* 851-999 px: colonna stretta; per non tagliare le manchette (fino al 22% ai lati) si tengono le proporzioni
   originali e la manchette si centra in verticale rispetto ai loghi. */
@media (min-width:851px) and (max-width:999px){
  :root body #bannerSide{display:flex;align-items:center;height:150px}
  :root body #bannerSide > div{height:auto !important}
  :root body #bannerSide img{height:auto !important}
}
:root body #bannerSide a img,:root body #h_banner a img{vertical-align:top}
@media (max-width:599px){
  :root body #bannerSide{max-width:none !important;padding-left:0 !important}
  :root body #bannerSide img{display:block;width:100% !important;height:auto !important}
}

/* Barra del copyright: contatore Histats esattamente al centro (da 990 px; sotto, il copyright andrebbe a capo) */
@media (min-width:990px){
  :root body #ciao{display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px}
  :root body #ciao #footerC{justify-self:start}
  :root body #ciao #contatoreVisite{justify-self:center}
  :root body #ciao #footerP{justify-self:end;text-align:right}
}

/* Barra in alto: STESSA ALTEZZA di oggi (32 px; 54 px sul telefono), fondo bianco,
   data con icona, Scrivici e Abbonati come pulsanti arrotondati nel blu della testata (#005daa). */
:root body #h_top_bar{background:#fff !important;border-bottom:1px solid #e5e7eb !important}
:root body #h_last_update span{color:#374151 !important}
:root body #h_last_update em{font-style:normal}
:root body #h_last_update b{font-weight:600;letter-spacing:.04em}
:root body #h_last_update span::before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;color:#005daa;margin-right:7px;letter-spacing:0}
:root body #h_top_button > a{text-decoration:none}
:root body #h_button_scrivici,:root body #h_button_abbonati{box-sizing:border-box;height:24px;padding:0 14px !important;border:1px solid #005daa !important;border-radius:999px;background:#fff !important;display:flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s}
:root body #h_button_scrivici span,:root body #h_button_abbonati span{color:#005daa !important;font-size:11px !important;font-weight:600;letter-spacing:.07em;line-height:1}
:root body #h_button_scrivici span::before{content:"\f0e0";font-family:FontAwesome;margin-right:6px;letter-spacing:0;font-weight:normal}
:root body #h_button_abbonati{background:#005daa !important}
:root body #h_button_abbonati span{color:#fff !important}
:root body #h_button_abbonati span::before{content:"\f1ea";font-family:FontAwesome;margin-right:6px;letter-spacing:0;font-weight:normal}
:root body #h_button_scrivici:hover{background:#e8f1fa !important}
:root body #h_button_abbonati:hover{background:#004a88 !important;border-color:#004a88 !important}
@media (min-width:715px){
  :root body #h_top_bar{display:flex !important;align-items:center;justify-content:space-between;height:32px;box-sizing:border-box;padding:0 max(18px, calc((100% - 1010px) / 2))}
  :root body #h_last_update{float:none !important;width:auto !important;padding:0 !important;margin:0 !important}
  :root body #h_top_button{width:auto !important;margin:0 !important;display:flex;gap:8px}
  :root body #h_button_scrivici,:root body #h_button_abbonati{width:auto !important;margin:0 !important;float:none !important}
}
@media (max-width:714px){
  :root body #h_top_bar{height:auto;box-sizing:border-box;overflow:hidden;padding:10px 0 6px;margin-top:0 !important}
  :root body #h_last_update{height:20px !important;margin-bottom:5px !important;padding:0 !important;display:flex;align-items:center;justify-content:center}
  :root body #h_top_button{display:flex;gap:8px;padding:0 18px;box-sizing:border-box;height:24px}
  :root body #h_top_button > a{flex:1 1 0}
  :root body #h_button_scrivici,:root body #h_button_abbonati{width:100% !important;margin:0 !important;float:none !important}
  :root body #h_last_update span{font-size:11.5px !important}
  :root body #h_button_scrivici span,:root body #h_button_abbonati span{font-size:10.5px !important}
}

/* ===== Solo telefono e tablet verticale (loghi impilati, fino a 850 px) ===== */
@media (max-width:850px){
  /* Blu della scritta allungato in basso: sotto "L'informazione locale" lo stesso spazio che c'e' sopra la D&F (15,5 px) */
  :root body #h_logo_def_scritta{padding-bottom:6px !important}
  /* Manchette attaccata al blocco blu (prima 8 px bianchi) */
  :root body #spacerManchette{display:none !important}
}
/* Barra della data sul telefono: una sola riga, in basso */
@media (max-width:714px){
  :root body{border-top:0 !important}
  :root body #page{border-top:0 !important}
  :root body #h_last_update,:root body #h_top_button{border:0 !important}
}

/* Spazio fra la barra della data e i loghi = spazio fra il menu e la foto del primo articolo */
:root body #h_top_bar + br{display:none}
:root body #h_container{margin-top:19px}
/* il tema passa al menu da telefono a 900 px (responsive.css) */
@media (max-width:900px){
  :root body #h_container{margin-top:18px}
}

/* Fascia 1041-1099 px: responsive.css del tema forza .container{width:100% !important} fino a 1080 px
   (e il corpo non e' ancora "boxed" fino a 1100). Footer e menu restano larghi quanto il logo (max 1010 px). */
:root body .site_footer > .container{max-width:min(1010px, calc(100% - 36px)) !important}
:root body .main_menu_area_container.desktop_menu{max-width:1046px;margin-left:auto;margin-right:auto;box-sizing:border-box}
/* Tablet (600-989 px): la barra del menu (icona) era larga 630 px e centrata; ora larga quanto il logo, come sul telefono */
:root body .mobile_menu_icon #responsive_menu_button{width:auto !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box}

/* Giunta blu/manchette senza filo bianco.
   1) Il confine cade a meta' pixel (es. 871,5 px): il blu continua 1 px sotto la manchette.
   2) Alcune manchette hanno nel file un filo bianco di 1-2 px al bordo (Sala Luciano, Autocogliati, Mattavelli,
      Perego Tende): la manchette sta in un riquadro che taglia 1 px per lato e l'immagine e' 2 px piu' grande.
   Il riquadro resta alto 150 px come i loghi (computer) e attaccato al blu. */
@media (min-width:851px){
  :root body #h_logo_def_scritta{box-shadow:1px 0 0 #005daa !important}
  :root body #bannerSide{position:relative;z-index:2}
  :root body #bannerSide a{display:block;overflow:hidden;line-height:0}
  :root body #bannerSide img{float:none !important;max-width:none !important;width:calc(100% + 2px) !important;margin:0 0 0 -1px !important}
}
@media (min-width:1000px){
  :root body #bannerSide a{height:150px}
  :root body #bannerSide img{height:152px !important;margin:-1px 0 0 -1px !important}
}
@media (max-width:850px){
  :root body #h_logo_def_scritta{box-shadow:0 1px 0 #005daa !important}
  :root body #bannerSide{position:relative;z-index:2}
  :root body #bannerSide a{display:block;overflow:hidden;line-height:0}
  :root body #bannerSide img{float:none !important;max-width:none !important;width:calc(100% + 2px) !important;height:auto !important;margin:-1px 0 -1px -1px !important}
}

/* Pulsante arancione "torna su" in basso a destra: tolto */
:root body .gototop_button,:root body #gototop{display:none !important}