/* ==========================================================================
   Styling for the four static legal pages: /impressum/, /imprint/,
   /datenschutz/ and /privacy/.

   These pages ship no bundle, so they cannot use Tailwind — its utilities
   only exist for markup the build scans, and the build never sees public/.
   Everything they need is therefore here, including copies of the colour
   tokens from src/styles.css. src/legal-pages.spec.ts compares the two files
   token by token, so a change to the design system that never reaches this
   file fails there and names the token.
   ========================================================================== */

/* Only the subsets these pages actually use: Inter for the text, DM Mono 500
   for the wordmark. The app's other five faces would be five requests for
   glyphs no legal page renders. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Design tokens — copies of src/styles.css §2.1 and §2.2
   -------------------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --paper-aged: #fafaf8;
  --grid: #e8e8e8;
  --ink: #1a1a1a;
  --ink-mid: #737373;
  --dimension: #1e40af;
  --font-mono: 'DM Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* The app writes data-theme before the first paint, from a script that needs
   JavaScript. These pages have to be right without it — that is their whole
   reason for existing — so the system preference carries the dark theme on
   its own and the stored choice only overrides it. That is why the dark
   values appear twice: once for the media query, once for the attribute. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0c0e14;
    --paper-aged: #12151e;
    --grid: #1e2130;
    --ink: #d4d4dc;
    --ink-mid: #7c7f96;
    --dimension: #60a5fa;
  }
}

:root[data-theme='dark'] {
  --paper: #0c0e14;
  --paper-aged: #12151e;
  --grid: #1e2130;
  --ink: #d4d4dc;
  --ink-mid: #7c7f96;
  --dimension: #60a5fa;
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}

a {
  color: inherit;
  cursor: pointer;
}

/* The header mirrors the app's nav bar: paper ground, grid hairline, and the
   wordmark in the dimension blue that is reserved for it. It does not repeat
   the app's tabs — none of them would work here. */
.page-head {
  border-bottom: 1px solid var(--grid);
  background-color: var(--paper);
}

.page-head > div {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--dimension);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wordmark svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* The language switch is a link to the sibling page, not a control: without
   JavaScript there is nothing to toggle, and the other language is its own
   address. 48px of height keeps it at the project's touch target (WCAG 2.5.8
   itself asks for 24px) even though it reads as small text. */
.lang {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.25rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  text-decoration: none;
}

.lang:hover {
  color: var(--dimension);
}

/* --------------------------------------------------------------------------
   The legal text itself
   -------------------------------------------------------------------------- */

/* 46rem is a reading measure, not the app's 1200px content width: these pages
   are prose, and a line of legal German at 1200px is unreadable. */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.legal h1 {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--grid);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.legal h3 {
  margin: 1.75rem 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.legal h4 {
  margin: 1.25rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.legal section {
  margin-bottom: 2rem;
}

.legal section:first-of-type h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal p {
  margin: 0 0 0.75rem;
  overflow-wrap: break-word;
}

.legal ul {
  margin: 0 0 0.75rem;
  padding-left: 1.125rem;
}

.legal li {
  margin-bottom: 0.375rem;
}

.legal a {
  color: var(--dimension);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The objection notice under Art. 21 GDPR is capitalised in the source text
   because the law wants it to stand out. Set at body size it shouts across
   the whole page, so it runs one step smaller and gets its own ground. */
.legal .shout {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--paper-aged);
  border-left: 2px solid var(--grid);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.legal .source {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--grid);
  font-size: 12px;
  color: var(--ink-mid);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.page-foot {
  border-top: 1px solid var(--grid);
  padding: 0.75rem 1rem;
}

.page-foot > div {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--ink-mid);
}

.page-foot a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-mid);
  text-decoration: none;
}

.page-foot a:hover {
  color: var(--dimension);
}

@media (min-width: 960px) {
  .page-head > div,
  .legal,
  .page-foot > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .page-head > div {
    height: 56px;
  }

  .legal {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }
}