/*!
Theme Name: modeng
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: live25
*/

@import url("https://use.typekit.net/gdc5xgk.css");

body {
  color: #494135;
  margin: 0;
  text-rendering: geometricPrecision;
}

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

/* Gravity Forms */
h2.gform_title {
  display: none;
}

.gf_progressbar_title {
  color: #f32a29 !important;
  font-family: "rinse", sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  font-style: normal !important;
  letter-spacing: 4% !important;
  padding-left: 5px !important;
}

.gfield_required {
  display: none !important;
}

.gfield > .gform-field-label {
  font-family: "veneer", sans-serif !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  font-style: normal !important;
  letter-spacing: 8% !important;
  line-height: 1 !important;
  margin: 0 auto 30px !important;
  max-width: 460px !important;
  text-transform: uppercase !important;

  @media (min-width: 880px) {
    font-size: 44px !important;
    letter-spacing: 12% !important;
  }
}

.gfield_radio {
  gap: 25px !important;
}

.gchoice .gform-field-label--type-inline {
  color: #494135 !important;
  cursor: pointer !important;
  font-family: "nitti-typewriter-cameo", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  font-style: normal !important;
  line-height: 1 !important;
  margin-inline: 0 !important;
  transition: color 300ms;

  @media (min-width: 880px) {
    font-size: 26px !important;
  }

  @media (hover: hover) {
    &:hover:not(.gquiz-correct-choice):not(.gquiz-incorrect-choice) {
      color: #000 !important;
    }
  }
}

/* Target the spinner for both multi-step buttons and the final submit button */
.gform_wrapper .gform_page_footer .gform_ajax_spinner svg circle,
.gform_wrapper .gform_footer .gform_ajax_spinner svg circle {
  stroke: #f32a29 !important;
}

.gchoice .gfield-choice-input {
  left: -999em;
  position: absolute;
}

.gform-theme--framework .gf_progressbar {
  background-color: #f32a29 !important;
}

.gform-page-footer {
  justify-content: flex-end !important;
}

.gform_next_button,
.custom-skip,
input[type="submit"],
.action-btn {
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid #494135 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #494135 !important;
  font-family: "nitti-typewriter-normal", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  outline: 0 !important;
  padding: 10px 17px 10px 5px !important;
  transition: color 300ms;

  &:focus {
    color: #f32a29 !important;
  }

  &:disabled {
    display: block !important;
    opacity: 0.4 !important;
  }

  @media (min-width: 880px) {
    font-size: 26px !important;
  }

  @media (hover: hover) {
    &:hover:not(:disabled) {
      border-color: #f32a29 !important;
      color: #f32a29 !important;
    }
  }
}

input[type="submit"] {
  border-bottom: 0 !important;
  font-family: "nitti-typewriter-cameo", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  padding: 0 !important;
}

.gform_previous_button {
  display: none !important;
}

.gform_wrapper .gquiz-incorrect-choice .gquiz-indicator {
  height: 33px !important;
  margin-inline-start: 25px !important;
  width: 28px !important;
}

.gform_wrapper .gquiz-correct-choice .gquiz-indicator {
  height: 37px !important;
  margin-inline-start: 25px !important;
  width: 38px !important;
}

.gform_wrapper .gquiz-correct-choice {
  color: #f32a29 !important;
}

.gf_progressbar_wrapper .gf_progressbar_title,
.gf_progressbar_wrapper:has(.percentbar_100) {
  display: none;
}

.gfield--type-email {
  border: 2px solid #494135 !important;

  .gfield_label {
    font-family: "nitti-typewriter-cameo", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }

  .ginput_container_email input {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "nitti-typewriter-normal", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 20px !important;
    letter-spacing: -4% !important;
    outline: 0 !important;
  }
}

.gform-theme--foundation .gform_fields {
  row-gap: 8px !important;
}

.final-step {
  .subhead {
    color: #f32a29;
    font-size: 22px;
    letter-spacing: 4%;
    line-height: 1;
    margin: 0;
    rotate: -1.1deg;
    text-align: center;

    @media (min-width: 1000px) {
      font-size: 28px;
    }
  }

  .heading {
    font-size: 54px;
    line-height: 1;
    margin-block: 5px 10px;
    text-align: center;
    text-transform: uppercase;

    @media (min-width: 1000px) {
      font-size: 88px;
    }
  }

  .copy {
    font-size: 18px;
    letter-spacing: 6%;
    line-height: 1;
    margin-block: 0 20px;
    text-align: center;

    @media (min-width: 1000px) {
      font-size: 26px;
    }
  }
}

#gform_5 .gform-footer {
  justify-content: flex-end;
}

.gform-theme--framework .gform-loader {
  border-block-end-color: #f32a29 !important;
  border-inline-start-color: #f32a29 !important;
}

/* Header */
header,
.quiz,
footer {
  margin: 0 auto;
}

.quiz-wrapper {
  background-image: url("./assets/backdrop-mo.webp");
  background-repeat: repeat-y;
  background-size: cover;
  box-sizing: border-box;
  min-height: 100svh;
  width: 100%;
}

