/* ==========================================================================
   Ozero Komo — stile principale.
   Colori, font e misure presi dal template Megagroup originale
   (styles.scss.css, template v254). L'originale è a larghezza fissa 940 px:
   qui la stessa griglia diventa fluida sotto quella soglia.
   ========================================================================== */

:root {
	--blue:        #0673ba;  /* link e titoli dei blocchi */
	--blue-menu:   #0573b9;  /* barra del menu e pulsanti */
	--blue-dark:   #055c95;  /* menu al passaggio del mouse */
	--blue-footer: #0586dc;  /* link nel footer */
	--page:        #f6f6f6;
	--white:       #fff;
	--ink:         #333;
	--ink-logo:    #3c3e40;
	--ink-soft:    #404040;
	--ink-contact: #323232;
	--rule:        #d5d5d5;
	--footer-bg:   #343434;
	--footer-rule: #5d5d5d;
	--footer-text: #bebebe;
	--footer-dim:  #cdcdcd;

	--font: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--wrap: 940px;   /* larghezza del contenuto nell'originale */
	--menu: 990px;   /* la barra del menu è leggermente più larga */
	--pad:  20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	overflow-x: hidden; /* il blocco schede esce dal contenitore: evita la barra orizzontale */
	background: var(--page);
	color: var(--ink);
	font: 13px/1.45 var(--font);
}

img, video, iframe { max-width: 100%; height: auto; }
iframe { border: 0; }

