/* ITS website — approved visual accessibility CSS
 * Fixes 1–4 only: contrast, sticky header focus (2.4.11),
 * target size (2.5.8), and zoom/320px reflow (1.4.10 / 1.4.4).
 * Footer styles are intentionally omitted. Do not enable the theme footer.
 * Enqueued by mu-plugin its-a11y-visual-fixes.php.
 *
 * Brand tokens already on the site:
 *   --its-accent: #00d4ff
 *   --its-dark:   #0a0f1e
 *   --its-deep:   #060c18
 *   --its-navy:   #0d1b2a
 *   --its-muted:  #8898aa
 *   --its-white:  #f0f6ff
 */

/* ============================================================
   1. Contrast (WCAG 1.4.3 AA)
   Normal text ≥ 4.5:1; large text (≥18pt or 14pt bold) ≥ 3:1.
   Colors stay in the existing cool-gray / cyan family.
   ============================================================ */

/* 1a. Breadcrumb current item
   Was #6c757d on #0a0f1e = 4.07:1 (fails normal text).
   #8a939b is a one-step lighten of the same gray; 6.12:1. */
.breadcrumb-item.active,
.breadcrumb-item.active[aria-current="page"],
nav[aria-label="breadcrumb"] li.active,
.breadcrumb .active {
  color: #8a939b !important;
}

/* 1b. Muted body / AI-RO “trust” line
   Was #64748b on #111625 = 3.79:1.
   #7b8ba3 keeps the muted role and reaches 5.20:1.
   Also map other AI-RO muted selectors that share the same gray. */
.airo-public-trust,
.airo-scan-sub,
.airo-teaser-label,
.airo-section-sub,
.airo-gap-score,
.airo-gap-has,
.airo-opp-label,
.airo-cta-sub,
.airo-public-card p[style*="#64748b"],
[style*="color:#64748b"],
[style*="color: #64748b"],
[style*="color:#64748B"],
[style*="color: #64748B"] {
  color: #7b8ba3 !important;
}

/* 1c. Hero cycling words
   Was color: transparent + 2px accent stroke. Checkers read the
   transparent fill as 1.07:1. Filling with the existing accent
   (#00d4ff) on --its-deep (#060c18) is 11.05:1, so it also
   passes 4.5:1 if the type is treated as normal text.
   This changes the outlined look to a solid accent fill, matching
   the eyebrow / button accent already used on the page. */
