/* ============================================================
   Kana — accessibility layer (loaded site-wide after global.css)
   WCAG 2.2 AA fixes that cut across templates: text-safe colour
   tokens, focus visibility, hidden-but-focusable regions, motion.
   ============================================================ */

:root {
  /* Text-safe companions to decorative tokens. --ks-ink-faint (#B0AAA3)
     measures ~2:1 on light surfaces — fine for rules and rail decoration,
     not for words. --ks-signal (#D06247) is 3.8:1 on white — fine for large
     display text and icons, not for small text. */
  --ks-ink-subtle:   #625E59; /* ≥ 5.2:1 on white / canvas / canvas-alt */
  /* Derived from the dark accent (Studio Settings → Design & Colours) so it
     follows any accent colour — terracotta, green, blue. Darkening the dark
     accent by 18% keeps small text at AA for any reasonable accent choice. */
  --ks-signal-text:  color-mix(in srgb, var(--ks-signal-dk, #B8503A) 82%, #000);
  --ks-focus-ring:   0 0 0 3px rgba(184, 80, 58, 0.35);
}

/* ── Screen-reader-only text ───────────────────────────────────── */
.ks-sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto; margin: 0;
  clip: auto; white-space: normal;
}

/* ── Focus: always visible, never colour-only ───────────────────── */
:focus-visible { outline: 2px solid var(--ks-signal-dk); outline-offset: 3px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { box-shadow: var(--ks-focus-ring); }
/* Inputs that only changed border colour on focus now also get a ring. */
.ks-search-form__input:focus,
.ks-thread__link-row input:focus,
.ks-updates__input:focus { box-shadow: var(--ks-focus-ring); }
.ks-skip-link:focus { outline: 2px solid var(--ks-signal-lt); outline-offset: 2px; }

/* ── Hidden regions must not take focus ─────────────────────────── */
.ks-nav-drawer { visibility: hidden; transition: transform var(--ks-dur-slow) var(--ks-ease), visibility 0s linear var(--ks-dur-slow); }
.ks-nav-drawer[aria-hidden="false"] { visibility: visible; transition: transform var(--ks-dur-slow) var(--ks-ease), visibility 0s; }
.ks-store-modal { visibility: hidden; transition: opacity var(--ks-dur) var(--ks-ease), visibility 0s linear var(--ks-dur); }
.ks-store-modal.is-open { visibility: visible; transition: opacity var(--ks-dur) var(--ks-ease), visibility 0s; }

/* ── Scroll reveal: never hide content unless JS is running ─────── */
/* global.css hides .ks-reveal unconditionally — if a script fails (or a
   crawler / reader mode skips JS) whole sections stay invisible and
   unclickable. Only hide when <html> carries .ks-js (set inline in header). */
html:not(.ks-js) .ks-reveal { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .ks-reveal { opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Contrast: faint text on light surfaces → AA-safe tone ─────── */
.ks-post-toc__label,
.ks-start-submit-note,
.ks-start-success__step-pending,
.ks-studio-lane__empty,
.ks-work-card__meta,
.ks-work-card__cta,
.ks-testi-card__role,
.ks-journal-card2__meta,
.ks-journal-card2__link,
.ks-cta-section__social-link,
.ks-empty,
.ks-mini-list__date,
.ks-board__empty,
.ks-pcard__due, .ks-pcard__prog, .ks-pcard__ms,
.ks-comms-thread__progress,
.ks-client-assign__or,
.ks-svc-archive-card__index { color: var(--ks-ink-subtle); }
.ks-process-step__tag { color: var(--ks-ink-soft); } /* sits on --ks-line */
/* Icon-only controls need 3:1 against their surface. */
.ks-icon-btn, .ks-check, .ks-row-del { color: var(--ks-ink-subtle); }

/* Eyebrows on the canvas-alt sections dip below 4.5:1 with --ks-ink-muted. */
.ks-work-section .ks-eyebrow,
.ks-testi-section .ks-eyebrow,
.ks-journal-section .ks-eyebrow,
.ks-process-section .ks-eyebrow { color: var(--ks-ink-subtle); }

/* Small terracotta text → the darker text-safe signal. Large display em's keep --ks-signal. */
.ks-journal-content a,
.ks-store-card__price,
.ks-toc__link.is-active,
.ks-breadcrumb__item a:hover { color: var(--ks-signal-text); }
.ks-journal-content a { border-bottom-color: currentColor; }

/* Eyebrow on dark CTA bands (replaces an inline style). */
.ks-eyebrow--on-dark { color: var(--ks-signal-lt); }

/* ── Targets: 24×24 minimum for icon-only buttons (WCAG 2.5.8) ──── */
.ks-announce-bar__close,
.ks-nav-drawer__close,
.ks-store-modal__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Windows High Contrast / forced colours ─────────────────────── */
@media (forced-colors: active) {
  .ks-btn, .ks-store-filter__chip, .ks-journal-topics__chip, .ks-share__btn, .ks-store-badge { border: 1px solid ButtonText; }
  .ks-store-filter__chip.is-active, .ks-journal-topics__chip.is-active { outline: 2px solid Highlight; }
  .ks-read-progress { background: Highlight; }
}

/* ── Portal: row titles are real buttons now (keyboard reachable) ─ */
button.ks-mtable__name,
button.ks-gantt__name { color: inherit; text-align: left; padding: 0; cursor: pointer; font: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ks-mtable__name:hover,
button.ks-gantt__name:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Audit fixes (axe-core, Oct 2026) ─────────────────────────────── */
/* Logo byline was 3.3:1 at 50% opacity. */
.ks-logo__byline { opacity: 0.72; }
/* Small terracotta text → the text-safe shade (large display em's keep --ks-signal). */
.ks-support li > strong,
.ks-login-alt a,
.ks-about-hero__lead em,
.ks-svc-archive__sub a,
.ks-field__hint a { color: var(--ks-signal-text); }

/* ═════════════════ One button system (marketing site) ═════════════════
   Every .ks-btn variant shares the same box: height, padding, border width,
   type size and icon gap. Variants change colour only, so a filled button and
   an outline button placed side by side always line up. Filled buttons use
   the dark accent so white labels stay readable with any accent colour. */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0 1.5rem; box-sizing: border-box;
  border: 1px solid var(--ks-ink); border-radius: 0;
  font-family: var(--ks-sans); font-size: var(--ks-size-sm); font-weight: 600; line-height: 1;
  letter-spacing: var(--ks-tracking-wide); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--ks-dur) var(--ks-ease), color var(--ks-dur) var(--ks-ease), border-color var(--ks-dur) var(--ks-ease);
}
.ks-btn--sm { min-height: 36px; padding: 0 1rem; font-size: var(--ks-size-xs); }
.ks-btn--lg { padding: 0 1.75rem; } /* same height as every other button — only wider */
.ks-btn--block { width: 100%; }
.ks-btn .ks-icon { flex-shrink: 0; width: 16px; height: 16px; }
.ks-btn--sm .ks-icon { width: 14px; height: 14px; }

/* Filled: primary and signal are the same treatment. */
.ks-btn--primary, .ks-btn--signal {
  background: var(--ks-signal-dk); border-color: var(--ks-signal-dk); color: var(--ks-white);
}
.ks-btn--primary:hover, .ks-btn--signal:hover {
  background: var(--ks-signal-text); border-color: var(--ks-signal-text); color: var(--ks-white);
}
/* Outline on light surfaces. */
.ks-btn--ghost { background: transparent; border-color: var(--ks-line); color: var(--ks-ink); }
.ks-btn--ghost:hover { background: var(--ks-canvas); border-color: var(--ks-ink); color: var(--ks-ink); }
/* Outline on dark surfaces (CTA bands, footer). */
.ks-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--ks-white); }
.ks-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ks-white); color: var(--ks-white); }

