/* ===========================================================================
   wp.css — WordPress-specific additions to styles.css
   ---------------------------------------------------------------------------
   styles.css is byte-identical to the original hand-written stylesheet and is
   never edited. Everything WordPress needs on top of it lives here, and this
   file is strictly ADDITIVE — it overrides nothing that the original design
   relies on.

   Loaded after tus-base, so later rules of equal specificity win.

   1. Editor content spacing   (required — styles.css resets all margins)
   2. Block editor output
   3. Scoping fixes for element selectors
   4. No-JavaScript safety net
   5. Admin bar offsets
   6. Pagination               (no component exists in styles.css)
   7. Core class aliases
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Editor content spacing
   --------------------------------------------------------------------------
   styles.css line 164 is `* { margin: 0; padding: 0 }`, and the only prose
   spacing rules are `.prose p + p` and `li + li`. That was fine when no
   template rendered free-form content, but the_content() emits headings,
   figures, lists, quotes and code blocks that would otherwise collapse flush
   against each other. These rules only apply to content the editor produces;
   the structured case-study sections are unaffected because they never nest
   these elements directly under .prose.                                      */

.prose > * + * {
  margin-top: var(--space-4);
}

.prose > h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.prose > h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose > h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > pre,
.prose > figure,
.prose > table {
  margin-block: var(--space-6);
}

.prose > hr {
  margin-block: var(--space-12);
  border: 0;
  border-top: 1px solid var(--border);
}

.prose blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  color: var(--text-primary);
  font-style: normal;
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

.prose :not(pre) > code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.prose figcaption {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-14);
}

.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.prose th {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   2. Block editor output
   -------------------------------------------------------------------------- */

.wp-block-image img,
.wp-block-embed iframe,
.wp-block-video video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.wp-block-image {
  margin-block: var(--space-6);
}

/* Wide and full alignments have nowhere to go inside a 720px reading column. */
.container--reading .alignwide,
.container--reading .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.wp-block-code {
  margin-block: var(--space-6);
}

.wp-block-separator {
  margin-block: var(--space-12);
  border: 0;
  border-top: 1px solid var(--border);
}

.wp-block-pullquote,
.wp-block-quote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
}

/* --------------------------------------------------------------------------
   3. Scoping fixes for element selectors
   --------------------------------------------------------------------------
   styles.css styles bare `section`, which is correct for page layout but wrong
   for a <section> the Group block can emit inside content.                   */

.prose section,
.prose--content section {
  padding-block: 0;
}

/* --------------------------------------------------------------------------
   4. No-JavaScript safety net
   --------------------------------------------------------------------------
   styles.css sets `[data-reveal] { opacity: 0 }` and relies on main.js to add
   .is-visible. The <noscript> block in the head covers JS being *disabled*;
   this covers JS being *broken* — a 404 on the script, a CSP block, or an error
   thrown by an unrelated plugin. Without it, a failed script load leaves the
   homepage as a hero and nothing else. The .js class is added by the inline
   bootstrap in inc/head.php.                                                 */

/* No scripting at all (belt to the <noscript> braces). */
html:not(.js) [data-reveal],
/* Scripting works, but main.js never reported in — see inc/head.php. */
html.tus-reveal-fallback [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Admin bar offsets
   -------------------------------------------------------------------------- */

body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar main {
  min-height: calc(100vh - var(--header-h) - 32px);
}

body.admin-bar .mobile-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .mobile-nav {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   6. Pagination
   --------------------------------------------------------------------------
   The original site never paginated anything, so styles.css has no component
   for it. Built from the same tokens as .btn and .pill.                       */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-16);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination a.page-numbers:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.pagination .page-numbers.current {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   7. Core class aliases
   --------------------------------------------------------------------------
   Core and a few template tags emit .screen-reader-text where the design uses
   .sr-only.                                                                  */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}