a { color: var(--blue); text-decoration: underline; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--ink); font-weight: normal; text-transform: uppercase; }
h1 { margin-top: 0; font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.icon { fill: currentColor; flex: none; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; padding: 8px 14px; }
.skip-link:focus { left: 10px; }

/* ---------------------------------------------------------------- Intestazione */

/* top-bg.jpg del template: panorama sfumato dietro l'intestazione. */
/* top-bg.jpg è una striscia alta 210 px: ancorata in alto lascia una riga bianca
   netta a metà intestazione appena l'intestazione è più alta di così.
   Ancorandola in basso si salda al menu blu, e su schermi stretti viene ingrandita
   per coprire tutta l'altezza. */
.site-header {
	background: var(--white) url(../img/top-bg.jpg) no-repeat 50% 100%;
	background-size: auto 210px;
}
.site-header__in {
	position: relative;
	display: grid;
	/* Il blocco e-mail/skype è l'ultimo e serve più largo del telefono,
	   altrimenti l'indirizzo va a capo in mezzo alla parola. */
	grid-template-columns: minmax(0, 1fr) 180px 235px;
	align-items: start;
	gap: 10px 30px;
	min-height: 180px;
	align-content: center;
	padding-block: 56px 30px;
}
.site-header p { margin: 0; }

.site-logo a { display: block; text-decoration: none; color: var(--ink-logo); letter-spacing: .2px; }
.site-logo p { font: bold 25px/1.2 var(--font); }
.site-logo span { display: block; margin-top: 2px; letter-spacing: 0; font: normal 13px/1.4 var(--font); color: var(--ink-soft); }

.site-lang { position: absolute; top: 16px; right: var(--pad); display: flex; gap: 4px; }
.site-lang a {
	display: block; padding: 0;
	font: bold 11px/1.5 var(--font); letter-spacing: .5px; text-align: center;
	color: var(--ink-contact); text-decoration: none;
}
.site-lang img { display: block; width: 32px; height: 32px; }
.site-lang a[aria-current] { opacity: .55; }
/* Senza bandierina resta il codice della lingua in un riquadro. */
.site-lang a:not(:has(img)) { min-width: 26px; padding: 2px 6px; border: 1px solid var(--rule); }
.site-lang a:not(:has(img))[aria-current] { background: var(--blue-menu); border-color: var(--blue-menu); color: #fff; opacity: 1; }

/* Telefono e contatti con le icone del template (tel-icon.png, adr-icon.png). */
.top-site-phone, .top-adres { position: relative; padding-left: 40px; color: var(--ink-contact); }
.contact-icon { position: absolute; left: 0; top: 4px; width: 27px; height: 28px; }
.top-site-phone { font: bold 16px/1.3 var(--font); }
.top-site-phone .tel-title { font: normal 13px/1.3 var(--font); padding-bottom: 2px; }
.top-site-phone a { color: var(--ink-contact); text-decoration: none; }
.top-site-phone a:hover { text-decoration: underline; }

.top-adres { font: 13px/1.5 var(--font); }
.top-adres p { margin: 0 0 1px; }
/* L'indirizzo e-mail è lungo: su colonne strette va spezzato invece di uscire. */
.top-adres a, .top-adres2 a, .mgi-contacts a, .entry-content a { overflow-wrap: break-word; }
.top-adres a { color: var(--blue); text-decoration: none; }
.top-adres a:hover { text-decoration: underline; }
.top-social { display: flex; gap: 6px; margin-top: 6px !important; }
.top-social a { display: block; line-height: 0; }
.top-social img { display: block; width: 16px; height: 16px; }
.top-social a:hover { opacity: .75; }

.nav-toggle {
	display: none; align-items: center; gap: 6px;
	font: bold 14px var(--font); color: #fff; background: var(--blue-menu);
	border: 0; padding: 10px 14px; cursor: pointer;
}

/* ---------------------------------------------------------------- Menu */

.top-menu-wr { background: var(--blue-menu); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.top-menu-wr > .wrap { max-width: var(--menu); padding-inline: 0; }
.top-menu-wr .top-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.top-menu-wr li { position: relative; display: flex; align-items: stretch; }
/* Separatore verticale fra le voci, come mt-del.png dell'originale. */
.top-menu-wr .top-menu > li + li::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 28px; background: rgba(255,255,255,.18);
}
.top-menu-wr a { display: block; padding: 23px 24px; color: #fefefe; font: 15px/1 var(--font); text-decoration: none; }
.top-menu-wr .top-menu > li > a:hover,
.top-menu-wr .current-menu-item > a,
.top-menu-wr .current-menu-ancestor > a { background: var(--blue-dark); }
.top-menu-wr .top-menu > li.menu-item-has-children > a { padding-right: 8px; }

.sub-toggle { display: grid; place-items: center; width: 28px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; }
.sub-toggle .icon { transition: transform .2s; }
.sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.top-menu-wr .sub-menu {
	display: none; margin: 0; padding: 20px 0; list-style: none;
	position: absolute; left: 0; top: 100%; z-index: 999;
	width: 296px; background: var(--blue);
	border-top: 2px solid rgba(255,255,255,.25);
}
.top-menu-wr .sub-menu a { padding: 7px 20px; font-size: 14px; }
.top-menu-wr .sub-menu a:hover,
.top-menu-wr .sub-menu .current-menu-item > a { background: var(--blue-dark); }

@media (hover: hover) and (min-width: 62.0625em) {
	.top-menu-wr li:hover > .sub-menu { display: block; }
}
.top-menu-wr li:focus-within > .sub-menu,
.top-menu-wr li.is-open > .sub-menu { display: block; }

/* ---------------------------------------------------------------- Foto grande con riquadro */

.top-pic-block { position: relative; background: #1b3c52; }
.top-pic-block > img { display: block; width: 100%; height: auto; }
/* Sotto i 940 px la fascia si abbassa in proporzione: 430 px su un telefono
   sono quasi uno schermo intero di sola foto. */
.top-pic-block--band > img { height: var(--hero-h, 430px); max-height: 56vh; object-fit: cover; object-position: 50% 50%; }

.top-block-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
/* Riquadro "Озеро Комо": nell'originale è a destra, allineato a destra, bianco sulla foto. */
.top-block-in .home-facts {
	pointer-events: auto;
	width: 340px; max-width: 100%;
	margin: 0;
	text-align: right;
	color: #fff;
	font: normal 15px/1.25 var(--font);
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.top-block-in .home-facts p { margin: 0 0 6px; }
.top-block-in .home-facts .home-facts__title {
	display: inline-block;
	margin-bottom: 12px; padding: 0 0 6px 12px;
	font: normal 33px/1.1 var(--font); text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,.3);
}
/* Il link "подробнее ..." è il pulsante dell'originale. */
.top-block-in .home-facts a {
	display: inline-block; width: 120px; height: 30px;
	margin-top: 8px;
	background: var(--blue-menu); box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
	color: #fff; font: normal 13px/30px var(--font); text-align: center; text-decoration: none;
	text-shadow: none;
}
.top-block-in .home-facts a:hover { background: var(--blue-dark); }

/* ---------------------------------------------------------------- Contenuto */

.site-main > .wrap { padding-block: 0 20px; }

/* Pagine interne: riquadro bianco con angoli arrotondati. */
.entry { background: var(--white); padding: 27px 28px; border-radius: 5px; }

.crumbs { padding: 12px 0 8px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 12px; }
.crumbs li + li::before { content: "\\"; margin: 0 6px; color: #888; }

/* .seo_text dell'originale: testo 18px giustificato. */
.entry-content { font: 18px/1.5 var(--font); text-align: justify; }
.entry-content p { margin: 0 0 1em; }
.entry-content ul, .entry-content ol { margin: 0 0 1em; padding-left: 22px; }
/* .seo_h2 / .seo_h3: blu, centrati, con filetto sotto. */
.entry-content h2, .entry-content h3 {
	margin: 16px 0; text-align: center; text-transform: none;
	font-weight: bold; color: var(--blue-menu);
	border-bottom: 2px solid var(--blue-dark);
}
.entry-content h2 { font-size: 22px; padding: 12px 15px 4px; }
.entry-content h3 { font-size: 20px; padding: 12px 15px; }
.entry-content img { border-radius: 3px; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* Tabelle come .table0 dell'originale. */
.table-scroll { overflow-x: auto; margin-bottom: 1em; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content td, .entry-content th { padding: .5em; vertical-align: top; text-align: left; }

/* Gallerie create dall'import (sequenze di miniature). */
.mgi-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.mgi-gallery a, .mgi-gallery > img { display: block; position: relative; width: 170px; max-width: calc(50% - 5px); }
.mgi-gallery img { display: block; width: 100%; height: auto; border: 2px solid var(--blue-menu); border-radius: 0; }
/* Velo scuro al passaggio del mouse, come .spec-pic dell'originale. */
.mgi-gallery a::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(0,0,0,.58); opacity: 0; transition: opacity .3s;
}
.mgi-gallery a:hover::after { opacity: 1; }

/* Blocco contatti (.seo-phone): largo 631 px, centrato, testo 19 px nero. */
.entry-content .mgi-contacts {
	display: grid; grid-template-columns: auto 243px auto 243px;
	justify-content: center; align-items: start; gap: 8px 4px;
	width: 100%; max-width: 631px; margin: 0 auto; padding: 30px 0 0;
	background: none; border-radius: 0;
	font: 19px/22px var(--font); color: #000; text-align: left;
}
.mgi-contacts img { width: auto; max-height: 56px; margin: 13px 4px 5px 0; }
.mgi-contacts > div { width: 243px; }

/* ------------------------------------------- Home (blocchi .top-edit e .cont-block) */

/* Nell'originale il testo della home è centrato, su fondo bianco a tutta larghezza. */
.entry--home { background: var(--white); border-radius: 0; padding: 42px 0 0; text-align: center; }
.entry--home > .wrap { padding-inline: var(--pad); }
.entry--home .entry-content a { text-decoration: none; }
.entry--home .entry-content a:hover { text-decoration: underline; }

/* Titolo della home: etichetta blu centrata con la riga orizzontale dietro. */
.entry--home .entry-title {
	position: relative; display: block; margin: 0 0 17px;
	font: normal 19px/1.3 var(--font); color: var(--blue); text-transform: none;
}
.entry--home .entry-title:has(> span)::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--rule); }
.entry--home .entry-title > span { position: relative; z-index: 1; display: inline-block; padding: 5px 18px; background: var(--white); }

/* Poesia di apertura (.seo-1/.seo-2/.seo-3): cornice blu 3 px, testo blu in corsivo
   centrato. Nell'originale dietro c'è una foto del lago al 10% di opacità: si imposta
   da Personalizza → Contatti e footer, altrimenti resta il fondo chiaro. */
.home-poem {
	position: relative; isolation: isolate; border: 0;
	margin: 23px 0 46px; padding: 38px 3px;
	color: var(--blue-menu);
	font: italic 18px/1.5 var(--font);
	text-align: center;
}
/* Nell'originale cornice e foto stanno su un livello al 10% di opacità,
   quindi si vedono appena: niente bordo pieno. */
.home-poem::before {
	content: ""; position: absolute; inset: 10px 0 -19px; z-index: -1;
	border: 3px solid #0b77a4;
	background: var(--poem-bg, #dfeaf2) 50% / cover no-repeat;
	opacity: .1;
}
.home-poem p { margin: 0 0 .35em; }

/* Galleria della home (.spec2 .spec-pic): 252×218 con bordo blu 2 px. */
.entry--home .mgi-gallery { gap: 4px 36px; margin: 20px 0 24px; }
.entry--home .mgi-gallery a, .entry--home .mgi-gallery > img { width: 252px; max-width: calc(50% - 18px); }
.entry--home .mgi-gallery img { height: 218px; object-fit: cover; border: 2px solid var(--blue-menu); border-radius: 0; }
.entry--home .mgi-gallery a::after { border-radius: 0; }

.entry--home .mgi-gallery { justify-content: center; }
.entry--home .mgi-contacts { display: inline-grid; margin-inline: auto; }

/* Blocco schede: esce dal riquadro bianco e riprende il grigio della pagina. */
.entry-content .home-cards-block {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%) 11px;
	background: var(--page);
}
.entry-content .home-cards-block > * { max-width: var(--wrap); margin-inline: auto; }

/* Titolo del blocco schede: maiuscolo, centrato, riga orizzontale dietro. */
.entry-content .home-cards__title {
	position: relative; margin: 41px 0 0; padding: 0 0 44px;
	font: normal 19px/1.4 var(--font); color: var(--ink); text-transform: uppercase;
}
/* Senza lo <span> (contenuto importato con una versione precedente del plugin) la riga
   attraverserebbe il testo: in quel caso non viene disegnata. */
.entry-content .home-cards__title:has(> span)::before { content: ""; position: absolute; top: 16px; left: 0; right: 0; height: 1px; background: var(--rule); }
.entry-content .home-cards__title:not(:has(> span)) { padding-bottom: 24px; }
.entry-content .home-cards__title > span { position: relative; z-index: 1; display: inline-block; max-width: 512px; padding: 5px 18px; background: var(--page); }
.entry-content .home-cards-block > .home-cards__title { max-width: var(--wrap); }

/* Le tre schede: fondo bianco, foto 290 px, testo a sinistra. */
.entry-content .home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; text-align: left; }
.home-card { display: flex; flex-direction: column; background: var(--white); border-radius: 4px; padding-bottom: 36px; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.home-card__pic { position: relative; display: block; height: 290px; margin-bottom: 27px; overflow: hidden; border-radius: 4px 4px 0 0; }
.home-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card__pic::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .3s; }
.home-card__pic:hover::after { opacity: 1; }
.entry-content .home-card h3 { margin: 0 20px 15px; font: bold 15px/1.3 var(--font); text-transform: uppercase; }
.home-card h3 a { color: var(--blue); text-decoration: none; }
.home-card h3 a:hover { text-decoration: underline; }
.home-card p { margin: 0 20px 12px; }
.home-card p:last-child { margin-top: auto; }
.home-card__more { text-decoration: none; }

/* Riquadro del lago quando manca la foto di testata: resta nel testo. */
.entry-content .home-facts { background: var(--page); border-radius: 4px; padding: 16px 20px; margin: 0 0 20px; }
.entry-content .home-facts .home-facts__title { font: normal 21px var(--font); text-transform: uppercase; margin-bottom: 8px; }

/* ---------------------------------------------------------------- Moduli di contatto

   Colori presi da patch.css (le personalizzazioni fatte su misura per questo sito):
   pulsante verde #3f7734, più chiaro al passaggio del mouse.
   Valgono per i moduli ricostruiti con Contact Form 7 o WPForms. */

.entry-content input[type="text"],
.entry-content input[type="tel"],
.entry-content input[type="email"],
.entry-content textarea,
.entry-content select {
	width: 100%; max-width: 420px; padding: 8px 10px;
	border: 1px solid #c9d4da; background: #fff;
	font: 16px var(--font); color: var(--ink);
}
.entry-content textarea { min-height: 120px; }
/* Pulsante di invio: blu come il modulo della pagina Контакты. */
.entry-content input[type="submit"],
.entry-content button[type="submit"],
.wpcf7-submit {
	display: inline-block; min-width: 120px; padding: 11px 28px;
	background: var(--blue-menu); border: 1px solid var(--blue-menu); border-radius: 2px;
	color: #fff; font: normal 16px var(--font); cursor: pointer;
}
.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover,
.wpcf7-submit:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

/* Variante verde dei popup originali (patch.css), se ti serve: class="ozk-green" */
.entry-content .ozk-green input[type="submit"], .entry-content .ozk-green .wpcf7-submit { background: #3f7734; border-color: #3f7734; }
.entry-content .ozk-green input[type="submit"]:hover, .entry-content .ozk-green .wpcf7-submit:hover { background: rgba(38, 158, 13, .59); }
.entry-content .wpcf7-list-item { margin: 0; }

/* Modulo in due colonne, come il "Оставить заявку" dell'originale. */
.ozk-form { max-width: 631px; margin: 24px auto 0; text-align: left; }
.ozk-form .ozk-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ozk-form label { display: block; font-size: 15px; margin-bottom: 4px; }
.ozk-form .ozk-field { margin-bottom: 14px; }
.ozk-form .ozk-field input, .ozk-form .ozk-field textarea { max-width: 100%; }
.ozk-form .ozk-consent { font-size: 13px; line-height: 1.4; margin: 10px 0 16px; }
.ozk-form .ozk-consent input { width: auto; margin-right: 6px; }
.ozk-form .ozk-required { color: red; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; font-size: 15px; }

@media (max-width: 40em) {
	.ozk-form .ozk-row { grid-template-columns: 1fr; gap: 0; }
}
.entry-content .requi, .entry-content span.red { color: red; }

/* Riquadro promozionale blu con titolo giallo (decor-block-top-frm3 di patch.css). */
.entry-content .decor-block {
	background: rgba(5, 115, 185, .33); color: #fff;
	padding: 18px 20px; margin: 20px 0;
}
.entry-content .decor-block h2,
.entry-content .decor-block h3 { color: #fff; border: 0; margin-top: 0; }
.entry-content .decor-block strong { color: #ffd94f; }
.entry-content .decor-block a { color: #fff; }

/* ---------------------------------------------------------------- Elenchi di articoli

   Da styles_articles_tpl.css: serve se qualche pagina usa i blocchi "articoli". */

.art_h1 { margin: 0; padding: 0 0 10px; font-style: italic; font-size: 23px; }
.art-tpl { margin: 0 auto 10px; }
.art-tpl__title { margin: 0 0 11px; font-size: 22px; }
.art-tpl__title a { text-decoration: none; }
.art-tpl__title a:hover { text-decoration: underline; }
.art-tpl__thumb { float: left; padding: 6px 5px 6px 0; }
.art-tpl__thumb img { border: 0; }
.art-tpl__note { font-size: 12px; line-height: 1.5em; overflow: hidden; }
.art-tpl__inf { margin: 0 0 25px; text-align: left; font-size: 12px; }
.art-tpl__inf .date_art { padding-right: 12px; }
.art-tpl__inf .read_more { padding-left: 12px; }

/* ---------------------------------------------------------------- Pagina contatti

   Riproduce i blocchi della pagina Контакты: icona quadrata blu scuro,
   titolo con filetto azzurro sotto, contenuto rientrato. */

.ozk-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; align-items: start; text-align: left; }

.ozk-cblock { margin-bottom: 26px; }
.ozk-cblock__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ozk-cblock__icon {
	flex: none; display: grid; place-items: center;
	width: 38px; height: 38px; background: #0f2d52; color: #fff; border-radius: 4px;
}
.ozk-cblock__icon .icon { width: 22px; height: 22px; }
/* La specificità deve superare la regola generale .entry-content h2 (seo_h2),
   altrimenti i titoli dei blocchi diventano blu, grassetto e centrati. */
.entry-content .ozk-cblock__title,
.ozk-cblock__title {
	flex: 1; margin: 0; padding: 0 0 6px;
	border: 0; border-bottom: 1px solid var(--blue);
	font: normal 19px/1.2 var(--font); color: var(--ink);
	text-transform: none; text-align: left;
}
.ozk-cblock__body { padding-left: 52px; font-size: 16px; }
.ozk-cblock__body p { margin: 0 0 10px; }

/* La mappa riempie la colonna e resta proporzionata. */
.ozk-map { aspect-ratio: 16 / 10; }
.ozk-map iframe, .ozk-map > div { width: 100%; height: 100%; border: 0; }

@media (max-width: 62em) {
	.ozk-contacts { grid-template-columns: 1fr; }
}
@media (max-width: 40em) {
	.ozk-cblock__body { padding-left: 0; }
}

/* ---------------------------------------------------------------- Lightbox */

.lightbox { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox figure { margin: 0; height: 100%; display: grid; place-items: center; padding: 56px 16px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 112px); object-fit: contain; }
.lightbox button {
	position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1;
}
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox .lb-close { top: 16px; right: 16px; }
.lightbox .lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: 16px; top: 50%; translate: 0 -50%; }

/* ---------------------------------------------------------------- Footer

   Disposizione dell'originale: su desktop i blocchi sono posizionati come nel
   template (nome a sinistra, telefono e contatti a destra, copyright e testo
   legale sotto il filetto); sotto i 940 px diventano una colonna. */

.site-footer { position: relative; background: var(--footer-bg); color: var(--footer-text); margin-top: 20px; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--blue-footer); }
.top-menu-wr--footer { background: rgba(0,0,0,.18); box-shadow: none; }
.top-menu-wr--footer .top-menu { justify-content: center; }
.top-menu-wr--footer .current-menu-item > a { background: none; }
.top-menu-wr--footer a { color: var(--footer-text); padding: 16px 20px; font-size: 14px; }
.top-menu-wr--footer a:hover { background: rgba(255,255,255,.07); color: #fff; }

.site-footer-wr {
	position: relative;
	width: 100%; max-width: var(--wrap); min-height: 230px;
	margin: 0 auto; padding: 58px var(--pad) 24px;
}
/* Filetto orizzontale sopra la riga del copyright. */
.site-footer-wr::after {
	content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 64px;
	height: 1px; background: var(--footer-rule);
}

.bot-name { width: 370px; max-width: 100%; font: bold 20px/1.3 var(--font); color: var(--footer-text); }
.bot-name span { display: block; font: normal 13px/1.4 var(--font); }

/* Telefono e contatti: stesse icone dell'intestazione, schiarite per il fondo scuro. */
.top-site-phone2, .top-adres2 { position: absolute; top: 58px; padding-left: 42px; color: var(--footer-text); }
.top-site-phone2 .contact-icon, .top-adres2 .contact-icon { top: 2px; filter: grayscale(1) brightness(1.9); }
.top-site-phone2 { right: var(--pad); width: 150px; font: bold 16px/1.3 var(--font); }
.top-site-phone2 a { color: var(--footer-text); text-decoration: none; }
.top-site-phone2 a:hover { text-decoration: underline; }
.top-site-phone2 .tel-title { font: normal 12px var(--font); padding-bottom: 3px; }
.top-adres2 { right: 204px; width: 240px; font: 13px/1.5 var(--font); }
.top-adres2 a { color: var(--blue-footer); text-decoration: none; }
.top-adres2 a:hover { text-decoration: underline; }
.bot-social { display: flex; gap: 8px; margin-top: 10px !important; }
.bot-social a { display: block; line-height: 0; }
.bot-social img { display: block; width: 16px; height: 16px; }

.site-name { margin-top: 92px; font: 11px/1.3 var(--font); color: var(--footer-dim); }
.bot-text {
	position: absolute; right: var(--pad); bottom: 24px;
	width: 570px; max-width: calc(100% - 2 * var(--pad));
	text-align: right; font: normal 11px/1.3 var(--font); color: var(--footer-dim);
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 62em) {
	.site-header { background-size: cover; }
	.site-header__in { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; min-height: 0; padding-block: 44px 20px; }
	.site-logo { grid-column: 1; grid-row: 1; }
	/* Il pulsante resta sulla stessa riga del logo, non in fondo all'intestazione. */
	.nav-toggle { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
	.top-site-phone, .top-adres { grid-column: 1 / -1; }

	/* Menu a scomparsa. */
	.top-menu-wr:not(.top-menu-wr--footer) { display: none; }
	.top-menu-wr.is-open { display: block; }
	.top-menu-wr .top-menu { flex-direction: column; }
	.top-menu-wr li { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); }
	.top-menu-wr .top-menu > li + li::before { content: none; }
	.top-menu-wr li > a { flex: 1; padding: 14px var(--pad); }
	.sub-toggle { width: 52px; }
	.top-menu-wr .sub-menu { position: static; flex-basis: 100%; width: auto; padding: 0; border-top: 0; background: var(--blue-dark); }
	.top-menu-wr .sub-menu a { padding-left: calc(var(--pad) + 16px); }
	.top-menu-wr li:focus-within > .sub-menu { display: none; }
	.top-menu-wr li.is-open > .sub-menu { display: block; }

	/* Il riquadro passa sotto la foto. */
	.top-block-in { position: static; }
	.top-block-in .home-facts {
		width: 100%; text-align: left; text-shadow: none;
		background: #1b3c52; padding: 16px var(--pad) 20px;
	}

	.entry-content .mgi-contacts { grid-template-columns: auto 243px; }
	.entry-content .home-cards { grid-template-columns: repeat(2, 1fr); }
	.home-card__pic { height: 220px; }
	/* Footer in colonna: i blocchi escono dal posizionamento assoluto. */
	.site-footer-wr { min-height: 0; padding-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.bot-name { width: auto; }
	.site-footer-wr::after { display: none; }
	/* I due blocchi restano "relative": le loro icone sono posizionate in assoluto
	   e con static finirebbero in cima al footer, sopra il nome. */
	.top-site-phone2, .top-adres2 { position: relative; top: auto; right: auto; width: auto; }
	.bot-text { position: static; width: auto; right: auto; }
	.bot-text { text-align: left; max-width: 100%; }
	.site-name { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--footer-rule); }
}

@media (max-width: 40em) {
	/* Fascia della foto più bassa: 430 px su un telefono riempirebbero mezzo schermo. */
	.top-pic-block--band > img { height: min(var(--hero-h, 430px), 260px); }

	/* Poesia: meno aria intorno, la cornice non sporge oltre il blocco. */
	.home-poem { margin: 16px 0 24px; padding: 24px 12px; }
	.home-poem::before { inset: 0; }

	/* Galleria a due colonne piene invece di due più una centrata. */
	.entry--home .mgi-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.entry--home .mgi-gallery a,
	.entry--home .mgi-gallery > img { width: 100%; max-width: 100%; }
	.entry--home .mgi-gallery img { height: 150px; }
	.entry { padding: 18px var(--pad); border-radius: 0; margin-inline: calc(var(--pad) * -1); }
	/* .entry aggiunge già il suo padding: senza azzerarlo qui si somma a quello
	   del contenitore interno e il testo resta schiacciato in 280 px. */
	.entry--home { padding: 26px 0 24px; margin-inline: 0; }
	.site-logo p { font-size: 20px; }
	.top-block-in .home-facts .home-facts__title { font-size: 24px; padding-left: 0; }
	.entry-content .home-cards { grid-template-columns: 1fr; }
	.home-card__pic { height: 240px; }
	.entry-content .mgi-contacts { grid-template-columns: auto 1fr; }
	.mgi-contacts > div { width: auto; }
	/* Il testo giustificato su colonne strette apre spazi enormi fra le parole. */
	.entry-content { font-size: 16px; text-align: left; }
	.entry--home .entry-content > p { text-align: left; }
	.entry-content .table-stack,
	.entry-content .table-stack tbody,
	.entry-content .table-stack tr,
	.entry-content .table-stack td { display: block; width: 100% !important; }
	.entry-content .table-stack td { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
	.site-lang, .top-menu-wr, .nav-toggle, .lightbox, .top-pic-block { display: none !important; }
	body { background: #fff; }
	.entry { padding: 0; }
}