/*
 * Evaluation Survey
 * Template: single-evaluation-survey.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * One centred card under the page hero. Locked, it is the password form
 * (.evaluation-gate), wearing the member-form classes from member-forms.css
 * at the login form's width. Unlocked, it is the intro and the Evaluation
 * Form (.evaluation-form), wider so the likert tables have room.
 *
 * The Gravity Form wears the .contact-form skin from contact.css; only
 * what that form does not have is styled here: the multi-page progress
 * bar, section headings, the Survey Add-On's likert tables and the
 * Previous / Next buttons. .card comes from single-event.css.
 */

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

.evaluation-survey__layout {
    display: flex;
    justify-content: center;
}

/* --- Password gate ------------------------------------------------------- */

.evaluation-gate {
    width: 100%;
    max-width: 32rem;
}

/* --- Form card ----------------------------------------------------------- */

.evaluation-form {
    width: 100%;
    max-width: 56rem;
}

/* Editor intro: the page.php prose rules, but the card sets the measure (page-content.css loads later, hence the extra specificity). */
.evaluation-form .evaluation-form__intro {
    max-width: none;
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-contrast);
}

/* --- Gravity Form -------------------------------------------------------- */

/*
 * Gravity Forms prints its stylesheets after the theme's, so same-specificity
 * rules lose to it. Its theme framework paints the progress bar and the
 * likert radios from these variables, and the Orbital theme its primary
 * colour; set them here (with !important, over the inline block Gravity
 * Forms prints per form) rather than fight its selectors.
 */
.evaluation-form .gform_wrapper {
    --gf-color-primary: var(--color-secondary) !important;
    --gf-color-primary-darker: var(--color-primary) !important;
    --gf-color-primary-contrast: var(--color-contrast) !important;
    --gf-ctrl-choice-check-color: var(--color-secondary) !important;
    --gf-ctrl-choice-size: 1.25rem !important;
    --gf-survey-field-likert-row-odd-bg-color: var(--color-contrast) !important;
    --gf-radius: .5rem !important;
    /* Progress bar: "Step 1 of 9" in the label style, a contrast track and a secondary fill. */
    --gf-field-pg-prog-color: var(--color-text) !important;
    --gf-field-pg-prog-font-family: var(--font-heading) !important;
    --gf-field-pg-prog-font-size: var(--text-0) !important;
    --gf-field-pg-prog-font-weight: var(--font-regular) !important;
    --gf-field-pg-prog-line-height: 1.1 !important;
    --gf-field-pg-prog-title-margin-y-end: var(--space-2xs) !important;
    --gf-field-pg-prog-margin-y-end: var(--space-lg) !important;
    --gf-field-pg-prog-bar-bg-color: var(--color-contrast) !important;
    --gf-field-pg-prog-bar-bg-color-blue: var(--color-secondary) !important;
    --gf-field-pg-prog-bar-height: var(--space-sm) !important;
    --gf-field-pg-prog-bar-radius: 999px !important;
    /* Previous / Next footer. */
    --gf-form-footer-gap: var(--space-sm) !important;
    --gf-form-footer-margin-y-start: var(--space-lg) !important;
}

.evaluation-form .gform_wrapper .gf_progressbar .gf_progressbar_percentage {
    transition: width 0.3s ease-in-out;
}

/* Section headings introduce each page of questions. */
.evaluation-form .gform_wrapper .gsection {
    margin: 0;
    padding: 0;
    border: 0;
}

.evaluation-form .gform_wrapper .gsection_title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2);
    font-weight: var(--font-regular);
    line-height: 1.1;
    color: var(--color-primary);
}

/* Question statements: body copy rather than the heading-font labels the contact form uses. */
.evaluation-form .gform_wrapper .gsurvey-survey-field .gfield_label {
    font-family: var(--font-body);
    font-size: var(--text-0);
    font-weight: var(--font-regular);
    line-height: 1.4;
}

/* Likert table: the choice names as a quiet header row, a radio per column. */
.evaluation-form .gform_wrapper table.gsurvey-likert {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.evaluation-form .gform_wrapper table.gsurvey-likert th.gsurvey-likert-choice-label {
    padding: 0 var(--space-3xs) var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text--1);
    font-weight: var(--font-light);
    line-height: 1.2;
    color: var(--color-text);
}

.evaluation-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice {
    padding: var(--space-xs) var(--space-3xs);
    cursor: pointer;
}

.evaluation-form .gform_wrapper table.gsurvey-likert input[type="radio"] {
    margin: 0;
    accent-color: var(--color-secondary);
}

/* Previous / Next and Submit: the theme's secondary button (from contact.css) and its outline for "Previous". */
.evaluation-form .gform_wrapper .gform_page_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-lg) 0 0;
    border-top: 2px solid var(--color-contrast);
}

.evaluation-form .gform_wrapper .gform_page_footer .gform_next_button,
.evaluation-form .gform_wrapper .gform_page_footer .gform_previous_button,
.evaluation-form .gform_wrapper .gform_page_footer .gform_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    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, color 0.3s ease-in-out;
}

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

/* "Previous" sits on the left and "Next" on the right; on the first page, with no "Previous", "Next" stays right. */
.evaluation-form .gform_wrapper .gform_page_footer:not(:has(.gform_previous_button)) {
    justify-content: flex-end;
}

.evaluation-form .gform_wrapper .gform_page_footer .gform_previous_button {
    color: var(--color-secondary);
    background-color: transparent;
}

.evaluation-form .gform_wrapper .gform_page_footer .gform_previous_button:hover,
.evaluation-form .gform_wrapper .gform_page_footer .gform_previous_button:focus-visible {
    color: var(--color-contrast);
    background-color: var(--color-secondary);
}

/* Confirmation message after submitting. */
.evaluation-form .gform_confirmation_message {
    font-weight: var(--font-light);
}

/* --- Responsive ---------------------------------------------------------- */

/* The survey add-on stacks each likert row into a list of labelled radios at this width; give the rows some air. */
@media screen and (max-width: 761px) {

    .evaluation-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-2xs) var(--space-xs);
    }

    .evaluation-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice::after {
        padding: 0;
        position: static;
        font-family: var(--font-body);
        font-size: var(--text-0);
        font-weight: var(--font-light);
        color: var(--color-text);
    }

}

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

    .evaluation-form .gform_wrapper .gform_page_footer .gform_next_button,
    .evaluation-form .gform_wrapper .gform_page_footer .gform_previous_button,
    .evaluation-form .gform_wrapper .gform_page_footer .gform_button {
        flex: 1 1 auto;
    }

}