/* Button rows: equal height, consistent spacing, wrap on small screens. */
.ks-svc-archive__cta-actions, .ks-404__actions, .ks-store-hero__ctas, .ks-story-product__actions,
.ks-journal-cta__inner > .ks-btn, .ks-svc-page-cta__actions, .ks-hero-section__ctas, .ks-cta-section__actions {
  align-items: stretch;
}
.ks-svc-archive__cta-actions, .ks-svc-page-cta__actions, .ks-cta-section__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Arrow icons (swapped in for typed → / ← by ks_arrow_icons()). */
.ks-arrow { transition: transform var(--ks-dur) var(--ks-ease); }
a:hover > .ks-arrow--right, button:hover > .ks-arrow--right, a:focus-visible > .ks-arrow--right { transform: translateX(3px); }
a:hover > .ks-arrow--left, button:hover > .ks-arrow--left, a:focus-visible > .ks-arrow--left { transform: translateX(-3px); }
a .ks-arrow, button .ks-arrow { display: inline-block; vertical-align: -0.15em; }
/* Buttons inside stacked (column) layouts keep their natural width. */
.ks-svc-archive__hero-copy > .ks-btn, .ks-svc-page-hero__copy > .ks-btn, .ks-404x__copy > .ks-btn, .ks-client-empty > .ks-btn { align-self: flex-start; }
.ks-client-empty > .ks-btn { align-self: center; }

/* ── Audit fixes, homepage sections (axe with all reveals shown) ──── */
/* Small accent numerals → text-safe accent shade. */
.ks-svc-card2__index, .ks-process-step__num, .ks-faq-item__num { color: var(--ks-signal-text); }
/* Vertical rail labels and the mark gloss are real words → AA-safe grey. */
[class*="__rail-label"], .ks-cta-section__mark-gloss, .ks-svc-archive__hero-rail-label { color: var(--ks-ink-subtle); }
/* Inline links in intro paragraphs need more than colour. */
.ks-svc-archive__sub a { text-decoration: underline; text-underline-offset: 3px; }
/* Large watermark glyphs (கனா) stay faint on purpose — decorative, aria-hidden. */