/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* ============================================
FONT IMPORT
============================================ */
@font-face {
  font-family: 'aro condensed';
  src: url('assets/fonts/AroTest-Condensed.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'aro normal';
  src: url('assets/fonts/AroTest-Normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'selecta';
  src: url('assets/fonts/SelectaTrialUnlicensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ============================================
CSS VARIABLES
============================================ */
:root {
  /* font sizes */
  --fs-xs: 16px;
  --fs-sm: 18px;
  --fs-sm2: 20px;
  --fs-base: 26px;
  --fs-md: 32px;
  /* --fs-lg: 100px;
  --fs-xl: 100px;
  --fs-2xl: 100px; */

  /* colors */
  --c-black: #2A2A2A;
  --c-white: #FFFFFF;
  --c-light: #F8F8F8;
  --c-yellow: #FED204;

  --c-grey: #EDEDED;
  --c-lightgrey: #D9D9D9;
  --c-midgrey: #676463;
  --c-darkgrey: #444444;
  --c-grey-inactive: #C2C1C2;
  --c-grey-inactive2: #BEBEBE;

  --c-blue: #001FD5;
  --c-lightblue: #4491FB;
  --c-darkblue: #152A90;
  --c-babyblue: #A4C9EC;
  --c-blue-inactive: #8CBAFA;

  --c-lightgreen: #D8EBD7;
  --c-darkgreen: #0E4D26;
  --c-green-inactive: #B0CBB4;

  --c-brown: #CC9F75;
  --c-lightbrown: #E3D5BF;
  --c-darkbrown: #43362D;
  --c-brown-inactive: #B1A99B;

  /* transitions */
  --trans-default: 0.15s ease;

  /* paddings */
  @media only screen and (min-width: 1000px) {
    --gap-container-main: 72px;
  }  
}


/* ============================================
TYPOGRAPHY
============================================ */
body > * {
  font-family: 'selecta', Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: var(--c-black);
}

p {
  padding-bottom: 1em;
}



/* ============================================
FREQUENT COMPONENTS / MISC
============================================ */
/* section title */
.section-title {
  border-bottom: none !important;
}

/* fancy box */
.nectar-fancy-box {
  border-radius: 0 !important;

  .box-bg {
    &:before {
      display: none !important;
    }
  }
}

/* skip to content */
.nectar-skip-to-content {
  display: none
}

/* links */
a {
  transition: opacity var(--trans-default);

  &:hover {
    opacity: 0.6;
  }
}

/* buttons */
.form-newsletter input[type="submit"],
.container-wrap input[type="submit"] {
  font-family: 'selecta', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1 !important;
  padding: 20px !important;
  height: calc(20px * 2 + var(--fs-sm));

  &:hover {
    box-shadow: none;
    transform: none !important;
    -webkit-transform: none;
  }
}

.nectar-button.medium,
.event-links a {
  font-family: 'selecta', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm2);
  line-height: 1 !important;
  padding: 20px 24px !important;
  height: calc(20px * 2 + var(--fs-sm2));
  border-radius: 4px !important;

  &:hover {
    box-shadow: none !important;
    transform: none !important;
  }
}



/* ============================================
GENERAL LAYOUT
============================================ */
/* container */
.container {
  &.main-content {
    padding: 0;
  }
}

.container-wrap {
  padding-bottom: 0;
}

body[data-header-resize="0"] .container-wrap, 
body[data-header-resize="0"] .project-title {
  padding-top: 0;
}



/* ============================================
HEADER
============================================ */
#header-outer {
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none;
}

#header-space {
  height: 0 !important;
}

header {
  .container {
    padding: 12px 16px 0 !important;
  }

  #logo {
    margin: 0 !important;
    position: absolute;
    left: 0;
    top: 0;

    img {
      height: 52px !important;
      position: absolute;
    }
  }

  .logo-spacing {
    margin: 0 !important;
  }

  nav {
    justify-content: center;

    ul:not(.sub-menu) li {
      width: 10vw;
      font-size: var(--fs-xs);

      span {
        color: var(--c-black);
        font-size: var(--fs-xs);
      }

      a {
        padding: 0 !important;
        color: var(--c-black);

        &:hover {
          cursor: pointer;
        }
      }
    }

    ul li:not([class*="menu-item-btn"]) {
      padding-left: 20px;
      padding-right: 20px;
    }

    .sf-menu:not(.buttons) {
      background: hsl(0deg 0% 92.55% / 40%);
      backdrop-filter: blur(54px);
      width: auto !important;
      border-radius: 4px;
    }

    /* temp hide right buttons */
    .buttons.sf-menu {
      display: none;
    }

    .sub-menu {
      width: 10vw;
      padding: 20px;
      background: hsl(0deg 0% 92.55% / 40%);
      backdrop-filter: blur(24px);
      border-radius: 0 0 4px 4px;
      flex-direction: column;
      row-gap: 2px;
      text-align: left;
      box-shadow: inset 0px 4px 6px hsl(0deg 0% 0% / 15%);
      border: none !important;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      &.submenu-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      li {
        opacity: 1 !important;
        padding: 0 !important;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        
        span {
          color: var(--c-black);
          font-size: var(--fs-xs);
        }

        a {
          padding: 0 !important;
          color: var(--c-black);
        }
      }
    }
  }
}



