@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#1a1a1a;
  --surface:#2a2a2a;
  --text:#f5f5f5;
  --primary:#c0a062;
  --secondary:#808080;

  --nav-height: 80px;
}

*{
  box-sizing:border-box;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
}

/* Scroll più “pulito” con navbar fissa */
html{
  scroll-behavior:smooth;
}
section[id]{
  scroll-margin-top: calc(var(--nav-height) + 20px);
}

/* --- Navbar --- */
#navbar{
  background:var(--bg);
  border-bottom:1px solid var(--surface);
}

/* Link navbar (desktop + mobile) */
.nav-link,
.mobile-nav-link{
  color:var(--text);
  text-decoration:none;
}

.nav-link{
  position:relative;
  transition:all .3s ease;
}

.nav-link::after{
  /* Rimuove linea animata sotto i link */
  display: none;
}

/* Mobile menu pannello */
#mobile-menu{
  background:var(--surface);
}
.mobile-menu{
  transform:translateX(100%);
  transition:transform .3s ease;
}
.mobile-menu.active{
  transform:translateX(0);
}

/* --- Sezioni / animazioni --- */
.section-appear{
  opacity:0;
  transform:translateY(20px);
  animation:appearAnim .6s ease forwards;
}

@keyframes appearAnim{
  to{opacity:1; transform:translateY(0);}
}

/* --- Card / blocchi scuri (Servizi, FAQ, Gallery placeholder, box Dove Siamo, box Contatti) --- */
.service-card,
.faq-item{
  background:var(--surface);
}

.gallery-item{
  background:var(--surface);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:all .3s ease;
}
.gallery-item:hover{
  transform:scale(1.02);
}

.service-card{
  transition:all .3s ease;
}
.service-card:hover{
  transform:translateY(-4px);
}

/* i box generici che nel tuo HTML usano solo "rounded-xl p-8" */
section#dove-siamo .rounded-xl.p-8,
section#contatti .rounded-xl.p-8{
  background:var(--surface);
}

/* --- Bottoni principali (Chiama / WhatsApp / Indicazioni) --- */
a[href^="tel:"],
a[href^="https://wa.me"],
#directions-btn{
  background:var(--primary);
  color:var(--bg);
  text-decoration:none;
}

/* Bottone secondario "Vieni in officina" (link ancora presente) */
a[href="#dove-siamo"]{
  color:var(--text);
  border-color:var(--secondary);
}

/* --- Footer --- */
footer{
  background:var(--bg);
  border-top:1px solid var(--surface);
}

/* --- Cookie banner (se lo usi ancora) --- */
#cookie-banner{
  background:var(--bg) !important;
  border:1px solid var(--surface) !important;
}

/* View transition */
@view-transition { navigation: auto; }

/* Neumorphism menu mobile */
.mobile-nav-link{
  position: relative;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.05);

  box-shadow:
    8px 8px 18px rgba(0,0,0,.55),
    -8px -8px 18px rgba(255,255,255,.05);

  transition:
    box-shadow .18s ease,
    transform .12s ease,
    background .18s ease;
}

.mobile-nav-link:hover{
  filter: brightness(1.05);
}

.mobile-nav-link:active{
  transform: translateY(1px);
  box-shadow:
    inset 8px 8px 18px rgba(0,0,0,.55),
    inset -8px -8px 18px rgba(255,255,255,.05);
}

.mobile-menu .flex{
  gap: 14px;
}

/* Effetto neumorphism anche su PC / tablet */
@media (hover: hover) {
  .nav-link,
  .mobile-nav-link{
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(255,255,255,.05);

    box-shadow:
      8px 8px 18px rgba(0,0,0,.55),
      -8px -8px 18px rgba(255,255,255,.05);

    transition:
      box-shadow .25s ease,
      transform .18s ease,
      filter .25s ease;
  }

  .nav-link:hover,
  .mobile-nav-link:hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
  }

  .nav-link:active,
  .mobile-nav-link:active{
    transform: translateY(1px);
    box-shadow:
      inset 8px 8px 18px rgba(0,0,0,.55),
      inset -8px -8px 18px rgba(255,255,255,.05);
  }
}

/* Pulsanti navbar: stesso nero dello sfondo */
.nav-link,
.mobile-nav-link{
  background: var(--bg);
}

/* Uniforma il bordo di "Dove Siamo" agli altri */
a[href="#dove-siamo"]{
  border-color: rgba(255,255,255,.05);
}