/**
 * Global Stylesheet
 * Base styles, typography, buttons, and utility classes
 * 
 * NOTE: Styles are scoped to work in both front-end (body) and 
 * admin preview (.is-preview) contexts using :where() selector.
 */

/* ========================================
   BASE STYLES
   ======================================== */

:where(body, .is-preview) {
  font-family: var(--font-primary);
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  letter-spacing: 0.00844rem; /* 0.135px */
  color: var(--color-scda-black);
  background-color: var(--color-scda-beige);
  background-image: url("../../assets/images/patterns/site-bg.jpg");
  background-repeat: repeat;
  overflow-x: hidden;
}

/* Container */
.container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.row {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;

  @media screen and (max-width: 991px) {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
  }
  @media screen and (max-width: 576px) {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
  }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}
h1,
.h1 {
  font-size: 5.875rem; /* 94px */
  font-weight: 700;
  line-height: 6.125rem; /* 98px */
  letter-spacing: 9.4px;
  text-transform: uppercase;
  margin: 0 0 1rem;

  @media screen and (max-width: 1200px) {
    font-size: 4.375rem;
    line-height: 4.675rem;
    letter-spacing: 6.8px;
  }
  @media screen and (max-width: 768px) {
    font-size: 2.875rem; /* 46px */
    line-height: 3.75rem; /* 60px */
    letter-spacing: 4.8px;
    text-align: center;
  }
  @media screen and (max-width: 576px) {
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: 3px;
  }
}

/* Heading overflow handling */
h1.heading-overflow-break,
.h1.heading-overflow-break {
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}

h2,
.h2 {
  font-size: 3.875rem; /* 62px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.3625rem; /* 5.8px */
  text-transform: uppercase;
  margin: 0 0 1rem;

  @media screen and (max-width: 768px) {
    font-size: 2.375rem; /* 38px */
    line-height: 1.3;
    letter-spacing: 0.1125rem; /* 1.8px */
  }
}

h3,
.h3 {
  font-size: 2.875rem; /* 46px */
  font-weight: 700;
  line-height: 3.4375rem; /* 55px */
  letter-spacing: 0.00844rem;
  text-transform: none;
  margin: 0 0 1rem;

  @media screen and (max-width: 768px) {
    font-size: 1.875rem; /* 30px */
    line-height: 2.5rem; /* 40px */
  }
  + h4,
  + .h5 {
    margin-top: 1.5rem;
  }
}

h4,
.h4 {
  font-size: 2.125rem; /* 34px */
  font-weight: 500;
  line-height: 2.75rem; /* 44px */
  letter-spacing: 0.0169rem; /* 0.27px */
  margin: 0 0 1rem;

  @media screen and (max-width: 768px) {
    font-size: 1.625rem; /* 26px */
    line-height: 2.125rem; /* 34px */
  }
}

h5,
.h5 {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1.5rem;

  @media screen and (max-width: 768px) {
    font-size: 1.375rem; /* 22px */
    line-height: 1.4;
  }
}

h6,
.h6 {
  font-size: 1.1875rem; /* 19px */
  font-weight: 500;
  line-height: 1.6875rem; /* 27px */
  letter-spacing: 0.00938rem; /* 0.15px */
  margin: 0 0 1rem;

  @media screen and (max-width: 768px) {
    font-size: 1.1875rem; /* 19px */
    line-height: 1.6875rem; /* 27px */
    font-weight: 900;
  }
}

p,
ul,
ol {
  + h3,
  + h4,
  + h5,
  + h6 {
    margin-top: 2rem !important;
  }
}

/* Uppercase text patterns */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05rem; /* 0.8px */
}

/* Font weights */
.font-bold {
  font-weight: 700;
}

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

.font-black {
  font-weight: 900;
}

/* Inline text styles */
.type-pill {
  display: inline-block;
  padding: 4px 8px 2px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-color: #EEEEEE;
  color: var(--color-scda-blue);
}

