/**
 * Feedback: the feedback page around applari-core's form (Asiakaskokemukset,
 * shortcode [applari_palaute]). The plugin prints the form, the errors and
 * the thanks view and loads their base shape (palaute.css, on the feedback
 * page only, before the theme's files); this file gives them the theme's
 * colors, labels and buttons, and keeps the column narrow.
 *
 * class: feedback (the narrow column)
 *
 * Structure:
 *   .color-section.feedback-section
 *     Sisältö (global max width)
 *       .feedback                          narrow column, centered
 *         p.feedback-label                 label above the heading
 *         h2.feedback-title
 *         p.feedback-intro
 *         [applari_palaute]                form.applari-palaute or, after
 *                                          an answer, div.applari-palaute-kiitos
 *
 * After an answer the plugin prints the thanks view with its own heading,
 * so the label, heading and intro hide. The plugin takes the first page
 * that shows the form as the site's feedback page, so the block library
 * shows a note in the form's place (includes/setup/block-library.php).
 *
 * Plugin markup styled here: legend and field labels, the error box
 * (.applari-palaute-virheet), the submit button (theme button) and the
 * Google button (a.applari-palaute-google).
 *
 * Tuning: --feedback-width (640px), --rating-clr (stars, colors.css)
 *
 * Chain animations: none, the visitor came for the form.
 */

:root {
    --feedback-width: 640px;
}

/* (0,2,0): the editor's .wp-block width and GB's .gb-container reset would win */
.gb-container.feedback {
    max-width: var(--feedback-width);
    margin-left: auto;
    margin-right: auto;
}

.feedback-intro {
    margin-bottom: 40px;
}

.feedback:has(.applari-palaute-kiitos) :is(.feedback-label, .feedback-title, .feedback-intro) {
    display: none;
}

/* The plugin's variables, from the palette (palaute.css sets its own
   defaults on the same selectors and loads earlier). */
.applari-palaute,
.applari-palaute-kiitos {
    --applari-palaute-tahti: var(--rating-clr);
    --applari-palaute-tahti-pois: color-mix(in srgb, currentColor 20%, transparent);
    --applari-palaute-aksentti: var(--accent-clr);
    --applari-palaute-virhe: var(--error-clr);
}

.applari-palaute .applari-palaute-tahdet legend,
.applari-palaute .applari-palaute-kentta:not(.applari-palaute-valinta) > label {
    color: var(--heading-clr);
    font-weight: 600;
}

.applari-palaute .applari-palaute-virheet {
    background: color-mix(in srgb, var(--error-clr) 8%, transparent);
}

/* Both buttons carry GeneratePress's .button class, whose padding and colors
   would beat buttons.css: give them the theme's button, the palette's colors
   included (a light button in a dark section). */
.applari-palaute .applari-palaute-laheta,
a.applari-palaute-google {
    display: inline-block;
    padding: var(--button-padding);
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    text-decoration: none;
    transition: all var(--transition-speed) var(--transition-timing-function);
}

.applari-palaute .applari-palaute-laheta:hover,
.applari-palaute .applari-palaute-laheta:focus,
a.applari-palaute-google:hover,
a.applari-palaute-google:focus {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}