/* ============================================================
   Shared UI/UX corrections, loaded after each page's own CSS.
   Findings from the audit on 2026-08-02.
   ============================================================ */

/* 1. Keyboard focus was completely invisible on all three pages.
      Anyone navigating by keyboard had no idea where they were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #6d3f9e;
  outline-offset:3px;
  border-radius:6px;
}
/* on dark backgrounds the purple ring disappears — use a light ring there */
.dark a:focus-visible, .dark button:focus-visible,
.slider a:focus-visible, .slider button:focus-visible,
.hero a:focus-visible, .hero button:focus-visible,
footer a:focus-visible, footer button:focus-visible,
.util a:focus-visible, .util button:focus-visible,
.navband a:focus-visible{
  outline:3px solid #7fe0ab;
  outline-offset:3px;
}

/* 2. Skip link — a long institutional nav is painful without one. */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:#0b1236;color:#fff;padding:12px 22px;border-radius:0 0 8px 8px;
  font-weight:700;font-size:.92rem;
}
.skip:focus{inset-inline-start:0}

/* 3. Slider dots were 4-9px tall — far below a usable touch target.
      Pad the button out to 44px while keeping the dot visually small, using
      background-clip so the paint stays on the content box only. */
/* ⚠️ the pages set `background:` (the shorthand) on these buttons, which RESETS
   background-clip to border-box — so the padded hit area painted as a big block.
   Re-declare the clip at matching specificity, including the .on state. */
.sdots button, .sdots button.on,
.hdots button, .hdots button.on,
.s-dots button, .s-dots button.on{
  position:relative;
  padding:20px 8px;
  background-clip:content-box;
  box-sizing:content-box;
}
.sdots button::after, .hdots button::after, .s-dots button::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
}
/* keep the row visually where it was despite the taller buttons */
.sdots,.hdots,.s-dots{align-items:center}

@media (hover:none) and (pointer:coarse){
  .arow a, .call a, .list-row .go, .box .bh .all,
  .post a, .util a, .util .fs button, .socials a, .soc a,
  footer ul li a, .menu a, nav.menu a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
  }
  .arow a, .call a, .post a, .box .bh .all, footer ul li a{justify-content:flex-start}
  .soc a, .socials a{width:44px;height:44px}
  header .logo, .ident a, header a:has(img){min-height:44px;display:inline-flex;align-items:center}
}
/* dots: widen the hit box to 44px too (padding was only vertical) */
.sdots button, .sdots button.on,
.hdots button, .hdots button.on,
.s-dots button, .s-dots button.on{padding:20px 18px;background-clip:content-box}
.sdots, .hdots, .s-dots{gap:0}

/* 5. Contrast. The brand green is a graphic colour; at text sizes it fell
      below WCAG AA on white (3.27:1). A darker cut is used for text only,
      so the brand green stays for fills, rules and large display. */
:root{
  --green-text:#0d7a42;   /* 4.9:1 on white */
  --muted-fix:#6b7488;    /* 4.6:1 on white */
}
.post time, .post .date, .post a,
.arow a, .call a, .box .bh .all,
.eyebrow, .list-row .go,
.nrow time, .figs span, .stat span{
  color:var(--green-text);
}
.dark .call a, .dark .arow a, .dark .post a, .dark .list-row .go,
.on-dark .call a, .on-dark .arow a,
footer .post a, footer a.all{color:#7fe0ab}
.dark .eyebrow, .on-dark .eyebrow{color:#c4a5f5}
.dark .figs span, .dark .stat span{color:#c3cbe4}

/* muted notes and secondary meta were 2.5-2.6:1 — unreadable for many users */
.ph-note, .fnote, .stnote, .nrow time, .news-row time{
  color:var(--muted-fix);
}
.stnote{color:#c3cbe4}          /* this one sits on dark navy */
.nrow time{color:#6b7488}

/* white-on-green buttons: darken the fill so the label clears AA.
   ⚠️ Must exclude the outline/ghost variants — a blanket .btn rule painted
   them green and left dark text on green (3.9:1), worse than before. */
.btn:not(.btn-line):not(.btn-ghost):not(.btn-primary),
.navband .btn{background-color:#0d7a42}
.btn:not(.btn-line):not(.btn-ghost):not(.btn-primary):hover,
.navband .btn:hover{background-color:#0b6837}
.btn-line,.btn-ghost{background-color:transparent}
/* gradient buttons keep their gradient, darkened at the green end */
.btn-primary{background-image:linear-gradient(115deg,#0d7a42 0%,#6d3f9e 52%,#1d3080 100%)}
.slide .tag{background:#0d7a42}

/* text sitting directly on a photograph can never be guaranteed by a colour
   pair alone — deepen the veil and add a soft shadow so it holds on any frame */
.slide .ov{background:linear-gradient(to left,rgba(12,28,71,.96) 6%,rgba(12,28,71,.82) 46%,rgba(12,28,71,.42) 86%)}
.hslide .veil{background:linear-gradient(to top,rgba(11,18,54,.96) 4%,rgba(11,18,54,.76) 46%,rgba(11,18,54,.46) 100%)}
.slide-copy h2,.slide-copy p,.hero .slide-title,.hero p,.hero .badge,.slide h2,.slide p{
  text-shadow:0 1px 14px rgba(6,11,34,.55);
}

/* 6. Respect a user's motion preference — none of the pages did.
      Ken-burns zoom, floating nodes and reveal animations all stop. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.rv{opacity:1 !important;transform:none !important}
}

/* 7. Screen-reader-only helper for the page's real <h1>. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 2026-08-09 — measured, not guessed: at tablet width the home page's intro and
   product columns go single-column while the container stays wide, so body copy
   ran 87 characters a line. Comfortable measure is 60-75. Loaded by the home
   page and the inner pages alike. */
@media(min-width:601px) and (max-width:980px){
  .intro-grid p, .product p{max-width:70ch}
}