/* base.css — theme-invariant primitives. Themes layer on top.
 *
 * Loaded BEFORE the active theme so themed property values apply.
 * Anything that affects accessibility (skip link, focus rings) or
 * layout correctness (overflow-clip for the breakout figure layout)
 * lives here so a theme can't silently break it.
 *
 * See docs/theming.md for the full contract.
 */

* { box-sizing: border-box; }

html {
  font-size: var(--rkr-base-size, 1.0625rem);
  -webkit-text-size-adjust: 100%;
  /* Tell the browser the page works in both schemes so it paints
     the initial canvas (the area shown before CSS body backgrounds
     apply) in the user's preferred scheme — without this, dark-mode
     visitors see a white flash on every navigation until our themed
     body background loads. Per-theme stylesheets can narrow this
     (e.g. terminal.css → `color-scheme: dark`) if a theme genuinely
     supports only one mode. */
  color-scheme: light dark;
}

body {
  margin: 0;
  /* rkr-pos-full breaks out via `width: 100vw; margin-left: calc(-50vw + 50%)`.
     On browsers with always-present scrollbars 100vw is wider than the
     viewport's content area, producing a 1-px horizontal scroll. Clip
     here so the breakout never overflows. */
  overflow-x: clip;
}

/* Skip-to-content link: hidden until focused, then visible at top-left.
   First tab stop on every page lets keyboard users jump past the chrome. */
.rkr-skip {
  position: absolute;
  left: 0; top: 0;
  padding: .5rem .75rem;
  background: var(--rkr-bg, #fff);
  color: var(--rkr-link, #1a4f7f);
  border: 2px solid var(--rkr-link, #1a4f7f);
  border-radius: var(--rkr-radius, 4px);
  text-decoration: none;
  transform: translateY(-200%);
}
.rkr-skip:focus, .rkr-skip:focus-visible {
  transform: translateY(0);
  z-index: 1000;
  outline: none;
}

/* Global keyboard-focus indicator. Without this, links and buttons on
   the public side have no visible focus state — WCAG 2.4.7 fail. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--rkr-link, #1a4f7f);
  outline-offset: 2px;
  border-radius: 2px;
}
/* main is focusable for skip-link target — hide its outline (the focus
   ring on the post body would be more confusing than helpful). */
main:focus-visible { outline: none; }

/* Comment-form honeypot. Kept in the DOM + submittable so bots fill it,
   but never visible/focusable for humans or screen readers. Lives in
   base.css (always loaded, theme-independent) — a visible honeypot
   silently rejects real comments, so it must not depend on a theme.
   NOT display:none (some bots skip display:none inputs). */
.rkr-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Comment form: structural layout only (theme-independent so the form
   is usable under every theme). Row 1 = Name | Email | Post button;
   row 2 = Comment spanning the full width. Hidden inputs (t, parent_id)
   are display:none and the honeypot is absolutely positioned, so none
   become grid items. */
.rkr-comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem 1rem;
  align-items: end;
}
.rkr-comment-form input,
.rkr-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.rkr-cf-name {
  grid-column: 1;
  grid-row: 1;
}
.rkr-cf-email {
  grid-column: 2;
  grid-row: 1;
}
.rkr-cf-submit {
  grid-column: 3;
  grid-row: 1;
}
.rkr-cf-comment {
  grid-column: 1 / -1;
  grid-row: 2;
}
@media (max-width: 32rem) {
  .rkr-comment-form {
    grid-template-columns: 1fr;
  }
  .rkr-cf-name,
  .rkr-cf-email,
  .rkr-cf-submit,
  .rkr-cf-comment {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Comments + form share the post's measure. The comments block is a
   sibling of <article> in <main>, so without this it spans the full
   width instead of aligning to the prose column. Mirrors the
   `article { max-width: var(--rkr-prose); margin: 0 auto }` rule, using
   the same per-theme variable so it tracks each theme's measure. */
.rkr-comments,
.rkr-comment-form-wrap {
  max-width: var(--rkr-prose, 38rem);
  margin-inline: auto;
}

/* Header nav group (Home / About / Login|Logout). Layout only —
   link colours come from the theme's .rkr-site-head-auth-btn. base.css
   is always loaded, so this is theme-independent. */
.rkr-site-head-nav { display: flex; align-items: center; gap: 1rem; }