/* =====================================================================
 *  Sezione /mappe-tratte/
 *  Tutte le classi sono prefissate .mt- per non toccare GeneratePress.
 * ===================================================================== */

.mt{
  --mt-asfalto:#33383B;
  --mt-asfalto-scuro:#252A2C;
  --mt-strisce:#F4F4F0;
  --mt-verde:#00693E;          /* verde della segnaletica autostradale */
  --mt-verde-cupo:#004A2C;
  --mt-blu:#12457F;            /* blu dei servizi */
  --mt-ardesia:#5C6863;
  --mt-inchiostro:#191E1B;
  --mt-fondo:#F4F6F3;
  --mt-bordo:#DCE2DD;

  background:var(--mt-fondo);
  color:var(--mt-inchiostro);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:-0.005em;
  margin:0 calc(50% - 50vw);   /* esce dalla colonna di GeneratePress */
  padding:0 0 56px;
}
.mt *{box-sizing:border-box}
/* senza questa riga il filtro di ricerca non nasconde niente:
   [hidden] e .mt-micro hanno la stessa specificita' e vince
   l'ultima regola scritta, cioe' quella con display */
.mt [hidden]{display:none !important}
.mt-dentro{max-width:620px;margin:0 auto;padding:0 16px}
.mt a{color:inherit;text-decoration:none}

/* --- targhetta autostrada ------------------------------------------ */
.mt-scudo{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mt-verde);color:#fff;font-weight:700;font-size:15px;
  line-height:1;padding:7px 10px 6px;border-radius:5px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);white-space:nowrap;
}
.mt-scudo.mt-mini{
  font-size:11px;padding:4px 6px 3px;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}

/* --- testata della tratta ------------------------------------------ */
.mt-testata{
  position:sticky;top:0;z-index:8;background:var(--mt-fondo);
  border-bottom:1px solid var(--mt-bordo);padding:14px 0 12px;
}
.mt-briciola{display:inline-block;font-size:13px;color:var(--mt-ardesia);margin-bottom:9px}
.mt-briciola:hover{color:var(--mt-verde)}
.mt-titolo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.mt-titolo h1{font-size:21px;line-height:1.2;font-weight:700;margin:0;letter-spacing:-0.01em}
.mt-verso-testo{font-weight:400;color:var(--mt-ardesia)}
.mt-conta{margin:7px 0 0;font-size:13px;color:var(--mt-ardesia)}

.mt-cambio{display:flex;gap:6px;margin:11px 0 0}
.mt-cambio a{
  flex:1;text-align:center;font-size:13.5px;padding:9px 6px;
  border:1px solid var(--mt-bordo);border-radius:8px;
  background:#fff;color:var(--mt-ardesia);
}
.mt-cambio a[aria-current]{
  background:var(--mt-verde);border-color:var(--mt-verde);color:#fff;font-weight:600;
}
.mt-cambio a:focus-visible{outline:2px solid var(--mt-verde);outline-offset:2px}

/* --- la carreggiata ------------------------------------------------ */
.mt-strada{position:relative;padding:0 0 0 108px;margin:0}
.mt-risalita{display:flex;flex-direction:column-reverse}

.mt-asfalto{
  position:absolute;left:16px;top:0;bottom:0;width:78px;
  background:var(--mt-asfalto);
  box-shadow:inset 5px 0 0 var(--mt-strisce),
             inset -5px 0 0 var(--mt-strisce),
             0 0 0 1px var(--mt-asfalto-scuro);
}
.mt-asfalto::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;margin-left:-2.5px;
  background:repeating-linear-gradient(to bottom,
    var(--mt-strisce) 0 26px, transparent 26px 52px);
  opacity:.9;
}

