/* ============================================================
   Contact Us - page-level CSS (T10)
   Figma: desktop 1398:47072, tablet 1398:47348, mobile 1398:46778. The
   enquiry and complaints sections are built here (no other template uses
   them); the hero, the location (Eligibility), the reviews and the logo
   strip carry their own look.

   Vertical rhythm (the neighbouring-background rule): the enquiry follows
   the white hero, the pale-teal location differs from it, the navy
   complaints differ from both, and the white reviews differ from the navy.
   ============================================================ */

.contact__section--location {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
/* The reviews' white band runs on into the logo strip: the frame puts 55 between the
   cards and the "Trusted by" line, not the reviews' 80 */
@media (min-width: 1025px) {
    .contact__section--reviews .reviews__inner { padding-bottom: 55px; }
}
/* The logo strip continues the reviews' white band */
.contact__section--logos {
    padding-top: 0;
    padding-bottom: var(--space-section-alt);
}

/* ── Enquiry (1398:47129) ─────────────────────────────────── */
.contact__section--enquiry {
    padding: var(--space-section-alt) var(--space-gutter);
}
.contact-enquiry__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 569fr) minmax(0, 578fr);   /* the frame's 569 copy and 578 panel, 20 apart */
    column-gap: 20px;
    align-items: center;
}
.contact-enquiry__copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contact-enquiry__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-enquiry__head .eyebrow { margin: 0; }
.contact-enquiry__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;   /* Title Case in the frame */
}
.contact-enquiry__body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* One note per audience, a 1px divider between (Primary Accent in the frame) */
.contact-enquiry__notes {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-enquiry__note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.contact-enquiry__note + .contact-enquiry__note { border-top: 1px solid var(--color-surface-tint); }
.contact-enquiry__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.contact-enquiry__note-icon svg { display: block; width: 30px; height: 30px; }
.contact-enquiry__note-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.contact-enquiry__note-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.contact-enquiry__note-body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* The form panel: the gradient card WPForms fills (578 x 580, radius 14) */
.contact-enquiry__panel {
    padding: 26px 35px 43.5px;
    border-radius: 14px;
    background: var(--gradient-primary);   /* "Secondary Gradient" */
    box-shadow: var(--shadow-form-card);
    color: var(--color-text-inverse);
}

/* ── FORM-002 (WPForms) ─────────────────────────────────────
   The same form component as FORM-001 (its controls, error wording,
   sending button and success message are cta-form.css and cta-form.js),
   drawn on the teal panel. What differs, from the Contact frames
   (default 1398:47169, error 1398:48824, sending 1398:49015, success
   1398:48771): white labels, the Logo Grey placeholder, the error message
   recoloured for the panel (beneath the field, not drawn in it, so the
   typed text stays visible), and the sending and success states on the
   panel itself. ─────────────────────────────────────────────── */
.contact-enquiry__panel {
    position: relative;
    min-width: 0;
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: var(--color-text-inverse);
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-textarea .wpforms-field-description {
    color: var(--color-text-inverse);   /* the data warning (inc/form-notices.php), white on the teal panel like the labels */
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field ::placeholder {
    color: var(--color-logo-grey);
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select:invalid {
    color: var(--color-logo-grey);   /* the "e.g. ..." option, until a product is chosen */
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select option {
    color: var(--color-text);
}

/* A field in error: its label and the message beneath it turn pale pink (the cta-form.css message, recoloured
   for the teal panel), and the pill keeps the red ring. The text typed in the field stays visible */
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field:has(input.wpforms-error, select.wpforms-error) .wpforms-field-label {
    color: var(--color-error-label);
}
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form label.wpforms-error,
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form em.wpforms-error {
    color: var(--color-error-label);
}

/* With the message beneath a field, a side-by-side pair would be pushed out of line by the cta-form.css bottom
   alignment (the neighbour of a field in error drops with it): align them at the top instead */
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-layout-row {
    align-items: flex-end;
}

/* Sending: a veil over the panel, as on FORM-001, with the button above it so it keeps its own pale gold */
.contact-enquiry .contact-enquiry__panel div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:disabled {
    position: relative;
    z-index: 1;
}
.contact-enquiry__panel:has(.wpforms-submit:disabled)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-surface) 43%, transparent);
}

/* Success: the form is replaced by the message, centred in the panel */
.contact-enquiry__panel:has(.wpforms-confirmation-container-full) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 498px;
    padding: 36px;
}

/* ── Complaints (1398:47239) ──────────────────────────────── */
.contact__section--complaints {
    padding: 64px var(--space-gutter);   /* the frame's own 64 */
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
}
.contact-complaints__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.contact-complaints__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-complaints__head .eyebrow {
    margin: 0;
    color: var(--color-accent);   /* Tertiary */
}
.contact-complaints__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);   /* no style in the frame; it equals H2 */
    line-height: var(--leading-h2);
    color: var(--color-text-inverse);
    text-transform: capitalize;
}
.contact-complaints__body {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);   /* Futura Medium 14 in the frame */
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
}
.contact-complaints__columns {
    display: grid;
    grid-template-columns: minmax(0, 587fr) minmax(0, 552fr);
    column-gap: 65px;
    align-items: start;
}
.contact-complaints__contact { grid-column: 2; }   /* the list stays on the right while the FORM-003 slot is empty */
.contact-complaints__columns--solo .contact-complaints__contact { grid-column: 2; }

.contact-complaints__contact-heading {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-text-inverse);
}
.contact-complaints__intro {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body);
}
.contact-complaints__methods {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-complaints__method {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 0;
}
.contact-complaints__method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent-tint);
    color: var(--color-accent);
}
.contact-complaints__method-icon svg { display: block; width: 24px; height: 24px; }
.contact-complaints__method-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.contact-complaints__method--text .contact-complaints__method-text,
.contact-complaints__method--long .contact-complaints__method-text { gap: 12px; }
.contact-complaints__method-label {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-overline);
    line-height: var(--leading-overline);
    text-transform: uppercase;
    color: var(--color-text-inverse-muted);
}
.contact-complaints__method-value {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-mobile-h4);   /* the address: Futura Medium 20 in the frame */
    line-height: var(--leading-mobile-h4);
    overflow-wrap: anywhere;
}
.contact-complaints__method--email .contact-complaints__method-value,
.contact-complaints__method--tel .contact-complaints__method-value {
    font-size: var(--text-h3);   /* the email and phone: Futura Medium 28 */
    line-height: var(--leading-h3);
}
.contact-complaints__method--long .contact-complaints__method-value {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.contact-complaints__method-value a,
.contact-complaints__link {
    color: inherit;
    text-decoration: none;
}
.contact-complaints__method--long .contact-complaints__method-value a {
    color: var(--color-accent);
    text-decoration: underline;
}
.contact-complaints__link:hover { text-decoration: underline; }
.contact-complaints a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .contact__section--enquiry { padding: var(--space-section-alt) var(--space-gutter); }
    .contact-enquiry__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 39px;
    }
    .contact-enquiry__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .contact-enquiry__note-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .contact-enquiry__note-body {
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }
    /* The form panel is a bottom sheet flush on the location section, edge to edge */
    .contact__section--enquiry:has(.contact-enquiry__panel) { padding-bottom: 0; }
    .contact-enquiry__panel {
        padding: 24px var(--space-gutter) 48px;
        border-radius: 24px 24px 0 0;
    }
    .contact-enquiry__panel:has(.wpforms-confirmation-container-full) {
        min-height: 0;
        padding: 36px var(--space-gutter) 48px;
    }

    .contact__section--complaints { padding: var(--space-section-alt) var(--space-gutter) 32px; }
    .contact-complaints__inner { gap: 32px; }
    .contact-complaints__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .contact-complaints__columns { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .contact-complaints__contact,
    .contact-complaints__columns--solo .contact-complaints__contact { grid-column: 1; }
    .contact-complaints__contact-heading {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .contact-complaints__intro { font-size: var(--text-body); }
    .contact-complaints__method { gap: 12px; }
    .contact-complaints__method--text,
    .contact-complaints__method--long { gap: 24px; }
    .contact-complaints__method-value,
    .contact-complaints__method--email .contact-complaints__method-value,
    .contact-complaints__method--tel .contact-complaints__method-value {
        font-size: var(--text-mobile-h4);   /* Mobile/H4 throughout the list */
        line-height: var(--leading-mobile-h4);
    }
    .contact-complaints__method--long .contact-complaints__method-value {
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }
}
/* The location copy is Futura Medium 14 on mobile and tablet (no style in the frame) */
@media (max-width: 1024px) {
    .contact__section--location .eligibility__body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    .contact-enquiry__panel {
        margin: 0 calc(var(--space-gutter) * -1);
    }
}

/* A form link moves focus to the form (assets/js/main.js): a landing place for keyboard users, not a control */
.contact-enquiry__panel:focus,
.contact-complaints:focus { outline: none; }