/*
 * site.css — shared page chrome for tripboard.cloud.
 * Built entirely on the design tokens in tripboard.css (link that first).
 * Owns: base element styles, header, footer, layout containers, the
 * coming-soon pill, and prose styles for content pages.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
}
.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.site-header .wordmark-mark { width: 2.4em; height: 2.4em; }
.site-header .wordmark:hover { text-decoration: none; }
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a { color: var(--ink-muted); font-weight: 500; }
.site-header nav a:hover { color: var(--ink); text-decoration: none; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 4rem;
  padding-block: 2rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
}
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }

/* ---- Coming-soon pill ---- */
.pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Prose (content pages: support, contact, privacy, impressum) ---- */
.prose {
  max-width: 680px;
  margin-inline: auto;
  padding: 2rem 1.5rem 0;
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--title-size);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.prose p, .prose li { margin-bottom: 0.75rem; }
.prose address { font-style: normal; margin-bottom: 0.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose .subtitle { color: var(--ink-muted); font-size: 0.9rem; margin-bottom: 2rem; }

/* The [data-lang] language blocks rely on the hidden attribute; make sure it
   wins even on elements whose author styles set an explicit display. */
[hidden] { display: none !important; }