/* WCAG 2.x accessibility fixes for online-skills static HTML pages. */

:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
}

/* WCAG 1.4.3: the original brand blue (#3399ff) does not provide enough
   contrast with white text. Use a darker accessible blue for text, buttons
   and the footer while retaining the original focus treatment. */
h1,
h2,
h3 {
  color: #005a9c !important;
}

body:not(.contrast) .section.bg-dark h1,
body:not(.contrast) .section.bg-dark h2,
body:not(.contrast) .section.bg-dark h3,
body:not(.contrast) .style-dark h1,
body:not(.contrast) .style-dark h2,
body:not(.contrast) .style-dark h3 {
  color: #fff !important;
}

body:not(.contrast) .section.bg-dark .bg-white h1,
body:not(.contrast) .section.bg-dark .bg-white h2,
body:not(.contrast) .section.bg-dark .bg-white h3 {
  color: #005a9c !important;
}

/* Keep the accessible text-link color scoped to page content. Menu links
   have their own light/dark states and must remain controlled by the menu
   styles above. */
#page-content a:not(.btn),
.content a:not(.btn) {
  color: #005a9c !important;
}

body:not(.contrast) .section.bg-dark a:not(.btn) {
  color: #fff !important;
}

body:not(.contrast) .section.bg-dark .bg-white a:not(.btn) {
  color: #005a9c !important;
}

/* Project tiles: their blue headers must use light text, including the
   strong title and decorative icon. */
body:not(.contrast) .section.bg-dark .card.bg-blue,
body:not(.contrast) .section.bg-dark .card.bg-blue p,
body:not(.contrast) .section.bg-dark .card.bg-blue strong,
body:not(.contrast) .section.bg-dark .card.bg-blue b,
body:not(.contrast) .section.bg-dark .card.bg-blue i {
  color: #fff !important;
}

body:not(.contrast) .style-dark h1,
body:not(.contrast) .style-dark h2,
body:not(.contrast) .style-dark h3,
body:not(.contrast) .dark h1,
body:not(.contrast) .dark h2,
body:not(.contrast) .dark h3 {
  color: #fff !important;
}

.bg-blue,
#footer,
#bottom,
.footer-menu,
.footer-contact {
  background-color: #005a9c !important;
}

.bg-blue,
.bg-blue:hover,
.bg-blue:focus,
.bg-blue:active {
  border-color: #005a9c !important;
  color: #fff !important;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn.bg-blue,
.btn.bg-blue:hover,
.btn.bg-blue:focus,
.btn.bg-blue:active {
  background-color: #005a9c !important;
  border-color: #005a9c !important;
  color: #fff !important;
}

/* Filter controls on the security-audit page. */
.audit-filter,
.audit-filter:hover,
.audit-filter:focus {
  color: #005a9c !important;
  border-color: #005a9c !important;
  background-color: #fff !important;
}

.audit-filter.is-active,
.audit-filter.is-active:hover,
.audit-filter.is-active:focus {
  color: #fff !important;
  border-color: #005a9c !important;
  background-color: #005a9c !important;
}

#footer,
#footer a,
#footer a:hover,
#footer a:focus,
#footer p,
#footer strong,
#footer b,
#copyright,
#copyright p {
  color: #fff !important;
}

#footer h3,
#footer .footer-menu a::before {
  color: #fff !important;
}

.os-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip links: invisible in the normal layout, visible only when focused from keyboard. */
.skip-links {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 100000 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: visible !important;
}

.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  background: #000 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  left: 1rem !important;
  top: 1rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  padding: .75rem 1rem !important;
  border: 3px solid #ffbf47 !important;
  border-radius: 2px !important;
  z-index: 100001 !important;
}

#page-content:focus,
#main-content:focus,
#footer:focus,
#menu:focus {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 6px !important;
}

