/* =================================================================
   GRAVITY FORMS - Fate Community Theatre
   =================================================================
   Gravity Forms ships a token-driven theme that assumes a light
   ground: labels #112337, submit #204ce5 on a 3px radius. Its four
   stylesheets load after the theme's, so equal-specificity overrides
   in main.css lose every tie - including on the custom properties
   themselves. This file is enqueued with those stylesheets as
   dependencies, so plain selectors win and no specificity arms race
   is needed. Colour tokens come from main.css :root.
   ================================================================= */

.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme.gform-theme--framework {
    --gf-ctrl-label-color-primary: var(--color-cream);
    --gf-ctrl-label-color-secondary: var(--color-cream-72);
    --gf-ctrl-label-color-req: var(--color-gold-lift);
    --gf-ctrl-desc-color: var(--color-cream-72);
    --gf-ctrl-color: var(--color-cream);
    --gf-ctrl-bg: var(--color-ink-deep);
    --gf-ctrl-border-color: var(--color-line-strong);
    --gf-ctrl-border-color-focus: var(--color-gold-lift);
    --gf-ctrl-placeholder-color: var(--color-cream-45);
    --gf-ctrl-radius: 0;
    --gf-color-primary: var(--color-gold-lift);
    --gf-color-danger: var(--color-danger-light);
    --gf-ctrl-btn-bg-color-primary: var(--color-red);
    --gf-ctrl-btn-bg-color-hover-primary: var(--color-red-hover);
    --gf-ctrl-btn-color-primary: var(--color-cream);
    --gf-ctrl-btn-border-color-primary: var(--color-red);
    --gf-ctrl-btn-radius: 0;
}

/* Labels, descriptions, inputs */
.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_label,
.gform_wrapper legend.gform-field-label { color: var(--color-cream); }

.gform_wrapper .gfield_description,
.gform_wrapper .gform-field-label--type-sub { color: var(--color-cream-72); }

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text { color: var(--color-gold-lift); }

.gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
    background: var(--color-ink-deep);
    color: var(--color-cream);
    border: 1px solid var(--color-line-strong);
    border-radius: 0;
}
.gform_wrapper input:not([type="submit"]):not([type="button"]):focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--color-gold-lift);
    outline: 2px solid transparent;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--color-cream-45); }

.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_submission_error,
.gform_wrapper .gform_validation_error_link { color: var(--color-danger-light); }

/* Submit button takes the site's own button treatment */
.gform_wrapper .gform_button,
.gform_wrapper .gform_button.button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.95em 1.75em;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-btn);
    background: var(--color-red);
    color: var(--color-cream);
    border: 1px solid var(--color-red);
    border-radius: 0;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button.button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
    background: var(--color-red-hover);
    border-color: var(--color-red-hover);
    color: var(--color-cream);
}

/* Confirmation / validation panels */
.gform_confirmation_message {
    padding: var(--space-lg);
    border: 1px solid rgba(195, 136, 36, 0.45);
    background: rgba(195, 136, 36, 0.06);
    color: var(--color-cream);
}

