/* 
  Custom Gravity Forms design 
*/

#main-container {

  .vdlp-form-narrow {
    max-width: 900px;
    margin: 1rem auto 2rem;
  }

  /* Add pointer cursor for clickable elements */
  form label,
  .pointer {
    cursor: pointer;
  }

  /* Sections */
  .gsection_title {
    --theme-font-size: 24px;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .gsection_description {
    margin-bottom: 1rem;
    max-width: 900px;
  }

  /* Theme styles */
  .gform-theme {
    --gf-local-bg-color: var(--wp--preset--color--palette-color-2);
    --gf-ctrl-btn-font-weight: var(--theme-button-font-weight, 700);
    --gf-field-pg-prog-color: var(--gf-color-out-ctrl-dark);
    --gf-field-pg-prog-font-family: var(--gf-font-family-base);
    --gf-field-pg-prog-font-size: var(--gf-local-font-size);
    --gf-field-pg-prog-font-style: var(--gf-font-style-base);
    --gf-field-pg-prog-font-weight: var(--gf-local-font-weight);
    --gf-field-pg-prog-text-transform: none;
    --gf-field-pg-prog-margin-y-end: 3rem;
    --gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--palette-color-2);
    --gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--palette-color-2);
    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--palette-color-8); 
    --gf-ctrl-btn-color-focus-primary: var(--gf-ctrl-btn-color-hover-primary);
    --gf-ctrl-btn-icon-color-hover-primary: var(--wp--preset--color--palette-color-8);
    --gf-ctrl-btn-icon-color-focus-primary: var(--wp--preset--color--palette-color-8);

    .gform-field-label {
      cursor: pointer;
    }

    .gf_progressbar_wrapper {
      /* background-color: var(--wp--preset--color--palette-color-8); */
      border-radius: var(--wp--preset--border-radius--border-radius-1);
      text-align: center;
    }

    .gform_button {
      border-radius: var(--theme-button-border-radius);
      font-weight: var(--theme-button-font-weight);
      font-size: var(--theme-button-font-size);
      padding: var(--theme-button-padding);
    }

    .gfield--type-image_choice {
      .gchoice {
        --gf-field-img-choice-size: 100%;
        inline-size: var(--gf-field-img-choice-size);
        max-inline-size: var(--gf-field-img-choice-size);
        min-inline-size: var(--gf-field-img-choice-size);
      }
    }
  }
}

@media (min-width: 600px) {
  #main-container {

    .gform-theme {
      .gform_save_link {
        margin-left: auto;
      }

      .gfield--type-image_choice {
        .gchoice {
            --gf-field-img-choice-size: 30%;
            inline-size: var(--gf-field-img-choice-size);
            max-inline-size: var(--gf-field-img-choice-size);
            min-inline-size: var(--gf-field-img-choice-size);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #main-container {
    .gform-theme {
      .gfield {
        .ginput_password.medium,
        input.medium,
        select.medium {
          inline-size: 100%;
        }

        .ginput_container .medium,
        input.medium,
        select.medium {
          inline-size: 100%;
        }

        .ginput_container .small,
        input.small,
        select.small {
          inline-size: 50%;
        }
      }
    }

    .has-medium-font-size {
      font-size: var(--theme-font-size) !important;
    }
  }
}

@media (min-width: 768px) {
  #main-container {
    
    /* Newsletter form class; .form-newsletter added in form settings */
    .gform-theme.form-newsletter_wrapper { 
      max-width: 100%;

      form {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: var(--gf-form-gap-x);
        --gf-form-gap-y: var(--gf-form-gap-x);
        --gf-ctrl-size: 50px;
        --gf-ctrl-line-height: var(--gf-ctrl-size);
        --theme-form-field-height: var(--gf-ctrl-size);
        --gf-ctrl-btn-size: var(--gf-ctrl-size);

        .gform-body {
          width: 100%;
          flex-grow: 1;
        }

        .gform-footer {
          flex-grow: 0;
          margin: 28px auto auto;

          .gform_button {
            white-space: nowrap;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {

  /* For forms in entries news page */
  #main-container .entries {
    
    /* Newsletter form class; .form-newsletter added in form settings */
    .gform-theme.form-newsletter_wrapper { 

      form {
        display: block;
        

        .gform_fields {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}