/* Base comune ai due siti: token di design, componenti condivisi (card, tabelle, bottoni, form, codice) e contenuti markdown.
   Ogni sito aggiunge poi il suo tema (pubblico.css, staff.css). Approccio DESKTOP-FIRST: gli stili base sono per il desktop,
   gli adattamenti per schermi piu' piccoli stanno in fondo ai file con @media (max-width: ...). */
:root {
  --wl-cuoio: #2b1b0c;
  --wl-cuoio-2: #4a3017;
  --wl-oro: #c9a24f;
  --wl-oro-2: #e8c872;
  --wl-rosso: #8c1111;
  --wl-rosso-2: #6a0c0c;
  --wl-perg: #f3ebd6;
  --wl-serif: Georgia, "Times New Roman", serif;
  --wl-radius: .9rem;
  --wl-radius-sm: .5rem;
  --wl-shadow: 0 1px 2px rgba(43, 27, 12, .08), 0 8px 24px rgba(43, 27, 12, .08);
  --wl-shadow-lg: 0 2px 4px rgba(43, 27, 12, .10), 0 16px 40px rgba(43, 27, 12, .16);
  --wl-ease: .18s ease;
  --bs-primary: #8c1111;
  --bs-primary-rgb: 140, 17, 17;
  --bs-border-radius: .55rem;
  --bs-border-radius-lg: .9rem;
  --bs-body-line-height: 1.6;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
.md img, .paper img { height: auto; }
::selection { background: rgba(201, 162, 79, .45); }
:focus-visible { outline: 3px solid var(--wl-oro); outline-offset: 2px; border-radius: .3rem; }
.form-control:focus, .form-check-input:focus, .btn:focus-visible { border-color: var(--wl-oro); box-shadow: 0 0 0 .25rem rgba(201, 162, 79, .35); }
.form-check-input:checked { background-color: var(--wl-rosso); border-color: var(--wl-rosso); }
* { scrollbar-width: thin; scrollbar-color: var(--wl-oro) transparent; }
h1, h2, h3, h4 { text-wrap: balance; }

/* pagine */
.page { display: none; }
.page.on { display: block; animation: wl-in .25s ease both; }
@keyframes wl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page.on { animation: none; } html { scroll-behavior: auto; } * { transition: none !important; } }
.hide { display: none !important; }
.nores { display: none; }

/* bottoni */
.btn { transition: background-color var(--wl-ease), border-color var(--wl-ease), transform var(--wl-ease), box-shadow var(--wl-ease); }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn-wl { --bs-btn-bg: var(--wl-rosso); --bs-btn-border-color: var(--wl-rosso); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--wl-rosso-2); --bs-btn-hover-border-color: var(--wl-rosso-2); --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: var(--wl-rosso); --bs-btn-disabled-border-color: var(--wl-rosso); --bs-btn-disabled-color: #fff; box-shadow: 0 2px 6px rgba(140, 17, 17, .25); }
.btn-gold { --bs-btn-bg: var(--wl-oro); --bs-btn-border-color: var(--wl-oro); --bs-btn-color: var(--wl-cuoio); --bs-btn-hover-bg: var(--wl-oro-2); --bs-btn-hover-border-color: var(--wl-oro-2); --bs-btn-hover-color: var(--wl-cuoio); font-weight: 700; box-shadow: 0 2px 8px rgba(201, 162, 79, .35); }

/* card di sezione (stesso stile su vetrina e staff) */
.card.sec { border: 1px solid var(--bs-border-color); border-radius: var(--wl-radius); overflow: hidden; box-shadow: var(--wl-shadow) !important; scroll-margin-top: 5rem; }
.card.sec .card-header { background: linear-gradient(90deg, var(--wl-cuoio), var(--wl-cuoio-2)); color: var(--wl-oro-2); border-bottom: 2px solid var(--wl-oro); padding: .8rem 1.2rem; }
.card.sec .card-header h2 { font-family: var(--wl-serif); font-size: 1.2rem; margin: 0; letter-spacing: .02rem; }
.card.sec .card-body { padding: 1.25rem 1.4rem; }

/* intestazione di pagina (stessa linea oro su entrambi i siti) */
.page-head, .pagetitle { border-bottom: 3px double var(--wl-oro); margin-bottom: 1.6rem; padding-bottom: .7rem; }
.page-head h1, .pagetitle h1 { font-family: var(--wl-serif); font-weight: 700; }

