/**
 ** VISUALLY HIDDEN
 *
 * Is used to visually hide content that still should be
 * available to screen readers.
 */
.wm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* -------------- END OF VISUALLY HIDDEN ------------- */

/**
 ** WRAPPER
 *
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents.
 *
 * "Container" naming is not in use anymore in order not to
 * create confusion with CSS container queries.
 */
.wm-wrapper {
  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-wrapper-inline, var(--gutter));
  position: relative;
}

.wm-wrapper[data-wrapper-type="inner"] {
  min-width: 100%;
  padding-block: var(--gutter-wrapper-inner-block, var(--gutter));
  padding-inline: var(--gutter-wrapper-inner-inline, var(--gutter));
}
/* -------------- END OF WRAPPER ------------- */

/**
** FLOW UTILITY
*
* The vertical spacing of our design should be based on our 
* standard line-height because text dominates most pages’ 
* layout, making one line of text a natural denominator.
*
* If the body text line-height is 1.5 (i.e. 1.5 ⨉ the font-size), 
* it makes sense to use 1.5 as the ratio for our modular scale.
*/
.wm-flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
/* -------------- END OF FLOW UTILITY ------------- */

/**
 ** REGION 
 *
 * Add consistent vertical padding to create regions of content 
 * Can either be configured by setting --region-space or use a 
 * default from the space scale.
 */
.wm-region {
  padding-block-start: var(--region-space, var(--space-l));
  padding-block-end: var(--region-space, var(--space-l));
}

.wm-region[data-region-flush="all"] {
  padding-block-end: 0;
  padding-block-start: 0;
}

.wm-region[data-region-flush="top"] {
  padding-block-start: 0;
}

.wm-region[data-region-flush="bottom"] {
  padding-block-end: 0;
}
/* -------------- END OF REGION ------------- */

/**
 ** TAP AREA
 *
 * Increase element's target size.
 *
 * See https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/
 * and https://ishadeed.com/article/target-size/
 */
.wm-tap-area {
  --tap-area-target-size: 44px;
  position: relative;
}

.wm-tap-area::after {
  content: "";
  position: absolute;
  inset: 0;
  min-width: var(--tap-area-target-size);
  min-height: var(--tap-area-target-size);
  margin: auto;
}
/* -------------- END OF TAP AREA ------------- */

/**
 ** FULL BLEED BACKGROUND
 *
 * See https://frontendmasters.com/blog/full-bleed-layout-with-modern-css/
 * and https://www.youtube.com/watch?v=81pnuZFarRw
 *
 * MODIFICATION:
 * 
 * Originally used as a single utility class:
 *
 * .wm-full-bleed-bg {
 *    box-shadow: 0 0 0 100vmax var(--full-bleed-bg-color);
 *    clip-path: inset(0 -100vmax);
 *    background-color: var(--full-bleed-bg-color);
 * }
 * 
 * However, the 'clip-path' property creates a new stacking context. This 
 * might conflict with any child elements that are positioned as 'fixed'.
 * Instead of positioning relative to the viewport, such children will 
 * position themselves fixed relative to the parent element.
 */
.wm-full-bleed-bg {
  position: relative;
  background-color: var(--full-bleed-bg-color);
}

.wm-full-bleed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 100vmax var(--full-bleed-bg-color);
  clip-path: inset(0 -100vmax);
  z-index: -1;
}
/* -------------- END OF FULL BLEED BACKGROUND ------------- */

/**
 ** TYPOGRAPHY UTILITIES
 *
 */
.wm-text-align\:center {
  text-align: center !important;
}

.wm-text-align\:left {
  text-align: left !important;
}

.wm-text-uppercase {
  text-transform: uppercase;
}

.lede {
  font-size: var(--lede-font-size, var(--size-step-3));
  font-style: var(--lede-font-style, italic);
}

.lede strong {
  font-style: normal;
}

.text-step--4 {
  font-size: var(--size-step--4);
}

.text-step--3 {
  font-size: var(--size-step--3);
}

.text-step--2 {
  font-size: var(--size-step--2);
}

.text-step--1 {
  font-size: var(--size-step--1);
}

.text-step-0 {
  font-size: var(--size-step-0);
}

.text-step-1 {
  font-size: var(--size-step-1);
}

.text-step-2 {
  font-size: var(--size-step-2);
}

.text-step-3 {
  font-size: var(--size-step-3);
}

.text-step-4 {
  font-size: var(--size-step-4);
}

.text-step-5 {
  font-size: var(--size-step-5);
}

.text-step-6 {
  font-size: var(--size-step-6);
}

.text-step-7 {
  font-size: var(--size-step-7);
}

.text-step-8 {
  font-size: var(--size-step-8);
}
/* -------------- END OF TYPOGRAPHY UTILITIES ------------- */

/**
 ** COLOR UTILITIES
 *
 */
.bg-dark {
  background: var(--color-dark);
}

.bg-dark-shade {
  background: var(--color-dark-shade);
}

