/*
Theme Name: Your Client Name
Theme URI: https://www.splust.com/
Author: Stephenson & Taylor
Version: 1.0.0
Requires at least: 6.8
Tested up to: 6.9
Text Domain: your-client-name
*/

/* 
===========================================================
Global
===========================================================
*/

/* How can I hide the WordPress admin bar? */

html {
  scroll-behavior: smooth;
}

html * {
  box-sizing: border-box;
}

body {
  font-family: var(--secondaryFont);
  font-size: 18px;

  &.noScroll {
    /* prevent the page from being scrolled while the mobile nav is open */
    overflow: hidden;
  }
}

:root {
  --maxSiteWidth: 1600px;
}

.siteWidth {
  max-width: var(--maxSiteWidth);
}

/* 
===========================================================
Viewport Breakpoints
===========================================================
*/

/*
  NOTE: These custom properties are the single source of truth for breakpoints,
  but CSS variables CANNOT be used inside @media conditions (the spec resolves
  media queries before var() substitution). In @media rules, use the literal
  px value below and reference the token name in a comment, e.g.:

  @media (min-width: 1024px) { ... }  // --mediumVw

  Keep these literals in sync with the values here.

  --xxSmallVw   480px
  --xSmallVw    640px
  --smallVw     768px
  --mediumVw   1024px
  --largeVw    1280px
  --xLargeVw   1536px
  --xxLargeVw  1920px
*/

:root {
  --xxSmallVw: 480px;
  --xSmallVw: 640px;
  --smallVw: 768px;
  --mediumVw: 1024px;
  --largeVw: 1280px;
  --xLargeVw: 1536px;
  --xxLargeVw: 1920px;
}

/* 
===========================================================
Scaffolding
===========================================================
*/

.module {
  position: relative;

  /* Module Background Color (Global Module Option) */
  &.moduleBackgroundColorWhite { background-color: var(--white); }
  &.moduleBackgroundColorBlack { background-color: var(--black); }
  &.moduleBackgroundColorGrey { background-color: var(--grey); }

  /* Module Border (Global Module Option) */
  &.moduleBorderTopBottom { border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }
  &.moduleBorderTop { border-top: 2px solid var(--black); }
  &.moduleBorderBottom { border-bottom: 2px solid var(--black); }

  &.moduleBackgroundColorBlack {
    .h1, h2, h3, h4, h5, h6, ol, ul, p {
      color: var(--white);
    }
  }
}

.innerWrapper {
  width: 100%;
  max-width: var(--maxSiteWidth);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;

  &.fullWidth { max-width: none; }

  &.module {
    padding: min(10vw, 100px) min(5vw, 50px);

    /* Module Padding (Global Module Option) */
    &.modulePaddingNone { padding: 0 min(5vw, 50px); }
    &.modulePaddingTopBottomOnly { padding: min(10vw, 100px) 0; }
    &.modulePaddingTopOnly { padding: min(10vw, 100px) min(5vw, 50px) 0 min(5vw, 50px); }
    &.modulePaddingBottomOnly { padding: 0 min(5vw, 50px) min(10vw, 100px) min(5vw, 50px); }
  }
}

/* 
===========================================================
Arrangement
===========================================================
*/

:root {
  --arrangeFront: 3;
  --arrangeMiddle: 2;
  --arrangeBack: 1;
}

/* 
===========================================================
Transitions
===========================================================
*/

:root {
  --transitionLinearSlow: cubic-bezier(0.65,0.05,0.36,1) 0.25s;
  --transitionLinear: cubic-bezier(0.65,0.05,0.36,1) 0.5s;
  --transitionLinearFast: cubic-bezier(0.65,0.05,0.36,1) 0.1s;
  --transitionExpoSlow: cubic-bezier(0.65,0.05,0.36,1) 0.25s;
  --transitionExpo: cubic-bezier(0.65,0.05,0.36,1) 0.5s;
  --transitionExpoFast: cubic-bezier(0.65,0.05,0.36,1) 1s;
}

/* 
===========================================================
Colors
===========================================================
*/

:root {
  /* Set global color variables here */
  --white: #FFFFFF;
  --black: #000000;
  --grey: #F1F1F1;
  /* Add additional color variables here */
  --green: #65BC28;
  --charcoal: #231F20;
}

/* 
===========================================================
Fonts
===========================================================
*/

:root {
  /* Set global font variables here */
  --primaryFont: 'Fira Sans', sans-serif;
  --secondaryFont: 'Carlito', sans-serif;
}

.primaryFont { font-family: var(--primaryFont); }
.secondaryFont { font-family: var(--secondaryFont); }

h1, h2, h3, h4, h5, h6 {
  color: var(--black);
  font-family: var(--primaryFont);
  line-height: 1.25em;
  text-transform: none; /* Global heading casing (uppercase | none) */
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 15px;
}

