/* menu.css — menu lateral do Il Garda.live para páginas com visual próprio
   (comuni, Gardalytics, metodologia, privacy…). Mesmo desenho do menu de style.css,
   sem depender dele. A página recebe <html class="gl-menu">; o bloco é inserido por
   Estrategias/ferramentas/sync_menu.py entre <!--glm:start--> e <!--glm:end-->. */

.sidebar {
  --mist: #e8e4de; --cloud: #f2efe9; --stone: #6b6b6b; --silver: #999; --ink: #1a1a1a;
  --gold: #B09A7A; --gold-ink: #806B4B; --accent: #B09A7A; --accent-light: #f0ead8; --navy: #1A2B4A;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html.gl-menu { padding-left: 240px; }

.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
  background: #fff; border-right: 1px solid var(--mist);
  z-index: 1000; display: flex; flex-direction: column;
  font-family: var(--sans); line-height: 1.65; text-align: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.sidebar * { box-sizing: border-box; }
.sidebar-brand { padding: 24px 24px 20px; border-bottom: 1px solid var(--mist); }
.sidebar-brand h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0; color: var(--ink); letter-spacing: normal; text-transform: none; }
.sidebar-brand h2 span { color: var(--gold); }
.sidebar-brand p { font-size: 11px; color: var(--stone); margin: 4px 0 0; line-height: 1.4; }
.sidebar-clock { font-family: var(--mono); font-size: 12px; color: var(--silver); margin-top: 8px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; font-size: 14px; font-weight: 500; color: var(--stone);
  text-decoration: none; transition: all .15s; border-left: 3px solid transparent; border-bottom: 0;
}
.sidebar-nav a:hover { color: var(--ink); background: var(--cloud); }
.sidebar-nav a.active { color: #6E5A3B; background: var(--accent-light); border-left-color: var(--accent); font-weight: 700; }
.sidebar-nav a .nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-nav a .nav-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.sidebar-nav .nav-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--silver); padding: 14px 24px 4px; pointer-events: none;
}

.overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 990;
  opacity: 0; transition: opacity .3s;
}
.overlay.show { display: block; opacity: 1; }

/* Celular: botão flutuante do menu (como nas páginas principais) */
.glm-burger { display: none; }

@media (max-width: 900px) {
  html.gl-menu { padding-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.12); }
  .glm-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 6px; left: 8px; z-index: 980;
    width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer;
    background: #fff; border: 1px solid #e8e4de; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  .glm-burger svg { width: 20px; height: 20px; color: #1a1a1a; }
  /* cabeçalhos com conteúdo à esquerda: abre espaço para o botão */
  html.gl-menu .masthead, html.gl-menu .gl-top, html.gl-menu .atl-top { padding-left: 60px !important; }
  html.gl-menu .stage .head { padding-top: 44px; }
}

/* Comuni: atalhos internos da página (substituem o antigo painel da cidade) */
.city-toc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 12px 24px; background: #fff; border-bottom: 1px solid #e8e4de;
  font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px;
}
.city-toc-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #806B4B; margin-right: 4px; }
.city-toc a { color: #1A2B4A; text-decoration: none; padding: 3px 10px; border: 1px solid #e8e4de; border-radius: 999px; }
.city-toc a:hover { background: #f2efe9; }