/* Lists */
ul {
  &.checklist {
    padding-left: 20px;

    li {
      list-style-type: none;
      position: relative;
      margin-bottom: 4px;

      &:before {
        content: "";
        display: block;
        width: 13px;
        height: 10px;
        background-image: url("../svg/check.svg");
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 7px;
        left: -20px;
      }
    }
  }
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-block;
  padding: 13px 20px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: 0.2s ease-in-out;

  @media screen and (max-width: 576px) {
    width: 100%;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.7px;
  }
  &.btn-solid-blue {
    background-color: var(--color-scda-blue);
    color: var(--color-white);

    &:hover,
    &:focus-visible {
      background-color: var(--color-scda-midnight);
    }
  }
  &.btn-solid-white {
    background-color: var(--color-white);
    color: var(--color-scda-blue);

    &:hover,
    &:focus-visible {
      background-color: var(--color-scda-midnight);
      color: var(--color-white);
    }
  }
  &.btn-outline-blue {
    background-color: transparent;
    border: 2px solid var(--color-scda-blue);
    color: var(--color-scda-blue);

    &:hover,
    &:focus-visible {
      background-color: var(--color-white);
      border: 2px solid var(--color-white);
      box-shadow: 0 0 4px 0 rgba(81, 83, 74, 0.25);
    }
  }
  &.btn-outline-white {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);

    &:hover,
    &:focus-visible {
      background-color: var(--color-white);
      color: var(--color-scda-blue);
    }
  }
  &.btn-outline-brown {
    background-color: transparent;
    border: 2px solid var(--color-scda-brown) !important;
    color: var(--color-scda-brown) !important;
    padding: 13px 63px 13px 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.8px !important;
    transition: 0.2s ease-in-out !important;
    position: relative;

    @media screen and (max-width: 576px) {
      text-align: left;
    }
    &:hover,
    &:focus-visible {
      background-color: var(--color-scda-brown);
      color: var(--color-white) !important;
      text-shadow: none !important;

      &:after {
        display: none !important;
      }
    }
    &.btn-reveal {
      .icon {
        svg {
          path {
            fill: unset;
            stroke: var(--color-white);
          }
        }
      }
    }
    .icon {
      display: inline-block;
      position: absolute;
      top: -2px;
      right: -2px;
      width: 48px;
      height: calc(100% + 4px);
      background-color: var(--color-scda-brown);
      border-radius: 8px;

      @media screen and (max-width: 576px) {
        width: 45px;
      }
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;

        path {
          fill: var(--color-white);
        }
      }
    }
  }
  &.btn-reveal {
    svg {
      position: relative;
      top: 1px;
    }
  }
  &.btn-jumpnav {
    background-color: var(--color-scda-beige);
    color: var(--color-scda-blue);
    font-size: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 13px 20px;
    position: relative;
    transition: 0.3s ease-in-out;

    @media screen and (max-width: 576px) {
      text-align: left;
    }
    &:hover,
    &:focus-visible {
      background-color: var(--color-white);
      padding: 13px 40px 13px 20px;

      .arrow {
        opacity: 1;

        @media screen and (max-width: 768px) {
          right: 10px;
        }
      }
    }
    .arrow {
      display: block;
      width: 12px;
      height: 14px;
      background-image: url("../../assets/svg/arrow-down-blue.svg");
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      opacity: 0;
      transition: 0.3s ease-in-out;

      @media screen and (max-width: 768px) {
        width: 12px;
        height: 10px;
        background-image: url("../../assets/svg/arrow-right-blue.svg");
        right: 15px;
        opacity: 1;
      }
    }
  }
  svg {
    margin-left: 10px;
  }
}

/* ========================================
   HORIZONTAL RULE
   ======================================== */

