/* static-page.css — use as /css/legal.css and /css/about.css
   Base styling for about / imprint / legal style pages
*/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Generic body styling for static content pages */
body.static-body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background: #f3f4f6; /* light grey */
  color: #111827;      /* near black */
}

/* Main prose layout */
.app-main.narrow.prose {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  line-height: 1.65;
}

/* Visually hide the main <h1> (keep it for SEO & accessibility) */
.app-main.narrow.prose h1 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* Headings inside cards */
.app-main.narrow.prose h2 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 0.6em;
}

/* Intro/outro text */
.app-main.narrow.prose > p,
.app-main.narrow.prose > ul,
.app-main.narrow.prose > ol {
  margin: 0 0 1em;
}

/* Muted explanatory text */
.app-main.narrow.prose .muted {
  color: #6b7280;
  font-size: 0.95rem;
}

/* Card sections (operator, copyright, links, …) */
.app-main.narrow.prose .card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px 16px;
  margin-top: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.app-main.narrow.prose .card > h2:first-child {
  margin-top: 0.1rem;
}

/* Links */
.app-main.narrow.prose a {
  color: #1d4ed8; /* blue */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-main.narrow.prose a:hover,
.app-main.narrow.prose a:focus-visible {
  color: #e67e00; /* your orange */
  text-decoration-thickness: 2px;
}

/* Focus outlines for keyboard navigation */
.app-main.narrow.prose :where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid #e67e00;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive padding tweak for smaller screens */
@media (max-width: 768px) {
  .app-main.narrow.prose {
    padding: 20px 12px 40px;
  }

  .app-main.narrow.prose .card {
    padding: 16px 16px 14px;
  }
}

/* Print styles */
@media print {
  body.static-body {
    background: #ffffff;
    color: #000000;
  }

  .app-main.narrow.prose {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .app-main.narrow.prose .card {
    box-shadow: none;
    border-radius: 0;
    page-break-inside: avoid;
  }

  .app-main.narrow.prose a {
    color: #000000;
    text-decoration: underline;
  }
}