p {
  font-family: var(--secondaryFont);
  line-height: 1.5em;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 15px;

  strong {
    font-weight: 700;
  }
}

.eyebrow {
  font-size: 18px;
  color: var(--green);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.uppercase { text-transform: uppercase; }
.titlecase { text-transform: capitalize; }

.fontWeight100 { font-weight: 100; }
.fontWeight200 { font-weight: 200; }
.fontWeight300 { font-weight: 300; }
.fontWeight400 { font-weight: 400; }
.fontWeight500 { font-weight: 500; }
.fontWeight600 { font-weight: 600; }
.fontWeight700 { font-weight: 700; }
.fontWeight800 { font-weight: 800; }
.fontWeight900 { font-weight: 300; }

/* 
===========================================================
Responsive Font Sizes
===========================================================
*/

:root {
  --h1min: 35px; --h1max: 50px;
  --h2min: 30px; --h2max: 40px;
  --h3min: 25px; --h3max: 30px;
  --h4min: 20px; --h4max: 20px;
  --h5min: 18px; --h5max: 18px;
  --h6min: 16px; --h6max: 16px;
}

/* Responsive font sizing is based on a min viewport size of 500px and max viewport size of 1920px. */

h1, .h1FontSize { font-size: clamp(var(--h1min), calc(29.72px + 1.06vw), var(--h1max)); }
h2, .h2FontSize { font-size: clamp(var(--h2min), calc(5.35px + 4.93vw), var(--h2max)); }
h3, .h3FontSize { font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max)); }
h4, .h4FontSize { font-size: var(--h4min); } /* min == max, no scaling */
h5, .h5FontSize { font-size: var(--h5min); } /* min == max, no scaling */
h6, .h6FontSize { font-size: var(--h6min); } /* min == max, no scaling */

/* 
===========================================================
Rounded Corners
===========================================================
*/

:root {
  /* Scale with viewport, reaching max values at ~1440px */
  --radiusLarge: clamp(40px, 6.95vw, 100px);
  --radius: clamp(20px, 2.45vw, 35px);
  --radiusSmall: clamp(15px, 1.75vw, 25px);

  --roundedCornersLarge: var(--radiusLarge) 0 var(--radiusLarge) 0;
  --roundedCorners: var(--radius) 0 var(--radius) 0;
  --roundedCornersSmall: var(--radiusSmall) 0 var(--radiusSmall) 0;
}

.noRoundedCorners {
  border-radius: 0 !important;
}

/* 
===========================================================
Images
===========================================================
*/

img {
  display: block;
  max-width: 100%;

  &.heightFull { height: 100%; }
  &.widthFull { width: 100%; }
  &.objectFitContain { object-fit: contain !important; }
  &.objectFitCover { object-fit: cover !important; }
  &.objectPositionTopLeft { object-position: top left; }
  &.objectPositionTopCenter { object-position: top center; }
  &.objectPositionTopRight { object-position: top right; }
  &.objectPositionCenterLeft { object-position: center left; }
  &.objectPositionCenterCenter { object-position: center center; }
  &.objectPositionCenterRight { object-position: center right; }
  &.objectPositionBottomLeft { object-position: bottom left; }
  &.objectPositionBottomCenter { object-position: bottom center; }
  &.objectPositionBottomRight { object-position: bottom right; }
}

/* 
===========================================================
Button Group
===========================================================
*/

.btnGroup {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  &.noMarginTop { margin-top: 0px; }
  &.extraMarginTop { margin-top: 35px; }
}

/* 
===========================================================
Forms
===========================================================
*/

:root {
  --fieldBackground: var(--black);
  --fieldColor: var(--white);
  --fieldBorderColor: var(--white);
  --fieldPaddingY: 15px;
  --fieldPaddingX: 20px;
  --fieldArrowWidth: 14px;
  --fieldGapY: 15px;
  --fieldGapX: 15px;
  --fieldArrowGreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M13 1.00011C13 1.00011 8.5811 7.00006 7 7.00006C5.4188 7.00006 1 1.00006 1 1.00006' stroke='%65BC28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fieldArrow: var(--fieldArrowGreen);
}

