/**
 * Shared styles for the standalone legal pages (privacy and cookies, IT and EN).
 * Kept in one file so the four documents cannot drift apart visually.
 */

/* Light by default, dark only when explicitly chosen: same rule as the site,
   so the two do not disagree when the operating system is set to dark. */
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --dim: #475569;
  --border: #e2e8f0;
  --accent: #2563eb;
  --shadow: rgba(15, 23, 42, .1);
}

:root[data-theme="dark"] {
  --bg: #020617;
  --card: #0f172a;
  --text: #f1f5f9;
  --dim: #94a3b8;
  --border: #1e293b;
  --accent: #60a5fa;
  --shadow: rgba(0, 0, 0, .4);
}

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  font-size: 16px;
}

main { max-width: 720px; margin: 0 auto; }

nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 3.25rem; /* keeps the links clear of the floating theme button */
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}

a { color: var(--accent); }

h1 { font-size: 1.75rem; line-height: 1.3; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: .95rem; margin: 1.75rem 0 .5rem; }
p, li { color: var(--dim); }
li { margin-bottom: .4rem; }
strong { color: var(--text); }

.updated { font-size: .85rem; color: var(--dim); margin-top: 0; }

.box {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.box p:first-child { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text); font-weight: 600; }
td { color: var(--dim); }
code { font-size: .85em; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem; }

footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--dim); }

/* Floating controls. Hidden until the script sets data-theme, so with JavaScript
   off the page stays clean instead of showing buttons that do nothing. */
.fab {
  position: fixed;
  right: 1.25rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--card);
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow);
  transition: color .2s, border-color .2s, transform .2s, opacity .3s, visibility .3s;
}

:root:not([data-theme]) .fab { display: none; }

.fab:hover { color: var(--accent); border-color: var(--accent); }
.fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fab svg { width: 20px; height: 20px; }

#theme-toggle { top: 1.25rem; }

#back-to-top { bottom: 1.25rem; opacity: 0; visibility: hidden; }
#back-to-top.is-visible { opacity: 1; visibility: visible; }
#back-to-top:hover { transform: translateY(-2px); }

.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

@media (max-width: 640px) {
  .fab { right: .85rem; width: 40px; height: 40px; }
  #theme-toggle { top: .85rem; }
  #back-to-top { bottom: .85rem; }
}