/* apply a natural box layout model to all elements, but allowing components to change */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text, .vh {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

body .skip-link {
  background-color: #f1f1f1;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #21759b;
  display: block;
  font: bold 14px/normal "Noto Sans", sans-serif;
  left: -9999em;
  outline: none;
  padding: 15px 23px 14px;
  text-decoration: none;
  text-transform: none;
  top: -50em;
  position: absolute;
  transition: none;
  width: 10rem;
  text-align: center;
}

html body [href].skip-link:focus {
  clip: auto;
  height: auto;
  left: 50%;
  top: 7px;
  margin-left: -5rem;
  z-index: 100000;
  position: absolute;
}

.hidden {
  display: none;
}

/* Do not show the outline on the skip link target. */

#content[tabindex="-1"]:focus {
  outline: 0;
}

*:focus {
  outline: 1px dotted var(--body-muted-color);
}

[type="checkbox"]:focus+[data-opens-menu], [role="menu"] a:focus {
  outline: 1px dotted var(--body-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}

.primary-bg *:focus {
  outline: 1px dotted var(--primary-muted-color);
}

.primary-bg [type="checkbox"]:focus+[data-opens-menu], .primary-bg  [role="menu"] a:focus {
  outline: 1px dotted var(--primary-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}

.secondary-bg *:focus {
  outline: 1px dotted var(--secondary-muted-color);
}

.secondary-bg [type="checkbox"]:focus+[data-opens-menu], .secondary-bg  [role="menu"] a:focus {
  outline: 1px dotted var(--secondary-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}

.primary-bg-tint *:focus {
  outline: 1px dotted var(--primary-tint-muted-color);
}

.primary-bg-tint [type="checkbox"]:focus+[data-opens-menu], .primary-bg-tint  [role="menu"] a:focus {
  outline: 1px dotted var(--primary-tint-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}
.secondary-bg-tint *:focus {
  outline: 1px dotted var(--secondary-tint-muted-color);
}

.secondary-bg-tint [type="checkbox"]:focus+[data-opens-menu], .secondary-bg-tint  [role="menu"] a:focus {
  outline: 1px dotted var(--secondary-tint-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}
.contrast-bg *:focus {
  outline: 1px dotted var(--contrast-muted-color);
}

.contrast-bg [type="checkbox"]:focus+[data-opens-menu], .contrast-bg  [role="menu"] a:focus {
  outline: 1px dotted var(--contrast-muted-color);
  /* ↑ for WHCM */
  box-shadow: none;
}

/*--------------------------------------------------------------
# Foundations
--------------------------------------------------------------*/

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  box-sizing: border-box;
  font-size: var(--text-medium);
  line-height: var(--line-height);
  text-rendering: optimizeLegibility;
  margin: 0;
  width: 100%;
  height: 100%;
  line-height: 1.4;
}

*, *:before, *:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

[hidden] {
  display: none;
}