/* WCAG 2.2 AA typography & text spacing — load after theme tokens */

@import url('theme-tokens.css');

:root {
  --leading-tight: 1.2;
  --tracking-body: 0.01em;
  --tracking-word: 0.02em;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Base text — beats Editorial pt-based shrinking in main.min.css */
body,
input,
select,
textarea {
  font-size: var(--text-base) !important;
  line-height: var(--leading-body) !important;
  letter-spacing: var(--tracking-body);
  word-spacing: var(--tracking-word);
}

@media screen and (max-width: 1680px),
  screen and (max-width: 1280px),
  screen and (max-width: 980px),
  screen and (max-width: 736px),
  screen and (max-width: 480px),
  screen and (max-width: 360px) {
  body,
  input,
  select,
  textarea {
    font-size: var(--text-base) !important;
  }
}

/* iOS: 16px+ inputs avoid focus zoom */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
input[type='password'],
input[type='number'],
select,
textarea {
  font-size: max(1rem, 16px) !important;
}

#main p,
.post-content p,
.entry-content p,
section p {
  margin: 0 0 var(--paragraph-gap);
  max-width: var(--measure);
}

#main li,
.post-content li,
.entry-content li {
  line-height: var(--leading-body);
  margin-bottom: var(--list-gap);
}

#main ul,
#main ol,
.post-content ul,
.post-content ol {
  margin: 0 0 var(--section-gap);
  padding-left: 1.625em;
}

#main li > ul,
#main li > ol {
  margin-top: var(--list-gap);
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--leading-heading);
  margin-top: 1.25em;
  margin-bottom: 0.65em;
  text-wrap: balance;
}

h1 {
  line-height: var(--leading-tight);
  margin-top: 0;
}

h5 {
  font-size: 1.05em;
}

h6 {
  font-size: var(--text-sm);
}

/* UI chrome — never below ~15px */
.breadcrumb,
.breadcrumb-nav,
.breadcrumb ol,
.nav-quick-links,
.nav-quick-links a {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-ui) !important;
}

#menu a,
#menu button.opener,
#sidebar .contact li {
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

#menu button.opener {
  min-height: 2.75rem;
}

/* Buttons — readable label + touch target (2.5.8) */
.button,
button.button,
input[type='submit'],
input[type='reset'],
input[type='button'],
button:not(.opener):not(.theme-toggle):not(.toggle) {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-ui) !important;
  min-height: 2.75rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.button.small,
.button.small.primary {
  font-size: var(--text-xs) !important;
  min-height: 2.25rem;
  padding: 0.5em 1em !important;
  line-height: var(--leading-ui) !important;
}

.button.large,
.button.big {
  font-size: var(--text-base) !important;
}

/* Meta / captions — 14px floor */
.copyright,
.post-meta,
.meta,
.hero-kicker,
.badge,
.pricing-card .badge,
.kv th {
  font-size: max(var(--text-xs), 0.875rem);
  line-height: var(--leading-ui);
}

/* Tables */
table {
  font-size: inherit;
  line-height: var(--leading-ui);
}

th,
td {
  padding: 0.75em 1em;
  line-height: var(--leading-ui);
  vertical-align: top;
}

/* Block quotes & code */
blockquote {
  line-height: var(--leading-body);
  margin: 0 0 var(--paragraph-gap);
}

pre,
code {
  font-size: 0.9375em;
  line-height: 1.6;
}

/* Long-form blog */
.post-content,
.entry-content,
#content .inner {
  font-size: var(--text-base);
  line-height: 1.7;
}

.post-content h2,
.entry-content h2 {
  margin-top: 2em;
}

/* Sidebar search */
#sidebar input[type='text'],
#sidebar input[type='search'] {
  font-size: var(--text-sm) !important;
}

/* WCAG 1.4.12 — allow user agent text-spacing overrides */
p,
li,
dd,
blockquote {
  overflow-wrap: break-word;
}

/* User text-spacing bookmarklet / stylesheet support */
@media screen {
  .a11y-text-spacing p {
    line-height: 1.5 !important;
    margin-bottom: 2em !important;
  }

  .a11y-text-spacing * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}