/* ============================================================
   Impact — site-wide stylesheet
   ------------------------------------------------------------
   0. Brand tints — the fills the 16 semantic design-system roles
      cannot hold (the palette stores roles, not brand shades).
   1. Form system — Contact Form 7 output. This markup is rendered
      by the plugin and owned by no block, so its look AND its
      field pairing live here: every place that renders a given
      form (a block, a template body, an archive) lays it out the
      same way without repeating the rules.
   2. Site defaults — selection.

   Motion is NOT here on purpose: a single blanket section fade read
   as almost nothing. Each block now animates its own parts, in its
   own stylesheet, where the markup it moves is visible.
   ============================================================ */

/* ---------- 0. BRAND TINTS ----------
   The design system stores exactly 16 semantic roles and rejects any
   other name, so these section fills live here instead. They are the
   colours the site paints WITH, not colours that mean something:

     navy-deep    the dark end of the hero gradient, deepest surfaces
     navy-soft    raised navy — hover states, gradient shoulders
     sage-strong  the mid-green section fill (the pale sage that dresses
                  buttons and hero accents is the `secondary` role)
     mist         the blue-green section fill
     sand         warm neutral — mirrors the `surfaceMuted` role so a
                  card token and a section fill never drift apart

   Blocks reference these with a hex fallback — var(--impact-sand, #edefe6)
   — so a block still renders correctly anywhere this sheet is absent. */

:root {
    --impact-navy-deep: #02040a;
    --impact-navy-soft: #2a4a75;
    --impact-sage-strong: #b9ca8d;
    --impact-mist: #c3dcdd;
    --impact-sand: #edefe6;

    /* The hero surface, shared by every page hero (home, about, contact)
       so they cannot drift apart — edit it HERE and all of them follow.
       It starts on exactly the navy the site header paints itself with,
       so bar and hero meet with no seam, then falls MONOTONICALLY to
       near-black: every stop is darker than the one above it. Do not add
       a highlight in the middle — any lift there reads as dark → light →
       dark instead of one continuous fall. */
    --impact-hero-gradient: linear-gradient(
        180deg,
        #1d3557 0%,
        #1a2f4d 20%,
        #132338 42%,
        #0c1522 64%,
        #060c14 82%,
        #02040a 100%
    );
}

/* ---------- 1. FORM SYSTEM ---------- */

