/* ============================================================
   page-legal.css — legals.html-specific styles
   Plan 01-C: extracted from legals.html lines 24-164.

   Dark-theme: legals inherits base.css :root tokens (--bg #1A1E24,
   --fg #F5F5F5, etc). Topbar / footer / nav also inherit base.css.
   Only legals-unique layout (hero, TOC, doc body, cookie table)
   declared here.

   Loaded AFTER base.css.
   ============================================================ */

/* Legals-specific spacing tweaks */
:root {
  --pad-x: 2rem;
  --pad-section: 6rem;
}

/* ------------------------------------------------------------
   HERO — editorial
   ------------------------------------------------------------ */
.l-hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--line); position: relative; }
.l-hero .frame { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: end; }
.l-hero h1 { font-weight: 600; font-size: clamp(3.5rem, 7vw, 6.25rem); line-height: .92; letter-spacing: -.04em; text-wrap: balance; color: var(--fg); }
.l-hero h1 em { font-style: italic; font-family: var(--font-serif); font-weight: 400; color: var(--accent); }
.l-hero .micro { margin-bottom: 1.5rem; display: block; color: var(--fg-mute); }
.l-hero .lead  { font-size: clamp(1rem, 1.15vw, 1.1875rem); line-height: 1.55; color: var(--fg-dim); text-wrap: pretty; }
.l-hero .side { padding-bottom: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.l-hero .side p { font-size: .9375rem; line-height: 1.65; color: var(--fg-dim); max-width: 42ch; }
.l-hero .updated { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--fg-mute); text-transform: uppercase; padding-top: 1rem; border-top: 1px dashed var(--line-2); }
.l-hero .updated b { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------------------
   TOC / SECTION PICKER (sticky)
   ------------------------------------------------------------ */
.toc { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--bg) 88%, transparent); }
.toc .frame { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; gap: 2rem; }
.toc-label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }
.toc-links { display: flex; gap: .25rem; flex-wrap: wrap; }
.toc-links a { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; padding: .5rem .85rem; border-radius: .4rem; border: 1px solid transparent; color: var(--fg-dim); transition: background .15s, color .15s, border-color .15s; }
.toc-links a:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.toc-links a.cur { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ------------------------------------------------------------
   DOC LAYOUT
   ------------------------------------------------------------ */
.doc { padding: 5rem 0; border-bottom: 1px solid var(--line); }
.doc:last-of-type { border-bottom: none; }
.doc .frame { display: grid; grid-template-columns: 16rem 1fr; gap: 4rem; align-items: start; }
.doc-aside { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
.doc-aside .sec-label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute); text-align: left; margin-bottom: 0; }
.doc-aside h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3vw, 2.75rem); line-height: .95; letter-spacing: -.015em; color: var(--accent); }
.doc-aside .meta { padding-top: 1rem; border-top: 1px dashed var(--line-2); display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--fg-mute); }
.doc-aside .meta b { color: var(--fg); font-weight: 500; }

.doc-body { max-width: 40rem; }
.doc-body > * + * { margin-top: 1.1rem; }
.doc-body h3 { margin-top: 2.5rem; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.doc-body h3::before { content: attr(data-n); font-family: var(--font-mono); font-size: .75rem; color: var(--fg-mute); margin-right: .75rem; font-weight: 400; letter-spacing: .04em; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p { font-size: .9375rem; line-height: 1.7; color: var(--fg-dim); }
.doc-body p b { color: var(--fg); font-weight: 600; }
.doc-body ul { padding-left: 1.2rem; }
.doc-body ul li { font-size: .9375rem; line-height: 1.7; color: var(--fg-dim); margin-bottom: .35rem; list-style-type: "\2014  "; padding-left: .35rem; }
.doc-body a.inline { color: var(--accent); border-bottom: 1px solid var(--line-2); transition: border-color .15s; }
.doc-body a.inline:hover { border-color: var(--accent); }
.doc-body .note { padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent); background: rgba(255,255,255,.03); margin-top: 1.5rem; font-size: .875rem; line-height: 1.65; color: var(--fg-dim); }
.doc-body .note b { color: var(--fg); }
.doc-body .callout { margin-top: 1.5rem; padding: 1.5rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: .5rem; }
.doc-body .callout h4 { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: .85rem; }
.doc-body .callout dl { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; font-size: .8125rem; }
.doc-body .callout dt { color: var(--fg-mute); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; }
.doc-body .callout dd { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------------------
   COOKIE TABLE
   ------------------------------------------------------------ */
.cookies { margin-top: 2rem; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; background: rgba(255,255,255,.03); }
.cookies .row { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1fr; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); align-items: baseline; font-size: .8125rem; }
.cookies .row:first-child { border-top: none; background: rgba(255,255,255,.05); }
.cookies .row.head { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.cookies .row .nm { font-family: var(--font-mono); font-weight: 500; color: var(--fg); }
.cookies .row .tg { display: inline-block; padding: .2rem .55rem; border-radius: .35rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.cookies .tg.ess { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.cookies .tg.fun { background: rgba(255,255,255,.06); color: var(--fg-dim); }
.cookies .tg.ana { background: rgba(245, 200, 110, .18); color: #F5C86E; }

/* ------------------------------------------------------------
   Mobile breakpoint
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav { display: none; }
  .l-hero { padding: 3rem 0 2.5rem; }
  .l-hero .frame { grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
  .l-hero h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: .98; letter-spacing: -.03em; }
  .l-hero .side { padding-bottom: 0; }
  /* TOC sits below the 4rem topbar, not on top of it */
  .toc { top: 4rem; }
  .toc .frame { gap: .5rem; padding-top: .65rem; padding-bottom: .65rem; flex-wrap: wrap; }
  .toc-label { display: none; }
  .toc-links { gap: .25rem; width: 100%; flex-wrap: wrap; }
  .toc-links a { padding: .4rem .65rem; font-size: .6875rem; }
  .doc-aside h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1.05; letter-spacing: -.005em; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }
  .doc { padding: 3rem 0; }
  .doc .frame { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .doc-body { min-width: 0; }
  .doc-aside { position: static; }
  .doc-body { max-width: none; }
  .doc-body h3 { margin-top: 2rem; }
  .doc-body h3::before { display: block; margin-right: 0; margin-bottom: .15rem; }
  .doc-body .callout { padding: 1.15rem; }
  .doc-body .callout dl { grid-template-columns: 1fr; }
  .cookies .row { grid-template-columns: 1fr; gap: .35rem; padding: .9rem 1rem; }
  .cookies .row.head { display: none; }
}

/* Phase 4 / D-09 sub-processor table — added 04-02 */
.subprocessors {
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;                    /* mobile: horizontal scroll for 6-col table */
}
.subprocessors table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.45;
}
.subprocessors thead th {
  text-align: left;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.subprocessors tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg);
}
.subprocessors tbody tr:last-child td {
  border-bottom: none;
}
.subprocessors tbody td:nth-child(3) {  /* Sub-processor + giurisdizione column — emphasize */
  color: var(--fg);
}
@media (max-width: 720px) {
  .subprocessors table { font-size: 0.8125rem; }
  .subprocessors thead th, .subprocessors tbody td { padding: .45rem .55rem; }
}