/* ────────────────────────────────────────────────────────
   CONTACT FORM
   Readable labels, visible focus, and field-level errors.
   The select itself is styled by the inline block in
   inc/assets.php; heights here are kept at 52px to match it.
   ──────────────────────────────────────────────────────── */

.mbx-contact-form-panel {
    border: 1px solid var(--mbx-line);
    border-radius: 14px;
    padding: 32px;
}

@media (min-width: 1024px) {
    .mbx-contact-form-panel {
        padding: 40px;
    }
}

.mbx-contact-form-panel__title {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-label);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0;
}

.mbx-contact-required-note {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-meta-sm);
    margin: 8px 0 28px;
}

/* ── FEEDBACK ────────────────────────────────────────── */
.mbx-contact-feedback {
    border: 1px solid;
    border-radius: 10px;
    font-size: var(--mbx-type-meta);
    line-height: 1.6;
    margin-bottom: 24px;
    padding: 14px 16px;
}

.mbx-contact-feedback:focus {
    outline: 2px solid var(--mbx-orange);
    outline-offset: 3px;
}

.mbx-contact-feedback.is-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}

.mbx-contact-feedback.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #7f1d1d;
}

/* Every failed field is listed and linked, so the visitor is never
   left to guess which of five required inputs was the problem. */
.mbx-contact-feedback__list {
    margin: 10px 0 0;
    padding-left: 18px;
}

.mbx-contact-feedback__list li {
    margin-bottom: 4px;
}

.mbx-contact-feedback__list a {
    color: inherit;
}

/* ── FIELDS ──────────────────────────────────────────── */
.mbx-field-row {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .mbx-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mbx-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Sentence case at a readable size. The previous 11px uppercase with
   1.1px tracking was hard to scan down a seven-field form. */
.mbx-field > label {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-meta);
    font-weight: 500;
}

.mbx-field__required {
    color: #b91c1c;
}

.mbx-field__optional {
    color: var(--mbx-muted);
    font-weight: 400;
}

.mbx-input {
    background: #ffffff;
    border: 1px solid var(--mbx-line);
    border-radius: 10px;
    color: var(--mbx-ink);
    font-family: inherit;
    font-size: var(--mbx-type-body-sm);
    font-weight: 400;
    height: 52px;
    padding: 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.mbx-textarea {
    height: auto;
    line-height: 1.65;
    padding: 14px;
    resize: vertical;
}

.mbx-input::placeholder {
    color: #9aa3ad;
}

/* A 1px colour change is not a focus indicator. The ring is drawn with
   both an outline and a halo so it survives on white and on the panel. */
.mbx-input:focus-visible,
.medibyx-contact-select:focus-visible {
    border-color: var(--mbx-orange);
    box-shadow: 0 0 0 3px rgba(240, 144, 5, 0.28);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.mbx-input[aria-invalid="true"],
.medibyx-contact-select[aria-invalid="true"] {
    border-color: #dc2626;
}

.mbx-input[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

.mbx-field-error {
    color: #b91c1c;
    font-size: var(--mbx-type-meta-sm);
    margin: 0;
}

/* ── TURNSTILE ───────────────────────────────────────── */
.mbx-turnstile-block {
    border: 1px solid var(--mbx-line);
    border-radius: 10px;
    padding: 16px;
}

.mbx-turnstile-block__label {
    color: var(--mbx-ink);
    font-size: var(--mbx-type-meta);
    font-weight: 500;
    margin: 0 0 12px;
}

.mbx-turnstile-block__note {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-micro);
    margin: 12px 0 0;
}

/* ── SUBMIT ──────────────────────────────────────────── */
.mbx-submit {
    background: var(--mbx-orange);
    border: 0;
    border-radius: 10px;
    color: #1f1300;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mbx-type-body-sm);
    font-weight: 600;
    padding: 15px 28px;
    transition: background-color 0.2s ease;
    width: 100%;
}

.mbx-submit:hover:not(:disabled) {
    background: #d88104;
}

.mbx-submit:focus-visible {
    outline: 2px solid var(--mbx-ink);
    outline-offset: 3px;
}

.mbx-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.mbx-submit-note {
    color: var(--mbx-muted);
    font-size: var(--mbx-type-micro);
    line-height: 1.6;
    margin: 14px 0 0;
}

.mbx-submit-note a {
    color: var(--mbx-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The address and phone number are the two things a visitor on a phone is most
   likely to tap, and they measured 21px tall — the same shortfall the footer
   links had. Same remedy, same reasoning: a fingertip is what makes this too
   small, so it is keyed on the pointer rather than on the width. */
@media (pointer: coarse) {
    .mbx-contact-direct {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}


/* ── MAP ─────────────────────────────────────────────────
   The embed ships with width="600" height="450" and nothing ever overrode it,
   so the iframe stayed 600px wide at every screen size. Its column and the form
   column share one grid track, and an `auto` track is sized by its widest item:
   on a 390px phone that track resolved to 602px and dragged the form panel out
   to 602px with it -- 212px past the edge of the screen. `overflow-x: hidden`
   on the page wrapper hid the damage rather than fixing it, so the right side
   of every input, and part of the submit button, was simply cut off with no
   scrollbar to reveal it.

   The attributes stay as the aspect-ratio hint browsers use before CSS loads;
   these two declarations are what actually size it. */
.mbx-contact-map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── HERO ────────────────────────────────────────────────
   Dark, like Careers, Insights and About. It was built light at first so the
   band would flow into the white form panel directly below it; asked for
   consistency instead, and consistency is the better call -- four heroes that
   behave the same way read as one site, and the border under the band is
   enough to separate it from the form.

   Two scrims, following the others. This photograph is a daytime scene, the
   brightest of the four, so the passes have to be heavier here than anywhere
   else to carry white type. */
.mbx-contact-hero {
    position: relative;
    isolation: isolate;
    background: #0d1622;
}

.mbx-contact-hero__image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The monument and skyline sit in the upper two thirds; centring put the
       empty plaza paving behind the copy. */
    object-position: center 42%;
}

.mbx-contact-hero::before,
.mbx-contact-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.mbx-contact-hero::before {
    background: linear-gradient(90deg, rgba(8, 14, 22, 0.95) 0%, rgba(8, 14, 22, 0.9) 38%, rgba(8, 14, 22, 0.7) 70%, rgba(8, 14, 22, 0.52) 100%);
}

.mbx-contact-hero::after {
    background: linear-gradient(180deg, rgba(8, 14, 22, 0.52) 0%, rgba(8, 14, 22, 0.26) 48%, rgba(8, 14, 22, 0.6) 100%);
}

/* Qualified with the section so they outrank the Tailwind colour utilities the
   markup carries. */
.mbx-contact-hero h1 {
    color: #ffffff;
}

.mbx-contact-hero p {
    color: #dfe4ea;
}

@media (max-width: 860px) {
    /* The copy spans the full width on a phone and crosses the brighter right
       of the frame, so narrow screens get an even pass. */
    .mbx-contact-hero::before {
        background: linear-gradient(90deg, rgba(8, 14, 22, 0.95) 0%, rgba(8, 14, 22, 0.92) 55%, rgba(8, 14, 22, 0.89) 100%);
    }
}