/*
 * Contact
 * Template: template-contact.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * .card and .panel come from single-event.css. The Gravity Form uses its
 * Orbital theme, tinted with the theme tokens through its CSS variables.
 * The .contact-form skin below is shared: template-event-enquiry.php wraps
 * its form in the same class (see css/components/event-enquiry.css).
 */

.contact {
    --section-pad: var(--space-2xl);
    background-color: var(--color-muted);
}

.contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-2xl);
    align-items: start;
}

/* --- Details ------------------------------------------------------------- */

.contact-details__heading,
.contact-form__heading {
    margin: 0 0 var(--space-md);
    font-size: var(--text-2);
}

.contact-details__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-details__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-background);
}

.contact-details__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.contact-details__label {
    color: var(--color-secondary);
}

.contact-details__value {
    margin: 0;
    font-size: var(--text-0);
}

.contact-details__link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.contact-details__link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.contact-details__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.contact-details__address {
    font-style: normal;
    font-weight: var(--font-light);
    line-height: 1.5;
}

/* --- Gravity Form ---------------------------------------------------------
 * Styled to match the Events page filter fields (events-archive.css):
 * heading-font labels, 2px secondary border, .5rem radius, primary border
 * plus a contrast ring on focus. Gravity Forms prints its own variables in
 * an inline <style> scoped by the wrapper's ID, so the spacing variables
 * below carry !important; everything else is plain rules on its markup.
 */

.contact-form .gform_wrapper {
    --gf-form-gap-y: var(--space-md) !important;
    --gf-form-gap-x: var(--space-md) !important;
    /* Controls: Gravity Forms sizes them from --gf-ctrl-size, so release that and let the padding set the height like the filter fields. */
    --gf-ctrl-size: auto !important;
    --gf-ctrl-padding-x: var(--space-sm) !important;
    --gf-ctrl-padding-y: var(--space-sm) !important;
    --gf-ctrl-border-color: var(--color-secondary) !important;
    --gf-ctrl-border-width: 2px !important;
    --gf-ctrl-radius: .5rem !important;
    --gf-ctrl-bg-color: var(--color-background) !important;
    --gf-ctrl-bg-color-focus: var(--color-background) !important;
    /* Focus: primary border with a contrast ring, as on the events filter. */
    --gf-ctrl-border-color-focus: var(--color-primary) !important;
    --gf-ctrl-outline-color-focus: var(--color-contrast) !important;
    --gf-ctrl-outline-width-focus: var(--space-3xs) !important;
    --gf-ctrl-shadow-focus: 0 0 0 var(--space-3xs) var(--color-contrast) !important;
    /* Submit button: Gravity Forms paints it from these, so set them here rather than fight its selectors. */
    --gf-ctrl-btn-bg-color-primary: var(--color-secondary) !important;
    --gf-ctrl-btn-bg-color-hover-primary: var(--color-primary) !important;
    --gf-ctrl-btn-border-color-primary: var(--color-secondary) !important;
    --gf-ctrl-btn-border-color-hover-primary: var(--color-primary) !important;
    --gf-ctrl-btn-color-primary: var(--color-contrast) !important;
    --gf-ctrl-btn-color-hover-primary: var(--color-contrast) !important;
    --gf-ctrl-btn-radius: .5rem !important;
    --gf-ctrl-btn-padding-x: var(--space-xl) !important;
    --gf-ctrl-btn-padding-y: var(--space-sm) !important;
    --gf-ctrl-btn-font-family: var(--font-body) !important;
    --gf-ctrl-btn-font-size: var(--text-0) !important;
    --gf-ctrl-btn-font-weight: var(--font-regular) !important;
}

/* Field labels, same as the filter labels. */
.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper legend.gfield_label {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-heading);
    font-size: var(--text-1);
    font-weight: var(--font-regular);
    line-height: 1.1;
    color: var(--color-text);
}

.contact-form .gform_wrapper .gfield_required {
    font-family: var(--font-body);
    font-size: var(--text--1);
    font-weight: var(--font-regular);
    color: var(--color-secondary);
}

/* Sub-labels (First / Last / Confirm Email) and descriptions. */
.contact-form .gform_wrapper .gform-field-label--type-sub,
.contact-form .gform_wrapper .gfield_description,
.contact-form .gform_wrapper .charleft {
    font-family: var(--font-body);
    font-size: var(--text--1);
    font-weight: var(--font-light);
    color: var(--color-text);
    padding: 0;
}

.contact-form .gform_wrapper .gform-field-label--type-sub {
    margin: var(--space-3xs) 0 var(--space-2xs);
}

.contact-form .gform_wrapper .gfield_description {
    margin: 0 0 var(--space-2xs);
}

.contact-form .gform_wrapper .charleft {
    margin-top: var(--space-2xs);
}

/* Inputs, mirroring .events-filter__input. */
.contact-form .gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.contact-form .gform_wrapper .gfield textarea,
.contact-form .gform_wrapper .gfield select {
    width: 100%;
    padding: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-0);
    font-weight: var(--font-regular);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    border: 2px solid var(--color-secondary);
    border-radius: .5rem;
    box-shadow: none;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.contact-form .gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.contact-form .gform_wrapper .gfield textarea:focus,
.contact-form .gform_wrapper .gfield select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--space-3xs) var(--color-contrast);
}

.contact-form .gform_wrapper .gfield textarea {
    min-height: var(--space-4xl);
    resize: vertical;
}

.contact-form .gform_wrapper .gfield input::placeholder,
.contact-form .gform_wrapper .gfield textarea::placeholder {
    color: var(--color-text);
    opacity: 0.6;
}

/* Submit: the theme's secondary button. */
.contact-form .gform_wrapper .gform_footer {
    margin: var(--space-md) 0 0;
    padding: 0;
}

.contact-form .gform_wrapper .gform_footer .gform_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-0);
    font-weight: var(--font-regular);
    line-height: 1.5;
    color: var(--color-contrast);
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.contact-form .gform_wrapper .gform_footer .gform_button:hover,
.contact-form .gform_wrapper .gform_footer .gform_button:focus-visible {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Validation: errors in the secondary green, not Gravity Forms' red. */
.contact-form .gform_wrapper .gfield_error input,
.contact-form .gform_wrapper .gfield_error textarea {
    border-color: var(--color-primary);
}

.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .gform_validation_errors {
    font-size: var(--text--1);
    color: var(--color-primary);
    background: none;
    border: 0;
    box-shadow: none;
    padding: var(--space-2xs) 0 0;
}

@media screen and (max-width: 1024px) {

    .contact__layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

}