/*
Theme Name: Kent Racing
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: "Oswald", sans-serif;
font-family: "Inter", sans-serif;
[Regular: 400, Medium: 500, SemiBold: 600, Bold: 700, Extra Bold 800]
*/

:root {
  --black: #000000;
  --white: #FFFFFF;
  --lightgray: #F6F6F6;
  --gray: #E4E4E4;
  --darkgray: #B7B7B7;
  --blue: #0A2342;
  --green: #79CB00;

  --site-width: 1290px;
  --toggle-width: 44px;
  --toggle-height: 44px;
  --toggle-bar-height: 0.4rem;
  --toggle-color: var(--white);

  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2M9.5 14.67V9.33c0-.79.88-1.27 1.54-.84l4.15 2.67a1 1 0 0 1 0 1.68l-4.15 2.67c-.66.43-1.54-.05-1.54-.84'/%3E%3C/svg%3E");
}

HTML { scroll-behavior: smooth; }

BODY {
  margin: 0; padding: 0; background-color: var(--white); color: var(--black);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 1rem;
  line-height: 1;
}

IMG { border: 0; max-width: 100%; height: auto; }

A {
  color: var(--green); text-decoration: none; transition: all 0.2s;

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

  &.button, .donate & {
    display: inline-block; border-radius: 0.3125rem;
    border: 0.125rem solid var(--green); box-sizing: border-box;
    padding: 0.69em 1.56em; background: var(--green); color: var(--blue);
    font-weight: 700; font-size: 1rem; line-height: 1; text-align: center;
    text-transform: uppercase; font-family: "Oswald", sans-serif;

    &.outline {
      background: transparent; &:hover { background: transparent; }

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

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

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

.site-width {
  width: var(--site-width); margin: 0 auto;
  @media (max-width: 1340px) { & { width: 96%; } }
}

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 9999; width: 100%; background: var(--blue);
  color: var(--white); font-family: "Oswald", sans-serif; font-weight: 700;
  text-transform: uppercase; transition: background 0.5s;

  BODY.home-page:not(.scroll) & {
    position: fixed; background: transparent;

    &:has(#toggle-menu:checked) {
      background: linear-gradient(to right, transparent, var(--blue) 50%, transparent 100%);
    }
  }

  @media (max-width: 750px) { & { position: relative; } }

  SECTION { display: flex; justify-content: space-between; align-items: center; }
}

#logo { margin: 40px 0; line-height: 1; IMG { width: 190px; } }

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; cursor: pointer;
    width: var(--toggle-width); height: var(--toggle-height);
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) / 2 - (var(--toggle-bar-height) / 2)), var(--toggle-color) var(--toggle-bar-height), var(--toggle-color) calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent); transition: all 0.3s ease-in-out;

    @media (max-width: 900px) { & { display: block; margin-left: auto; } }

    &:before, &:after {
      content: ""; width: 100%; height: var(--toggle-bar-height);
      background: var(--toggle-color); position: absolute;
      top: calc(50% - (var(--toggle-bar-height) * 2.5)); left: 0;
      transition: all 0.15s ease-in-out;
    }

    &:after { top: calc(50% + (var(--toggle-bar-height) * 1.5)); }

    + NAV {
      @media (max-width: 900px) { & {
        position: absolute; top: -9999999px; left: 0; width: 100%;
        background: var(--blue); transition: background 0.5s;

        BODY.home-page:not(.scroll) & {
          background: linear-gradient(to right, transparent, var(--blue) 50%, transparent 100%);
        }
      } }

      UL {
        display: flex; justify-content: flex-end; gap: 1.5rem 3em; margin: 0;
        padding: 0; list-style-type: none; transition: background 0.5s;

        @media (max-width: 900px) { & {
          flex-direction: column; padding-bottom: 2rem; font-size: 2rem;
        } }

        LI {
          position: relative;

          @media (max-width: 900px) { & { text-align: center; } }

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

          A {
            display: flex; justify-content: center; flex-direction: column;
            height: 100%; color: var(--white); &:hover { color: var(--green); }
            white-space: nowrap;
          }

          &.donate A {
            color: var(--blue);

            @media (max-width: 900px) { & {
              display: inline-block; font-size: 1.5rem;
            } }
          }

          UL {
            display: none; flex-direction: column; gap: 0; position: absolute;
            top: 100%; left: 0; font-size: 90%; text-transform: none;
            box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.25);

            LI:not(.no-sub):hover & { display: flex; }

            @media (min-width: 901px) {
              &:before {
                content: ''; display: block; width: 31px; height: 15px;
                translate: 1rem 0; background: var(--white);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
              }
            }

            @media (max-width: 900px) { LI:not(.no-sub) & {
              display: flex; position: static; padding: 0; box-shadow: none;
            } }

            LI {
              padding: 0;

              &.footer-only { display: none; }

              @media (min-width: 901px) {
                background: var(--white);
                &:first-of-type { padding-top: 0.6em; }
                &:last-of-type { padding-bottom: 0.6em; }
              }

              A {
                display: block; padding: 0.6em 1.38em; white-space: nowrap;
                color: var(--black);

                @media (max-width: 900px) { & {
                  color: var(--white); &:hover { color: var(--green); }
                  white-space: wrap; padding: 1rem 0 0;
                } }

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

                  @media (max-width: 900px) { & {
                    color: var(--white); &:hover { color: var(--green); }
                  } }
                }
              } /* NAV UL LI UL LI A */
            } /* NAV UL LI UL LI */
          } /* NAV UL LI UL */
        } /* NAV UL LI */
      } /* NAV UL */
    } /* NAV */
  }

  &:checked + LABEL {
    background: transparent;

    &:before, &:after { top: 50%; translate: 0 -50%; rotate: 45deg; }

    &:after { rotate: -45deg; }

    + NAV { top: 100%; }
  }
}

