/* Headers via https://patorjk.com/software/taag/#p=display&f=Doh */

/* Variables */

:root {
  /* 0px */
  --zero-spacer: 0rem;
  /* 5px */
  --zero-point-five-spacer: 0.3125rem;
  /* 10px */
  --one-spacer: 0.625rem;
  /* 15px */
  --one-point-five-spacer: 0.9375rem;
  /* 20px */
  --two-spacer: 1.25rem;
  /* 25px */
  --two-point-five-spacer: 1.5625rem;
  /* 30px */
  --three-spacer: 1.875rem;
  /* 35px */
  --three-spacer: 2.1875rem;
  /* 40px */
  --four-spacer: 2.5rem;
  /* 45px */
  --four-point-five-spacer: 2.8125rem;
  /* 50px */
  --five-spacer: 3.125rem;
  /* 100px */
  --ten-spacer: 6.25rem;
  /* Match to 'wideSize' in theme.json */
  --max-width: 1600px;
  /*
  Color palette — some duplication from theme.json,
  but needed in this instance to make color themes seamless.
  */
  --color-deep-plum: #191620;
  --color-white: #ffffff;
  --color-plum-tint-1: #E6E4EA;
  --color-plum-tint-2: #B2ACC0;
  --color-plum-tint-2: #B2ACC0;
  --color-plum-tint-3: #7A7389;
  --color-plum-tint-4: #3A3543;
  --color-community-purple-tint-1: #DDDEFF;
  --color-community-purple-tint-2: #6D54A6;
  --color-community-purple-tint-3: #3F257D;
  --color-beyond-blue: #CDE3F1;
  --color-holding-hands-teal: #CEECD2;
  --color-community-bg-tint: #CECFF9;
  --color-hafh-bg-tint: #B9E4D7;
  --color-beyond-blue-bg-tint: #B9D6E9;
}

/* Color mapping */
/* —> Defaults; plum on white */
body,
body.center {
  --foreground: var(--color-deep-plum);
  --background: var(--color-white);
  --foreground-tint: var(--color-plum-tint-3);
  --background-tint: var(--color-plum-tint-1);
  --wp--preset--color--white: var(--foreground);
  --wp--preset--color--plum-tint-2: var(--foreground-tint);
  --wp--preset--color--plum-tint-4: var(--background-tint);
  --arrow: url('../icons/arrow-plum.svg');
  --details-closed: url('../icons/details-closed-plum.svg');
  --details-opened: url('../icons/details-opened-plum.svg');
}
body.home,
body.who-we-are,
body.company,
body.season-schedule,
body.support,
body.news-press,
body.event,
body.person,
body.presenter-portal,
body.search,
.is-root-container {
  --foreground: var(--color-white);
  --background: var(--color-deep-plum);
  --foreground-tint: var(--color-plum-tint-2);
  --background-tint: var(--color-plum-tint-4);
  --arrow: url('../icons/arrow-white.svg');
  --details-closed: url('../icons/details-closed-white.svg');
  --details-opened: url('../icons/details-opened-white.svg');
}
body.community {
  --foreground: var(--color-community-purple-tint-3);
  --background: var(--color-community-purple-tint-1);
  --foreground-tint: var(--color-community-purple-tint-2);
  --background-tint: var(--color-community-bg-tint);
  --arrow: url('../icons/arrow-purple.svg');
  --details-closed: url('../icons/details-closed-plum.svg');
  --details-opened: url('../icons/details-opened-plum.svg');
}
body.hands-are-for-holding {
  --foreground: var(--color-community-purple-tint-3);
  --background: var(--color-holding-hands-teal);
  --foreground-tint: var(--color-community-purple-tint-2);
  --background-tint: var(--color-hafh-bg-tint);
  --arrow: url('../icons/arrow-purple.svg');
  --details-closed: url('../icons/details-closed-plum.svg');
  --details-opened: url('../icons/details-opened-plum.svg');
}
body.move-to-move-beyond {
  --foreground: var(--color-community-purple-tint-3);
  --background: var(--color-beyond-blue);
  --foreground-tint: var(--color-community-purple-tint-2);
  --background-tint: var(--color-beyond-blue-bg-tint);
  --arrow: url('../icons/arrow-purple.svg');
  --details-closed: url('../icons/details-closed-plum.svg');
  --details-opened: url('../icons/details-opened-plum.svg');
}
.has-foreground-color {
  color: var(--foreground);
  border-color: var(--foreground) !important;
}
.has-foreground-background-color {
  background-color: var(--foreground);
}
.has-foreground-tint-color {
  color: var(--foreground-tint);
  border-color: var(--foreground-tint) !important;
}
.has-foreground-tint-background-color {
  background-color: var(--foreground-tint);
}
.has-background-color {
  color: var(--background);
  border-color: var(--background) !important;
}
.has-background-background-color {
  background-color: var(--background);
}
.has-background-tint-color {
  color: var(--background-tint);
  border-color: var(--background-tint) !important;
}
.has-background-tint-background-color {
  background-color: var(--background-tint);
}

/*  */
hr {
  border-color: var(--foreground) !important;
}

/* Position/Positions/Positioning */

.top-0 {
  top: 0 !important;
}