/* ============================================
FOOTER
============================================ */
#footer-outer {
  #footer-widgets {
    background: #FFFFFF;

    & > * {
      color: var(--c-black);
      font-size: var(--fs-sm2);
      line-height: 1;
    }

    .container {
      padding: 0 var(--gap-container-main);

      .row {
        padding: 60px 0 40px;
        display: flex;

        .col.right-edge {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &::after {
            display: none;
          }

          .widget_custom_html {
            opacity: 0.4;
          }
        }

        li.menu-item {
          padding: 0 !important;

          a {
            &:hover {
              color: var(--c-black) !important;
              opacity: 0.7;
            }         
          }
        }

        h4 {
          font-weight: 500;
          font-size: var(--fs-sm2);
          color: var(--c-black);
          opacity: 0.4;
          line-height: 1;
          margin-bottom: 44px;
        }
      }
    }
  }

  #copyright {
    display: none;
  }
}



/* ============================================
HOME
============================================ */
/* intro */
#home-intro {
  .nectar-fancy-box {
    &:first-child {
      margin: 0;
      padding: 100px 0 200px;
      background-color: var(--c-grey);

      .box-bg {
        mix-blend-mode: plus-lighter;
        z-index: 2;
        pointer-events: none;
      }

      .inner {
        font-family: 'aro condensed', Arial, Helvetica, sans-serif;
        font-size: 12vw;
        letter-spacing: -0.01em;
        line-height: 0.8;
        color: #414141;
        text-align: center;
        z-index: 1;

        strong {
          font-family: 'aro normal', Arial, Helvetica, sans-serif;
        }

        sup {
          vertical-align: top;
          display: inline-block;
          padding: 0.25vw 0;
        }
      }
    }

    &:last-child {
      background: #FF0004;
      color: #590000 !important;
      font-family: 'selecta', Arial, Helvetica, sans-serif;
      font-size: 32px;
      line-height: 1;
      text-transform: uppercase;
      padding: 28px 48px 36px;
      margin: 0 70px;
      z-index: 3;
      transform: translateY(-50%);

      .box-bg {
        background: #FF0004 !important;
      }

      a {
        color: #FFCB7D;
      }

      .inner {
        min-height: unset !important;
      }
    }
  }
}

/* news */
#home-news {
  margin-top: 136px;

  .wpb_text_column:first-child {
    padding-left: var(--gap-container-main);
  }

  p {
    font-size: var(--fs-md);
    line-height: 110%;

    a {
      color: var(--c-darkblue);
    }
  }

  .nectar-recent-posts-slider_multiple_visible {
    padding-top: 0;
    margin-top: 136px;

    .nectar-recent-posts-slider-inner {
      margin-left: calc(-1 * var(--gap-container-main));
    }

    .nectar-recent-post-slide {
      padding-top: 0 !important;
      margin: 0 calc(var(--gap-container-main) / 2);

      .nectar-recent-post-bg-wrap {
        position: relative !important;
      }
    }

    .recent-post-container {
      height: 100%;
      position: relative;

      &.container {
        bottom: unset;
        left: unset;
        top: 0;
        max-width: 100% !important;
      }

      span.strong {
        position: absolute;
        top: -65vh; /* same as article media height */
        background-color: #0000001a;
        backdrop-filter: blur(24px);
        padding: 6px 12px;
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        column-gap: 16px;
        row-gap: 5px;

        a {
          font-size: var(--fs-sm);
          color: var(--c-white);
          line-height: 1;
          font-weight: 500;
          margin: 0;
        }
      }

      h3 {
        position: relative;
        color: var(--c-black);
        font-weight: 500;
        font-size: var(--fs-md);
        line-height: 1.1;
        letter-spacing: -0.02em;
        padding-top: 20px;

        a {
          color: var(--c-black);
          font-weight: 500;
        }
      }

      .nectar-button {
        display: none !important;
      }
    }

    .flickity-viewport:not(.no-hover) .nectar-recent-post-slide:hover .nectar-recent-post-bg-wrap {
      transform: none !important;
    }

    .flickity-viewport .nectar-recent-post-bg-wrap,
    .nectar-recent-post-bg, 
    .nectar-recent-post-bg:after {
      border-radius: 0;
      height: 65vh;
    }

    .nectar-recent-post-slide .nectar-recent-post-bg:after {
      display: none !important;
    }

    .nectar-recent-post-bg-blur {
      display: none !important;
    }

    /* custom pagination counter */
    .flickity-page-dots {
      display: none !important;
    }

    .flickity-page-counter {
      font-size: var(--fs-md);
      line-height: 1.1;
      text-align: left;
      padding: 0 var(--gap-container-main) 12px;
    }
  }
}

