/*
 * Readable text on phones - public pages only (2026-09-27, BUG_HUNT #216;
 * round two, #222).
 *
 * Measured at iPhone width across every public page: 87% of the text was
 * under the 16px that phones read at, and 30% under 14px. Card copy and plan
 * lists were 13px, guides and articles 14-15px, labels 10-12px. The pages
 * were drawn for a desktop, where those sizes are fine.
 *
 * This file is linked only on the public site (views/partials/head.ejs, when
 * res.locals.publicSite is set from utils/publicPages.js) and only for
 * screens up to 640px wide (the link's media attribute), so desktops,
 * tablets and the signed-in app - the simulator panel above all - are not
 * touched (Rob, 2026-09-27: the signed-in pages are used on a computer). The
 * rules only ever raise a size:
 *   - reading text (paragraphs, list items, table cells) to 16px;
 *   - card and section headings to 16-17px, buttons, links and form labels
 *     to 15px;
 *   - labels, tags and small print to at least 14px (13px until round two,
 *     BUG_HUNT #222 - Rob, 2026-09-27: the subpages still read small);
 *   - form fields to 16px, the size below which iPhones zoom in on a tap.
 * Text a page has already set larger - a lead paragraph, a big number - is
 * left as it is. `!important` is needed because much of the small text is
 * sized in the templates' own style attributes.
 *
 * Version 3. Pages link this file as phone-reading.css?v=3, and browsers keep
 * a /css file for seven days, so a phone that has the old copy keeps it until
 * the link changes. When you change a rule here, raise this number and the
 * ?v= on every link to the file together. 3: the pricing page's eLearning
 * note (.tier-note), BUG_HUNT #265. The links are checked against this line
 * by __tests__/pricing-elearning-card-says-how.test.js.
 */

/* Reading text sized by a page's stylesheet: up to 16px. Leads and intros
   that are already larger are left alone. */
:is(p, li, td, dd, blockquote, summary, figcaption):not([style*="font-size"]):not(.lede, .lead, .sub, .pf-lead, .hero-sub):not(:is(.blog-hero, .pg-hero, .f-cta-lead) > p) {
  font-size: 16px !important;
  line-height: 1.6;
}

/* Reading text sized in the template itself, when that size is small. */
:is(p, li, td, dd, blockquote, summary, figcaption, label):is(
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"],
  [style*="font-size:12px"], [style*="font-size: 12px"],
  [style*="font-size:13px"], [style*="font-size: 13px"],
  [style*="font-size:14px"], [style*="font-size: 14px"],
  [style*="font-size:15px"], [style*="font-size: 15px"]) {
  font-size: 16px !important;
  line-height: 1.6;
}

/* Everything else sized small in the template - labels, badges, card
   headings, notes - comes up to a size that can be read without zooming:
   14px for small uppercase labels, 15px for a note or a button that is
   read as words. */