.right-0 {
  right: 0 !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.left-0 {
  left: 0 !important;
}

.p-relative {
  position: relative !important;
}

.p-absolute {
  position: absolute !important;
}

.p-sticky {
  position: sticky !important;
}

@media screen and (min-width: 480px) {
  .top-sm-0 {
    top: 0 !important;
  }

  .right-sm-0 {
    right: 0 !important;
  }

  .bottom-sm-0 {
    bottom: 0 !important;
  }

  .left-sm-0 {
    left: 0 !important;
  }

  .p-sm-relative {
    position: relative !important;
  }

  .p-sm-absolute {
    position: absolute !important;
  }

  .p-sm-sticky {
    position: sticky !important;
  }
}

@media screen and (min-width: 782px) {
  .top-md-0 {
    top: 0 !important;
  }

  .right-md-0 {
    right: 0 !important;
  }

  .bottom-md-0 {
    bottom: 0 !important;
  }

  .left-md-0 {
    left: 0 !important;
  }

  .p-md-relative {
    position: relative !important;
  }

  .p-md-absolute {
    position: absolute !important;
  }

  .p-md-sticky {
    position: sticky !important;
  }
}

@media screen and (min-width: 1080px) {
  .top-lg-0 {
    top: 0 !important;
  }

  .right-lg-0 {
    right: 0 !important;
  }

  .bottom-lg-0 {
    bottom: 0 !important;
  }

  .left-lg-0 {
    left: 0 !important;
  }

  .p-lg-relative {
    position: relative !important;
  }

  .p-lg-absolute {
    position: absolute !important;
  }

  .p-lg-sticky {
    position: sticky !important;
  }
}

@media screen and (min-width: 1600px) {
  .top-xl-0 {
    top: 0 !important;
  }

  .right-xl-0 {
    right: 0 !important;
  }

  .bottom-xl-0 {
    bottom: 0 !important;
  }

  .left-xl-0 {
    left: 0 !important;
  }

  .p-xl-relative {
    position: relative !important;
  }

  .p-xl-absolute {
    position: absolute !important;
  }

  .p-xl-sticky {
    position: sticky !important;
  }
}

.border-left-none {
  border-left: none !important;
}

.border-top-none {
  border-top: none !important;
}

.border-right-none {
  border-right: none !important;
}

.border-1 {
  border: 1px solid !important;
}

.border-left-1 {
  border-left: 1px solid !important;
}

.border-top-1 {
  border-top: 1px solid !important;
}

.border-right-1 {
  border-right: 1px solid !important;
}

.border-bottom-1 {
  border-bottom: 1px solid !important;
}

@media screen and (min-width: 480px) {
  .border-left-sm-none {
    border-left: none !important;
  }

  .border-top-sm-none {
    border-top: none !important;
  }

  .border-right-sm-none {
    border-right: none !important;
  }

  .border-sm-1 {
    border: 1px solid !important;
  }

  .border-left-sm-1 {
    border-left: 1px solid !important;
  }

  .border-top-sm-1 {
    border-top: 1px solid !important;
  }

  .border-right-sm-1 {
    border-right: 1px solid !important;
  }

  .border-bottom-sm-1 {
    border-bottom: 1px solid !important;
  }
}

@media screen and (min-width: 782px) {
  .border-left-md-none {
    border-left: none !important;
  }

  .border-top-md-none {
    border-top: none !important;
  }

  .border-right-md-none {
    border-right: none !important;
  }

  .border-md-1 {
    border: 1px solid !important;
  }

  .border-left-md-1 {
    border-left: 1px solid !important;
  }

  .border-top-md-1 {
    border-top: 1px solid !important;
  }

  .border-right-md-1 {
    border-right: 1px solid !important;
  }

  .border-bottom-md-1 {
    border-bottom: 1px solid !important;
  }
}

@media screen and (min-width: 1080px) {
  .border-left-lg-none {
    border-left: none !important;
  }

  .border-top-lg-none {
    border-top: none !important;
  }

  .border-right-lg-none {
    border-right: none !important;
  }

  .border-lg-1 {
    border: 1px solid !important;
  }

  .border-left-lg-1 {
    border-left: 1px solid !important;
  }

  .border-top-lg-1 {
    border-top: 1px solid !important;
  }

  .border-right-lg-1 {
    border-right: 1px solid !important;
  }

  .border-bottom-lg-1 {
    border-bottom: 1px solid !important;
  }
}

@media screen and (min-width: 1600px) {
  .border-left-xl-none {
    border-left: none !important;
  }

  .border-top-xl-none {
    border-top: none !important;
  }

  .border-right-xl-none {
    border-right: none !important;
  }

  .border-xl-1 {
    border: 1px solid !important;
  }

  .border-left-xl-1 {
    border-left: 1px solid !important;
  }

  .border-top-xl-1 {
    border-top: 1px solid !important;
  }

  .border-right-xl-1 {
    border-right: 1px solid !important;
  }

  .border-bottom-xl-1 {
    border-bottom: 1px solid !important;
  }
}

/* Aspect ratios */
.aspect-ratio-1-1 {
  aspect-ratio: 1/1
}
.aspect-ratio-3-2 {
  aspect-ratio: 3/2
}
@media screen and (min-width: 480px) {
  .aspect-ratio-sm-1-1 {
    aspect-ratio: 1/1
  }
  .aspect-ratio-sm-3-2 {
    aspect-ratio: 3/2
  }
}
@media screen and (min-width: 782px) {
  .aspect-ratio-md-1-1 {
    aspect-ratio: 1/1
  }
  .aspect-ratio-md-3-2 {
    aspect-ratio: 3/2
  }
}
@media screen and (min-width: 1080px) {
  .aspect-ratio-lg-1-1 {
    aspect-ratio: 1/1
  }
  .aspect-ratio-lg-3-2 {
    aspect-ratio: 3/2
  }
}
@media screen and (min-width: 1600px) {
  .aspect-ratio-xl-1-1 {
    aspect-ratio: 1/1
  }
  .aspect-ratio-xl-3-2 {
    aspect-ratio: 3/2
  }
}

.object-fit-cover {
  object-fit: cover;
}