/* meet our members */
#home-meet-members,
#meet-members-list {
  background: #000000;
  padding: 100px 0 !important;
  margin-bottom: 0;
  
  .section-title {
    font-family: 'aro condensed', Arial, Helvetica, sans-serif;

    h2 {
      color: var(--c-yellow) !important;
      font-size: 12vw;
      letter-spacing: -0.02em;
      line-height: 0.8;
    }
  }
}

/* globe */
.so-widget-so-cc-members-map {
  height: 125vh;

  .mapboxgl-map {
    height: 100%;
  }

  .mapboxgl-marker {
    background: var(--c-yellow);
    border-radius: 50px;
    width: 16px !important;
    height: 16px !important;
    box-shadow: 1px 1px 10px var(--c-yellow);
    
    &:hover {
      opacity: 0.7 !important;
      cursor: pointer;
    }

    &.hidden {
      display: none;
    }
  }
}

/* globe filters panel */
.map-filters-panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 50vw;
  min-width: 720px;
  margin: 0 auto;
  gap: 12px;
  padding: 0;
  font-family: 'selecta', Arial, Helvetica, sans-serif;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  .handle {
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--c-yellow);
    touch-action: auto !important;
    cursor: default;
    user-select: auto;
    padding: 6px 12px 6px 0;
    opacity: 0.7;

    .toggle-filters {
      display: none;
    }
  }

  .map-filter-box {
    position: relative;
    flex: 1 1 0;

    &.filter-open {
      .map-filter-title .toggle-filter {
        transform: rotate(180deg);
      }

      .map-filters {
        display: block;
      }
    }
  }

  .map-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px 6px 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    color: var(--c-yellow);
    background: rgba(254, 210, 4, 0.1);
    border: none;
    transition: background-color var(--trans-default);
    order: 1;

    &:hover {
      background: rgba(254, 210, 4, 0.25);
    }

    .toggle-filter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      margin-left: 8px;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      order: 2;
      transition: transform var(--trans-default);

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 10px;
        background: var(--c-yellow);
        transition: transform var(--trans-default);
      }

      &::before {
        transform: rotate(-45deg);
        margin-right: 6px;
      }

      &::after {
        transform: rotate(45deg);
        margin-left: 6px;
      }
    }
  }

  .map-filters {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    /* background: rgb(0 0 0 / 50%); */
    backdrop-filter: blur(24px);
    z-index: 10;

    /* custom scrollbar - firefox */
    scrollbar-color: rgb(254 210 4 / 20%) transparent;

    /* custom scrollbar - webkit */
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgb(254 210 4 / 20%);
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: var(--c-light);
    }

    > div {
      display: flex;
      flex-direction: column;
      padding: 12px 0;
    }

    label {
      color: var(--c-yellow);
      display: flex;
      align-items: flex-start;
      padding: 6px 8px;
      font-size: var(--fs-xs);
      font-weight: 500;
      cursor: pointer;
      transition: background-color var(--trans-default);

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      accent-color: var(--c-yellow);
      border-radius: 0;
      flex-shrink: 0;
    }

    .reset-filters {
      background: transparent;
      border: none;
      font-family: 'selecta', Arial, Helvetica, sans-serif;
      font-size: var(--fs-xs);
      font-weight: 500;
      color: var(--c-midgrey);
      cursor: pointer;
      text-align: left;
      padding: 0;
      transition: opacity var(--trans-default);
      margin: 0 4px 4px;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    width: 100%;

    .handle,
    .map-filter-title {
      width: 100%;
      justify-content: flex-start;
    }

    .map-filters {
      position: relative;
      top: 0;
      width: 100%;
      box-shadow: none;
      border-top: 1px solid #eee;
    }
  }
}

