/* =====================================================================================================
   Upward: visual WCAG proposals (OFF by default)
   Nothing here applies unless <html> has the class `a11y-v` (set by a11y-visual.js only for ?a11y=1).
   Every block is one decision item for Ibrahim: docs/A11Y-VISUAL-DECISIONS.md (same ids).
   Measured on staging 2026-10-19 (Chromium, 390x844 phone emulation and 1366x768). Ratios are WCAG 2.x.
   An item Ibrahim answers "no" to is deleted here; a "yes" moves into the theme source and is deleted here.
   ===================================================================================================== */

/* -----------------------------------------------------------------------------------------------------
   C1  Cyan small text on light backgrounds (WCAG 1.4.3, needs 4.5:1)
   Brand cyan #00B8D9 is 2.37:1 on white, 2.21:1 on the soft grey #F4F7FB.
   Proposal #007B92 = the same hue and saturation, darker only: 4.94:1 white, 4.60:1 soft grey.
   (The reverted 2026-10-18 token --cyan-ink #00758A was darker than needed: 5.37 / 5.00.)
   Icons, buttons and everything on navy keep the brand cyan.
   ----------------------------------------------------------------------------------------------------- */
html.a11y-v .lcard .more,
html.a11y-v .cs-card .more,
html.a11y-v .ind-card .more,
html.a11y-v .prodcard .pc .more,
html.a11y-v .feat-post .fbody .tag,
html.a11y-v .tier:not(.feat) .tname,
html.a11y-v .ff-consent a,
html.a11y-v .prose a { color: #007B92; }
/* Five "Explore ..." links (About, Blog, Industries x2, Products) set color:var(--cyan-deep) inline, so the
   variable is redefined on the link itself (no !important). */
html.a11y-v .section:not(.dark) .link-arrow { --cyan-deep: #007B92; }

/* -----------------------------------------------------------------------------------------------------
   C2  Grey secondary text (WCAG 1.4.3, needs 4.5:1)
   --muted #7E8CA0 is 3.42:1 on white, 3.18:1 on #F4F7FB; the "scattered tools" chips #8493A6 are 3.13:1
   and the small arrow captions #8A99AD 2.90:1. One darker grey for all of them: #637287 = same hue,
   4.90:1 white, 4.56:1 soft grey. (Reverted token was #647080: 5.03 / 4.69.)
   Every --muted use is on a light background (checked in the theme source), so the token is changed.
   ----------------------------------------------------------------------------------------------------- */
html.a11y-v { --muted: #637287; }
html.a11y-v .sc-chips .chip2,
html.a11y-v .scattered .chip2,
html.a11y-v .tarrow small { color: var(--muted); }

/* -----------------------------------------------------------------------------------------------------
   C3  Gold eyebrow labels on light sections (WCAG 1.4.3, needs 4.5:1: 12 px bold is small text)
   Gold #D4A851 on its own pale-gold pill is 2.02:1 (white section) and 1.90:1 (grey section).
   Proposal #886622 = same hue and saturation, darker: 4.86:1 / 4.56:1. The pill background stays.
   (Reverted token --gold-ink #846831 was a duller, greyer gold at about the same ratio.)
   Gold eyebrows on navy sections already pass and stay as they are.
   ----------------------------------------------------------------------------------------------------- */
/* APPROVED by Ibrahim 2026-10-21: always on (no .a11y-v gate) */
html .section:not(.dark) .eyebrow:not(.sa-eyebrow) { color: #886622; }

/* -----------------------------------------------------------------------------------------------------
   C4  Cyan large text: heading accent words and big numbers (WCAG 1.4.3, large text needs 3:1)
   #00B8D9 is 2.37:1 on white, 2.21:1 on #F4F7FB. Proposal #009BB7 (same hue, slightly darker):
   3.30:1 / 3.07:1. (Reverted --cyan-large #0094AF: 3.59 / 3.34.)
   ----------------------------------------------------------------------------------------------------- */
html.a11y-v .section:not(.dark) .s-head h2 .accent,
html.a11y-v .section:not(.dark) .ftext h3 .accent,
html.a11y-v .section:not(.dark) h2 > .ai-grad,
html.a11y-v .stat b,
html.a11y-v .section:not(.dark) .out b { color: #009BB7; }

/* -----------------------------------------------------------------------------------------------------
   T1  Tap areas on phones and tablets (WCAG 2.5.8 AA already passes by spacing; team rule C.tap = 44 px)
   The tap area grows with padding and the same negative margin, so nothing on screen moves or changes
   size (pixel diff of current vs proposed = 0 changed pixels, see the decision sheet).
   - breadcrumbs 36x22 -> 44x44
   - footer links 19 px tall -> 36 px (the full row pitch, no overlap with the next link), at least 44 wide
   - footer legal links 19 px -> 44 px tall, at least 44 wide
   - footer social 38x38 and contact social 42x42 -> 44x44 (the visible tile keeps its size: transparent border)
   - contact info links and the book-form privacy link 18-19 px -> 30 px tall
   Not changed: the 24 px book-form consent checkbox (its whole label is clickable; accepted-exception candidate).
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 992px) {
  html.a11y-v .crumb a { padding: 11px 4px; margin: -11px -4px; }
  html.a11y-v .footer li a { display: inline-block; padding: 6.5px 8px; margin: -6.5px -8px; }
  html.a11y-v .footer span a { display: inline-block; padding: 10.5px 3px; margin: -10.5px -3px; }
  html.a11y-v .footer .social a { width: 44px; height: 44px; margin: -3px; border: 3px solid transparent; background-clip: padding-box; border-radius: 13px; }
  html.a11y-v .csocial a { width: 44px; height: 44px; margin: -1px; border: 1px solid transparent; background-clip: padding-box; border-radius: 13px; }
  html.a11y-v .cinfo .ib a { display: inline-block; padding: 5.5px 0; margin: -5.5px 0; }
  html.a11y-v .upw-gate-consent a { display: inline-block; padding: 6px 0; margin: -6px 0; }
}

/* -----------------------------------------------------------------------------------------------------
   S1  Paragraph text 16 px on phones (team rule C.tap "body copy >= 16 px"; no WCAG criterion sets a size)
   13 to 15.5 px paragraphs over 80 characters, phone width only (<= 600 px). Cards get taller.
   Not reachable from here: 5 paragraphs carry an inline font-size (the "Last updated" line on Privacy, Terms
   and Cookies at 14 px; the two Industries path cards at 15 px). On a "yes", remove those inline sizes in
   pages/*.body.html when this moves into the theme.
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html.a11y-v .ff-consent,
  html.a11y-v .ind-card .ic-body p,
  html.a11y-v .bk-note,
  html.a11y-v .cs-card .csb .seg p,
  html.a11y-v .post .pb p,
  html.a11y-v .prose p,
  html.a11y-v .step p,
  html.a11y-v .fstep p,
  html.a11y-v .faq-a p,
  html.a11y-v .lcard p,
  html.a11y-v .card p,
  html.a11y-v .value p,
  html.a11y-v .ai-band p,
  html.a11y-v .bk-author p,
  html.a11y-v .vmc p,
  html.a11y-v .feat-post .fbody p { font-size: 16px; }
}

/* -----------------------------------------------------------------------------------------------------
   S2  Small labels 12 px on phones (team rule "no text under 12 px"; no WCAG criterion sets a size)
   Card tags, case-study row labels, award captions, ribbons, step captions: 9.5 to 11 px -> 12 px.
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html.a11y-v .cs-card .csb .seg b,
  html.a11y-v .cs-card .cspic .cstag,
  html.a11y-v .ind-card .b360,
  html.a11y-v .post .pthumb .cat,
  html.a11y-v .prodcard .pi .tag,
  html.a11y-v .feat-post .fbody .tag,
  html.a11y-v .ev-feat .efc .tag,
  html.a11y-v .tier .ribbon,
  html.a11y-v .cert-cap,
  html.a11y-v .tcap,
  html.a11y-v .tproof span,
  html.a11y-v .tstats span,
  html.a11y-v .tarrow small,
  html.a11y-v .e .gu-badge,
  html.a11y-v .loc2-hq { font-size: 12px; }
}

/* -----------------------------------------------------------------------------------------------------
   S3  Text inside the hero illustrations 12 px on phones (same team rule)
   The small UI pictures in the page heroes (kanban cards, payroll rows, channel chips, product tiles) and
   the home hero product row: 8.5 to 11.5 px -> 12 px. These are drawings of software screens.
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html.a11y-v .hv-prods a,
  html.a11y-v .oc-core b,
  html.a11y-v .oc-chan span,
  html.a11y-v .pv .pvl,
  html.a11y-v .pv .b360,
  html.a11y-v .pv > b,
  html.a11y-v .arule .ab span,
  html.a11y-v .kcard span,
  html.a11y-v .kcol .kh,
  html.a11y-v .sup-row .stag,
  html.a11y-v .sup-row .sm span,
  html.a11y-v .hr-emp .st,
  html.a11y-v .hr-emp .en span,
  html.a11y-v .hr-foot span,
  html.a11y-v .inv-foot span,
  html.a11y-v .tr-mod .tm span { font-size: 12px; }
}

/* -----------------------------------------------------------------------------------------------------
   O1  Footer columns on phones and tablets (team rule C.orphan; not a WCAG criterion)
   5 columns wrap as 2 + 2 + 1 (the last link column alone). The brand column spans the row: 1 + 2 + 2.
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 992px) {
  html.a11y-v .foot-grid > :first-child { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------------------------------
   O2  Content grids with one card alone in the last row (team rule C.orphan; not a WCAG criterion)
   Rule used everywhere: in a 2-column layout with an odd number of items, the first item spans the row.
   - Contact offices (5, <= 860 px): HQ card full width, then 2 + 2
   - Implementation roadmap (5, <= 760 px): phase 1 full width, then 2 + 2
   - Resources book path (5, 601-900 px): stage 1 full width, then 2 + 2
   - Solutions and AI platform card grids .g3 (9 or 3 items, 461-992 px): first card full width
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  html.a11y-v .offices > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html.a11y-v .road > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html.a11y-v .bk-path > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 461px) and (max-width: 992px) {
  html.a11y-v .g3 > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}