/* Global header */
.global-header {
  background-image: url(/wp-content/uploads/sites/353/2023/04/header-back.jpg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position-x: 75%;
}

/* Official header */
.official-header {
  background-color: rgba(0, 0, 0, 0.05);
}
.official-languages {
  margin-right: 0.5rem;
  font-size: 1rem;
}
.official-languages span.ca-gov-icon-globe {
  display: inline-block;
  margin-right: 3px;
  text-decoration: none;
}
/* Site header */
.site-header {
  background-color: transparent;
}
.grid-logo img {
  max-width: 200px;
  width: 100%;
  height: 100%;
  position: relative;
  top: -7px;
}
@media (min-width: 768px) {
  .grid-logo img {
    min-width: 250px;
    max-width: 300px;
  }
  /* Search (hide temporarily) */
  .site-header .search-container {
    display: none !important;
  }
}

/* main content */
#page-container {
  padding-top: 0px;
}

/* GLOBAL */
body {
  color: var(--gray-900);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: "Montserrat", sans-serif;
  color: var(--primary-700);
  font-weight: var(--font-weight-7);
  padding-bottom: 0 !important;
}

.gradient-primary-light {
  background: rgb(168, 189, 225);
  background: linear-gradient(
    0deg,
    rgba(168, 189, 225, 1) 42%,
    rgba(204, 216, 237, 1) 100%
  );
}

.gradient-primary-lightest {
  background: rgb(233, 238, 247);
  background: radial-gradient(
    circle,
    rgba(233, 238, 247, 1) 42%,
    rgba(209, 219, 238, 1) 100%
  );
}

.gradient-primary {
  background: rgb(39, 83, 165);
  background: radial-gradient(
    circle,
    rgba(39, 83, 165, 1) 42%,
    rgba(37, 55, 116, 1) 100%
  );
}

/* color classes */
/* primary color  */
.primary-50,
.primary-50-hover:hover,
.primary-50-hover:focus {
  color: var(--primary-50) !important;
}
.primary-200,
.primary-200-hover:hover,
.primary-200-hover:focus {
  color: var(--primary-200) !important;
}
.primary-400,
.primary-400-hover:hover,
.primary-400-hover:focus {
  color: var(--primary-400) !important;
}
.primary-600,
.primary-600-hover:hover,
.primary-600-hover:focus {
  color: var(--primary-600) !important;
}
.primary-800,
.primary-800-hover:hover,
.primary-800-hover:focus {
  color: var(--primary-800) !important;
}

/* primary color background */
.bg-primary-50,
.bg-primary-50-hover:hover,
.bg-primary-50-hover:focus {
  background-color: var(--primary-50) !important;
}
.bg-primary-200,
.bg-primary-200-hover:hover,
.bg-primary-200-hover:focus {
  background-color: var(--primary-200) !important;
}
.bg-primary-400,
.bg-primary-400-hover:hover,
.bg-primary-400-hover:focus {
  background-color: var(--primary-400) !important;
}
/* / primary main color is 700 */
.bg-primary-600,
.bg-primary-600-hover:hover,
.bg-primary-600-hover:focus {
  background-color: var(--primary-600) !important;
}
.bg-primary-800,
.bg-primary-800-hover:hover,
.bg-primary-800-hover:focus {
  background-color: var(--primary-800) !important;
}

/* accent1 color */
.accent1-50,
.accent1-50-hover:hover,
.accent1-50-hover:focus {
  color: var(--accent1-50) !important;
}
.accent1-200,
.accent1-200-hover:hover,
.accent1-200-hover:focus {
  color: var(--accent1-200) !important;
}
.accent1-400,
.accent1-400-hover:hover,
.accent1-400-hover:focus {
  color: var(--accent1-400) !important;
}
.accent1-600,
.accent1-600-hover:hover,
.accent1-600-hover:focus {
  color: var(--accent1-600) !important;
}
.accent1-800,
.accent1-800-hover:hover,
.accent1-800-hover:focus {
  color: var(--accent1-800) !important;
}

/* accent1 color background */
.bg-accent1-50,
.bg-accent1-50-hover:hover,
.bg-accent1-50-hover:focus {
  background-color: var(--accent1-50) !important;
}
.bg-accent1-200,
.bg-accent1-200-hover:hover,
.bg-accent1-200-hover:focus {
  background-color: var(--accent1-200) !important;
}
.bg-accent1-400,
.bg-accent1-400-hover:hover,
.bg-accent1-400-hover:focus {
  background-color: var(--accent1-400) !important;
}
.bg-accent1-600,
.bg-accent1-600-hover:hover,
.bg-accent1-600-hover:focus {
  background-color: var(--accent1-600) !important;
}
.bg-accent1-800,
.bg-accent1-800-hover:hover,
.bg-accent1-800-hover:focus {
  background-color: var(--accent1-800) !important;
}

