/* ============================================================
   WordPress-specific CSS — loaded AFTER main.css.
   Keeps WP chrome (skip-link, admin bar offset, CF7 form fixes) out of
   main.css so re-syncing main.css from the static build never drops it.
   ============================================================ */

/* Accessibility skip-link — off-screen until keyboard focus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--c-ink);
    color: var(--c-white);
    border-radius: 0 0 var(--radius) 0;
    font-weight: var(--fw-semibold);
}
.skip-link:focus {
    left: 0;
    outline: 2px solid var(--c-brand);
}

/* Contact Form 7 keeps the static form classes (WPCF7_AUTOP off). Neutralise CF7's
   own wrappers so .quote__form / .svc-hero__form layouts render as in the static build. */
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 form .wpcf7-response-output {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}

/* In the static build the <form> itself was the flex column (.quote__form). CF7 instead
   emits <div.wpcf7><form.wpcf7-form>, so the panel class ends up on a wrapper div and the
   real form has no gap — rows collapse together. Re-apply the flex column to the form and
   let the intermediate .wpcf7 div be transparent, so vertical spacing matches the static. */
.quote__form > .wpcf7,
.svc-hero__form > .wpcf7,
.contact-hero__form > .wpcf7 { display: contents; }
.quote__form .wpcf7-form,
.svc-hero__form .wpcf7-form,
.contact-hero__form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
}
/* CF7's hidden-fields fieldset is a flex child with no content — it adds a phantom gap at
   the top of the panel. Hide it (hidden inputs still post from a display:none container). */
.wpcf7-form > .hidden-fields-container { display: none; }

/* CF7 wraps every control in <span class="wpcf7-form-control-wrap"> — make that
   wrapper transparent to the .field-row flex layout so inputs size like the static. */
.field-row { align-items: flex-start; }
.field-row .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }
.field-row .field-line, .quote__form .field-line, .svc-hero__form .field-line { width: 100%; }
/* The message textarea wrap sits directly on the form (not in a .field-row); keep it
   full width so the textarea stretches like the static field-line--area. */
.quote__form .wpcf7-form > .wpcf7-form-control-wrap { display: block; width: 100%; }
.field-line--area { min-height: 120px; }
/* Every quote-style form (home quote, service/location hero, contact hero) shares ONE submit
   style — per Figma a chunky, left-aligned brand button. The reused CF7 submit carries .btn--dark
   (small, dark) and the flex column stretches it full-width; override globally so all three match. */
.quote__form .wpcf7-submit,
.svc-hero__form .wpcf7-submit,
.contact-hero__form .wpcf7-submit { align-self: flex-start; width: auto; padding: 6px 14px; background: var(--c-brand); color: var(--c-neutral-darker); border: 1px solid var(--c-brand); border-radius: 0; font-weight: var(--fw-medium); font-size: var(--fs-text-sm); line-height: 1.5; }
.quote__form .wpcf7-submit:hover,
.svc-hero__form .wpcf7-submit:hover,
.contact-hero__form .wpcf7-submit:hover { background: var(--c-brand-deep); }
/* [acceptance] nests the checkbox in wrap > .wpcf7-acceptance > .wpcf7-list-item > label,
   which makes the box align to text baseline and sit slightly high. Flatten the CF7 spans
   and turn the <label> into the flex row, so checkbox + text are vertically centred and the
   row keeps the form's even 24px top/bottom rhythm (matches the static .field-check). */
.field-check .wpcf7-form-control-wrap,
.field-check .wpcf7-acceptance,
.field-check .wpcf7-list-item { display: contents; }
.field-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1.2;
    cursor: pointer;
}
.field-check input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
}
.field-check .wpcf7-list-item-label { display: inline; }