/* ========== Responsive CSS ========== */
:root {
  /*
  --nectar-accent-color: #161616;
  --nectar-extra-color-1: #CBBDB0;
  --nectar-extra-color-2: #FCF9F5;
  --nectar-extra-color-3: #323232;
  --nectar-new-desert-drift: #FCF9F5;
  --nectar-black: #000000;
  --nectar-white: #ffffff;
  */
}
/* ===== Desktop ===== */
@media only screen and (min-width: 1000px) {
  .wpb_row.vc_row-o-full-height.top-level, 
  .wpb_row.vc_row-o-full-height.top-level > .col.span_12 {
    height: 100vh;
  }
  /* ===== Blog Post Filter Columns ===== */
  .gk-blog-post-filter {
    .gk-blog-post-grid {
      display: grid;
      gap: 32px;
    }
    &.columns-desktop-1 .gk-blog-post-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    &.columns-desktop-2 .gk-blog-post-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    &.columns-desktop-3 .gk-blog-post-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    &.columns-desktop-4 .gk-blog-post-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    &.columns-desktop-5 .gk-blog-post-grid {
      grid-template-columns: repeat(5, 1fr);
    }
    &.columns-desktop-6 .gk-blog-post-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  /* ===== Light Navigation Styling ===== */
  .light-nav #header-outer #top nav > ul > li > a,
  .light-nav #header-outer .slide-out-widget-area-toggle a i.label,
  .light-nav #header-outer:not(.transparent) #top #logo,
  .light-nav #header-outer:not(.transparent) #top .logo-clone,
  .light-nav #header-outer #top .span_9 > .slide-out-widget-area-toggle i,
  .light-nav #header-outer #top .sf-sub-indicator i,
  body[data-header-color="custom"].ascend.light-nav #boxed #header-outer .cart-menu .cart-icon-wrap i,
  .light-nav #header-outer #top nav ul #nectar-user-account a span,
  .light-nav #header-outer #top #toggle-nav i,
  .material.light-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search,
  .light-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-user-account .icon-salient-m-user,
  .light-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search,
  .light-nav #header-outer #top #mobile-cart-link i,
  .light-nav #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart,
  body[data-header-format="left-header"].light-nav #header-outer #social-in-menu a,
  .light-nav #header-outer #top nav ul #search-btn a span,
  body #header-outer #top.offset-menu-open nav ul #search-btn a span {
    color: var(--nectar-extra-color-2) !important;
  }
  /* ===== Dark Navigation Styling ===== */
  .dark-nav #header-outer #top nav > ul > li > a,
  .dark-nav #header-outer .slide-out-widget-area-toggle a i.label,
  .dark-nav #header-outer:not(.transparent) #top #logo,
  .dark-nav #header-outer:not(.transparent) #top .logo-clone,
  .dark-nav #header-outer #top .span_9 > .slide-out-widget-area-toggle i,
  .dark-nav #header-outer #top .sf-sub-indicator i,
  body[data-header-color="custom"].ascend.dark-nav #boxed #header-outer .cart-menu .cart-icon-wrap i,
  .dark-nav #header-outer #top nav ul #nectar-user-account a span,
  .dark-nav #header-outer #top #toggle-nav i,
  .material.dark-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search,
  .dark-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-user-account .icon-salient-m-user,
  .dark-nav #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search,
  .dark-nav #header-outer #top #mobile-cart-link i,
  .dark-nav #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart,
  body[data-header-format="left-header"].dark-nav #header-outer #social-in-menu a,
  .dark-nav #header-outer #top nav ul #search-btn a span {
    color: var(--nectar-accent-color) !important;
  }

  .dark-nav #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text:after,
  .dark-nav body.material #header-outer #search-outer #search input[type="text"],
  body[data-header-format="left-header"].dark-nav.material #search-outer #search input[type="text"] {
    border-color: var(--nectar-accent-color);
  }

  .dark-nav #top #logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
  }

  .issue-offset-close {
    display: none;
  }
  /* ===== Offset Open Navigation Styling ===== */
  body #header-outer #top.offset-menu-open {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: var(--nectar-extra-color-1);
  }
  body #header-outer #top.offset-menu-open nav > ul > li > a,
  body #header-outer .slide-out-widget-area-toggle a i.label,
  body #header-outer #top.offset-menu-open #logo,
  body #header-outer #top.offset-menu-open .logo-clone,
  body #header-outer #top.offset-menu-open .span_9 > .slide-out-widget-area-toggle i,
  body #header-outer #top.offset-menu-open .sf-sub-indicator i,
  body[data-header-color="custom"] #boxed #header-outer .cart-menu .cart-icon-wrap i,
  body #header-outer #top.offset-menu-open nav ul #nectar-user-account a span,
  body #header-outer #top.offset-menu-open #toggle-nav i,
  body.material #header-outer #top.offset-menu-open .mobile-search .icon-salient-search,
  body #header-outer #top.offset-menu-open .mobile-user-account .icon-salient-m-user,
  body.material #header-outer #top.offset-menu-open .mobile-search .icon-salient-search,
  body #header-outer #top.offset-menu-open #mobile-cart-link i,
  body #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart,
  body[data-header-format="left-header"] #header-outer #social-in-menu a,
  body #header-outer #top.offset-menu-open nav ul #search-btn a span {
    color: var(--nectar-accent-color) !important;
  }
  body #header-outer[data-lhe="animated_underline"] #top.offset-menu-open nav > ul > li > a .menu-title-text:after,
  body.material #header-outer #top.offset-menu-open #search-outer #search input[type="text"],
  body[data-header-format="left-header"].material #search-outer #search input[type="text"] {
    border-color: var(--nectar-accent-color) !important;
  }
  body #header-outer #top.offset-menu-open #logo img {
    filter: invert(1) !important;
    -webkit-filter: invert(1) !important;
  }
  body #header-outer #top.offset-menu-open nav ul .issues-nav-item {
    color: var(--nectar-accent-color) !important;
  }
  /* === Footer === */
  body .container-wrap .footer-menu {
    ul.menu {
      display: flex;
      gap: 30px;
    }
  }
  @media only screen and (min-width: 1700px) {
    body .footer-img .img-with-aniamtion-wrap > .inner{
      max-width: 80%;
    }
  }
}
/* ===== Tablet ===== */
@media only screen and (min-width: 700px) and (max-width: 999px) {
  /* ===== Blog Post Filter Columns ===== */
  .gk-blog-post-filter {
    .gk-blog-post-grid {
      display: grid;
      gap: 24px;
    }
    &.columns-tablet-1 .gk-blog-post-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    &.columns-tablet-2 .gk-blog-post-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    &.columns-tablet-3 .gk-blog-post-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    &.columns-tablet-4 .gk-blog-post-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    &.columns-tablet-5 .gk-blog-post-grid {
      grid-template-columns: repeat(5, 1fr);
    }
    &.columns-tablet-6 .gk-blog-post-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
}
/* ===== Mobile ===== */
@media only screen and (max-width: 999px) {
  /* ===== Mobile Font Styling ===== */
  body .container-wrap .large,
  body .container-wrap .large *,
  body .container-wrap .large div *,
  body .container-wrap .mctp-copy-btn,
  body .gk-issue-case-study-row {
    font-size: 20px;
  }
  body .container-wrap .x-large,
  body .container-wrap .x-large *,
  body .container-wrap .x-large div * {
    font-size: 22px;
  }
  body .container-wrap h1,
  body .container-wrap .h1-style *,
  body .container-wrap .h1-style div * {
    font-size: 48px;
  }
  body .container-wrap h2,
  body .container-wrap .h2-style *,
  body .container-wrap .h2-style div * {
    font-size: 34px;
  }
  body .container-wrap h3,
  body .container-wrap .h3-style *,
  body .container-wrap .h3-style div * {
    font-size: 32px;
  }
  body .container-wrap h4,
  body .container-wrap .h4-style *,
  body .container-wrap .h4-style div * {
    font-size: 24px;
  }
  body .container-wrap h5,
  body .container-wrap .h5-style *,
  body .container-wrap .h5-style div * {
    font-size: 24px;
  }
  body .container-wrap h6,
  body .container-wrap .h6-style *,
  body .container-wrap .h6-style div * {
    font-size: 24px;
  }
  body .container-wrap .hero-text-style,
  body .container-wrap .hero-text-style *,
  body .container-wrap .hero-text-style div * {
    font-size: min(160px, 11vw);
  }
  
  body[data-hhun="1"].dark-nav #header-outer.detached, 
  body[data-hhun="1"].dark-nav #header-outer.transparent[data-transparent-header=true][data-remove-border=true][data-permanent-transparent="1"].detached {
    background-color: var(--nectar-extra-color-2);
  }
  body[data-hhun="1"].light-nav #header-outer.detached, 
  body[data-hhun="1"].light-nav #header-outer.transparent[data-transparent-header=true][data-remove-border=true][data-permanent-transparent="1"].detached {
    background-color: var(--nectar-accent-color);
  }
  /* ===== At Top Header Styling ===== */
  body[data-hhun="1"] #header-outer.detached.at-top,
  body[data-hhun="1"] #header-outer.transparent[data-transparent-header=true][data-remove-border=true][data-permanent-transparent="1"].detached.at-top {
    background-color: transparent !important;
  }
  /* ===== Open Menu Header Styling ===== */
  body[data-hhun="1"] #header-outer.detached.simple-ocm-open, 
  body[data-hhun="1"] #header-outer.transparent[data-transparent-header=true][data-remove-border=true][data-permanent-transparent="1"].detached.simple-ocm-open {
    background-color: var(--nectar-accent-color) !important;
  }
  body #header-outer .mobile-icon a {
    display: block;
    width: 40px;
    height: 40px;
    * {
      display: block;
      width: 100%;
      height: 100%;
    }
    i.lines-button.x2 {
      background-size: cover;
      top: 0;
      width: 40px !important;
      height: 40px;
      background-image: url('/wp-content/uploads/2025/12/hamburger.svg');
      transform: none;
      transition: all 0.3s ease-in-out;
      *,
      &:after {
        display: none;
      }
    }
    &.open i.lines-button.x2 {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  .dark-nav #header-outer .mobile-icon a,
  .dark-nav #top #logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
    transition: all 0.3s ease-in-out;
  }
  .dark-nav #header-outer.simple-ocm-open .mobile-icon a,
  .dark-nav #header-outer.simple-ocm-open #top #logo img {
    filter: invert(0);
    -webkit-filter: invert(0);
  }

  body .ocm-effect-wrap-inner #header-outer {
    #mobile-menu {
      padding: 0 34px !important;

      &:before {
        background-color: var(--nectar-accent-color);
      }
      .menu-item {
        border-top: 1px solid var(--nectar-extra-color-2);
        > a {
          font-size: 16px;
        }
      }
      .issues-nav-item {
        margin-left: 0vw;
        display: flex;
        align-items: center;
        gap: 8px;
        &::before {
          content: '';
          position: relative;
          top: 0;
          background-color: var(--nectar-extra-color-2);
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }
      }
    }
  }
  /* ===== Issue Offset Overlay ===== */
  .issue-offset-overlay {
    position: absolute;
    top: 0;
    height: auto;
    & .issue-offset-container {
      & .issue-offset-content {
        padding: 0;
        > .wpb_row {
          left: 0;
          padding: 32px 34px !important;
        }
      }
    }
  }
  body .container-wrap .mctp-copy-wrapper {
    flex-direction: column;
    gap: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nectar-accent-color);
    .mctp-copy-btn {
      margin-top: 10px;
      align-self: end;
    }
  }
  /* ===== Blog Post Filter Columns ===== */
  .gk-blog-post-filter {
    .gk-blog-post-grid {
      display: grid;
      gap: 16px;
    }
    &.columns-mobile-1 .gk-blog-post-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    &.columns-mobile-2 .gk-blog-post-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    &.columns-mobile-3 .gk-blog-post-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    &.columns-mobile-4 .gk-blog-post-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    &.columns-mobile-5 .gk-blog-post-grid {
      grid-template-columns: repeat(5, 1fr);
    }
    &.columns-mobile-6 .gk-blog-post-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  /* ===== Video Player Title Size ===== */
  body .container-wrap .within-column {
    & .media-player-content {
      & .media-player-ui {
        .media-player-title {
          font-size: 32px;
        }
      }
    }
  }
  /* ===== Back to Archive Button ===== */
  .back-to-archive-link {
    top: calc(40px + 32px);
  }
  /* ===== Issue Case Study - Table ===== */
  body .container-wrap .gk-issue-case-study-table,
  .gk-issue-case-study-table {
    display: block;
    .gk-issue-case-study-featured {
      flex-direction: column;
      margin-bottom: 32px;
      .gk-issue-case-study-featured-title {
        max-width: 100%;
        padding: 32px 0;
      }
      .gk-issue-case-study-thumbnail {
        display: none;
      }
    }
    .gk-issue-case-study-row {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      border-top: 1px solid var(--nectar-accent-color);
      padding: 1rem 0;
      gap: 0;

      .gk-issue-case-study-title {
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 4px;

        span {
          line-height: 1.2;
        }
        &:after {
          float: right;
          content: '';
          background-image: url('/wp-content/uploads/2025/12/arrow-right.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center right;
          display: block;
          width: 20px;
          height: 24px;
          text-align: center;
        }
      }

      .gk-issue-case-study-issue-number {
        font-size: 18px;
        text-align: left;
      }

      .gk-issue-case-study-work {
        font-size: 16px;
      }
    }
  }
}