:root {
  --lang-link-color: #1a6fd6; /* colore-link icona ↗ nel pannello delle lingue */
}

/* reset globale per evitare problemi di eredità e margin/padding indesiderati - comport prevedibile su ogni browser */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
			font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
      background: #1a1a2e;
      height: 100%;
			margin: 0;
      color: #AAA;
		}

#map {
      width: 100%; 
      height: calc(100vh - 35px);
      z-index: 0
    }

/* HEADER - DA COMPONENTIZZARE */ 
#header {
      padding: 5px 10px;
      background: #16213e;
      border-bottom: 2px solid #95B4CA;
      display: flex; align-items: center; gap: 20px;
      font-size: 13px;
      color: #aaa;
    }

/* Hamburger menù (home + pagine statiche): quello di corDATA e quello dell'atlante corrente,
   i primi elementi di #header (createHamburgerMenu in interfaceElements.js). */
.hamburger-menu { position: relative; flex-shrink: 0; }
.hamburger-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      line-height: 1;
    }
.hamburger-icon { font-size: 1.6rem; }
.hamburger-label { font-size: 0.85rem; letter-spacing: 0.04em; white-space: nowrap; }

/* menù di corDATA (icona + scritta): azzurro, oro in hover */
.hamburger-menu-cordata .hamburger-btn { color: #95B4CA; }
.hamburger-menu-cordata .hamburger-btn:hover { color: #c9a84c; }

/* menù dell'atlante (solo icona, davanti a #atlas-title): oro come il titolo, azzurro in hover */
.hamburger-menu-atlas .hamburger-btn { color: #c9a84c; gap: 12px; font-family: inherit; }
.hamburger-menu-atlas .hamburger-btn:hover { color: #95B4CA; }
.hamburger-menu-atlas .hamburger-btn:hover #atlas-title { color: #95B4CA; } /* il titolo ha un colore proprio: va seguito esplicitamente */
.hamburger-list {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 180px;
      list-style: none;
      background: #16213e;
      border: 1px solid #95B4CA;
      border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      z-index: 2000; /* sopra i pane di Leaflet */
    }
.hamburger-list[hidden] { display: none; }
.hamburger-list a {
      display: block;
      padding: 8px 14px;
      color: #95B4CA;
      font-size: 0.85rem;
      text-decoration: none;
      white-space: nowrap;
    }
/* hover: sfondo azzurro (lo dà già la regola globale `li:hover` più in basso, qui lo esplicito) e testo scuro per restare leggibile */
.hamburger-list li:hover { background-color: #95B4CA; }
.hamburger-list li:hover a { color: #16213e; }

/* Titolo dell'atlante (testo = global `longTitle`), primo elemento di #header.
   Stile base sovrascrivibile per progetto in _css/_<prj>/custom.css. */
#atlas-title {
      color: #c9a84c;
      font-size: 1.1rem;
      letter-spacing: 0.12em;
      white-space: nowrap;
      flex-shrink: 0;
    }

header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 2px solid #c9a84c;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  gap: 16px;
}

header h1 {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: #c9a84c;
  text-transform: uppercase;
  font-weight: normal;
  white-space: nowrap;
}

/*
.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
*/

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.prop {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.pill {
  background: #0f3460;
  border-radius: 20px; 
  padding: 3px 12px; 
  font-size: 12px;
  color: #7ec8e3; 
}

.copy-btn {
  color: #AAA;
  background: transparent;
  border: 2px solid #95B4CA;
  padding: 5px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  flex-shrink: 0;
}
.copy-btn:hover { border-color: #f0ece4; color: #f0ece4; }
.copy-btn.copied { border-color: #5abf80; color: #5abf80; }

.mode-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.radio-group {
  display: inline-flex;
  gap: 4px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}

.radio-group label input[type=radio] { display: none; }

.radio-group label:hover {
  color: #f0ece4;
  background: #1c1c1c;
}

.radio-group label.active {
  background: #f0ece4;
  color: #0f0f0f;
  border-color: #f0ece4;
  font-weight: 500;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  display: none;
}

.active .dot { display: block; }

/* fine header */ 
      
/* menù principale  */
#menu {width: max-content; margin-top: -42px;}
#_COMMENT {font-style: italic; font-weight: bold; cursor:auto}
.parent {cursor:pointer; display: block; position: relative; float: left; line-height: 40px;background-color: #16213e; border:#95B4CA 2px solid; border-radius: 4px; margin-right: 2px; padding-left: 10px;padding-right: 10px; user-select: none; text-decoration: none;text-transform: uppercase;}
/* .parent:hover > ul {display:block;position:absolute;} fatto in javascript per avere il chiudi al click (per mobile) */
.parent li:hover {background-color: #F0F0F0;}
.childContainer {max-height: 600; width: max-content; border: 2px #16213e solid; border-radius: 4px; overflow-x:hidden; overflow-y:auto; scrollbar-width: auto; margin-left:-8px; margin-top: 2px; }
.child {display: none;}
.child li {color:black; background-color: #E4EFF7;line-height: 22px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;padding-left: 4px; cursor: pointer; text-transform:none;}
.child li a{color: #000000;line-height: 40px;}
.child li.menuSearch {position: sticky; top: 0; z-index: 1; padding: 3px 4px; cursor: auto;}
.child li.menuSearch {display: flex; align-items: center;}
.child li.menuHint {cursor: auto; font-size: 11px; font-style: italic; line-height: 14px; color: #555;}
@media (hover: none) {.child li.menuHint {display: none;}} /* su touch non c'è CTRL: niente messaggio */
.child li.selected {background-color: #95B4CA; font-weight: bold;}
.child li.selected::before {content: '✓ ';}
.menuSearchInput {flex: 1; min-width: 0; box-sizing: border-box; font-size: 14px; padding: 2px 4px;}
.menuSearchInput::-webkit-search-cancel-button {display: none;} /* uso la mia X, uguale su tutti i browser */
.menuSearchClear {cursor: pointer; padding: 0 6px; font-size: 14px; user-select: none;}
.menuSearchInput:placeholder-shown + .menuSearchClear {visibility: hidden;} /* X solo se c'è testo */
ul {list-style: none;margin: 0;padding: 0px; min-width:10em;}
ul ul ul {left: 50%;top: 0;margin-left:1px;}
li:hover {color: #333; background-color: #95B4CA;}
.expand {font-size:12px;float:right;margin-right:5px;}

/* onMouseOver stimoli-immagine */
.image-wrapper {
	position: absolute;
	transform: translate(-60%, -60%);
  opacity: 1;
	border: 2px #95B4CA solid; 
	border-radius: 4px;
}

.image-wrapper.fade-out {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

@media only screen and (max-width: 1024px) {
#menu { 
  max-width: 300px;
}

/* 
#clickableArea {
font-size : 12px;
}
*/

.divCategorySelector { 
  max-height: 200px !important;
}

.child li {line-height: 15px; font-size: 14px;}
.childContainer {max-height: 180; max-width: 300px;position:absolute; z-index:1}
}

.filteringElement {
  border-color: #95B4CA;
}

.filteringElement.main {
  border: 3px solid;
  border-color: #c9a84c;
}

.provCheckBoxesDiv, .langCheckBoxesDiv, .regCheckBoxesDiv, .catCheckBoxesDiv {
  max-height: 420px;
  overflow-y: auto;
}

input[type="checkbox"] {
  margin-right: 2px; 
  cursor: pointer;
}

.info-icon {
  font-size: 1.2em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* checkbox delle categorie (selettore a destra) */
.checkbox_cat {
  white-space: nowrap;
  overflow:hidden;
}

.box,
.boxNoBorder {
  height: 12px;
  width: 12px;
  display: inline-block;
}

.box {
  border: 1px solid white;
}

.inline {
  display: inline-block;
  padding: 2px;
}

/* icona-link accanto alla label nel pannello delle lingue (solo 'lang') */
.langLink {
  text-decoration: none;
  margin-left: 5px;
  cursor: pointer;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
  color: var(--lang-link-color);
}

.langLink:hover {
  filter: brightness(1.2);
}

/* ── RICERCA GEOGRAFICA (widgets.js, createGeoSearchControl) ───────────────── */
:root {
  --geosearch-width: 160px;
  --geosearch-gap: 6px;
  --geosearch-clear-offset: 4px;
  --geosearch-input-padding-right: 24px;
  --geosearch-bg: #fff;
  --geosearch-fg: #222;
  --geosearch-muted: #777;
  --geosearch-border: #95B4CA;
  --geosearch-hover-bg: #e8f0f6;
  --geosearch-marker-color: #d62828;
  --geosearch-list-max-height: 40vh;
}

/* Angolo in basso a sinistra: i pannelli prov/reg vengono (ri)aggiunti dopo la ricerca (addAncillaryLayers,
   a ogni cambio di carta), quindi con l'ordine DOM di Leaflet finirebbero sempre sopra. Con flex + order
   la ricerca resta in cima qualunque sia l'ordine di aggiunta. */
.leaflet-bottom.leaflet-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.geosearch-control {
  order: -1;
  margin-bottom: var(--geosearch-gap) !important; /* !important: leaflet-custom.css azzera i margin-bottom dei controlli in basso */
  width: var(--geosearch-width);
  background: var(--geosearch-bg);
  color: var(--geosearch-fg);
  border: 1px solid var(--geosearch-border);
  font-size: 0.8rem;
}

/* la lista sta sopra l'input perché il controllo è in basso a destra */
.geosearch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: var(--geosearch-list-max-height);
  overflow-y: auto;
  border-bottom: 1px solid var(--geosearch-border);
}

.geosearch-list[hidden] { display: none; }

.geosearch-item {
  padding: 5px 8px;
  cursor: pointer;
  line-height: 1.25;
}

.geosearch-item:hover,
.geosearch-item.active { background: var(--geosearch-hover-bg); }

.geosearch-item small {
  display: block;
  color: var(--geosearch-muted);
}

.geosearch-msg {
  padding: 5px 8px;
  color: var(--geosearch-muted);
  font-style: italic;
}

.geosearch-field {
  position: relative;
}

.geosearch-clear {
  position: absolute;
  top: 50%;
  right: var(--geosearch-clear-offset);
  transform: translateY(-50%);
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--geosearch-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.geosearch-clear[hidden] { display: none; }
.geosearch-clear:hover { color: var(--geosearch-fg); }

.geosearch-input {
  box-sizing: border-box;
  width: 100%;
  padding: 6px var(--geosearch-input-padding-right) 6px 8px; /* a destra lascia spazio alla ✕ */
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.geosearch-marker {
  box-sizing: border-box; /* dimensione data da iconSize (GEOSEARCH.MARKER_SIZE_PX in widgets.js) */
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--geosearch-marker-color);
  box-shadow: 0 0 0 2px var(--geosearch-marker-color);
}