/* Shared page chrome — pairs with tokens.css (S040). Component-level styling for individual
 * pages (dashboard, article, etc.) belongs to the steps that add those templates; this file
 * only carries the base layout, interaction states and skip-link every page inherits from
 * templates/base.html. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--size-ui);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion), color var(--motion);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Visible focus ring everywhere — never `outline: none` (WCAG AA; design brief). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Off-screen until focused, then pinned top-left — the first focusable element on every
 * page (design/design_handoff_agentblog/README.md, skip-link requirement). */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: -9999px;
  z-index: 50;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-family: var(--mono);
  font-size: var(--size-mono);
}

.skip-link:focus {
  left: var(--space-2);
}

.site-header {
  border-bottom: 1px solid var(--line);
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
}

/* `Agentblog.dc.html:41,129` draws the platform wordmark at two distinct sizes — 22px with
 * `-0.01em` tracking in the header, 16px with none in the footer — not one shared 20px.
 * Now that S077e suppresses this wordmark on every owner-known per-blog surface
 * (`base.html`'s `{% if not site_nav or not site_nav.owner %}` guard), the only pages
 * these two rules still style are the marketing home and the system/auth pages, so
 * nothing depends on the old shared value (S077e review round 1, minor). */
.site-header .wordmark {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-footer .wordmark {
  font-family: var(--display);
  font-size: 16px;
  color: var(--text);
}

/* Every ownerless footer bar wraps, as `Agentblog.dc.html:128`'s own footer row does
 * (`flex-wrap:wrap`): S112's `Terms`/`Abuse`/`DMCA` links (D-168) widened
 * `partials/marketing_footer.html` to six links plus the wordmark and copyright, and
 * `.wrap-bar`'s unwrapped row cannot shrink inline text below its content width — at a
 * 360px viewport the document scrolled sideways to 508px (S112 review round 2, major).
 * `.wrap-bar.blog-footer` already wraps; this only adds the same to the marketing,
 * system and auth footers, and leaves the header's `.wrap-bar` untouched. */
.site-footer .wrap-bar {
  flex-wrap: wrap;
}

.wordmark-dot {
  color: var(--accent);
}

/* Shared per-blog header nav (S072, D-83): `partials/blog_nav.html`'s `<nav
 * class="blog-nav">`, included by every page through `base.html`'s own `{% block nav
 * %}` default — chrome, so it lives here rather than a page-specific stylesheet, matching
 * this file's own module doc. The active section's link (`aria-current="page"`) gets the
 * mockup's accent underline (`Blog.dc.html:49`); every other link stays muted. */
.blog-nav {
  display: flex;
  align-items: center;
  /* The mockup's header is one flex row whose `<span style="flex:1">` pushes the section
   * links onto the right gutter (`Article.dc.html:46-53`, `Blog.dc.html:45-53`). Here the
   * row is `base.html`'s `.wrap-bar` and this nav is one of its items, so the spacer below
   * only has free space to distribute once the nav itself grows into the bar — without
   * `flex: 1` the links pack left against the owner wordmark (S077a review, major).
   * `min-width: 0` lets it shrink past its content on a narrow viewport, and `flex-wrap`
   * reflows the items instead of overflowing the viewport (handoff README, "Responsive":
   * no fixed pixel widths on text-bearing containers, test 360-1440px). */
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--size-ui-dense);
}

.blog-nav-spacer {
  flex: 1;
}

.blog-nav .blog-nav-owner {
  font-family: var(--display);
  /* 20px, not `--size-h2` (22px) — matches `Article.dc.html`'s header `<a>`
   * (`font-size:20px`) verbatim; independent of the platform wordmark's own 22px/16px
   * split above (`.site-header .wordmark`/`.site-footer .wordmark`) — this owner mark
   * never appears beside that one, since S077e suppresses the platform wordmark on every
   * surface this class renders on (S077e review round 1, minor: the old comment cited a
   * shared literal that no longer exists). */
  font-size: 20px;
  color: var(--text);
}

/* Host-qualified domain line beside the owner wordmark (S077a, D-90:
 * `Article.dc.html`'s header `<span>`, mono 12px `--text-2`, e.g. "agentblog.net/alice"). */
.blog-nav-domain {
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.blog-nav a:not(.blog-nav-owner) {
  color: var(--text-2);
}

.blog-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* The marketing chrome's call-to-action button (`partials/marketing_nav.html`'s
 * `Register`/`Log in`, `home.html`'s hero pair) — shared by `/`, `/docs`, `/status`,
 * `/privacy` and `/docs/verdicts`, so it lives here beside `.blog-nav` rather than in
 * `home.css`, which only `/` loads: every other marketing surface used to fall through to
 * `.blog-nav a:not(.blog-nav-owner)` and render the CTA as plain grey 14px text with no
 * accent fill, padding or radius (S077h review round 2, minor — `marketing_nav.html`'s own
 * comment already claimed these rules were here). `.home-cta-secondary` (hero-only) moves
 * with it: the two share the sizing and `:hover` rules below, and splitting the selector
 * lists across two files would duplicate their declarations. */
.home-cta,
.home-cta-secondary {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-s);
  font-size: var(--size-ui);
}

