/*
 * Public feedback block.
 *
 * The first version of this was a lavender gradient panel with a soft glow
 * shadow, a pink kicker dot, 22px corners and an all-caps micro-label above
 * every field. Every one of those details is imported from a marketing hero,
 * and stacked above the footer it looked like a component from another site:
 * all surface, no structure.
 *
 * This follows the way the rest of the site is actually built, which is flat
 * and typographic. A section here is a heading, a measure, and a rule. The FAQ
 * block in faqs.css is the closest sibling and the model for the surfaces: a
 * 1px border, a 10px radius and a --sk-soft fill, no gradient, no shadow.
 *
 * The tokens are the site's own, declared with the same light-mode values and
 * the same dark-mode overrides as faqs.css. They are scoped to .sk-fb for the
 * reason faqs.css documents: color-scheme.css only declares them for
 * .sk-home-page and .sk-services-page, so on a page that is neither, every
 * var() would fall through to the light fallback in dark mode and put a
 * near-white card on a dark page.
 */

.sk-fb {
    --sk-ink: #1f2937;
    --sk-muted: #5f5269;
    --sk-line: #e3e1e8;
    --sk-soft: #fbfafc;
    --sk-accent: #68438b;
    --sk-accent-dark: #452b61;
    --sk-error: #a6324a;
    --sk-ok: #1f6b45;

/* Bottom margin on purpose. The block is injected through blocksy:footer:before,
   so it sits directly above the footer with nothing between it and the values
   row. With only a top margin the last line of the form touched the footer's
   top edge. */
    max-width: 1120px;
    margin: 2.4rem auto 3rem;
    padding: 0;
    box-sizing: border-box;
    color: var(--sk-ink);
    font-family: inherit;
    line-height: 1.65;
}

html[data-sk-scheme="dark"] .sk-fb {
    --sk-ink: #e6e2ee;
    --sk-muted: #a79fba;
    --sk-line: #38314a;
    --sk-soft: #221d2e;
    --sk-accent: #cba4ec;
    --sk-accent-dark: #e3cff7;
    --sk-error: #ff9fb0;
    --sk-ok: #7ed7a8;
}

.sk-fb * {
    box-sizing: border-box;
}

/* Same size and weight as the theme's own <h2>, which is what .sk-faq > h2
   inherits. Sized in rem against the same base, so the two sections do not
   disagree about what a section heading is. */
.sk-fb-title {
    margin: 0 0 1rem;
    color: var(--sk-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.sk-fb-lede {
    max-width: 620px;
    margin: 0 0 1.4rem;
    color: var(--sk-muted);
    font-size: 0.95rem;
}

/* No outer panel.
 *
 * This was a bordered box containing bordered fields, which is a box inside a
 * box and the reason the block kept reading as a form module dropped into the
 * page. The FAQ above it is a single layer: a bordered row per item, nothing
 * around the group. So the fields here sit directly on the page and only the
 * controls are bordered. */
.sk-fb-form {
    max-width: 660px;
}

.sk-fb-row {
    margin: 0 0 14px;
}

.sk-fb-label {
    display: block;
    margin: 0 0 6px;
    color: var(--sk-ink);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.sk-fb-optional {
    margin-left: 6px;
    color: var(--sk-muted);
    font-size: 0.79rem;
    font-weight: 400;
}

/* The controls sit on the page surface, which is why they need a border at all:
   on a white page an unbordered input is invisible. The colour is the page
   background from the theme rather than a hardcoded white, so the field does
   not turn into a bright rectangle in the dark scheme. */
.sk-fb-textarea,
.sk-fb-select {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sk-ink);
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.6;
}

.sk-fb-textarea {
    min-height: 96px;
    resize: vertical;
}

.sk-fb-select {
    appearance: auto;
}

.sk-fb-textarea::placeholder {
    color: #9a90a4;
}

html[data-sk-scheme="dark"] .sk-fb-textarea,
html[data-sk-scheme="dark"] .sk-fb-select {
    background: #1b1725;
    border-color: #3d3650;
}

/* A 2px ring in the accent, at the offset a native control uses. The earlier
   3px glow was the other half of why it looked decorated. */
.sk-fb-textarea:focus-visible,
.sk-fb-select:focus-visible {
    border-color: var(--sk-accent);
    outline: 2px solid var(--sk-accent);
    outline-offset: -1px;
}

.sk-fb-count {
    margin: 5px 0 0;
    color: var(--sk-muted);
    font-size: 0.78rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sk-fb-count.is-near { color: var(--sk-accent); }
.sk-fb-count.is-over { color: var(--sk-error); }

.sk-fb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

/* Solid accent, 8px radius, no shadow, no hover lift. .sk-home-button sets the
   precedent at 11px; going smaller here keeps the form subordinate to the page
   actions rather than competing with them. */
.sk-fb-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--sk-accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.sk-fb-submit:hover:not(:disabled) {
    background: var(--sk-accent-dark);
}

html[data-sk-scheme="dark"] .sk-fb-submit {
    color: #2f1c40;
}

html[data-sk-scheme="dark"] .sk-fb-submit:hover:not(:disabled) {
    background: var(--sk-accent-dark);
}

.sk-fb-submit:focus-visible {
    outline: 2px solid var(--sk-accent);
    outline-offset: 2px;
}

.sk-fb-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Plain muted text, not a pill. The privacy line is a sentence about the form,
   not a badge. */
.sk-fb-note {
    flex: 1 1 240px;
    margin: 0;
    color: var(--sk-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.sk-fb-status {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

/* A left rule rather than a tinted rounded box: the same device the FAQ uses to
   mark an open item, and it does not add another border radius to the page. */
.sk-fb-status:not(:empty) {
    margin-top: 12px;
    padding: 2px 0 2px 11px;
    border-left: 3px solid currentColor;
}

.sk-fb-status.is-success { color: var(--sk-ok); }
.sk-fb-status.is-error { color: var(--sk-error); }

/* Off-screen, not display:none: some bots skip what is not rendered. */
.sk-fb-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 620px) {
    .sk-fb {
        margin-top: 1.8rem;
        margin-bottom: 2.2rem;
    }

    .sk-fb-title {
        font-size: 1.35rem;
    }

    .sk-fb-submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-fb-submit {
        transition: none;
    }
}