/**
 * Guidelines:
 * 1) Customize Bootstrap first (assets/scss/bootstrap-custom-variables.scss).
 * 2) Do further customization and overrides here (assets/css/site.css).
 */

/* @import url("https://use.typekit.net/taf6zfb.css"); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* ==========================================================================
   Design tokens / CSS variables
   ========================================================================== */

:root {
  /* Typography */
  --bs-body-font-family: "Poppins", sans-serif; /* Handy override; can also be set in Bootstrap. */
  --cm-heading-font-family: "Poppins", sans-serif;
  --cm-display-font-family: var(--cm-heading-font-family);
  --cm-heading-font-weight: 700;
  --cm-display-font-weight: var(--cm-heading-font-weight);
  --cm-heading-color: var(--bs-secondary);
  --cm-display-color: var(--bs-body-color);
  --cm-lead-font-weight: 400;

  /* Theme swapping on backgrounds */
  --cm-content-color-rgb: var(--bs-body-color-rgb);
  --cm-invert-color-rgb: var(--bs-white-rgb);

  /* Layout */
  --cm-header-height: 90px; /* Placeholder; set via JS based on #header height */
  --cm-narrow: none;

  /* Height presets */
  --cm-height-1: 25vh;
  --cm-height-2: 50vh;
  --cm-height-3: 75vh;

  /* Spacing tokens */
  --cm-spacer-1: 0.25rem;
  --cm-spacer-2: 0.5rem;
  --cm-spacer-3: 1rem;
  --cm-spacer-4: 1.5rem;
  --cm-spacer-5: 3rem;
  --cm-spacer-6: 3.5rem;
  --cm-spacer-7: 4rem;

  /* Media */
  --cm-play-button-color: var(--bs-success);

  /* Motion
     NOTE: elsewhere you used --cm-default-transistion (typo).
     Consider aligning on one spelling project-wide. */
  --cm-default-transition: all 500ms ease 0s;

  /* Highcharts palette */
  --highcharts-color-0: var(--bs-primary);
  --highcharts-color-1: var(--bs-secondary);
  --highcharts-color-2: var(--bs-success);
  --highcharts-color-3: var(--bs-danger);
  --highcharts-color-4: var(--bs-warning);
  --highcharts-color-5: var(--bs-info);
  --highcharts-color-6: var(--bs-orange);
  --highcharts-color-7: var(--bs-pink);
  --highcharts-color-8: var(--bs-teal);
  --highcharts-color-9: var(--bs-cyan);

  /* Swiper */
  --swiper-theme-color: var(--bs-warning);
  --swiper-pagination-bullet-inactive-color: var(--bs-primary);

}

/* ==========================================================================
   Base / Global overrides
   ========================================================================== */

main {
  background-color: var(--bs-light);
  position: relative;
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../gfx/sement-tile.webp');
  opacity: 0.3;
}

h1, .h1 {
  font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
    color: var(--bs-secondary);
}

h3 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}


/* Default rounding for media/cards etc. */
#tinymce img,
#tinymce video,
#tinymce picture,
#tinymce iframe,
.cb-header-section > .container > [class*="bg-"],
.cb-layout-section > .container > [class*="bg-"],
.cb-field-image-picture,
.cb-field-video-figure,
.cb-field-gallery picture,
.cb-field-feature-card,
.gallery-slides-item-figure picture,
.list-item-wrapper,
.container .layout-container,
.rte-wrapper img,
.rte-wrapper iframe,
.resource-slides-item-picture {
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
}
@media (max-width: 1500px) {
    h1, .h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

/* Set default “content” colors on dark / colored backgrounds */
.text-bg-primary,
.text-bg-secondary,
.text-bg-success,
.text-bg-dark {
  --cm-heading-color: #fff;
  --cm-display-color: #fff;
  --cm-content-color-rgb: 255, 255, 255;
  --cm-invert-color-rgb: var(--bs-dark-rgb);
}

.text-bg-primary {
  --bs-link-color-rgb: 255,255,255;
  --bs-link-hover-color-rgb: 255, 255, 255;
}


/* Buttons */
.btn {
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn-primary {
  --bs-btn-color: #FFF;
  --bs-btn-hover-color: #FFF;
}

/* This site: inherit-button should be green while preserving text color logic */
.btn-inherit {
  --cm-content-color-rgb: var(--bs-primary-rgb);
  --cm-invert-color-rgb: var(--bs-white-rgb);
}

/* ==========================================================================
   Header
   ========================================================================== */

#header.position-absolute {
  z-index: 1030;
}

#header .navbar {
  background-color: #387373;
  font-family: var(--cm-heading-font-family);
  --bs-navbar-color: rgba(var(--bs-white-rgb), 1);
  --bs-navbar-hover-color: rgba(var(--bs-white-rgb), .8);
  --bs-nav-link-font-size: 1.25rem;
  --bs-nav-link-font-weight: 400;
  --bs-navbar-active-color: rgba(var(--bs-white-rgb), 1);
}