/* newsletter */
#home-newsletter {
  background: #000000;
}

.newsletter-section {
  .vc_column-inner {
    background: var(--c-lightblue);
    color: var(--c-blue);
    margin: 0 var(--gap-container-main) 52px;
    padding: 52px 52px 88px;

    .section-title {
      padding: 0;
      margin: 0 !important;
    }

    h2 {
      font-family: 'aro condensed', Arial, Helvetica, sans-serif;
      font-size: 9.5vw;
      letter-spacing: -0.02em;
      line-height: 0.8;
      color: var(--c-blue);
    }

    p {
      font-family: 'selecta', Arial, Helvetica, sans-serif;
      font-weight: 500;
      font-size: var(--fs-base);
      line-height: 1;
      text-align: center;
    }

    .wpb_text_column {
      width: 80%;
      margin: 52px auto;
    }

    .form-newsletter {
      p:first-child {
        display: flex;
        align-items: flex-start;
        column-gap: 8px;
        width: 100%;
        padding: 0 14vw;
        
        .wpcf7-spinner {
          position: absolute !important;
          background-color: var(--c-blue);
          opacity: 1;
          width: 20px;
          height: 20px;
          margin: 0;
          transform: translate(calc(-100% - 20px), 100%);

          &::before {
            background-color: var(--c-lightblue);
            top: 3px;
            left: 3px;
            width: 7px;
            height: 7px;
            transform-origin: 7px 7px;
          }
        }

        .wpcf7-form-control-wrap {
          flex-grow: 1;
          font-size: var(--fs-sm);

          span {
            text-align: left;
            background: transparent;
            box-shadow: none;
            padding: 0;
            margin-top: 8px;
            color: var(--c-blue);
            opacity: 0.7;
            font-size: var(--fs-sm);
          }
        }

        input {
          text-transform: uppercase;
          line-height: 1 !important;
          padding: 20px !important;
          height: calc(20px * 2 + var(--fs-sm));
          font-weight: 500;
          font-size: var(--fs-sm);
        
          &[type="email"] {
            flex-grow: 1;
            color: var(--c-blue);
            border: 2px solid var(--c-blue);
            background: unset;

            &:focus {
              box-shadow: none;
            }

            &::placeholder {
              color: var(--c-blue);
              opacity: 0.7;
            }
          }

          &[type="submit"] {
            color: var(--c-lightblue);
            background: var(--c-blue);

            &:hover {
              box-shadow: none !important;
            }
          }
        }
      }
    }
  }
}



/* ============================================
MEET OUR MEMBERS
============================================ */
.container-wrap:has(#meet-members-intro) {
  background: #000;

  #meet-members-intro {
    padding: 135px var(--gap-container-main) 0 !important;

    p {
      font-size: var(--fs-md);
      line-height: 1.1;
      color: var(--c-yellow);
    }
  }
}

#meet-members-list {
  padding-top: 32px !important;
  padding-bottom: 148px !important;
  z-index: 100;

  .member-row {
    &.hidden {
      display: none;
    }
  }

  #map-filters-panel {
    display: none;
  }

  .cc-members-list-wrapper {
    position: relative;
  }

  .sticky-filters.map-filters-panel {
    width: 100% !important;
    padding: 62px var(--gap-container-main) 20px !important;
    background: #000 !important;
    min-width: unset !important;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 100;
    transform: none !important;
    left: auto !important;
    top: auto !important;

    &.is-stuck {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 100;
    }
  }

  /* Placeholder to prevent content jump when filter becomes fixed */
  .sticky-placeholder {
    display: none;
  }

  .sticky-placeholder.active {
    display: block;
  }

  .cc-members-list {
    width: calc(100% - var(--gap-container-main) * 2);
    margin: 0 var(--gap-container-main);
    background: #000;
    color: var(--c-light);
    border: none;

    th {
      border-left: none;
      border-right: none;
      border-top: none;
      font-weight: 500;
      font-size: var(--fs-sm);
      line-height: 1.1;
      padding: 12px 20px;
      color: var(--c-midgrey);
      border-color: var(--c-midgrey);
    }

    td {
      border-left: none;
      border-right: none;
      border-color: var(--c-midgrey);
      font-size: var(--fs-sm);
      line-height: 1.1;
      padding: 12px 20px;
    }

    tr {
      background: #000;
      transition: all var(--trans-default);

      td:not(:first-child) {
        color: #a9a9a9;
      }

      &:hover {
        /* background: #161616; */

        td {
          border-color: var(--c-yellow);
          color: var(--c-yellow);
        }
      }
    }
  }
}

