/* Shared type system for the seven document sites.
   scripts/type-sync.mjs copies this file to <site>/type.css and links it, with the one font request
   below, right after visual-direction.css on every page that loads the overlay. Edit this file, then
   run: node scripts/type-sync.mjs

   Fonts: two families, both requested by the page's single Google Fonts link.
     Bricolage Grotesque 600/700 - headings, prices, the wordmark
     Hanken Grotesk 400-700      - everything else
   Each site keeps its own colours (visual-direction.css); this file sets family, size, case,
   tracking, measure and link treatment. Headings are sentence case: nothing is uppercased by CSS.
   No text is set below 14px. */

body[data-niche] {
  --type-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --type-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-code: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --type-small: .875rem;                                     /* 14px: the floor for any text */
  --type-meta: .9375rem;                                     /* 15px: labels, card detail, captions */
  --type-body-size: 1.1rem;                                  /* 17.6px: reading text */
  --type-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);     /* intro paragraphs */
  --type-measure: 65ch;
  --type-h1: clamp(2.25rem, 4vw, 3.25rem);                   /* article and page titles: 36-52px */
  --type-h1-hero: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);    /* homepage hero: 40-68px */
  --type-h2: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem);      /* 26-36px, always below the H1 */
  --type-h3: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);      /* 19-22px */
  /* Route every family token the older layers use to the two families above. */
  --direction-serif: var(--type-display) !important;
  --direction-body: var(--type-body) !important;
  --direction-mono: var(--type-body) !important;
  --font-display: var(--type-display) !important;
  --font-body: var(--type-body) !important;
  font-family: var(--type-body) !important;
  font-synthesis: none;
}

/* One body family and no forced case anywhere: page styles still name Inter, Fraunces, Bebas Neue,
   Outfit, DM Sans and others, none of which is loaded any more. */