/* Content */
.quiz {
  margin: 4vh auto;
  max-width: 780px;
  width: 90%;

  @media (min-width: 880px) {
    margin-block: 5vh;
    width: 40%;
  }
}

.custom-quiz-results {
  .score-summary {
    .score {
      column-gap: 8px;
      display: grid;
      grid-template-areas:
        "score text"
        "score total";
      margin-bottom: 4px;
    }

    .score-heading {
      color: #f32a29;
      font-size: 26px;
      grid-area: text;
      letter-spacing: 4%;
      line-height: 0.9;
      margin: 12px 0 4px;
      rotate: -0.4deg;
      width: min-content;

      @media (min-width: 1000px) {
        font-size: 32px;
      }
    }

    .user-score {
      font-size: 176px;
      grid-area: score;
      line-height: 0.8;
      text-align: right;

      @media (min-width: 1000px) {
        font-size: 220px;
      }
    }

    .out-of {
      font-size: 76px;
      grid-area: total;

      @media (min-width: 1000px) {
        font-size: 106px;
      }
    }

    .summary {
      color: #f32a29;
      font-size: 32px;
      line-height: 0.9;
      letter-spacing: 4%;
      margin: 0;
      rotate: -2deg;
      text-align: center;

      @media (min-width: 1000px) {
        font-size: 40px;
        line-height: 1;
      }
    }

    .explainer {
      font-size: 28px;
      line-height: 1.3;
      margin: 1em 0 0.5em;
      text-align: center;

      @media (min-width: 1000px) {
        font-size: 38px;
      }
    }
  }

  .playlist-type {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    margin-block: 35px 25px;

    p {
      font-size: 22px;
      letter-spacing: 6%;
      line-height: 1;
      margin: 0 0 5px;
      text-align: center;

      @media (min-width: 1000px) {
        font-size: 26px;
      }
    }

    img {
      margin: 0 auto;

      @media (min-width: 1000px) {
        max-width: 408px;
      }
    }

    a {
      align-items: center;
      align-self: flex-end;
      display: flex;
      color: #494135;
      font-size: 22px;
      gap: 5px;

      @media (hover: hover) {
        &:hover {
          color: #000;
        }
      }

      @media (min-width: 1000px) {
        font-size: 26px;
      }
    }
  }

  .results-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .share {
      align-self: flex-end;
      cursor: pointer;

      &::after {
        content: "\2197";
        margin-left: 15px;
      }
    }

    .download {
      align-self: flex-start;

      &::after {
        content: "\2193";
        margin-left: 15px;
      }
    }

    a {
      display: flex;
      gap: 12px;
      padding-bottom: 6px !important;
      text-decoration: none;
      width: max-content;
    }

    & + .final-step {
      padding-top: 2em;
    }
  }
}

/* Footer */
footer {
  padding: 20px 20px 70px;
}

.footer-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 6px;

  &::before {
    background: url("./assets/footer-border.svg") no-repeat;
    background-size: cover;
    content: "";
    display: block;
    height: 4px;
    width: 100%;
  }

  @media (min-width: 1000px) {
    &::before {
      background: url("./assets/footer-border.png") no-repeat;
      background-size: cover;
      height: 8px;
    }
  }
}