.become-a-member-cta {
  padding: 0 calc(var(--gap-container-main) + 1%) !important;

  .wpb_wrapper:has(.nectar-button) {
    display: flex;
    justify-content: space-between;

    .wpb_text_column {
      width: 40%;
    }

    .wpb_content_element {
      margin-bottom: 0;
    }
  } 

  p {
    font-size: var(--fs-md);
    line-height: 1.1;
  }

  &.intro {
    p {
      color: var(--c-light);
    }

    .nectar-button.medium {
      background: var(--c-light) !important;
      color: var(--c-black);
    }
  }

  &.outro {
    padding-bottom: 128px !important;
    position: relative;
    z-index: 1;

    p {
      color: var(--c-yellow);
    }

    .nectar-button.medium {
      background: var(--c-yellow) !important;
      color: var(--c-black);
    }
  }
}



/* ============================================
RESOURCES
============================================ */
.blog {
  /* temp disable filters */
  .nectar-post-grid-filters {
    display: none;
  }

  .container-wrap {
    padding: 0 var(--gap-container-main) 200px;

    .nectar-post-grid {
      column-gap: 16px;
      row-gap: 64px;

      .nectar-post-grid-item {
        .nectar-post-grid-item-bg {
          height: 32vw;
        }
      }

      &[data-columns="2"] .nectar-post-grid-item {
        width: calc(50% - 16px * 1 / 2);

        .nectar-post-grid-item-bg {
          height: 32vw;
        }
      }

      &[data-columns="3"] .nectar-post-grid-item {
        width: calc(33.32% - 16px * 2 / 3);

        .nectar-post-grid-item-bg {
          height: calc(33.32vw - 16px * 2 / 3);
        }
      }

      .nectar-post-grid-item {
        .content {
          padding: 16px 0 !important;

          .meta-category {
            position: absolute;
            top: 0;
            background-color: #0000001a;
            backdrop-filter: blur(24px);
            padding: 6px 12px;
            margin: 10px;
            display: flex;
            flex-wrap: wrap;
            column-gap: 16px;
            row-gap: 5px;

            a {
              font-size: var(--fs-xs);
              color: var(--c-white);
              line-height: 1;
              font-weight: 500;
              margin: 0;

              &:before {
                display: none;
              }
            }
          }

          .item-main {
            h3 {
              font-weight: 500;
              font-size: var(--fs-base);
              line-height: 1.1;
              padding-right: 16px;
            }

            .nectar-post-grid-item__meta-wrap {
              margin-top: 4px;

              .meta-author {
                font-size: var(--fs-xs);

                img {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .load-more-wrap {
      margin: 80px 0 0;
      
      .load-more {
        border: none;
        border-radius: 0;
        font-size: var(--fs-sm2);
        padding: 0px 6px;
        transition: all var(--trans-default);

        &:hover {
          color: var(--c-white);
          background: var(--c-black);
          opacity: 1;
        }
      }
    }
  }

  .section-title {
    text-align: center;
    margin-top: 135px !important;

    h1 {
      font-family: 'aro normal', Arial, Helvetica, sans-serif;
      font-size: 6vw;
      line-height: 0.7;
      letter-spacing: -0.02em;

      span {
        font-family: 'selecta', Arial, Helvetica, sans-serif;
        font-weight: 500;
        text-transform: uppercase !important;
        display: inline-block;
        text-align: left;
        width: auto;
        max-width: 240px;
        font-size: var(--fs-xs) !important;
        letter-spacing: 0;
        line-height: 1 !important;
      }
    }
  }

  #menu-resources-menu {
    margin: 135px 0 80px !important; 
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 60px;
    padding: 0 5%;

    li {
      list-style: none;

      a {
        font-family: 'aro normal', Arial, Helvetica, sans-serif;
        font-size: 6vw;
        line-height: 0.7;
        letter-spacing: -0.02em;

        span {
          font-family: 'selecta', Arial, Helvetica, sans-serif;
          font-weight: 500;
          text-transform: uppercase !important;
          display: inline-block;
          text-align: left;
          width: auto;
          max-width: 240px;
          font-size: var(--fs-xs) !important;
          letter-spacing: 0;
          line-height: 1 !important;
          position: absolute;
          bottom: 0;
          transform: translate(0.8vw, -0.4vw);
        }
      }

      &.current-menu-item {
        a {
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }

  &.theme-green {
    .page-header-no-bg,
    .container-wrap {
      background: var(--c-lightgreen);
    }

    .section-title {
      h1 {
        color: var(--c-darkgreen);
      }
    }

    #menu-resources-menu {
      li {
        a {
          color: var(--c-green-inactive);
        }

        &.current-menu-item {
          a {
            color: var(--c-darkgreen);
          }
        }
      }
    }
  }

  &.theme-blue {
    .page-header-no-bg,
    .container-wrap {
      background: var(--c-lightblue);
    }

    .section-title {
      h1 {
        color: var(--c-blue);
      }
    }

    #menu-resources-menu {
      li {
        a {
          color: var(--c-blue-inactive);
        }

        &.current-menu-item {
          a {
            color: var(--c-blue);
          }
        }
      }
    }

    .nectar-post-grid-item {
      .nectar-post-grid-item-bg {
        &::before {
          content: '';
          background: var(--c-blue);
          width: 100%;
          height: 100%;
          display: block;
          z-index: 2;
          position: absolute;
          mix-blend-mode: hard-light;
          opacity: 0.8;
          transition: opacity var(--trans-default);
        }
      }

      &:hover {
        .nectar-post-grid-item-bg {
          &::before {
            opacity: 0;
          }
        }
      }

      .content {
        .item-main {
          h3, span {
            color: var(--c-white) !important;
          }
        }
      }
    }
  }

  &.theme-black {
    .page-header-no-bg,
    .container-wrap {
      background: #000;
    }

    .section-title {
      h1 {
        color: var(--c-yellow);
      }
    }

    #menu-resources-menu {
      li {
        a {
          color: var(--c-darkgrey);
        }

        &.current-menu-item {
          a {
            color: var(--c-yellow);
          }
        }
      }
    }

    .nectar-post-grid-item {
      .content {
        .meta-category {
          display: none !important;
        }

        .item-main {
          h3, span {
            color: var(--c-white) !important;
          }
        }
      }
    }
  }

  &.theme-white {
    .page-header-no-bg,
    .container-wrap {
      background: var(--c-light);
    }

    .section-title {
      h1 {
        color: var(--c-black);
      }
    }

    #menu-resources-menu {
      li {
        a {
          color: var(--c-grey-inactive2);
        }

        &.current-menu-item {
          a {
            color: var(--c-black);
          }
        }
      }
    }
  }

  &.theme-brown {
    a {
      color: var(--c-black);
    }

    .page-header-no-bg,
    .container-wrap {
      background: var(--c-lightbrown);
    }

    .section-title {
      h1 {
        color: var(--c-brown);
      }
    }

    #menu-resources-menu {
      li {
        a {
          color: var(--c-brown-inactive);
        }

        &.current-menu-item {
          a {
            color: var(--c-brown);
          }
        }
      }
    }
  }
}



/* ============================================
ATLAS
============================================ */
#atlas-intro {
  margin-bottom: 80px;

  .wpb_text_column {
    padding: 0 10vw;
    
    p {
      font-size: var(--fs-base);
      font-weight: 500;
      line-height: 1.1;

      mark.cc-highlight {
        background-color: var(--c-black);
        color: var(--c-white);
        padding: 0 4px;
      }
    }
  }

  blockquote {
    font-family: 'selecta', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: var(--fs-base);
    line-height: 1.1;
    color: var(--c-white);
    background: #000000;
    padding: 32px;
    text-align: center;
    margin-top: 80px;

    .open-quote {
      display: none;
    }

    p {
      text-transform: uppercase !important;
      padding-bottom: 1em;
    }

    span {
      font-size: var(--fs-base);
      line-height: 1.1;
      letter-spacing: 0;
      opacity: 0.5;
    }
  }
}

#atlas-grid {
  .wpb_wrapper:has(.wpb_row) { 
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 80px;

    .wpb_row {
      width: calc(25% - 16px * 3 / 4);

      a:has(img) {
        &:hover {
          opacity: 1;
        }
      }

      .wpb_text_column {
        font-weight: 500;
        font-size: var(--fs-base);
        line-height: 1.1;
        padding-right: 16px;

        a {
          color: var(--c-black);
        }
      }
    }
  }
}

#atlas-contributors {
  .section-title {
    margin-bottom: 48px !important;
    padding: 0 !important;

    h2 {
      font-family: 'aro normal', Arial, Helvetica, sans-serif;
      font-size: 5vw;
      line-height: 0.8;
      letter-spacing: -0.02em;
      text-align: left;
      color: var(--c-lightgrey);
    }
  }

  ul {
    margin: 22px 0 0;
    padding: 0;
    font-family: 'selecta', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: var(--fs-sm2);
    line-height: 1.1;
    color: var(--c-black);
    columns: 4;
    column-gap: 16px;

    li {
      list-style: none;
      break-inside: avoid;
      padding-right: 16px;

      a {
        color: var(--c-blue);
      }
    }
  }
}



/* ============================================
NEWSLETTER
============================================ */
#newsletters-intro {
  width: calc(50% - 16px / 2);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1.1;
  margin-top: 55px;
}