hr {
  margin: 1.5rem 0 !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background colors */
.bg-beige {
  background-color: var(--color-scda-beige);
}

.bg-brown {
  background-color: var(--color-scda-brown);
}

.bg-green {
  background-color: var(--color-scda-green);
}

.bg-blue {
  background-color: var(--color-scda-blue);
}

.bg-midnight {
  background-color: var(--color-scda-midnight);
}

/* ========================================
   SECTION SPACING
   ======================================== */

/* Padding Top - Desktop */
.pt-none-d {
  padding-top: 0;
}
.pt-xs-d {
  padding-top: var(--spacing-xs);
}
.pt-sm-d {
  padding-top: var(--spacing-sm);
}
.pt-md-d {
  padding-top: var(--spacing-md);
}
.pt-lg-d {
  padding-top: var(--spacing-lg);
}
.pt-xl-d {
  padding-top: var(--spacing-xl);
}
.pt-xxl-d {
  padding-top: var(--spacing-xxl);
}

/* Padding Bottom - Desktop */
.pb-none-d {
  padding-bottom: 0;
}
.pb-xs-d {
  padding-bottom: var(--spacing-xs);
}
.pb-sm-d {
  padding-bottom: var(--spacing-sm);
}
.pb-md-d {
  padding-bottom: var(--spacing-md);
}
.pb-lg-d {
  padding-bottom: var(--spacing-lg);
}
.pb-xl-d {
  padding-bottom: var(--spacing-xl);
}
.pb-xxl-d {
  padding-bottom: var(--spacing-xxl);
}

/* Padding Top - Tablet */
.pt-none-t {
  @media screen and (max-width: 991px) {
    padding-top: 0;
  }
}
.pt-xs-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-xs);
  }
}
.pt-sm-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-sm);
  }
}
.pt-md-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-md);
  }
}
.pt-lg-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-lg);
  }
}
.pt-xl-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-xl);
  }
}
.pt-xxl-t {
  @media screen and (max-width: 991px) {
    padding-top: var(--spacing-xxl);
  }
}

/* Padding Bottom - Tablet */
.pb-none-t {
  @media screen and (max-width: 991px) {
    padding-bottom: 0;
  }
}
.pb-xs-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-xs);
  }
}
.pb-sm-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-sm);
  }
}
.pb-md-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-md);
  }
}
.pb-lg-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-lg);
  }
}
.pb-xl-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-xl);
  }
}
.pb-xxl-t {
  @media screen and (max-width: 991px) {
    padding-bottom: var(--spacing-xxl);
  }
}

/* Padding Top - Mobile */
.pt-none-m {
  @media screen and (max-width: 576px) {
    padding-top: 0;
  }
}
.pt-xs-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-xs);
  }
}
.pt-sm-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-sm);
  }
}
.pt-md-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-md);
  }
}
.pt-lg-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-lg);
  }
}
.pt-xl-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-xl);
  }
}
.pt-xxl-m {
  @media screen and (max-width: 576px) {
    padding-top: var(--spacing-xxl);
  }
}

/* Padding Bottom - Mobile */
.pb-none-m {
  @media screen and (max-width: 576px) {
    padding-bottom: 0;
  }
}
.pb-xs-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-xs);
  }
}
.pb-sm-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-sm);
  }
}
.pb-md-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-md);
  }
}
.pb-lg-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-lg);
  }
}
.pb-xl-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-xl);
  }
}
.pb-xxl-m {
  @media screen and (max-width: 576px) {
    padding-bottom: var(--spacing-xxl);
  }
}

/* ========================================
   SWIPER SLIDER
   ======================================== */

.swiper {
  position: relative;

  .swiper-navigation {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    height: 30px;
    z-index: 10;

    @media screen and (max-width: 576px) {
      left: 50%;
      transform: translateX(-50%);
    }
    .swiper-button-prev,
    .swiper-button-next {
      position: relative;
      width: 30px;
      height: 30px;
      background: none;
      border: none;
      padding: 0;
      font-size: 0;
      top: 11px;
      left: auto;
      right: auto;

      &:hover,
      &:focus-visible {
        svg {
          .square {
            fill: var(--color-scda-blue);
          }
          .arrow {
            stroke: var(--color-white);
          }
        }
      }
      svg {
        width: 100%;
        height: 100%;
        fill: none;

        .square,
        .arrow {
          transition: 0.3s ease-in-out;
        }
      }
    }
    .swiper-pagination {
      display: flex;
      position: relative;
      top: auto;
      bottom: auto;
      width: auto;
      margin: 0 7px;

      .swiper-pagination-bullet {
        background: var(--color-white);
        opacity: 0.5;
        width: 15px;
        height: 15px;
        margin: 0 7px;
        transition: 0.3s ease-in-out;

        &.swiper-pagination-bullet-active {
          background: var(--color-scda-beige);
          opacity: 1;
        }
      }
    }
  }
}