/* ---- Paper ground: ink type on white fields ---- */
[class*="--bg-light"] .gform_wrapper.gform-theme,
[class*="--bg-light"] .gform_wrapper.gform-theme.gform-theme--framework {
    --gf-ctrl-label-color-primary: var(--color-ink);
    --gf-ctrl-label-color-secondary: rgba(20, 16, 14, 0.72);
    --gf-ctrl-label-color-req: var(--color-red);
    --gf-ctrl-desc-color: rgba(20, 16, 14, 0.72);
    --gf-ctrl-color: var(--color-ink);
    --gf-ctrl-bg: #fff;
    --gf-ctrl-border-color: rgba(20, 16, 14, 0.35);
    --gf-ctrl-placeholder-color: rgba(20, 16, 14, 0.5);
    --gf-color-primary: var(--color-red);
}
[class*="--bg-light"] .gform_wrapper .gform-field-label,
[class*="--bg-light"] .gform_wrapper .gfield_label,
[class*="--bg-light"] .gform_wrapper legend.gform-field-label { color: var(--color-ink); }
[class*="--bg-light"] .gform_wrapper .gfield_description { color: rgba(20, 16, 14, 0.72); }
[class*="--bg-light"] .gform_wrapper .gfield_required,
[class*="--bg-light"] .gform_wrapper .gfield_required_text { color: var(--color-red); }
[class*="--bg-light"] .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[class*="--bg-light"] .gform_wrapper textarea,
[class*="--bg-light"] .gform_wrapper select {
    background: #fff;
    color: var(--color-ink);
    border-color: rgba(20, 16, 14, 0.35);
}
[class*="--bg-light"] .gform_wrapper input::placeholder,
[class*="--bg-light"] .gform_wrapper textarea::placeholder { color: rgba(20, 16, 14, 0.5); }
[class*="--bg-light"] .gform_wrapper .gfield_validation_message,
[class*="--bg-light"] .gform_wrapper .gform_submission_error { color: #B31018; }

/* Newsletter band: field and button read as one unit */
.c-email__form .gform_wrapper .gform_footer { margin: var(--space-sm) 0 0; padding: 0; }


/* -----------------------------------------------------------------
   SPECIFICITY MATCHES
   Two rules outrank a plain .gform_wrapper descendant selector even
   from a later stylesheet, so these mirror their selector shape.
   ----------------------------------------------------------------- */

/* The theme's own (0,3,1) rule colours the required mark from the
   error ramp, which is red on ink. */
div.gform-theme--framework .gform-field-label > .gfield_required,
div.gform-theme--framework .gform-field-label > .gfield_required_text {
    color: var(--color-gold-lift);
}
[class*="--bg-light"] div.gform-theme--framework .gform-field-label > .gfield_required,
[class*="--bg-light"] div.gform-theme--framework .gform-field-label > .gfield_required_text {
    color: var(--color-red);
}

/* The submit button needs `!important` at matching specificity, not because
   of a preference for it but because Gravity Forms' button-icon rule lands on
   the button itself with:
       font-family: var(--gf-icon-font-family) !important;
   No icon is configured, so that variable is empty, the declaration is invalid
   at computed-value time, and font-family falls back to inherited - which is
   why the button rendered in the body face. The selector below is GF's own,
   at equal (0,6,1) specificity; this file loads after theirs, so the tie
   resolves our way. Scoped to these two properties only. */
.gform-theme--framework.gform-theme.gform_wrapper input[type="submit"].button.gform_button,
.gform-theme--framework.gform-theme.gform_wrapper input[type="button"].button.gform_button,
.gform-theme--framework.gform-theme.gform_wrapper button.button.gform_button {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-btn);
    background: var(--color-red);
    color: var(--color-cream);
    border: 1px solid var(--color-red);
    border-radius: 0;
    padding: 0.95em 1.75em;
}
.gform-theme--framework.gform-theme.gform_wrapper input[type="submit"].button.gform_button:hover,
.gform-theme--framework.gform-theme.gform_wrapper input[type="button"].button.gform_button:hover,
.gform-theme--framework.gform-theme.gform_wrapper button.button.gform_button:hover {
    background: var(--color-red-hover);
    border-color: var(--color-red-hover);
    color: var(--color-cream);
}


/* -----------------------------------------------------------------
   LIGHT FORM CARD
   Form sections put the form on a paper card whatever the section
   surface, so its fields always use ink type on white. Each selector
   here outranks its dark-ground counterpart above by one class.
   ----------------------------------------------------------------- */