#newsletters-grid {
  .wpb_wrapper:has(.newsletter-box) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 80px;
  }

  .newsletter-box {
    width: calc(33.33% - 16px * 2 / 3);
    margin-bottom: 0;
    order: 8;

    &:nth-child(1) { 
      order: 1; 
    }  

    &:nth-child(2) { 
      order: 2; 
    }
    
    &:nth-child(3) { 
      order: 3; 
    }  
    
    &:nth-child(4) { 
      order: 4; 
    }
    &:nth-child(5) { 
      order: 5; 
    }  
    
    &:nth-child(6) { 
      order: 6; 
    }

    .nectar-fancy-box {
      padding: 9vw;

      &::after {
        display: none !important;
      }

      &:hover {
        a.box-link {
          opacity: 1;

          .box-bg {
            &::after {
              background: transparent !important;
            }
          }
        }
      }

      a.box-link {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;

        
        .inner {
          font-family: 'aro normal', Arial, Helvetica, sans-serif;
          font-size: 3.25vw;
          line-height: 0.87;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          text-align: center;
          min-height: unset !important;
          padding: 0 16px;

          strong {
            font-family: 'aro condensed', Arial, Helvetica, sans-serif;
          }
        }
      }

      &.theme-grey {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-darkgrey);
          }

          .box-bg {
            &::after {
              background: var(--c-grey);
            }
          }
        }
      }

      &.theme-dark-brown {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-yellow);
          }

          .box-bg {
            &::after {
              background: var(--c-darkbrown);
            }
          }
        }
      }

      &.theme-light-brown {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-white);
          }

          .box-bg {
            &::after {
              background: var(--c-brown);
            }
          }
        }
      }

      &.theme-electric-blue {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-brown);
          }

          .box-bg {
            &::after {
              background: var(--c-blue);
            }
          }
        }
      }

      &.theme-blue {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-blue);
          }

          .box-bg {
            &::after {
              background: var(--c-lightblue);
            }
          }
        }
      }

      &.theme-light-blue {
        a.box-link {
          .inner, .inner strong {
            color: var(--c-white);
          }

          .box-bg {
            &::after {
              background: var(--c-babyblue);
            }
          }
        }
      }
    }

    a.link-text {
      display: block;
      margin-top: 16px;
      font-weight: 500;
      font-size: var(--fs-base);
      line-height: 1.1;
      padding-right: 16px;

      span.arrow {
        display: none !important;
      }
    }
  }

  .newsletter-section {
    order: 7;

    .vc_column-inner {
      margin: 0;
    }
  }
}