/* ========================================
   DEFAULT PAGE HERO
   ======================================== */

.default-page-hero {
  color: var(--color-white);
  position: relative;

  @media screen and (max-width: 576px) {
    text-align: center;
  }
  .hero-content {
    position: relative;
    z-index: 2;

    &.edge {
      overflow: hidden;

      .container {
        @media screen and (max-width: 991px) {
          width: 100%;
        }
      }
      .hero-content-text {
        @media screen and (max-width: 991px) {
          width: 90%;
          margin: 0 auto;
        }
      }
      .hero-content-image {
        width: 55%;
        margin-left: -5%;
        position: relative;
        right: calc(-5% + 15px);
        padding-right: 0;

        @media screen and (max-width: 991px) {
          width: 100%;
          padding-left: 0;
          margin-left: 0;
          right: auto;
        }
        img {
          padding-left: calc(var(--bs-gutter-x) * 0.5);

          @media screen and (max-width: 991px) {
            padding-left: 0;
          }
        }
      }
    }
    .container {
      padding-top: 172px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      @media screen and (max-width: 991px) {
        padding-top: 111px;
      }
    }
    .row {
      margin-top: 0;
      padding: 70px 0;

      .col-lg-6 {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .hero-content-text {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;

        h1 {
          margin-bottom: 0;
          max-width: 750px;
        }
        .hero-text {
          margin-top: var(--spacing-xs);

          p {
            color: var(--color-white);
            margin: 0;

            @media screen and (max-width: 768px) {
              text-align: center;
            }
          }
        }
        .button-group {
          margin-top: var(--spacing-xs);

          @media screen and (max-width: 768px) {
            text-align: center;
          }
          .btn {
            @media screen and (max-width: 576px) {
              width: auto;
            }
          }
        }
        .contact-box-desktop {
          @media screen and (max-width: 768px) {
            display: none;
          }
          .contact-info-box {
            margin-top: 35px;
          }
        }
      }
      .hero-content-image {
        margin-top: 0;

        @media screen and (max-width: 991px) {
          margin-top: 35px;
        }
        &.contact-box {
          img {
            @media screen and (max-width: 768px) {
              margin-bottom: 40px;
            }
          }
        }
        img {
          width: 100%;
          height: auto;
        }
        .contact-box-desktop {
          @media screen and (max-width: 768px) {
            display: none;
          }
        }
      }
      .contact-box-mobile {
        display: none;
        width: 90%;
        margin: 0 auto;

        @media screen and (max-width: 768px) {
          display: block;
        }
        .contact-info-box {
          margin: 0 auto;
        }
      }
    }
  }
}

/* ========================================
   HERO
   ======================================== */

.hero-texture {
  background-image: url("../../assets/images/patterns/cloth.jpg");
  background-repeat: repeat;

  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 1;
  }
  &.color-blue {
    &:after {
      background-color: var(--color-scda-blue);
    }
    .breadcrumbs-wrapper {
      background-color: rgba(var(--color-scda-blue-rgb), 0.8);

      .breadcrumbs {
        color: #d0d4d8;

        a {
          color: #d0d4d8;
        }
      }
    }
  }
  &.color-gray {
    &:after {
      background-color: var(--color-scda-black);
    }
    .breadcrumbs-wrapper {
      background-color: rgba(var(--color-scda-black-rgb), 0.8);

      .breadcrumbs {
        color: #d3d4d2;

        a {
          color: #d3d4d2;
        }
      }
    }
  }
  &.color-green {
    &:after {
      background-color: var(--color-scda-moss);
    }
    .breadcrumbs-wrapper {
      background-color: rgba(var(--color-scda-moss-rgb), 0.8);

      .breadcrumbs {
        color: #d6ddd4;

        a {
          color: #d6ddd4;
        }
      }
    }
  }
  &.color-orange {
    &:after {
      background-color: var(--color-scda-tan);
    }
    .breadcrumbs-wrapper {
      background-color: rgba(var(--color-scda-brown-rgb), 0.8);

      .breadcrumbs {
        color: #ded2ce;

        a {
          color: #ded2ce;
        }
      }
    }
  }
}

