/* ============================================================
   VRS — legal pages (Terms / Privacy / Cookies / Cybersecurity)
   Ported from vrs.no legal shell, remapped to v54 tokens.
   ============================================================ */

.legal-shell { padding: 48px 0 80px; min-height: 60vh; }
.legal-wrap  { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.legal-header { margin-bottom: 40px; }
.legal-label {
  display: inline-block; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px;
}
.legal-header h1 {
  font-size: clamp(26px, 4vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--text); margin: 0 0 10px;
}
.legal-meta { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Shown only when the site language is not English (i18n.js sets data-lang) */
.legal-locale-notice {
  display: none; margin-bottom: 24px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; color: var(--text-2);
}
[data-lang="no"] .legal-locale-notice,
[data-lang="de"] .legal-locale-notice { display: block; }

.legal-toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 24px; margin-bottom: 40px;
}
.legal-toc-title {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 12px;
}
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 5px; }
.legal-toc a  { font-size: 14px; color: var(--accent-text); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

.legal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl, 20px); padding: 40px 44px;
  box-shadow: var(--shadow-card);
}
.legal-card h2 {
  font-size: 19px; font-weight: 700; color: var(--text);
  margin: 36px 0 12px; padding-top: 4px; scroll-margin-top: 86px;
}
.legal-card h2:first-child { margin-top: 0; }
.legal-card h3 {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin: 22px 0 8px; scroll-margin-top: 86px;
}
.legal-card p  { font-size: 15px; color: var(--text-2); line-height: 1.75; margin: 0 0 12px; }
.legal-card ul, .legal-card ol { padding-left: 22px; margin: 0 0 12px; }
.legal-card li { font-size: 15px; color: var(--text-2); line-height: 1.75; margin-bottom: 4px; }
.legal-card a  { color: var(--accent-text); }
.legal-card a:hover { text-decoration: underline; }

.legal-card table {
  width: 100%; border-collapse: collapse; margin: 0 0 12px;
  font-size: 13.5px;
}
.legal-card th, .legal-card td {
  text-align: left; padding: 8px 10px;
  border: 1px solid var(--hairline); color: var(--text-2);
  vertical-align: top; line-height: 1.5;
}
.legal-card th {
  color: var(--text); font-weight: 600;
  background: var(--surface-2); font-family: var(--mono); font-size: 12px;
}

.legal-contact {
  margin-top: 8px; padding: 16px 20px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; color: var(--text-2);
}
.legal-contact a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.legal-contact a:hover { text-decoration: underline; }

.legal-divider { border: none; border-top: 1px solid var(--hairline); margin: 36px 0; }

.legal-back-top { text-align: center; margin-top: 40px; }
.legal-back-top a {
  font-size: 14px; color: var(--accent-text);
  text-decoration: none; font-weight: 600;
}
.legal-back-top a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .legal-card { padding: 24px 18px; }
  .legal-card h2 { font-size: 17px; }
  .legal-toc { padding: 16px 18px; }
  /* cookie/retention tables can exceed narrow phones — scroll inside the card */
  .legal-card .legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}