form {
  font-family: var(--secondaryFont);
  color: var(--fieldColor);

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  legend,
  label {
    display: block;
    font-family: var(--secondaryFont);
    font-weight: 600;
    color: var(--fieldColor);
    margin-bottom: 5px;
  }

  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    padding: var(--fieldPaddingY) var(--fieldPaddingX);
    border-left: 2px solid var(--fieldBorderColor);
    border-right: 2px solid var(--fieldBorderColor);
    border-top: none;
    border-bottom: 2px solid var(--fieldBorderColor);
    border-radius: 0;
    background-color: var(--fieldBackground);
    color: var(--fieldColor);
    font-family: var(--secondaryFont);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;

    &::placeholder {
      color: var(--fieldColor);
      opacity: 1;
    }

    &:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 0;
    }

    &:disabled,
    &[readonly] {
      background-color: var(--dGrey);
      cursor: not-allowed;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: var(--fieldColor);
    -webkit-box-shadow: 0 0 0 1000px var(--fieldBackground) inset;
  }

  textarea {
    display: block;
    min-height: 150px;
    resize: vertical;
  }

  select {
    width: auto;
    background-image: var(--fieldArrow);
    background-repeat: no-repeat;
    background-position: right var(--fieldPaddingX) center;
    padding-right: calc(var(--fieldPaddingX) * 2 + var(--fieldArrowWidth));
    text-overflow: ellipsis;
    cursor: pointer;
  }

  select.widthFull { width: 100%; }

  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    padding: 0;
    accent-color: var(--yellow);
    cursor: pointer;
  }

  input[type="file"] {
    padding: calc(var(--fieldPaddingY) - 5px) var(--fieldPaddingX);
    cursor: pointer;
  }

  /* .btn is excluded so the shared button styling below is not outgunned by
     these (higher specificity) field selectors. */
  input[type="submit"]:not(.btn),
  button:not(.btn) {
    width: auto;
    cursor: pointer;
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    display: inline-block;
    font-weight: 400;
    margin: 0 0 0 7px;
  }
}

/*
===========================================================
Gravity Forms
===========================================================
*/

.gform_wrapper.gform_wrapper.gravity-theme.gravity-theme {
  .gform_fields { gap: var(--fieldGapY) var(--fieldGapX); }

  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
    padding: var(--fieldPaddingY) var(--fieldPaddingX);
    border: 2px solid var(--fieldBorderColor);
    border-radius: 0;
    background-color: var(--fieldBackground);
    color: var(--fieldColor);
    font-family: var(--secondaryFont);
    font-size: 18px;
    line-height: 1.5em;
  }

  select {
    width: auto;
    background-image: var(--fieldArrow);
    background-repeat: no-repeat;
    background-position: right var(--fieldPaddingX) center;
    padding-right: calc(var(--fieldPaddingX) * 2 + var(--fieldArrowWidth));
  }

  textarea { padding: var(--fieldPaddingY) var(--fieldPaddingX); }

  /* GF's blanket padding hits these too, collapsing the native control. */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    padding: 0;
    accent-color: var(--yellow);
  }

  .gfield_label {
    font-family: var(--secondaryFont);
    font-weight: 600;
    color: var(--fieldColor);
  }

  /* The submit button is rebuilt as a theme .btn in functions.php
     (gform_submit_button), so all that's left here is laying the footer out
     and keeping the ajax spinner beside it rather than under it. */
  .gform_footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: var(--fieldGapY) 0 0;
  }

  .gform_footer .btn { width: auto; }
  .gform_ajax_spinner { margin: 0; }
}

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: min(5vw, 25px) min(5vw, 50px);
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: space-between;
  z-index: calc(var(--arrangeFront) + 3);

  .innerWrapper {
    flex-direction: row;
    justify-content: space-between;
    /* padding: 0 min(5vw, 50px); */

    .headerLogo {
      display: flex;
      align-items: center;
      gap: 25px;

      img {
        max-width: 225px;
      }
    }

    .headerNav {
      display: flex;
      align-items: center;
      gap: 35px;

      nav {
        display: none;

        @media(min-width: 768px) {
          display: flex;
          align-items: center;
          gap: 35px;
        }

        ul {
          display: none;

          @media(min-width: 1280px) {
            display: flex;
            align-items: center;
            gap: 25px;
            list-style: none;
            padding: 0;
          }

          li {
            a {
              transition: all var(--transitionLinearFast);
              font-family: var(--primaryFont);
              text-decoration: none;
              color: var(--white);

              &:hover {
                color: var(--green);
              }
            }
          }
        }

        .headerButtons {
          margin: 0;
        }
      }

      .navToggle {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        &:focus-visible {
          outline: none;
        }
      }
    }
  }
}

/*
===========================================================
Footer
===========================================================
*/

