/* =============================================================================
   NOBLE PIXELS — ACCESSIBILITY LAYER
   Global accessibility hardening for WCAG 2.1 AA + Ontario AODA compliance.

   This file MUST be loaded after all other CSS so it wins specificity
   battles against third-party styles.

   Sections:
   1. Focus management
   2. Colour contrast enforcement
   3. Reduced motion
   4. High contrast media query
   5. Screen reader utilities
   6. Keyboard navigation
   7. Touch target enforcement
   8. ARIA live regions
   9. Print optimizations
   ============================================================================= */


/* =============================================================================
   1. FOCUS MANAGEMENT — WCAG 2.4.7 (Focus Visible)
   ============================================================================= */

/*
 * Global focus ring — ensures every focusable element has a visible ring.
 * We suppress the default outline only on mouse clicks via :focus:not(:focus-visible)
 * so keyboard users always see the indicator.
 */
:focus-visible {
  outline: 3px solid var(--color-focus-ring, #7aad3a);
  outline-offset: 3px;
}

/* Remove outline for mouse/pointer users (not keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}

/*
 * Enhanced focus for links and buttons — AODA requires clear differentiation.
 * We use a high-contrast lime ring (#7aad3a on dark, #2563eb on light).
 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role='button']:focus-visible,
[role='link']:focus-visible,
[role='menuitem']:focus-visible,
[role='option']:focus-visible,
[role='tab']:focus-visible {
  outline: 3px solid var(--color-focus-ring, #7aad3a);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 0.25rem);
}

/* On light backgrounds — use blue ring instead of lime (better contrast) */
:root:not([data-page-theme='dark']) a:focus-visible,
:root:not([data-page-theme='dark']) button:focus-visible,
:root:not([data-page-theme='dark']) [tabindex]:focus-visible {
  outline-color: var(--np-blue-600, #2563eb);
}

/* Dark page context — lime ring */
[data-page-theme='dark'] a:focus-visible,
[data-page-theme='dark'] button:focus-visible,
.dark-page a:focus-visible,
.dark-page button:focus-visible {
  outline-color: var(--np-lime-500, #7aad3a);
}

/* Input / textarea / select focus — handled in forms.css but ensure fallback */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--np-blue-600, #2563eb);
  outline-offset: 1px;
}


/* =============================================================================
   2. COLOUR CONTRAST ENFORCEMENT — WCAG 1.4.3
   ============================================================================= */

/*
 * Enforce minimum text contrast on elements that may receive user-generated
 * or CMS-authored colour overrides.
 */

/* Placeholder text — intentionally lower contrast (informational only, not relied upon) */
::placeholder {
  color: var(--np-neutral-400, #94a3b8);  /* 2.8:1 on white — acceptable for placeholder */
  opacity: 1;
}

/* Ensure muted/secondary text never goes below AA minimum */
.np-text-muted,
.text-gray-400,
.text-gray-300 {
  /* Minimum 4.5:1 on white: np-neutral-500 (#64748b) = 4.55:1 ✓ */
  color: var(--np-neutral-500, #64748b);
}

/* Disable text colour overrides on focus — ring must be visible */
*:focus-visible {
  text-decoration-color: currentColor;
}


/* =============================================================================
   3. REDUCED MOTION — WCAG 2.3.3 (Animation from Interactions)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Disable all CSS animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep focus transitions instant but visible */
  :focus-visible {
    transition: none !important;
  }

  /* Disable scroll-triggered reveals */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

/* Hide purely decorative particle layers (not static hero canvases) */
  .np-particles,
  .particle-canvas {
    display: none !important;
  }

  /* Disable carousels from auto-advancing */
  [data-autoplay] {
    animation-play-state: paused !important;
  }
}


/* =============================================================================
   4. HIGH CONTRAST MODE — Windows High Contrast / Forced Colours
   ============================================================================= */

@media (prefers-contrast: high) {

  /* Ensure borders are visible in high contrast mode */
  .np-card,
  .np-btn,
  .np-input,
  .np-textarea,
  .np-select {
    border: 2px solid ButtonText !important;
  }

  /* Ensure focus ring is always visible */
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
  }

  /* Ensure button text remains readable */
  .np-btn--primary,
  .cta-primary {
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
  }

  /* Ensure links are distinguishable */
  a {
    text-decoration: underline !important;
  }

  /* High contrast images */
  img {
    forced-color-adjust: auto;
  }
}

@media (forced-colors: active) {
  .np-btn {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}


/* =============================================================================
   5. SCREEN READER UTILITIES — WCAG 4.1.3
   ============================================================================= */

/* Standard sr-only implementation */
.sr-only,
.visually-hidden,
.np-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;
}

/* sr-only that becomes visible on focus (for skip-nav links etc.) */
.sr-only-focusable:focus,
.np-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Announce live regions */
[aria-live='polite'],
[aria-live='assertive'] {
  /* These regions are read by screen readers; don't hide them */
}

/* Status message container */
.np-status-message {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-lg, 0.75rem);
  border: 1.5px solid transparent;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  line-height: var(--leading-relaxed, 1.625);
}

.np-status-message--success {
  background: color-mix(in srgb, var(--np-green-500, #22c55e) 10%, #fff);
  border-color: var(--np-green-700, #15803d);
  color: var(--np-green-700, #15803d);
}

.np-status-message--error {
  background: color-mix(in srgb, var(--np-red-500, #ef4444) 8%, #fff);
  border-color: var(--np-red-700, #b91c1c);
  color: var(--np-red-700, #b91c1c);
}

.np-status-message--warning {
  background: color-mix(in srgb, var(--np-amber-400, #fbbf24) 15%, #fff);
  border-color: var(--np-amber-700, #b45309);
  color: var(--np-amber-700, #b45309);
}

.np-status-message--info {
  background: var(--np-blue-50, #eff6ff);
  border-color: var(--np-blue-600, #2563eb);
  color: var(--np-blue-800, #1e40af);
}


/* =============================================================================
   6. KEYBOARD NAVIGATION
   ============================================================================= */

/* Ensure interactive elements trapped inside modals stay in modal */
[aria-modal='true'] {
  isolation: isolate;
}

/* Ensure custom interactive elements have cursor: pointer */
[role='button'],
[role='tab'],
[role='option'],
[role='menuitem'],
[role='checkbox'],
[role='radio'],
[role='switch'] {
  cursor: pointer;
}

/* Disabled interactive elements */
[aria-disabled='true'],
[disabled] {
  cursor: not-allowed;
}

/* Expandable / collapsible regions */
[aria-expanded='false'] + [role='region'],
[aria-expanded='false'] + [aria-hidden='true'] {
  display: none;
}

/* Ensure tab panels are correctly hidden/shown */
[role='tabpanel'][aria-hidden='true'] {
  display: none;
}

[role='tabpanel'][aria-hidden='false'] {
  display: block;
}


/* =============================================================================
   7. TOUCH TARGET ENFORCEMENT — WCAG 2.5.5 / AODA (AA prefers ~24px;
   Ontario guidance commonly targets 44×44 CSS px for primary controls)
   ============================================================================= */

/* Icon-only controls (single SVG child) — pad to ~44×44 without forcing
   text+icon links into square icons (which breaks layout and reading order). */
a:has(> svg:only-child),
button:has(> svg:only-child),
a.np-social-link,
.np-social-links a,
.np-footer .np-social-links a {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Primary interactive chrome */
.np-nav-toggle,
.np-nav-close,
.np-header__cta,
.np-btn,
button[type='submit'] {
  min-height: 2.75rem;
}

/* Tabs and disclosure controls: comfortable hit area */
[role='tab'],
button[aria-expanded] {
  min-height: 2.5rem;
}


/* =============================================================================
   8. SEMANTIC LANDMARK IMPROVEMENTS
   ============================================================================= */

/* Ensure main content area is focusable for skip-nav target */
main:focus {
  outline: none;  /* Main should receive focus but not show a ring */
}

#main-content:focus {
  outline: none;
}

/* Improve heading visibility for screen readers */
.np-section-heading {
  scroll-margin-top: 5rem;  /* Account for sticky header */
}

/* Ensure decorative images have empty alt (enforced via linting, noted here) */
img[alt=''],
img:not([alt]) {
  /* Decorative — screen reader will skip */
}

/* Ensure informational images have non-empty alt */


/* =============================================================================
   9. ARIA ATTRIBUTE VISIBILITY
   ============================================================================= */

/* Loading spinner text */
[aria-busy='true'] {
  cursor: progress;
}

/* Tooltip */
[aria-describedby] {
  position: relative;
}

/* Disclosure buttons */
details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

details > summary:focus-visible {
  outline: 3px solid var(--color-focus-ring, #7aad3a);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 0.25rem);
}


/* =============================================================================
   10. WCAG 1.4.4 — RESIZE TEXT
   Ensure text remains readable at 200% zoom.
   ============================================================================= */

/* No fixed heights on text containers */
.np-card__body,
.np-testimonial__text,
.np-cta-block__description {
  height: auto;
  min-height: auto;
}

/* Ensure containers can expand with text */
.np-section {
  overflow: visible;
}


/* =============================================================================
   11. SKIP LINK HARDENING — WCAG 2.4.1 / AODA
   Loaded last so page-level CSS cannot hide or neutralize the skip control.
   ============================================================================= */

.np-skip-nav {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: #0d1b2a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  /* Visually hide until focused, but keep available to keyboard */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  margin: -1px;
}

.np-skip-nav:focus,
.np-skip-nav:focus-visible {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  overflow: visible;
  margin: 0;
  outline: 3px solid #7aad3a;
  outline-offset: 3px;
}


/* =============================================================================
   12. COLOUR CONTRAST — DECORATIVE GOLD / MUTED TEXT (WCAG 1.4.3 AA)
   Brand gold (#C8922A) fails ~4.5:1 on light paper. Darken section labels
   and muted body copy used site-wide while preserving the design intent.
   ============================================================================= */

.nh-label,
.naoda-label,
.nwa-label,
.nim-label,
.ns-label,
.na-label,
.nst-label,
.np-lp__eyebrow,
.np-contact-clients__eyebrow,
.cnd-label {
  /* Approx. 6.5:1 on #f3f3f0 — meets AA for small text */
  color: #6b4f12 !important;
}

/* Body muted text that was near the AA edge (#4a5568 on white ≈ 4.6:1 OK;
   on warm paper can dip — nudge slightly darker). */
.nh-section__intro,
.nh-hero__sub,
.naoda-hero p,
.nwa-hero p,
.naoda-muted,
.nwa-muted,
.np-lp__lead,
.np-lp__form-sub,
.np-lp__field label {
  color: #3f4b5c;
}

/* Placeholder text is non-essential — keep above ~3:1 for incidental readability */
::placeholder {
  color: #64748b !important;
  opacity: 1;
}


/* =============================================================================
   13. FOCUS OVERRIDE — defeat outline:none in page-local CSS (WCAG 2.4.7)
   ============================================================================= */

input:focus,
textarea:focus,
select:focus,
.np-lp__input:focus,
.np-lp__textarea:focus,
.np-inquiry-field input:focus,
.np-inquiry-field textarea:focus,
.cnd-inquiry-field input:focus,
.cnd-inquiry-field textarea:focus {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* Keep custom ring if already designed, but never leave focus invisible */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* =============================================================================
   14. FAQ / DISCLOSURE ANSWERS — WCAG 4.1.2
   When aria-expanded=false, hide the controlled panel completely so AT and
   visual presentation stay in sync (not only max-height:0 CSS tricks).
   ============================================================================= */

[id^='np-faq-panel-'][hidden],
[role='region'][hidden],
.nh-sector-panel[aria-hidden='true'] {
  display: none !important;
}

.nh-sector-panel[aria-hidden='false'],
.nh-sector-panel.is-active {
  display: block;
}


/* =============================================================================
   15. MODALS / DIALOGS
   ============================================================================= */

[role='dialog'][aria-hidden='true'],
[aria-modal='true'][aria-hidden='true'] {
  visibility: hidden;
  pointer-events: none;
}

/* When a dialog is open, ensure body scroll lock still allows focus rings */
body.np-menu-open,
body.np-dialog-open {
  overflow: hidden;
}


/* =============================================================================
   16. CONTENT LINKS IN FLOW TEXT — WCAG 1.4.1 (Use of Color)
   Ensure non-nav body links are not color-only when possible.
   ============================================================================= */

.entry-content a:not(.np-btn):not([class*='btn']),
.site-main article a:not(.np-btn):not([class*='btn']):not(.nh-sol):not(.nh-svc):not(.nh-project-card) {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.entry-content a:not(.np-btn):hover,
.site-main article a:not(.np-btn):hover {
  text-decoration-thickness: 0.12em;
}


/* =============================================================================
   17. REDUCED MOTION — AUTOPLAY / MARQUEES
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .np-contact-clients__track,
  [class*='marquee'],
  [class*='__track'] {
    animation: none !important;
  }

  /* Pause looping client logos by freezing transform */
  .np-contact-clients__track {
    transform: none !important;
  }
}