.footer-top {
  font-size: 22px;
  text-transform: uppercase;

  p {
    line-height: 1;
    margin: 0 0 20px;
  }

  @media (min-width: 880px) {
    font-size: 32px;
  }

  @media (min-width: 1000px) {
    align-items: center;
    display: flex;
    justify-content: space-between;

    p {
      margin: 0;
    }
  }
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.legal {
  display: flex;
  font-size: 14px;
  justify-content: space-between;

  ul {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: #494135;
  }

  p {
    margin: 0;
  }

  @media (min-width: 880px) {
    font-size: 16px;
  }
}

.legal-small {
  font-size: 14px;
  margin: 8px 0;

  a {
    color: inherit;
  }
}

/* Utils */
.dt {
  display: none;
}

.mo {
  display: block;
}

@media (orientation: landscape) and (min-width: 750px) {
  .dt {
    display: block;
  }

  .mo {
    display: none;
  }

  .quiz-wrapper {
    background-image: url("./assets/backdrop-dt.webp");
  }
}

/* Fonts */
.nitti-cameo {
  font-family: "nitti-typewriter-cameo", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nitti-normal,
.legal {
  font-family: "nitti-typewriter-normal", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rinse {
  font-family: "rinse", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.veneer {
  font-family: "veneer", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poster {
  font-family: "poster-cut-neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Random question alignment */
.gform-theme--framework .gfield--type-choice .gchoice {
  display: flex !important;

  .gform-field-label {
    display: flex !important;
    width: 100% !important;
  }

  /* The left spring */
  .gform-field-label::before {
    content: "";
    /* Grow based on the random variable */
    flex-grow: var(--rand, 0.5);
  }

  /* The right spring */
  .gform-field-label::after {
    content: "";
    /* Grow based on whatever space is left over from 1 */
    flex-grow: calc(1 - var(--rand, 0.5));
  }

  /* Q1 */
  &.gchoice_4_1_0 {
    --rand: 0.23;
  }
  &.gchoice_4_1_1 {
    --rand: 0.45;
  }
  &.gchoice_4_1_2 {
    --rand: 0.12;
  }
  &.gchoice_4_1_3 {
    --rand: 0.67;
  }

  /* Q2 */
  &.gchoice_4_3_0 {
    --rand: 0.45;
  }
  &.gchoice_4_3_1 {
    --rand: 0.67;
  }
  &.gchoice_4_3_2 {
    --rand: 0.23;
  }
  &.gchoice_4_3_3 {
    --rand: 0.12;
  }

  /* Q3 */
  &.gchoice_4_5_0 {
    --rand: 0.67;
  }
  &.gchoice_4_5_1 {
    --rand: 0.12;
  }
  &.gchoice_4_5_2 {
    --rand: 0.45;
  }
  &.gchoice_4_5_3 {
    --rand: 0.23;
  }

  /* Q4 */
  &.gchoice_4_7_0 {
    --rand: 0.23;
  }
  &.gchoice_4_7_1 {
    --rand: 0.12;
  }
  &.gchoice_4_7_2 {
    --rand: 0.67;
  }
  &.gchoice_4_7_3 {
    --rand: 0.45;
  }

  /* Q5 */
  &.gchoice_4_9_0 {
    --rand: 0.23;
  }
  &.gchoice_4_9_1 {
    --rand: 0.67;
  }
  &.gchoice_4_9_2 {
    --rand: 0.45;
  }
  &.gchoice_4_9_3 {
    --rand: 0.12;
  }

  /* Q6 */
  &.gchoice_4_11_0 {
    --rand: 0.67;
  }
  &.gchoice_4_11_1 {
    --rand: 0.45;
  }
  &.gchoice_4_11_2 {
    --rand: 0.5;
  }
  &.gchoice_4_11_3 {
    --rand: 0.23;
  }

  /* Q7 */
  &.gchoice_4_13_0 {
    --rand: 0.34;
  }
  &.gchoice_4_13_1 {
    --rand: 0.23;
  }
  &.gchoice_4_13_2 {
    --rand: 0.12;
  }
  &.gchoice_4_13_3 {
    --rand: 0.67;
  }

  /* Q8 */
  &.gchoice_4_15_0 {
    --rand: 0.12;
  }
  &.gchoice_4_15_1 {
    --rand: 0.67;
  }
  &.gchoice_4_15_2 {
    --rand: 0.45;
  }
  &.gchoice_4_15_3 {
    --rand: 0.23;
  }

  /* Q9 */
  &.gchoice_4_17_0 {
    --rand: 0.1;
  }
  &.gchoice_4_17_1 {
    --rand: 0.45;
  }
  &.gchoice_4_17_2 {
    --rand: 0.23;
  }
  &.gchoice_4_17_3 {
    --rand: 0.67;
  }

  /* Q10 */
  &.gchoice_4_19_0 {
    --rand: 0.38;
  }
  &.gchoice_4_19_1 {
    --rand: 0.12;
  }
  &.gchoice_4_19_2 {
    --rand: 0.67;
  }
  &.gchoice_4_19_3 {
    --rand: 0.2;
  }

  /* Q11 */
  &.gchoice_4_21_0 {
    --rand: 0.67;
  }
  &.gchoice_4_21_1 {
    --rand: 0.23;
  }
  &.gchoice_4_21_2 {
    --rand: 0.45;
  }
  &.gchoice_4_21_3 {
    --rand: 0.12;
  }

  /* Q12 */
  &.gchoice_4_23_0 {
    --rand: 0.23;
  }
  &.gchoice_4_23_1 {
    --rand: 0.12;
  }
  &.gchoice_4_23_2 {
    --rand: 0.67;
  }
  &.gchoice_4_23_3 {
    --rand: 0.37;
  }

  /* Q13 */
  &.gchoice_4_25_0 {
    --rand: 0.23;
  }
  &.gchoice_4_25_1 {
    --rand: 0.67;
  }
  &.gchoice_4_25_2 {
    --rand: 0.45;
  }
  &.gchoice_4_25_3 {
    --rand: 0.32;
  }

  /* Q14 */
  &.gchoice_4_27_0 {
    --rand: 0.67;
  }
  &.gchoice_4_27_1 {
    --rand: 0.12;
  }
  &.gchoice_4_27_2 {
    --rand: 0.23;
  }
  &.gchoice_4_27_3 {
    --rand: 0.45;
  }

  /* Q15 */
  &.gchoice_4_29_0 {
    --rand: 0.38;
  }
  &.gchoice_4_29_1 {
    --rand: 0.67;
  }
  &.gchoice_4_29_2 {
    --rand: 0.12;
  }
  &.gchoice_4_29_3 {
    --rand: 0.23;
  }

  /* Q16 */
  &.gchoice_4_31_0 {
    --rand: 0.67;
  }
  &.gchoice_4_31_1 {
    --rand: 0.12;
  }
  &.gchoice_4_31_2 {
    --rand: 0.23;
  }
  &.gchoice_4_31_3 {
    --rand: 0.45;
  }
}