/* tabelle */
.tw { overflow-x: auto; margin: .5rem 0 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--wl-radius-sm); -webkit-overflow-scrolling: touch; }
.tw table, table.t { width: 100%; font-size: .95rem; margin: 0; }
.table-responsive { border: 1px solid var(--bs-border-color); border-radius: var(--wl-radius-sm); }
.tw th, table.t th { background: var(--wl-cuoio); color: var(--wl-oro-2); font-weight: 600; white-space: nowrap; border-color: var(--wl-cuoio-2); }
.tw td, table.t td { vertical-align: top; }
.tw tbody tr:nth-child(even) td, table.t tbody tr:nth-child(even) td { background: rgba(201, 162, 79, .1); }
.tw tbody tr:hover td, table.t tbody tr:hover td { background: rgba(201, 162, 79, .2); }
table.t td:last-child { min-width: 14rem; }

/* testi markdown */
.md { line-height: 1.7; }
.md p { margin-bottom: .8rem; }
.md ul, .md ol { padding-left: 1.4rem; }
.md li { margin: .3rem 0; }
.md code, .tw code, table.t code { background: rgba(201, 162, 79, .25); color: inherit; padding: .08rem .38rem; border-radius: .3rem; font-size: .88em; word-break: break-word; }
.md pre { overflow-x: auto; background: var(--wl-cuoio); color: #f3e4bf; padding: .9rem 1.1rem; border-radius: var(--wl-radius-sm); }
.md pre code { background: none; color: inherit; padding: 0; }
.md blockquote { border-left: 5px solid var(--wl-rosso); background: rgba(201, 162, 79, .15); padding: .7rem 1.1rem; border-radius: 0 var(--wl-radius-sm) var(--wl-radius-sm) 0; margin: 1.1rem 0; }
.md blockquote p { margin: .2rem 0; }
.md hr { border-color: var(--wl-oro); opacity: .5; margin: 1.6rem 0; }
.md img { border-radius: var(--wl-radius-sm); }
.md h3 { font-family: var(--wl-serif); font-size: 1.12rem; font-weight: 700; color: var(--wl-rosso); margin: 1.3rem 0 .45rem; }
[data-bs-theme="dark"] .md h3 { color: var(--wl-oro-2); }
[data-bs-theme="dark"] .md code, [data-bs-theme="dark"] .tw code { background: rgba(201, 162, 79, .22); }

/* indice per schermi piccoli (sostituisce le colonne laterali) */
details.toc-mobile { border: 1px solid var(--bs-border-color); border-radius: var(--wl-radius-sm); background: var(--bs-body-bg); box-shadow: var(--wl-shadow); }
details.toc-mobile summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
details.toc-mobile summary::after { content: "\F282"; font-family: "bootstrap-icons"; transition: transform var(--wl-ease); }
details.toc-mobile[open] summary::after { transform: rotate(180deg); }
details.toc-mobile summary::-webkit-details-marker { display: none; }
details.toc-mobile .list-group { max-height: 55vh; overflow: auto; border-top: 1px solid var(--bs-border-color); border-radius: 0 0 var(--wl-radius-sm) var(--wl-radius-sm); }

@media print { nav, footer, .outline, .sidebar, .topbar, .backdrop, #q-wrap, details.toc-mobile { display: none !important; } .page { display: block !important; animation: none; } main.content { margin: 0 !important; } .card.sec { box-shadow: none !important; } }

/* ---- adattamenti (desktop-first: dal grande al piccolo) ---- */
@media (min-width: 1600px) { .container-xl { max-width: 1440px; } }
@media (max-width: 1199px) {
  table.t td:last-child { min-width: 11rem; }
}
@media (max-width: 991px) {
  .card.sec { scroll-margin-top: 4.5rem; }
  .card.sec .card-body { padding: 1.1rem 1.15rem; }
}
@media (max-width: 767px) {
  .page-head h1, .pagetitle h1 { font-size: 1.6rem; }
  .card.sec .card-header h2 { font-size: 1.1rem; }
  .card.sec .card-body { padding: 1rem; }
  .tw table, table.t { font-size: .88rem; }
  .btn { min-height: 42px; }
}
@media (max-width: 575px) {
  .md ul, .md ol { padding-left: 1.15rem; }
  .btn-lg { --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: 1.05rem; }
}