.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #04684c;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* F7: select placeholder/text contrast (replaces inline color: grey) */
select.custom-select,
select.language-select,
select.mobile-section-select,
select.job-select,
select.form-select,
select.form-control {
  color: #595959;
}

/* F19: keyboard-accessible nav dropdown visibility */
.main-navbar .navbar .navbar-nav .nav-item.is-open .dropdown-menu,
.main-navbar .navbar .navbar-nav .nav-item:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}

.main-navbar .navbar .navbar-nav .nav-item .nav-dropdown-toggle {
  background: transparent;
  border: 0;
  text-align: inherit;
  width: 100%;
}

.main-navbar .navbar .navbar-nav .nav-item .nav-dropdown-toggle:focus-visible {
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

.mobile-nav-area .menu-icon {
  background: transparent;
  border: 0;
  padding: 0;
}

.mobile-nav-area .menu-icon:focus-visible {
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

select.custom-select option,
select.language-select option,
select.mobile-section-select option,
select.job-select option,
select.form-select option,
select.form-control option {
  color: #1a1a1a;
}

/* F12B + F22: blog carousel keyboard controls and tab-stop reduction */
.blog-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.blog-carousel-nav-btn {
  color: #226d63;
  font-weight: bold;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #226d63;
  border-radius: 4px;
  cursor: pointer;
}

.blog-carousel-nav-btn:hover,
.blog-carousel-nav-btn:focus-visible {
  color: #ffffff;
  background-color: #226d63;
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

/* F4: Owl pagination dots — visible keyboard focus */
.owl-carousel .owl-dots .owl-dot:focus-visible {
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

/* F8: link contrast ≥ 4.5:1 on light backgrounds */
.home-product-link,
a.home-product-link {
  color: #226d63 !important;
}

.read-more,
.react-read-more-read-less,
.react-read-more-read-less-less {
  color: #226d63 !important;
}

.compliance-support-email {
  color: #226d63 !important;
  font-weight: 600;
  text-decoration: underline;
}

/* F14: minimum 24×24 CSS px target size */
.blink-new,
.blink-new-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
}

.verify-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* F12: keyboard-focusable scroll regions */
.blog-desc:focus-visible,
.job-desc-content:focus-visible,
#consent-terms:focus-visible {
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

/* F20: Visible keyboard focus indicators (WCAG 2.4.7)
   Uses :focus-visible so mouse clicks stay clean; !important beats
   legacy outline:none / box-shadow:none rules in style.css / viamanish.css */
:root {
  --a11y-focus-color: #04684c;
  --a11y-focus-contrast: #ffffff;
  --a11y-focus-width: 2px;
  --a11y-focus-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.btn:focus-visible,
.btn-animation:focus-visible,
.default-btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.language-select:focus-visible,
.form-check-input:focus-visible,
.accordion-button:focus-visible,
.verify-link:focus-visible,
.job-link:focus-visible,
.go-top:focus-visible,
.owl-nav .owl-prev:focus-visible,
.owl-nav .owl-next:focus-visible,
.tablink:focus-visible,
.visit-us-link a:focus-visible,
.read-more:focus-visible,
.home-product-link:focus-visible,
.Apply-now-btn:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
  outline-offset: var(--a11y-focus-offset) !important;
  box-shadow: 0 0 0 2px var(--a11y-focus-contrast) !important;
}

/* Dark / teal surfaces: invert the dual ring so it stays visible */
.footer-area a:focus-visible,
.main-navbar .navbar .navbar-nav .nav-item .nav-link:focus-visible,
.main-navbar .navbar .navbar-nav .nav-item .nav-dropdown-toggle:focus-visible,
.btn-success:focus-visible,
.default-btn:focus-visible,
.go-top:focus-visible,
.skip-link:focus {
  outline-color: var(--a11y-focus-contrast) !important;
  box-shadow: 0 0 0 2px var(--a11y-focus-color) !important;
}

/* Prefer keyboard ring over Bootstrap’s soft blue glow */
.form-control:focus-visible,
.form-check-input:focus-visible,
.form-select:focus-visible {
  border-color: var(--a11y-focus-color) !important;
}

/* F25: Footer links not distinguished by color alone (WCAG 1.4.1) */
.footer-area .footer-widget-list a,
.footer-area .touch-content a,
.footer-area .copyright-content a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer-area .footer-widget-list a:hover,
.footer-area .footer-widget-list a:focus-visible,
.footer-area .touch-content a:hover,
.footer-area .touch-content a:focus-visible,
.footer-area .copyright-content a:hover,
.footer-area .copyright-content a:focus-visible {
  text-decoration-thickness: 2px !important;
}

/* Icon / logo / store badge links stay without text underline */
.footer-area .follow-list a,
.footer-area .footer-app-links a,
.footer-area a:has(> img),
.footer-area a:has(> i) {
  text-decoration: none !important;
}

.footer-area .follow-list a:hover,
.footer-area .follow-list a:focus-visible {
  filter: brightness(1.15);
  outline-offset: 3px;
}

/* F26: Joining-process video transcript */
.joining-video-caption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #333333;
  text-align: center;
}

.joining-transcript {
  max-width: 100%;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid #c5d8d4;
  border-radius: 8px;
  background: #f7fbfa;
}

.joining-transcript summary {
  cursor: pointer;
  font-weight: 600;
  color: #04684c;
  list-style-position: outside;
}

.joining-transcript summary:focus-visible {
  outline: 2px solid #04684c;
  outline-offset: 2px;
}

.joining-transcript-body {
  margin-top: 1rem;
  color: #1a1a1a;
  line-height: 1.6;
}

.joining-transcript-body h3 {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  color: #205053;
}

.joining-transcript-body ol,
.joining-transcript-body ul {
  padding-left: 1.25rem;
}

.joining-transcript-body li {
  margin-bottom: 0.75rem;
}

.joining-transcript-body a {
  color: #226d63;
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .joining-transcript {
    max-width: 100%;
  }
}

/* Site boxed layout: keep page content on the same rail as header/footer */
:root {
  --site-content-max: 1320px;
  --site-content-gutter: 15px;
}

@media (max-width: 1399.98px) {
  :root {
    --site-content-max: 1140px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --site-content-max: 960px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --site-content-max: 720px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --site-content-max: 540px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --site-content-max: 100%;
  }
}

.main-navbar > .container,
.footer-area > .container,
main#main .container,
.banner-area > .container,
.features-area > .container {
  max-width: var(--site-content-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-content-gutter);
  padding-right: var(--site-content-gutter);
}

/* Legacy fluid wrappers must not stretch past the boxed rail */
.main-navbar .container-fluid,
.header-area .container-fluid,
.banner-area .container-fluid {
  max-width: var(--site-content-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-content-gutter) !important;
  padding-right: var(--site-content-gutter) !important;
}

/* Keep joining-process media aligned to the page container */
.joining-video-card,
.joining-transcript {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}