/* =====================================================================
   HOME GLASS — Variante 4 (Glass / Soft Layered)
   =====================================================================
   Override della home attuale: gradient morbidi, backdrop-blur, shadow
   diffuse, rounded pronunciati. Caricato SOLO quando il template
   rileva ?style=glass nell'URL. Rimuovere il link o il query param
   riporta istantaneamente alla home classica.
   ===================================================================== */

/* Palette */
:root {
  --g-bg-start: #eef2f8;
  --g-bg-end: #f5f0f8;
  --g-accent-a: #6399E7;
  --g-accent-b: #8B7BE0;
  --g-ink-deep: #2d3a6e;
  --g-ink-soft: #5a6b85;
  --g-glass-bg: rgba(255,255,255,0.72);
  --g-glass-border: rgba(255,255,255,0.85);
  --g-shadow: 0 8px 32px rgba(139,123,224,0.12);
  --g-shadow-hover: 0 12px 40px rgba(139,123,224,0.18);
}

/* Body/Sfondo: sostituisce il grigio piatto con un gradient morbido */
body {
  background: linear-gradient(135deg, var(--g-bg-start) 0%, var(--g-bg-end) 100%) !important;
  background-attachment: fixed !important;
}

/* Sidebar: stessa blu ma con accenti più raffinati
   (manteniamo compatibilità col logo e con le voci di menu esistenti) */
.sidebar {
  background: linear-gradient(180deg, #6399E7 0%, #5a8edb 100%) !important;
  backdrop-filter: blur(20px);
  box-shadow: 4px 0 20px rgba(99,153,231,0.15);
}

/* Logo "Jäger Galenica" in fondo alla sidebar: l'SVG originale ha un
   cerchio pieno #6399E7 che nella sidebar classica (flat #6399E7) si
   mimetizzava, ma col gradient della sidebar glass (verso #5a8edb)
   il cerchio stona. Sostituiamo con una versione senza cerchio. */
.sidebar-footer img[src*="logo_font.svg"] {
  content: url('/static/logo_font_glass.svg');
}

/* Topbar: glass trasparente con blur */
.topbar {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 0.5px solid rgba(99,153,231,0.15) !important;
}

/* ========== HERO BANNER ========== */
.welcome-banner {
  background: linear-gradient(135deg, #6399E7 0%, #7c8ee8 50%, #8B7BE0 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(99,153,231,0.25),
              0 2px 6px rgba(139,123,224,0.15) !important;
}

/* Input search hero più morbido */
.welcome-search-input {
  border-radius: 100px !important;
  padding: 12px 20px !important;
}
.welcome-search-btn {
  border-radius: 100px !important;
  padding: 12px 26px !important;
}

/* ========== STAT CARDS ========== */
.stat-card {
  background: var(--g-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--g-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--g-shadow) !important;
  transition: all 0.2s ease !important;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover) !important;
}

/* ========== SCUOLA JÄGER CARD (override del gradient oro/blu) ========== */
.sj-hero-card {
  background: linear-gradient(135deg, #2d3a6e 0%, #4a5aa0 50%, #6b6fc2 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(45,58,110,0.3) !important;
  padding: 1.75rem 2rem !important;
}
.sj-hero-card .sj-glow {
  background: radial-gradient(circle, rgba(139,123,224,0.35) 0%, transparent 70%) !important;
}

/* Badge Core: sfumato accent invece di oro */
.sj-hero-card span[style*="rgba(255,215,0"] {
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12)) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #e0d6ff !important;
}

/* CTA pill rounded nella card */
.sj-hero-card span[style*="background:white;color:#1f3a5f"] {
  background: linear-gradient(90deg, #ffffff, #f3f0ff) !important;
  color: var(--g-ink-deep) !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 16px rgba(255,255,255,0.25) !important;
}

/* ========== BROWSE BUTTONS (tile) ========== */
.browse-btn {
  background: var(--g-glass-bg) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--g-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--g-shadow) !important;
  transition: all 0.2s ease !important;
}
.browse-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover) !important;
}
.browse-btn.active {
  background: linear-gradient(135deg, rgba(238,243,253,0.9), rgba(245,240,248,0.9)) !important;
  border-color: var(--g-accent-a) !important;
}
.btn-icon {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #6399E7, #8B7BE0) !important;
}

