/**
 * Accessibility fixes loaded after app.css (theme SCSS sources also updated).
 * Keep in sync with src/assets/scss changes.
 */

/* Header phone number: clip instead of display:none so the name stays available. */
.vertical-contact .contact .text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: #fefefe;
}
.vertical-contact .contact:hover:not(.email) .text {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 1rem;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  display: inline;
}

/* Team member breadcrumb: white on navy hero (13.7:1). */
.breadcrumb,
.breadcrumb:active,
.breadcrumb:focus {
  color: #fefefe;
}
.breadcrumb::before {
  background-image: url("../images/arrow--white--left.svg");
}
.breadcrumb:hover {
  color: #fefefe;
  text-decoration: underline;
}

/* Job titles: #5B606E on white is 6.28:1; white on brand blue hover. */
.team-flex .flex-item .position {
  color: #5B606E;
}
.filmstrip .swiper-slide {
  opacity: 1;
}
.filmstrip .swiper-slide img {
  opacity: 0.4;
}
.filmstrip .swiper-slide.swiper-slide-active img {
  opacity: 1;
}
@media print, screen and (min-width: 64em) {
  .filmstrip .swiper-slide.swiper-slide-active img {
    opacity: 0.4;
  }
}
.filmstrip .swiper-slide:hover img {
  opacity: 1;
}
.filmstrip .swiper-slide .text-block,
.filmstrip .swiper-slide .text-block .name,
.filmstrip .swiper-slide .text-block .position {
  opacity: 1;
}
.filmstrip .swiper-slide .text-block .name {
  color: #3367e3;
}
.filmstrip .swiper-slide .text-block .position {
  color: #0a0a0a;
  font-size: 0.875rem;
}
@media print, screen and (min-width: 48em) {
  .team-flex .flex-item:hover .box-appear .position {
    color: #fefefe;
  }
}

/* Meet label: clipped until hover (then white on brand blue). */
.team-flex .flex-item .box-appear .meet {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: #fefefe;
}
.team-flex .flex-item:hover .box-appear .meet {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: #fefefe;
  padding: 5px;
}

/* Homepage text-with-image headings were h3; keep the same visual as h2.
   Beat .main-grid .page h2 (akagi-pro) so these stay Tisa. */
.main-grid .page .text-with-image h2,
.main-grid .main-content .post .text-with-image h2,
.text-with-image h2 {
  font-family: "ff-tisa-web-pro", serif;
  font-size: 1.4rem;
  margin-bottom: 1em;
}
@media print, screen and (min-width: 48em) {
  .main-grid .page .text-with-image h2,
  .main-grid .main-content .post .text-with-image h2,
  .text-with-image h2 {
    font-size: 1.8rem;
  }
}
.text-with-image .text-bottom h2,
.text-with-image .text-feature h2 {
  color: #3367e3;
}

/* Hero ACF blocks: h2 matches previous h3 size. */
.main-grid .page .hero__block h2,
.hero__block h2 {
  font-size: 1.25rem;
}
@media print, screen and (min-width: 64em) {
  .main-grid .page .hero__block h2,
  .hero__block h2 {
    font-size: 1.6rem;
  }
}

/* Team profile labels remapped from h4 to h2; keep the small label look. */
.main-grid .main-content .team-member .entry-content h2,
.team-member .entry-content h2,
.team-member .staff-label {
  color: #3367e3;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "akagi-pro", sans-serif;
  margin-top: 1.4em;
  margin-bottom: 0.3em;
  position: relative;
  z-index: 1;
}

/* Underline only body-copy links (1.4.1). Headings, cards, and other large text stay clean. */
.entry-content p a,
.entry-content li a,
.wp-block-paragraph a,
.wp-block-list a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.hero__block a {
  text-decoration: underline;
}

/* Top bar + page titles: pure white, full opacity, slightly larger type. */
.top-panel:not(.invert),
.top-panel:not(.invert) a,
.top-panel:not(.invert) .menu a,
.top-panel:not(.invert) .menu.mobile-menu a {
  color: #ffffff;
  opacity: 1;
}
.top-panel .menu a {
  font-size: 1rem;
  opacity: 1;
}
.top-panel:not(.invert) .menu.mobile-menu a {
  font-size: 1.125rem;
  color: #ffffff;
  opacity: 1;
}
.top-panel.invert .menu.mobile-menu a {
  font-size: 1.125rem;
  color: #162a5c;
  opacity: 1;
}
.hero:not(.invert),
.hero:not(.invert) h1,
.hero:not(.invert) .page-title {
  color: #ffffff;
  opacity: 1;
}
.hero h1,
.hero .page-title {
  opacity: 1;
  font-size: 1.6rem;
}
@media print, screen and (min-width: 48em) {
  .hero h1,
  .hero .page-title {
    font-size: 2.75rem;
  }
}
.home .hero h1,
.home .hero .page-title {
  font-size: 2.5rem;
}