/* ============================================
EVENTS / SLIDE-IN MODAL (Page Modal Right)
============================================ */
/* keep header above modal */
body.modal-right-open .ocm-effect-wrap,
body.modal-right-open .ocm-effect-wrap-inner {
  z-index: auto !important;
}

body.modal-right-open #header-outer {
  position: fixed !important;
  z-index: 100 !important;
}

.modal-right-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(217, 217, 217, 0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 98;
  cursor: pointer;

  &.open {
    opacity: 1;
    visibility: visible;
  }
}

.modal-right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);

  &.open {
    transform: translateX(0);
  }
}

.modal-right-content {
  padding: 135px 16px;

  .modal-page-title,
  .modal-events-past-heading {
    font-family: 'aro normal', Arial, Helvetica, sans-serif;
    font-size: 6vw;
    line-height: 0.7;
    letter-spacing: -0.02em;
    color: var(--c-lightgrey);
    margin-bottom: 92px;
  }

  .modal-events-past-heading {
    margin-top: 128px;
  }
}

.modal-right-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: var(--fs-sm);
  color: var(--c-midgrey);
}

html:has(body.modal-right-open),
body.modal-right-open {
  overflow: hidden;
  height: 100%;
}

.modal-right-content {
  .nectar-post-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 128px;

    &[data-columns="2"] .nectar-post-grid-item {
      width: calc(50% - 16px / 2);
    }

    &[data-columns="3"] .nectar-post-grid-item {
      width: calc(33.333% - 16px * 2 / 3);
    }

    &[data-columns="4"] .nectar-post-grid-item {
      width: calc(25% - 16px * 3 / 4);
    }
  }

  .nectar-post-grid-item {
    .inner {
      position: relative;
      background: transparent;
      
      .nectar-post-grid-item-bg-wrap {
        position: relative;
        overflow: hidden;
        height: calc((50vw - 16px * 3) / 2);

        .nectar-post-grid-item-bg-wrap-inner {
          height: 100%;

          .nectar-post-grid-item-bg {
            height: 100%;

            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
      }

      .nectar-post-grid-link {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
      }

      .content {
        position: relative;
        padding: 12px 16px 0 0;
        z-index: 0;

        .post-heading {
          font-weight: 500;
          font-size: var(--fs-sm2);
          line-height: 1.1;
          color: var(--c-black);

          span.event-date {
            display: block;
            opacity: 0.4;
          }
        }
      }
    }
  }
}



/* ============================================
SINGLE EVENT / POST / SLIDE-IN MODAL LEFT
============================================ */
/* keep header above modal */
body.modal-left-open .ocm-effect-wrap,
body.modal-left-open .ocm-effect-wrap-inner {
  z-index: auto !important;
}

body.modal-left-open #header-outer {
  position: fixed !important;
  z-index: 100 !important;
}

