/* =========================================================
   FINDER Akademie — listmonk public pages custom stylesheet
   Injected via appearance.public.custom_css.
   Tokens 1:1 from FINDER Design System / src/styles/global.css.
   Overrides /public/static/style.css where needed.
   ========================================================= */

/* Self-hosted Ubuntu & Ubuntu Mono (latin subset). Files live under
   /var/listmonk/uploads/fonts on the server, served by listmonk at /uploads/. */
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/uploads/fonts/ubuntu-300.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/uploads/fonts/ubuntu-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/uploads/fonts/ubuntu-500.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/uploads/fonts/ubuntu-700.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/uploads/fonts/ubuntu-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/uploads/fonts/ubuntu-mono-700.woff2") format("woff2");
}

:root {
  --font-sans: "Ubuntu", system-ui, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --brand-50:#e6f7fa; --brand-100:#c5ebf1; --brand-200:#92dae4;
  --brand-300:#54c3d2; --brand-400:#1cb1c3; --brand-500:#00a5b7;
  --brand-600:#008f9e; --brand-700:#0a7380; --brand-800:#0f5762;
  --brand-900:#0f3c44; --brand-950:#072228;

  --ink-0:#fbfaf8; --ink-50:#f6f5f2; --ink-75:#f1f0ec; --ink-100:#e9ebee;
  --ink-200:#d5d8dd; --ink-300:#b3b8c0; --ink-400:#8b919b; --ink-500:#656b75;
  --ink-600:#464b54; --ink-700:#2f333b; --ink-800:#1c1f25; --ink-900:#0f1217;

  --background:#fbfaf8;
  --foreground:#0f1217;
  --muted:#656b75;
  --border:#e9ebee;

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
}

/* --- Reset on defaults ------------------------------------ */
html, body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 15.5px;
}

body::before {
  /* FINDER accent-stripe at the very top of every public page */
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-500) 12%, transparent) 0%,
    var(--brand-500) 40%,
    var(--brand-300) 50%,
    var(--brand-500) 60%,
    color-mix(in srgb, var(--brand-500) 12%, transparent) 100%
  );
}

a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-500) 35%, transparent);
  text-underline-offset: 3px;
}
a:hover { color: var(--foreground); text-decoration-color: var(--brand-500); }

label { color: var(--ink-700); }

h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--foreground);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 300; }
h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h3 { font-size: 1.125rem; }

/* --- Layout shell ----------------------------------------- */
.container {
  margin: 48px auto 24px;
  max-width: 620px;
  padding: 0 16px;
}

/* The "wrap" is the editorial content card. Fokus-Motiv (vier Ecken, Mitte offen)
   drawn as 8 thin gradient strips layered on top of the white background, so we
   don't need to change the HTML. Border stays off — the four L-brackets alone
   carry the framing, hairline-style. */
.wrap {
  position: relative;
  padding: 44px 40px;
  background:
    linear-gradient(var(--brand-500), var(--brand-500)) top    left  / 22px 2px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) top    left  / 2px 22px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) top    right / 22px 2px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) top    right / 2px 22px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) bottom left  / 22px 2px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) bottom left  / 2px 22px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--brand-500), var(--brand-500)) bottom right / 2px 22px no-repeat,
    #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Header / logo ---------------------------------------- */
.header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 32px;
}
.header .logo img {
  max-width: 180px;
  height: auto;
  display: block;
}

/* Editorial eyebrow over the page title (in subscription.html the <h2>
   becomes the page title; we let the hairline + subtle mono label speak). */
.wrap h2:first-of-type {
  position: relative;
  margin: 0 0 22px;
  padding-top: 8px;
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

/* --- Section rhythm --------------------------------------- */
.section {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.section:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- Inputs ----------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink-900);
  box-shadow: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
}
input[disabled] { opacity: 0.55; }

/* --- Buttons ---------------------------------------------- */
.button {
  font-family: var(--font-sans);
  background: var(--brand-500);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-500);
  min-width: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  letter-spacing: 0;
}
.button:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 40%, transparent);
  outline-offset: 2px;
}
.button.button-outline {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--ink-300);
}
.button.button-outline:hover {
  background: #fff;
  color: var(--foreground);
  border-color: var(--foreground);
}

/* --- Lists (subscription checkboxes) ---------------------- */
.lists { padding: 0; }
.lists li {
  display: block;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.lists li:last-child { border-bottom: 0; }
.lists input[type="checkbox"] {
  accent-color: var(--brand-500);
  margin-right: 10px;
  transform: translateY(1px);
}
.lists .description {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin-left: 26px;
  margin-top: 2px;
}

.row { margin-bottom: 18px; }
.row:last-child { margin-bottom: 0; }

/* --- Archive list ----------------------------------------- */
.archive { padding: 0; margin: 18px 0 0; }
.archive li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.archive li:last-child { border-bottom: 0; }
.archive .date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

/* --- Pagination ------------------------------------------- */
.pagination { margin-top: 28px; }
.pg-page {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.pg-page:hover { border-color: var(--border); color: var(--foreground); }
.pg-page.pg-selected {
  color: var(--brand-700);
  border-color: var(--brand-500);
  font-weight: 500;
  text-decoration: none;
}

/* --- Error / message copy --------------------------------- */
.error { color: #c53030; font-family: var(--font-mono); font-size: 13.5px; }
.small { font-size: 13.5px; color: var(--muted); }

/* --- Unsubscribe "everything" link ------------------------ */
.unsub-all {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--muted);
}

/* --- Login page (OIDC button area) ------------------------ */
.login button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
}
.login input[name="totp_code"] {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  letter-spacing: 8px;
  text-align: center;
}

/* --- Footer ----------------------------------------------- */
footer.container {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 24px;
  margin-bottom: 40px;
  padding: 0 16px;
}
footer.container a { color: var(--muted); text-decoration: none; }
footer.container a:hover { color: var(--foreground); }

/* --- Small screens ---------------------------------------- */
@media screen and (max-width: 650px) {
  .container { margin: 24px auto 16px; padding: 0 12px; }
  .wrap { padding: 28px 22px; }
  .header .logo img { max-width: 140px; }
}