/* sitta.net v4 · assets/style.css */

/* ─── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; -webkit-text-size-adjust:100% }
body {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  background:#fff; color:#111; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
button { font-family:inherit; cursor:pointer }

/* ─── tokens ─────────────────────────────────────────────────────────── */
:root {
  --red:   #cc1111;
  --lime:  #98C232;
  --black: #111;
  --white: #fff;
  --gray:  #888;
  --rule:  #d8d8d8;
  --mono:  'Courier New',Courier,monospace;
  --gap:   clamp(20px,4vw,44px);
  --max:   1080px;
}

/* ─── accessibilità ──────────────────────────────────────────────────── */
/* Nasconde visivamente ma mantiene accessibilità per screen reader e SEO */
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ─── lingua ─────────────────────────────────────────────────────────── */
body:not(.en) .l-en { display:none }
body.en        .l-it { display:none }

/* ─── wrap ───────────────────────────────────────────────────────────── */
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gap) }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════════ */
.site-header {
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  position:sticky; top:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(4px);
  z-index:50;
}
.site-header .wrap {
  display:flex; align-items:center;
  justify-content:space-between;
}
.site-header.no-logo .wrap { justify-content:flex-end }
.site-logo { display:block; line-height:0 }
.header-logo { height:20px; width:auto; display:block }

.lang-toggle {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; background:none;
  border:none; padding:4px 0; color:var(--gray);
  user-select:none;
}
.lang-toggle .sep { opacity:.35 }
body:not(.en) .lang-toggle [data-lang="it"],
body.en        .lang-toggle [data-lang="en"] {
  color:var(--black); font-weight:bold;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — solo logo
═══════════════════════════════════════════════════════════════════════ */
.hero {
  padding:clamp(32px,6vw,56px) 0;
  border-bottom:1px solid var(--rule);
}
.hero-logo { width:clamp(220px,52vw,620px); height:auto }

/* ═══════════════════════════════════════════════════════════════════════
   PAGINA PRINCIPALE — due colonne
═══════════════════════════════════════════════════════════════════════ */
.page-grid {
  display:grid;
  grid-template-columns:5fr 7fr;
  min-height:clamp(380px,52vh,560px);
  border-bottom:1px solid var(--rule);
}

/* ── colonna sinistra: bio ────────────────────────────────────────── */
.col-bio {
  padding:clamp(28px,3.5vw,44px) clamp(24px,3vw,40px) clamp(28px,3.5vw,44px) 0;
  border-right:2px solid var(--red);
  display:flex; flex-direction:column;
}

/* col-label: usato sia come <p> (bio) che come <h2> (network) */
.col-label {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--black);
  font-weight:400; /* annulla il bold ereditato dall'h2 */
  padding-bottom:12px;
  border-bottom:1px solid var(--black);
  margin-bottom:clamp(18px,2.5vw,28px);
}
.bio-block { flex:1 }
.bio {
  font-size:15px; font-weight:300;
  line-height:1.7; color:#333;
  margin-bottom:.85em;
}
.bio:last-child { margin-bottom:0 }

/* contatti in basso a sinistra */
.bio-contacts {
  margin-top:clamp(24px,3vw,40px);
  padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--black);
}
.bio-contacts-label {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--black);
  margin-bottom:10px;
}
.bio-contacts a {
  display:block;
  font-size:14px; font-weight:300; color:var(--black);
  margin-bottom:5px;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .15s,border-color .15s;
  width:fit-content;
}
.bio-contacts a:hover { color:var(--red); border-color:var(--red) }

/* ── colonna destra: network ──────────────────────────────────────── */
.col-network {
  padding:clamp(28px,3.5vw,44px) 0 clamp(28px,3.5vw,44px) clamp(24px,3vw,40px);
}