/* ========== BROWSE PANEL TRANSITIONS (fade + slide-up, 280ms) ========== */
/*
   I 3 pannelli (nazioni / forme / sezioni) sono stackati nel wrapper.
   Quello attivo è in flow (position:relative, opacity 1, translateY 0);
   gli altri sono absolute, opacity 0, tradotti di 12px — così la transizione
   può animare enter+exit senza far saltare il layout.
   In classic (senza questo CSS) resta il display:none/block + micro fadeIn.
*/
.browse-panel-wrap {
  position: relative;
}
.browse-panel {
  display: block !important;
  animation: none !important;  /* disattiva il fadeIn classico */
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  /* visibility:hidden + height:0 evitano che il panel non visibile estenda
     il body scrollHeight (creava ~600px di whitespace dopo il footer). */
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 280ms ease, transform 280ms ease;
}
.browse-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  visibility: visible;
  height: auto;
  overflow: visible;
}

/* ========== COUNTRY CARDS ========== */
.country-card {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(99,153,231,0.08) !important;
  transition: all 0.2s ease !important;
}
.country-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99,153,231,0.15) !important;
  border-color: var(--g-accent-a) !important;
}

/* ========== GRIGLIE FLUIDE: si adattano alla larghezza del browser ==========
   Override su style.css che usava colonne fisse (3 paesi / 4 forme): ora
   auto-fill con minmax garantisce che le card mantengano una larghezza
   minima leggibile e il numero di colonne si aggiusti dinamicamente al
   ridimensionamento del browser (responsive da edge a edge della content area). */
.country-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.forms-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}
.sections-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
/* Le 3 cards di scelta "Nazione/Forma/Sezione" sopra le grid restano 3 fixed
   ma flessibili (su finestre molto strette diventano 1 sotto l'altra). */

/* ========== ASIDE "collapsed" in CHIP ========== */
/*
   Trasforma le 3 card dell'aside (Ultime consultazioni / Ricerche frequenti / Novità)
   da card verticali aperte a chip pill orizzontali cliccabili che si espandono.
   Il JS (home-glass.js) gestisce il toggle .expanded.
*/
@media (min-width: 901px) {
  .home-aside {
    position: sticky;
    top: 68px;
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 900px) {
  .home-aside {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 0.5px solid rgba(99,153,231,0.15);
  }
}

.home-aside .aside-card {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(99,153,231,0.18) !important;
  border-radius: 100px !important;
  padding: 9px 18px !important;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-aside .aside-card:hover {
  border-color: var(--g-accent-a) !important;
  box-shadow: 0 4px 12px rgba(99,153,231,0.15);
}
.home-aside .aside-card::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g-accent-a);
  flex-shrink: 0;
}
.home-aside .aside-card .aside-title {
  font-size: 12px !important;
  margin-bottom: 0 !important;
  color: var(--g-ink-deep) !important;
  font-weight: 600 !important;
}
/* Di default nascondi tutto tranne il titolo (chip compatto) */
.home-aside .aside-card > *:not(.aside-title) {
  display: none;
}
/* Stato espanso: mostra il contenuto */
.home-aside .aside-card.expanded {
  border-radius: 14px !important;
  padding: 1rem 1.1rem !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 12px 32px rgba(99,153,231,0.18);
  display: block;
  position: relative;
}
.home-aside .aside-card.expanded::before {
  position: absolute;
  top: 18px; left: 18px;
}
.home-aside .aside-card.expanded .aside-title {
  margin-bottom: 10px !important;
  margin-left: 14px !important;
}
.home-aside .aside-card.expanded > * {
  display: block;
}
.home-aside .aside-card.expanded .aside-row {
  display: flex;
}
.home-aside .aside-card.expanded::after {
  content: '× chiudi';
  position: absolute;
  top: 12px; right: 14px;
  font-size: 10px;
  color: var(--g-ink-soft);
  opacity: 0.6;
}