/* Accessibility additions for hachem.com.au (Stage 2).
   Loaded after the main stylesheet. Nothing here changes the default look for
   mouse users: focus styles use :focus-visible, the skip link is off screen until
   focused, and the motion rules apply only with prefers-reduced-motion or after
   the keyboard-only pause control is used. */

/* Skip link and pause control: invisible until focused */
.skip-link{position:fixed;top:-100px;left:10px;z-index:10001;margin:0;padding:10px 16px;border:0;border-radius:0;
  background:#000;color:#fff;font:400 14px/1.2 HelveticaNeue,sans-serif;text-decoration:none;cursor:pointer}
.skip-link:focus{top:10px;color:#fff}
.skip-link:hover{color:#fff}
.skip-link.pause-motion{left:210px}

/* Keyboard focus ring: two-tone so it shows on cream, white and photos.
   !important is needed to beat a:focus{outline:0}, the Swiper arrow rules and
   the inline styles written by plugins. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,
.swiper-button-next:focus-visible,.swiper-button-prev:focus-visible,
html:not(.a11y-pointer) select:focus-visible,html:not(.a11y-pointer) input:focus-visible,
html:not(.a11y-pointer) textarea:focus-visible{
  outline:2px solid #1a1a1a!important;outline-offset:2px;box-shadow:0 0 0 5px #fff!important}
/* (a11y.js adds html.a11y-pointer while the mouse or touch is in use, so clicking
   into a text field looks as it always did. Without the script the ring always shows.) */
main[tabindex="-1"]:focus-visible,.opportunity[tabindex="-1"]:focus-visible{
  outline:0!important;box-shadow:none!important}

/* The fixed header must not cover a focused item */
html{scroll-padding-top:110px}
@media (max-width:768px){html{scroll-padding-top:70px}}

/* Closed mobile menu is not reachable by Tab. The nav's existing transition is
   repeated with one addition: visibility flips at once when opening and only
   after the slide-out (.3s) when closing, so the slide animation is unchanged. */
@media (max-width:768px){
  header nav{transition:all .3s ease,transform .5s ease,opacity .5s ease,visibility 0s linear 0s}
  header:not(.open) nav{visibility:hidden;
    transition:all .3s ease,transform .5s ease,opacity .5s ease,visibility 0s linear .3s}
}

/* Project titles show on keyboard focus, as they do on mouse hover */
.grid .grid-item a:focus-visible .project-details-container{left:0!important;top:0!important}

/* Resume field: reachable by keyboard, same look. The label still opens the file
   dialog on click; the ring is drawn on the label when the input has focus. */
.careers-forms .form-container form .file-upload input[type=file]{
  display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;
  overflow:hidden;clip:rect(0,0,0,0)}
.careers-forms .form-container form .file-upload .file-label:focus-within{
  outline:2px solid #1a1a1a;outline-offset:2px;box-shadow:0 0 0 5px #fff}

/* Long staff names may wrap on small screens (reflow) */
@media (max-width:500px){.staff-container .staff{white-space:normal!important}}

/* Project name as the page H1: identical to the old h2.brand rules in
   a5ab9f8b, 0204b1af and 4aa42046 .main.css (the h2 base rule plus the brand
   rules, merged), so the look does not change. */
main .main-project .project-container .project-heading-container h1.brand{
  max-width:300px;font-family:Calson,sans-serif;font-size:5.3em;font-weight:400;color:#9c9c9c;
  text-align:center;margin:0 auto 75px;line-height:.7em}
main .main-project .project-container .project-heading-container h1.brand.smaller{font-size:4.5em}
main .main-project .project-container .project-heading-container h1.brand.smallest{font-size:4em}
main .main-project .project-container .project-heading-container h1.brand span{
  font-family:HelveticaNeue,sans-serif;font-size:.25em;letter-spacing:1px}

/* Reduced motion: no change for users without the OS setting */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;
    transition-delay:0s!important;scroll-behavior:auto!important}
  [data-scroll-speed]{transform:none!important}
}

/* Keyboard-only "Pause moving content" control: stops CSS loops too */
html.a11y-paused *,html.a11y-paused *::before,html.a11y-paused *::after{animation-play-state:paused!important}