/* =================================================================== */
/* PAGE:      GLOBAL SETTINGS                                          */
/* FILE:      global.css                                               */
/* =================================================================== */

/* =================================================================== */
/*              TABLE OF CONTENTS                                      */
/*  1.0 BODY
/*  2.O MAIN
/*  3.O DISPLAY SETTINGS
/*  4.0 .deco-shapes
/*  5.0 .color-bar
/*
/*
/* =================================================================== */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  color: var(--font-color-body);
  background-color: var(--Neutral-Indigo-100);
  overflow-x: hidden;
}
main {
  display: flex;
  flex-direction: column;
}
/* Standard Semantic Headings (Section Titles, Card Titles) */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(
    --font-color-body
  );
}

/* Hero/Brand Display Typography */
.d-1,
.d-2,
.d-3,
.d-4,
.d-5,
.d-6 {
  color: var(
    --font-color-heading
  ); /* Lighter Neutral-Indigo-100 for Hero overlays */
}
/* =================================================================== */
/* COMPONENT: Decorative Shapes (Base)                                 */
/* =================================================================== */
.deco-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: var(--Neutral-Indigo-100);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  display: none;
}
/* ************************************************ */
/* ************** EVENT BARS SECTION ************** */
/* ************************************************ */
.eventBar,
.color-bar {
  display: flex;
  max-width: 100%;
  min-width: 0;
  height: 0.5rem;
  padding: 0;
  margin: 0 auto;
}
.blue,
.color-bar__segment--blue {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Navy-Blue);
  padding: 0;
  margin: 0;
}
.green,
.color-bar__segment--green {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Forest-Green);
  padding: 0;
  margin: 0;
}
.purple,
.color-bar__segment--purple {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Plum);
  padding: 0;
  margin: 0;
}
.yellow,
.color-bar__segment--yellow {
  display: inline-block;
  width: 25%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--Primary-Cantelope);
}

/* **************************************************************************** */
/* **************************** BLACK-BLUR SECTION **************************** */
/* **************************************************************************** */
/* ***** THIS IS THE BLUR THAT MAKES THE NAVIGATION LEGIBLE ON ALL PAGES ****** */
/* **************************************************************************** */
.home-black-blur {
  position: relative;
  top: -125px;
  left: 0;
  width: 100%;
  height: 200px;
  mask-image: linear-gradient(
    to bottom,
    rgba(36, 36, 36, 0.65) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
  background-color: var(--Neutral-Indigo-900);
}
@media screen and (min-width: 1200px) {
  .home-black-blur {
    top: -80px;
  }
}