/* =====================================================
   V2 — DESIGN TOKENS (palette, font, restyle)
   ===================================================== */
:root {
  --tm-primary: #2C4A45;
  --tm-primary-light: #4E6E68;
  --tm-accent: #abcacc;
  --tm-accent-light: #2C4A45;
  --tm-cream: #F5EFE6;
  --tm-sage: #B8C4B0;
  --tm-text: #5c5c58;
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', serif;
}

/* =====================================================
   BASE
   ===================================================== */
html {
  font-size: 18px;
}

body {
  color: var(--tm-text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.tm-hero-title,
.tm-section-title,
.navbar-brand {
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}

p {
  line-height: 1.9;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  transition: all 0.3s ease;
}

a:hover,
a:focus {
  text-decoration: none;
}

a:focus {
  outline: none;
}

.btn {
  padding: 8px 32px;
}

.btn:hover {
  background-color: #ced4da;
}

.tm-section-pad-top {
  padding-top: 135px;
}

.tm-text-primary {
  color: var(--tm-primary);
}

.tm-font-big {
  font-size: 1.25rem;
}

.tm-btn-primary:hover,
.tm-btn-primary:focus {
  color: white;
  background-color: var(--tm-accent-light);
}

/* =====================================================
   IMMAGINI RICORRENTI (galleria / intro) — proporzionate
   e uniformi su tutti gli schermi
   ===================================================== */
.tm-gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
}

.tm-intro-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}

@media (max-width: 575px) {
  .tm-gallery-item img {
    height: 200px;
  }

  .tm-intro-img {
    height: 220px;
  }
}

/* =====================================================
   RECENSIONI — badge-link verso i profili Airbnb / Booking
   ===================================================== */
.tm-review-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--tm-cream);
  border: 1px solid var(--tm-sage);
  color: var(--tm-primary);
  text-align: left;
  transition: all 0.3s ease;
}

.tm-review-badge:hover,
.tm-review-badge:focus {
  color: var(--tm-primary);
  background: #f9e6ba;
  box-shadow: 0 8px 24px rgba(44, 74, 69, 0.12);
  transform: translateY(-2px);
}

.tm-review-badge-icon {
  font-size: 2rem;
  color: var(--tm-accent-light);
  flex-shrink: 0;
}

.tm-review-badge-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

.tm-review-badge-text strong {
  font-size: 1.1rem;
}

.tm-review-badge-score {
  font-size: 0.9rem;
  opacity: 0.8;
}

.tm-review-badge-score .fa-star {
  color: #e0a638;
  margin-right: 3px;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.tm-navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.3s ease;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
}

/* .tm-navbar .container {
  flex-wrap: nowrap;
} */

@media (max-width: 767px) {
  .navbar-brand {
    font-size: 1.05rem;
    max-width: 72vw;
  }
}

.navbar-brand:hover,
.tm-navbar.scroll .navbar-brand:hover {
  color: var(--tm-accent-light);
}

.tm-navbar.scroll .navbar-brand {
  color: #8f8f8f;
}

.nav-item {
  list-style: none;
  font-style: italic;
}

.tm-nav-link {
  color: white;
}

.tm-navbar.scroll .tm-nav-link {
  color: #8f8f8f;
}

.tm-navbar.scroll .tm-nav-link:hover,
.tm-navbar.scroll .tm-nav-link.current,
.tm-nav-link:hover {
  color: var(--tm-accent-light);
}