.modal-left-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(217, 217, 217, 0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 98;
  cursor: pointer;

  &.open {
    opacity: 1;
    visibility: visible;
  }
}

.modal-left-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--c-white);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);

  &.open {
    transform: translateX(0);
  }
}

/* shared close button for both modals */
.modal-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-midgrey);
  z-index: 10;
  transition: color 0.2s ease;

  &:hover {
    color: var(--c-black);
  }
}

.modal-left-content {
  .main-content {
    min-height: 100vh;
  }
}

article {
  .post-content {
    padding: 135px 16px !important;
    color: var(--c-black);
    font-weight: 500;

    h1 {
      font-size: var(--fs-base);
      font-weight: 500;
      color: var(--c-light);
      line-height: 1.1;
      margin: 16px 0;
    }
  } 
}

.main-content {
  font-size: var(--fs-xs);

  &:has(article) {
    background-color: var(--c-light);
  }

  &.event {
    padding: 135px 16px;
    background-color: var(--c-black);
    color: var(--c-light);

    .event-header {
      display: flex;
      column-gap: 8px;
      margin-bottom: 16px;

      .event-header-col {
        border-top: 1px solid var(--c-white);
        border-bottom: 1px solid var(--c-white);
        padding: 8px 0;
        line-height: 1.1;

        &:first-child {
          width: 25%;
        }

        &:last-child {
          width: 75%;
        }
      }

      .event-date-wrap {
        display: flex;
        column-gap: 16px;
      }

      .event-entrance {
        text-transform: capitalize;
      }
    }

    .event-visuals {
      ul {
        margin: 0;
        width: 75%;
        display: flex;
        flex-direction: column;
        row-gap: 16px;

        li {
          list-style: none;
          line-height: 0;
        }
      }
    }

    h1 {
      font-size: var(--fs-base);
      font-weight: 500;
      color: var(--c-light);
      line-height: 1.1;
      margin: 16px 0;
    }

    .event-description {
      line-height: 1.1;
      margin-left: 15%;
      font-family: 'selecta', Arial, Helvetica, sans-serif !important;
      padding-right: 8px;
    }

    .event-links {
      display: flex;
      margin-top: var(--gap-container-main);
      padding-top: 16px;
      border-top: 1px solid var(--c-light);
      column-gap: 16px;
      
      a {
        background-color: var(--c-light);
        color: var(--c-black);
      }
    }
  }  
}

.modal-left-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: var(--fs-sm);
  color: var(--c-midgrey);
}

body.modal-left-open {
  overflow: hidden;
}