/* WordPress-only additions. main.css is the signed-off static stylesheet, unchanged;
   anything the CMS needs on top of it lives here. */

/* Inter, served from the theme rather than Google Fonts so visitors' IPs aren't sent to Google.
   Variable font (Fontsource 5.1.0, latin subset, SIL OFL: see ../fonts/Inter-OFL.txt). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin.woff2) format('woff2-variations'), url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Sticky header sits under the admin toolbar when logged in. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Rich-text fields wrap their text in <p>. Inside these components the static markup had
   bare text, so the paragraphs must not add spacing of their own. */
.callout > p, .note-grid > div > p, .accordion-item__body > p { margin: 0; }
.callout > p + p, .note-grid > div > p + p, .accordion-item__body > p + p { margin-top: 10px; }
.download-next .callout + .body-text { margin-top: 16px; }

/* Form validation message (shown when a submission is rejected server-side). */
.form-error { background: var(--tint-red); border-radius: var(--radius-lg); padding: 18px 24px; font-size: 15.5px; line-height: 1.6; color: var(--grey-700); }

/* Resources: the active filter pill is a link, and cards may be links or plain boxes. */
a.filter-pill { text-decoration: none; }
a.filter-pill:hover { color: var(--text-primary); background: var(--grey-100); }
a.filter-pill--active:hover { color: #fff; background: var(--black); }

/* Single resource article. */
.article { max-width: 720px; margin: 0 auto; padding: 48px 24px 0; }
.article__meta { margin: 16px 0 0; font-size: 14px; color: var(--text-secondary); }
.article__body { font-size: 17px; line-height: 1.7; color: var(--grey-700); }
.article__body h2 { margin: 40px 0 12px; font-size: 26px; letter-spacing: -0.02em; color: var(--text-primary); }
.article__body h3 { margin: 32px 0 10px; font-size: 20px; color: var(--text-primary); }
.article__body img { height: auto; border-radius: var(--radius-md); }
.article__back { margin-top: 40px; }
@media (max-width: 640px) { .article { padding: 32px 20px 0; } }

/* Legal documents: long rich text with subheadings, tables and numbered steps. */
.legal-doc h3 { margin: 40px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); }
.legal-doc h3:first-child { margin-top: 0; }
.legal-doc a { color: var(--text-primary); }
.legal-doc p, .legal-doc li, .legal-doc li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.legal-doc ol { margin: 0 0 16px; padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--grey-700); }
.legal-doc ol li { margin-bottom: 8px; padding-left: 4px; }
.legal-doc ol .bullets__dot { display: none; }
.legal-doc table { width: 100%; margin: 4px 0 24px; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: var(--grey-700); }
.legal-doc th, .legal-doc td { padding: 10px 12px; border-bottom: 1px solid var(--grey-200); text-align: left; vertical-align: top; }
.legal-doc th { font-weight: 600; color: var(--text-primary); border-bottom-color: var(--grey-400); }
@media (max-width: 640px) {
  .legal-doc table { display: block; overflow-x: auto; font-size: 14px; }
  .legal-doc th, .legal-doc td { padding: 8px 10px; min-width: 100px; }
}

/* Legal cards with a published document: styled like linked feature cards so they read as clickable. */
.legal-card { border: 1px solid transparent; }
a.legal-card { background: #fff; border-color: var(--border-subtle); transition: border-color .15s ease, background .15s ease; }
a.legal-card:hover { border-color: var(--text-primary); background: var(--surface-subtle); }
a.legal-card .legal-card__title::after { content: " \2192"; color: var(--text-secondary); }
a.legal-card:hover .legal-card__title::after { color: var(--text-primary); }