/* Disattiva sticky quando la finestra è più bassa di 450px (cioè telefono orizzontale) */
@media screen and (max-height: 450px) and (orientation: landscape) {
  .sticky-nav {
    position: static !important;
  }
}



/* --- Uniforma l'altezza del footer dei pannelli in righe di due colonne --- 
 --- Indispensabile nella pagina della Table quando gli ingredienti variano in altezza --- */
/* Applica solo su viewport >= 768px (dove la griglia mostra due colonne affiancate) */
@media (min-width: 768px) {
  /* Target: le row che hanno la classe voffset (o sostituisci con un selettore più preciso) */
  .row.voffset {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* allunga le colonne alla stessa altezza nella riga */
  }

  /* Le colonne interne rimangono larghe come definite da Bootstrap ma diventano contenitori flex in colonna */
  .row.voffset > .col-sm-6,
  .row.voffset > [class*="col-"] { /* fallback per altre column class */
    display: flex;
    flex-direction: column;
  }

  /* Assicuriamo che il panel dentro la colonna occupi tutta l'altezza disponibile */
  .row.voffset > .col-sm-6 > .panel,
  .row.voffset > [class*="col-"] > .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Il body del panel resta invariato */
  .row.voffset > .col-sm-6 > .panel .panel-body,
  .row.voffset > [class*="col-"] > .panel .panel-body {
    margin-top: auto;
  }

  /* Il Footer si espande a occupare lo spazio disponibile */
  .row.voffset > .col-sm-6 > .panel .panel-footer,
  .row.voffset > [class*="col-"] > .panel .panel-footer {
    flex: 1 1 auto;
  }
}