/* --- uscita: rampa e cartello --------------------------------------- */
.mt-uscita{position:relative;min-height:52px}
.mt-rampa{
  position:absolute;left:-96px;top:14px;width:82px;height:16px;
  background:var(--mt-asfalto);
  box-shadow:inset 0 3px 0 var(--mt-strisce);
  border-bottom-left-radius:14px;
  transform:skewY(-7deg);transform-origin:left center;
}
.mt-cartello{
  display:inline-block;background:var(--mt-verde);color:#fff;
  padding:9px 13px 10px;border-radius:6px;max-width:100%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.mt-qualifica{display:block;font-size:11.5px;font-weight:400;opacity:.85;margin-bottom:2px}
.mt-nome{display:block;font-size:16.5px;font-weight:700;line-height:1.25}
.mt-accanto{display:block;font-size:12.5px;font-weight:400;opacity:.85;margin-top:3px}

.mt-area_servizio .mt-cartello,
.mt-area_sosta .mt-cartello{background:var(--mt-blu)}
.mt-area_servizio .mt-nome,
.mt-area_sosta .mt-nome{font-size:15px}

.mt-galleria .mt-cartello,
.mt-valico .mt-cartello,
.mt-incrocio .mt-cartello{background:var(--mt-ardesia)}

.mt-allacciamento .mt-cartello{background:var(--mt-verde-cupo)}
.mt-allacciamento .mt-rampa{height:20px;box-shadow:inset 0 4px 0 var(--mt-strisce)}

/* barriera: sbarra bianca che taglia la carreggiata */
.mt-barriera .mt-rampa{display:none}
.mt-barriera::before{
  content:"";position:absolute;left:-92px;top:18px;width:78px;height:9px;
  background:var(--mt-strisce);box-shadow:0 0 0 2px var(--mt-asfalto-scuro);
}
.mt-barriera .mt-cartello{background:var(--mt-verde-cupo)}

/* --- distanza fra due uscite ---------------------------------------- */
.mt-tratto{position:relative}
.mt-km{
  position:absolute;left:-92px;top:50%;transform:translateY(-50%);
  width:78px;text-align:center;font-size:11.5px;
  color:var(--mt-strisce);opacity:.85;letter-spacing:.01em;
}

/* --- cambio provincia ------------------------------------------------ */
.mt-confine{position:relative;padding:16px 0 4px}
.mt-confine span{font-size:12px;color:var(--mt-ardesia)}
.mt-confine::before{
  content:"";position:absolute;left:-92px;top:50%;width:78px;height:2px;
  background:var(--mt-strisce);opacity:.5;
}

/* --- capolinea -------------------------------------------------------- */
.mt-capolinea{position:relative;padding:6px 0}
.mt-segna{
  display:inline-block;background:var(--mt-inchiostro);color:#fff;
  font-size:13px;font-weight:600;padding:7px 12px;border-radius:6px;
}
.mt-capolinea::before{
  content:"";position:absolute;left:-92px;top:50%;width:78px;height:14px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(45deg,
    var(--mt-strisce) 0 8px, var(--mt-asfalto) 8px 16px);
}

/* --- elenco tratte ---------------------------------------------------- */
.mt-gruppo{margin:28px 0 0}
.mt-gruppo h2{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:16px;font-weight:700;
}
.mt-gruppo h2 small{font-weight:400;color:var(--mt-ardesia);font-size:13px}
.mt-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}

.mt-micro{
  display:block;background:#fff;border:1px solid var(--mt-bordo);
  border-left:5px solid var(--mt-verde);border-radius:10px;padding:12px 13px;
}
.mt-micro:hover{border-color:var(--mt-verde)}
.mt-micro:focus-visible{outline:2px solid var(--mt-verde);outline-offset:2px}
.mt-dove{display:block;font-size:15px;font-weight:700;line-height:1.25}
.mt-misura{display:block;font-size:12.5px;color:var(--mt-ardesia);margin-top:4px}

.mt-chiusa{
  font-size:12.5px;color:var(--mt-ardesia);margin:32px 0 0;
  padding-top:14px;border-top:1px solid var(--mt-bordo);
}

@media (prefers-reduced-motion:reduce){
  .mt *{transition:none !important;scroll-behavior:auto !important}
}

/* =====================================================================
 *  Aggiunte: famiglie di strade, apertura, box traffico, chiusura
 * ===================================================================== */

/* targhetta blu per tutto cio' che non e' autostrada:
   e' la stessa distinzione della segnaletica italiana */
.mt-scudo-blu{background:var(--mt-blu)}

/* --- apertura della pagina hub --------------------------------------- */
.mt-apertura{padding:22px 0 2px}
.mt-apertura h2{
  font-size:23px;line-height:1.2;font-weight:700;margin:0;
  letter-spacing:-0.015em;
}
.mt-apertura p{margin:9px 0 0;font-size:15.5px;color:var(--mt-ardesia);max-width:44em}