.navbar-toggler {
  border: 1px solid white;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-toggler-icon {
  color: white;
  padding-top: 6px;
}

.tm-navbar.scroll .navbar-toggler {
  border: 1px solid #8f8f8f;
}

.tm-navbar.scroll .navbar-toggler-icon {
  color: #8f8f8f;
}

/* Selettore lingua: separato visivamente dal resto del menu con un
   divisore, stile "pillola" più piccolo e discreto rispetto a un
   normale link di navigazione. */
.tm-lang-item {
  margin-left: 0px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.tm-navbar.scroll .tm-lang-item {
  border-left-color: rgba(0, 0, 0, 0.15);
}

.tm-lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: white;
}

.tm-lang-link i {
  font-size: 0.75rem;
}

.tm-lang-link:hover,
.tm-lang-link:focus {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

.tm-navbar.scroll .tm-lang-link {
  color: #8f8f8f;
  border-color: #8f8f8f;
}

.tm-navbar.scroll .tm-lang-link:hover,
.tm-navbar.scroll .tm-lang-link:focus {
  color: var(--tm-accent-light);
  border-color: var(--tm-accent-light);
  background: transparent;
}

/* Nel menu mobile aperto lo sfondo è bianco: la pillola diventa
   scura su bordo chiaro per restare leggibile, e il divisore
   passa da verticale a orizzontale visto che il menu è impilato. */
@media (max-width: 991px) {
  .tm-lang-item {
    margin-left: 0;
    padding-left: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid rgba(44, 74, 69, 0.15);
  }

  .tm-lang-link {
    color: var(--tm-primary);
    border-color: var(--tm-sage);
  }

  .tm-lang-link:hover,
  .tm-lang-link:focus {
    color: var(--tm-primary);
    background: rgba(44, 74, 69, 0.08);
  }
}

/* =====================================================
   HERO
   ===================================================== */
#hero {
  height: 100vh;
  min-height: 375px;
  position: relative;
  overflow: hidden;
}

/* Layer separato per la foto di sfondo: permette di "ingrandire"
   (zoomare sul centro) l'immagine tramite --hero-zoom senza
   toccare la logica del parallax, che continua ad agire sul
   background-position di questo stesso elemento (ha ancora
   la classe .tm-parallax, vedi HTML). */
.tm-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(20, 30, 28, 0.45), rgba(20, 30, 28, 0.2)), url(../img/header.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  /* Punto di fuoco dell'immagine: la torre civica con l'orologio è
     leggermente a destra del centro nella foto attuale — un
     centraggio semplice cade già bene sulla torre e sull'arco
     illuminato su quasi tutte le proporzioni di schermo. Cambia
     solo questi due valori se in futuro si cambia foto. */
  --hero-focus-x: 50%;
  --hero-focus-y: 50%;
  background-position: var(--hero-focus-x) var(--hero-focus-y);
  /* Zoom leggero sul centro: ritaglia un po' i bordi (auto in
     primo piano, facciate laterali) per dare più risalto alla
     torre e all'arco. Alza/abbassa per regolare l'inquadratura. */
  --hero-zoom: 1.0;
  transform: scale(var(--hero-zoom));
  transform-origin: var(--hero-focus-x) var(--hero-focus-y);
}

.tm-hero-text-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.tm-hero-text-container-inner {
  margin-top: -90px;
}

.tm-hero-title {
  font-size: 3.5rem;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.tm-intro-next {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
}

@media (max-height: 480px) {
  .tm-hero-text-container-inner {
    margin-top: -40px;
  }

  .tm-intro-next {
    bottom: 20px;
  }
}

.tm-down-arrow-link {
  display: block;
  margin-top: 18%;
}

.tm-down-arrow {
  color: var(--tm-accent);
  cursor: pointer;
  background: white;
  border-radius: 50%;
  padding: 10px 22px 8px;
  transition: all 0.3s ease;
}

.tm-down-arrow:hover,
.tm-down-arrow:focus {
  color: white;
  background: var(--tm-accent);
}

/* =====================================================
   INTRODUCTION
   ===================================================== */
.tm-section-title {
  font-size: 2.6rem;
  font-weight: 300;
}

.tm-intro-text {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
}

.tm-icon {
  display: block;
  margin-bottom: 30px;
  color: var(--tm-accent);
}

/* =====================================================
   WORK
   ===================================================== */
.tm-work-description {
  max-width: 650px;
  width: 100%;
  font-size: 0.9rem;
}

.tm-gallery-container {
  padding-top: 70px;
  padding-bottom: 120px;
}

/* =====================================================
   V2 — Carosello "Il nostro appartamento"
   Una foto alla volta, ingrandita, senza tagli forzati
   ===================================================== */
.tm-carousel-container {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 90px;
}

.tm-carousel-slide {
  padding: 0 10px;
}

.tm-carousel-link {
  display: block;
}

.tm-carousel-slide img {
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: 8px;
  background: var(--tm-cream);
  box-shadow: 0 6px 24px rgba(44, 74, 69, 0.15);
}

.tm-carousel .slick-prev,
.tm-carousel .slick-next {
  z-index: 10;
  width: 42px;
  height: 42px;
}

.tm-carousel .slick-prev {
  left: -10px;
}

.tm-carousel .slick-next {
  right: -10px;
}

.tm-carousel .slick-prev:before,
.tm-carousel .slick-next:before {
  color: var(--tm-primary);
  opacity: 0.85;
  font-size: 30px;
}

.tm-carousel .slick-dots {
  bottom: -45px;
}

@media (max-width: 767px) {
  .tm-carousel-slide img {
    max-height: 50vh;
  }

  .tm-carousel-container {
    padding-bottom: 60px;
  }

  .tm-carousel .slick-prev {
    left: 4px;
  }

  .tm-carousel .slick-next {
    right: 4px;
  }
}

.tm-gallery-item {
  margin: 0 15px;
  border-radius: 8px;
}

.slick-dots {
  bottom: -65px;
}

.slick-dots li {
  margin: 0 13px;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--tm-primary);
}