#header .dropdown-menu {
  --bs-dropdown-bg: transparent;
}

#header .navbar-brand img {
  height: 3rem;
  width: auto;
}

#header .navbar .navbar-toggler {
  color: var(--bs-light);
  text-transform: uppercase;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  border: none;
  display: inline-grid;
  justify-items: end;
}


@media (max-width: 992px) {
  #header .navbar .container .row {
    display: flex;
    justify-content: space-between;
  }
}

#header .navbar-brand img.navbar-brand-img {
  display: none;
}
#header .navbar-brand img.navbar-brand-img-light {
  display: block !important;
}

#header .collapse {
    position: relative;
}
#header.navbar-collapse-collapsing .navbar::before,
#header.navbar-collapse-open .navbar::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(../gfx/bg-1.webp);
    background-size: cover;
    opacity: .2;
}

#header #navbarCollapse {
  --bs-nav-link-font-size: 1.75rem;
}
#header #navbarCollapse .nav-item .nav-item {
  --bs-nav-link-font-size: 1.25rem;
}


#navbarCollapse .container {
  height: calc(100vh - 5rem);
}

.navbar-nav {
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .navbar-nav {
        gap: 1rem;
    }
}


/* ==========================================================================
   Footer
   ========================================================================== */
   
footer h3 {
  color: var(--bs-info);
  margin-top: 0;
  font-weight: 700;
}

footer p {
    color: var(--bs-light);
}

.footer-brand img {
  height: 4rem;
  width: auto;
}

.footer-sub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  container-type: inline-size;
  container-name: footer-sub;
}

.simple-menu .list-inline-item:not(:last-child) {
    margin-right: 2.5rem;
}

.footer-sub-copyright { display: none; }

.footer-sub-links ul.inline-list { gap: 1rem; }

@container footer-sub (min-width: 600px) {
  .footer-sub {
    display: inline-flex;
    gap: 3rem;
    justify-content: center;
    width: 100%;
  }

  .footer-sub-links ul.inline-list { gap: 3rem; }
}

