/* ==============================================
   UTILITIES — accessibility, motion, responsive
   ============================================== */

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  background: var(--color-green);
  color: #000;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  z-index: 999;
  transition: top 200ms ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-blue-dark); outline-offset: 2px; }

/* ── Focus styles ──

   The ring was --color-green (#ABC230). Measured against the surfaces it
   actually appears on:

       #ABC230 on #FFFFFF (page background)     2.00:1
       #ABC230 on #F5F5F5 (light sections)      1.84:1
       #ABC230 on #006080 (header)              3.51:1
       #ABC230 on #004357 (footer)              5.41:1

   WCAG 1.4.11 requires 3:1 against adjacent colours, so the indicator was
   effectively invisible across the entire body of every page — which is
   where most focusable content lives.

   --color-blue-dark (#006080) measures 7.04:1 on white and 6.45:1 on the
   light-gray sections. The white halo separates the ring from dark
   backgrounds, so one rule works everywhere and no context-switching is
   needed. (Audit KARNA-A11Y-001, WCAG 1.4.11 AA.) */
:focus                     { outline: 3px solid var(--color-blue-dark); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible             { outline: 3px solid var(--color-blue-dark); outline-offset: 3px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-blue-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-white);
}

/* On the dark header the ring needs the opposite treatment: white ring,
   dark halo. Both directions clear 3:1 against their own surface. */
.site-nav__menu a:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px var(--color-blue-darker);
}
/* #006080 is only 1.54:1 against the footer, so footer links invert too. */
.site-footer a:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
  box-shadow: none;
}
.btn-primary:focus-visible       { outline: 3px solid var(--color-white); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-blue-dark); }

/* ── Screen reader only ── */
/* .screen-reader-text is WordPress core's name for this and appears in
   markup this theme already ships (page-explore.php:107, functions.php:306).
   Core only styles it in wp-admin, so on the front end those labels were
   rendering as ordinary visible text. Aliased rather than renamed so any
   markup using either name is covered. */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.screen-reader-text.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Form a11y helpers ── */
.required           { color: var(--color-error); font-weight: 700; }
.form-hint          { font-size: var(--text-xs); color: var(--color-gray-web); margin-top: 4px; display: block; }
.form-required-note { font-size: var(--text-sm); color: var(--color-gray-web); margin-bottom: var(--space-2); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .site-nav__toggle .site-nav__bar { transition: none; }
}

/* ── High contrast mode ── */
@media (forced-colors: active) {
  .btn-primary, .btn-outline { border: 2px solid ButtonText; }
  .site-nav__bar             { background: ButtonText; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .solutions-grid,
  .sol-grid           { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Typography */
  .hero__title strong { font-size: 3rem; }
  .hero__title span   { font-size: 1.75rem; }
  .page-title         { font-size: 2rem; }

  /* Grids */
  .solutions-grid { grid-template-columns: 1fr 1fr; }
  .news-featured  { grid-template-columns: 1fr; }
  .cta-band,
  .sol-cta-inner  { grid-template-columns: 1fr; gap: var(--space-4); }
  .news-header    { flex-direction: column; gap: var(--space-2); }
  .contact-grid   { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .sol-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .solutions-grid     { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .hero__title strong { font-size: 2.25rem; }
  .hero__title span   { font-size: 1.5rem; }
  .hero__buttons      { flex-direction: column; }
  .page-title         { font-size: 1.6rem; }
}