/* Cornice Osservatorio Versilia per la cartografia Percorsi.
   La mappa mantiene la propria UX; header, breadcrumb e gerarchia richiamano il sito principale. */
html,body{height:100%}
body.percorsi-page{display:flex;flex-direction:column;min-height:100%;overflow:hidden;background:#f6f0e5}
body.percorsi-page>#site-header-mount{flex:0 0 auto;position:relative;z-index:60}
.map-context-bar{flex:0 0 auto;background:rgba(255,255,255,.97);border-bottom:1px solid #dce5e0;position:relative;z-index:40}
.map-context-inner{height:48px;max-width:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.map-breadcrumbs{display:flex;align-items:center;gap:8px;min-width:0;color:#6a7872;font-size:11px}
.map-breadcrumbs a{color:#176b4a;text-decoration:none;font-weight:750}
.map-breadcrumbs strong{color:#173127;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-back{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:999px;background:#0f3654;color:#fff!important;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 5px 16px rgba(15,54,84,.12)}
.map-back:hover{background:#184d70}
body.percorsi-page>.app{flex:1 1 auto;height:auto!important;min-height:0;background:#f5f8f6}
body.percorsi-page .sidebar{border-right-color:#d8e1dc}
body.percorsi-page .head,
body.percorsi-page .filters,
body.percorsi-page .resultsHead{flex:0 0 auto}
body.percorsi-page .head{background:#fff}
body.percorsi-page .brand h1{color:#0f3654;font-size:24px;letter-spacing:-.035em}
body.percorsi-page .kicker{color:#687873;line-height:1.45}
body.percorsi-page .method{border-color:#cddbd4;color:#0f3654;background:#fff;font-weight:700}
body.percorsi-page .stat{background:#edf4f0;border:1px solid #e0e9e4}
body.percorsi-page .stat b{color:#0f3654}
body.percorsi-page .safetyNotice{display:grid;gap:4px;margin-top:10px;padding:10px 11px;border-left:3px solid #c66a00;border-radius:8px;background:#fff5e8;color:#5e4930}
body.percorsi-page .safetyNotice strong{font-size:11px}
body.percorsi-page .safetyNotice span{font-size:10px;line-height:1.4}
body.percorsi-page .chip.active{background:#0f3654;border-color:#0f3654}
body.percorsi-page .list{flex:1 1 0;min-height:0;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px}
body.percorsi-page .list::-webkit-scrollbar{width:10px}
body.percorsi-page .list::-webkit-scrollbar-track{background:#eef3f0;border-radius:999px}
body.percorsi-page .list::-webkit-scrollbar-thumb{background:#9fb3a9;border:2px solid #eef3f0;border-radius:999px}
body.percorsi-page .list::-webkit-scrollbar-thumb:hover{background:#758f82}
body.percorsi-page .downloads a{background:#0f3654}
body.percorsi-page .downloads a.secondary{background:#edf3f0;color:#0f3654}
body.percorsi-page .leaflet-control-home a,
body.percorsi-page .leaflet-control-zoom a{color:#0f3654}
body.percorsi-page .mapReturnToList{display:none}
@media(min-width:821px) and (max-height:850px){
  body.percorsi-page .head{padding:14px 18px 10px}
  body.percorsi-page .brand h1{font-size:21px}
  body.percorsi-page .kicker{margin-top:4px;font-size:10px;line-height:1.3}
  body.percorsi-page .method{padding:5px 7px;font-size:10px}
  body.percorsi-page .summary{gap:6px;margin-top:9px}
  body.percorsi-page .stat{padding:7px 8px}
  body.percorsi-page .stat b{font-size:15px}
  body.percorsi-page .stat span{font-size:9px}
  body.percorsi-page .topDownloads{margin-top:6px}
  body.percorsi-page .topDownloads a{padding:5px 7px;font-size:9px}
  body.percorsi-page .safetyNotice{gap:3px;margin-top:7px;padding:7px 9px}
  body.percorsi-page .safetyNotice strong{font-size:10px}
  body.percorsi-page .safetyNotice span{font-size:9px;line-height:1.3}
  body.percorsi-page .filters{gap:7px;padding:9px 14px 8px}
  body.percorsi-page .search input{padding:8px 10px 8px 34px}
  body.percorsi-page .search:before{top:5px;left:12px;font-size:18px}
  body.percorsi-page .chip{padding:5px 8px;font-size:10px}
  body.percorsi-page .selectrow select,
  body.percorsi-page .reset{padding:7px 8px}
  body.percorsi-page .resultsHead{padding:8px 16px 6px}
}
@media(min-width:821px) and (max-height:700px){
  body.percorsi-page .head{padding:8px 14px 6px}
  body.percorsi-page .brand{align-items:flex-start}
  body.percorsi-page .brand h1{font-size:18px;line-height:1.05}
  body.percorsi-page .kicker{margin-top:3px;font-size:8px;line-height:1.2}
  body.percorsi-page .method{padding:4px 6px;font-size:9px}
  body.percorsi-page .summary{gap:5px;margin-top:5px}
  body.percorsi-page .stat{padding:4px 6px;border-radius:8px}
  body.percorsi-page .stat b{font-size:13px;line-height:1.1}
  body.percorsi-page .stat span{font-size:8px;line-height:1.1}
  body.percorsi-page .topDownloads{gap:4px;margin-top:4px}
  body.percorsi-page .topDownloads a{padding:4px 6px;font-size:8px;border-radius:6px}
  body.percorsi-page .safetyNotice{grid-template-columns:auto 1fr;align-items:start;gap:5px;margin-top:5px;padding:5px 7px}
  body.percorsi-page .safetyNotice strong{font-size:9px;white-space:nowrap}
  body.percorsi-page .safetyNotice span{font-size:8px;line-height:1.2}
  body.percorsi-page .filters{gap:5px;padding:6px 12px}
  body.percorsi-page .search input{padding:6px 8px 6px 30px;border-radius:9px}
  body.percorsi-page .search:before{top:3px;left:10px;font-size:17px}
  body.percorsi-page .chips{gap:4px;flex-wrap:nowrap}
  body.percorsi-page .chip{padding:4px 6px;font-size:9px}
  body.percorsi-page .selectrow{gap:5px}
  body.percorsi-page .selectrow select,
  body.percorsi-page .reset{padding:5px 6px;font-size:9px}
  body.percorsi-page .resultsHead{padding:5px 14px 4px}
  body.percorsi-page .resultsHead b,
  body.percorsi-page .resultsHead span{font-size:10px}
}
@media(max-width:900px){
  .map-context-inner{height:auto;min-height:48px;padding:7px 12px}
  .map-breadcrumbs{font-size:10px}
  .map-back{font-size:10px;padding:0 10px}
}
/* Contratto UX Percorsi mobile/tablet: la lista non può collassare sotto la mappa
   e la mappa non può trasformarsi in una trappola di scroll. */
@media(max-width:820px){
  body.percorsi-page .sidebar{height:auto;overflow:visible}
  body.percorsi-page .list{
    flex:0 0 auto;
    height:clamp(340px,48dvh,520px);
    min-height:340px;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:auto;
    scrollbar-gutter:stable;
    padding-right:12px
  }
  body.percorsi-page #map{
    touch-action:none!important;
  }
  body.percorsi-page .mapReturnToList{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:14px;
    right:14px;
    z-index:1200;
    min-height:42px;
    padding:0 14px;
    border:1px solid #d6e1db;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    color:#0f3654;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 24px rgba(14,39,30,.16)
  }
}
@media(max-width:620px){
  body.percorsi-page{overflow:auto}
  .map-context-inner{align-items:flex-start;flex-direction:column;gap:6px;padding-top:8px;padding-bottom:8px}
  .map-back{width:100%;justify-content:center}
  body.percorsi-page>.app{flex:none;height:auto!important}
  body.percorsi-page .list{overflow-y:auto;scrollbar-gutter:auto;padding-right:12px}
}