/* Preserve the original visual weight after converting decorative repeated h1 elements to h2. */
h2.os-former-h1 {
  font-size: 3.2em;
  color: #3399ff;
  font-weight: 700;
}

@media only screen and (max-width: 768px) {
  h2.os-former-h1 { font-size: 2.2em; }
}
@media only screen and (max-width: 600px) {
  h2.os-former-h1 { font-size: 1.8em; }
}
@media only screen and (max-width: 480px) {
  h2.os-former-h1 { font-size: 1.5em; }
}

/* Main menu: stable keyboard and mouse disclosure. */
#navbar {
  overflow: visible !important;
}

@media only screen and (max-width: 768px) {
  /* Keep the mobile menu trigger fully inside narrow viewports. */
  #navbar > ul.menu-container.m-show {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
  }

  #navbar > ul.menu-container.m-show > li,
  #navbar > ul.menu-container.m-show > li > a {
    width: 72px;
    min-width: 72px;
  }
}

.menu-container,
.menu-container ul,
.menu-container li,
.menu-container a {
  box-sizing: border-box;
}

.menu-container > li {
  isolation: isolate;
}

.menu-container li > a[aria-haspopup="true"] {
  cursor: pointer;
}

.menu-container ul {
  min-width: 260px;
  background: #3399ff !important;
  z-index: 5000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.menu-container ul ul {
  background: #0082e9 !important;
  z-index: 5001 !important;
}

.menu-container li li {
  width: 260px;
  min-height: 44px;
  background: #3399ff !important;
}

.menu-container li li li {
  background: #0082e9 !important;
}

.menu-container li:hover > ul,
.menu-container li.keyboard-open > ul {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.menu-container li.keyboard-open,
.menu-container li.keyboard-open > ul li {
  background: #3399ff !important;
}

.menu-container li.keyboard-open > a,
.menu-container li.keyboard-open > a *,
.menu-container li:hover > a,
.menu-container li:hover > a * {
  color: #fff !important;
}

.transparent-navbar .menu-container ul,
.transparent-navbar .menu-container li:hover > ul,
.transparent-navbar .menu-container li.keyboard-open > ul,
.transparent-navbar .menu-container li.keyboard-open li,
.transparent-navbar .menu-container li:hover li {
  background: #3399ff !important;
}

.transparent-navbar .menu-container ul ul,
.transparent-navbar .menu-container li li li {
  background: #0082e9 !important;
}

.transparent-navbar .menu-container li li a,
.transparent-navbar .menu-container li.keyboard-open li a,
.transparent-navbar .menu-container li:hover li a {
  color: #fff !important;
  text-shadow: none !important;
}

#menu a:focus-visible,
a[data-action="show-mobile-menu"]:focus-visible,
a[data-action="close-mobile-menu"]:focus-visible,
#WCAG a:focus-visible,
#fixed-panel a:focus-visible,
.btn:focus-visible,
.card.expand-btn:focus-visible,
.gallery-item:focus-visible,
#gallery_modal button:focus-visible,
#gallery_modal a:focus-visible,
#gallery_modal .gallery_modal-btn:focus-visible,
#gallery_modal .gallery_modal-dot:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 4px !important;
}

/* Native button accordions with the original visual style. */
.accordion > button.accordion-trigger {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.accordion > button.accordion-trigger strong,
.accordion > button.accordion-trigger b {
  font-weight: 700;
}

.accordion > button.accordion-trigger::-moz-focus-inner {
  border: 0;
}

.accordion > button.accordion-trigger::after {
  pointer-events: none;
}

.accordion:not(.active) > *:nth-child(2)[aria-hidden="true"],
.card.expand-btn:not(.active) + .expand-desc[aria-hidden="true"] {
  visibility: hidden;
}

.accordion.active > *:nth-child(2)[aria-hidden="false"],
.card.expand-btn.active + .expand-desc[aria-hidden="false"] {
  visibility: visible;
}

#gallery_modal[role="dialog"] {
  outline: none;
}