/* src/v2/sites/static/base.css
   Reset + shared utilities. Everything visually opinionated lives in
   per-brand stylesheets under /static/brands/. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { margin: 0; font-family: var(--font-body, system-ui), sans-serif;
       background: var(--color-bg, #fff); color: var(--color-text, #111); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.2;
                          font-family: var(--font-headline, system-ui), sans-serif; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
select, button { font: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
           margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
           white-space: nowrap; border: 0; }

.pagination { display: flex; align-items: center; justify-content: center;
              gap: 0.25rem; padding: 2rem 0; }
.pagination-link { display: inline-flex; align-items: center;
                   justify-content: center; min-width: 2.25rem;
                   height: 2.25rem; padding: 0 0.5rem;
                   border: 1px solid #ddd; border-radius: 4px;
                   font-size: 0.875rem;
                   transition: background 0.15s, color 0.15s; }
.pagination-link:hover { background: var(--color-primary, #333); color: #fff;
                         border-color: var(--color-primary, #333); }
.pagination-current { background: var(--color-primary, #333); color: #fff;
                      border-color: var(--color-primary, #333); }
.pagination-disabled { opacity: 0.35; pointer-events: none; }
.pagination-ellipsis { padding: 0 0.25rem; color: #999; }

/* Rendered-markdown typography for article bodies. Per-brand stylesheets
   (.tw-article-body, .tm-article-body, etc.) layer their own font/color
   choices on top; this block owns spacing and rhythm only. */
[class$="-article-body"] p { margin: 0 0 1.1em; }
[class$="-article-body"] p:last-child { margin-bottom: 0; }
[class$="-article-body"] h2 { margin: 1.6em 0 0.5em; font-size: 1.35em; line-height: 1.25; }
[class$="-article-body"] h3 { margin: 1.4em 0 0.4em; font-size: 1.15em; line-height: 1.3; }
[class$="-article-body"] h4 { margin: 1.2em 0 0.4em; font-size: 1em; line-height: 1.3; }
[class$="-article-body"] h2:first-child,
[class$="-article-body"] h3:first-child,
[class$="-article-body"] h4:first-child { margin-top: 0; }
[class$="-article-body"] strong { font-weight: 700; }
[class$="-article-body"] em { font-style: italic; }
[class$="-article-body"] ul,
[class$="-article-body"] ol { margin: 0 0 1.1em 1.5em; padding: 0; list-style: revert; }
[class$="-article-body"] li { margin: 0 0 0.4em; }
[class$="-article-body"] blockquote { margin: 1.2em 0; padding: 0.4em 0 0.4em 1em;
                                       border-left: 3px solid var(--color-primary, #999);
                                       color: var(--color-muted, #555); font-style: italic; }
[class$="-article-body"] a { text-decoration: underline; text-underline-offset: 2px; }