.wpcf7-form {
    --fab-field-height: 52px;
    --fab-field-radius: 8px;
    --fab-field-bg: var(--fabrement-surface, #ffffff);
    --fab-field-border: var(--fabrement-border, #dcdfd4);
    --fab-field-border-hover: #b3bda4;
    --fab-field-text: var(--fabrement-heading, #1d3557);
    --fab-field-placeholder: var(--fabrement-text-muted, #9aa3af);
    --fab-focus: var(--fabrement-primary, #1d3557);
    --fab-focus-ring: rgba(29, 53, 87, 0.14);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* CF7 wraps its hidden inputs in a fieldset that would otherwise hold a whole row */
.wpcf7-form > .hidden-fields-container {
    display: none;
}

.wpcf7-form p {
    margin: 0;
}

/* CF7 nests the control INSIDE the label and separates them with a <br> */
.wpcf7-form label {
    display: block;
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--fab-field-text);
}

.wpcf7-form label br {
    display: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}

.wpcf7-form .wpcf7-form-control-wrap input,
.wpcf7-form .wpcf7-form-control-wrap select,
.wpcf7-form .wpcf7-form-control-wrap textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--fab-field-height);
    padding: 0 16px;
    border: 1px solid var(--fab-field-border);
    border-radius: var(--fab-field-radius);
    background: var(--fab-field-bg);
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--fab-field-text);
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.wpcf7-form .wpcf7-form-control-wrap textarea {
    height: 140px;
    min-height: 140px;
    padding: 14px 16px;
    resize: vertical;
}

.wpcf7-form .wpcf7-form-control-wrap input:hover,
.wpcf7-form .wpcf7-form-control-wrap select:hover,
.wpcf7-form .wpcf7-form-control-wrap textarea:hover {
    border-color: var(--fab-field-border-hover);
}

.wpcf7-form .wpcf7-form-control-wrap input:focus,
.wpcf7-form .wpcf7-form-control-wrap select:focus,
.wpcf7-form .wpcf7-form-control-wrap textarea:focus {
    outline: none;
    border-color: var(--fab-focus);
    box-shadow: 0 0 0 3px var(--fab-focus-ring);
}

.wpcf7-form .wpcf7-form-control-wrap input::placeholder,
.wpcf7-form .wpcf7-form-control-wrap textarea::placeholder {
    color: var(--fab-field-placeholder);
    opacity: 1;
}

/* submit — mirrors the design system's secondary button */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 26px;
    border: 0;
    border-radius: 8px;
    background: var(--fabrement-primary, #1d3557);
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fabrement-on-primary, #ffffff);
    text-align: center;
    cursor: pointer;
    transition: background-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-form button[type="submit"]:focus-visible {
    background: var(--impact-navy-soft, #2a4a75);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 53, 87, 0.22);
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* validation */
.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--fabrement-error, #c0392b);
}

.wpcf7-form .wpcf7-form-control-wrap input.wpcf7-not-valid,
.wpcf7-form .wpcf7-form-control-wrap textarea.wpcf7-not-valid {
    border-color: var(--fabrement-error, #c0392b);
}

.wpcf7-form .wpcf7-spinner {
    margin: 0 0 0 10px;
}

/* CF7 ships an empty response box; only show it once a state is set */
.wpcf7-form > .wpcf7-response-output {
    display: none;
    margin: 4px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--fabrement-border, #dcdfd4);
    border-radius: 8px;
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--fabrement-heading, #1d3557);
}

.wpcf7-form.sent > .wpcf7-response-output,
.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7-form.payment-required > .wpcf7-response-output,
.wpcf7-form.spam > .wpcf7-response-output,
.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7-form.aborted > .wpcf7-response-output {
    display: block;
}

.wpcf7-form.sent > .wpcf7-response-output {
    border-color: var(--fabrement-success, #2e7d5b);
    color: var(--fabrement-success, #2e7d5b);
}

.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7-form.spam > .wpcf7-response-output,
.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7-form.aborted > .wpcf7-response-output {
    border-color: var(--fabrement-error, #c0392b);
    color: var(--fabrement-error, #c0392b);
}

/* ---------- FIELD PAIRING, PER FORM ----------
   Keyed on the Contact Form 7 wrapper id (...-f<ID>-...), so a form is
   laid out the same way wherever it is rendered. Contact Form 7 wraps
   the submit in its own <p> in some contexts and leaves it bare in
   others, so both shapes are covered.
   f74 = enquiry (name, company, email, phone, message)
   f75 = newsletter signup (email, name)                        */

@media (min-width: 782px) {
    .wpcf7[id*="-f74-"] .wpcf7-form,
    .wpcf7[id*="-f75-"] .wpcf7-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }

    .wpcf7[id*="-f74-"] .wpcf7-form > p:nth-of-type(5),
    .wpcf7[id*="-f74-"] .wpcf7-form > p:has(input[type="submit"]),
    .wpcf7[id*="-f74-"] .wpcf7-form > input[type="submit"],
    .wpcf7[id*="-f74-"] .wpcf7-form > .wpcf7-spinner,
    .wpcf7[id*="-f74-"] .wpcf7-form > .wpcf7-response-output,
    .wpcf7[id*="-f75-"] .wpcf7-form > p:has(input[type="submit"]),
    .wpcf7[id*="-f75-"] .wpcf7-form > input[type="submit"],
    .wpcf7[id*="-f75-"] .wpcf7-form > .wpcf7-spinner,
    .wpcf7[id*="-f75-"] .wpcf7-form > .wpcf7-response-output {
        grid-column: 1 / -1;
    }
}

/* ---------- 2. SITE DEFAULTS ---------- */

::selection {
    background: var(--fabrement-secondary, #c7d3a5);
    color: var(--fabrement-heading, #1d3557);
}