.slick-dots li button:before {
  font-size: 26px;
}

/* =====================================================
   HOVER EFFECT — griglia foto (comune + variante "honey")
   ===================================================== */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption>a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

figure.effect-honey {
  background: #4a3753;
  max-width: 220px;
  border-radius: 8px;
}

figure.effect-honey img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.5;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: var(--tm-accent);
  content: "";
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* =====================================================
   CONTACT
   ===================================================== */
#contact {
  color: white;
  background-color: var(--tm-accent);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-bottom: 40px;
  padding-top: 70px;
}

.tm-underline {
  border-top: 2px solid white;
  height: 8px;
  width: 100%;
}

.tm-underline-inner {
  width: 25%;
  height: 8px;
  background: white;
}

.tm-contact-item {
  margin-bottom: 50px;
  color: white;
}

.tm-contact-item-link {
  display: flex;
  align-items: center;
}

.tm-contact-item-link i,
.tm-contact-item-link span {
  color: white;
  transition: all 0.3s ease;
}

.tm-contact-item-link:hover i,
.tm-contact-item-link:hover span {
  color: var(--tm-accent-light);
}

.tm-input {
  padding: 8px 25px;
  border-radius: 3px;
  border: 1px solid white;
  background: transparent;
  color: white;
}

::placeholder {
  color: white;
  opacity: 1;
}

:-ms-input-placeholder {
  color: white;
}

::-ms-input-placeholder {
  color: white;
}

.tm-btn-submit {
  margin-left: 20px;
}

.tm-footer {
  /* In flusso normale (non più position:absolute): il footer così
     compare sempre subito dopo la mappa, qualunque sia l'altezza
     reale del contenuto a quella larghezza di schermo. Con position:
     absolute ancorato a #contact (che ha un'altezza minima fissa)
     il footer poteva "staccarsi" dalla mappa nelle larghezze intermedie. */
  margin-top: 40px;
  padding: 0 15px;
}

.tm-footer-link {
  color: white;
}

.tm-footer-link:hover,
.tm-footer-link:focus {
  color: #abcacc;
  text-decoration: none;
}

.iframe-container {
  width: 80%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none;
}

.iframe-container.tm-map-active iframe {
  pointer-events: auto;
}

.tm-map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(44, 74, 69, 0.25);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  padding: 20px;
  transition: opacity 0.25s ease;
}

.tm-map-overlay i {
  font-size: 1.3rem;
}

.iframe-container.tm-map-active .tm-map-overlay {
  opacity: 0;
  pointer-events: none;
}

/* =====================================================
   BREAKPOINTS GENERICI (layout / container)
   ===================================================== */
@media (min-width: 768px) {
  .tm-intro-text-container {
    padding-left: 65px;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1275px;
  }

  .tm-container-gallery {
    max-width: 1290px;
  }

  .tm-container-contact {
    max-width: 1063px;
  }
}

