/* === SPP Wiki — Brand stylesheet ============================================
   Palette: rosa #D41B5F  •  blu #00A3D9  •  verde #78BE20
   Font: Montserrat
   ============================================================================ */

:root {
  --spp-pink:  #D41B5F;
  --spp-blue:  #00A3D9;
  --spp-green: #78BE20;
  --spp-dark:  #1a1a2e;
  --spp-gray:  #f4f5f7;
  --spp-bg:    #ffffff;
  --spp-text:  #2d2d2d;
  --spp-muted: #6c757d;
  --spp-border:#e0e0e0;
  --sidebar-w: 300px;
  --header-h:  60px;
  --max-w:     880px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--spp-gray); color:var(--spp-text); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ───────── HEADER (chiaro) ───────── */
.wiki-header {
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:#ffffff; display:flex; align-items:center;
  padding:0 20px; z-index:1000; gap:14px;
  box-shadow:0 1px 0 var(--spp-border), 0 2px 8px rgba(0,0,0,.04);
  border-bottom:3px solid transparent;
  background-image:linear-gradient(#fff,#fff), linear-gradient(90deg, var(--spp-pink) 0%, var(--spp-pink) 33%, var(--spp-blue) 33%, var(--spp-blue) 66%, var(--spp-green) 66%, var(--spp-green) 100%);
  background-origin:border-box; background-clip:padding-box, border-box;
}
.logo { display:flex; align-items:center; gap:6px; padding:6px 10px;
  text-decoration:none; border-radius:8px; transition:background .15s; }
.logo:hover { background:var(--spp-gray); }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; transition:transform .2s; }
.logo:hover .dot { transform:scale(1.15); }
.dot-p { background:var(--spp-pink); }
.dot-b { background:var(--spp-blue); }
.dot-g { background:var(--spp-green); }

.search-box { flex:1; max-width:480px; position:relative; margin-left:8px; }
.search-box input {
  width:100%; padding:9px 16px 9px 38px; border:1px solid var(--spp-border); border-radius:8px;
  background:var(--spp-gray); color:var(--spp-dark); font-family:inherit;
  font-size:13px; outline:none; transition:all .15s;
}
.search-box input::placeholder { color:var(--spp-muted); }
.search-box input:focus { background:#fff; border-color:var(--spp-pink); box-shadow:0 0 0 3px rgba(212,27,95,.08); }
.search-box::before { content:"🔍"; position:absolute; left:12px; top:50%;
  transform:translateY(-50%); font-size:13px; opacity:.6; }

.search-results {
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:white;
  border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.25); max-height:60vh;
  overflow-y:auto; display:none; z-index:1100;
}
.search-results.show { display:block; }
.search-results .result {
  padding:12px 16px; border-bottom:1px solid var(--spp-border); cursor:pointer;
  transition:background .12s;
}
.search-results .result:hover { background:var(--spp-gray); }
.search-results .result-title { font-weight:600; font-size:13px; color:var(--spp-dark); margin-bottom:3px; }
.search-results .result-section { font-size:11px; color:var(--spp-pink); font-weight:500; text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; }
.search-results .result-snippet { font-size:12px; color:var(--spp-muted); line-height:1.5; }
.search-results mark { background:rgba(212,27,95,.15); color:var(--spp-pink); padding:1px 2px; border-radius:2px; }
.search-results .empty { padding:24px; text-align:center; color:var(--spp-muted); font-size:13px; }

