@font-face {
  font-family: "elza-condensed";
  src: url(fonts/Elza/Elza-CondensedBlack.otf), url(fonts/Elza/Elza-CondensedBlack.ttf);
  font-weight: normal;
}

:root {
  /* Primary */
  --color-primary-charged: #71d383;
  --color-primary-canopy: #075237;

  /* Secondary */
  --color-secondary-deep-blue: #0056c8;
  --color-secondary-mid-blue: #19aadf;
  --color-secondary-light-blue: #7ae7ed;

  /* Tertiary */
  --color-tertiary-yellow: #e5e85c;
  --color-tertiary-orange: #fc5539;
  --color-tertiary-light-purple: #faccff;
  --color-tertiary-dark-purple: #4a2b80;

  /* Neutral */
  --color-neutral-off-white: #f8f7f3;
  --color-neutral-dark-grey: #2d2d2d;

  /* Font Families */
  --font-display: "elza-condensed", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Display */

  --fs-xl: 4.5rem;
  --lh-xl: 0.83;

  --fs-h1: 3.75rem;
  --lh-h1: 0.85;

  --fs-h2: 3rem;
  --lh-h2: 1.083;

  /* Headings */
  --fs-h3: 1.75rem;
  --lh-h3: 1.21;

  --fs-h4: 1.25rem;
  --lh-h4: 1.3;

  /* Body */
  --fs-body-large: 1.5rem;
  --lh-body-large: 1.5;

  --fs-body-lg: 1.125rem;
  --lh-body-lg: 1.4444;

  --fs-body-base: 1rem;
  --lh-body-base: 1.5;

  --fs-body-sm: 0.875rem;
  --lh-body-sm: 1.4285;

  /* Caption */
  --fs-caption: 0.875rem;
  --lh-caption: 1.1428;
  --tracking-caption: 0.02em;
}
@media (max-width: 767px) {
  :root {
    --fs-xl: 3.5rem;
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 1.5rem;
    --fs-body-large: 1.25rem;
  }
}
body {
  font-family: var(--font-body);
  color: var(--color-neutral-dark-grey);
}

a {
  color: inherit;
}
a:hover {
  color: inherit;
}
.label {
  white-space: normal;
}
.field--name-body a:not(.btn),
.field--type-text-long a:not(.btn) {
  text-decoration: underline;
  color: var(--color-primary-canopy);
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}
/* Display */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02;
}
h1,
.h1,
.display-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--first-color, var(--color-primary-canopy));
}

h2,
.h2,
.display-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--first-color, var(--color-primary-canopy));
}

/* Headings */
h3,
.h3,
.heading-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h4,
.h4,
.heading-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
}

/* Body */
.body-large {
  font-family: var(--font-body);
  font-size: var(--fs-body-large);
  line-height: var(--lh-body-large);
  font-weight: 400;
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: -0.02em;
  font-weight: 400;
}

.body-base {
  font-family: var(--font-body);
  font-size: var(--fs-body-base);
  line-height: var(--lh-body-base);
  font-weight: 400;
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 400;
}

.body-small-bold {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 700;
}

/* Caption / Label */
.caption-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
}

.font-mono {
  font-family: var(--font-mono);
}

.font-display {
  font-family: var(--font-display);
}
/* Background colors */
.bg-primary-charged {
  background-color: var(--color-primary-charged);
}
.background-primary,
.bg-primary-canopy {
  background-color: var(--color-primary-canopy);
}

.bg-secondary-deep-blue {
  background-color: var(--color-secondary-deep-blue);
}
.bg-secondary-mid-blue {
  background-color: var(--color-secondary-mid-blue);
}
.bg-secondary-light-blue {
  background-color: var(--color-secondary-light-blue);
}

.bg-tertiary-yellow {
  background-color: var(--color-tertiary-yellow);
}
.bg-tertiary-orange {
  background-color: var(--color-tertiary-orange);
}
.bg-tertiary-light-purple {
  background-color: var(--color-tertiary-light-purple);
}
.bg-tertiary-dark-purple {
  background-color: var(--color-tertiary-dark-purple);
}

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

/* Text colors */
.text-primary-charged {
  color: var(--color-primary-charged);
}
.text-primary-canopy {
  color: var(--color-primary-canopy);
}

.text-secondary-deep-blue {
  color: var(--color-secondary-deep-blue);
}
.text-secondary-mid-blue {
  color: var(--color-secondary-mid-blue);
}
.text-secondary-light-blue {
  color: var(--color-secondary-light-blue);
}

.text-tertiary-yellow {
  color: var(--color-tertiary-yellow);
}
.text-tertiary-orange {
  color: var(--color-tertiary-orange);
}
.text-tertiary-light-purple {
  color: var(--color-tertiary-light-purple);
}
.text-tertiary-dark-purple {
  color: var(--color-tertiary-dark-purple);
}

.text-neutral-off-white {
  color: var(--color-neutral-off-white);
}
.text-neutral-dark-grey {
  color: var(--color-neutral-dark-grey);
}

/* Border colors */
.border-primary-charged {
  border-color: var(--color-primary-charged);
}
.border-primary-canopy {
  border-color: var(--color-primary-canopy);
}