.c-form-section__form .gform_wrapper.gform-theme,
.c-form-section__form .gform_wrapper.gform-theme.gform-theme--framework {
    --gf-ctrl-label-color-primary: var(--color-ink);
    --gf-ctrl-label-color-secondary: rgba(20, 16, 14, 0.72);
    --gf-ctrl-label-color-req: var(--color-red);
    --gf-ctrl-desc-color: rgba(20, 16, 14, 0.72);
    --gf-ctrl-color: var(--color-ink);
    --gf-ctrl-bg: #fff;
    --gf-ctrl-border-color: rgba(20, 16, 14, 0.35);
    --gf-ctrl-placeholder-color: rgba(20, 16, 14, 0.5);
    --gf-color-primary: var(--color-red);
    --gf-color-danger: #b31018;
}
.c-form-section__form .gform_wrapper .gform-field-label,
.c-form-section__form .gform_wrapper .gfield_label,
.c-form-section__form .gform_wrapper legend.gform-field-label { color: var(--color-ink); }
.c-form-section__form .gform_wrapper .gfield_description,
.c-form-section__form .gform_wrapper .gform-field-label--type-sub { color: rgba(20, 16, 14, 0.72); }
.c-form-section__form .gform_wrapper .gfield_required,
.c-form-section__form .gform_wrapper .gfield_required_text { color: var(--color-red); }
.c-form-section__form div.gform-theme--framework .gform-field-label > .gfield_required,
.c-form-section__form div.gform-theme--framework .gform-field-label > .gfield_required_text { color: var(--color-red); }

.c-form-section__form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.c-form-section__form .gform_wrapper textarea,
.c-form-section__form .gform_wrapper select {
    background: #fff;
    color: var(--color-ink);
    border: 1px solid rgba(20, 16, 14, 0.35);
    border-radius: 0;
}
.c-form-section__form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
.c-form-section__form .gform_wrapper textarea:focus,
.c-form-section__form .gform_wrapper select:focus {
    border-color: var(--color-red);
    outline: 2px solid rgba(126, 4, 9, 0.25);
    outline-offset: 0;
}
.c-form-section__form .gform_wrapper input::placeholder,
.c-form-section__form .gform_wrapper textarea::placeholder { color: rgba(20, 16, 14, 0.5); }
.c-form-section__form .gform_wrapper .gfield_validation_message,
.c-form-section__form .gform_wrapper .gform_submission_error,
.c-form-section__form .gform_wrapper .gform_validation_error_link { color: #b31018; }
.c-form-section__form .gform_confirmation_message {
    background: #fff;
    color: var(--color-ink);
    border-color: rgba(126, 4, 9, 0.3);
}


/* -----------------------------------------------------------------
   The theme's base stylesheet colours .gfield_required_text and the
   validation messages from the error ramp WITH !important (main.css,
   the ".gfield_required_text, .gform_validation_error_link, ..." rule).
   On the light card that measured 2.4:1. Matching !important with
   more specificity is the only override that holds.
   ----------------------------------------------------------------- */
.gform_wrapper .gfield_required_text { color: var(--color-gold-lift) !important; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_validation_error_link,
.gform_wrapper .gform_submission_error { color: var(--color-danger-light) !important; }

.c-form-section__form .gform_wrapper .gfield_required_text { color: var(--color-red) !important; }
.c-form-section__form .gform_wrapper .gfield_validation_message,
.c-form-section__form .gform_wrapper .gform_validation_error_link,
.c-form-section__form .gform_wrapper .gform_submission_error { color: #b31018 !important; }


/* -----------------------------------------------------------------
   Choice inputs. The theme's base rule (.gform_body input) sizes
   every input like a text field, with !important, so checkboxes
   came out 34x50. Hand them back to Gravity Forms' own sizing.
   The tick colour is declared on the input itself because Gravity
   Forms prints per-form colour variables on an ID selector.
   ----------------------------------------------------------------- */
.gform_body input[type="checkbox"],
.gform_body input[type="radio"] {
    padding: 0 !important;
    min-height: 0 !important;
    display: inline-grid !important;
}
.c-form-section__form .gform_wrapper input[type="checkbox"] { --gf-ctrl-choice-check-color: var(--color-red); }

/* Long choice lists sit in two columns on the form card, one on phones.
   Add the fct-two-col class to the field in the form editor. */
.gform_wrapper .gfield.fct-two-col .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
}
@media (max-width: 640px) {
    .gform_wrapper .gfield.fct-two-col .gfield_checkbox { grid-template-columns: minmax(0, 1fr); }
}