#footer a {
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
.links-unstyled a {
  color: inherit;
}
.links-unstyled a:hover {
  color: inherit;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal.modal-untitled {
  --bs-modal-padding: 0;
}

.modal.modal-untitled .modal-header { padding: 0; }

.modal.modal-untitled .btn-close {
  background: none;
  font-size: 2rem;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  --bs-btn-close-color: var(--bs-primary);
  --bs-btn-close-opacity: 1;
  position: absolute;
  top: calc(0.5 * var(--bs-modal-header-padding-y));
  right: calc(0.5 * var(--bs-modal-header-padding-x));
  z-index: 1;
}
.modal.modal-untitled .btn-close::after {
  content: "";
  --fa-style: 900;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  font-family: var(--_fa-family);
}

.modal.modal-untitled .modal-header .btn-close {

}

/* Profile List Item */

.profile-list-item .list-item-wrapper {
  box-shadow: none;
  border-radius: 0;
}

.profile-list-item .list-item-title {
  font-size: 1.5rem;
  color: black;
}

.profile-list-item .list-item-role {
  font-weight: 600;
}

.profile-list-item .list-item-content {
  padding: 0;
}

.profile-list-item h3 {
  margin-bottom: 0.8rem;
}

.profile-list-item picture {
  background: var(--bs-white);
  border-radius: var(--bs-border-radius);
}

.profile-list-item .list-item-cta {
  display: flex;
  flex-direction: column;
}

.list-item-phone,
.list-item-email {
    color: var(--bs-black);
}

@media (min-width: 992px) {
    .list-item-phone,
    .list-item-email {
        font-size: 0.9rem;
    }
    
    .profile-list-item .list-item-title {
        font-size: 1.1rem;
        color: black;
    }
}

/* ==========================================================================
   Article
   ========================================================================== */

.article-hero-media { position: relative; }

.article-hero-media::before {
  content: "";
  display: block;
  background: var(--bs-white);
  width: 200vw;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: -50vw;
  z-index: -1;
}

/* ==========================================================================
   Listings / Resource cards
   ========================================================================== */

.resource .list-item-title {
    color: var(--bs-dark);
}

.resource-story-item .list-item-picture img { height: 100%; }

.resource-story-item a:hover .hover-zoom img { opacity: 0.25; }

.resource-story-item .list-item-title {
  font-size: 1.25rem;
  opacity: 0;
}

.resource-story-item a:hover .list-item-title { opacity: 1; }

.list-item-title {
    color: var(--bs-secondary);
}

.list-item-description {
    color: #000;
}

.list-item-picture {
    border-radius: var(--bs-border-radius-xl);
}

.resource-story-item .btn.btn-inherit { color: #fff; }

/* Preview cards */
.cb-field-resource-preview.flex-fill > article,
.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture,
.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture img {
  height: 100%;
}

.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture img {
  object-fit: cover;
}

.cb-field-resource-list-mixer .resource-list-item .list-item-content {
    padding: 1rem 0;
}

.cb-field-resource-list .list-item-content {
    flex-direction: column;
}

/* ==========================================================================
   Events
   ========================================================================== */


/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 1.75rem;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-bg: var(--bs-dark);
  --bs-accordion-btn-color: var(--bs-white);
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-active-bg: var(--bs-primary);
  --bs-accordion-active-color: var(--bs-white);
}

.accordion-button::after {
  content: "+";
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  color: var(--bs-primary);
  font-size: 3rem;
  line-height: 0;
}
.accordion-button:not(.collapsed)::after {
  content: "–";
  color: white;
}

/* ==========================================================================
   Scrolly
   ========================================================================== */

.scrolly-content-text.text-light,
.scrolly-content-boxed.text-bg-dark {
  --cm-heading-color: var(--bs-white);
  --cm-display-color: var(--bs-white);
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

table { background-color: var(--bs-white); }

table tr:nth-child(odd) {
  filter: brightness(0.97);
}

table tr td {
  padding: 1rem;
}

table td.cell-highlighted {
  background-color: rgba(var(--bs-light-rgb), 0.5);
}

.mix-controls-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mix-controls-wrapper > * { flex: 1 1 auto; }

table {
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
}

/* Key stats (pills) */
.cb-field-keystat {
  container-type: inline-size;
  container-name: keystat-container;
}

.keystat-1 { --keystat-color-rgb: var(--bs-danger-rgb); }
.keystat-2 { --keystat-color-rgb: var(--bs-success-rgb); }
.keystat-3 { --keystat-color-rgb: var(--bs-info-rgb); }
.keystat-4 { --keystat-color-rgb: var(--bs-warning-rgb); }

.keystat-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.keystat-item {
  flex: 1 1 auto;
  padding: 1rem;
  background-color: #fff;
  gap: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-xxl);
  display: flex;
  align-items: center;
  text-decoration: none;
}

a.keystat-item:hover { background-color: rgba(var(--keystat-color-rgb), 0.1); }

.keystat-icon {
  aspect-ratio: 1;
  height: 100%;
  font-size: 2rem;
  color: rgb(var(--keystat-color-rgb));
  background-color: rgba(var(--keystat-color-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.keystat-number {
  color: var(--bs-secondary);
  font-weight: 600;
}

@container keystat-container (min-width: 360px) {
  .keystat-wrapper {
    flex-wrap: nowrap;
    flex-direction: column;
  }
}

@container keystat-container (min-width: 400px) {
  .keystat-wrapper {
    flex-wrap: wrap;
    flex-direction: initial;
  }

  .keystat-text { padding-right: 1rem; }
}

@media (min-width: 992px) {
  .keystat-number { font-size: 1.5rem; }
}

/* Tile swiper */
.tile-swiper {
  --desktop-active-width: 50%;
  --desktop-rest-width: calc((100% - var(--desktop-active-width)) / var(--rest-count, 1));
}

.tile-swiper .slide-content-wrapper::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  background: #387373;
}

.tile-swiper .slide-content-wrapper p {
    color: #fff;
}

.tile-swiper .swiper-pagination.swiper-pagination-lock {
  display: block;
}

/* Swiper Pagination Bullet */

.swiper-pagination-bullet {
    opacity: 1;
}

@media (max-width: 991px) {
  #swiper-1-1 .swiper {
    height: 100%;
    padding-bottom: 40px;
  }

  #swiper-1-1 .swiper-pagination {
    bottom: 0;
    position: absolute;
  }
}

/* Forms */

.form-label {
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--bs-secondary);
}

