input,
textarea,
select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: var(--radius);
  background: var(--form-bg);
  color: var(--form-text);
}

textarea {
  min-height: 10rem;
  resize: vertical;
}

/* A native <select> does not pick up the same line-height/font metrics an
   <input> gets for free, so left to the browser it renders a different height
   than its siblings even with identical padding — the "select desalinhado"
   bug. `appearance: none` puts the shared padding/line-height above fully in
   charge of the box instead of the OS/GF chrome; the replacement chevron is
   drawn on Gravity Forms' own field wrapper below (a <select> cannot reliably
   host a pseudo-element), masked from the starter's own icon-angle-down.svg
   per rule 19a rather than an inline SVG, and painted with a token colour
   (rule 17). Long option text gets an ellipsis instead of overflowing.
   Scoped to `.gform_wrapper` because this stylesheet is enqueued site-wide
   (rule enforced by inc/enqueue.php) and the replacement chevron only exists
   inside a Gravity Forms field wrapper — a bare `select` on the rest of the
   site would otherwise lose its native arrow with nothing drawn in its place. */
.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.5;
  padding-right: 2.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--form-focus);
  outline-offset: 0;
  border-color: var(--form-focus-border);
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
}

form .btn-layout {
  margin-top: 0.75rem;
}

/* Modern Gravity Forms ships its own orbital/foundation CSS that overrides theme styling unless it is neutralised here: override the GF variables in preference to adding resets. */
.gform_wrapper {
  --gf-color-primary: var(--brand);
  --gf-color-primary-rgb: var(--brand-rgb);
  --gf-color-primary-darker: var(--brand-dark);
  --gf-color-primary-contrast: var(--white);
  --gf-color-primary-contrast-darker: var(--white);
  --gf-color-secondary: var(--ink);
  --gf-color-secondary-darker: var(--black);
  --gf-color-secondary-contrast: var(--white);
  --gf-ctrl-border-color-focus: var(--brand);
  /* Gravity Forms' own error red, named in the authority rather than typed here — a bare hex in a stylesheet is a colour a rebrand has to find by grep. */
  --gf-ctrl-border-color-error: var(--form-error);
}

/* Select chevron — drawn on GF's own `.ginput_container_select` wrapper (see
   the `select` rule above for why not on the control itself). 19a: masked from
   the shared icon file, never an inline SVG; 17: a token colour, no hex.
   GF's own <select> chevron variable is cleared ONLY here, not for the whole
   `.gform_wrapper` above: a "select" field is the only field type whose
   `.ginput_container_*` wrapper this theme draws a replacement chevron on.
   Country (address), name prefix, the date type="select" dropdowns and the
   AM/PM select all render inside a DIFFERENT wrapper class
   (`.ginput_container_address`, `_name`, `_date`, `_time`) that carries no
   `::after` of ours, so clearing the variable globally left every one of
   those without ANY arrow at all. Left alone there, GF's own default chevron
   still draws — not on-brand, but a visible arrow beats none — and it never
   collides with ours because this rule only turns GF's off exactly where ours
   takes over. */
.gform_wrapper .ginput_container_select {
  position: relative;
  --gf-ctrl-select-icon: none;
}

.gform_wrapper .ginput_container_select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.875rem;
  height: 0.5rem;
  transform: translateY(-50%);
  background-color: var(--form-text);
  -webkit-mask-image: url("../img/icons/icon-angle-down.svg");
  mask-image: url("../img/icons/icon-angle-down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

/* Specificity (0,3,1) via .gform-theme so this lands after GF's own per-control
   sizing rule and after the shared `select` rule above, on any page that has
   not already written its own (higher-specificity) select skin. */
.gform_wrapper.gform-theme .gfield select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Field-row alignment — a label that wraps to two lines (common once the
   grid's columns narrow, roughly the 1024px range) used to push just that
   field's control 21-24px below its neighbours in the same row, because each
   `.gfield` grid item stacked its label and control in plain flow.
   `.gform_fields` is GF's own CSS grid, one row per visual line of fields, so
   a shared SUBGRID row is what lets every `.gfield` in that row agree on where
   the label band ends and the control band starts, whatever any ONE field's
   own label height (or trailing description/validation message) does to that
   field's OWN total content height.
   `.gfield` subgrids exactly 2 rows from the parent: row 1 for the label
   (bottom-aligned inside it, so a short one-line label still ends flush with a
   two-line neighbour), row 2 for whatever comes right after the label. A
   description or validation message is either the second child too (falls
   into the shared row 2 alongside the control, extremely rare, and a
   plain-text .gfield_description reads fine, if a touch tight, in the same
   row as the control's cap-height) or a THIRD-plus child, which auto-places
   into an implicit row of its OWN beyond the shared span — a row every OTHER
   field in the line simply doesn't have, so it adds height only to the field
   that needs it, never to a plain neighbour. The one case this does not
   square up is a description placed ABOVE the control (a per-field GF
   setting, not this theme's default): the control itself then lands one row
   later than a plain neighbour's, so it is not top-aligned with it — a rarer
   combination `align-self: start` at least keeps harmless (nothing stretches
   to fill the gap).
   No fixed heights anywhere (rule 21a); the label's existing margin/gap and
   the copy itself are untouched. Below 768px each field is already its own
   single-column row with no neighbour to misalign against, so mobile is
   unaffected. */
@media (min-width: 768px) {
  .gform_wrapper .gform_fields > .gfield {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .gform_wrapper .gform_fields > .gfield > .gfield_label {
    display: flex;
    align-items: flex-end;
    grid-row: 1;
  }

  /* Nothing after the label stretches to fill a taller shared/local row —
     only the label (above) is meant to grow; a description or validation
     message keeps its own natural height so it can never inflate a
     neighbour's plain control. */
  .gform_wrapper .gform_fields > .gfield > .gfield_label ~ * {
    align-self: start;
  }
}

/* Renders "single input + submit button" forms on one row. */
.gf-inline .gform_wrapper form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  background: var(--form-bg);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 4px;
}
.gf-inline .gform_wrapper .gform_body,
.gf-inline .gform_wrapper .gform-body,
.gf-inline .gform_wrapper .gform_fields { flex: 1; margin: 0; padding: 0; }
.gf-inline .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }
.gf-inline .gform_wrapper .gfield_label { display: none !important; }
.gf-inline .gform_wrapper input[type="email"],
.gf-inline .gform_wrapper input[type="text"] {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.gf-inline .gform_wrapper .gform_footer {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
}
.gf-inline .gform_wrapper .gform_button.button {
  margin: 0 !important;
  width: auto !important;
}

/* GF sub-labels can inherit a serif from generic heading/label rules; keep them in the form's sans like every other label. */
.gform-field-label--type-sub,
.ginput_complex label {
  font-family: var(--sans) !important;
}