/* lista network */
.network-list { display:flex; flex-direction:column }
.network-item {
  display:grid;
  grid-template-columns:2.6em 1fr 1.4em;
  gap:0 10px; align-items:center;
  padding:clamp(11px,1.5vw,15px) 0;
  border-bottom:1px solid var(--rule);
  color:var(--black);
  transition:background .17s,color .17s;
}
.network-item:first-child { border-top:1px solid var(--rule) }
.network-item:hover { background:var(--black); color:var(--white) }
.network-item:hover .ni-num   { color:#555 }
.network-item:hover .ni-desc  { color:#888 }
.network-item:hover .ni-arrow { color:#666 }

.ni-num {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; color:var(--gray);
  align-self:start; padding-top:.18em;
}
.ni-body { display:flex; flex-direction:column; gap:3px }
.ni-name {
  font-weight:900;
  font-size:clamp(15px,1.6vw,17px);
  letter-spacing:-.02em; text-transform:uppercase;
  line-height:1.1;
}
.ni-dot {
  display:inline-block;
  width:.28em; height:.28em; border-radius:50%;
  background:var(--red);
  vertical-align:-.04em; margin-left:.06em;
}
.network-item[data-dot="lime"] .ni-dot { background:var(--lime) }
.ni-desc { font-size:13px; font-weight:300; color:#555; line-height:1.4 }
.ni-arrow { font-size:14px; color:var(--gray); text-align:right; align-self:center }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════ */
.site-footer {
  background:#f4f4f4; color:#666;
  padding:clamp(14px,2vw,20px) 0;
  border-top:1px solid var(--rule);
}
.footer-inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.footer-legal { min-width:0 }
.footer-copy {
  font-size:11px; line-height:1.6;
  color:#555; max-width:520px;
  margin-bottom:6px;
}
.footer-piva {
  font-family:var(--mono); font-size:10px;
  color:#888; letter-spacing:.06em;
  margin-top:8px;
}
.footer-links {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.07em; text-align:right;
  white-space:nowrap; flex-shrink:0;
}
.footer-links a,
.footer-cookie-btn {
  color:#666; display:block; margin-bottom:8px;
  transition:color .15s;
  background:none; border:none; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em;
}
.footer-links a:hover,
.footer-cookie-btn:hover { color:var(--black) }

/* ═══════════════════════════════════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--black); color:#aaa;
  padding:16px clamp(16px,3vw,32px);
  display:flex; gap:16px;
  align-items:center; justify-content:space-between;
  z-index:200; border-top:2px solid var(--red);
}
.cookie-banner[hidden] { display:none }
.cookie-text { font-size:12px; line-height:1.5; flex:1 }
.cookie-text a { color:#aaa; text-decoration:underline }
.cookie-btns { display:flex; gap:8px; flex-shrink:0 }
.btn-accept {
  background:var(--red); color:var(--white); border:none;
  padding:7px 18px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .15s;
}
.btn-accept:hover { background:#a00d0d }
.btn-reject {
  background:transparent; color:#666;
  border:1px solid #333;
  padding:7px 18px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.btn-reject:hover { border-color:#666; color:#aaa }

/* ═══════════════════════════════════════════════════════════════════════
   PAGINE LEGALI E 404
═══════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gray); margin-bottom:10px;
}
.doc { padding:clamp(32px,5vw,52px) 0 }
.doc h1 {
  font-weight:900;
  font-size:clamp(26px,4vw,42px);
  letter-spacing:-.03em; text-transform:uppercase;
  margin-bottom:8px;
}
.doc .updated {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; color:var(--gray);
  margin-bottom:clamp(24px,3.5vw,40px);
}
.doc h2 {
  font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.1em;
  margin:clamp(24px,3vw,36px) 0 12px;
  padding-top:20px; border-top:1px solid var(--rule);
}
.doc p {
  font-size:13px; font-weight:300;
  line-height:1.75; margin-bottom:12px; max-width:640px;
}
.doc p strong { font-weight:700 }
.doc a { color:var(--black); text-decoration:underline }
.doc ul {
  font-size:13px; font-weight:300;
  line-height:1.75; padding-left:1.4em;
  margin-bottom:12px; max-width:640px;
}
.doc table {
  width:100%; border-collapse:collapse;
  margin-bottom:24px; font-size:12px;
}
.doc th {
  text-align:left; font-weight:700;
  border-bottom:2px solid var(--black);
  padding:8px 12px 8px 0;
  text-transform:uppercase; font-size:10px; letter-spacing:.1em;
}
.doc td {
  border-bottom:1px solid var(--rule);
  padding:10px 12px 10px 0;
  font-weight:300; vertical-align:top;
}
.doc td:first-child {
  font-family:var(--mono); font-size:11px;
  color:var(--black); width:130px;
}

/* link "← Torna alla home" nelle pagine legali */
.back {
  display:inline-block;
  margin-top:clamp(28px,4vw,44px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray); text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .15s,border-color .15s;
}
.back:hover { color:var(--black); border-color:var(--black) }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width:700px) {
  .page-grid { grid-template-columns:1fr }
  .col-network {
    order:-1;
    padding:clamp(24px,5vw,36px) 0;
  }
  .col-bio {
    order:1;
    border-right:none;
    border-top:2px solid var(--red);
    padding:clamp(24px,5vw,36px) 0;
  }
  .hero-logo { width:clamp(200px,78vw,380px) }
  .footer-inner { grid-template-columns:1fr }
  .footer-links { text-align:left }
}
@media (max-width:480px) {
  .cookie-banner { flex-direction:column; align-items:flex-start }
}
@media (prefers-reduced-motion:reduce) {
  .network-item, .site-header { transition:none }
}