/* ========================================
   BREADCRUMBS
   ======================================== */

.breadcrumbs-wrapper {
  position: fixed;
  top: 122px;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 16px 0 15px;

  @media screen and (max-width: 991px) {
    display: none;
  }
  .breadcrumbs {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 1.2;

    a {
      position: relative;
      text-decoration: none;
      transition: 0.2s ease-in-out;

      &:hover,
      &:focus-visible {
        color: var(--color-white) !important;

        &:before {
          opacity: 1;
        }
      }
      &:before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-white);
        position: absolute;
        left: 0;
        bottom: 0px;
        opacity: 0;
        transition: 0.2s ease-in-out;
      }
    }
    .current-page {
      color: var(--color-white);
    }
  }
}

/* ========================================
   SUBNAVIGATION
   ======================================== */

.subnav {
  position: relative;
  z-index: 2;
  background-image: url("../../assets/images/patterns/subnav-cloth.jpg");
  background-repeat: repeat;
  margin-top: 40px;

  @media screen and (max-width: 991px) {
    margin-top: 30px;
  }
  @media screen and (max-width: 768px) {
    margin-top: 0px;
  }
  .row {
    padding: 30px 0;
  }
  .subnav-links {
    @media screen and (max-width: 768px) {
      display: none;
    }
    .subnav-link {
      margin: 0;
      padding-top: 20px;
      padding-bottom: 20px;

      @media screen and (max-width: 991px) {
        padding-top: 15px;
        padding-bottom: 15px;
      }
      a {
        width: 100%;
        aspect-ratio: 1 / 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--color-scda-brown);
        border-radius: var(--border-radius);
        padding: 15px;
        color: var(--color-white);
        font-size: 1.5rem;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.3s ease-in-out;

        @media screen and (max-width: 1440px) {
          padding: 1.042vw;
          font-size: 1.667vw;
        }
        @media screen and (max-width: 991px) {
          padding: 1.514vw;
          font-size: 2.422vw;
        }
        &:hover,
        &:focus-visible {
          background-color: var(--color-scda-mud);

          .button-text {
            top: -10px;
          }
          .arrow {
            opacity: 1;
          }
        }
        .button-text {
          display: block;
          position: relative;
          top: 0px;
          transition: top 0.3s ease-in-out;
        }
        .arrow {
          position: absolute;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          width: 14px;
          height: 12px;
          background-image: url("../../assets/svg/menu-right-arrow-white.svg");
          background-repeat: no-repeat;
          background-size: cover;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }
      }
    }
  }
  .subnav-links-mobile {
    display: none;
    padding: 40px 0 46px;
    transition: 0.2s ease-in-out;

    @media screen and (max-width: 768px) {
      display: block;
    }
    &.open {
      padding: 40px 0;

      .subnav-dropdown-button {
        &:after {
          transform: translateY(-50%) rotate(180deg);
        }
      }
      .subnav-dropdown-content {
        max-height: 800px;
        padding: 19px 0 12px;
      }
    }
    .subnav-dropdown-button {
      background-color: var(--color-scda-brown);
      border: none;
      border-radius: 10px;
      width: 100%;
      padding: 13px 15px 12px;
      font-family: var(--font-primary);
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--color-white);
      text-align: left;
      position: relative;
      cursor: pointer;
      transition: 0.2s ease-in-out;

      &:hover,
      &:focus-visible {
        background-color: var(--color-scda-mud);
      }
      &:after {
        content: "";
        display: block;
        width: 12px;
        height: 13px;
        background-image: url("../../assets/svg/arrow-down-white.svg");
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        transition: 0.5s ease-in-out;
      }
    }
    .subnav-dropdown-content {
      width: 100%;
      max-height: 0px;
      overflow: hidden;
      background-color: var(--color-white);
      border: 2px solid var(--color-scda-brown);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      padding: 0;
      margin-top: -10px;
      transition: 0.5s ease-in-out;

      a {
        display: block;
        width: 100%;
        padding: 15px 15px 13px;
        font-size: 0.9rem;
        font-weight: bold;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--color-scda-brown);
        text-decoration: none;
        transition: 0.3s ease-in-out;

        &:hover,
        &:focus-visible {
          background-color: var(--color-scda-beige);
        }
      }
    }
  }
}

