/* ManyTek Global — accessibility and remediation layer (loaded after the theme). */

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100000;
  padding: 12px 20px;
  background: #0b1f45;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
  color: #fff;
}
#main-content:focus {
  outline: none;
}

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c9a227 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(11, 31, 69, 0.35) !important;
}

/* Desktop dropdowns open on keyboard focus as well as hover */
.main-menu .navigation > li:focus-within > .submenu,
.main-menu .navigation > li.is-open > .submenu {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.main-menu .navigation > li > button.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Hero: brand colour behind the static hero image while it loads */
.hero-banner-3 .parallax-video {
  background: #0b1f45;
}
/* Navy overlay keeps hero text legible over the photograph (WCAG 1.4.3) */
.hero-banner-3 .parallax-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 27, 68, 0.25) 0%, rgba(0, 27, 68, 0.6) 55%, rgba(0, 27, 68, 0.72) 100%);
  pointer-events: none;
}

/* Forms: visible labels, native select, status messages */
.mt-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.mt-label .mt-optional {
  font-weight: 400;
  opacity: 0.75;
}
.mt-select {
  width: 100%;
  appearance: auto;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(11, 31, 69, 0.25);
  padding: 12px 0;
  font: inherit;
  color: inherit;
}
.form-status {
  margin-top: 16px;
  font-weight: 600;
}
.form-status.is-success { color: #1a7f37; }
.form-status.is-error { color: #b42318; }
.form-privacy {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.85;
}

/* Maturity badges for ecosystem products */
.mt-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

/* Never leave headings blurred or invisible for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .split-text,
  .split-text *,
  .wow {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    visibility: visible !important;
  }
}

.card-team img.team-photo {
  object-fit: cover;
  object-position: center 18%;
}

/* Badges and links inside icon cards inherit the paragraph colour of each card variant */
.tf-box-icon p .mt-badge {
  color: inherit;
  border-color: currentColor;
}
.tf-box-icon p .mt-card-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Section intro text stays legible over the light photo section on the homepage.
   (Not applied to .hub-photo: its heading is white on the dark overlay by design.) */
.section-why.outcomes-photo .heading-section {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  padding: 20px 24px;
}

/* Cards stay fully opaque. The theme faded them with a CSS scroll-linked animation (animation-timeline: view()),
   but ScrollSmoother moves the page inside a fixed wrapper, so the timeline does not follow the card's visible
   position and fully visible cards were left part-transparent (e.g. 0.5-0.64 on the Ghana page). This matches the
   existing reduced-motion behaviour; ScrollSmoother and the heading animations are unchanged. */
.blend-callout,
.blend-card,
.blend-bar,
.section-why.tf-spacing-1:has(> .tf-container > .wrap-box-icon) .tf-box-icon.style-1 {
  animation: none;
}

/* Section intro readability (confirmed low-contrast occurrences only) */
/* Homepage ecosystem intro: dark text on its white panel (the theme set white text with a shadow) */
.section-why.outcomes-photo.tf-spacing-1:has(> .tf-container > .wrap-box-icon) .heading-section p.desc {
  color: #3d4a5c;
  text-shadow: none;
}
/* Ghana photo block: keep its white heading and intro on the dark overlay wherever it falls in the page's
   alternating section colours (on Services it was navy and grey text on the navy photo) */
.section-why.hub-photo.tf-spacing-1:nth-child(n of .section-why):has(> .tf-container > .wrap-box-icon) {
  --shell: #001B44;
  --head: #fff;
  --sub: #C89B2D;
  --copy: rgba(255, 255, 255, 0.86);
}
/* Homepage newsletter intro: navy text on the gold panel (was grey) */
.section-newsletter-2 .heading-section p.desc {
  color: #001B44;
}