/* Footer contact icons and wordmark: white on navy. */
.footer .alt .action img,
.footer .alt .logo img {
  filter: brightness(0) invert(1);
}

/* CF7 labels stay in the a11y tree but off-canvas. */
.a11y-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer heading remapped from h3 to h2; keep the small brand title. */
.footer h2#get-in-touch {
  color: #3367e3;
  font-family: "ff-tisa-web-pro", serif;
  font-size: 2rem;
}

/* Our Value "Meet the Staff" sits above the grey banner edge. */
.text-with-image .text-bottom .wp-block-button__link {
  margin-bottom: 1.5rem;
}
@media print, screen and (min-width: 48em) {
  .text-with-image .box--grey-banner {
    height: 360px;
  }
}
@media print, screen and (min-width: 64em) {
  .text-with-image .box--grey-banner {
    height: 520px;
  }
}

/* Kill decorative ::before/::after backgrounds (compiled app.css). Real .decor-bg divs replace them. */
.main-container::after,
.page-template-solutions .main-container::after,
.team-flex::before,
.team-flex::after,
.team-member .staff-contact::before,
.cards-header::before,
.cards-header::after,
.image-carousel .orbit-container .orbit-slide .top::before,
.image-carousel .orbit-container .orbit-slide .top:before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Zero-width center-line gradient confused axe; it painted nothing. */
@media print, screen and (min-width: 48em) {
  .main-container,
  .footer-container {
    background-image: none !important;
    background-color: #fefefe;
  }
  .footer .alt .footer-container {
    background: none !important;
  }
}

.decor-bg {
  pointer-events: none;
}

.decor-bg--main {
  display: none;
}
@media print, screen and (min-width: 64em) {
  .decor-bg--main {
    display: block;
    position: absolute;
    background: #fefefe;
    z-index: 0;
    height: 220px;
    width: 100%;
    top: 0;
    right: -100%;
  }
  .page-template-solutions .decor-bg--main {
    z-index: -2;
    width: 220px;
    right: -221px;
  }
}

.team-flex .decor-bg--team-start,
.team-flex .decor-bg--team-end {
  position: absolute;
  top: -130px;
  bottom: 0;
  height: auto;
  width: -webkit-fill-available;
  background-color: #F4F5F7;
  z-index: -1;
}
.team-flex .decor-bg--team-start {
  left: -30px;
}
.team-flex .decor-bg--team-end {
  right: -30px;
}
@media print, screen and (min-width: 48em) {
  .team-flex .decor-bg--team-start {
    left: -100px;
  }
  .team-flex .decor-bg--team-end {
    right: -400px;
  }
}
@media print, screen and (min-width: 64em) {
  .team-flex .decor-bg--team-start {
    left: -400px;
  }
}

.team-member .staff-contact .decor-bg--staff {
  display: block;
  z-index: 1;
  background-color: #F4F5F7;
  position: absolute;
  width: 140vw;
  height: 100%;
  left: -3rem;
}
@media print, screen and (min-width: 64em) {
  .team-member .staff-contact .decor-bg--staff {
    right: -9rem;
    left: auto;
    width: calc(100% + 12rem);
    height: calc(100% - 9rem);
    top: 9rem;
  }
}

.cards-header .decor-bg--cards-start,
.cards-header .decor-bg--cards-end {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #F4F5F7;
  z-index: -1;
}
.cards-header .decor-bg--cards-start {
  bottom: 0;
}
.cards-header .decor-bg--cards-end {
  left: 100%;
}
@media print, screen and (min-width: 64em) {
  .cards-header .decor-bg--cards-start,
  .cards-header .decor-bg--cards-end {
    height: 110%;
    top: -20px;
  }
}

/* Contact textarea: keep it above overlapping labels/decor so axe can sample it. */
.wpcf7-form .wpcf7-textarea,
.wpcf7-form textarea {
  position: relative;
  z-index: 1;
  background-color: #F4F5F7;
  background-image: none;
}

