/* ==========================================================================
   dev.drhoke.com · the drhoke.com liquid glass system, retinted for Outpost
   --------------------------------------------------------------------------
   Loaded after style.css (an unchanged copy of drhoke.com's). Only the color
   tokens and a few page parts change: the night sky and lantern amber of the
   Outpost icon replace the rose and teal of drhoke.com.
   ========================================================================== */

:root {
  --rose: #f0992b;              /* link underline, now lantern amber */
  --rose-deep: #a66109;
  --teal: #1d2750;

  --text: #1b2138;
  --muted: #3e4664;
  --heading: #1d2750;
  --accent-text: #8f520a;

  --bg-base: #f3ead9;
  --bg-gradient: linear-gradient(155deg, #faf8f2 0%, #f3e9d6 34%, #ecd9b8 64%, #e6d3b6 100%);
  --blob-1: rgba(240, 153, 43, 0.34);
  --blob-2: rgba(255, 196, 120, 0.42);
  --blob-3: rgba(29, 39, 80, 0.2);
  --blob-4: rgba(90, 98, 128, 0.22);

  --glass-tint: linear-gradient(145deg, rgba(29, 39, 80, 0.88) 0%, rgba(166, 97, 9, 0.84) 100%);
  --btn-solid-bg: linear-gradient(180deg, rgba(41, 53, 104, 0.95) 0%, rgba(29, 39, 80, 0.97) 100%);
  --header-glass: rgba(255, 252, 245, 0.55);
  --scroll-edge: rgba(243, 234, 217, 0.82);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rose: #ffb84d;
    --text: #f3efe4;
    --muted: #cfc9bb;
    --heading: #faf8f2;
    --accent-text: #ffb84d;

    --bg-base: #0b1024;
    --bg-gradient: linear-gradient(170deg, #0b1024 0%, #121a3a 45%, #1d2750 80%, #2a2f55 100%);
    --blob-1: rgba(240, 153, 43, 0.26);
    --blob-2: rgba(166, 97, 9, 0.24);
    --blob-3: rgba(90, 110, 200, 0.22);
    --blob-4: rgba(29, 39, 80, 0.55);

    --glass-regular: rgba(20, 28, 62, 0.5);
    --glass-tint: linear-gradient(145deg, rgba(29, 39, 80, 0.7) 0%, rgba(166, 97, 9, 0.6) 100%);
    --btn-solid-bg: linear-gradient(180deg, rgba(255, 252, 245, 0.96) 0%, rgba(243, 239, 228, 0.93) 100%);
    --btn-solid-fg: #1d2750;
    --header-glass: rgba(20, 28, 62, 0.6);
    --scroll-edge: rgba(11, 16, 36, 0.82);
  }
}

::selection { background: rgba(240, 153, 43, 0.35); }

/* The wordmark in the header: the icon and a name, where drhoke.com has its logo image */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark img { width: 40px; height: 40px; }

/* The app icon in the hero, where drhoke.com has the portrait */
.app-icon {
  display: block;
  width: min(300px, 62vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 22px 44px rgba(11, 16, 36, 0.32));
}

/* Facts and steps inside cards */
.fact-list,
.legal-card ul {
  margin: 0;
  padding-left: 1.2em;
}
.fact-list li,
.legal-card li { margin: 0.45em 0; line-height: 1.6; }

.legal-card {
  max-width: 820px;
  margin: 0 auto;
}
.legal-card h1 { margin-bottom: 4px; }
.legal-card h2 { margin-top: 2em; }
.legal-card h3 { margin-top: 1.5em; color: var(--heading); }
.legal-card p,
.legal-card li { line-height: 1.65; }
.legal-card .updated { color: var(--muted); font-size: 14px; margin-top: 0; }
.legal-card hr {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: 3em 0 2em;
}

.card-stack { display: grid; gap: 24px; max-width: 820px; }
.card-stack > .impressum-card, .card-stack > .contact-card { width: 100%; max-width: none; margin: 0; }
.cta-row .button { margin-top: 4px; }

/* Card headings on the support page: the legal-page sizes read smaller than the h3s below them */
.card-stack .impressum-card h2 { font-size: 26px; margin-top: 0; }
.card-stack .impressum-card h3 { font-size: 18px; }