/* FOOTER */
FOOTER {
  padding: 3.75rem 0 2rem; background: var(--blue); color: var(--white);

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

  .site-width {
    display: flex; justify-content: flex-end; gap: 3rem 3.75rem;

    @media (max-width: 900px) { & { flex-direction: column; align-items: center; } }

    #footer-logo {
      justify-self: flex-start; margin-right: auto; IMG { width: 190px; }
      @media (max-width: 900px) { & { justify-self: center; margin: 0 auto; } }
    }

    NAV {
      UL {
        display: flex; gap: 0.5rem 3rem; margin: 0; padding: 0;
        list-style-type: none; text-transform: uppercase;
        font-family: "Oswald", sans-serif; font-weight: 700;

        @media (901px <= width => 1340px) { & { gap: 0.5rem 3.582vw; } }

        @media (max-width: 660px) { & {
          flex-direction: column; A { white-space: nowrap; }
        } }

        LI {
          &.donate { display: none; }
          UL { flex-direction: column; margin-top: 0.5rem; }
        }
      }
    }

    #form-subscribe {
      width: 23.2558%; box-sizing: border-box;

      @media (max-width: 900px) { & { width: 300px; } }

      H2 {
        margin: 0 0 1rem; font-family: "Oswald", sans-serif; font-weight: 600;
        font-size: 1.5rem; line-height: 1; text-transform: uppercase;
      }
    }
  }

  #copyright {
    justify-content: flex-start; padding-top: 3rem; font-size: 0.875rem;
    text-transform: uppercase;
  }
}

/* MULTIPLE PAGES */
#page-header {
  background: var(--blue); color: var(--white); padding: 3.3rem 0 3.7rem;
  text-transform: uppercase; font-family: "Oswald", sans-serif;

  H1 { font-size: 4rem; line-height: 1; }
}