.edit-toggle {
  background:var(--spp-gray); border:1px solid var(--spp-border); color:var(--spp-dark);
  font-size:18px; cursor:pointer; padding:6px 10px; border-radius:6px; transition:all .15s;
}
.edit-toggle:hover { background:#fff; border-color:var(--spp-pink); color:var(--spp-pink); }
.edit-toggle.active { background:var(--spp-pink); color:white; border-color:var(--spp-pink); }

/* Pulsante "Menù" — visibile e cliccabile su mobile */
.menu-toggle {
  display:none;
  background:var(--spp-pink); color:white; border:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; padding:9px 18px; border-radius:8px;
  box-shadow:0 2px 8px rgba(212,27,95,.25); transition:all .15s;
}
.menu-toggle:hover, .menu-toggle:focus { background:#a8154a; color:white; outline:none; }
.menu-toggle:active { transform:scale(.96); }

/* ───────── SIDEBAR ───────── */
.wiki-sidebar {
  position:fixed; top:var(--header-h); left:0; width:var(--sidebar-w);
  height:calc(100vh - var(--header-h)); background:white;
  border-right:1px solid var(--spp-border); overflow-y:auto;
  padding:16px 0 60px; z-index:900; transition:transform .3s;
}
.wiki-sidebar nav { padding:0 14px; }
.wiki-sidebar nav ul { list-style:none; padding:0; margin:0; }
.wiki-sidebar nav > ul > li { margin-bottom:1px; }

.sidebar-home a {
  display:block; padding:9px 14px; color:var(--spp-dark); text-decoration:none;
  font-weight:600; font-size:12px; border-radius:6px; margin-bottom:8px;
  border-left:3px solid transparent; transition:all .15s;
}
.sidebar-home a:hover, .sidebar-home a.active {
  background:var(--spp-gray); border-left-color:var(--spp-pink); color:var(--spp-pink);
}

.sidebar-section-title {
  display:block; padding:9px 14px; color:var(--spp-dark); text-decoration:none;
  font-weight:700; font-size:11.5px; border-radius:6px; letter-spacing:.3px;
  border-left:3px solid transparent; transition:all .15s; text-transform:uppercase;
}
.sidebar-section-title:hover, .sidebar-section-title.active {
  background:var(--spp-gray); border-left-color:var(--spp-pink); color:var(--spp-pink);
}

.sidebar-children { margin:2px 0 8px; padding:0; max-height:0; overflow:hidden;
  transition:max-height .25s ease; }
.sidebar-section.expanded .sidebar-children { max-height:1200px; }

.sidebar-children > li > a {
  display:block; padding:5px 14px 5px 28px; color:#555; text-decoration:none;
  font-size:11.5px; font-weight:500; border-radius:4px; transition:all .15s;
  border-left:2px solid transparent; margin-left:6px;
}
.sidebar-children > li > a:hover { background:var(--spp-gray); color:var(--spp-pink); }
.sidebar-children > li > a.active {
  color:var(--spp-pink); font-weight:700; background:rgba(212,27,95,.06);
  border-left-color:var(--spp-pink);
}

/* ───────── MAIN CONTENT ───────── */
.wiki-content {
  margin-left:var(--sidebar-w); margin-top:var(--header-h);
  padding:30px 48px 80px; max-width:calc(var(--sidebar-w) + var(--max-w) + 96px);
}

.breadcrumb {
  font-size:12px; color:var(--spp-muted); margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--spp-border);
}
.breadcrumb a { color:var(--spp-blue); text-decoration:none; }
.breadcrumb a:hover { color:var(--spp-pink); }
.breadcrumb .bc-sep { margin:0 6px; color:var(--spp-border); }

.page-title {
  font-size:28px; font-weight:800; color:var(--spp-dark); margin-bottom:24px;
  padding-bottom:14px; border-bottom:3px solid var(--spp-pink); line-height:1.3;
}

.content h1 { font-size:24px; font-weight:800; color:var(--spp-dark); margin:40px 0 18px;
  padding-bottom:10px; border-bottom:2px solid var(--spp-pink); }
.content h2 { font-size:19px; font-weight:700; color:var(--spp-blue); margin:32px 0 14px;
  padding-bottom:6px; border-bottom:1px solid var(--spp-border); }
.content h3 { font-size:15px; font-weight:600; color:var(--spp-dark); margin:24px 0 10px; }
.content h4 { font-size:14px; font-weight:600; color:#444; margin:18px 0 8px; }

.content p { margin:0 0 14px; font-size:14.5px; color:#3d3d3d; }
.content ul, .content ol { margin:0 0 16px; padding-left:24px; }
.content li { font-size:14.5px; margin-bottom:6px; color:#3d3d3d; }
.content li > ul, .content li > ol { margin:6px 0 4px; }
.content strong { color:var(--spp-dark); font-weight:600; }
.content em { color:#555; font-style:italic; }
.content blockquote {
  margin:16px 0; padding:12px 18px; border-left:4px solid var(--spp-blue);
  background:rgba(0,163,217,.05); font-style:italic; color:#444;
}
.content hr { margin:30px 0; border:none; border-top:1px solid var(--spp-border); }

.content table {
  width:100%; border-collapse:collapse; margin:20px 0; font-size:13px;
  background:white; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.content th { background:var(--spp-dark); color:white; padding:10px 14px;
  text-align:left; font-weight:600; font-size:12px; }
.content td { padding:10px 14px; border-bottom:1px solid var(--spp-border); vertical-align:top; }
.content tr:last-child td { border-bottom:none; }
.content tr:nth-child(even) td { background:rgba(0,0,0,.015); }

.content a { color:var(--spp-blue); text-decoration:none; border-bottom:1px dotted var(--spp-blue); transition:all .15s; }
.content a:hover { color:var(--spp-pink); border-bottom-color:var(--spp-pink); }

/* link normativa (Normattiva.it) */
.norma-link {
  border-bottom:1px solid var(--spp-pink) !important;
  color:var(--spp-pink) !important; font-weight:600;
}
.norma-link::after {
  content:"⚖"; font-size:9px; margin-left:2px; opacity:.6; vertical-align:super;
}
.norma-link:hover { background:rgba(212,27,95,.08); }

/* link Wikipedia */
.wiki-link-marker {
  display:inline-block; margin-left:3px; padding:0 4px;
  background:#f0f6ff; color:#3366cc !important; font-size:10px; font-weight:700;
  border-radius:3px; text-decoration:none !important; border:none !important;
  vertical-align:super; line-height:1.4; transition:all .15s;
}
.wiki-link-marker:hover { background:#3366cc; color:white !important; }

/* glossario auto-link — sottolineatura verde solida ben visibile */
.glossary-term-link {
  border-bottom:2px solid var(--spp-green) !important;
  color:var(--spp-text) !important; cursor:help; position:relative;
  background:linear-gradient(180deg, transparent 0%, transparent 88%, rgba(120,190,32,.12) 88%, rgba(120,190,32,.12) 100%);
  padding:0 1px;
}
.glossary-term-link:hover {
  color:var(--spp-dark) !important;
  background:linear-gradient(180deg, transparent 0%, transparent 60%, rgba(120,190,32,.25) 60%, rgba(120,190,32,.25) 100%);
}
.glossary-term-link:hover::after {
  content:attr(data-tooltip); position:absolute;
  bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--spp-dark); color:white; padding:10px 14px; border-radius:8px;
  font-size:12px; font-weight:400; line-height:1.5; width:280px; max-width:90vw;
  z-index:2000; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.3);
  white-space:normal; text-align:left;
}
.glossary-term-link:hover::before {
  content:""; position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); border:6px solid transparent;
  border-top-color:var(--spp-dark); z-index:2001;
}

/* tooltip vecchio stile (compat con sorgente) */
.glossary-term {
  border-bottom:1px dashed var(--spp-green); cursor:help; position:relative;
}
.glossary-term:hover::after {
  content:attr(data-tooltip); position:absolute;
  bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--spp-dark); color:white; padding:10px 14px; border-radius:8px;
  font-size:12px; line-height:1.5; width:280px; z-index:2000; pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.3); white-space:normal;
}

/* ───────── BACKLINKS ───────── */
.backlinks {
  margin-top:48px; padding:18px 22px; background:rgba(0,163,217,.06);
  border-left:4px solid var(--spp-blue); border-radius:0 10px 10px 0;
}
.backlinks h4 {
  font-size:13px; font-weight:700; color:var(--spp-blue);
  margin-bottom:10px; text-transform:uppercase; letter-spacing:.4px;
}
.backlinks ul { list-style:none; padding:0; margin:0; }
.backlinks li { font-size:13px; margin-bottom:5px; }
.backlinks a { color:var(--spp-dark); text-decoration:none; border-bottom:1px dotted var(--spp-muted); }
.backlinks a:hover { color:var(--spp-pink); border-bottom-color:var(--spp-pink); }

/* ───────── PAGINATION ───────── */
.pagination {
  margin-top:36px; padding-top:24px; border-top:1px solid var(--spp-border);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.pagination > div { flex:1; min-width:200px; }
.pagination > div:last-child { text-align:right; }
.pagination a {
  display:inline-block; padding:10px 16px; background:white;
  border:1px solid var(--spp-border); border-radius:8px;
  color:var(--spp-dark); font-size:13px; font-weight:600; text-decoration:none;
  transition:all .15s;
}
.pagination a:hover { border-color:var(--spp-pink); color:var(--spp-pink);
  box-shadow:0 4px 12px rgba(212,27,95,.12); }

/* ───────── HOMEPAGE / SECTION INDEX CARDS ───────── */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin:24px 0;
}
.card {
  background:white; border:1px solid var(--spp-border); border-radius:10px;
  padding:20px 22px; text-decoration:none; color:var(--spp-dark);
  display:flex; flex-direction:column; transition:all .2s; min-height:120px;
}
.card:hover {
  border-color:var(--spp-pink); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,27,95,.12);
}
.card-label { font-size:11px; font-weight:700; color:var(--spp-pink);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.card h3 { font-size:16px !important; font-weight:700 !important; color:var(--spp-dark) !important;
  margin:0 0 10px !important; padding:0 !important; border:none !important; }
.card p { font-size:13px; color:var(--spp-muted); margin:0; line-height:1.5; }
.card-arrow { margin-top:auto; padding-top:12px; color:var(--spp-blue); font-size:13px; font-weight:600; }

.hero {
  padding:30px 0 20px; margin-bottom:30px; border-bottom:2px solid var(--spp-border);
}
.hero h1 { font-size:32px; font-weight:800; color:var(--spp-dark);
  border:none; padding:0; margin-bottom:8px; line-height:1.25; }
.hero .subtitle { font-size:16px; color:var(--spp-muted); }
.hero .meta { margin-top:14px; font-size:12px; color:var(--spp-muted); }
.hero .meta .badge { display:inline-block; background:var(--spp-pink); color:white;
  padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; margin-right:8px; }

/* ───────── INFO BOXES ───────── */
.info-box, .warning-box, .success-box {
  padding:14px 18px; margin:16px 0; border-radius:0 8px 8px 0; font-size:13.5px;
}
.info-box { background:rgba(0,163,217,.06); border-left:4px solid var(--spp-blue); }
.warning-box { background:rgba(212,27,95,.06); border-left:4px solid var(--spp-pink); }
.success-box { background:rgba(120,190,32,.08); border-left:4px solid var(--spp-green); }

/* ───────── SWIPE-TO-NEXT-PAGE ───────── */
.swipe-next-zone {
  margin-top:48px; padding:40px 20px 60px;
  border-top:2px dashed var(--spp-border); text-align:center;
  position:relative; transition:background .3s;
}
.swipe-next-zone.armed {
  background:linear-gradient(180deg, transparent, rgba(120,190,32,.06));
}
.swipe-next-zone.firing {
  background:linear-gradient(180deg, rgba(120,190,32,.06), rgba(120,190,32,.18));
}
.swipe-indicator {
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  opacity:.55; transition:opacity .3s;
}
.swipe-next-zone.armed .swipe-indicator,
.swipe-next-zone.firing .swipe-indicator { opacity:1; }

.swipe-arrow {
  width:48px; height:48px; border-radius:50%;
  background:var(--spp-gray); color:var(--spp-green);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
  border:2px solid var(--spp-border);
  transition:all .25s;
}
.swipe-next-zone.armed .swipe-arrow {
  border-color:var(--spp-green); background:white; transform:translateY(2px);
}
.swipe-next-zone.firing .swipe-arrow {
  border-color:var(--spp-green); background:var(--spp-green); color:white;
  animation:bounce 0.6s infinite alternate;
}
@keyframes bounce { from { transform:translateY(0); } to { transform:translateY(6px); } }

.swipe-progress {
  width:140px; height:4px; background:var(--spp-border); border-radius:2px;
  overflow:hidden;
}
.swipe-progress-fill {
  height:100%; width:0%; background:var(--spp-green);
  transition:width .15s ease-out; border-radius:2px;
}

.swipe-label {
  font-size:12px; color:var(--spp-muted); font-weight:500;
  letter-spacing:.2px;
}
.swipe-label strong { color:var(--spp-dark); font-weight:700; }
.swipe-next-zone:last-child { display:flex; justify-content:center; }

/* ───────── BACK TO TOP ───────── */
.btt {
  position:fixed; bottom:24px; right:24px; background:var(--spp-pink); color:white;
  width:44px; height:44px; border-radius:50%; border:none; font-size:20px;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(212,27,95,.4); transition:transform .15s; z-index:900;
}
.btt:hover { transform:scale(1.08); }
.btt.show { display:flex; }

/* ───────── EDIT MODE ───────── */
body.edit-mode .content { outline:2px dashed var(--spp-green); outline-offset:8px; border-radius:6px; }
body.edit-mode .content [contenteditable=true]:hover { background:rgba(120,190,32,.05); }
body.edit-mode .content [contenteditable=true]:focus { background:rgba(120,190,32,.08);
  outline:1px solid var(--spp-green); outline-offset:2px; }
body.edit-mode .pagination, body.edit-mode .backlinks { opacity:.4; pointer-events:none; }

.edit-bar {
  position:fixed; bottom:0; left:0; right:0; background:var(--spp-dark); color:white;
  padding:12px 20px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; z-index:1500; box-shadow:0 -4px 16px rgba(0,0,0,.2); flex-wrap:wrap;
}
.edit-bar-info { font-size:13px; font-weight:500; }
.edit-bar-actions { display:flex; gap:8px; }
.edit-bar button {
  padding:8px 14px; border:none; border-radius:6px; font-family:inherit;
  font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn-export { background:var(--spp-green); color:white; }
.btn-export:hover { background:#5fa018; }
.btn-reset { background:rgba(255,255,255,.15); color:white; }
.btn-reset:hover { background:rgba(255,255,255,.25); }
.btn-close { background:var(--spp-pink); color:white; }
.btn-close:hover { background:#a8154a; }

/* ───────── GLOSSARIO ───────── */
.glossary-index {
  display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 30px;
  padding:16px; background:white; border-radius:8px; border:1px solid var(--spp-border);
}
.glossary-index a {
  display:inline-block; min-width:32px; padding:4px 10px; text-align:center;
  background:var(--spp-gray); border-radius:4px; color:var(--spp-dark);
  font-weight:700; font-size:12px; text-decoration:none; border:none !important;
}
.glossary-index a:hover { background:var(--spp-pink); color:white; }

.glossary-term-block {
  background:white; padding:16px 20px; margin-bottom:14px; border-radius:8px;
  border-left:4px solid var(--spp-green); box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.glossary-term-block h3 {
  font-size:16px !important; font-weight:700 !important; color:var(--spp-pink) !important;
  margin:0 0 8px !important; padding:0 !important; border:none !important;
  display:flex; align-items:center; gap:8px;
}
.glossary-term-block h3::before { content:"📖"; font-size:14px; opacity:.6; }
.glossary-term-block p { font-size:13.5px; margin:0; }
.glossary-term-block:target {
  border-left-color:var(--spp-pink); background:rgba(212,27,95,.04);
  animation:flash .8s ease-out;
}
@keyframes flash {
  0% { background:rgba(212,27,95,.18); }
  100% { background:rgba(212,27,95,.04); }
}
.wiki-deep-link {
  display:inline-block; margin-top:10px; padding:6px 12px;
  background:#f0f6ff; color:#3366cc !important; font-size:12px; font-weight:600;
  border-radius:6px; text-decoration:none !important; border:1px solid #d4e2ff !important;
  transition:all .15s;
}
.wiki-deep-link:hover {
  background:#3366cc; color:white !important; border-color:#3366cc !important;
  transform:translateY(-1px); box-shadow:0 2px 8px rgba(51,102,204,.2);
}
.extra-badge {
  display:inline-block; margin-left:8px; width:18px; height:18px;
  background:var(--spp-green); color:white !important; font-size:11px;
  font-weight:700; line-height:18px; text-align:center; border-radius:50%;
  vertical-align:middle;
}

/* ───────── RICERCA PAGE ───────── */
.search-page-input {
  width:100%; padding:14px 20px; font-size:16px; border:2px solid var(--spp-border);
  border-radius:10px; font-family:inherit; outline:none; transition:border-color .15s;
}
.search-page-input:focus { border-color:var(--spp-pink); }
.search-page-results { margin-top:24px; }
.search-page-result {
  background:white; padding:16px 20px; margin-bottom:10px; border-radius:8px;
  border-left:4px solid var(--spp-blue); cursor:pointer;
}
.search-page-result:hover { border-left-color:var(--spp-pink); }
.search-page-result a { text-decoration:none; color:var(--spp-dark); border:none; }

/* ───────── MOBILE ───────── */
@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .wiki-sidebar { transform:translateX(-100%); width:280px;
    box-shadow:none; }
  .wiki-sidebar.open { transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,.2); }
  .wiki-content { margin-left:0; padding:20px 18px 80px; }
  .page-title { font-size:22px; }
  .content h1 { font-size:19px; }
  .content h2 { font-size:16px; }
  .search-box { max-width:none; }
  .glossary-term-link:hover::after { left:0; transform:none; width:240px; }
  .hero h1 { font-size:24px; }
}

/* ───────── PRINT ───────── */
@media print {
  .wiki-header, .wiki-sidebar, .btt, .edit-bar, .pagination, .breadcrumb { display:none !important; }
  .wiki-content { margin:0; padding:20px; max-width:100%; }
}


/* ───────── PULSANTE CTA (home → Discorsi) ───────── */
.cta-button {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; box-sizing:border-box;
  padding:22px 28px; margin:22px 0 36px;
  background:linear-gradient(135deg, var(--spp-pink) 0%, #a8154a 100%);
  color:#fff !important; text-decoration:none !important; border:none !important;
  border-radius:14px; font-size:18px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 6px 20px rgba(212,27,95,.28);
  transition:all .2s ease;
}
.cta-button:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(212,27,95,.38);
  color:#fff !important;
}
.cta-button:active { transform:translateY(0); }
.cta-button .cta-icon { font-size:22px; }
.cta-button .cta-arrow { margin-left:6px; font-size:20px; transition:transform .2s; }
.cta-button:hover .cta-arrow { transform:translateX(4px); }

/* ───────── TABELLE SCROLLABLI (mobile-friendly) ───────── */
.table-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:18px 0; border-radius:8px;
  background:linear-gradient(to right, transparent 95%, rgba(0,0,0,.06));
}
.table-wrap table { margin:0; min-width:600px; }
.table-wrap.compact table { min-width:480px; font-size:12px; }

/* ───────── MOBILE EXTRA OPTIMIZATIONS ───────── */
@media (max-width: 900px) {
  :root { --header-h: 56px; --max-w: 100%; }
  .wiki-header { padding:0 12px; gap:10px; }
  .menu-toggle { display:inline-flex; align-items:center; padding:8px 14px; font-size:13px; }
  .logo { padding:4px 6px; }
  .wiki-content { padding:16px 14px 80px; }
  .hero { padding:18px 0 14px; margin-bottom:18px; }
  .hero h1 { font-size:22px; }
  .hero .subtitle { font-size:14px; }
  .hero .meta { font-size:11px; }
  .page-title { font-size:20px; padding-bottom:10px; margin-bottom:18px; }
  .content h1 { font-size:18px; }
  .content h2 { font-size:16px; margin:24px 0 10px; }
  .content h3 { font-size:14px; }
  .content p, .content li { font-size:14px; }
  .cards-grid { grid-template-columns:1fr; gap:12px; }
  .card { padding:16px 18px; min-height:0; }
  .cta-button { padding:18px 20px; font-size:16px; margin:18px 0 28px; }
  .content table { font-size:12px; }
  .content th, .content td { padding:8px 10px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size:20px; }
  .page-title { font-size:18px; }
  .cta-button { font-size:15px; padding:16px 18px; }
}