.its-hero__title-cycle,
.its-word,
.its-word--active {
  color: var(--its-accent, #00d4ff) !important;
  -webkit-text-fill-color: var(--its-accent, #00d4ff) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

/* Decorative gradient-fill step numbers (same transparent-fill
   pattern). Use the solid accent so they stay readable. */
.its-step__number,
[class*="its-step"][style*="text-fill"],
.its-process [style*="-webkit-text-fill-color"] {
  -webkit-text-fill-color: var(--its-accent, #00d4ff) !important;
  color: var(--its-accent, #00d4ff) !important;
}

/* 1d. Text over photos, gradients, and translucent panels.
   Give a near-solid dark fallback / scrim so text is measured
   against #0a0f1e (white 19.09:1, accent 10.78:1, #a0aec0 8.46:1)
   instead of an unpredictable photo. */
.fl-page-bar {
  /* Was a #1a1a1a → #000 gradient; axe could not compute contrast.
     Solid black is visually almost identical and is measurable. */
  background: #000 !important;
  background-image: none !important;
  color: #21aaef;
}

/* Hero copy sits over the parallax scene. A local radial scrim
   behind the text column only — the rest of the illustration
   stays visible. */
.its-hero__content,
.its-hero .its-container {
  position: relative;
  z-index: 2;
  background: radial-gradient(
    ellipse 80% 70% at 30% 50%,
    rgba(6, 12, 24, 0.88) 0%,
    rgba(6, 12, 24, 0.55) 55%,
    rgba(6, 12, 24, 0) 75%
  );
}

/* Scroll hint was rgba(0,212,255,.5) — roughly 3.1–3.4:1 and
   small type. Full accent on the deep hero is 11.05:1. */
.its-hero__scroll-hint p {
  color: var(--its-accent, #00d4ff) !important;
}

/* Any Beaver Builder row whose background is a photo or gradient:
   darken the existing overlay rather than inventing a new palette. */
.fl-row-bg-photo .fl-row-content-wrap,
.fl-row-bg-overlay .fl-row-content-wrap,
.uabb-row-overlay,
.fl-row-content-wrap[style*="background-image"] {
  background-color: rgba(10, 15, 30, 0.92);
}

/* Promo / HTML modules that already use an inline gradient +
   photo (e.g. Belvedere). The companion JS below also rewrites
   the gradient stops to 0.94/0.90. This color is the fallback
   if the image fails to load. */
.fl-html > div[style*="url("] {
  background-color: #0a0f1e;
}

/* Figcaptions and small type on dark cards. */
figcaption,
.wp-caption-text,
.fl-photo-caption {
  color: #8a939b;
}


/* ============================================================
   2. Sticky header must not cover focused controls
   (WCAG 2.2 2.4.11 Focus Not Obscured, AA)
   Lighter CSS first: scroll-padding + submenu stacking.
   A short helper in mockup-js.js recenters a focused control
   if it still intersects the fixed bar.
   ============================================================ */

html {
  /* One source of truth for 2.4.11. 6rem (~96px) clears the 57px
     sticky bar with a little breathing room. Do not also set
     scroll-margin-top on :focus-visible — the two add together. */
  scroll-padding-top: 6rem;
}

/* Submenus already use z-index 1000; the fixed header is z-index
   100. Keep the dropdown above the bar and don’t clip it. */
.fl-page-header,
.fl-page-header-wrap,
.fl-page-header-row,
.fl-page-nav,
.fl-page-nav-wrap,
.fl-page-nav-collapse,
.fl-page-fixed-nav-wrap {
  overflow: visible !important;
}

.fl-page-nav .sub-menu,
.fl-page-nav ul.sub-menu,
.fl-page-header-fixed .fl-page-nav ul.sub-menu {
  z-index: 100001 !important;
}

/* Fallback only if a focused submenu item would still sit under
   the sticky bar: unstick that bar for the duration of keyboard
   focus inside the nav. Pointer users are unaffected. */
.fl-page:has(.fl-page-nav a:focus-visible) .fl-page-header-fixed {
  /* Intentionally left as a commented option. The walkthrough
     prefers scroll-padding + z-index; enable this rule only if
     those are not enough.
  position: static !important;
  */
}


/* ============================================================
   3. Target size ≥ 24×24 CSS pixels (WCAG 2.2 2.5.8)
   Prev/next were 18px tall; several in-content and related-post
   links were 18–22px tall and close to a neighbor.
   ============================================================ */

.fl-post-nav a,
.fl-post-nav a[rel="prev"],
.fl-post-nav a[rel="next"],
a[rel="prev"],
a[rel="next"],
.post-nav a[rel="prev"],
.post-nav a[rel="next"] {
  min-height: 24px;
  min-width: 24px;
  padding: 8px 4px;
  display: inline-block;
  line-height: 1.4;
  box-sizing: border-box;
}

/* In-content / citation links and Jetpack related-post titles.
   inline-block + 2px vertical padding lifts 22px line boxes to
   at least 24px without visibly loosening paragraph spacing. */
.fl-content a:not(.its-btn):not(.nav-link):not(.fl-button):not(.uabb-button):not(.uabb-creative-button):not(.navbar-brand):not(.fl-logo-link),
.fl-post-content a:not(.its-btn):not(.nav-link):not(.fl-button),
.entry-content a:not(.its-btn):not(.nav-link):not(.fl-button),
.fl-rich-text a,
.jp-relatedposts-post-a,
.jp-relatedposts-post-title a {
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.5;
  box-sizing: border-box;
}

.jp-relatedposts-post-a,
.jp-relatedposts-post-title a {
  display: inline-block;
}


/* ============================================================
   4. Reflow / zoom — no horizontal overflow at 320px width
   or at 640 CSS px (1280 × 200% zoom). WCAG 1.4.10 / 1.4.4.
   The failing node was the header nav (~330px content in a
   320px viewport). Shrink the logo, tighten padding, allow
   wrapping, and cap widths at 100%.
   ============================================================ */

html,
body,
.fl-page,
.fl-page-header,
.fl-page-header-wrap,
.fl-page-header-container,
.fl-page-header-row,
.fl-page-nav,
.fl-page-nav-wrap,
.fl-page-bar,
.fl-page-bar-container {
  max-width: 100%;
}

.fl-page-header .fl-logo-img,
.fl-page-header-fixed .fl-logo-img,
.fl-logo-img {
  max-width: min(220px, 62vw) !important;
  height: auto !important;
  width: auto !important;
}

.fl-page-header-row,
.fl-page-nav .navbar-nav {
  flex-wrap: wrap;
  max-width: 100%;
}

@media (max-width: 640px) {
  .fl-page-header-container,
  .fl-page-header .container,
  .fl-page-header-fixed .fl-page-header-container,
  .fl-page-bar .container,
  .fl-page-bar-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Some header layouts add 40px side padding on the logo wrap
     at mid-widths, which is what tips a 320px view over the edge. */
  .fl-page-header-logo,
  .fl-page-logo-wrap,
  .fl-page-nav-right .fl-page-header-logo {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fl-page-nav-toggle-visible-always .fl-page-header-wrap .fl-page-header-container,
  .fl-page-nav-toggle-visible-medium-mobile .fl-page-header-wrap .fl-page-header-container,
  .fl-page-nav-toggle-visible-mobile .fl-page-header-wrap .fl-page-header-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fl-page-header-row,
  .fl-page-header-row > div {
    max-width: 100%;
  }

  /* Wide tables already have a scroll wrapper; keep them from
     blowing out the page. */
  .fl-page-content img,
  .fl-page-content iframe,
  .fl-page-content video,
  .fl-page-content table {
    max-width: 100%;
  }
}

/* Belt-and-suspenders: never let the page box itself force a
   horizontal scrollbar. Content still wraps rather than being
   clipped (logo shrinks, nav collapses, tables scroll inside
   their already-focusable wrapper). */
html,
body {
  overflow-x: auto;
}
.fl-page {
  overflow-x: hidden;
}