/* ============================================================
   FORMS — everything for the Gravity Forms forms, in one place:
   the colour variables, the per-page colours and layout, and the
   styles themselves. Loaded after main.css (hb_enqueue_assets in
   functions.php), so it can use main.css's palette and spacing
   tokens, and its per-page blocks win over main.css's.

   Variables (set per page below, or in a page's block):
     --form-text               typed text, radio labels
     --form-label              field labels
     --form-line               the line under each field
     --form-accent             focus underline, radio dot, button
     --form-button-text        button text when it fills on hover
     --form-panel-bg           dropdown list / calendar background
     --form-field-bg           fill behind each field
     --form-field-pad-x        side padding inside fields (use with a fill)
     --form-error              validation messages
   ============================================================ */

:root {
  --form-text: var(--color-text);
  --form-label: var(--color-text-muted);
  --form-line: color-mix(in oklch, var(--color-text) 35%, transparent);
  --form-accent: var(--color-accent);
  --form-button-text: var(--color-bg);
  --form-panel-bg: var(--color-bg-alt);
  --form-field-bg: transparent;
  --form-field-pad-x: 0rem;  /* side padding inside fields — set with a field bg */
  --form-error: oklch(0.72 0.13 28);
}

/* Hidden until js/contact-intro.js plays the form's entrance — same
   failsafe as the other intro elements in main.css (PAGE TRANSITION). */
.is-page-intro .page-contact-me main .gform_wrapper {
  visibility: hidden;
  animation: mw-page-intro-failsafe 0s linear 5s forwards;
  overflow: hidden;
  z-index: 0;
}

.gform_required_legend {
  display: none;
}

/* ============================================================
   FORMS (Gravity Forms)
   Gravity Forms' own look is switched off (functions.php adds
   .gform-theme__disable-framework to the form) and its layout grid
   kept; everything visual is here, coloured by the --form-* variables
   so each page can set its own.

   Fields have a soft fill and a line underneath; labels sit above
   them in their normal place (the First / Last-style sub-labels
   below, as Gravity Forms lays them out). Focusing draws an accent
   underline across from the left. Dropdowns get a custom list on
   mouse devices (.mw-select, js/form-fields.js); touch devices keep
   the native picker, styled to match.
   ============================================================ */

.gform_wrapper.gform-theme {
  color: var(--form-text);
  font-family: var(--ff-body);
  position: relative;
  z-index: 2;

}

.gform_wrapper.gform-theme .gform_fields {
  row-gap: var(--space-2xl);
}

/* Field labels and group headings (Name, Email, radio questions). */
.gform_wrapper.gform-theme .gfield_label {
  display: block;
  margin: 0 0 var(--space-2xs);
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--form-label);
}

/* Sub-labels under the inputs of a group (First, Last, Confirm Email). */
.gform_wrapper.gform-theme .gform-field-label--type-sub {
  display: block;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--form-label);
  opacity: 0.75;
}

.gform_wrapper.gform-theme .gfield_required {
  margin-left: 0.15em;
  color: inherit;
  opacity: 0.7;
}

/* ---- Text fields --------------------------------------------------- */

.gform_wrapper.gform-theme :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select,
  .mw-select__trigger
) {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.6rem var(--form-field-pad-x);
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--form-line);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  /* The focus underline: a 2px accent bar grown from the left. */
  background: linear-gradient(var(--form-accent), var(--form-accent)) no-repeat left bottom / 0% 2px;
  background-origin: border-box;
  background-color: var(--form-field-bg);
  color: var(--form-text);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  text-align: left;
  transition:
    background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease;
}

.gform_wrapper.gform-theme :is(input, textarea, select):focus,
.gform_wrapper.gform-theme .mw-select__trigger:focus-visible,
.gform_wrapper.gform-theme .mw-select.is-open .mw-select__trigger {
  background-size: 100% 2px;
}

.gform_wrapper.gform-theme textarea {
  /* Gravity Forms gives it rows="10" (~17rem tall); about half that.
     Visitors can still drag it taller. */
  height: 8.5rem;
  min-height: 6rem;
  resize: vertical;
}