/* ========================================
   ACCORDIONS
   ======================================== */

.accordion {
  border-bottom: 1px solid var(--color-scda-grey);

  .accordion-item {
    &:first-of-type {
      .accordion-header {
        .accordion-button {
          border-top: none;
        }
      }
    }
    .accordion-header {
      .accordion-button {
        font-family: var(--font-heading);
        font-size: 3rem;
        font-weight: 700;
        line-height: 3.5625rem;
        letter-spacing: 0.00844rem;
        text-transform: none;
        padding: 35px 35px 35px 0;
        box-shadow: none;
        border-top: 1px solid var(--color-scda-grey);
        cursor: pointer;
        position: relative;

        @media screen and (max-width: 768px) {
          font-size: 2rem;
          line-height: 2.625rem;
        }
        &:not(.collapsed) {
          &:after {
            background-image: url("../../assets/svg/minus-brown.svg");
          }
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          background-image: url("../../assets/svg/plus-brown.svg");
          background-size: cover;
          transition: 0.2s ease-in-out;
        }
        &.sm-text {
          font-size: 2rem;
          line-height: 2.625rem;

          @media screen and (max-width: 768px) {
            font-size: 1.5rem;
            line-height: 2rem;
          }
        }
      }
    }
    .accordion-collapse {
      .accordion-body {
        padding: 0 0 35px;

        p {
          margin-top: 0;
        }
        .text,
        .button-group {
          &:last-child {
            margin-bottom: 0;
          }
        }
        .reports-list {
          .reports-section {
            padding-bottom: var(--spacing-xs);
            border-bottom: 1px solid var(--color-scda-grey);
            margin-bottom: var(--spacing-xs);

            &:last-of-type {
              margin-bottom: 0;
            }
            .reports-section-title {
              color: var(--color-scda-brown);

              @media screen and (max-width: 768px) {
                font-weight: 500;
              }
            }
          }
          .reports-list-item {
            margin-bottom: 15px;

            &:last-of-type {
              margin-bottom: 0;
            }
            .report-link {
              font-weight: 500;
              color: var(--color-scda-tan);
              text-decoration: underline;
              transition: 0.2s ease-in-out;

              &:hover,
              &:focus-visible {
                text-decoration: none;
              }
              &.arrow-up,
              &.external {
                .icon {
                  top: 1px;
                }
              }
              .icon {
                margin-left: 8px;
                position: relative;
              }
            }
          }
        }
        .accordion-sidebar {
          background-color: #fcf7f3;
          padding: var(--spacing-sm);

          @media screen and (max-width: 576px) {
            padding: 1rem;
          }
          h3 {
            margin-bottom: 1rem;
          }
        }
      }
    }
  }
}

/* ========================================
   FORMS
   ======================================== */

/* GF injects its own <style> tag inside each form wrapper with hardcoded --gf-color-primary.
   Using !important here is required to beat that inline style in the cascade. */
.gform_wrapper.gform-theme {
  --gf-color-primary: var(--color-scda-blue) !important;
  --gf-color-primary-rgb: 66, 85, 99 !important;
  --gf-color-in-ctrl-primary: var(--color-scda-blue) !important;
  --gf-color-in-ctrl-primary-rgb: 66, 85, 99 !important;
}