.bg-dark-glare {
  background: var(--color-dark-glare);
}

.bg-dark-grey {
  background: var(--color-dark-grey);
}

.bg-light {
  background: var(--color-light);
}

.bg-light-shade {
  background: var(--color-light-shade);
}

.bg-mid {
  background: var(--color-mid);
}

.bg-mid-glare {
  background: var(--color-mid-glare);
}

.bg-mid-shade {
  background: var(--color-mid-shade);
}

.bg-mid-dark {
  background: var(--color-mid-dark);
}

.bg-primary {
  background: var(--color-primary);
}

.bg-primary-glare {
  background: var(--color-primary-glare);
}

.bg-primary-shade {
  background: var(--color-primary-shade);
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-secondary-glare {
  background: var(--color-secondary-glare);
}

.bg-secondary-shade {
  background: var(--color-secondary-shade);
}

.bg-tertiary {
  background: var(--color-tertiary);
}

.bg-tertiary-glare {
  background: var(--color-tertiary-glare);
}

.bg-tertiary-shade {
  background: var(--color-tertiary-shade);
}

.bg-quaternary {
  background: var(--color-quaternary);
}

.bg-quaternary-glare {
  background: var(--color-quaternary-glare);
}

.bg-quaternary-shade {
  background: var(--color-quaternary-shade);
}

.bg-quinary {
  background: var(--color-quinary);
}

.bg-quinary-glare {
  background: var(--color-quinary-glare);
}

.bg-quinary-shade {
  background: var(--color-quinary-shade);
}

.bg-senary {
  background: var(--color-senary);
}

.bg-senary-glare {
  background: var(--color-senary-glare);
}

.bg-senary-shade {
  background: var(--color-senary-shade);
}

.text-dark {
  color: var(--color-dark);
}

.text-dark-shade {
  color: var(--color-dark-shade);
}

.text-dark-glare {
  color: var(--color-dark-glare);
}

.text-light {
  color: var(--color-light);
}

.text-light-glare {
  color: var(--color-light-glare);
}

.text-light-shade {
  color: var(--color-light-shade);
}

.text-mid {
  color: var(--color-mid);
}

.text-mid-glare {
  color: var(--color-mid-glare);
}

.text-mid-shade {
  color: var(--color-mid-shade);
}

.text-mid-dark {
  color: var(--color-mid-dark);
}

.text-primary {
  color: var(--color-primary);
}

.text-primary-glare {
  color: var(--color-primary-glare);
}

.text-primary-shade {
  color: var(--color-primary-shade);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-secondary-glare {
  color: var(--color-secondary-glare);
}

.text-secondary-shade {
  color: var(--color-secondary-shade);
}

.text-tertiary {
  color: var(--color-tertiary);
}

.text-tertiary-glare {
  color: var(--color-tertiary-glare);
}

.text-tertiary-shade {
  color: var(--color-tertiary-shade);
}

.text-quaternary {
  color: var(--color-quaternary);
}

.text-quaternary-glare {
  color: var(--color-quaternary-glare);
}

.text-quaternary-shade {
  color: var(--color-quaternary-shade);
}

.text-quinary {
  color: var(--color-quinary);
}

.text-quinary-glare {
  color: var(--color-quinary-glare);
}

.text-quinary-shade {
  color: var(--color-quinary-shade);
}

.text-senary {
  color: var(--color-senary);
}

.text-senary-glare {
  color: var(--color-senary-glare);
}

.text-senary-shade {
  color: var(--color-senary-shade);
}
/* -------------- END OF COLOR UTILITIES ------------- */

/**
 ** SPACING UTILITIES
 *
 */
.flow-space-3xs {
  --flow-space: var(--space-3xs);
}

.flow-space-2xs {
  --flow-space: var(--space-2xs);
}

.flow-space-xs {
  --flow-space: var(--space-xs);
}

.flow-space-s {
  --flow-space: var(--space-s);
}

.flow-space-m {
  --flow-space: var(--space-m);
}

.flow-space-l {
  --flow-space: var(--space-l);
}

.flow-space-xl {
  --flow-space: var(--space-xl);
}

.flow-space-2xl {
  --flow-space: var(--space-2xl);
}

.flow-space-3xl {
  --flow-space: var(--space-3xl);
}

.flow-space-3xs-2xs {
  --flow-space: var(--space-3xs-2xs);
}

.flow-space-2xs-xs {
  --flow-space: var(--space-2xs-xs);
}

.flow-space-xs-s {
  --flow-space: var(--space-xs-s);
}

.flow-space-s-m {
  --flow-space: var(--space-s-m);
}

.flow-space-m-l {
  --flow-space: var(--space-m-l);
}

.flow-space-l-xl {
  --flow-space: var(--space-l-xl);
}

.flow-space-xl-2xl {
  --flow-space: var(--space-xl-2xl);
}

.flow-space-2xl-3xl {
  --flow-space: var(--space-2xl-3xl);
}
/* -------------- END OF SPACING UTILITIES ------------- */