/*
 * Header navigation accessibility layer.
 * Author: Service Glow
 *
 * - Skip link: hidden until focused, then shown above the fixed header, sized to its
 *   text so its focus ring is never cut off at the viewport edge.
 * - Main landmark: no ring when it receives programmatic focus from the skip link.
 * - UberMenu submenu toggle buttons (added by pd-a11y-nav.js): take no space and are
 *   invisible to the mouse; on keyboard focus a chevron button with the standard
 *   two-tone ring (the pd-a11y-focus.css base ring) appears just past the end of the
 *   item label, in the item's right padding, so it never covers the label text.
 * - Screen-reader-only text used by the PHP modules (.pd-a11y-sr-only).
 */

/* Skip link */
html body a.hfe-skip-link,
html body a.skip-link{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* The theme stylesheet (child-theme.min.css) sets a.skip-link{position:fixed;top:0;right:0}.
   With left:16px that right:0 stretched the focused link to the viewport edge and clipped
   the right side of its focus ring, so the focused link also resets right and caps its width
   (16px each side leaves room for the 5px two-tone ring). (0,1,3) beats a.skip-link (0,1,1). */
html body a.hfe-skip-link:focus,
html body a.skip-link:focus{
  position:fixed;
  left:16px;
  right:auto;
  top:16px;
  width:auto;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  white-space:normal;
  height:auto;
  overflow:visible;
  clip:auto;
  clip-path:none;
  z-index:2147483000;
  padding:12px 20px;
  background:#ffffff;
  color:#000000;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  text-decoration:underline;
  border-radius:0;
}

/* Main landmark */
main.pd-main-landmark,
.pd-main-landmark{
  display:block;
}
.pd-main-landmark:focus{
  outline:0;
}

/* UberMenu submenu toggle */
html body .ubermenu .ubermenu-item .pd-um-subtoggle{
  display:block;
  position:relative;
  width:100%;
  height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
}
html body .ubermenu .ubermenu-item .pd-um-subtoggle:focus,
html body .ubermenu .ubermenu-item .pd-um-subtoggle:focus-visible{
  outline:none!important;
  box-shadow:none!important;
}
/* The box starts 6px past the label (the button is as wide as the link, and the link
   ends where the label ends). UberMenu gives each top item 22.4px right padding and the
   next item 11.2px left padding (33.6px between labels), so a 20px box plus the 5px
   outset ring (3px outline + 2px gap) stays clear of both labels: label end +1px .. +31px. */
html body .ubermenu .ubermenu-item .pd-um-subtoggle__box{
  position:absolute;
  left:calc(100% + 6px);
  right:auto;
  bottom:calc((var(--pd-um-link-h, 28px) - 24px) / 2);
  width:20px;
  height:24px;
  opacity:0;
  pointer-events:none;
  background:#ffffff;
  z-index:60;
}
html body .ubermenu .ubermenu-item .pd-um-subtoggle__box::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  margin:-6px 0 0 -4px;
  border-right:2px solid #000000;
  border-bottom:2px solid #000000;
  transform:rotate(45deg);
}
html body .ubermenu .ubermenu-item .pd-um-subtoggle[aria-expanded="true"] .pd-um-subtoggle__box::before{
  margin-top:-2px;
  transform:rotate(-135deg);
}
html body .ubermenu .ubermenu-item .pd-um-subtoggle:focus .pd-um-subtoggle__box{
  opacity:1;
  pointer-events:auto;
  /* Same ring as the pd-a11y-focus.css base layer: black outline, white gap ring. */
  outline:var(--pd-focus-width, 3px) solid var(--pd-focus-outer, #000000);
  outline-offset:var(--pd-focus-gap, 2px);
  box-shadow:0 0 0 var(--pd-focus-gap, 2px) var(--pd-focus-inner, #ffffff);
}

/* Screen-reader-only text (pagination names, blog index heading). */
html body .pd-a11y-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;
}

@media (forced-colors:active){
  html body .ubermenu .ubermenu-item .pd-um-subtoggle:focus .pd-um-subtoggle__box{
    outline-color:CanvasText;
    background:Canvas;
    box-shadow:none;
  }
  html body .ubermenu .ubermenu-item .pd-um-subtoggle__box::before{
    border-color:CanvasText;
  }
}