/* Blog styling. Separate from index.html's stylesheet on purpose: the app page carries about
   1,500 lines of CSS for the uploader, the workbook table and the dialogs, none of which a
   prose page needs. The design tokens below are copied from index.html so the two match; they
   are the only duplication, and they change rarely. */

:root {
  --bg: #090909;
  --surface: #111111;
  --border: #262626;
  --border-strong: #3a3a3a;
  --text: #f5f5f5;
  --text-secondary: #c5c5c5;
  --text-hint: #8a8a8a;
  --primary: #2d4bff;
  /* The blue in the logo mark itself, not the accessible-on-dark --primary-text. Used where
     something should read as the same blue as the logo, like the nav plus. Held the same in
     both themes on purpose: the logo square does not shift either. */
  --brand-blue: #1A33FF;
  --glow: rgba(45, 75, 255, 0.28);
  --primary-hover: #4560ff;
  --primary-pressed: #2340e6;
  --primary-text: #7b8cff;
  --primary-text-hover: #9eabff;
  --on-primary: #ffffff;
  --surface-hover: #1a1a1a;
  --nav-bg: rgba(9, 9, 9, 0.78);
  --gutter: clamp(16px, 4vw, 48px);
  --content-max: 1280px;
  --measure: 68ch;
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-figures: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --radius-md: 12px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5f9;
    --surface: #ffffff;
    --border: #e0e3eb;
    --border-strong: #c8cdd9;
    --text: #0c0e14;
    --text-secondary: #3d4250;
    --text-hint: #5f6474;
    --primary-hover: #2340e6;
    --primary-pressed: #1c33c4;
    --primary-text: #2d4bff;
    --primary-text-hover: #2340e6;
    --surface-hover: #f0f2f8;
    --nav-bg: rgba(244, 245, 249, 0.82);
    --glow: rgba(45, 75, 255, 0.18);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f5f9; --surface: #ffffff; --border: #e0e3eb; --border-strong: #c8cdd9;
  --text: #0c0e14; --text-secondary: #3d4250; --text-hint: #5f6474;
  --primary-hover: #2340e6; --primary-pressed: #1c33c4;
  --primary-text: #2d4bff; --primary-text-hover: #2340e6; --surface-hover: #f0f2f8;
  --nav-bg: rgba(244, 245, 249, 0.82); --glow: rgba(45, 75, 255, 0.18); color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-text-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code {
  font-family: var(--font-figures); font-size: 0.92em;
  padding: 1px 5px; border-radius: 4px; background: var(--surface-hover);
}

/* Nav and footer. Same class names, same rules as index.html, so the two pages share one
   piece of chrome rather than two that drift. Copied for the same reason as the tokens above:
   a prose page should not load 1,500 lines of app CSS. The one deliberate difference is the
   phone layout, noted below. */
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand svg { height: 26px; width: auto; display: block; }

.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; gap: 36px; height: 60px; }
/* The links sit on the same baseline as the word "Parserje", not centred against the wordmark's
   box. The word's baseline is at y=21.3 of a 28-unit viewBox, so at a 26px render it lands
   19.8px down a 26px box, while a 13px link's baseline lands 14.5px down its own 19.5px line
   box. Centring both leaves the links ~2px high; this puts them back on it. */
.nav-links { display: flex; gap: 26px; margin-right: auto; position: relative; top: 2px; }
.nav-links a { color: var(--text-hint); text-decoration: none; font-size: 13px; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 18px; position: relative; top: 2px; }
/* Nav CTA: not a filled pill. A blue plus against the normal text colour, so the bar stays
   quiet and the action still reads as the primary one. The filled .btn-primary is still what
   the hero, the dialogs and the blog posts use. */
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
}
.nav-cta-icon { flex: none; color: var(--brand-blue); transition: filter 120ms; }
.nav-cta:hover { color: var(--text); }
.nav-cta:hover .nav-cta-icon { filter: brightness(1.3); }
.nav-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }


.btn-primary {
  height: 42px; min-width: 132px; padding: 0 20px; border: none; border-radius: var(--radius-md);
  background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-pressed); }

/* Phones: the section anchors come off the bar. Everything they point at is on this page,
   so scrolling gets there, and the bar keeps the wordmark and the convert action. */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav .wrap { gap: 16px; justify-content: space-between; }
}