body[data-niche] *:not(svg, svg *),
body[data-niche] *::before,
body[data-niche] *::after {
  font-family: var(--type-body) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body[data-niche] :is(code, pre, kbd, samp) { font-family: var(--type-code) !important; }

/* Headings and display roles. */
body[data-niche] :is(h1, h2, h3, h4, h5, h6, .section-heading, .price-name, .nav-logo, .wordmark, .price, .price-amount, .amount, .plan-price, .price-value) {
  font-family: var(--type-display) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-wrap: balance;
}
body[data-niche] :is(.price, .price-amount, .amount, .plan-price, .price-value) { font-variant-numeric: tabular-nums lining-nums; }
body[data-niche] h1 {
  font-size: var(--type-h1) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  max-width: 22ch;
}
body[data-niche] :is(.hero, .hero-content, .hero-copy, .hero-text, .folio-hero, .home-hero) h1 {
  font-size: var(--type-h1-hero) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  max-width: 18ch;
}
body[data-niche] :is(h2, .section-heading) {
  font-size: var(--type-h2) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}
body[data-niche] h3 { line-height: 1.25 !important; letter-spacing: -.01em !important; }
body[data-niche] :is(article, .article, main.wrap, .post-body, .article-body) h3 { font-size: var(--type-h3) !important; }
body[data-niche] :is(.nav-logo, .wordmark) { letter-spacing: -.01em !important; }

/* Reading text: articles, guides and blog posts. */
body[data-niche] :is(article, .article, main.wrap, .post-body, .article-body) :is(p, li, dd, blockquote) {
  font-size: var(--type-body-size) !important;
  line-height: 1.65 !important;
}
/* Reading text is ink, not grey, except inside the dark call-to-action panels set into articles. */
body[data-niche] :is(article, .article, main.wrap, .post-body, .article-body) :is(p, li):not([class]):not(:is(.cta-box, .bcta, [class^="bcta-"], [class*=" bcta-"], .le-capture, .dark, .answer-block, #free-form) *) { color: var(--direction-ink) !important; }
body[data-niche] p { max-width: var(--type-measure); }
body[data-niche] :is(.hero-sub, .section-sub, .lead, .dek, .intro, .hero-intro) { font-size: var(--type-lead) !important; line-height: 1.55 !important; max-width: 56ch; }

/* Links inside running text are underlined, so colour is not the only cue. */
body[data-niche] :is(p, dd, blockquote, :is(article, .article, main.wrap, .post-body, .article-body, .faq-a) li) a:not([class*="btn"], [class*="button"], [class*="cta"]):not(:is(nav, header, footer, .nav, .site-footer, .footer) *) {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .18em;
}

/* Small roles: labels, badges, meta, card detail and footer. The floor is 14px; the old 9-13px
   uppercase eyebrows and badges become sentence-case 14-15px labels. */
body[data-niche] :is(
  .section-label, .eyebrow, .kicker, .label, .tag, .badge, .pill, .chip, .plan-badge, .price-badge, .popular-badge,
  .hero-badge, .hero-kicker, .answer-block-label, .folio-label, .miy-label, .nq-kicker, .le-kicker, .bcta-kicker,
  [class$="-label"], [class$="-kicker"], [class$="-eyebrow"], [class$="-badge"], [class$="-stamp"],
  small, figcaption, .caption, .meta, .post-meta, .byline, .crumbs, .breadcrumb, .breadcrumbs, .note, .fineprint,
  .legal-links, .footer-bottom, .footer-legal, .copyright, .affiliate-notice, .disclosure, .sister-line,
  .price-period, .price-desc, .price-note, .price-sub, .what-line, .need-line, .inside-heading
) {
  font-size: var(--type-small) !important;
  line-height: 1.45 !important;
}
body[data-niche] :is(.section-label, .eyebrow, .kicker, .tag, .badge, .pill, .chip, .plan-badge, .price-badge, .popular-badge, .hero-badge, .answer-block-label, .folio-label, .miy-label, .nq-kicker, .le-kicker, [class$="-label"], [class$="-kicker"], [class$="-eyebrow"], [class$="-badge"]) {
  font-weight: 600 !important;
}
body[data-niche] :is(.what-line, .need-line, .price-desc) { font-size: var(--type-meta) !important; }
body[data-niche] :is(.ribbon, [class*="disclosure"], .price-period, .faq-a, .faq-q) { line-height: 1.5 !important; }
body[data-niche] :is(.ribbon, [class*="disclosure"]) { font-size: var(--type-small) !important; }

/* Text inside cards, tables and lists of features reads at 15px. Prices and headings keep their size. */
body[data-niche] :is(.template-card, .price-card, .card, .affiliate-card, .panel, .task-card, .faq-item, .checkout-waiver, .comparison-table, .compare-table, .related-grid)
  :is(li, p, td, th, dd, dt, label):not([class*="price"]) {
  font-size: var(--type-meta) !important;
  line-height: 1.5 !important;
}

/* Hand-set inline sizes below the floor (style attributes of .8rem, 0.72rem, 12px and the like) come up to 14px. */
body[data-niche] :is([style*="font-size:.5"], [style*="font-size:.6"], [style*="font-size:.7"], [style*="font-size:.8"],
  [style*="font-size: .5"], [style*="font-size: .6"], [style*="font-size: .7"], [style*="font-size: .8"],
  [style*="font-size:0.5"], [style*="font-size:0.6"], [style*="font-size:0.7"], [style*="font-size:0.8"],
  [style*="font-size: 0.5"], [style*="font-size: 0.6"], [style*="font-size: 0.7"], [style*="font-size: 0.8"],
  [style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:12px"], [style*="font-size:13px"],
  [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"], [style*="font-size: 13px"]) {
  font-size: var(--type-small) !important;
}
/* Fine print faded with opacity fell below 4.5:1; it keeps its colour at full strength instead. */
body[data-niche] :is(p, span, small):is([style*="opacity:.6"], [style*="opacity:.7"], [style*="opacity:.8"], [style*="opacity: .6"], [style*="opacity: .7"], [style*="opacity: .8"], [style*="opacity:0.6"], [style*="opacity:0.7"], [style*="opacity:0.8"]) { opacity: 1 !important; }

/* Form controls default to the browser's 13.3px; zero specificity, so any authored size still wins. */
:where(body[data-niche]) :where(button, input, select, textarea) { font-size: max(var(--type-small), 1em); }

/* Navigation, calls to action, footers and the blog CTA blocks: same 14px floor. */
body[data-niche] :is(.nav-cta, .header-cta, .nav-login, .nav-links a, .site-nav a, nav a, .skip-link, .text-link, .button, .btn,
  [class$="-cta"], [class*="arrow"], [class$="-meta"], [class$="-tag"], .card-sub, .pack-tag, .inside, .inside strong, label, .status):not(.nav-logo, .logo, .brand, .wordmark, [class*="logo"], [class*="brand"]) {
  font-size: max(var(--type-small), 1em) !important;
}
body[data-niche] :is(.nav-cta, .header-cta, .nav-login, .skip-link, .card-sub, .pack-tag, [class$="-meta"], [class$="-tag"]) { font-size: var(--type-small) !important; }
body[data-niche] :is(footer, .footer, .site-footer) :is(a, p, div, span, li, small):not(.nav-logo, .wordmark, [class*="logo"], [class*="brand"], .nav-logo *, [class*="logo"] *) { font-size: max(var(--type-small), 1em) !important; }
body[data-niche] :is(.step, .also-card, .inside, [class^="bcta-"], .bcta) :is(p, span, li, div):not([class*="price"]) { font-size: max(var(--type-small), 1em) !important; }
body[data-niche] :is(table, .comparison-table, .compare-table) :is(th, td) { font-size: var(--type-meta) !important; }
/* Document specimens drawn in a hero (a miniature form) still read at 14px. */
body[data-niche] :is(.paper, .hero-paper, .paper-studio) :is(span, p, label, li, h3, h4, small) { font-size: var(--type-small) !important; line-height: 1.4 !important; }
body[data-niche] :is([class$="-hint"], [class$="-date"], [class$="-count"], [class$="-plan"], [class$="-status"], [class$="-foot"], [class$="-foot"] *,
  [class^="client-page"] :is(span, p, a, strong), caption, .back, .legal-links a, .also-grid a, .affiliate-card a, .next-steps strong, .sister-line a) {
  font-size: max(var(--type-small), 1em) !important;
}
body[data-niche] :is([class$="-hint"], [class$="-date"], [class$="-count"], [class$="-plan"], [class$="-status"], caption, .client-page-kicker) { font-size: var(--type-small) !important; }
/* At 15px a three-column comparison table no longer fits a 375px screen with its desktop padding. */
@media (max-width: 480px) {
  body[data-niche] table :is(th, td) { padding-left: .5rem !important; padding-right: .5rem !important; overflow-wrap: anywhere; hyphens: auto; }
}
/* Long brand names ("BeautyTherapistForms") and footer columns must not push the page wider than the screen. */
body[data-niche] :is(h1, h2, h3, .section-heading) { overflow-wrap: break-word; }
body[data-niche] :is(.footer-grid, [class*="footer-grid"], [class*="footer-cols"]) > * { min-width: 0; overflow-wrap: anywhere; }

/* Text colours that fell below 4.5:1 on the sites' paper (each mapped to that site's own tokens). */
/* PTDocuments' legacy dark theme sets --primary to white, which form labels and FAQ summaries use on paper. */
body[data-niche="ptdocuments"] :is(.field label, details > summary) { color: var(--direction-ink) !important; }
body[data-niche] :is(.comparison-table, .compare-table, table) :is(.check, .yes) { color: var(--direction-accent) !important; }
body[data-niche] :is(.comparison-table, .compare-table, table) :is(.cross, .no) { color: var(--direction-muted) !important; }
body[data-niche] :is(.logo, .brand, .topbar-logo, .nq-brand, .pk-brand, .nav-logo) span:not([class*="mark"]) { color: var(--direction-accent) !important; }
body[data-niche] :is(.step-num, [class$="-num"]) { color: var(--direction-accent) !important; }
body[data-niche] a.btn { background: var(--direction-control, var(--direction-accent)) !important; border-color: var(--direction-control, var(--direction-accent)) !important; color: var(--direction-paper) !important; }
/* Greys hand-set in markup (style="color:#6B7280") fail on the cream and tinted sections they now sit on. */
body[data-niche] :is(p, span, li, div):is([style*="color:#6B7280"], [style*="color:#6b7280"], [style*="color: #6B7280"], [style*="color:#9CA3AF"], [style*="color:#9ca3af"], [style*="color:#666"], [style*="color:#888"], [style*="color:#999"], [style*="color: #666"], [style*="color: #888"]):not(:is(footer, .footer, .site-footer, .dark, .answer-block, .benefits, .page-hero) *) {
  color: var(--direction-ink) !important;
}
/* Footer legal lines spanned the full 1100px row (about 140 characters). */
body[data-niche] .footer-bottom { max-width: min(100%, 75ch) !important; margin-inline: auto !important; }
body[data-niche] figcaption { max-width: var(--type-measure); }
/* Spans and emphasis inside a heading or price keep the display face. */
body[data-niche] :is(h1, h2, h3, h4, h5, h6, .section-heading, .price-name, .nav-logo, .wordmark, .price, .price-amount, .amount, .plan-price, .price-value) *:not(svg, svg *) { font-family: inherit !important; }