/* ==========================================================================
   INOSSI — Contact Me (contact_me.html)
   Intent page for a visitor who already wants to get in touch: quick-channel
   hero + a real message form. Visit Us (.locations) and FAQ (.faq__*) are
   reused 1:1 from main.css/index.html — no styles duplicated here. Loaded
   after tokens.css / navigation.css / main.css.
   ========================================================================== */

.contact-page .contact-hero,
.contact-page .contact-form {
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(20px, 4vw, 40px) auto 0;
}

/* ===== HERO: H1 + quick channels ===== */
.contact-hero {
    text-align: center;
}

.contact-hero__heading {
    margin: 0 0 0.75rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: var(--line-height-heading, 1.2);
    color: var(--color-ink, #000);
}

.contact-hero__subtitle {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--color-text-muted, #6b6b6b);
}

.contact-hero__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.contact-hero__channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.35rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink, #000);
    background-color: var(--color-bg, #fff);
    transition: background-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        border-color var(--duration-base, 0.25s) var(--ease-standard, ease),
        color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.contact-hero__channel:hover,
.contact-hero__channel:focus-visible {
    border-color: var(--color-accent, #d2ab66);
}

/* Book Now keeps the shared .btn-book look; the other channels are the
   quieter outline pill above so Book Now still reads as the primary CTA. */
.contact-hero__channels .btn-book {
    min-height: 44px;
}

/* ===== SEND A MESSAGE (form) ===== */

/* The Email chip in the hero links here (#message). .site-header is
   position:sticky, so without this the heading lands behind it. --header-h is
   the header's real measured height, published on :root by main.js — the same
   variable services-hub.css uses, so it stays correct when the header wraps
   differently across breakpoints. The focus ring is suppressed because focus is
   moved here programmatically by the anchor, not by the user tabbing to it:
   a box around the whole section would read as a bug. */
.contact-form[id] {
    scroll-margin-top: calc(var(--header-h, 64px) + 1.5rem);
}

.contact-form[id]:focus {
    outline: none;
}
.contact-form {
    max-width: 40rem;
    text-align: center;
}

.contact-form__heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 400;
    color: var(--color-ink, #000);
}

.contact-form__note {
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
    color: var(--color-text-muted, #6b6b6b);
}

.contact-form__note a {
    color: var(--color-ink, #000);
    font-weight: 600;
}

.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: left;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink, #000);
}

.contact-form__field input,
.contact-form__field textarea {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    background-color: var(--color-bg, #fff);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text, #111);
}

.contact-form__field textarea {
    resize: vertical;
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
    outline: 2px solid var(--color-accent, #d2ab66);
    outline-offset: 1px;
}

/* Honeypot: present in the DOM/tab order-excluded, invisible to sighted
   users and screen readers, but never `display:none` (some bots skip
   hidden fields on purpose). */
.contact-form__honey {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: 0.35rem;
}

.contact-form__status {
    margin: 0;
    font-weight: 600;
    color: var(--color-ink, #000);
}

.contact-form__status:empty {
    display: none;
}

/* ---- Wide / 4K, scoped to .contact-page on <main> ----
   Same clamp()+vw pattern as services-hub.css / about.css — fixed values
   here would "freeze" the page at 1600px instead of continuing to scale. */
@media (min-width: 1600px) {
    .contact-page .contact-hero,
    .contact-page .contact-form {
        width: min(100% - 120px, 3400px);
    }

    .contact-page .contact-hero__heading {
        font-size: clamp(3.2rem, 2.4vw, 5rem);
    }

    .contact-page .contact-hero__subtitle {
        font-size: clamp(1.15rem, 0.7vw, 1.6rem);
        max-width: 60rem;
    }

    .contact-page .contact-hero__channel {
        font-size: clamp(1rem, 0.55vw, 1.3rem);
    }

    .contact-page .contact-form__heading {
        font-size: clamp(1.8rem, 1.1vw, 2.8rem);
    }

    .contact-page .contact-form__note,
    .contact-page .contact-form__field,
    .contact-page .contact-form__field input,
    .contact-page .contact-form__field textarea {
        font-size: clamp(1rem, 0.5vw, 1.25rem);
    }
}

@media (max-width: 650px) {
    .contact-page .contact-hero,
    .contact-page .contact-form {
        width: var(--width-container-mobile, min(100% - 30px, 1200px));
    }

    .contact-form__submit {
        align-self: stretch;
    }
}