.site-footer { border-top: 1px solid var(--border); padding-block: 48px 28px; margin-top: auto; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--text); }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; text-align: right; font-size: 12px; color: var(--text-hint); }
@media (max-width: 520px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-meta { align-items: flex-start; margin-left: 0; text-align: left; }
}

/* Prose. One measure, set once, so every block lines up down the page. */
main { flex: 1 0 auto; padding-inline: var(--gutter); }
.post, .blog-index { max-width: var(--measure); margin: 0 auto; padding-top: 48px; line-height: 1.6; }
.post > *, .blog-index > * { margin-inline: 0; }
h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 700; margin: 0 0 12px; }
.post h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; margin: 48px 0 12px; }
.post h3 { font-size: 19px; line-height: 1.3; margin: 36px 0 8px; }
.post p, .post li { color: var(--text-secondary); }
.post-lede { font-size: 18px; color: var(--text) !important; }
.post-back { font-size: 14px; margin: 0 0 20px; }
.post-back a { color: var(--text-hint); text-decoration: none; }
.post-back a:hover { color: var(--text); }
.post-meta { font-size: 13px; color: var(--text-hint); font-family: var(--font-figures); margin: 0 0 32px; }
.post ul { padding-left: 20px; }
.post li { margin-bottom: 6px; }

/* The round trip: the workbook you key from is the yardstick you check against. */
.round-trip { margin: 32px 0; padding: 0; }
.round-trip ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.round-trip li {
  counter-increment: rt; display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 12px 16px; background: var(--surface); font-size: 15px;
}
.round-trip li::before {
  content: counter(rt); flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-hover); color: var(--text-hint);
  font-family: var(--font-figures); font-size: 11px;
}
.round-trip ol { counter-reset: rt; }
.round-trip .rt-check { color: var(--text); }
.round-trip .rt-check::before { background: var(--primary); color: var(--on-primary); }
.round-trip figcaption { margin-top: 10px; font-size: 13px; color: var(--text-hint); }

/* Each post answers two or three questions; the rest live on the landing page FAQ. Same
   accordion as there: real <details>, so it works with no script. */
.post-faq { margin-top: 56px; padding-top: 8px; border-top: 1px solid var(--border); }
.post-faq h2 { margin-top: 24px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-of-type { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary-text); }
.faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.faq-mark { flex: none; color: var(--text-hint); transition: transform 0.18s ease; }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
@media (max-width: 640px) { .faq-item summary { font-size: 15px; } }
.faq-item > p { margin: -4px 0 20px; max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.post-faq-more { font-size: 14px; margin-top: 18px; }

/* The landing page's closing panel, the same box as its upload form: surface, border, 20px
   radius, soft blue glow behind. A post ends on the same invitation the landing page ends on
   rather than on a lone button. */
.closing { padding-block: clamp(72px, 10vw, 120px) 0; padding-inline: 0; }
.closing-box {
  position: relative; isolation: isolate; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.closing-box::before {
  content: ""; position: absolute; z-index: -1; inset: -80px 8% -60px;
  background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(30px); pointer-events: none;
}
.closing h2 {
  margin: 0; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.06;
  letter-spacing: -0.032em; font-weight: 700; text-wrap: balance;
}
.closing p { margin: 0; color: var(--text-secondary); max-width: 52ch; }
.closing .btn-primary { text-decoration: none; }

.read-next { margin-top: 56px; padding-top: 8px; border-top: 1px solid var(--border); }
.read-next h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-hint); font-family: var(--font-figures); margin: 24px 0 12px; }
.read-next ul { list-style: none; margin: 0; padding: 0; }
.read-next li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--border); }
.read-next a { font-size: 16px; font-weight: 500; text-decoration: none; }
.read-next span { font-size: 14px; color: var(--text-hint); }

.post-list { list-style: none; margin: 40px 0 0; padding: 0; }
.post-list li { padding: 24px 0; border-top: 1px solid var(--border); }
.post-list li:last-child { border-bottom: 1px solid var(--border); }
.post-list h2 { font-size: 21px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -0.01em; }
.post-list h2 a { text-decoration: none; }
.post-list p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.post-list .post-meta { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }