/* =====================================================================
   ENQUIRY FORM CARD  (.hacf)
   Port of the heroplumbing.com.au/booking/ enquiry card to the Hero Air
   Conditioning theme. Rendered by inc/enquiry-form.php:

     .hacf
       img.quote-hero-img.hacf__mascot      (theme class: absolute, hidden <768px)
       .hacf__card
         .hacf__card-head   h2.hacf__card-title + span.hacf__badge
         .hacf__form        .wpcf7 > form.wpcf7-form
                              .hacf__grid
                                .hacf__field   label + span.wpcf7-form-control-wrap > input
                                .hacf__field--file  label + control + .hacf__hint
                                .hacf__actions input.hacf__submit
                              .wpcf7-response-output
         p.hacf__card-foot

   Every rule is written as `.hacf.hacf <descendant>` — specificity (0,3,0) —
   so it beats the theme's global Contact Form 7 rules printed inline in
   wp_head (`.wpcf7-form { display:flex }`, `.wpcf7 input[type="submit"]
   { max-width:200px }`, `.contact10_form-block .wpcf7-form`, …) regardless
   of source order. Nothing here is a bare `.hacf__x`, so nothing leaks out.
   ===================================================================== */

.hacf {
    position: relative;      /* anchors .quote-hero-img (inset: 0 auto auto -101px) */
    width: 100%;
    font-family: "Proxima nova", system-ui, sans-serif;
}

.hacf.hacf .hacf__card {
    position: relative;
    z-index: 2;
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(4, 20, 40, .34);
    color: #212529;
    text-align: left;
    font-style: normal;
}

/* --------------------------------------------------------------- head */
.hacf.hacf .hacf__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hacf.hacf .hacf__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "Proxima nova bold", "Proxima nova", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #0f66bd;
}

/* Small red marker in front of the heading (the theme ships no icon font) */
.hacf.hacf .hacf__card-title::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e00b16;
}

.hacf.hacf .hacf__badge {
    flex: none;
    background: #ffde32;
    color: #212529;
    border-radius: 4px;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- foot */
.hacf.hacf .hacf__card-foot {
    display: block;
    text-align: center;
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #6b7280;
}

.hacf.hacf .hacf__card-foot .hacf__sep {
    color: #e00b16;
    margin: 0 6px;
}

.hacf.hacf .hacf__card-foot a {
    color: #0f66bd;
    text-decoration: underline;
}

.hacf.hacf .hacf__unavailable {
    margin: 0;
    font-size: 15px;
}

/* --------------------------------------------------------------- form */
.hacf.hacf .wpcf7 {
    width: 100%;
    margin: 0;
}

/* The theme prints `.wpcf7-form { display:flex; flex-direction:column; gap:1rem }`
   and `.contact10_form-block .wpcf7-form { … }` in wp_head. */
.hacf.hacf .wpcf7-form {
    display: block;
    margin: 0;
}

.hacf.hacf .hidden-fields-container {
    display: none;
}

.hacf.hacf .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hacf.hacf .hacf__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
}

.hacf.hacf .hacf__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Room for one line of validation message, so an error never shifts the button */
    min-height: 72px;
    margin: 0;
}

.hacf.hacf .hacf__label {
    display: block;
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #57606f;
}

.hacf.hacf .wpcf7-form-control-wrap {
    display: block;
    position: relative;
    min-width: 0;
}

.hacf.hacf .hacf__field input[type="text"],
.hacf.hacf .hacf__field input[type="email"],
.hacf.hacf .hacf__field input[type="tel"] {
    display: block;
    width: 100%;
    height: 42px;
    min-height: 0;
    box-sizing: border-box;
    background: #f4f7f6;
    border: 1px solid #d4d9de;
    border-radius: 5px;
    padding: 0 12px;
    margin: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 40px;
    color: #212529;
    transition: border-color .15s ease;
}

.hacf.hacf .hacf__field input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.hacf.hacf .hacf__field input:focus,
.hacf.hacf .hacf__field input:focus-visible {
    outline: 3px solid #2986ff;
    outline-offset: 2px;
    border-color: #0f66bd;
    box-shadow: none;
}

.hacf.hacf .hacf__field input[aria-invalid="true"] {
    border-color: #e00b16;
}

.hacf.hacf .wpcf7-not-valid-tip {
    display: block;
    margin: 0;
    font-size: 10.5px;
    line-height: 12px;
    color: #c40813;
}

/* file upload */
.hacf.hacf .hacf__field--file {
    justify-content: flex-start;
}

.hacf.hacf .hacf__field input[type="file"] {
    display: block;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    background: none;
    border: 1px dashed #b6bec8;
    border-radius: 5px;
    padding: 9px 10px;
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    color: #57606f;
    cursor: pointer;
}

.hacf.hacf .hacf__field input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    padding: 4px 10px;
    background: #f4f7f6;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #0f66bd;
    cursor: pointer;
}

.hacf.hacf .hacf__hint {
    display: block;
    font-size: 10.5px;
    line-height: 12px;
    color: #6b7280;
}

/* submit */
.hacf.hacf .hacf__actions {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    line-height: 0;
}

.hacf.hacf .hacf__actions .wpcf7-form-control-wrap {
    display: block;
}

.hacf.hacf .hacf__submit {
    display: block;
    width: 100%;
    max-width: none;
    height: 48px;
    box-sizing: border-box;
    border: none;
    border-radius: 6px;
    padding: 0;
    margin: 0;
    background: #e00b16;
    color: #fff;
    font-family: "Proxima nova bold", "Proxima nova", sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease;
}

.hacf.hacf .hacf__submit:hover { background: #c40813; }

.hacf.hacf .hacf__submit:focus-visible {
    outline: 3px solid #2986ff;
    outline-offset: 2px;
}

.hacf.hacf .wpcf7-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    margin: 0;
    background-color: rgba(255, 255, 255, .75);
    border-radius: 100%;
    opacity: 0;
    visibility: visible;
    display: block;
}

.hacf.hacf .wpcf7-form.submitting .wpcf7-spinner { opacity: 1; }

/* Per-field messages already say what is wrong; hide the duplicate summary */
.hacf.hacf .wpcf7-form.invalid .wpcf7-response-output,
.hacf.hacf .wpcf7-form.unaccepted .wpcf7-response-output,
.hacf.hacf .wpcf7-form.payment-required .wpcf7-response-output {
    display: none;
}

.hacf.hacf .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid #d4d9de;
    border-radius: 5px;
    background: none;
    font-size: 12.5px;
    line-height: 1.45;
    color: #212529;
}

.hacf.hacf .wpcf7-form.failed .wpcf7-response-output,
.hacf.hacf .wpcf7-form.aborted .wpcf7-response-output,
.hacf.hacf .wpcf7-form.spam .wpcf7-response-output {
    border-color: #e00b16;
}

.hacf.hacf .wpcf7-form.sent .wpcf7-response-output {
    border-color: #0a7f3f;
}

/* =====================================================================
   991 and below — narrower right column
   ===================================================================== */
@media screen and (max-width: 991px) {
    .hacf.hacf .hacf__card { padding: 16px; }
    /* The theme's page grids keep two columns down to 767px, so the card is
       only ~295px wide in this band — two field columns would be ~125px
       each. One field per row instead. */
    .hacf.hacf .hacf__grid { grid-template-columns: minmax(0, 1fr); }
    .hacf.hacf .hacf__field { min-height: 0; }
}

/* =====================================================================
   767 and below — single column hero, card spans the width
   ===================================================================== */
@media screen and (max-width: 767px) {
    .hacf.hacf .hacf__card { padding: 18px; }
    /* Page grid is one column here, so the card is full width again */
    .hacf.hacf .hacf__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hacf.hacf .hacf__field { min-height: 72px; }
    .hacf.hacf .hacf__field--your-name,
    .hacf.hacf .hacf__field--your-address,
    .hacf.hacf .hacf__field--your-subject { grid-column: 1 / -1; }
}

/* =====================================================================
   479 and below — compact for phones
   ===================================================================== */
@media screen and (max-width: 479px) {
    .hacf.hacf .hacf__card { border-radius: 12px; padding: 12px; }
    .hacf.hacf .hacf__card-head { align-items: flex-start; gap: 8px; margin-bottom: 6px; }
    .hacf.hacf .hacf__card-title {
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: .07em;
        max-width: 230px;
    }
    .hacf.hacf .hacf__card-title::before { content: none; }
    .hacf.hacf .hacf__badge { font-size: 9.5px; padding: 4px 7px; }
    .hacf.hacf .hacf__grid { gap: 2px 8px; }
    .hacf.hacf .hacf__field--your-name,
    .hacf.hacf .hacf__field--your-address,
    .hacf.hacf .hacf__field--your-subject {
        grid-column: 1 / -1;
    }
    .hacf.hacf .hacf__field { min-height: 66px; }
    .hacf.hacf .hacf__field input[type="text"],
    .hacf.hacf .hacf__field input[type="email"],
    .hacf.hacf .hacf__field input[type="tel"] { height: 44px; line-height: 42px; }
    .hacf.hacf .hacf__field--file {
        grid-column: 1;
        min-height: 0;
        align-self: end;
    }
    .hacf.hacf .hacf__field input[type="file"] { height: 46px; font-size: 12px; }
    .hacf.hacf .hacf__hint { display: none; }
    .hacf.hacf .hacf__actions {
        grid-column: 2;
        align-self: end;
    }
    .hacf.hacf .hacf__submit { height: 46px; font-size: 14.5px; }
    .hacf.hacf .hacf__card-foot {
        text-align: left;
        margin-top: 8px;
        font-size: 10.5px;
    }
}