.gform_wrapper.gform-theme :is(input, textarea)::placeholder,
.gform_wrapper.gform-theme .mw-select__value:empty::before {
  color: color-mix(in oklch, var(--form-label) 55%, transparent);
  opacity: 1;
}

/* Keep browser autofill from painting the field yellow/white. */
.gform_wrapper.gform-theme input:-webkit-autofill {
  -webkit-text-fill-color: var(--form-text);
  caret-color: var(--form-text);
  transition: background-color 9999s ease 0s;
}

/* ---- Dropdowns ------------------------------------------------------ */

.gform_wrapper.gform-theme .ginput_container_select {
  position: relative;
}

/* Chevron, flips when open/focused. */
.gform_wrapper.gform-theme .ginput_container_select::after {
  content: "";
  position: absolute;
  right: calc(var(--form-field-pad-x) + 0.3rem);
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--form-label);
  border-bottom: 1.5px solid var(--form-label);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.gform_wrapper.gform-theme .mw-float.is-focused .ginput_container_select::after {
  transform: translateY(-25%) rotate(225deg);
}

.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme .mw-select__trigger {
  padding-right: calc(var(--form-field-pad-x) + 2rem);
  cursor: pointer;
}

.gform_wrapper.gform-theme select option {
  color: #222;
  background: #fff;
}

/* Custom select (mouse) */
.gform_wrapper.gform-theme .mw-select__native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.gform_wrapper.gform-theme .mw-select__trigger {
  min-height: calc(1.4em + 1.2rem);
}

/* "Select…" prompt until something's chosen (the select's own
   placeholder option text, set by js/form-fields.js). */
.gform_wrapper.gform-theme .mw-select__value:empty::before {
  content: attr(data-placeholder);
}

/* The list pops up over the field rather than dropping below it, like a
   native menu: js/form-fields.js sets `top` so the chosen option (or
   the first) sits exactly where the field is, nudged to stay on
   screen, and grows it from that spot. It's pulled out to the left by
   the highlighted option's dash space, so that option's text lands
   exactly on the field's. */
.gform_wrapper.gform-theme .mw-select__list {
  position: absolute;
  top: 0;
  left: calc(var(--form-field-pad-x) - var(--space-lg) - 1.3rem);
  /* At least as wide as the field, wider if an option needs it, so
     options stay on one line. */
  width: max-content;
  min-width: calc(100% - (var(--form-field-pad-x) - var(--space-lg) - 1.3rem));
  max-width: calc(100vw - 2rem);
  z-index: 20;
  max-height: 17rem;
  margin: 0;
  padding: var(--space-xs) 0;
  overflow-y: auto;
  list-style: none;
  background: var(--form-panel-bg);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.55);
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0.92);
  transition:
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.35s;
}

.gform_wrapper.gform-theme .mw-select.is-open .mw-select__list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.gform_wrapper.gform-theme .mw-select__option {
  position: relative;
  padding: 0.6rem var(--space-lg) 0.6rem calc(var(--space-lg) + 0.9rem);
  color: var(--form-text);
  font-size: var(--fs-md); /* same as the field, so the chosen option overlays it exactly */
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: padding-left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, opacity 0.2s ease;
}

/* A short line slides in beside the highlighted option. */
.gform_wrapper.gform-theme .mw-select__option::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-lg);
  width: 0.6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gform_wrapper.gform-theme .mw-select__option.is-active {
  padding-left: calc(var(--space-lg) + 1.3rem);
  background: color-mix(in oklch, var(--form-text) 7%, transparent);
}

.gform_wrapper.gform-theme .mw-select__option.is-active::before {
  transform: scaleX(1);
}

.gform_wrapper.gform-theme .mw-select__option[aria-selected="true"] {
  font-style: italic;
}

/* ---- Date ----------------------------------------------------------- */

.gform_wrapper.gform-theme .ginput_container_date {
  position: relative;
}

