/*
 * meteochambave.com - livello grafico moderno per Meteotemplate 19
 * ----------------------------------------------------------------------------
 * File ADDITIVO: non sostituisce css/main.php (i colori dei temi restano quelli scelti
 * in config.php / dal visitatore). Si carica dopo main.php da header.php.
 * Per disattivarlo: $modernUI = false; in config.php.
 * Solo CSS standard, nessuna libreria, nessun font da scaricare (font di sistema già installati).
 */

:root {
	--mt-radius: 12px;
	--mt-radius-sm: 8px;
	--mt-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.18);
	--mt-shadow-strong: 0 2px 4px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.30);
	--mt-focus: #ffd54f;
	--mt-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- base: leggibilità e stabilità del layout ---------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;          /* niente "salto" della pagina quando compare la barra di scorrimento */
}
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
}
img { max-width: 100%; }
p { line-height: 1.6; }
.textDiv p, .textDiv li { line-height: 1.65; }

/* ---- accessibilità: focus ben visibile da tastiera ------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mt-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
[role="button"], [role="link"] { cursor: pointer; }

/* ---- testata (banner interattivo) ---------------------------------------- */
.banner {
	height: clamp(130px, 20vw, 190px);          /* prima: 150px fissi */
	background-size: cover;                     /* prima: 100% 100% = immagine deformata */
	background-position: center;
	border-radius: var(--mt-radius);
	box-shadow: var(--mt-shadow);
	overflow: hidden;
}
.flag { width: clamp(56px, 9vw, 100px); height: auto; }
#title1 { font-size: clamp(1.7rem, 4.2vw + .6rem, 3.5rem); text-shadow: 0 2px 8px rgba(0,0,0,.65); line-height: 1.1; }
#title2 { font-size: clamp(1.2rem, 2.6vw + .5rem, 2.5rem); text-shadow: 0 2px 8px rgba(0,0,0,.65); line-height: 1.1; }
#userSettings, #templateHelp { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
@media (max-width: 700px) {
	#moon2 { display: none; }
	#headerConditionsDiv { font-size: .9em; }
}

/* ---- menu ----------------------------------------------------------------- */
.digimeg-nav-item { transition: background-color .18s var(--mt-ease), color .18s var(--mt-ease); }
.menuItemText a {
	display: inline-block;
	padding: .15em .4em;
	border-radius: 6px;
	transition: background-color .15s var(--mt-ease);
}
.menuItemText a:hover, .menuItemText a:focus-visible { background: rgba(255,255,255,.14); }
@media (max-width: 820px) {
	/* le colonne del menu a tendina sono in percentuale inline: su schermi stretti vanno una sotto l'altra */
	.digimeg-nav-item-content > div { display: block !important; width: 100% !important; max-width: none !important; padding-left: 8px !important; }
	.digimeg-nav-item-content > div:first-child { display: none !important; }
}

/* ---- riquadri e pagine di contenuto --------------------------------------- */
.block, .textDiv {
	border-radius: var(--mt-radius);
	box-shadow: var(--mt-shadow);
	transition: box-shadow .2s var(--mt-ease);
}
.block:hover { box-shadow: var(--mt-shadow-strong); }
.textDiv table { max-width: 100%; }

/* ---- pulsanti e campi ----------------------------------------------------- */
.button, input.button, select.button {
	border-radius: var(--mt-radius-sm);
	cursor: pointer;
	transition: filter .15s var(--mt-ease), box-shadow .15s var(--mt-ease);
}
.button:hover { filter: brightness(1.1); }

/* ---- finestre (impostazioni / guida) e avviso cookie ---------------------- */
.ui-dialog {
	max-width: 96vw;
	border-radius: var(--mt-radius);
	box-shadow: var(--mt-shadow-strong);
}
.ui-dialog .ui-dialog-content { max-height: 75vh; overflow: auto; }
.cc-window { font-family: inherit; }
.cc-btn { border-radius: var(--mt-radius-sm); }

/* ---- piè di pagina: su schermi stretti le colonne si impilano ------------- */
@media (max-width: 760px) {
	#footer > table, #footer > table > tbody, #footer > table > tbody > tr { display: block; width: 100%; }
	#footer > table > tbody > tr > td { display: block; width: 100% !important; text-align: center !important; padding: .35em 0 !important; }
}

/* ---- preferenze di sistema ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}
@media print {
	#header, .digimeg-nav-wrap, #footer, #settingsDiv, .cc-window { display: none !important; }
	.block, .textDiv { box-shadow: none; }
}