/*
 * Impact Hero + Gravity Forms styles
 *
 * Add the class "hero" to the hero section.
 * Add the class "form" to the form section/container wrapping Gravity Forms.
 */

/* HERO MASK VARIABLES */
:root {
  --image-mask-hero: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 707 710"><path d="M168.671 0C86.4957 105.276 29.1067 231.553 8.8916 368.167C-6.95186 475.217 1.49267 577.762 29.8237 670.051C34.026 683.736 38.5769 696.983 43.5361 710H707V0H168.671Z" fill="black"/></svg>');
  --image-mask-hero-m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 335"><path d="M0 88.6892C55.6 45.1892 122.3 14.8892 194.5 4.18916C251 -4.21084 305.2 0.289165 353.9 15.2892C361.1 17.4892 368.1 19.8892 375 22.5892V335H187.5H0V88.6892Z" fill="black"/></svg>');
}

/* HERO SECTION (DESKTOP - unchanged) */
section.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
  position: relative;
  padding-right: 0;
}

/* boxed content sits against the seam (DESKTOP - unchanged) */
section.hero .hero__content {
  width: 720px;
  max-width: var(--hero-max);
  justify-self: end;
  align-self: center;
}

section.hero h1,
section.hero h1.h2,
section.hero p {
  color: var(--white);
}

/* image (DESKTOP - unchanged) */
section.hero .hero__image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: calc(50% - 5rem);
  -webkit-mask-image: var(--image-mask-hero);
  mask-image: var(--image-mask-hero);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center left;
  mask-position: center left;
  object-fit: cover;
}

/* TABLET/MOBILE ONLY */
@media (max-width: 1024px) {
  section.hero {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(150px, auto);
    padding-left: 0;
    padding-bottom: 0 !important;
  }

  /* Remove desktop content-container constraints on tablet/mobile */
  section.hero .hero__content {
    width: auto;
    max-width: none;
    justify-self: stretch;
    align-self: stretch;
  }

  section.hero .hero__image {
    -webkit-mask-image: var(--image-mask-hero-m);
    mask-image: var(--image-mask-hero-m);
    -webkit-mask-position: top;
    mask-position: top;
    position: initial;
    width: 100%;
    height: auto; /* you control height in Elementor */
  }
}

/* Gravity Forms CSS */

.form {
  position: relative;

  /* FORM COLOUR SYSTEM (scoped so theme colours can't leak in) */
  --white: #ffffff;
  --light-grey: #f4f4f8;
  --purple-dark: #424684;
  --purple: #595ca0;
  --orange: #ec6e42;
  --orange-hover: #f08e6a;
  --error-red: #c02b0a;

  --font-header: "Red Hat Display", sans-serif;
  --font-body: "DM Sans", sans-serif;

  color: var(--purple);
}

.form .form__inner-container {
  position: relative;
}

/* hide GF title + required legend */
.form .gform_title,
.form .gform_required_legend {
  display: none !important;
}

/* heading block from HTML field */
.form .heading-text {
  text-align: center;
  margin-bottom: 2rem;
}

.form .heading-text h1,
.form .heading-text h2,
.form .heading-text h3,
.form .heading-text h4,
.form .heading-text h5,
.form .heading-text h6 {
  font-family: var(--font-header) !important;
  color: var(--purple) !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.1 !important;
}

.form .heading-text p {
  font-family: var(--font-body) !important;
  color: var(--purple) !important;
  font-weight: 500 !important;
  font-size: 1.075rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* wrapper */
.form .gform_wrapper,
.form .gform-theme,
.form .gform-theme--framework,
.form .gform-theme--foundation {
  position: relative;
  font-family: var(--font-body) !important;
  color: var(--purple) !important;
}

/* keep GF layout but tidy spacing */
.form .gform_wrapper .gform_fields {
  row-gap: 1.25rem !important;
}

.form .gform_wrapper .gfield {
  margin-bottom: 0 !important;
}

/* labels */
.form .gform_wrapper .gfield_label,
.form .gform_wrapper legend.gfield_label,
.form .gform_wrapper .gform-field-label,
.form .gform_confirmation_message {
  font-family: var(--font-body) !important;
  color: var(--purple) !important;
  font-weight: 500 !important;
  font-size: 1.075rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.5rem 0 !important;
}

/* general form text */
.form .gform_wrapper p,
.form .gform_wrapper li,
.form .form-captcha-text p,
.form .form__alternative,
.form .form__alternative span {
  font-family: var(--font-body) !important;
  color: var(--purple) !important;
}

/* form controls */
.form .gform_wrapper input[type="text"],
.form .gform_wrapper input[type="email"],
.form .gform_wrapper input[type="tel"],
.form .gform_wrapper input[type="number"],
.form .gform_wrapper input[type="url"],
.form .gform_wrapper input[type="password"],
.form .gform_wrapper input[type="search"],
.form .gform_wrapper select,
.form .gform_wrapper textarea {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--light-grey) !important;
  color: var(--purple) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--purple) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* single-line fields */
.form .gform_wrapper input[type="text"],
.form .gform_wrapper input[type="email"],
.form .gform_wrapper input[type="tel"],
.form .gform_wrapper input[type="number"],
.form .gform_wrapper input[type="url"],
.form .gform_wrapper input[type="password"],
.form .gform_wrapper input[type="search"],
.form .gform_wrapper select {
  height: 48px !important;
  line-height: 46px !important;
  padding: 0 14px !important;
}

/* textarea */
.form .gform_wrapper textarea {
  min-height: 230px !important;
  line-height: 1.5 !important;
  padding: 14px !important;
  resize: vertical !important;
}

/* placeholders */
.form .gform_wrapper ::placeholder {
  color: var(--purple) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* select */
.form .gform_wrapper select {
  padding-right: 42px !important;
  cursor: pointer !important;
}

.form .gform_wrapper option {
  color: var(--purple) !important;
}

/* focus */
.form .gform_wrapper input:focus,
.form .gform_wrapper textarea:focus,
.form .gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange) !important;
}

/* consent */
.form .gform_wrapper .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.form .gform_wrapper input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 0 !important;
  accent-color: var(--purple) !important;
  border: 1px solid var(--purple) !important;
  border-radius: 2px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* branded links inside form */
.form .gform_wrapper a,
.form .form-captcha-text a,
.form .form__alternative a {
  color: var(--orange) !important;
  text-decoration-color: var(--orange) !important;
  transition: color 0.2s ease !important;
}

.form .gform_wrapper a:hover,
.form .form-captcha-text a:hover,
.form .form__alternative a:hover {
  color: var(--orange-hover) !important;
  text-decoration-color: var(--orange-hover) !important;
}

/* button */
.form .gform_wrapper .gform_button,
.form .gform_wrapper button[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--orange) !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: none !important;
  border-radius: 10px !important;
  min-height: 46px !important;
  padding: 0 1.6rem !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, transform 0.2s ease !important;
}

.form .gform_wrapper .gform_button:hover,
.form .gform_wrapper button[type="submit"]:hover {
  background-color: var(--orange-hover) !important;
  transform: translateY(-1px) !important;
}