.gform_wrapper.gform-theme .gform-datepicker-toggle {
  position: absolute;
  right: var(--form-field-pad-x);
  bottom: 0.7rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  background: var(--form-label);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.gform_wrapper.gform-theme .gform-datepicker-toggle:hover,
.gform_wrapper.gform-theme .gform-datepicker-toggle:focus-visible {
  background: var(--form-accent);
}

.gform_wrapper.gform-theme .gform-datepicker-toggle > * {
  display: none;
}

/* The pop-up calendar (Gravity Forms' accessible date picker — it's
   built inside .ginput_container_date). Same panel as the custom
   dropdown list: --form-panel-bg, --form-text, --form-accent.
   Gravity Forms' own date-picker rules still apply here (they don't
   honour the framework opt-out), so these go through table.calendar
   to outrank them.
   It opens upward: Contact Me's first section clips anything that
   runs past its bottom edge, and there's always room above the field.
   Classes: .day (a date), .dayToday, .dayMarked (the chosen date),
   .selected (the date the keyboard is on), .nav.btn (prev / next). */
.gform_wrapper.gform-theme .gform-datepicker-calendar {
  position: absolute;
  inset: auto auto calc(100% + var(--space-2xs)) 0;
  z-index: 30 !important; /* Gravity Forms sets 9999 !important */
  width: min(20rem, calc(100vw - 2rem));
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 0;
  border-radius: 0;
  background: var(--form-panel-bg);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.55);
  color: var(--form-text);
  font-family: var(--ff-body);
  transform: none;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar :is(td, th) {
  block-size: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--form-text);
  text-align: center;
  vertical-align: middle;
}