/* --- famiglie -------------------------------------------------------- */
.mt-famiglia{margin:34px 0 0}
.mt-famiglia-titolo{
  font-size:13px;font-weight:600;color:var(--mt-ardesia);
  margin:0 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--mt-bordo);
}
.mt-famiglia:first-of-type .mt-famiglia-titolo{
  color:var(--mt-verde);border-bottom-color:var(--mt-verde);
}

.mt-gruppo{margin:18px 0 0}
.mt-gruppo-testa{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.mt-gruppo-testa small{font-weight:400;color:var(--mt-ardesia);font-size:13px}

.mt-micro-blu{border-left-color:var(--mt-blu)}
.mt-micro-blu:hover{border-color:var(--mt-blu)}
.mt-micro-blu:focus-visible{outline-color:var(--mt-blu)}

/* --- box di rimando al traffico -------------------------------------- */
.mt-box{
  display:block;margin:30px 0 0;padding:16px 18px;
  background:var(--mt-verde);color:#fff;border-radius:12px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
}
.mt-box:hover{background:var(--mt-verde-cupo)}
.mt-box:focus-visible{outline:2px solid var(--mt-inchiostro);outline-offset:3px}
.mt-box-titolo{display:block;font-size:17px;font-weight:700;line-height:1.25}
.mt-box-testo{display:block;font-size:13.5px;margin-top:5px;opacity:.9;line-height:1.45}

/* --- chiusura della pagina hub --------------------------------------- */
.mt-chiusura{margin:28px 0 0;font-size:15px}
.mt-chiusura p{margin:0 0 10px}
.mt-chiusura ul{margin:0;padding-left:20px}
.mt-chiusura li{margin:0 0 8px;color:var(--mt-ardesia);line-height:1.5}

/* =====================================================================
 *  Filtro di ricerca e griglia a due colonne
 * ===================================================================== */

.mt-cerca{margin:18px 0 6px}
.mt-cerca input{
  width:100%;font:inherit;font-size:16px;   /* 16px evita lo zoom su iOS */
  padding:12px 14px;border:1px solid var(--mt-bordo);border-radius:10px;
  background:#fff;color:var(--mt-inchiostro);-webkit-appearance:none;appearance:none;
}
.mt-cerca input::placeholder{color:var(--mt-ardesia)}
.mt-cerca input:focus{
  outline:none;border-color:var(--mt-verde);
  box-shadow:0 0 0 3px rgba(0,105,62,.14);
}

.mt-vuoto{
  margin:22px 0 0;padding:16px;text-align:center;
  background:#fff;border:1px dashed var(--mt-bordo);border-radius:10px;
  color:var(--mt-ardesia);font-size:14px;
}

/* su schermi stretti le due colonne restano, il testo si adatta */
@media (max-width:430px){
  .mt-griglia{gap:8px}
  .mt-micro{padding:11px 11px;border-left-width:4px}
  .mt-dove{font-size:14px;line-height:1.3}
  .mt-misura{font-size:11.5px;margin-top:3px}
}

/* =====================================================================
 *  Hub secondario: spiegazione, testi di famiglia, rimando fra hub
 * ===================================================================== */

.mt-spiega{
  margin:18px 0 4px;padding:16px 18px;
  background:#fff;border:1px solid var(--mt-bordo);
  border-left:5px solid var(--mt-blu);border-radius:10px;
}
.mt-spiega p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--mt-inchiostro)}
.mt-spiega p:last-child{margin-bottom:0;color:var(--mt-ardesia)}

.mt-famiglia-testo{
  margin:-6px 0 14px;font-size:13.5px;line-height:1.5;
  color:var(--mt-ardesia);max-width:44em;
}

.mt-rimando{
  display:block;margin:30px 0 0;padding:15px 17px;
  background:#fff;border:1px solid var(--mt-bordo);
  border-left:5px solid var(--mt-blu);border-radius:12px;
}
.mt-rimando:hover{border-color:var(--mt-blu)}
.mt-rimando:focus-visible{outline:2px solid var(--mt-blu);outline-offset:2px}
.mt-rimando-titolo{display:block;font-size:16px;font-weight:700;line-height:1.25}
.mt-rimando-testo{display:block;font-size:13px;margin-top:4px;color:var(--mt-ardesia);line-height:1.45}