/* Form validation */
.was-validated .is-invalid-group legend,
.was-validated .is-invalid-group .form-check-label {
  color: inherit;
}
.was-validated input[name="interest[]"]:valid,
.was-validated input[name="interest[]"]:invalid {
  border-color: inherit;
  box-shadow: none;
}
.was-validated .is-invalid-group .form-check-input {
  border-color: var(--bs-form-invalid-border-color);
}
.group-feedback {
  display: none;
}
.was-validated .is-invalid-group .group-feedback {
  display: block;
}


/* ==========================================================================
   Layout width helpers (wide / narrow)
   ========================================================================== */

.lead { font-size: 1rem; }

@media (min-width: 768px) {
  :root { --cm-narrow: 576px; }
  .wide {
    min-width: calc(720px + var(--bs-gutter-x) * 1);
    max-width: 900px;
  }
  .lead { font-size: 1.25rem; }
}

@media (min-width: 992px) {
  :root { --cm-narrow: 768px; }

  .wide {
    min-width: calc(960px + var(--bs-gutter-x) * 1);
    max-width: 1080px;
  }

  #header .nav-primary a {
    font-size: 2.5rem;
  }

  #header .navbar-brand img {
    height: 3.75rem;
    width: auto;
  }

  .tile-swiper .swiper-slide {
    width: var(--desktop-rest-width);
    transition: width 0.35s ease;
    cursor: pointer;
  }

  .tile-swiper .swiper-slide:hover .hover-zoom img {
    transform: scale(1.1);
  }

  .tile-swiper .swiper-slide.is-active {
    width: var(--desktop-active-width);
  }

  .tile-swiper .swiper-slide:not(.is-active) .slide-content {
    opacity: 0;
    pointer-events: none;
  }

  .tile-swiper .swiper-slide:not(.is-active)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1;
  }

  .tile-swiper .swiper-slide.is-active .slide-content {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

}

.blockquote-footer {
    color: var(--bs-light);
}

@media (min-width: 1200px) {
  :root { --cm-narrow: 1000px; }
  .wide {
    min-width: calc(1140px + var(--bs-gutter-x) * 1);
    max-width: 1280px;
  }
  .resource-list-item .list-item-title { font-size: 1.75rem; }
  .resource-list-item .list-item-description { font-size: 1.25rem; }
}

@media (min-width: 1400px) {
  .wide {
    min-width: calc(1348px + var(--bs-gutter-x) * 1);
    max-width: 1640px;
  }
}

@media (min-width: 2000px) {
  .wide { max-width: 1900px; }
}

/* Orientation overrides */
@media (orientation: portrait) {}