FORM {
  INPUT[name="username"] { position: absolute; left: -999999999px; }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0 0 1rem; outline: 0;
    border: 0.125rem solid var(--green); padding: 0.67em 1em;
    background: var(--white); color: var(--black); font-family: "Inter", sans-serif;
    font-size: 1rem; line-height: 1; -webkit-appearance: none; appearance: none;
    
    &:-ms-input-placeholder { color: #A0A0A0; }
    &::placeholder { color: #A0A0A0; opacity: 1; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      border-color: red !important;

      &:-ms-input-placeholder { color: red; }
      &::placeholder { color: red; opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }

  BUTTON {
    display: inline-block; outline: 0; border-radius: 0.3125rem;
    border: 0.125rem solid var(--green); box-sizing: border-box;
    padding: 0.69em 1.56em; background: var(--green); color: var(--blue);
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1rem;
    line-height: 1; text-align: center; text-transform: uppercase; cursor: pointer;
    transition: all 0.2s;

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

    &.loader {
      border-color: #A0A0A0; background: #A0A0A0; color: #D8D8D8;
      pointer-events: none; position: relative;

      &:before {
        --loader-size: 2.5rem; animation: spin 1s linear infinite;
        content: ""; position: absolute; top: 0.25rem; box-sizing: border-box;
        left: calc(50% - (var(--loader-size) / 2)); width: var(--loader-size);
        height: var(--loader-size); border-radius: 50%;
        border: 0.1875rem solid var(--white); border-top-color: var(--darkgreen);
      }
    }
  }
}

@keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

DIALOG {
  border: 0; width: 31.25rem; padding: 0; box-sizing: border-box;
  font-size: 1.5rem; line-height: 1.2; overflow: visible;

  @media (max-width: 550px) { & { width: 96%; } }

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

  > BUTTON {
    position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
    outline: 0; border-radius: 50%; border: 0.125rem solid var(--white);
    padding: 0; background: var(--green); color: var(--white); font-size: 1rem;
    line-height: 1; cursor: pointer;

    &:hover { background: var(--blue); }
  }

  > DIV { padding: 1.75rem 2rem; }
}

/* HOME */
#home-hero {
  display: flex; flex-direction: column; justify-content: center; position: relative;
  height: 825px; box-sizing: border-box; background-color: var(--blue);
  background-repeat: no-repeat; background-position: center right;
  color: var(--white);

  @media (max-width: 900px) { & { background-position: center; } }

  &:before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(to right, var(--blue), var(--blue) 33%, transparent), linear-gradient(var(--blue), transparent 221px);
  }

  .site-width {
    translate: 0 0 1px; padding-top: 4em; font-size: 1.25rem; line-height: 1.3;
    
    H1 {
      width: 500px; margin: 0; font-family: "Oswald", sans-serif; font-weight: 800;
      font-size: 5.5rem; line-height: 1; text-transform: uppercase;

      @media (max-width: 550px) { & { width: 100%; } }

      SPAN { display: block; color: var(--green); }

      &:after {
        content: attr(data-attr); display: block; padding-top: 0.5em;
        font-size: 0.875rem; line-height: 1;
      }
    }

    P {
      width: 340px;

      &:has(.button) {
        display: flex; flex-wrap: wrap; gap: 1em 1.5em;
        width: auto; padding-top: 1em;
      }

      .button.white {
        display: inline-flex; align-items: center;

        &:after {
          content: ''; height: 0.9375em; width: 0.9375em; margin: 0.125em 0 0 0.5em;
          mask: var(--play) no-repeat center; background: var(--white);
          transition: inherit;
        }

        &:hover:after { background: var(--green); }
      }
    }
  }
}

#home-about {
  display: flex; justify-content: space-between; align-items: center; gap: 2em 0;
  padding: 2.5rem 0;

  @media (max-width: 750px) { & { flex-direction: column-reverse; } }

  IMG {
    width: 57%;
    @media (max-width: 900px) { & { width: 50%; } }
    @media (max-width: 750px) { & { width: 100%; } }
  }

  .text {
    .has-image & {
      width: 40%;
      @media (max-width: 900px) { & { width: 46%; } }
      @media (max-width: 750px) { & { width: 100%; } }
    }

    line-height: 1.8;

    H2 {
      margin: 0 0 0.5em; color: var(--blue); font-family: "Oswald", sans-serif;
      font-weight: 600; font-size: 3.5rem; line-height: 1; text-transform: uppercase;
    }

    P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }
  }
}

#home-gsc {
  background: var(--blue); color: var(--white);

  .site-width {
    display: flex; justify-content: space-between; align-items: center; gap: 2em 0;
    padding: 4rem 0;

    @media (max-width: 750px) { & { flex-direction: column; } }

    .text {
      .has-image & {
        width: 41%;
        @media (max-width: 900px) { & { width: 46%; } }
        @media (max-width: 750px) { & { width: 100%; } }
      }

      line-height: 1.8;

      H2 {
        margin: 0 0 0.5em; font-family: "Oswald", sans-serif; font-weight: 600;
        font-size: 3rem; line-height: 1; text-transform: uppercase;
      }

      P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

      .button.outline { color: var(--white); &:hover { color: var(--green); } }
    }

    IMG {
      width: 54%;
      @media (max-width: 900px) { & { width: 50%; } }
      @media (max-width: 750px) { & { width: 100%; } }
    }
  }
}

