/**
 *
 * Landing page styles
 *
*/

.landing {
  overflow-x: hidden;
  min-width: 320px;

  &.sp-dialog-open {
    overflow: hidden;
  }
  --landing-accent: #f02e24;
  --landing-accent-hover: #c61f17;
  --landing-white: #ffffff;
  --landing-dark-green: #383838;
  --landing-grey: #e6e6e6;
  --landing-black-alt: #171a21;
  --landing-black: #121419;
  --landing-slate: #4f5a68;
  --container-width: 75rem;
  --container-inner-width: 60rem;
  --container-padding: 1.25rem;
  --global-spacing: 4rem;

  @media all and (min-width: 48rem) {
    --container-padding: 2.5rem;
  }

  @media all and (min-width: 64rem) {
    --global-spacing: 6.25rem;
  }

  @media all and (min-width: 75rem) {
    --container-padding: 4.375rem;
  }

  * {
    font-family: 'Roboto', sans-serif;
  }

  h1 {
    font-size: clamp(3.3125rem, 4.125vw + 2.075rem, 5.375rem);
    line-height: 1.05;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: clamp(2.3125rem, 2.875vw + 1.45rem, 3.75rem);
    line-height: 1.1;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: clamp(1.5625rem, 1.875vw + 1rem, 2.5rem);
    line-height: 1.2;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  h4 {
    font-size: clamp(1.1875rem, 1.375vw + 0.775rem, 1.875rem);
    line-height: 1.25;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  h6 {
    font-size: 1rem;
    line-height: 1.35;
    text-transform: none;
    padding: 0;
    margin-bottom: 1rem;
  }

  p {
    color: var(--landing-black);
    padding: 0;
    margin-bottom: 1rem;

    strong {
      font-weight: 700;
    }
  }

  .btn {
    display: inline-block;
    padding: 0.75em 1.75em;
    background: var(--landing-accent);
    color: var(--landing-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
      background: var(--landing-accent-hover);
    }
  }

  .container {
    width: auto;
    max-width: var(--container-width);
    padding: 0 var(--container-padding);
  }

  .container-inner {
    width: auto;
    max-width: var(--container-inner-width);
    margin: auto;
  }

  section {
    width: 100%;
    position: relative;
  }

  ul {
    color: var(--landing-black);
    list-style-type: disc;
    padding: 0 0 0 1rem;

    li {
      color: var(--landing-black);
    }
  }

  ol {
    color: var(--landing-black);
    list-style-type: decimal;
    padding: 0 0 0 1rem;

    li {
      color: var(--landing-black);
    }
  }

  /** ---- Header ---- **/

  .landing-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    background-color: transparent;
    border-color: transparent;
    transition: background-color 0.3s ease;

    &.scrolled {
      border-color: #e81c11;
      background-color: var(--landing-black-alt);
    }

    .container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-logo {
      img {
        display: block;
        width: auto;
        height: 100%;
        max-width: 90%;
      }
    }

    .header-toggle {
      display: none;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      margin: 0 0 0 auto;

      span {
        display: block;
        width: 26px;
        height: 2px;
        margin: 0 auto;
        background-color: var(--landing-white);
        transition:
          transform 0.3s ease,
          opacity 0.3s ease;
      }
    }

    .header-nav {
      margin-left: auto;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        gap: 2rem;
      }

      a {
        color: var(--landing-white);
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.2s ease;

        &:hover,
        &:focus {
          opacity: 0.7;
        }
      }
    }

    @media all and (max-width: 73.6875rem) {
      .header-toggle {
        display: flex;
      }

      .header-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--landing-black-alt);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;

        ul {
          flex-direction: column;
          gap: 0;
          padding: 2rem var(--container-padding) 1rem;
        }

        li {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        a {
          display: block;
          padding: 1rem 0;
        }
      }

      &.nav-open {
        background-color: var(--landing-black-alt);

        .header-nav {
          max-height: 80vh;
        }

        .header-toggle {
          span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
          }

          span:nth-child(2) {
            opacity: 0;
          }

          span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
          }
        }
      }
    }
  }

  /** ---- Header End ---- **/

  /** ---- Hero ---- **/

  .hero {
    position: relative;
    height: 60vh;
    min-height: 25rem;
    padding: 4rem 0;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
    color: var(--landing-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, var(--landing-overlay-opacity, 0));
      pointer-events: none;
    }

    .container {
      position: relative;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
      margin: 0 0 1rem;
      text-transform: none;
    }

    ul {
      list-style: none;
      margin: 2rem 0 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;

      li {
        display: inline-flex;
      }
    }
  }

  /** ---- Hero End ---- **/

  /** ---- Service Providers ---- **/

  .service-providers {
    padding: var(--global-spacing) 0;

    .service-providers-wrap {
      margin: 0;

      @media all and (min-width: 64rem) {
        margin: 0 -2rem;
        align-items: center;
      }
    }

    .half-col {
      margin-bottom: 2rem;

      @media all and (min-width: 64rem) {
        margin-bottom: 0;
      }

      .text-col-inner,
      .map-col-inner {
        @media all and (min-width: 64rem) {
          margin: 0 2rem;
        }
      }
    }

    .text-col-inner {
      ul {
        list-style: none;
        margin: 0 0 1.875rem;
        padding: 0;

        li {
          position: relative;
          padding-left: 2rem;
          margin-bottom: 0.625rem;
          line-height: 1.667;

          &:last-child {
            margin-bottom: 0;
          }

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.25em;
            width: 1.125rem;
            height: 1.125rem;
            background: url('../img/tick.png') no-repeat center / contain;
          }
        }
      }
    }

    .map-col-inner {
      .service-providers-map {
        max-width: 30rem;
        margin: 0 auto;

        svg {
          display: block;
          width: 100%;
          height: auto;

          path {
            fill: var(--landing-black-alt);
            stroke: rgba(255, 255, 255, 0.15);
            stroke-width: 0.75;
            transition: fill 0.2s ease;
          }

          path.has-providers {
            cursor: pointer;

            &:hover,
            &:focus {
              fill: var(--landing-accent);
              outline: none;
            }
          }

          .sp-dot {
            fill: var(--landing-accent);
            pointer-events: none;
          }
        }
      }

      .map-caption {
        text-align: center;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--landing-dark-green);
        margin: 1.5rem 0 0;

        .caption-tap {
          display: none;
        }

        @media all and (pointer: coarse) {
          .caption-click {
            display: none;
          }

          .caption-tap {
            display: inline;
          }
        }
      }
    }
  }

  .service-providers-data {
    display: none;
  }

  .service-providers-dialog {
    width: min(92vw, 37.5rem);
    max-height: 80vh;
    padding: 2.5rem;
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--landing-dark-green);
    @media all and (min-width: 64rem) and (min-height: 50vh) {
      max-height: 400px;
    }

    /* Only render when open so flex layout doesn't apply to [hidden] dialog. */
    &[open] {
      display: flex;
      flex-direction: column;
    }

    &::backdrop {
      background: rgba(0, 0, 0, 0.7);
    }

    .dialog-body {
      overflow-y: auto;
    }

    .dialog-close {
      position: absolute;
      top: 0.625rem;
      right: 0.625rem;
      width: 1.875rem;
      height: 1.875rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--landing-accent);
      color: var(--landing-white);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      transition: background-color 0.2s ease;

      &:hover,
      &:focus {
        background: var(--landing-accent-hover);
      }
    }

    .dialog-heading {
      flex: 0 0 auto;
      font-size: 1.625rem;
      font-weight: 700;
      line-height: 1.4;
      margin: 0 0 1.25rem;
      padding: 0 2rem 1.25rem 0;
      border-bottom: 1px solid var(--landing-grey);
    }

    .provider {
      padding: 1.25rem 0;
      border-top: 1px solid var(--landing-grey);

      &:first-child {
        border-top: 0;
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
      }

      .provider-name {
        color: var(--landing-accent);
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.667;
        margin: 0 0 0.25rem;
      }

      p {
        font-size: 1rem;
        line-height: 1.75;
        margin: 0 0 0.25rem;
      }

      .provider-directions {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-size: 1rem;
        line-height: 1.75;
        color: inherit;
        text-decoration: underline;
      }

      .provider-contact {
        line-height: 1.5;

        a {
          color: inherit;
          text-decoration: none;
        }
      }
    }
  }

  /** ---- Service Providers End ---- **/

  /** ---- Content Halves ---- **/

  .content-halves {
    &.dark {
      .content-halves-inner {
        background-color: var(--landing-dark-green);

        .half-col {
          &.text-col {
            .text-col-inner {
              color: var(--landing-white);
            }
          }
        }
      }
    }

    &.light {
      .content-halves-inner {
        .half-col {
          &.text-col {
            .text-col-inner {
              color: var(--landing-dark-green);
            }
          }
        }
      }
    }

    &.reversed {
      .content-halves-inner {
        @media all and (min-width: 64rem) {
          flex-direction: row-reverse;
        }
        .half-col {
          &.text-col {
            .text-col-inner {
              @media all and (min-width: 83.75rem) {
                padding: 6rem calc((100vw - var(--container-width)) / 2) 6rem var(--container-padding);
              }
            }
          }
        }
      }
    }

    .content-halves-inner {
      .half-col {
        &.text-col {
          .text-col-inner {
            padding: 5rem var(--container-padding);
            @media all and (min-width: 64rem) {
              display: flex;
              height: calc(100% - 10rem);
              flex-direction: column;
              justify-content: center;
            }

            @media all and (min-width: 83.75rem) {
              height: calc(100% - 12rem);
              padding: 6rem var(--container-padding) 6rem calc((100vw - var(--container-width)) / 2);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            ol li,
            ul li,
            p,
            p a {
              color: inherit;
            }
          }
        }

        &.image-col {
          figure {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            @media all and (min-width: 64rem) {
              width: 100%;
              height: 100%;

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

            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
  /** ---- Content Halves End ---- **/

  /** ---- Contact ---- **/

  .contact {
    background-color: var(--landing-grey);

    .contact-inner {
      padding: var(--global-spacing) 0;

      > .container > h2 {
        margin-bottom: 2rem;
      }

      .contact-wrap {
        margin: 0;

        @media all and (min-width: 64rem) {
          margin: 0 -2rem;
        }

        .half-col {
          margin-bottom: 2rem;
          @media all and (min-width: 64rem) {
            margin-bottom: 0;
          }

          .contact-col-inner {
            @media all and (min-width: 64rem) {
              margin: 0 2rem;
            }
          }

          &.form-col {
            .form-col-inner {
              background-color: var(--landing-white);
              padding: 2rem;

              @media all and (min-width: 48rem) {
                padding: 3rem;
              }
            }
          }

          &.details-col {
            .details-col-inner {
              padding: 0;

              @media all and (min-width: 64rem) {
                padding: 0 0 0 1rem;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }

              .detail-block {
                margin-bottom: 1.5rem;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                  margin: 0 0 0.25rem;
                }

                p {
                  margin: 0 0 0.25rem;
                }

                p:last-child {
                  margin-bottom: 0;
                }
              }

              .map {
                margin-top: 2rem;
                aspect-ratio: 4 / 3;
                width: 100%;

                iframe {
                  display: block;
                  width: 100%;
                  height: 100%;
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  /** ---- Contact End ---- **/

  /** ---- Logo Grid ---- **/

  .logo-grid {
    background-color: var(--landing-accent);

    .logo-grid-inner {
      padding: var(--global-spacing) 0;
      color: var(--landing-white);

      .logo-grid-intro {
        text-align: center;
        margin-bottom: 3rem;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ol li,
        ul li,
        p a {
          color: inherit;
        }

        p {
          max-width: var(--container-inner-width);
          margin-left: auto;
          margin-right: auto;
        }
      }

      .logo-grid-wrap {
        @media all and (min-width: 64rem) {
          justify-content: center;
        }

        .card-col {
          padding: 2rem;
          text-align: center;
          box-sizing: border-box;

          .card-inner {
            a {
              display: inline-block;
            }

            figure {
              margin: 0 auto;
              padding: 0;

              img {
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
              }
            }
          }
        }
      }
    }
  }

  /** ---- Logo Grid End ---- **/

  /** ---- Parts Grid ---- **/

  .parts-grid {
    .parts-grid-inner {
      padding: var(--global-spacing) 0;

      .parts-grid-intro {
        text-align: center;
        margin-bottom: 3rem;

        > * {
          margin-left: auto;
          margin-right: auto;
        }

        p {
          max-width: var(--container-inner-width);
        }

        ul {
          list-style: none;
          margin: 2rem 0 0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 0.75rem;
          justify-content: center;

          li {
            display: inline-flex;
          }
        }
      }

      .parts-grid-wrap {
        margin: 0;

        @media all and (min-width: 48rem) {
          margin: 0 -1rem;
        }

        .card-col {
          .card-inner {
            text-align: center;
            box-sizing: border-box;
            margin: 0 0 2rem;

            @media all and (min-width: 48rem) {
              margin: 0 1rem 2rem;
            }

            figure {
              border: 1px solid rgba(56, 56, 56, 0.2);
              margin: 0 0 1rem;
              padding: 2rem;
              aspect-ratio: 1 / 1;
              width: 100%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                display: block;
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
              }
            }

            h6 {
              text-transform: uppercase;
              letter-spacing: 0.05em;
              font-weight: 600;
              color: var(--landing-dark-green);
              margin: 0;
              padding: 0.5rem 0 0;
            }
          }
        }
      }
    }
  }

  /** ---- Parts Grid End ---- **/

  /** ---- Hover Cards ---- **/

  .hover-cards {
    .hover-cards-inner {
      padding: var(--global-spacing) 0;

      > .container > h2 {
        text-align: center;
        margin-bottom: 3rem;
      }

      .hover-cards-wrap {
        margin: 0;

        @media all and (min-width: 48rem) {
          margin: 0 -1rem;
        }

        .card-col {
          .card-inner {
            display: flex;
            flex-direction: column-reverse;
            margin: 0 0 2rem;
            @media all and (min-width: 48rem) {
              flex-direction: column;
              margin: 0 1rem 2rem;
            }
            @media all and (min-width: 48rem) and (pointer: coarse) {
              height: calc(100% - 2rem);
            }

            .card-media {
              position: relative;
              overflow: hidden;
              @media all and (min-width: 48rem) and (pointer: coarse) {
                height: 100%;
                display: flex;
                flex-direction: column;
              }

              > figure {
                margin: 0;
                padding: 0;
                aspect-ratio: 16 / 9;
                width: 100%;
                @media all and (min-width: 48rem) and (pointer: fine) {
                  aspect-ratio: 4 / 3;
                }

                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  aspect-ratio: 16 / 9;
                  @media all and (min-width: 48rem) and (pointer: fine) {
                    aspect-ratio: 4 / 3;
                  }
                }
              }

              .card-hover {
                background-color: rgba(56, 56, 56, 1);
                color: var(--landing-white);
                padding: 2rem 1.5rem 4rem;
                text-align: center;
                @media all and (min-width: 64rem) and (pointer: fine) {
                  padding: 2rem 1.5rem;
                  background-color: rgba(56, 56, 56, 0.8);
                }
                @media all and (min-width: 48rem) and (pointer: coarse) {
                  height: calc(100% - 6rem);
                }

                figure {
                  margin: 0 auto 1rem;
                  padding: 0;

                  img {
                    display: block;
                    height: auto;
                    margin: 0 auto;
                  }
                }

                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                p,
                ol li,
                ul li,
                p a {
                  color: inherit;
                }

                p:last-child {
                  margin-bottom: 0;
                }

                @media all and (min-width: 64rem) and (pointer: fine) {
                  position: absolute;
                  inset: 0;
                  opacity: 0;
                  transition: opacity 0.3s ease;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  padding: 2rem;
                }
              }

              @media all and (min-width: 64rem) and (pointer: fine) {
                &:hover .card-hover,
                &:focus-within .card-hover {
                  opacity: 1;
                }
              }
            }

            > h6 {
              text-align: center;
              text-transform: uppercase;
              letter-spacing: 0.05em;
              font-weight: 600;
              color: var(--landing-dark-green);
              margin: 1rem 0 0;
              padding: 0.5rem 0;
            }
          }
        }
      }
    }
  }

  /** ---- Hover Cards End ---- **/

  /** ---- Cards Grid ---- **/

  .cards-grid {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &.has-bg-image {
      padding-bottom: 8rem;
      @media all and (min-width: 64rem) {
        padding-bottom: 12rem;
      }

      .cards-grid-inner {
        background-color: rgba(240, 46, 36, 0.8);
      }
    }

    .cards-grid-inner {
      background-color: var(--landing-accent);
      padding: 4rem 0;

      .container {
        .cards-grid-wrap {
          margin: 0;
          @media all and (min-width: 48rem) {
            margin: 0 -1rem;
          }

          .card-col {
            .card-inner {
              background-color: var(--landing-white);
              padding: 2.5rem 1.5rem;
              text-align: center;
              box-sizing: border-box;
              margin: 0 1rem 2rem;

              @media all and (min-width: 48rem) {
                height: calc(100% - 2rem);
              }

              figure {
                margin: 0 auto 1rem;
                padding: 0;

                img {
                  display: block;
                  height: auto;
                  margin: 0 auto;
                }
              }

              h5 {
                color: var(--landing-dark-green);
                font-weight: 500;
              }

              p,
              p a {
                color: var(--landing-dark-green);
              }
            }
          }
        }
      }
    }
  }

  /** ---- Cards Grid End ---- **/

  /** ---- Footer ---- **/

  .landing-footer {
    background-color: var(--landing-black-alt);
    background-image: none;
    border: none;
    padding: 3rem 0 2rem;
    text-align: center;

    .footer-logo {
      img {
        display: block;
        margin: 0 auto;
      }
    }

    .footer-social {
      list-style: none;
      margin: 0 0 var(--global-spacing);
      padding: 0.75rem 1rem;
      display: inline-flex;
      gap: 1.25rem;
      background-color: var(--landing-black);

      li {
        display: inline-flex;
      }

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .icon {
        display: block;
        width: 20px;
        height: 20px;
        background-color: var(--landing-slate);
        transition: background-color 0.2s ease;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
      }

      .icon-facebook {
        -webkit-mask-image: url('../img/facebook.svg');
        mask-image: url('../img/facebook.svg');
      }

      .icon-youtube {
        -webkit-mask-image: url('../img/youtube.svg');
        mask-image: url('../img/youtube.svg');
      }

      .icon-instagram {
        -webkit-mask-image: url('../img/instagram.svg');
        mask-image: url('../img/instagram.svg');
      }

      .icon-tiktok {
        -webkit-mask-image: url('../img/tiktok.svg');
        mask-image: url('../img/tiktok.svg');
      }

      a:hover .icon,
      a:focus .icon {
        background-color: var(--landing-white);
      }
    }

    .footer-copyright {
      color: var(--landing-white);
      font-size: 14px;
      margin: 0;
    }
  }

  /** ---- Footer End ---- **/
}