.gform_wrapper, #mc_embed_shell {
  background-color: var(--color-white);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 12px 0 rgba(71, 71, 71, 0.2);

  .gform_title {
    font-family: var(--font-heading);
    font-size: 2.125rem;
    font-weight: 500;
    line-height: 2.75rem;
    letter-spacing: 0.0169rem;
    text-transform: none;
    margin-bottom: var(--spacing-xs);

    @media screen and (max-width: 768px) {
      font-size: 1.625rem;
      line-height: 2.125rem;
    }
  }

  .gform_required_legend {
    display: none;
  }
  .gfield_label {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: var(--color-scda-black) !important;
    margin-bottom: 8px !important;
  }
  .gfield_required {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: var(--color-scda-tomato) !important;
    margin-left: -2px !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    background-color: #fcf7f3 !important;
    border: 1px solid #fcf7f3 !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 2px 4px 0 rgba(74, 74, 104, 0.1) inset !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--color-scda-black) !important;
    padding: 12px 16px !important;
    height: auto !important;
    transition: 0.2s ease-in-out !important;

    &:focus {
      border: 1px solid var(--color-scda-blue) !important;
      outline: none !important;
    }
  }
  select,
  textarea {
    line-height: 1.4 !important;
  }
  select {
    padding-right: 43px !important;
    background-image: url("../../assets/svg/menu-down-arrow.svg") !important;
    background-repeat: no-repeat !important;
    background-size: 11px 13px !important;
    background-position: calc(100% - 16px) center !important;
  }
  textarea {
    height: 120px !important;
    min-block-size: auto !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea {
    &::placeholder {
      color: var(--color-scda-grey) !important;
      font-weight: 400 !important;
      opacity: 1 !important;
    }
  }
  select.gfield_select:has(option[value=""]:checked) {
    color: var(--color-scda-grey) !important;
    font-weight: 400 !important;
  }
  .gfield_error {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
      border: 1px solid var(--color-scda-tomato) !important;
      box-shadow:
        0 0 0 4px #eec6c7,
        0 2px 5px 0 rgba(74, 74, 104, 0.1) inset !important;
      background-image: url("../../assets/svg/error.svg") !important;
      background-repeat: no-repeat !important;
      background-size: 20px 20px !important;
      background-position: calc(100% - 16px) center !important;
      padding-right: 52px !important;
    }
  }
  input[type="submit"] {
    width: 100% !important;
    background-color: var(--color-scda-blue) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 15px 20px !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    transition: 0.2s ease-in-out !important;

    &:focus {
      outline: none !important;
    }
    &:hover,
    &:focus-visible {
      background-color: var(--color-scda-midnight) !important;
    }
  }
  .gfield_description {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: color-mix(in srgb, var(--color-scda-black) 75%, transparent) !important;
    margin-top: 4px !important;
  }
  #gfield_description_26_8 {
    color: var(--color-scda-tomato, #9E3124) !important;
    font-weight: bold !important;
  }
  .ginput_complex label,
  .gform-field-label {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-scda-black) !important;
    margin-top: 4px !important;
  }
  .gchoice label {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-scda-black) !important;
    line-height: 1.4 !important;
  }
  .gsection_title {
    font-family: var(--font-heading) !important;
    font-size: 2.125rem !important;
    font-weight: 500 !important;
    line-height: 2.75rem !important;
    letter-spacing: 0.0169rem !important;
    margin: 0 0 0.5rem !important;

    @media screen and (max-width: 768px) {
      font-size: 1.625rem !important;
      line-height: 2.125rem !important;
    }
  }
  .gsection_description {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: color-mix(in srgb, var(--color-scda-black) 75%, transparent) !important;
  }
  .gform_drop_area {
    border-color: var(--color-scda-blue) !important;
    border-radius: var(--border-radius) !important;
    background-color: #fcf7f3 !important;
  }
  .gform_drop_area svg,
  .gform_drop_area::before {
    fill: var(--color-scda-blue) !important;
    color: var(--color-scda-blue) !important;
  }
  .gform_button_select_files {
    background-color: var(--color-scda-blue) !important;
    color: var(--color-white) !important;
    border-color: var(--color-scda-blue) !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    transition: 0.2s ease-in-out !important;

    &:hover,
    &:focus-visible {
      background-color: var(--color-scda-midnight) !important;
      border-color: var(--color-scda-midnight) !important;
    }
  }
  .gfield_fileupload_progressbar_progress {
    background-color: var(--color-scda-blue) !important;
  }
  .gfield_fileupload_progress_complete .gfield_fileupload_progressbar_progress {
    background-color: var(--color-scda-grass) !important;
  }
  .gfield_fileupload_progress_complete .gfield_fileupload_percent {
    color: var(--color-scda-grass) !important;
  }
  .gfield_fileupload_progress_complete::before,
  .gfield_fileupload_progress_complete::after {
    color: var(--color-scda-grass) !important;
    fill: var(--color-scda-grass) !important;
  }
}
#mc_embed_shell {
  max-width: 500px;
  margin-top: 40px;

  @media screen and (max-width: 768px) {
    margin-top: var(--spacing-sm);
  }
  #mc_embed_signup {
    + p {
      margin: 0;
    }
  }
  .indicates-required {
    display: none;
  }
  .mc-field-group {
    margin-bottom: 20px;

    input, label {
      width: 100%;
      font-family: var(--font-primary) !important;
    }
    label {
      display: block;
      font-size: 0.85rem !important;
      line-height: 1.2 !important;
      font-weight: 400 !important;
      color: #7c7e77 !important;
      margin-bottom: 8px !important;
    }
    .asterisk {
      font-size: 0.85rem !important;
      line-height: 1.2 !important;
      font-weight: 400 !important;
      color: var(--color-scda-tomato) !important;
      margin-left: -2px !important;
    }
  }
  input[type="submit"] {
    margin-top: 4px;
  }
}
.gform-theme--foundation .gform_fields {
  row-gap: 20px !important;
}
.gfield_validation_message {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--color-scda-tomato) !important;
  margin-top: 8px !important;
}
.gform_validation_errors {
  outline: none !important;
  background-color: var(--color-scda-tomato) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  padding: 12px 20px !important;
  margin-bottom: 30px !important;

  h2.gform_submission_error {
    color: var(--color-white) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    .gform-icon--circle-error {
      width: 24px !important;
      height: 24px !important;

      &:before {
        content: "" !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("../../assets/svg/warning.svg") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
      }
    }
  }
}
.gform-theme--framework .gform_validation_errors .gform_submission_error {
  align-items: center !important;
  flex-direction: row !important;
}
.gform_confirmation_message {
  background-color: var(--color-scda-grass) !important;
  border-radius: var(--border-radius) !important;
  padding: 12px 20px 12px 52px !important;
  color: var(--color-white) !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  position: relative !important;

  &:before {
    content: "" !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("../../assets/svg/check-white.svg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: absolute;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
  }
}

.ginput_container_date {
  min-width: 100% !important;
}
.gform-datepicker {
  width: 50% !important;
}

@media (max-width: 992px) {
  .gform-datepicker {
    width: 100% !important;
  }
}

/* ========================================
   TABLES
   ======================================== */

/* Table wrapper for horizontal scrolling */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #d0d4d8;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #71808a;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--color-scda-blue);
}