/* Month / year rows: the select in the middle, arrows either side. */
.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar :is(.yearSelector, .monthSelector) td {
  padding-bottom: var(--space-2xs);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar select {
  display: block;
  /* Full width of its cell: an auto-width select is sized from the
     option text without the letter-spacing, so the spaced-out year
     got clipped. */
  width: 100%;
  min-height: 0;
  padding: 0.15rem 0.25rem;
  border: 0;
  background: none;
  color: var(--form-text);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  line-height: 1.2;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar .yearSelector select {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--form-label);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar select:focus-visible {
  outline: 1px solid var(--form-accent);
  outline-offset: 2px;
}

/* Prev / next: thin chevrons in place of the double arrows. */
.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn {
  position: static;
  inset: auto;
  inline-size: 2rem;
  block-size: auto;
  color: var(--form-label);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn:is(:hover, :focus-visible) {
  opacity: 1;
  outline: none;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn > span {
  display: none;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn::before {
  content: "";
  position: static;
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border: 0;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: none;
  -webkit-mask: none;
  mask: none;
  transform: rotate(45deg);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn.next::before {
  transform: rotate(-135deg);
}

/* Year arrows: a little smaller than the month ones. */
.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.nav.btn.year::before {
  width: 0.35rem;
  height: 0.35rem;
}

/* Day-of-week initials */
.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar th.week {
  padding: var(--space-xs) 0 var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--form-label);
  opacity: 0.6;
}

/* Dates: round, soft hover, a ring for today and for the keyboard
   cursor, filled for the chosen date. */
.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.day {
  cursor: pointer;
  outline: none;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.day > span {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin: 0.1rem auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-size: var(--fs-sm);
  color: var(--form-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.day:hover > span {
  background: color-mix(in oklch, var(--form-text) 14%, transparent);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.dayToday > span {
  border-color: color-mix(in oklch, var(--form-accent) 45%, transparent);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.selected > span {
  border-color: var(--form-accent);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.dayMarked > span {
  border-color: var(--form-accent);
  background: var(--form-accent);
  color: var(--form-button-text);
}

.gform_wrapper.gform-theme .gform-datepicker-calendar table.calendar td.day.disabled > span {
  opacity: 0.3;
  cursor: default;
}

/* "Press F1 for help" (keyboard hint) — kept, just quiet. */
.gform_wrapper.gform-theme .gform-datepicker-calendar .monthMessage {
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--form-label);
  opacity: 0.5;
}

.gform_wrapper.gform-theme .gform-datepicker-calendar .monthMessage p {
  margin: 0;
  font-weight: 400;
}

/* ---- Radios --------------------------------------------------------- */

.gform_wrapper.gform-theme .gfield_radio {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.gform_wrapper.gform-theme .gfield_radio .gchoice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gform_wrapper.gform-theme input[type="radio"] {
  display: grid;
  place-content: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  appearance: none;
  border: 1px solid var(--form-line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.gform_wrapper.gform-theme input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--form-accent);
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.gform_wrapper.gform-theme input[type="radio"]:checked {
  border-color: var(--form-accent);
}

.gform_wrapper.gform-theme input[type="radio"]:checked::before {
  transform: scale(1);
}

.gform_wrapper.gform-theme input[type="radio"]:focus-visible {
  outline: 1px solid var(--form-accent);
  outline-offset: 3px;
}

.gform_wrapper.gform-theme .gchoice label {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--form-text);
  cursor: pointer;
}

/* ---- File upload ---------------------------------------------------- */

.gform_wrapper.gform-theme input[type="file"] {
  width: 100%;
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px dashed var(--form-line);
  background: none;
  color: var(--form-label);
  font: inherit;
  font-size: var(--fs-sm);
}

.gform_wrapper.gform-theme input[type="file"]::file-selector-button {
  margin-right: var(--space-md);
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--form-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--form-text);
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gform_wrapper.gform-theme input[type="file"]::file-selector-button:hover {
  background: var(--form-accent);
  color: var(--form-button-text);
}

.gform_wrapper.gform-theme .gfield_description {
  margin-top: var(--space-2xs);
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--form-label);
  opacity: 0.75;
}

/* ---- Submit --------------------------------------------------------- */

.gform_wrapper.gform-theme .gform_footer {
  margin-top: var(--space-3xl);
  padding: 0;
}

/* Outline pill that fills with the accent from the left on hover. */
.gform_wrapper.gform-theme .gform_button {
  padding: var(--space-sm) var(--space-4xl);
  appearance: none;
  border: 1px solid var(--form-accent);
  border-radius: 999px;
  background: linear-gradient(var(--form-accent), var(--form-accent)) no-repeat left center / 0% 100%;
  color: var(--form-text);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-size 0.6s cubic-bezier(0.7, 0, 0.2, 1),
    color 0.4s ease;
}

.gform_wrapper.gform-theme .gform_button:hover,
.gform_wrapper.gform-theme .gform_button:focus-visible {
  background-size: 100% 100%;
  color: var(--form-button-text);
  outline: none;
}

/* ---- Validation ----------------------------------------------------- */

.gform_wrapper.gform-theme .gform_validation_errors {
  margin-bottom: var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--form-error);
  background: none;
  box-shadow: none;
  color: var(--form-error);
}

.gform_wrapper.gform-theme .gform_validation_errors :is(h2, .gform_submission_error) {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: inherit;
}

.gform_wrapper.gform-theme .gfield_error :is(input, textarea, select, .mw-select__trigger) {
  border-bottom-color: var(--form-error);
}

.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
  margin-top: var(--space-2xs);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  color: var(--form-error);
}


/* ============================================================
   PER PAGE
   ============================================================ */

/* ---- Contact Me ---------------------------------------------------- */

body.page-contact-me {
  --form-text: var(--old-lace);
  --form-label: var(--old-lace);
  --form-line: color-mix(in oklch, var(--old-lace) 45%, transparent);
  --form-accent: var(--old-lace);
  --form-button-text: var(--earth-green-d3);
  --form-panel-bg: var(--earth-green-d4);
  --form-field-bg: color-mix(in oklch, var(--earth-green) 55%, transparent);
  --form-field-pad-x: 0.85rem;
}

/* Same reading width as .text-container on the other pages */
body.page-contact-me .gform_wrapper {
  max-width: 75ch;
  margin-inline: auto;
  background: var(--earth-green-d3);
  padding: 3rem 3rem 6rem;
}

/* Mobile (same 50rem breakpoint as main.css): no panel — the form sits
   straight on the page colour, at the same 90% width as the text on
   the other pages. */
@media (max-width: 50rem) {
  body.page-contact-me .gform_wrapper.gform-theme {
    position: static;
    z-index: auto;
    width: 90%;
    max-width: none;
    padding: 0;
    background: none;
  }
}