/* ============================================================
   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);
}

/* ---------- SPINNER AND RESPONSE MESSAGE ----------
   NOTE ON SELECTOR SHAPE: contact-form-7's own stylesheet styles this markup
   as `.wpcf7 form .wpcf7-response-output` — two classes AND an element, which
   outranks a plain two-class selector. Its `margin: 2em .5em 1em` was the wide
   empty band above the message, and its `border-color` overrode the palette.
   So the rules below deliberately carry `.wpcf7 form.wpcf7-form` to sit one
   class above the plugin. This is the "markup no block owns" case: there is no
   block stylesheet to fix instead, and !important is not needed to win. */

/* CF7 ships the spinner on every form and only makes it INVISIBLE while idle,
   so as a flex/grid child it still claims a whole row plus a gap. Take it out
   of flow and put it back only while submitting (CF7 5.x marks the spinner
   .is-active; older builds mark the form). */
.wpcf7 form.wpcf7-form .wpcf7-spinner {
    display: none;
    margin: 0 0 0 10px;
}

.wpcf7 form.wpcf7-form.submitting .wpcf7-spinner,
.wpcf7 form.wpcf7-form .wpcf7-spinner.is-active {
    display: inline-block;
}

/* The box ships empty on every form, so it stays out of flow until a state
   class lands. Each state drives ONE accent through --fab-msg-accent: it tints
   the panel, paints the left bar and fills the round badge, while the text
   itself stays navy so it reads as copy rather than as a warning colour. The
   badge glyph is the ::before content. */
.wpcf7 form.wpcf7-form > .wpcf7-response-output {
    --fab-msg-accent: var(--fabrement-text-muted, #9aa3af);
    --fab-msg-tint: rgba(29, 53, 87, 0.05);
    display: none;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(29, 53, 87, 0.12);
    border-left: 4px solid var(--fab-msg-accent);
    border-radius: 10px;
    background: var(--fab-msg-tint);
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fabrement-heading, #1d3557);
}

.wpcf7 form.wpcf7-form > .wpcf7-response-output::before {
    content: "!";
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--fab-msg-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

.wpcf7 form.wpcf7-form.sent > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted > .wpcf7-response-output {
    display: flex;
    animation: fab-msg-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* delivered */
.wpcf7 form.wpcf7-form.sent > .wpcf7-response-output {
    --fab-msg-accent: var(--fabrement-success, #2e7d5b);
    --fab-msg-tint: rgba(46, 125, 91, 0.09);
    border-color: rgba(46, 125, 91, 0.25);
    border-left-color: var(--fab-msg-accent);
}

.wpcf7 form.wpcf7-form.sent > .wpcf7-response-output::before {
    content: "\2713";
}

/* the reader can fix this one themselves — amber, not alarm red */
.wpcf7 form.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted > .wpcf7-response-output {
    --fab-msg-accent: var(--fabrement-warning, #d99b2b);
    --fab-msg-tint: rgba(217, 155, 43, 0.11);
    border-color: rgba(217, 155, 43, 0.3);
    border-left-color: var(--fab-msg-accent);
}

/* the send itself failed — nothing the reader can correct */
.wpcf7 form.wpcf7-form.spam > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required > .wpcf7-response-output {
    --fab-msg-accent: var(--fabrement-error, #c0392b);
    --fab-msg-tint: rgba(192, 57, 43, 0.09);
    border-color: rgba(192, 57, 43, 0.25);
    border-left-color: var(--fab-msg-accent);
}

@keyframes fab-msg-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7 form.wpcf7-form.sent > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.invalid > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.unaccepted > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.payment-required > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.spam > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.failed > .wpcf7-response-output,
    .wpcf7 form.wpcf7-form.aborted > .wpcf7-response-output {
        animation: none;
    }
}

/* ---------- 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);
}