/* Solutions filter heading: black on the grey cards header. */
.cards-section .solutions-title {
  color: #0a0a0a;
}
.cards-section .filter .label {
  font-weight: 700;
}

.image-carousel .orbit-slide .top .decor-bg--orbit {
  height: 430px;
  width: 450px;
  background: #F4F5F7;
  position: absolute;
  z-index: -1;
  left: 55px;
  top: 25px;
  pointer-events: none;
}
@media print, screen and (min-width: 48em) {
  .image-carousel .orbit-slide .top .decor-bg--orbit {
    height: 530px;
    left: 0;
    top: 65px;
  }
}
@media print, screen and (min-width: 64em) {
  .image-carousel .orbit-slide .top .decor-bg--orbit {
    left: -110px;
    width: 700px;
    top: 65px;
    height: 525px;
  }
}

/* Feature panel: name/title under the photo need clearer weight and contrast. */
.image-carousel .orbit-container .orbit-slide .top .name {
  font-weight: 700;
}
.image-carousel .orbit-container .orbit-slide .top .title {
  color: #0a0a0a;
  font-size: 0.8rem;
}

/* Gradient backgrounds: solid Athens Grey for reliable 1.4.3 contrast. */
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
  background-image: none !important;
  background-color: #F4F5F7 !important;
}

/* BugHerd 1: breathing room between the logo and the first menu item. */
.top-panel .logo {
  margin-right: 1.25rem;
}
@media print, screen and (min-width: 48em) {
  .top-bar .top-bar-right {
    left: -3vw;
    padding-left: 1rem;
  }
}

/* BugHerd 2–4: one set of side icons, icon-sized so they do not cover copy. */
body.sticky-header-active .top-panel:not(#sticky-menu) .vertical-contact {
  display: none !important;
}
/* Keep the mail chip parked on the right when the phone row expands. */
@media print, screen and (min-width: 1280px) {
  .vertical-contact {
    align-items: flex-end;
  }
}

/* Side icons: no chip at the top of the page. White chips only on the
   scrolled sticky header, where they sit over mixed page content. */
.vertical-contact .contact {
  background-color: transparent;
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-contact .contact .icon {
  float: none;
  margin: 0;
  background-position: center;
}
.top-panel:not(.invert):not(#sticky-menu) .vertical-contact .contact .icon.phone {
  background-image: url("../images/icon-phone--white.svg");
}
.top-panel:not(.invert):not(#sticky-menu) .vertical-contact .contact .icon.email {
  background-image: url("../images/icon-mail--white.svg");
}
.top-panel.invert:not(#sticky-menu) .vertical-contact .contact .icon.phone,
#sticky-menu .vertical-contact .contact .icon.phone {
  background-image: url("../images/icon-phone--blue.svg");
}
.top-panel.invert:not(#sticky-menu) .vertical-contact .contact .icon.email,
#sticky-menu .vertical-contact .contact .icon.email {
  background-image: url("../images/icon-mail--blue.svg");
}
#sticky-menu .vertical-contact .contact {
  background-color: #ffffff;
}
.vertical-contact .contact:hover:not(.email) {
  background-color: #3367e3;
  width: auto;
  min-width: 290px;
  justify-content: flex-end;
  padding: 0.4em 0.3em 0.3em 0.3em;
}
.vertical-contact .contact:hover:not(.email) .icon {
  margin-right: 9px;
}
.vertical-contact .contact:hover:not(.email) .icon.phone {
  background-image: url("../images/icon-phone--white.svg");
}

/* BugHerd 5: keep the awards "Click here" links on their own line. */
.page-id-6713 .entry-content .wp-block-paragraph a {
  display: block;
  width: fit-content;
  margin-top: 0.35em;
}

/* BugHerd 6: longer team names stay on one line so titles align. */
.team-flex .flex-item .box-appear .name {
  white-space: nowrap;
}
@media print, screen and (min-width: 48em) {
  .team-flex .flex-item .box-appear .name {
    font-size: 1.15rem;
  }
}

/* BugHerd 7: Resources subheads were h2/h3/h4 with three different looks. */
.page-id-29780 .entry-content h2.wp-block-heading,
.page-id-29780 .entry-content h3.wp-block-heading,
.page-id-29780 .entry-content h4.wp-block-heading {
  color: #3367e3;
  font-family: "akagi-pro", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}