/* accent2 color */
.accent2-50,
.accent2-50-hover:hover,
.accent2-50-hover:focus {
  color: var(--accent2-50) !important;
}
.accent2-200,
.accent2-200-hover:hover,
.accent2-200-hover:focus {
  color: var(--accent2-200) !important;
}
.accent2-400,
.accent2-400-hover:hover,
.accent2-400-hover:focus {
  color: var(--accent2-400) !important;
}
.accent2-600,
.accent2-600-hover:hover,
.accent2-600-hover:focus {
  color: var(--accent2-600) !important;
}
.accent2-800,
.accent2-800-hover:hover,
.accent2-800-hover:focus {
  color: var(--accent2-800) !important;
}

/* accent2 color background */
.bg-accent2-50,
.bg-accent2-50-hover:hover,
.bg-accent2-50-hover:focus {
  background-color: var(--accent2-50) !important;
}
.bg-accent2-200,
.bg-accent2-200-hover:hover,
.bg-accent2-200-hover:focus {
  background-color: var(--accent2-200) !important;
}
.bg-accent2-400,
.bg-accent2-400-hover:hover,
.bg-accent2-400-hover:focus {
  background-color: var(--accent2-400) !important;
}
.bg-accent2-600,
.bg-accent2-600-hover:hover,
.bg-accent2-600-hover:focus {
  background-color: var(--accent2-600) !important;
}
.bg-accent2-800,
.bg-accent2-800-hover:hover,
.bg-accent2-800-hover:focus {
  background-color: var(--accent2-800) !important;
}

/* custom utility classes */
.flex-grow-2 {
  flex-grow: 2 !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-2 {
  flex: 2 !important;
}

.flex-3 {
  flex: 3 !important;
}

.flex-4 {
  flex: 4 !important;
}

@media (min-width: 768px) {
  .flex-md-grow-2 {
    flex-grow: 2 !important;
  }

  .flex-md-1 {
    flex: 1 !important;
  }

  .flex-md-2 {
    flex: 2 !important;
  }

  .flex-md-3 {
    flex: 3 !important;
  }

  .flex-md-4 {
    flex: 4 !important;
  }
}

/* grid */
/* 4 column grid */
@supports (width: calc(min(150px, 100%))) {
  .card-grid-4-sm {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc(min(150px, 100%)), 1fr)
    );
    grid-gap: var(--s-3, 1.5rem);
  }
}

/* 5 column grid */
@supports (width: calc(min(100px, 100%))) {
  .card-grid-5-sm {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc(min(100px, 100%)), 1fr)
    );
    grid-gap: var(--s-3, 1.5rem);
  }
}

.grid-span-2 {
  grid-column: span 2;
}

.grid-span-3 {
  grid-column: span 3;
}

.grid-span-4 {
  grid-column: span 4;
}

/* Section width override */
.container {
  width: 100%;
}
.page-container-ds,
.main-content-ds,
#main-content {
  margin-top: 1rem;
}

.section-container {
  max-width: var(--w-lg, 1176px) !important;
  margin: 0 auto;
}

.wp-block-column:first-child {
  margin-right: 0 !important;
}

body
  .is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--w-lg, 1176px) !important;
}

.w-200 {
  min-width: 200px;
}

p {
  padding-bottom: 0;
}

/* BREADCRUMBS */
.breadcrumbs ol,
.breadcrumbs ul,
.breadcrumb {
  padding: 0.5em 1rem;
  padding-left: 0;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.85rem;
}
@media (min-width: 576px) {
  .breadcrumbs ol,
  .breadcrumbs ul,
  .breadcrumb {
    font-size: calc(0.85rem + 0.1vw);
  }
}
.breadcrumbs ol li,
.breadcrumbs ul li,
.breadcrumb li {
  position: relative;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
.breadcrumbs ol li:first-child,
.breadcrumbs ul li:first-child,
.breadcrumb li:first-child {
  padding-left: 0;
}
.breadcrumbs ol li:after,
.breadcrumbs ul li:after,
.breadcrumb li:after {
  content: "";
  color: #bcbbc1;
  border: none;
  margin: 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 200;
  position: absolute;
  border-left: 1px solid #3b3a48;
  height: 70%;
  top: 5px;
  right: -12px;
  transform: rotate(15deg);
}
.breadcrumbs ol li:last-child:after,
.breadcrumbs ul li:last-child:after,
.breadcrumb li:last-child:after {
  content: "";
  border-left: none;
  margin: 0 0;
}

.breadcrumb > li + li:before {
  padding: 0;
}