/* /var/www/html/header.css — NORMALIZZA HAMBURGER SU TUTTE LE PAGINE */

/* Vars globali nav */
:root {
  --header-h: 0px;
  --nav-font: Arial, Helvetica, sans-serif;
  --nav-font-size: 15px;        /* 👈 dimensione coerente */
  --nav-btn-pad-y: 8px;
  --nav-btn-pad-x: 12px;
  --nav-row-h: 42px;            /* altezza logo e riga header */
}

/* Forza font su tutta la navbar */
.panel-header,
.panel-header *:not(svg):not(path),
.menu.desktop-menu,
.menu.desktop-menu a,
.menu.mobile-menu,
.menu.mobile-menu a,
.hamburger,
.user-menu,
.user-menu .badge,
.dropdown button {
  font-family: var(--nav-font) !important;
}

/* Header fixed */
html, body { height: 100%; }
body { padding-top: var(--header-h); }

.panel-header{
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: #1f1f1f;
  border-bottom: 6px solid #232120;
  z-index: 1000;
}
.logo-img{ height: var(--nav-row-h); width: auto; display:block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

/* Desktop menu */
.menu.desktop-menu{
  display: flex;
  gap: 16px;
  margin-left: 8px;
  flex: 1 1 auto;
}
.menu.desktop-menu a{
  color:#fff; text-decoration:none;
  font-size: var(--nav-font-size);
  padding: var(--nav-btn-pad-y) var(--nav-btn-pad-x);
  border-radius:6px; transition:.2s;
}
.menu.desktop-menu a:hover{ background:#ff4500; color:#000; }

/* BASE: hamburger nascosto su desktop */
.hamburger{
  display: none;                      /* ⬅️ importante */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(var(--nav-row-h) - 10px);
  padding: var(--nav-btn-pad-y) var(--nav-btn-pad-x);
  font-size: var(--nav-font-size);
  line-height: 1;
  background:#333; color:#fff;
  border:1px solid #444;
  border-radius:6px;
  cursor:pointer;
  -webkit-appearance: none; appearance: none;
}
.hamburger:focus{ outline:2px solid #ff4500; outline-offset:2px; }

/* Mobile menu */
.menu.mobile-menu{
  display:none; position:fixed; top:calc(var(--header-h)); left:0; right:0;
  background:#1f1f1f; border-bottom:1px solid #333; z-index:999;
  padding:8px 10px;
}
.menu.mobile-menu.open,
.menu.mobile-menu.show { display:block; }
.menu.mobile-menu a{
  display:block; padding:10px 12px; color:#fff; text-decoration:none; border-radius:6px;
  font-size: var(--nav-font-size);
}
.menu.mobile-menu a:hover{ background:#ff4500; color:#000; }

/* User menu (panel) — se presente */
.user-menu{
  margin-left: auto;
  display:flex; align-items:center; gap:8px;
  background:#333; color:#fff; padding:8px 12px; border-radius:8px;
  cursor:pointer; position:relative; user-select:none;
}
.user-menu:hover{ background:#ff4500; }
.dropdown{
  display:none; position:absolute; right:0; top:44px; background:#222;
  min-width:140px; border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.35); overflow:hidden;
}
.dropdown button{ width:100%; padding:10px; background:none; border:none; color:#fff; text-align:left; cursor:pointer; }
.dropdown button:hover{ background:#ff4500; }

.badge{ display:inline-block; margin-left:6px; padding:2px 8px; font-size:12px; border-radius:999px; background:#2b2b2b; }
.badge.role[data-role="admin"]{ background:#8e44ad }
.badge.role[data-role="premium"]{ background:#16a085 }
.badge.role[data-role="regular"]{ background:#34495e }
.badge.slot{ background:#3b3b3b }

/* MOBILE: mostra hamburger e nascondi menu desktop */
@media (max-width: 900px){
  .hamburger{ display: inline-flex; } /* ⬅️ visibile solo sotto 900px */
  .menu.desktop-menu{ display: none; }
}

/* DESKTOP: assicurati che il menu mobile sia sempre nascosto */
@media (min-width: 901px){
  .menu.mobile-menu{ display: none !important; }
}

/* --- Navbar lock: tipografia/spacing coerenti su tutte le pagine --- */
.panel-header,
.panel-header .menu a,
.panel-header .hamburger {
  font-family: Arial, sans-serif !important;   /* stesso font del sito */
}

.panel-header .menu a {
  font-size: 15px !important;                  /* stessa dimensione ovunque */
  line-height: 1.2 !important;
}

.panel-header .hamburger {
  font-size: 20px !important;                  /* grandezza dell’icona */
  line-height: 1 !important;
  padding: 6px 10px !important;
}

/* --- Anti-overflow globale e box model coerente --- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

/* Evita artefatti su mobile con background fissato */
@media (max-width: 900px){
  body { background-attachment: scroll; }
}

/* Menu mobile: non deve mai “allargare” la pagina */
.menu.mobile-menu{
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Quando il menu è aperto, blocco lo scroll della pagina */
body.menu-open { overflow: hidden; }

/* Focus hamburger: bordo meno invadente su mobile */
.hamburger:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,69,0,.45);
  border-color: rgba(255,69,0,.35);
}

/* === Footer globale (coerente su tutte le pagine) === */
.site-footer{
  margin-top: auto;
  width: 100%;
  background: #222;
  color: #fff;
  padding: 14px 0;          /* stessa altezza delle altre pagine */
  text-align: center;
  font-size: .95rem;
  border-top: 1px solid #444;
}
.site-footer p{ margin: 0; } /* evita margini interni “a sorpresa” */

/* ===== Full-width site announcement (no close) ===== */
#site-announcement-host { width: 100%; margin: 0; }

/* Base: usa SEMPRE le stesse var (--bg, --fg, --accent) */
#site-announcement-host .site-announcement{
  --bg: #991b1b;      /* default = danger */
  --fg: #ffffff;
  --accent: #fecaca;

  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid rgba(0,0,0,.2);
}

#site-announcement-host .site-announcement .sa-accent{
  width: 6px; height: 1.2em;
  border-radius: 3px;
  background: var(--accent);
}

#site-announcement-host .site-announcement .sa-title{ font-weight: 800; margin-right: .5rem; }
#site-announcement-host .site-announcement .sa-msg{ line-height: 1.25; }
#site-announcement-host .site-announcement .sa-close{ display: none !important; } /* niente X */

/* Varianti – stesse specificità del base */
#site-announcement-host .site-announcement[data-variant="info"]{
  --bg:#075985;  /* blu scuro leggibile */
  --fg:#ffffff;
  --accent:#38bdf8;
}
#site-announcement-host .site-announcement[data-variant="warning"]{
  --bg:#92400e;  /* arancio scuro */
  --fg:#ffffff;
  --accent:#fdba74;
}
#site-announcement-host .site-announcement[data-variant="danger"]{
  --bg:#991b1b;  /* rosso scuro */
  --fg:#ffffff;
  --accent:#fecaca;
}
#site-announcement-host .site-announcement[data-variant="success"]{
  --bg:#065f46;  /* verde scuro */
  --fg:#ffffff;
  --accent:#34d399;
}

/* /var/www/html/header.css */

/* === CTA “Server Panel” a destra sul DESKTOP === */
.panel-cta{
  /* perché: evidenziare azione principale e staccarla dal menu */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--nav-row-h) - 10px);
  padding: var(--nav-btn-pad-y) calc(var(--nav-btn-pad-x) + 2px);
  background: #ff4500;
  color: #000;
  text-decoration: none;
  font-size: var(--nav-font-size);
  font-weight: 800;
  border-radius: 8px;
  border: 1px solid #ff6a33;
  transition: filter .15s ease, transform .02s ease;
}
.panel-cta:hover{ filter: brightness(1.05); }
.panel-cta:active{ transform: translateY(1px); }
.panel-cta:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,69,0,.45);
  border-color: rgba(255,69,0,.55);
}

/* Mobile: la CTA desktop sparisce, il link è nel menu mobile */
@media (max-width: 900px){
  .panel-cta{ display: none; }
}

/* === Variante mobile nel menu a tendina (aspetti coerenti) === */
.menu.mobile-menu a.panel-cta-mobile{
  font-weight: 800;
  border: 1px solid #444;
  text-align: center;
  margin-top: 6px;
}
.menu.mobile-menu a.panel-cta-mobile:hover{
  background:#ff4500;
  color:#000;
}