/* postclaro.de — one stylesheet for every page and language.
 *
 * Colours are the app's default design "Mitternacht" (tokens.dart), fonts the
 * app's Manrope (Latin, Cyrillic) and Tajawal (Arabic), served from this
 * server — nothing is loaded from elsewhere, so the site sets no cookies and
 * needs no banner.
 *
 * Only logical properties (inline/block, start/end): with dir="rtl" the whole
 * layout mirrors without a second stylesheet. test_build_site.py rejects
 * left/right here.
 */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette "Mitternacht" (postklar/app/lib/theme/tokens.dart) */
  --bg: #f7f7fa;
  --surface: #ffffff;
  --surface-subtle: #f1f1f6;
  --border: #e3e3ec;
  --text: #11131a;
  --text-secondary: #474c5c;
  --text-muted: #5a6070;
  --primary: #3730c4;
  --primary-dark: #231f8c;
  --primary-light: #e0defb;
  --primary-faint: #f3f2fe;

  /* Radii and spacing (Radii, Space in tokens.dart) */
  --radius-card: 20px;
  --radius-control: 14px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-arabic: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --measure: 44rem;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Arabic needs a larger size and more line height to stay readable; no
   letter spacing or capitals there. */
html[lang="ar"] body {
  font-family: var(--font-arabic);
  font-size: 1.125rem;
  line-height: 1.8;
}

.breite {
  max-width: calc(var(--measure) + 2 * var(--space-2));
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* Skip link: hidden until it gets keyboard focus. */
.springen {
  position: absolute;
  inset-inline-start: var(--space-2);
  inset-block-start: -100px;
  padding: var(--space-1) var(--space-2);
  background: var(--primary);
  color: var(--surface);
  border-radius: var(--radius-control);
  text-decoration: none;
  z-index: 1;
}

.springen:focus {
  inset-block-start: var(--space-1);
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--primary-dark);
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header */

.kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 64px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  min-height: 48px;
}

.marke img {
  border-radius: 9px;
}

.sprachen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.sprachen a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.sprachen a:hover {
  text-decoration: underline;
}

/* Content card */

.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-2) var(--space-4);
}

@media (min-width: 600px) {
  .karte {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }
}

h1,
h2,
h3 {
  line-height: 1.3;
  font-weight: 700;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 var(--space-1);
}

h2 {
  font-size: 1.25rem;
  margin: var(--space-4) 0 var(--space-1);
  scroll-margin-block-start: var(--space-2);
}

h3 {
  font-size: 1.0625rem;
  margin: var(--space-3) 0 var(--space-1);
  scroll-margin-block-start: var(--space-2);
}

p,
ul,
ol {
  margin: 0 0 var(--space-2);
}

ul,
ol {
  padding-inline-start: 1.25em;
}

li + li {
  margin-block-start: 6px;
}

strong {
  font-weight: 700;
}

.stand {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-block-end: var(--space-3);
}

.leise {
  color: var(--text-secondary);
}

/* "In short" box at the top of a page */

.kurz {
  background: var(--primary-faint);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-2) var(--space-1);
  margin-block-end: var(--space-3);
}

.kurz h2 {
  font-size: 1.0625rem;
  margin-block-start: 0;
}

/* A pointer to one section, e.g. for relatives with the information sheet */

.hinweis {
  border-inline-start: 4px solid var(--primary);
  background: var(--surface-subtle);
  border-start-end-radius: var(--radius-control);
  border-end-end-radius: var(--radius-control);
  padding: var(--space-2);
  margin-block-end: var(--space-3);
}

.hinweis p:last-child,
.kurz ul:last-child,
.kurz p:last-child {
  margin-block-end: var(--space-1);
}

/* Table of contents */

.inhalt {
  background: var(--surface-subtle);
  border-radius: var(--radius-control);
  padding: var(--space-2);
  margin-block-end: var(--space-3);
}

.inhalt-titel {
  font-weight: 700;
  margin-block-end: var(--space-1);
}

.inhalt ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inhalt li + li {
  margin-block-start: 0;
}

.inhalt a {
  display: block;
  padding-block: 9px;
  text-decoration: none;
}

.inhalt a:hover {
  text-decoration: underline;
}

/* Recipients and data, as a list of short entries */

.liste {
  list-style: none;
  padding: 0;
}

.liste > li {
  border-block-start: 1px solid var(--border);
  padding-block: 12px 0;
}

.liste > li + li {
  margin-block-start: 12px;
}

.liste strong {
  display: block;
}

/* The legal basis closes an entry, quieter than the explanation above it. */
.grundlage {
  display: block;
  margin-block-start: 4px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.anbieter {
  font-style: normal;
}

/* One clear action, like the app's primary button (48 px, Radii.control). */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-3);
  background: var(--primary);
  color: var(--surface);
  border-radius: var(--radius-control);
  font-weight: 700;
  text-decoration: none;
}

.knopf:hover {
  background: var(--primary-dark);
  color: var(--surface);
}

.oben {
  margin-block-start: var(--space-4);
  font-size: 0.9375rem;
}

/* Start page */

.held {
  text-align: center;
  padding-block: var(--space-2) var(--space-3);
}

.held img {
  border-radius: 22px;
}

.held h1 {
  margin-block-start: var(--space-2);
}

.unterzeile {
  color: var(--text-secondary);
  font-size: 1.125rem;
  text-wrap: balance;
}

/* Footer */

.fuss {
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-align: center;
  padding-block: var(--space-3) var(--space-5);
}

.fuss nav a {
  display: inline-block;
  padding-block: 12px;
}

.fuss p {
  margin: 0;
}

@media print {
  .springen,
  .sprachen,
  .inhalt,
  .oben {
    display: none;
  }

  body {
    background: var(--surface);
  }

  .karte {
    border: 0;
    padding: 0;
  }
}