/* ══════════════════════════════════════════════
   GINOS – Design System  (rev. tipografica Apr 2026)
   Principio: leggibilità prima di tutto.
   Testo grande, linee brevi, spazio generoso.
   ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-dark:  #1a3a52;
  --blue-mid:   #2c5f8d;
  --blue-light: #4a90d9;
  --blue-pale:  #eef4fb;
  --accent:     #e8554e;
  --text-dark:  #1a2332;
  --text-mid:   #3d4f63;
  --text-muted: #7a8fa6;
  --bg-page:    #f0f4f8;
  --bg-white:   #ffffff;
  --border:     #dde3ea;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.07);
  --shadow-md:  0 6px 20px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.13);
  --nav-h:      64px;

  /* Tipografia */
  --font-body:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-base:  17px;
  --text-sm:    0.88rem;
  --text-xs:    0.78rem;
  --leading:    1.75;
}

html { scroll-behavior: smooth; font-size: var(--text-base); }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-dark);
  min-height: 100vh;
  line-height: var(--leading);
}

/* ── TOP NAVIGATION BAR ── */
.site-nav {
  position: sticky;
  top: 0; z-index: 100;
  width: 100%;
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  box-shadow: 0 2px 16px rgba(26,58,82,.3);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.site-nav-inner {
  width: 100%; max-width: 980px;
  margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 18px;
}
.site-nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.site-nav-logo img {
  height: 54px; width: auto; display: block;
  filter: drop-shadow(0 0 10px rgba(74,144,217,0.45)) drop-shadow(0 2px 4px rgba(0,0,0,.3)) brightness(1.1);
}
.site-nav-divider { width: 1px; height: 30px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.site-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.site-nav-links a {
  font-size: 0.85rem; font-weight: 600;
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: 7px 13px; border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  white-space: nowrap; letter-spacing: .01em;
}
.site-nav-links a:hover  { background: rgba(255,255,255,.13); color: #fff; }
.site-nav-links a.active { background: rgba(255,255,255,.18); color: #fff; }
.site-nav-links a.nav-cta { background: var(--accent); color: #fff; margin-left: 8px; }
.site-nav-links a.nav-cta:hover { background: #d44b44; }

/* ── PAGE WRAPPER ── */
.page-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
/* Pagine di lettura — colonna larga con testo grande */
.page-wrap.reading {
  max-width: 1050px;
  padding: 40px 32px 72px;
}
@media (min-width: 1200px) {
  .page-wrap.reading {
    max-width: 1180px;
    padding: 48px 40px 80px;
  }
}

/* ── HERO (menu page) ── */
.ginos-hero {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 32px 36px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.ginos-logo {
  display: block; margin: 0 auto 16px;
  height: 130px; width: auto; max-width: 600px;
  filter: drop-shadow(0 2px 10px rgba(44,95,141,0.15));
}
.ginos-tagline {
  font-size: 0.92rem; color: var(--text-muted);
  margin: 0 auto 20px; max-width: 560px; line-height: 1.6;
}

/* Hero nav cards */
.hero-nav {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; max-width: 640px; margin: 0 auto;
}
.hero-nav-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 14px;
  background: var(--blue-pale); border: 1.5px solid #c5d8ef;
  border-top: 3px solid var(--blue-mid); border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.hero-nav-card:hover { background: #ddeaf8; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hnc-icon  { font-size: 1.5rem; line-height: 1; }
.hnc-title { font-size: 0.88rem; font-weight: 700; color: var(--blue-mid); }
.hnc-sub   { font-size: 0.74rem; color: var(--text-muted); text-align: center; line-height: 1.3; }

/* ── CONTENT CARD ── */
.content-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ── Disclaimer ── */
.disclaimer {
  font-size: 0.88rem; color: #92742a;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 10px 16px; margin-bottom: 18px; text-align: center;
}
.disclaimer a { color: var(--blue-mid); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(44,95,141,.3); }
.disclaimer a:hover { color: var(--blue-light); }

/* ── App buttons ── */
.app-btn {
  display: block; width: 100%; margin: 0;
  padding: 18px 20px 16px;
  font-size: 1rem;
  font-family: inherit;
  border-radius: var(--radius-md);
  border: none;
  border-top: 3px solid rgba(255,255,255,0.28);
  background: var(--sector-color, var(--blue-mid));
  background-image: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(0,0,0,.07) 100%);
  color: #fff; cursor: pointer; text-align: left; position: relative;
  transition: transform .15s, filter .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14);
}
.app-btn:hover {
  filter: brightness(1.1); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
.app-btn:active { transform: scale(.99); }
.app-btn.disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.app-btn .app-title {
  display: block; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .1px;
  line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.app-btn .app-sector {
  display: inline-block; margin-top: 8px;
  font-size: .76rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
  letter-spacing: .03em; text-transform: capitalize;
}
.app-btn .viki-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; margin-top: 9px; opacity: .82;
}
.viki-dot           { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.25); }
.viki-dot.bozza     { background: rgba(255,255,255,.32); }
.viki-dot.revisione { background: #ffb300; }
.viki-dot.validata  { background: #69f0ae; box-shadow: 0 0 6px rgba(105,240,174,.6); }

/* ── Desktop grid ── */
@media (min-width: 768px) {
  .menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px; margin-top: 10px;
  }
  .app-btn { margin: 0; min-height: 96px; }
  .app-feedback-btn { display: inline-block !important; position: absolute; top: 12px; right: 12px; }
}
@media (min-width: 1024px) {
  .menu { grid-template-columns: repeat(3, 1fr); }
}

/* ── Filter chips ── */
.filter-section {
  margin-bottom: 18px;
  background: var(--blue-pale);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid #c5d8ef;
}
.filter-label {
  font-size: .78rem; font-weight: 700; color: var(--blue-mid);
  margin-bottom: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.filter-chips   { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid var(--chip-color, var(--blue-mid));
  background: #fff; color: var(--chip-color, var(--blue-mid));
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all .18s; white-space: nowrap; font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.filter-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.filter-chip.active { background: var(--chip-color, var(--blue-mid)); color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18); }

/* ── News banner ── */
.news-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, var(--blue-mid), var(--blue-light));
  border-radius: var(--radius-md); padding: 14px 18px;
  margin-bottom: 10px; cursor: pointer; user-select: none;
  text-decoration: none; transition: opacity .15s; width: 100%;
}
.news-banner:hover { opacity: .92; }
.news-badge { flex-shrink:0; background: var(--accent); color:#fff; font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:8px; }
.news-badge.aggiornata { background: #fb8c00; }
.news-banner-body { flex:1; min-width:0; }
.news-banner-title { font-size:1rem; font-weight:700; color:#fff; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.news-banner-desc  { font-size:.85rem; color:rgba(255,255,255,.82); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.news-banner-arrow { flex-shrink:0; font-size:1.5rem; color:rgba(255,255,255,.75); }
.news-dots         { display:flex; justify-content:center; gap:6px; margin:0 auto 18px; }
.news-dot          { width:7px; height:7px; border-radius:50%; background:#b0c4d8; border:none; padding:0; cursor:pointer; transition:background .2s, transform .2s; }
.news-dot.active   { background: var(--blue-mid); transform:scale(1.3); }

/* ── VIKI banner ── */
.viki-intro {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(90deg, #eef4fb, #f5f7fa);
  border: 1px solid #c5d8ef; border-radius: var(--radius-md);
  padding: 14px 18px; margin-bottom: 18px;
}
.viki-intro-text { flex:1; min-width:180px; }
.viki-intro-text strong { font-size:.82rem; color: var(--blue-mid); text-transform:uppercase; letter-spacing:.06em; }
.viki-intro-text span   { font-size:.88rem; color: var(--text-mid); display:block; margin-top:3px; }
.viki-footer-link {
  display: block; text-align: center;
  margin: 28px auto 0; padding: 15px 24px;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-light));
  color: #fff; border-radius: var(--radius-md);
  font-size: .95rem; font-weight: 700; text-decoration: none;
  transition: opacity .2s; box-shadow: var(--shadow-sm);
}
.viki-footer-link:hover { opacity: .88; }

/* ── VIKI feedback btn ── */
.app-feedback-btn {
  display: none; font-size:.72rem; font-weight:700;
  padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.38);
  color:#fff; cursor:pointer; text-decoration:none;
  transition:background .15s; white-space:nowrap;
}
.app-feedback-btn:hover { background:rgba(255,255,255,.35); }

/* ── Footer ── */
.site-footer {
  text-align: center; padding: 24px;
  font-size: .82rem; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: 36px;
}
.site-footer a { color: var(--blue-light); text-decoration: none; }

/* ── Admin link ── */
.admin-link { margin:12px auto 0; text-align:center; font-size:.92em; }
.admin-link a { color:#0a58ca; text-decoration:none; }
.admin-link a:hover { text-decoration:underline; }
.menu button.disabled { opacity:.55; cursor:not-allowed; }

/* ── Hamburger ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: auto; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.85); border-radius: 2px; transition: all .25s;
}

/* Mobile dropdown */
.nav-mobile-menu {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: linear-gradient(180deg, #1a3a52, #2c5f8d);
  z-index: 99; padding: 8px 16px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu a {
  display: block; font-size: .95rem; font-weight: 600;
  color: rgba(255,255,255,.88); text-decoration: none;
  padding: 12px 14px; border-radius: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08); transition: background .15s;
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { background: rgba(255,255,255,.12); }
.nav-mobile-menu a.nav-cta-m {
  background: var(--accent); color: #fff;
  margin-top: 8px; border-bottom: none;
}

/* ── PWA banner mobile ── */
#pwa-banner-mobile {
  display: none; position: fixed;
  bottom: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(90deg, #1a3a52, #2c5f8d);
  padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  align-items: center; gap: 12px;
}
#pwa-banner-mobile.visible { display: flex; }
.pwa-m-icon { font-size: 1.6rem; flex-shrink: 0; }
.pwa-m-text { flex: 1; min-width: 0; }
.pwa-m-text strong { display: block; font-size: .88rem; color: #fff; font-weight: 700; line-height: 1.2; }
.pwa-m-text span   { font-size: .75rem; color: rgba(255,255,255,.72); }
.pwa-m-btn { background: #fff; color: #2c5f8d; border: none; border-radius: 8px; padding: 8px 14px; font-size: .85rem; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.pwa-m-close { background: none; border: none; color: rgba(255,255,255,.55); font-size: 1.2rem; cursor: pointer; flex-shrink: 0; padding: 4px; }
body.pwa-banner-shown { padding-bottom: 72px; }

/* ── NOTA MODAL ── */
#notaModal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px;}
#notaModal.open{display:flex;}
.nota-box{
  background:#fff;border-radius:20px;max-width:640px;width:100%;
  padding:48px 52px 44px;position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.25);
  max-height:88vh;overflow-y:auto;
}
.nota-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:1.8rem;color:#bbb;cursor:pointer;line-height:1;transition:color .15s;}
.nota-close:hover{color:#333;}
.nota-icon{font-size:2.6rem;margin-bottom:16px;display:block;text-align:center;}
.nota-title{font-size:1.55rem;font-weight:700;color:#1a2332;text-align:center;margin-bottom:6px;line-height:1.2;}
.nota-subtitle{font-size:.9rem;color:#94a3b8;text-align:center;margin-bottom:32px;letter-spacing:.02em;}
.nota-body p{font-size:1.1rem;line-height:1.85;color:#2d3748;margin-bottom:20px;}
.nota-body strong{color:#1a2332;}
.nota-body em{font-style:normal;color:#2c5f8d;font-weight:600;}
.nota-viki{margin-top:24px;background:linear-gradient(135deg,#eef4fb,#f5f7fa);border:1px solid #c5d8ef;border-left:4px solid #2c5f8d;border-radius:12px;padding:20px 24px;}
.nota-viki-label{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2c5f8d;margin-bottom:8px;}
.nota-viki p{font-size:1.05rem;line-height:1.8;color:#4a5568;margin:0;}
.nota-btn{display:block;margin:32px auto 0;background:linear-gradient(135deg,#2c5f8d,#4a90d9);color:#fff;border:none;border-radius:50px;padding:14px 40px;font-size:1.05rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 24px rgba(44,95,141,0.3);transition:transform .15s,box-shadow .15s;}
.nota-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(44,95,141,0.4);}

/* ── Responsive ── */
@media (max-width: 640px) {
  :root { --text-base: 16px; }
  .nav-hamburger { display: flex; }
  .site-nav-links { display: none; }
  .site-nav-divider { display: none; }
  .site-nav-logo img { height: 44px; }
  .site-nav-inner { padding: 0 14px; }
  .hero-nav { grid-template-columns: repeat(3,1fr); gap:8px; }
  .hnc-sub  { display: none; }
  .ginos-logo { height: 80px; }
  .ginos-hero { padding: 20px 16px 18px; }
  .ginos-tagline { font-size: .82rem; }
  .page-wrap { padding: 16px 12px 48px; }
  #pwa-banner { display: none !important; }
  .nota-box { padding: 32px 24px 28px; }
  .nota-body p { font-size: 1rem; }
}
@media (min-width: 641px) {
  #pwa-banner-mobile { display: none !important; }
  .nav-hamburger { display: none !important; }
  .nav-mobile-menu { display: none !important; }
}

/* ══════════════════════════════════════════════
   READING MODE — tipografia da articolo
   ══════════════════════════════════════════════ */

.reading .content-card {
  padding: 32px 36px;
}

/* Titoli sezione */
.reading .section h2,
.reading h2 {
  font-size: 1.45rem !important;
  line-height: 1.3;
  margin-bottom: 20px !important;
}

/* Testo corpo */
.reading p,
.reading .def-box p,
.reading .tl-body,
.reading .compare-item,
.reading .feat-card p,
.reading .sources li {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: var(--text-dark) !important;
}

/* Definition box */
.reading .def-box {
  padding: 24px 28px !important;
  border-radius: 14px !important;
}

/* Feature cards */
.reading .feat-card {
  padding: 22px 20px !important;
}
.reading .feat-card h4 {
  font-size: 1.05rem !important;
  margin-bottom: 8px !important;
}

/* Timeline */
.reading .tl-title {
  font-size: 1.05rem !important;
  margin-bottom: 6px !important;
}

/* Quote */
.reading .quote-box blockquote {
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
}

/* Tool cards */
.reading .tool-card .tc-name {
  font-size: .95rem !important;
}
.reading .tool-card .tc-desc {
  font-size: .85rem !important;
  line-height: 1.6 !important;
}

/* Page header */
.reading .page-header h1 {
  font-size: 2.2rem !important;
}
.reading .page-header .sub {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

/* ── Page header — tutto bianco, sempre ── */
.page-header,
.page-header h1,
.page-header h2,
.page-header p,
.page-header .sub,
.page-header .overline {
  color: #ffffff !important;
}
.page-header .overline { opacity: .78; }
.page-header .sub { opacity: .92; }

/* ── Feedback page header ── */
.viki-header,
.viki-header h1,
.viki-header p,
.viki-header .viki-sub,
.viki-header .viki-badge-header {
  color: #ffffff !important;
}
.viki-header .viki-sub { opacity: .92; }

/* ── Book nav button ── */
.nav-book-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  background: linear-gradient(135deg, #c8a96e, #e8c98a);
  color: #1a2332 !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s !important;
  box-shadow: 0 2px 10px rgba(200,169,110,0.35);
  white-space: nowrap;
}
.nav-book-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,169,110,0.5) !important;
  background: linear-gradient(135deg, #d4b87a, #f0d49a) !important;
}
.nav-book-m {
  display: block;
  font-size: .92rem; font-weight: 700;
  color: #c8a96e !important;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(200,169,110,.3);
  margin-top: 6px;
  transition: background .15s;
}
.nav-book-m:hover { background: rgba(200,169,110,.1) !important; }

/* ── Book banner on menu page ── */
.book-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #060c1a 0%, #0d1628 50%, #111e35 100%);
  border: 1px solid rgba(200,169,110,.3);
  border-left: 4px solid #c8a96e;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  cursor: pointer;
}
.book-banner:hover {
  border-color: rgba(200,169,110,.7);
  box-shadow: 0 8px 32px rgba(200,169,110,.15);
  transform: translateY(-2px);
}
.book-banner-icon {
  font-size: 2.8rem; flex-shrink: 0; line-height: 1;
}
.book-banner-body { flex: 1; min-width: 0; }
.book-banner-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #c8a96e; margin-bottom: 4px;
}
.book-banner-title {
  font-size: 1.05rem; font-weight: 700; color: #eef2f8;
  margin-bottom: 4px; line-height: 1.3;
}
.book-banner-sub {
  font-size: .84rem; color: rgba(255,255,255,.55); line-height: 1.5;
}
.book-banner-cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, #c8a96e, #e8c98a);
  color: #1a2332; font-weight: 700; font-size: .85rem;
  padding: 10px 20px; border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(200,169,110,.3);
}
@media (max-width: 640px) {
  .book-banner { flex-wrap: wrap; gap: 12px; }
  .book-banner-cta { width: 100%; text-align: center; }
  .nav-book-btn { display: none; }
}