table {
  border: none;
  border-collapse: collapse;
  width: 100%;
  min-width: 600px; /* Minimum width to ensure proper layout */

  thead {
    tr {
      position: relative;

      &:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-scda-black);
        position: absolute;
        bottom: 0px;
        left: 0;

        @media screen and (max-width: 576px) {
          height: 2px;
          background-color: var(--color-scda-blue);
        }
      }
    }
    td,
    th {
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.15px;
      padding: 0 0 12px 0;
      border: none;
      text-align: left;

      @media screen and (max-width: 576px) {
        width: 100%;
      }
      &:last-of-type {
        @media screen and (max-width: 576px) {
          display: none;
        }
      }
    }
  }
  tbody {
    tr {
      &:nth-of-type(even) {
        background-color: #fcf7f3;
      }
      td {
        padding: 12px;
        vertical-align: top;
        border: none;

        @media screen and (max-width: 576px) {
          width: 100%;
          padding: 16px 12px;
        }
        p {
          margin: 0;
        }
        a {
          color: var(--color-scda-tan);
          transition: 0.2s ease-in-out;

          &:hover,
          &:focus-visible {
            text-decoration: none;
          }
          &[href^="tel:"],
          &[href^="mailto:"] {
            word-break: break-all;
          }
        }
      }
    }
  }
}

/* ========================================
   GRAVITY FORMS SPACING
   ======================================== */

/* Add proper spacing for Gravity Forms after hero sections */
.entry-content .gform_wrapper {
  margin-top: var(--spacing-xl);
  
  @media screen and (min-width: 992px) {
    margin-top: 80px;
  }
}