.footer {
  position: relative;
  background-color: var(--black);
  color: var(--white);

  .topAccent {
    position: absolute;
    z-index: var(--arrangeFront);
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
  }

  .backgroundOverlay {
    position: absolute;
    z-index: var(--arrangeMiddle);
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
  }

  .backgroundImage {
    position: absolute;
    z-index: var(--arrangeBack);
    width: 100%;
    height: 100%;

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

  .innerWrapper {
    position: relative;
    padding: min(5vw, 50px);
    z-index: calc(var(--arrangeFront) + 1);

    .innerContent {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 25px;

      @media(min-width: 1280px) {
        flex-direction: row;
        justify-content: space-between;
        gap: 50px;
      }

      .left,
      .right {
        width: 100%;

        @media(min-width: 1280px) {
          width: 50%;
        }
      }

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 25px;

        .logo {
          img {
            position: relative;
          }
        }

        .companyName {
          font-size: 20px;
          font-weight: 500;
        }

        .companyContactLinks {
          display: flex;
          flex-direction: column;
          gap: 15px;
          border-top: 2px solid var(--green);
          padding: 25px 0 0 0;

          @media(min-width: 768px) {
            flex-direction: row;
            gap: 25px;
            padding: 25px 0;
            border-bottom: 2px solid var(--white);
          }

          .link {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--white);
            text-decoration: none;
            font-size: 18px;
            font-weight: 400;
            transition: var(--transitionLinearFast);

            &:hover {
              color: var(--green);
            }

            svg {
              position: relative;
            }
          }
        }
      }

      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .rightInnerWrapper {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          border: 2px solid var(--white);
          border-radius: var(--roundedCornersSmall);
          width: 100%;

          @media(min-width: 768px) {
            flex-direction: row;
          }


          @media(min-width: 1280px) {
            width: auto;
          }

          .footerNav {
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            @media(min-width: 768px) {
              flex-direction: row;
            }

            @media(min-width: 1280px) {
              flex-grow: 0;
            }

            .column {
              flex-grow: 1;
              list-style: none;
              margin: 0;
              padding: 35px 25px 0 25px;

              @media(min-width: 768px) {
                padding: 35px 25px;
              }

              @media(min-width: 1280px) {
                flex-grow: 0;
                padding: 35px 25px;
                border-right: 2px solid var(--white);
              }

              .title {
                font-size: 18px;
                font-weight: 600;
                font-family: var(--primaryFont);
                border-bottom: 2px solid var(--green);
                padding-bottom: 15px;
                margin-bottom: 15px;
              }

              .link {
                margin-bottom: 5px;

                a {
                  font-size: 16px;
                  text-decoration: none;
                  color: var(--white);
                  font-family: var(--secondaryFont);
                  transition: var(--transitionLinearFast);

                  &:hover {
                    color: var(--green);
                  }
                }
              }
            }
          }

          .socialMediaPlatforms {
            display: flex;
            flex-direction: row;
            gap: 15px;
            padding: 35px 25px;

            @media(min-width: 768px) {
              flex-direction: column;
            }

            .platform {
              &:hover {
                .icon {
                  top: -5px;
                }
              }

              .icon {
                transition: var(--transitionExpo);
                position: relative;
                top: 0;
              }

              .title {
                position: relative;
              }
            }
          }
        }
      }

      .legal {
        display: none;
        gap: 25px;

        @media(min-width: 768px) {
          display: flex;
          justify-content: space-between;
        }

        &.mobile {
          display: flex;
          flex-direction: column;

          @media(min-width: 768px) {
            display: none;
          }
        }

        .copyright {
          font-size: 16px;
          font-weight: 400;
        }

        .legalLinks {
          display: flex;
          gap: 25px;

          a {
            text-decoration: none;
            color: var(--green);
            font-size: 16px;
            font-weight: 400;
            transition: var(--transitionLinearFast);

            &:hover {
              color: var(--white);
            }
          }
        }
      }
    }
  }
}

/*
===========================================================
Product Archive (archive-product.php)
===========================================================
*/

.productArchive {
  .innerWrapper {
    align-items: flex-start;
    gap: clamp(25px, 3vw, 35px);

    .title {
      color: var(--white);
      font-size: 28px;
    }

    .productGrid {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(24px, 3vw, 40px);

      @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); }
      @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); }

      .productCard {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 350px;
        border-radius: var(--roundedCorners);
        border: 2px solid var(--white);
        overflow: hidden;
        transition: var(--transitionExpo);

        &:hover {
          border-radius: calc(var(--radius) + 10px);

          .image {
            transform: scale(1.1);
          }

          svg {
            .circle { fill: var(--green); }
            .arrow { fill: var(--black); }
          }
        }

        .overlay {
          position: absolute;
          left: 0;
          right: 0;
          height: 100%;
          width: 100%;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
          z-index: var(--arrangeMiddle);
          pointer-events: none;
        }

        .image {
          position: relative;
          display: block;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          background-color: var(--grey);
          z-index: var(--arrangeBack);
          transition: var(--transitionExpo);

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

        .content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 25px;
          z-index: var(--arrangeFront);
          pointer-events: none;

          .productTitle {

          }

          .productLink {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--white);
          }
        }

        .productTitle {
          margin: 20px 0;
          font-size: 24px;
        }

        .btn {
          margin-top: auto;
        }
      }
    }
  }
}