[style*="font-size:9px"], [style*="font-size: 9px"],
[style*="font-size:10px"], [style*="font-size: 10px"],
[style*="font-size:11px"], [style*="font-size: 11px"],
[style*="font-size:12px"], [style*="font-size: 12px"] {
  font-size: 14px !important;
}
:is(div, span, small, a, strong, em, button):is(
  [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:12px"], [style*="font-size: 12px"]
):not([style*="uppercase"]) {
  font-size: 15px !important;
}
/* Text sized 13-15px in the template - FAQ answers, callout boxes, card
   headings, the footer's tagline, the cookie notice - is often a sentence or
   more, so it reads at 16px like any paragraph. */
:is(div, span, a, strong, em, button, th, small)[style*="font-size:13px"],
:is(div, span, a, strong, em, button, th, small)[style*="font-size: 13px"],
:is(div, span, a, strong, em, button, th, small)[style*="font-size:14px"],
:is(div, span, a, strong, em, button, th, small)[style*="font-size: 14px"],
:is(div, span, a, strong, em, button, th, small)[style*="font-size:15px"],
:is(div, span, a, strong, em, button, th, small)[style*="font-size: 15px"] {
  font-size: 16px !important;
}

/* Sentence-length text sized by a page's stylesheet: plan descriptions and
   the pricing card notes (the eLearning card's "how to add it", #265),
   information boxes, the evolution pages' standards note and spec lines, the
   Terms of Service notices, the panel pages' spec values, worked formulas,
   FAQ questions, and the embed invitation. */
:is(.tier-desc, .tier-note, .info-box, .legal-notice, .legal-notice *, .nfpa, .spec, div.cs-noprint, .eb-term span, .eb-desc,
    .panel-specs li, .panel-specs span, .desc, .formula, .tc-formula, .faq-q, .contact-detail .value, .embed-invite a, .evo-nav a,
    .error-box, .no-slots, .card > p.sub, .rep, .rep strong) {
  font-size: 16px !important;
}

/* Headings the pages draw small: card titles, the evolution pages' section
   headings (OVERVIEW, TRAINING OBJECTIVE...), and headings sized in the
   template itself. */
:is(.feat-card, .panel-card, .gh-card, .evo-card, .trust, .step-card, .step) h3,
:is(.fc, .eval-card, .role-card, .rc, .lc-step) h4,
:is(h2, h3, h4)[style*="font-size:13px"], :is(h2, h3, h4)[style*="font-size: 13px"],
:is(h2, h3, h4)[style*="font-size:14px"], :is(h2, h3, h4)[style*="font-size: 14px"],
:is(h2, h3, h4)[style*="font-size:15px"], :is(h2, h3, h4)[style*="font-size: 15px"] {
  font-size: 17px !important;
}
:is(.evo-section h2, .mkt h3, .tool-body h3, .gh-group h2) {
  font-size: 16px !important;
}

/* Things a thumb presses or a form names: buttons, breadcrumb and
   next/previous links, form labels. */
:is(a.btn, .btn-primary, .eb-btn, .cs-print-btn, .search-form button, .dr-back, .link, .breadcrumb a, .auth-footer, .auth-footer a, .back-link,
    .field label, .form-group label, .grid label, .apps label, .flc-grid label, .result-field label,
    .booking-container a, .date-btn, .time-btn, .booking-container .error-msg, .evo-chip, .hash-value) {
  font-size: 15px !important;
}
a:is([style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:12px"], [style*="font-size: 12px"]) {
  font-size: 15px !important;
}

/* Bylines, dates, price notes and other secondary lines that often run to a
   sentence: 15px. */
:is(.meta, .date, .anchor, .overline, .pf-overline, .tier-annual, .tier-annual *, .evo-group-title, .flc-label, cite) {
  font-size: 15px !important;
}

/* Labels, tags and small print sized by a page's stylesheet. */
:is(.tag, .cap-tag, .card-tag, .evo-tag, .lbl, .breadcrumb,
    .ib-label, .sect-t, .mfr-count, .callout-label,
    .faq-section, .faq-eyebrow, .evo-num, .section-title, .card-meta, .pf-evo .num, .note, .embed-terms, .tier-name, .diff, .badge, .role-name,
    .hl-eyebrow, .sect-label, .dr-badge, .dr-devices span, .contact-detail .label, .req, .flc-unit,
    .bi-badge, .section-label, .hash-label, .rep-title, .date-btn .day-name),
th, time, small {
  font-size: 14px !important;
}

/* The footer's links, small buttons, and the free-trial banner at the top of
   every page. */
.footer-grid a, .btn-sm, .pf-trial-strip, .pf-trial-strip span, .pf-trial-strip strong, .pf-trial-strip a {
  font-size: 15px !important;
}

/* Form fields: 16px, or iPhones zoom the page in when one is tapped. The
   embed-code box stays a code box, just a readable one. */
input, select, textarea {
  font-size: 16px !important;
}
textarea.eb-code {
  font-size: 14px !important;
}