@media (max-width: 991px) {
  .tm-intro-text-container {
    padding-left: 15px;
    padding-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-intro-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-btn-submit {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .tm-btn-submit {
    margin-left: 20px;
    margin-top: 0;
  }
}

/* Menu compatto (hamburger): la navbar ora si collassa fino a 991px
   (vedi navbar-expand-lg nell'HTML), quindi questi stili devono coprire
   l'intera fascia 768–991px e non solo lo smartphone, altrimenti tra
   768 e 991px il menu resta "vuoto"/senza sfondo leggibile. */
@media (max-width: 991px) {
  .navbar-nav {
    max-width: 200px;
    text-align: right;
  }

  .navbar-collapse {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 3px;
  }

  .navbar-collapse .nav-link {
    color: #8f8f8f;
  }
}

@media (max-width: 480px) {
  .tm-gallery-container {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .tm-gallery-item {
    margin: 0;
  }
}

@media (max-width: 420px) {
  .tm-btn-submit {
    display: block;
    margin-left: 0;
    margin-top: 20px;
  }
}

/* =====================================================
   V2 — CTA STICKY MOBILE (chiamata / email sempre visibili)
   ===================================================== */
.tm-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  gap: 10px;
}

.tm-sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
}

.tm-sticky-call {
  background: var(--tm-primary);
  color: #fff !important;
}

.tm-sticky-mail {
  background: var(--tm-cream);
  color: var(--tm-primary) !important;
  border: 1px solid var(--tm-sage);
}

@media (max-width: 767px) {
  .tm-sticky-cta.tm-visible {
    display: flex;
  }

  /* evita che la barra copra il footer/ultimo contenuto */
  body {
    padding-bottom: 90px;
  }
}

/* =====================================================
   V2 — FADE-IN allo scroll (sostituisce l'effetto
   parallasse su mobile con una transizione più elegante
   e priva di scatti)
   ===================================================== */
.tm-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.tm-fade-in.tm-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tm-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   V2 — Striscia foto (Montefano / Genga / Lame Rosse)
   ===================================================== */
.tm-photo-strip {
  margin: 0 -8px;
}

.tm-photo-strip>[class^="col-"] {
  padding: 0 8px;
}

.tm-photo-strip img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

@media (max-width: 575px) {
  .tm-photo-strip img {
    height: 140px;
  }
}

/* Variante più grande per la sezione Appennino (Genga / Lame Rosse):
   più spazio alle foto su desktop, altezza ridotta in modo controllato
   sugli schermi piccoli così non occupano troppo scroll */
.tm-photo-strip-lg img {
  height: 420px;
}

@media (max-width: 991px) {
  .tm-photo-strip-lg img {
    height: 300px;
  }
}

@media (max-width: 575px) {
  .tm-photo-strip-lg .col-md-6 {
    margin-bottom: 10px;
  }

  .tm-photo-strip-lg img {
    height: 200px;
  }
}

/* =====================================================
   V2 — FIX MOBILE (< 768px)
   Blocco unico: parallax disattivato, font scalati, padding
   sezioni ridotto, navbar collassata più comoda al tocco
   ===================================================== */
@media (max-width: 767px) {

  /* 1. PARALLAX: disabilitato su mobile.
     iOS ignora background-attachment:fixed e produce
     scatti e salti visivi. Su mobile l'immagine resta
     statica, più pulita e performante. */
  .tm-hero-photo,
  #hero,
  #contact {
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  .tm-hero-photo {
    transform: scale(1) !important;
  }

  /* 2. FONT SIZE: i titoli del template sono troppo grandi
     su schermi stretti (2.6rem = ~47px su base 18px).
     Li scala per restare leggibili senza andare a capo
     in modo scomodo. */
  .tm-hero-title {
    font-size: 1.8rem;
  }

  .tm-hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }

  .tm-section-title {
    font-size: 1.7rem;
  }

  .tm-intro-text {
    font-size: 1rem;
  }

  /* 3. PADDING SEZIONI: 135px di padding-top è pensato
     per desktop. Su mobile mangia metà schermo prima
     che inizi il contenuto. */
  .tm-section-pad-top {
    padding-top: 65px;
  }

  /* 4. SEZIONE CONTACT: min-height:850px su mobile
     lascia enormi spazi vuoti. La lasciamo crescere
     solo quanto serve al contenuto. */
  #contact {
    min-height: auto;
    padding-top: 80px;
  }

  /* 5. CONTATTI - icone e testo: riduciamo la spaziatura
     verticale tra gli elementi di contatto */
  .tm-contact-item {
    margin-bottom: 40px;
    color: white;
  }

  /* 6. HERO TEXT: il margine negativo -90px è calibrato
     per schermi alti. Su mobile lo azzeriamo */
  .tm-hero-text-container-inner {
    margin-top: 0;
  }

  /* 7. GALLERIA: altezze foto ridotte su schermi piccoli */
  .tm-gallery-item img {
    height: 200px;
  }

  .tm-intro-img {
    height: 220px;
  }

  /* 8. NAVBAR: con 5 voci il menu collassato è stretto.
     Lo allarghiamo e aggiungiamo più padding ai link
     per un'area di tocco confortevole (min 44px) */
  .navbar-nav {
    max-width: 100%;
    text-align: left;
  }

  .navbar-collapse {
    padding: 12px 16px;
  }

  .navbar-collapse .nav-item .nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1rem;
  }
}

/* =====================================================
   V2 — FIX SCHERMI MOLTO PICCOLI (< 400px)
   ===================================================== */
@media (max-width: 400px) {
  .tm-hero-title {
    font-size: 1.4rem;
  }

  .tm-hero-subtitle {
    font-size: 0.9rem;
  }

  .tm-section-title {
    font-size: 1.4rem;
  }
}