.home-cta {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

/* The header CTA is the same button inside `partials`-shaped chrome: `base.html`'s `{%
 * block nav %}` puts it in `<nav class="blog-nav">`, where
 * `.blog-nav a:not(.blog-nav-owner) { color: var(--text-2) }` (0,2,1) outranks the shared
 * `.home-cta` (0,1,0) and leaves muted grey text on the accent fill — 1.03:1, far under
 * the brief's 4.5:1 "including on the accent". Restated at (0,2,2) so it wins on
 * specificity rather than on stylesheet order, the same fix `post.css`'s
 * `.article-header .eyebrow` already applies to `.wrap-main p`.
 *
 * `Agentblog.dc.html:45` also draws the header Register button smaller than the hero's
 * "Create a blog" (`:56`) — `8px 14px`/14px against the shared rule's `12px 20px`/15px —
 * one component drawn at two sizes on the marketing home (S077e review round 1, minor). */
nav.blog-nav a.home-cta {
  color: var(--on-accent);
  padding: 8px 14px;
  font-size: var(--size-ui-dense);
}

.home-cta-secondary {
  border: 1px solid var(--line);
  color: var(--text);
}

/* The handoff pins no underline on hover for either CTA
 * (`Agentblog.dc.html:40,56`'s `style-hover="text-decoration:none;opacity:.92"`), so this
 * overrides this file's own global `a:hover` (S074 review, minor) — (0,2,0) beats (0,1,1)
 * regardless of source order, so one rule covers both the hero and `nav.blog-nav` CTAs. */
.home-cta:hover,
.home-cta-secondary:hover {
  text-decoration: none;
  opacity: 0.92;
}

/* Shared per-blog footer (S077a, D-90): `partials/blog_footer.html`'s tagline + feed
 * links + right-aligned "hosted on agentblog" mono line, replacing `.site-footer`'s bare
 * wordmark on the article and every blog-landing surface (`Article.dc.html`'s footer div:
 * `display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13px`). Scoped to
 * `.blog-footer` — a class `base.html`'s `{% block footer %}` wrapper only carries when
 * `site_nav.owner` is present — rather than `.site-footer .wrap-bar`, which used to select
 * every page's footer bar including the marketing home's (S077a review round 3, minor:
 * that rule silently restyled `Agentblog.dc.html`'s own 32px/24px footer to 24px/20px, a
 * surface this card does not build). The marketing home's footer keeps `.wrap-bar`'s own
 * pre-existing padding until a later step sets its own. */
/* Compound `.wrap-bar.blog-footer`, not bare `.blog-footer`: the element carries both
 * classes, `.wrap-bar` is declared 48 lines below this rule, and at equal specificity the
 * later rule wins — so the padding and font-size below were dead, and the browser-verified
 * round-1 values silently reverted to the header bar's (S077a review round 4, minor). */
.wrap-bar.blog-footer {
  flex-wrap: wrap;
  /* 24px on every side, the mockup's own footer padding (`Article.dc.html`'s footer div:
   * `padding:24px`), not the header bar's asymmetric `--space-3`/`--space-4` block padding
   * this rule inherits from `.wrap-bar` (S077a review, minor). */
  padding-block: var(--space-6);
  font-size: var(--size-helper);
  color: var(--text-2);
}

.blog-footer-link {
  color: var(--text-2);
}

/* `Agentblog.dc.html:134`: the marketing footer's copyright row is right-aligned mono
 * 12px. Shared by `/`, `/docs`, `/status`, `/privacy` and `/docs/verdicts` through
 * `partials/marketing_footer.html`, so it belongs here rather than in `home.css` — on the
 * four pages that load no `home.css` the year used to render left-packed in the body face
 * (S077h review round 2, minor). */
.home-footer-copyright {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.blog-footer-host {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--size-mono);
}

/* Shared "Older"/"Newer" pagination nav (`blog/list.html`, `tag.html`, `search.html`):
 * base layout only — `justify-content` and any `.pagination-next` push-right trick a page
 * needs beyond this base stay in that page's own stylesheet, since they depend on whether
 * the page ever renders more than one link (S073 review, nit: this rule was copied
 * byte-for-byte into three page stylesheets before this extraction). */
.pagination {
  display: flex;
  padding-top: var(--space-5);
  font-family: var(--mono);
  font-size: var(--size-helper);
}

main {
  flex: 1;
}

/* The centred column every page shares: `--content-width` wide, with the handoff's 24px
 * gutter so text never touches the viewport edge on a narrow screen (mockups put
 * `max-width:1080px;margin:0 auto;padding:…24px` on the header bar, main and the footer of
 * every page). The rule lives here rather than in each page template so a later template
 * cannot forget it. */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.wrap-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3) var(--space-4);
  font-size: var(--size-ui-dense);
}

.wrap-main {
  padding-block: var(--space-10) var(--space-20);
}

/* Headings are the display face at regular weight — never the browser's bold sans default
 * (design handoff "Type": Newsreader 400 for headings, Instrument Sans for UI). */
h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

/* Body copy on a system/landing page: readable measure, muted secondary tone. */
.wrap-main p {
  margin: 0 0 var(--space-5);
  max-width: var(--measure-reading);
  color: var(--text-2);
  line-height: 1.55;
}

.wrap-main p:last-child {
  margin-bottom: 0;
}

/* The small mono eyebrow above a system-page heading (`<code>404</code>`). */
code {
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}