#home-partners {
  padding: 6.25rem 0;

  H2 {
    margin: 0 2% 1em; color: var(--blue); font-family: "Oswald", sans-serif;
    font-weight: 600; font-size: 3rem; line-height: 1; text-align: center;
    text-transform: uppercase;
  }

  #home-partners-carousel {
    --f-carousel-gap: 62px;

    .f-carousel__viewport {
      align-items: center;

      .f-carousel__slide {
        max-height: 160px; width: auto; max-width: 250px; height: auto;
      }
    }
  }
}

#home-support {
  padding: 3.625rem 0; background: var(--lightgray);

  .site-width {
    display: flex; flex-wrap: wrap; gap: 2rem;

    .button {
      min-width: 11.875rem;

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

    .header {
      display: flex; align-items: center; gap: 2em 3rem; width: 100%;

      @media (max-width: 600px) { & { flex-direction: column; } }

      H2 {
        margin: 0; color: var(--blue); font-family: "Oswald", sans-serif;
        font-weight: 600; font-size: 3rem; line-height: 1; text-align: center;
        text-transform: uppercase;
      }
    }

    .item {
      display: flex; flex-direction: column; width: 220px; box-sizing: border-box;
      border: 0.0625rem solid var(--darkgray); border-radius: 0.625rem;
      padding: 1.25rem; background: var(--white); color: var(--blue);
      font-family: "Oswald", sans-serif; font-weight: 700; line-height: 1.1;
      text-transform: uppercase;

      @media (max-width: 600px) { & { width: 100%; } }

      .image {
        margin-bottom: 2em; aspect-ratio: 178 / 104; background-repeat: no-repeat;
        background-position: center; background-size: contain;
      }

      .price { margin: 0.5em 0 2em; font-size: 1.25rem; }

      A { margin-top: auto; font-weight: 600; }
    }

    .text {
      align-self: flex-start;

      H3 {
        margin: 0 0 0.75em; font-family: "Oswald", sans-serif; font-weight: 700;
        font-size: 2rem; line-height: 1; text-transform: uppercase;
      }

      P { margin: 0 0 1.5em; line-height: 1.8; }

      .button:not(.outline) { margin-right: 1.25rem; }
      .button.outline { min-width: 0; }
    }
  }
}

#instagram {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.875rem 2em; flex-wrap: wrap; padding: 6.25rem 0 3.625rem;
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;

  H2 {
    margin: 0; color: var(--blue); font-size: 3rem; line-height: 1;
  }

  A { font-size: 1.5rem; }

  #sb_instagram { width: 100%; }
}

/* ABOUT */
#about-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4rem 0;

  @media (max-width: 800px) { & { flex-direction: column-reverse; } }

  #about-gallery {
    width: 48.8372%; @media (max-width: 800px) { & { width: 100%; } }

    --f-arrow-width: 2.4375rem; --f-arrow-height: 3.0625rem;
    --f-arrow-svg-height: 1.1875rem; --f-arrow-svg-width: 1.1875rem;
    --f-arrow-svg-stroke-width: 3; --f-arrow-color: var(--white);
    --f-arrow-bg: var(--blue); --f-arrow-hover-bg: var(--green);

    .f-carousel__slide {
      aspect-ratio: 630 / 543; border: 0.5em solid var(--lightgray);
      background-repeat: no-repeat; background-position: center;
      background-size: cover;
    }

    .f-carousel__dots {
      gap: 0 1rem; top: calc((100% + var(--f-carousel-dots-height)) - 0.1875rem);

      BUTTON {
        width: 2.4375rem; height: 0.1875rem; background: var(--darkgray); opacity: 1;

        &.is-selected, &:hover { background: var(--green); }

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

  .text {
    width: 48%; line-height: 1.3; @media (max-width: 800px) { & { width: 100%; } }

    H2, H3 {
      margin: 0 0 0.5em; font-family: "Oswald", sans-serif; font-weight: 600;
      font-size: 3.5rem; line-height: 1; text-transform: uppercase;

      &:is(H3) { font-size: 1.5rem; }
    }

    P { margin: 0 0 1.5em; }
  }
}

#about-accomplishments {
  padding: 4rem 0; background: var(--lightgray); color: var(--black);
  text-align: center; font-weight: 400; line-height: 1.3;

  .site-width {
    width: 926px; @media (max-width: 964px) { & { width: 96%; } }

    H2, H3 {
      margin: 0 0 1em; font-family: "Oswald", sans-serif; font-weight: 600;
      font-size: 3rem; line-height: 1; text-transform: uppercase;

      &:is(H3) { margin-bottom: 0.5em; font-size: 2.25rem; }
    }

    .col3 {
      display: flex; gap: 2em 0; box-sizing: border-box; margin-bottom: 4rem;

      @media (max-width: 700px) { & { flex-direction: column; } }

      > DIV {
        display: flex; justify-content: center; flex-direction: column;
        width: 39%; box-sizing: border-box; border-left: 0.125rem solid var(--blue);
        border-right: 0.125rem solid var(--blue); padding: 0 4.75%;

        &:first-of-type { width: 30.5%; border: 0; padding-left: 0; }
        &:last-of-type { width: 30.5%; border: 0; padding-right: 0; }

        @media (max-width: 700px) { & {
          width: 100%; padding: 2em 0; border-left: 0; border-right: 0;
          border-top: 0.125rem solid var(--blue);
          border-bottom: 0.125rem solid var(--blue);

          &:first-of-type, &:last-of-type { width: 100%; border: 0; padding: 0; }
        } }
      }

      H3 { font-size: 1.5rem; }

      H4 { margin: 0 0 0.75em; text-transform: uppercase; font-weight: 600; }
    }

    .col2 {
      margin: 0; padding: 0 0 0 1em; column-count: 2; column-gap: 2em;
      text-align: left;

      @media (max-width: 700px) { & { column-count: 1; } }
    }
  }
}

