/* Topbar V2 — Glass / Frosted premium
   Override del look della topbar (desktop + mobile).
   Caricato dopo style.css in base.html così vince per cascade order. */

.topbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 0.5px solid rgba(99, 153, 231, 0.18);
}

.breadcrumb {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.005em;
  gap: 10px;
}

.breadcrumb .current {
  color: #1a1a1a;
  font-weight: 600;
}

.breadcrumb .book-icon {
  color: #6399E7;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Mobile hamburger button: icona hamburger più visibile
   (SVG originale aveva stroke-width troppo sottile su bg blu) */
.mobile-menu-btn svg {
  width: 22px;
  height: 22px;
}
.mobile-menu-btn svg path {
  stroke-width: 2;
}

/* Override di "button{min-height:44px!important;padding:12px 20px!important}"
   dentro media query mobile — schiacciava l'SVG dell'hamburger. */
button.mobile-menu-btn {
  padding: 0 !important;
  min-height: 36px !important;
  cursor: pointer !important;
}

/* === Bandiere SVG (sostituiscono emoji bandierine) === */
.flag-svg {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
/* Hero bandiera grande nella country page */
.country-hero-flag .flag-svg {
  width: 44px;
  height: auto;
}
/* === Layout Variante B: home grid 2 colonne (main + aside) ===
   Desktop (>=901px): main + aside affiancate.
   Mobile: stack verticale, aside va in fondo. */
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 1200px) {
  .home-grid {
    grid-template-columns: 1fr 280px;
    align-items: start;
  }
  .home-aside {
    position: sticky;
    top: 68px;
  }
}
/* Modificatore: usato quando l'aside non è renderizzato (chip spostate
   in sidebar, refactor 2026-04-28). Forza colonna unica anche su desktop
   per evitare colonna fantasma di 280px che lasciava whitespace a destra. */
.home-grid-fullwidth {
  grid-template-columns: 1fr !important;
}

/* Bottone "Accedi al sito" pill nella topbar mobile per non-autenticati.
   Visibile solo <=768px (su desktop la sidebar ha gia' Accedi/Registrati). */
.topbar-login-mobile {
  display: none;
}
@media (max-width: 768px) {
  .topbar-login-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #6399E7 0%, #4a7fd4 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(99, 153, 231, 0.35), 0 1px 2px rgba(10, 25, 41, 0.08);
    flex-shrink: 0;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 36px;
    box-sizing: border-box;
  }
  .topbar-login-mobile:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(99, 153, 231, 0.3);
  }
  .topbar-login-mobile:hover {
    color: white;
    text-decoration: none;
  }
}
.home-main {
  min-width: 0;
  width: 100%;
}
/* Main-wrapper full width su desktop.
   Problema: .app-layout era display:flex e .main-wrapper aveva
   flex:1 + margin-left:240px. flex:1 con flex-basis:0 fa sì che
   il main-wrapper cresca a riempire il container flex, ma in
   combinazione col margin-left sfora e viene shrinkato in modo
   imprevedibile, lasciando uno spazio morto tra sidebar e content.
   Fix: togliamo il flex sul parent e usiamo block normale con
   margin-left=240px, così il wrapper occupa viewport - 240. */
@media (min-width: 769px) {
  .app-layout {
    display: block;
  }
  .main-wrapper {
    width: auto;
    max-width: none;
    margin-left: 240px;
    box-sizing: border-box;
    /* reset flex eredità che non serve più */
    flex: none;
  }
  .page-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
  }
  /* .mobile-overlay e .mobile-sidebar su mobile sono position:fixed
     e display:none, quindi non occupano spazio nel flow. Ma il loro
     CSS esiste SOLO dentro @media(max-width:768px): su desktop
     tornano display:block in-flow e con contenuto verticale
     creano uno spazio vuoto enorme sopra la topbar. Nascondiamoli. */
  .mobile-overlay,
  .mobile-sidebar {
    display: none !important;
  }
}
.home-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.home-aside .aside-card {
  background: white;
  border: 0.5px solid #e8eaee;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.home-aside .aside-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa;
  font-weight: 600;
  margin-bottom: 10px;
}
.home-aside .aside-row {
  font-size: 12px;
  color: #444;
  padding: 7px 0;
  border-bottom: 0.5px solid #f2f3f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  gap: 8px;
  line-height: 1.4;
}
.home-aside .aside-row:last-child { border-bottom: none; }
.home-aside a.aside-row:hover { color: #6399E7; text-decoration: none; }
.home-aside .aside-tag {
  background: #eef3fd;
  color: #6399E7;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.home-aside .aside-empty {
  font-size: 11px;
  color: #bbb;
  font-style: italic;
  padding: 4px 0;
}

/* ============================================================
   RESPONSIVE FIX BATCH (audit 2026-04-18)
   ============================================================ */

/* FIX 1 — iOS auto-zoom: Safari iOS zooma automaticamente quando
   l'utente tappa un input con font-size <16px. Forziamo 16px
   su tutti gli input/textarea/select su mobile. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input:not([type]),
  textarea,
  select,
  .welcome-search-input,
  .search-input,
  .field-input {
    font-size: 16px !important;
  }
}

/* FIX 2 — Grid inline repeat(4,1fr) non responsive:
   in abbonati.html e admin.html ci sono griglie a 4 colonne
   inline che non vengono adattate su mobile. Forziamo 2 colonne. */
@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* FIX 3 — Breadcrumb wrap su viewport molto stretti (iPhone SE 375px):
   nascondiamo il primo link "Consulta" e il suo separatore così il
   percorso diventa più corto (es. "Belgio › Titolo formula"). */
@media (max-width: 480px) {
  .breadcrumb > a:first-of-type,
  .breadcrumb > a:first-of-type + .sep {
    display: none;
  }
  .breadcrumb {
    font-size: 12px;
  }
}

/* FIX 4 — Migliorare leggibilità breadcrumb mobile (da 11px a 12px) */
@media (max-width: 768px) and (min-width: 481px) {
  .breadcrumb {
    font-size: 12px !important;
  }
}