/* ===== Testonaut — civic editorial theme (light + dark) ===== */
:root {
  --theme: #f6f2ea;
  --entry: #ffffff;
  --primary: #15233f;
  --secondary: #5b6472;
  --tertiary: #efe9dd;
  --content: #262b32;
  --border: #e9e2d5;
  --accent: #0a4595;
  --accent-soft: #eaf1fb;
  --accent-red: #cf3a2e;
  --radius: 16px;
  --hero-a: #eef3fb; --hero-b: #ffffff;
}
.dark {
  --theme: #0f131b;
  --entry: #161c26;
  --primary: #f2f4f8;
  --secondary: #b0b8c4;
  --tertiary: #1b212c;
  --content: #e6e9ef;
  --border: #2a313d;
  --accent: #7fb0ff;
  --accent-soft: #17233a;
  --accent-red: #ff6f62;
  --hero-a: #1c2942; --hero-b: #10151e;
}

/* subtle tricolore civic hairline at the very top */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 1000;
  background: linear-gradient(90deg, #0a4595 0 33.33%, #f3f3f1 33.33% 66.66%, #cf3a2e 66.66% 100%);
}

/* ---- base typography ---- */
html { font-size: 18px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7; color: var(--content); background: var(--theme);
}
h1, h2, h3, h4, .post-title, .entry-header h1, .entry-header h2,
.home-info .entry-header h1, .archive-header .archive-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color: var(--primary); letter-spacing: .2px;
}
.post-content h2 { margin-top: 2.1rem; }
.post-content h2::after {
  content: ""; display: block; width: 2.3rem; height: 3px; margin-top: .5rem;
  background: var(--accent); border-radius: 2px;
}

/* ---- links ---- */
.post-content a, .entry-content a, .post-footer a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition: border-color .15s, color .15s;
}
.post-content a:hover, .entry-content a:hover { border-bottom-color: var(--accent); }

/* ---- header / nav ---- */
.logo a { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-weight: 700; font-size: 1.55rem; color: var(--primary); }
#menu a { border-radius: 8px; padding: 6px 12px; transition: background .15s, color .15s; }
#menu a:hover { background: var(--accent-soft); color: var(--accent); }
#menu .active { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* ---- sticky frosted header (2026) ---- */
header.header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--theme) 80%, transparent);
  backdrop-filter: saturate(1.25) blur(12px);
  -webkit-backdrop-filter: saturate(1.25) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

/* ---- home hero ---- */
.first-entry {
  position: relative; overflow: hidden; min-height: auto;
  margin: 2rem 0 2.8rem; padding: 3.6rem 3rem 3.2rem;
  border: 1px solid var(--border); border-radius: 24px;
  background:
    radial-gradient(130% 110% at 100% 0%, var(--hero-a) 0%, transparent 58%),
    var(--entry);
  box-shadow: 0 30px 60px -32px rgba(20,30,60,.30);
}
/* decorative French cocarde (tricolore roundel), pure CSS, tucked in the corner */
.first-entry::before {
  content: ""; position: absolute; right: -34px; top: -34px; width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none; opacity: .16;
  background: radial-gradient(circle, #cf3a2e 0 16%, #f7f7f5 16% 38%, #0a4595 38% 60%, transparent 60%);
}
.home-info .entry-header h1, .home-info h1 {
  position: relative; max-width: 16ch;
  font-size: 3rem; line-height: 1.06; margin-bottom: .75rem; color: var(--primary);
}
.home-info .entry-content { position: relative; max-width: 46ch; font-size: 1.2rem; line-height: 1.65; color: var(--content); opacity: 1; }

/* ---- post list cards ---- */
.post-entry {
  position: relative; overflow: hidden;
  background: var(--entry); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.6rem 1.85rem; box-shadow: 0 12px 28px -20px rgba(20,30,60,.20);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.post-entry::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #0a4595, #cf3a2e); opacity: 0; transition: opacity .16s ease;
}
.post-entry:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -26px rgba(20,30,60,.32); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.post-entry:hover::before { opacity: 1; }
.entry-header h2 { font-size: 1.5rem; line-height: 1.25; }
.entry-content { color: var(--secondary); opacity: 1; font-size: 1rem; line-height: 1.6; }
.entry-hint, .entry-footer, .post-meta, .archive-meta { color: var(--secondary); }
.post-meta a { color: var(--accent); }

/* ---- single post ---- */
.post-title { font-size: 2.25rem; line-height: 1.18; }
.post-content { font-size: 1.06rem; }
.post-content blockquote {
  border-inline-start: 4px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 8px 8px 0; padding: .6rem 1rem; margin-inline: 0;
}

/* ---- tables (Reiztabelle & co) ---- */
.post-content table { border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); margin: 1.3rem 0; }
.post-content thead th { background: var(--accent-soft); color: var(--primary); }
.post-content th, .post-content td { border: 1px solid var(--border); padding: .5rem .75rem; }
.post-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tertiary) 45%, transparent); }

/* ---- hero call-to-action ---- */
.cta-button, .cta-ghost {
  display: inline-block; margin-top: 1.5rem; padding: .72rem 1.5rem;
  border-radius: 11px; font-weight: 600; text-decoration: none;
  border-bottom: none !important; transition: transform .12s, background .15s, border-color .15s;
}
.cta-button {
  background: var(--accent); color: #fff !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cta-button:hover { transform: translateY(-2px); }
.cta-ghost {
  margin-inline-start: .6rem; color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}
.cta-ghost:hover { background: var(--accent-soft); }

/* ---- footer ---- */
.footer { color: var(--secondary); }
.footer a { color: var(--secondary); border-bottom: 1px solid transparent; transition: color .15s; }
.footer a:hover { color: var(--accent); }