#training {
  position: relative;

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  .site-width {
    padding: 4.4rem 0; box-sizing: border-box; line-height: 1.4; translate: 0 0 1px;

    @media (max-width: 700px) { & { padding: 3rem 0; } }

    :has(.has-image) & .text {
      width: 50%;
      @media (max-width: 700px) { & { width: 100%; } }
    }

    H2 {
      margin: 0 0 0.6em; font-family: "Oswald", sans-serif; font-weight: 600;
      font-size: 3rem; line-height: 1.3; text-transform: uppercase;
    }
  }

  .image {
    position: absolute; top: 0; right: 0; width: 49%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: cover;

    &:before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to right, var(--white), transparent 40%);
    }

    @media (max-width: 700px) { & {
      position: relative; width: 100%; height: auto; aspect-ratio: 705 / 427;
      &:before { background: linear-gradient(var(--white), transparent 33%); }
    } }
  }
}

#about-races {
  padding: 2.4em 0; background: var(--blue); color: var(--white); font-size: 1.25rem;
  text-align: center;

  @media (max-width: 600px) { & { font-size: 3.333vw; } }

  H2 {
    margin: 0 0 1em; font-family: "Oswald", sans-serif; font-weight: 600;
    font-size: 2.25rem; line-height: 1; text-transform: uppercase;
    text-align: center;
  }

  .list {
    margin: 0 auto; width: 850px; max-height: 14.2em; overflow-y: auto;
    scrollbar-color: #707070 var(--blue);

    @media (max-width: 884px) { & { width: 96%; } }

    > DIV {
      display: flex; justify-content: space-between; align-items: center;
      margin-left: 3em; border-top: 1px solid #707070; position: relative;
      padding: 0.982em 0.25em 0.982em 0;

      &:before {
        content: ''; position: absolute; top: 0; left: -2.4em; width: 2px;
        height: calc(100% + 1px); background: var(--green);
      }

      &:after {
        content: ''; position: absolute; left: -3em; width: 1.3em; height: 1.3em;
        box-sizing: border-box; border-radius: 50%; border: 3px solid var(--green);
        background: var(--white);
      }

      &.past:after { background: var(--green); }

      &:first-of-type { border-top: 0; &:before { top: 50%; } }

      &:last-of-type:before { height: 50%; }

      DIV:first-of-type {
        color: var(--green); font-family: "Oswald", sans-serif;
        text-transform: uppercase;
      }
    }
  }

  .scroll {
    display: inline-flex; align-items: center; width: auto; margin: 2rem auto 0;
    color: var(--green); font-family: "Oswald", sans-serif; font-weight: 300;
    text-transform: uppercase;

    &:before {
      content: ''; width: 1.5em; height: 1.5em; position: relative; top: 2px;
      background-color: var(--green);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E") no-repeat center;
    }
  }
}





.woocommerce {
  .single-product {
    .product {
      SELECT {
        cursor: pointer;
        -webkit-appearance: menulist-button; appearance: menulist-button;
      }

      &:after { content: ""; display: block; clear: both; }
    }
  }
}

.wc-blocks-components-select__container SELECT {
  border: 0.125rem solid var(--green) !important;
}