.border-secondary-deep-blue {
  border-color: var(--color-secondary-deep-blue);
}
.border-secondary-mid-blue {
  border-color: var(--color-secondary-mid-blue);
}
.border-secondary-light-blue {
  border-color: var(--color-secondary-light-blue);
}

.border-tertiary-yellow {
  border-color: var(--color-tertiary-yellow);
}
.border-tertiary-orange {
  border-color: var(--color-tertiary-orange);
}
.border-tertiary-light-purple {
  border-color: var(--color-tertiary-light-purple);
}
.border-tertiary-dark-purple {
  border-color: var(--color-tertiary-dark-purple);
}

.border-neutral-off-white {
  border-color: var(--color-neutral-off-white);
}
.border-neutral-dark-grey {
  border-color: var(--color-neutral-dark-grey);
}

.top-bar {
  display: flex;
  align-items: center;
}
.top-bar .logo {
  flex: 1;
}
.top-bar .logo img {
  width: 40px;
}
.top-bar .mobile-logo {
  display: block;
}
@media (min-width: 800px) {
  .top-bar .logo img {
    width: 141px;
  }
  .top-bar .mobile-logo {
    display: none;
  }
}
.overflow-hidden {
  overflow: hidden;
}
.position-relative {
  position: relative;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.border {
  border: 1px solid;
}
.rounded-4 {
  border-radius: 1rem;
}
.rounded-4\.5 {
  border-radius: 1.125rem;
}
.rounded-6 {
  border-radius: 1.5rem;
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

.svg-fit svg {
  width: 100%;
  height: auto;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  content: "";
}

.btn {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 62.4375rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--second-color, var(--color-neutral-off-white));
  background-color: var(--first-color, var(--color-primary-canopy));
  border: 1.5px solid var(--first-color, var(--color-primary-canopy));
  white-space: normal;
}

.btn:hover {
  color: var(--first-color, var(--color-primary-canopy));
  background-color: transparent;
  border: 1.5px solid var(--first-color, var(--color-primary-canopy));
}
.btn:focus {
  color: var(--second-color, var(--color-neutral-off-white));
  text-decoration: underline !important;
}
.btn:focus:hover {
  color: var(--first-color, var(--color-primary-canopy));
}
.btn.btn--outline {
  background-color: transparent;
  color: var(--first-color, var(--color-primary-canopy));
}

.btn.btn--outline:hover {
  background-color: var(--first-color, var(--color-primary-canopy));
  color: var(--second-color, var(--color-neutral-off-white));
}
.no-underline {
  text-decoration: none !important;
}
.mb-xl {
  margin-bottom: 1.25rem;
}
.mb-3xl {
  margin-bottom: clamp(2.5rem, 5.56vw, 5rem);
}

.body-lg a {
  text-decoration: underline;
  color: var(--first-color, var(--color-primary-canopy));
  font-weight: bold;
}

.block-title {
  margin-top: 0;
  margin-bottom: 30px;
}
.typography-preview {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}

.typography-preview small {
  display: block;
  margin-bottom: 0.5rem;
  font-family: monospace;
  opacity: 0.6;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.color-grid div {
  padding: 2rem;
  border-radius: 8px;
  font-family: monospace;
}

.main-content {
  min-height: unset;
}

.view-display-row .view-content {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@media (max-width: 767px) {
  .md\:mt-6 {
    margin-top: 1.5rem;
  }
}

.page-node-type-article article .content section.block.block-views {
  max-width: unset;
  margin-bottom: 0;
  padding-block: clamp(2rem, 2.5vw, 3.125rem);
}

.page-node-type-article article .content section.block.block-views .view {
  max-width: 1200px;
  margin-inline: auto;
}

/*  */
.pagination > li > a,
.pagination > li > span {
  color: var(--color-primary-canopy);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--color-primary-canopy);
  border-color: var(--color-primary-canopy);
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: var(--color-primary-canopy);
}
/* Accordion */
.field--name-field-collapsible-field > .field--items > .field--item {
  margin-top: 1.5rem;
}
.field--name-field-collapsible-field .field--item .field--name-field-title {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--color-primary-canopy);
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  background-image: url("./images/expand.svg");
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  min-height: 40px;
  padding: 20px 56px 20px 20px;
  background-color: var(--color-neutral-off-white);
  border-radius: 40px;
}

.field--name-field-collapsible-field .field--name-field-title.active {
  background-image: url("./images/collapse.svg");
}

.field--name-field-collapsible-field .field--name-field-description {
  display: none;
  margin-top: 1rem;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--tracking-body-base);
  padding-inline: 20px;
}

.field--name-field-collapsible-field a {
  color: var(--color-primary-canopy);
  text-decoration: none;
}

.field--name-field-collapsible-field ul {
  list-style-image: url("/themes/canteencorp_main/images/bullet-2.svg");
}

.field--name-field-collapsible-field ul li {
  margin-bottom: 25px;
}

@media (max-width: 991px) {
  .box-featured-content .heading-h3 {
    font-size: 20px;
  }
  .box-featured-content .heading-h4 {
    font-size: 18px;
  }
}

.ui-dialog .ui-dialog-title {
  font-size: 30px;
}