body {
  display: flex;
  flex-direction: column;
  /* allow the page to grow taller than the viewport on mobile so footer doesn't overlap */
  min-height: 100vh;
  align-items: stretch;
  background-color: #0074D9;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  overflow-x: hidden;
}

/* NAVBAR base */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #0ea5e9;
  border-bottom: 1px solid #0284c7;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* logo */
nav img.left {
  height: 40px;
  flex-shrink: 0; /* non farlo schiacciare */
}

nav .left {
  max-width: 100px;
  width: 100px;
}

/* menu desktop */
nav .center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .center a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: .5rem;
}

nav .center a:hover {
  background: rgba(255,255,255,0.15);
}

/* login button */
.btn-login {
  padding: .5rem 1rem;
  border: 1px solid #fff;
  background: #fff;
  color: #0ea5e9;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}

/* hamburger */
.nav-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  margin-left: .5rem;
}

/* -------- Mobile view -------- */
@media (max-width: 768px) {
  /* logo a sinistra, login + hamburger a destra */
  nav {
    justify-content: space-between;
  }

  /* il menu diventa a scomparsa */
  nav .center {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    background: #0ea5e9;
    border-top: 1px solid #0284c7;
    display: none;
    padding: 1rem 0;
    gap: 1rem;
  }

  nav .center.active {
    display: flex;
  }

  nav .center a {
    width: 100%;
    text-align: center;
    padding: 1rem;
  }

  /* hamburger visibile */
  .nav-toggle {
    display: block;
  }

  /* login e hamburger stanno insieme a destra */
  .btn-login {
    order: 2;
  }
  .nav-toggle {
    order: 1;
  }

  /* Ensure footer participates in document flow on mobile (was absolute which
     pinned it to the viewport). Use relative/static positioning so it appears
     after the page content and scrolls normally. */
  footer {
    position: relative !important;
  }
}


.navbar {
  display: flex;
  justify-content: space-evenly; /* distribuisce i blocchi */
  align-items: center;
  background-color: #333;
  padding: 10px;
}

.left {
  flex: 1; /* occupa spazio a sinistra */
  text-align: left;
  color: white;
}

.center {
  flex: auto; /* occupa spazio al centro */
  text-align: center;
  align-items: center;
}

.right {
  flex: auto; /* occupa spazio a destra */
  text-align: right;
}


nav a {
    color: #0074D9;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

nav .dropdown {
    position: relative;
    display: inline-block;
}

nav .dropdown-toggle {
    cursor: pointer;
    color: #0074D9;
    background: none;
    border: none;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

nav .dropdown-toggle:hover,
nav .dropdown-toggle:focus {
    background-color: #0074D9;
    color: #fff;
}

nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: #fff;

/* visible fallback for images that have the placeholder class - ensures a visible low-def background
   even when JS doesn't run or images are cached */
img.with-placeholder {
  background: linear-gradient(90deg,#f3f4f6 25%, #eceff1 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  min-height: 80px;
  display: block;
  object-fit: cover;
}
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    z-index: 1000;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    width: 100%;
}

nav .dropdown:hover .dropdown-menu,
nav .dropdown:focus-within .dropdown-menu {
    display: block;
}

nav .dropdown-menu a {
    color: #0074D9;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
    border-radius: 0;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

nav .dropdown-menu a:hover {
    background-color: #0074D9;
    color: #fff;
}

nav a:hover {
    background-color: #0ea5e9;
    color: #fff;
}

nav img {
    margin-left: 0;
    margin-right: 0;
    max-width: 8%;
    height: auto;
}

.btn-login {
  background: linear-gradient(135deg, #4facfe, #00f2fe); /* gradiente blu/azzurro */
  color: white;
  border: none;
  margin-right: 3rem;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 8px;        /* angoli arrotondati */
  cursor: pointer;
  transition: all 0.3s ease; /* animazione morbida */
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* leggero effetto ombra */
}

/* Hover (quando ci passi sopra col mouse) */
.btn-login:hover {
  transform: translateY(-2px); /* effetto sollevato */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #00c6ff, #0072ff); /* più intenso */
}

/* Active (quando clicchi) */
.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.btn-azzurro4 {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border: 1px solid rgba(10, 128, 207, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px); /* effetto vetro */
  transition: all 0.3s ease;
}
.btn-azzurro4:hover {
  background: rgba(12, 114, 182, 0.938);
  color: white;
}

section{
  background-image: url('../static/grande.webp');
  background-repeat: no-repeat; /* evita ripetizioni */
  background-position: center;  /* centra l’immagine */
  background-size: cover;
  /* Allow the section to grow and shrink inside the body flex layout so the footer
     is always positioned after content even on very short devices. Do not force a
     fixed min-height based on viewport which can push the footer off-screen. */
  flex: 1 0 auto;
  width: 100%;
  margin-top: 100px; /* space for nav */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 80px; /* give space for footer */
}

.bottoni {
  display: flex;
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 600px) {
  .bottoni {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100vw !important;
    padding: 0 0.5rem !important;
  }
}

footer {
    width: 100vw;
    height: 60px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 16px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    left: 0;
    position: relative;
    bottom: 0;
    right: 0;
}

/* Strong overrides to ensure footer participates in flow and main expands to push footer down
   even on devices with very small heights. These selectors are specific and placed at the
   end of the main stylesheet to beat other rules. */
#site-main { flex: 1 0 auto; }
main#site-main { flex: 1 0 auto; }
footer { position: static !important; }