.page-id-29780 .entry-content h2.wp-block-heading a,
.page-id-29780 .entry-content h3.wp-block-heading a,
.page-id-29780 .entry-content h4.wp-block-heading a {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* BugHerd 8: contact page map and email links need a visible underline. */
.page-id-6766 .entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* BugHerd 10: ISO heading is a global 2rem h3 (40px) — too large. */
.page-id-6 #h-tvar-is-iso-9001-2015-certified {
  font-family: "akagi-pro", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
@media print, screen and (min-width: 48em) {
  .page-id-6 #h-tvar-is-iso-9001-2015-certified {
    font-size: 1.4rem;
  }
}

/* BugHerd 11: Mission Statement matches the Our Team (text-with-image) heading. */
.main-grid .page .mission_statement h2 {
  color: #3367e3;
  font-family: "ff-tisa-web-pro", serif;
  font-size: 1.4rem;
  line-height: 1.3;
  margin-bottom: 0.6em;
  text-align: center;
}
@media print, screen and (min-width: 48em) {
  .main-grid .page .mission_statement h2 {
    font-size: 1.8rem;
  }
}

/* BugHerd 12–13: mobile section titles were 1rem / 20px. */
@media screen and (max-width: 47.9375em) {
  .page-id-6 .entry-content > h2.wp-block-heading,
  .page-id-8 .entry-content > h2.wp-block-heading {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  /* BugHerd 13: the 570px grey slab lives in the photo wrapper and
     can spill past the section. Clip it and tighten the follow-on space. */
  .page-id-6 .text-with-image:has(.box--grey-banner) {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }
  .page-id-6 .text-with-image .text-bottom .text {
    width: 100%;
  }
  .page-id-6 .text-with-image .text-bottom .wp-block-button__link {
    margin-bottom: 0.75rem;
  }
  .page-id-6 .text-with-image + .wp-block-spacer {
    height: 0.75rem !important;
  }
}

/* Tablet / mobile: keep search beside the hamburger and don't let the
   desktop sticky header cover the open menu with a white sheet. */
@media screen and (max-width: 1279px) {
  #sticky-menu {
    display: none !important;
    visibility: hidden !important;
  }

  .top-panel .hamburger,
  .mobile-background .hamburger {
    top: 48px;
    right: 36px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1302;
  }

  .top-panel .hamburger .menu-icon,
  .mobile-background .hamburger .menu-icon {
    width: 52px !important;
    height: 52px !important;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top-panel .hamburger .menu-icon svg {
    display: block;
    width: 52px;
    height: 52px;
  }

  /* Close X is drawn on .hamburger; center it in the 52px circle. */
  .top-panel.mobile-background .hamburger.tag-remove:before,
  .top-panel.mobile-background .hamburger.tag-remove:after {
    top: 50%;
    left: 50%;
    height: 16px;
    margin: 0;
    border-left-width: 2px;
  }

  .top-panel.mobile-background .hamburger.tag-remove:after {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .top-panel.mobile-background .hamburger.tag-remove:before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .top-panel:not(#sticky-menu) .search-bar,
  .mobile-background .search-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 48px;
    right: 100px;
    width: 52px;
    height: 52px;
    margin: 0;
    overflow: visible;
    z-index: 1303;
  }

  .top-panel .search-bar .search-form {
    position: relative;
    width: 52px;
    height: 52px;
    overflow: visible;
  }

  .top-panel .search-bar input[type="text"],
  .top-panel .search-bar .search-form input[type="text"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    margin: 0;
    float: none;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
  }

  .top-panel .search-bar .search-form input[type="text"]:focus,
  .top-panel .search-bar .search-form input[type="text"]:active {
    width: 8em;
    padding-left: 1em;
    border-radius: 10em;
    cursor: auto;
  }

  /* Same glass recipe as desktop, scaled 52/40 so it stays centered
     in the larger circle next to the hamburger. */
  .top-panel .search-bar p {
    top: 0.8em;
    right: 0.9em;
    left: auto;
    bottom: auto;
    margin: 0;
    font-size: 1.625em;
    width: 0.4em;
    height: 0.4em;
    border-width: 0.1em;
    border-radius: 0.35em;
    transform: none;
    pointer-events: none;
    z-index: 2;
  }

  .top-panel .search-bar p:before {
    width: 0.35em;
    height: 0.08em;
    right: -0.25em;
    bottom: -0.1em;
  }

  #mobile-menu.show,
  .mobile-background .mobile-menu,
  .mobile-background #mobile-menu {
    display: block !important;
    visibility: visible !important;
  }

  .top-panel.mobile-background:not(#sticky-menu) {
    background-color: #ffffff !important;
    min-height: 100vh;
    height: auto;
    z-index: 3000;
    overflow: auto;
  }

  /* Open menu chrome is the same on homepage and interior pages. */
  .top-panel.mobile-background .tvar-logo-main {
    fill: #162a5c;
  }

  .top-panel.mobile-background .menu-icon .st1 {
    fill: #3367e3;
  }

  .top-panel.mobile-background .search-bar input[type="text"],
  .top-panel.mobile-background .search-bar .search-form input[type="text"] {
    border-color: #3367e3;
  }

  .top-panel.mobile-background .search-bar p {
    border-color: #3367e3;
  }

  .top-panel.mobile-background .search-bar p:before {
    background: #3367e3;
  }

  .top-panel.mobile-background .site-navigation.top-bar,
  .top-panel.mobile-background .top-bar-right {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    left: 0;
    padding: 0;
    flex: none;
  }

  .top-panel.mobile-background .mobile-menu {
    width: 100%;
    max-width: none;
    margin: 1rem 0 0 0 !important;
    left: 0;
    text-align: left;
  }

  .top-panel.mobile-background .mobile-menu a,
  .top-panel.mobile-background .mobile-menu .is-accordion-submenu a,
  .top-panel.mobile-background #mobile-contact .contact {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    padding: 0.85rem 1.1rem 0.85rem 10px;
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: left;
    background-color: transparent !important;
    background-image: none !important;
  }

  .top-panel.mobile-background .mobile-menu a,
  .top-panel.mobile-background #mobile-contact .contact,
  .top-panel.mobile-background #mobile-contact .text {
    color: #162a5c !important;
  }

  /* Navy + white hover/focus works on both the blue and white overlays. */
  .top-panel.mobile-background .mobile-menu a:hover,
  .top-panel.mobile-background .mobile-menu a:focus,
  .top-panel.mobile-background .mobile-menu a:focus-visible,
  .top-panel.mobile-background #mobile-contact .contact:hover,
  .top-panel.mobile-background #mobile-contact .contact:focus,
  .top-panel.mobile-background #mobile-contact .contact:focus-visible {
    background-color: #162a5c !important;
    color: #ffffff !important;
  }

  .top-panel.mobile-background #mobile-contact .contact:hover .text,
  .top-panel.mobile-background #mobile-contact .contact:focus .text,
  .top-panel.mobile-background #mobile-contact .contact:focus-visible .text {
    color: #ffffff !important;
  }

  .top-panel.mobile-background .mobile-menu a:focus-visible,
  .top-panel.mobile-background #mobile-contact .contact:focus-visible {
    outline: 3px solid #3367e3;
    outline-offset: -3px;
  }

  .top-panel.mobile-background .mobile-menu .is-active > a,
  .top-panel.mobile-background .mobile-menu [aria-current="page"] {
    box-shadow: inset 4px 0 0 #3367e3;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .top-panel.mobile-background #mobile-contact {
    margin-top: 0.5rem;
  }

  .top-panel.mobile-background #mobile-contact .contact .icon {
    float: none;
    display: block;
    flex: 0 0 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 0.75rem 0 0;
    background-position: center;
    background-size: contain;
  }

  .top-panel.mobile-background #mobile-contact .contact .text {
    font-size: 1.125rem;
    margin: 0;
  }

  .top-panel.mobile-background #mobile-contact .icon.phone {
    background-image: url("../images/icon-phone--blue.svg");
  }

  .top-panel.mobile-background #mobile-contact .icon.email {
    background-image: url("../images/icon-mail--blue.svg");
  }

  .top-panel.mobile-background #mobile-contact .contact:hover .icon.phone,
  .top-panel.mobile-background #mobile-contact .contact:focus .icon.phone {
    background-image: url("../images/icon-phone--white.svg");
  }

  .top-panel.mobile-background #mobile-contact .contact:hover .icon.email,
  .top-panel.mobile-background #mobile-contact .contact:focus .icon.email {
    background-image: url("../images/icon-mail--white.svg");
  }

  .wp-block-button,
  .wp-block-button__link {
    width: 168px !important;
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .wp-block-buttons {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .feature-panel {
    width: 100% !important;
    margin-left: 0 !important;
  }
}