/* SOLALA's public documents. Type follows the app: Archivo for display,
   Inter for text (src/lib/app-fonts.ts). Both are self-hosted, because a privacy
   policy that fetched its own fonts from Google would contradict itself. */

@font-face {
  font-family: Archivo;
  src: url('/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterVar;
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterVar;
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --cobalt: #2247f6;
  --cobalt-deep: #1b38c9;
  --pink: #f59bc5;
  --ink: #1a1c26;
  --muted: #6b7185;
  --rule: #ebe9ee;
  --paper: #ffffff;
  --sand: #faf9f7;
  --measure: 36rem;
  --radius: 14px;
  --sans: InterVar, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Archivo, var(--sans);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The masthead carries the landing page's gradient, the same cobalt with its
   pink blobs, so the documents feel like the same site. The body below stays
   plain and light, because long legal text on a gradient is unreadable. */
.masthead {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(2.75rem, 7vw, 5rem) 1.5rem clamp(2.25rem, 5vw, 3.5rem);
  background:
    radial-gradient(70% 60% at 8% 92%, rgba(245, 155, 197, 0.9), transparent 68%),
    radial-gradient(55% 50% at 95% 30%, rgba(245, 155, 197, 0.6), transparent 70%),
    linear-gradient(155deg, var(--cobalt) 0%, var(--cobalt-deep) 100%);
}

.masthead-inner,
.sheet,
.footer-inner {
  max-width: 78rem;
  margin: 0 auto;
}

.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.wordmark::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.35rem;
  border-radius: 2px;
  background: var(--pink);
}

.masthead h1 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--display);
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.masthead p {
  margin: 0;
  max-width: var(--measure);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

.sheet {
  display: grid;
  gap: 0;
  padding: 0 1.5rem 1rem;
}

@media (min-width: 60rem) {
  .sheet { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.column {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  min-width: 0;
}

@media (min-width: 60rem) {
  .column + .column { border-left: 1px solid var(--rule); padding-left: 3.5rem; }
}

.column + .column { border-top: 1px solid var(--rule); }

@media (min-width: 60rem) {
  .column + .column { border-top: 0; }
}

.lang {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(34, 71, 246, 0.07);
  color: var(--cobalt);
  font-size: 0.75rem;
  font-weight: 600;
}

.column h2 {
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.column h3 {
  margin: 2.75rem 0 0.65rem;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.column h4 {
  margin: 1.75rem 0 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.005em;
}

.column p,
.column li {
  margin: 0 0 0.9rem;
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.75;
}

.column ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.column li { margin-bottom: 0.45rem; }
.column li::marker { color: var(--pink); }

.column a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.column a:hover { color: var(--cobalt-deep); }

.addr {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.7;
}

.flag {
  margin: 1.25rem 0;
  padding: 1rem 1.2rem;
  background: #fffaf0;
  border: 1px solid #f2e3bf;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.flag strong { display: block; margin-bottom: 0.25rem; }

table {
  width: 100%;
  table-layout: fixed;
  margin: 0.75rem 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

col.c-key { width: 26%; }
col.c-val { width: 50%; }
col.c-basis { width: 24%; }

th, td {
  padding: 0.7rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: break-word;
  line-height: 1.6;
}

th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8125rem;
}

td:first-child { font-weight: 600; }

td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Below this width three columns leave ~120px each, which breaks German
   compounds mid-word (Gunzenhause/n). Stack each row instead: the category in
   bold, then one labelled line per remaining column. Labels come from the
   `data-label` attributes, which mirror the <th> text. */
@media (max-width: 48rem) {
  table, thead, tbody, tr, th, td { display: block; }
  table { font-size: 0.9375rem; }
  thead { display: none; }

  tr { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  td { padding: 0.1rem 0; border-bottom: 0; }

  td:first-child { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }

  td:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--muted);
  }
}

/* `.column p` is (0,1,1) and would otherwise win over a single class here,
   silently dropping the top margin. */
.column .stamp,
.stamp {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.provisional {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--ink);
}

.sitefoot {
  margin-top: 1.5rem;
  padding: 2rem 1.5rem max(2.5rem, env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--muted);
}

.sitefoot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.sitefoot a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.sitefoot a:hover, .sitefoot a:focus-visible { color: var(--ink); border-bottom-color: var(--pink); }

/* ---- Language switching -------------------------------------------------
   Both languages stay in the HTML. Without JavaScript nothing is hidden and
   the page reads as it always did, side by side, losing a whole language to
   a failed script is not an acceptable degradation for a legal document.
   `lang-js` is set by an inline snippet in <head>, before first paint, so the
   page never flashes both languages before settling on one. */

.langpick { display: none; }

.lang-js .langpick {
  display: inline-flex;
  margin-top: 1.25rem;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.langpick button {
  appearance: none;
  border: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.langpick button:hover { color: #fff; }

.langpick button[aria-pressed="true"] {
  background: #fff;
  color: var(--cobalt);
}

.langpick button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Hide the language that is not selected. Only ever hides, so no display
   value has to be restored and inline/block elements both behave. */
.lang-js[data-lang="de"] [data-lang-block="en"],
.lang-js[data-lang="en"] [data-lang-block="de"] { display: none; }

/* One column instead of two once a single language is shown. The masthead and
   footer narrow to match, or their text sits flush left against a centred
   column and the page looks broken. */
@media (min-width: 60rem) {
  .lang-js .sheet { grid-template-columns: minmax(0, 46rem); justify-content: center; }
  .lang-js .column + .column { border-left: 0; padding-left: 0; }
  .lang-js .masthead-inner,
  .lang-js .footer-inner { max-width: 46rem; }
}

.lang-js .column + .column { border-top: 0; }

/* The per-column "Deutsch" / "English" chip is redundant once the picker
   decides which one you see. */
.lang-js .lang { display: none; }