/*
 * Smart Property AI contact page
 * File: static/css/contact.css
 *
 * Every selector is scoped under .contact-wrapper.
 * This prevents contact styles from changing forms, buttons,
 * cards, or layouts on other pages.
 */

/* ==========================================================
   Contact page wrapper
   ========================================================== */

.contact-wrapper {
    --contact-ink: #14283b;
    --contact-muted: #587082;
    --contact-border: #dce7ed;
    --contact-primary: #0b7796;
    --contact-primary-dark: #075871;
    --contact-highlight: #eff9fb;
    --contact-surface: #ffffff;
    --contact-danger: #aa3550;
    --contact-success: #166534;
    --contact-focus: #e9a83c;
    --contact-shadow:
        0 18px 48px rgba(18, 54, 75, 0.09);

    width: 100%;
    min-height: 80vh;
    padding:
        clamp(2rem, 5vw, 4.5rem)
        1.25rem
        5rem;
    color: var(--contact-ink);
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(100, 204, 223, 0.18),
            transparent 32rem
        ),
        radial-gradient(
            circle at 95% 60%,
            rgba(39, 153, 177, 0.08),
            transparent 26rem
        ),
        #f6fafc;
}

.contact-wrapper *,
.contact-wrapper *::before,
.contact-wrapper *::after {
    box-sizing: border-box;
}


/* ==========================================================
   Main contact container
   ========================================================== */

.contact-wrapper .contact-wrapper__container {
    width: min(100%, 1200px);
    margin-inline: auto;
}


/* ==========================================================
   Breadcrumbs
   ========================================================== */

.contact-wrapper .contact-wrapper__breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 2rem;
    padding: 0;
    color: var(--contact-muted);
    font-size: 0.9rem;
    list-style: none;
}

.contact-wrapper
.contact-wrapper__breadcrumbs li + li::before {
    margin-right: 0.6rem;
    color: #91a9b6;
    content: "/";
}

.contact-wrapper
.contact-wrapper__breadcrumbs a {
    color: var(--contact-primary-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.contact-wrapper
.contact-wrapper__breadcrumbs a:hover {
    color: var(--contact-primary);
}


/* ==========================================================
   Page header
   ========================================================== */

.contact-wrapper .contact-wrapper__header {
    max-width: 760px;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.contact-wrapper
.contact-wrapper__section-label {
    display: inline-block;
    margin: 0 0 0.75rem;
    color: var(--contact-primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.contact-wrapper
.contact-wrapper__header h1 {
    margin: 0 0 0.85rem;
    color: var(--contact-ink);
    font-size: clamp(2.35rem, 5vw, 4.1rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.contact-wrapper
.contact-wrapper__header > p:last-child {
    margin: 0;
    color: var(--contact-muted);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
}


/* ==========================================================
   Alerts
   ========================================================== */

.contact-wrapper .contact-wrapper__alert {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    line-height: 1.55;
    border: 1px solid;
    border-radius: 14px;
}

.contact-wrapper
.contact-wrapper__alert strong {
    display: block;
    margin-bottom: 0.3rem;
}

.contact-wrapper
.contact-wrapper__alert ul {
    margin: 0.6rem 0 0;
    padding-left: 1.3rem;
}

.contact-wrapper
.contact-wrapper__alert--error {
    color: #742735;
    background: #fff1f3;
    border-color: #e9bdc6;
}

.contact-wrapper
.contact-wrapper__alert--success {
    color: #13563c;
    background: #eafaf1;
    border-color: #a7dbbf;
}


/* ==========================================================
   Two-column contact layout
   ========================================================== */

.contact-wrapper .contact-wrapper__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(250px, 0.8fr);
    align-items: start;
    gap: clamp(1rem, 2vw, 1.75rem);
}


/* ==========================================================
   Form and information cards
   ========================================================== */

.contact-wrapper
.contact-wrapper__form-card,
.contact-wrapper
.contact-wrapper__info-card {
    background: var(--contact-surface);
    border: 1px solid var(--contact-border);
    border-radius: 24px;
    box-shadow: var(--contact-shadow);
}

.contact-wrapper
.contact-wrapper__form-card {
    padding: clamp(1.25rem, 3.5vw, 2.75rem);
}


/* ==========================================================
   Form heading
   ========================================================== */

.contact-wrapper
.contact-wrapper__form-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.contact-wrapper
.contact-wrapper__form-heading h2 {
    margin: 0 0 0.35rem;
    color: var(--contact-ink);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.03em;
}

.contact-wrapper
.contact-wrapper__form-heading p:not(
    .contact-wrapper__section-label
) {
    margin: 0;
    color: var(--contact-muted);
}


/* ==========================================================
   Read-form-aloud button
   ========================================================== */

.contact-wrapper
.contact-wrapper__read-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0.7rem 1rem;
    color: var(--contact-primary-dark);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    text-align: center;
    background: #ffffff;
    border: 1.5px solid var(--contact-border);
    border-radius: 12px;
    cursor: pointer;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.contact-wrapper
.contact-wrapper__read-button:hover {
    color: var(--contact-primary);
    background: var(--contact-highlight);
    border-color: #81afbf;
    transform: translateY(-1px);
}

.contact-wrapper
.contact-wrapper__read-button[aria-pressed="true"] {
    color: #ffffff;
    background: #b4233b;
    border-color: #b4233b;
    box-shadow:
        0 7px 18px rgba(180, 35, 59, 0.2);
}


/* ==========================================================
   Contact form
   ========================================================== */

.contact-wrapper .contact-wrapper__form {
    display: grid;
    gap: 1.4rem;
}

.contact-wrapper
.contact-wrapper__form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.contact-wrapper
.contact-wrapper__form-group {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
}

.contact-wrapper
.contact-wrapper__form-group label {
    color: var(--contact-ink);
    font-size: 0.93rem;
    font-weight: 700;
}

.contact-wrapper
.contact-wrapper__form-group
label span[aria-hidden="true"] {
    color: var(--contact-danger);
}


/* ==========================================================
   Form inputs
   ========================================================== */

.contact-wrapper
.contact-wrapper__form
input:not([type="checkbox"]),
.contact-wrapper
.contact-wrapper__form select,
.contact-wrapper
.contact-wrapper__form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 0.9rem;
    color: var(--contact-ink);
    font: inherit;
    line-height: 1.5;
    background: #ffffff;
    border: 1.5px solid #cddde5;
    border-radius: 12px;
    outline: none;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.contact-wrapper
.contact-wrapper__form textarea {
    min-height: 165px;
    resize: vertical;
}

.contact-wrapper
.contact-wrapper__form
input::placeholder,
.contact-wrapper
.contact-wrapper__form
textarea::placeholder {
    color: #738c9c;
    opacity: 1;
}

.contact-wrapper
.contact-wrapper__form
input:not([type="checkbox"]):hover,
.contact-wrapper
.contact-wrapper__form select:hover,
.contact-wrapper
.contact-wrapper__form textarea:hover {
    border-color: #81afbf;
}

.contact-wrapper
.contact-wrapper__form
input:not([type="checkbox"]):focus,
.contact-wrapper
.contact-wrapper__form select:focus,
.contact-wrapper
.contact-wrapper__form textarea:focus {
    background: #ffffff;
    border-color: var(--contact-primary);
    box-shadow:
        0 0 0 4px rgba(11, 119, 150, 0.15);
}

.contact-wrapper
.contact-wrapper__form
input:invalid:not(:placeholder-shown):not(:focus),
.contact-wrapper
.contact-wrapper__form
textarea:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #ba5366;
}

.contact-wrapper
.contact-wrapper__form-help {
    color: var(--contact-muted);
    font-size: 0.83rem;
    line-height: 1.55;
}


/* ==========================================================
   Privacy consent
   ========================================================== */

.contact-wrapper
.contact-wrapper__form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    line-height: 1.55;
    background: var(--contact-highlight);
    border: 1px solid #d8edf2;
    border-radius: 14px;
}

.contact-wrapper
.contact-wrapper__form-check
input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0.15rem 0 0;
    accent-color: var(--contact-primary);
}

.contact-wrapper
.contact-wrapper__form-check label {
    color: var(--contact-ink);
    cursor: pointer;
}

.contact-wrapper
.contact-wrapper__form-check a {
    color: var(--contact-primary-dark);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.contact-wrapper
.contact-wrapper__form-check a:hover {
    color: var(--contact-primary);
}


/* ==========================================================
   Form action buttons
   ========================================================== */

.contact-wrapper
.contact-wrapper__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.contact-wrapper
.contact-wrapper__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    margin: 0;
    padding: 0.7rem 1.2rem;
    font: inherit;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.contact-wrapper
.contact-wrapper__button--primary {
    color: #ffffff;
    background: var(--contact-primary);
    box-shadow:
        0 8px 18px rgba(11, 119, 150, 0.18);
}

.contact-wrapper
.contact-wrapper__button--primary:hover {
    color: #ffffff;
    background: var(--contact-primary-dark);
    transform: translateY(-2px);
}

.contact-wrapper
.contact-wrapper__button--secondary {
    color: var(--contact-primary-dark);
    background: #ffffff;
    border-color: var(--contact-border);
}

.contact-wrapper
.contact-wrapper__button--secondary:hover {
    color: var(--contact-primary-dark);
    background: var(--contact-highlight);
    border-color: #81afbf;
}

.contact-wrapper
.contact-wrapper__button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}


/* ==========================================================
   Contact sidebar
   ========================================================== */

.contact-wrapper
.contact-wrapper__sidebar {
    display: grid;
    gap: 1rem;
}

.contact-wrapper
.contact-wrapper__info-card {
    padding: clamp(1.2rem, 2vw, 1.65rem);
}

.contact-wrapper
.contact-wrapper__info-card h2 {
    margin: 0 0 0.65rem;
    color: var(--contact-ink);
    font-size: 1.17rem;
    letter-spacing: -0.02em;
}

.contact-wrapper
.contact-wrapper__info-card p {
    margin: 0;
    color: var(--contact-muted);
    line-height: 1.65;
}


/* ==========================================================
   Sidebar links
   ========================================================== */

.contact-wrapper
.contact-wrapper__link-list {
    display: grid;
    gap: 0.15rem;
    margin-top: 1rem;
}

.contact-wrapper
.contact-wrapper__link-list a,
.contact-wrapper
.contact-wrapper__link-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.7rem;
    color: var(--contact-primary-dark);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.contact-wrapper
.contact-wrapper__link-list a:hover,
.contact-wrapper
.contact-wrapper__link-button:hover {
    color: var(--contact-primary);
    background: var(--contact-highlight);
}


/* ==========================================================
   Emergency card
   ========================================================== */

.contact-wrapper
.contact-wrapper__info-card--emergency {
    background: #fff9f4;
    border-color: #f0d6bc;
}

.contact-wrapper
.contact-wrapper__info-card--emergency h2 {
    color: #874225;
}

.contact-wrapper
.contact-wrapper__info-card--emergency strong {
    color: #7f321e;
}


/* ==========================================================
   Keyboard focus
   ========================================================== */

.contact-wrapper button:focus-visible,
.contact-wrapper a:focus-visible,
.contact-wrapper input:focus-visible,
.contact-wrapper select:focus-visible,
.contact-wrapper textarea:focus-visible {
    outline: 3px solid var(--contact-focus);
    outline-offset: 3px;
}


/* ==========================================================
   Tablet layout
   ========================================================== */

@media (max-width: 900px) {
    .contact-wrapper
    .contact-wrapper__layout {
        grid-template-columns: 1fr;
    }

    .contact-wrapper
    .contact-wrapper__sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   Mobile layout
   ========================================================== */

@media (max-width: 620px) {
    .contact-wrapper {
        padding-inline: 1rem;
    }

    .contact-wrapper
    .contact-wrapper__form-card,
    .contact-wrapper
    .contact-wrapper__info-card {
        border-radius: 18px;
    }

    .contact-wrapper
    .contact-wrapper__form-grid,
    .contact-wrapper
    .contact-wrapper__sidebar {
        grid-template-columns: 1fr;
    }

    .contact-wrapper
    .contact-wrapper__form-heading {
        flex-direction: column;
    }

    .contact-wrapper
    .contact-wrapper__read-button {
        width: 100%;
    }

    .contact-wrapper
    .contact-wrapper__form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-wrapper
    .contact-wrapper__button {
        width: 100%;
    }
}


/* ==========================================================
   Dark mode
   ========================================================== */

@media (prefers-color-scheme: dark) {
    .contact-wrapper {
        --contact-ink: #edf6fa;
        --contact-muted: #afc2cc;
        --contact-border: #334d5b;
        --contact-primary: #46b9d4;
        --contact-primary-dark: #79d3e5;
        --contact-highlight: #102c36;
        --contact-surface: #10212b;

        background:
            radial-gradient(
                circle at 8% 5%,
                rgba(57, 166, 190, 0.15),
                transparent 32rem
            ),
            radial-gradient(
                circle at 95% 60%,
                rgba(39, 153, 177, 0.08),
                transparent 26rem
            ),
            #09151d;
    }

    .contact-wrapper
    .contact-wrapper__form
    input:not([type="checkbox"]),
    .contact-wrapper
    .contact-wrapper__form select,
    .contact-wrapper
    .contact-wrapper__form textarea {
        color: var(--contact-ink);
        background: #0d1c25;
        border-color: #395563;
    }

    .contact-wrapper
    .contact-wrapper__form
    input:not([type="checkbox"]):focus,
    .contact-wrapper
    .contact-wrapper__form select:focus,
    .contact-wrapper
    .contact-wrapper__form textarea:focus {
        background: #122733;
    }

    .contact-wrapper
    .contact-wrapper__read-button,
    .contact-wrapper
    .contact-wrapper__button--secondary {
        color: var(--contact-primary-dark);
        background: #10212b;
        border-color: #395563;
    }

    .contact-wrapper
    .contact-wrapper__form-check {
        background: #102c36;
        border-color: #254854;
    }

    .contact-wrapper
    .contact-wrapper__info-card--emergency {
        background: #322019;
        border-color: #70412c;
    }

    .contact-wrapper
    .contact-wrapper__info-card--emergency h2,
    .contact-wrapper
    .contact-wrapper__info-card--emergency strong {
        color: #ffc19f;
    }
}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .contact-wrapper
    .contact-wrapper__button,
    .contact-wrapper
    .contact-wrapper__read-button,
    .contact-wrapper
    .contact-wrapper__form input,
    .contact-wrapper
    .contact-wrapper__form select,
    .contact-wrapper
    .contact-wrapper__form textarea {
        transition: none;
    }

    .contact-wrapper
    .contact-wrapper__button--primary:hover,
    .contact-wrapper
    .contact-wrapper__read-button:hover {
        transform: none;
    }
}


/* ==========================================================
   Increased contrast
   ========================================================== */

@media (prefers-contrast: more) {
    .contact-wrapper
    .contact-wrapper__form
    input:not([type="checkbox"]),
    .contact-wrapper
    .contact-wrapper__form select,
    .contact-wrapper
    .contact-wrapper__form textarea,
    .contact-wrapper
    .contact-wrapper__form-card,
    .contact-wrapper
    .contact-wrapper__info-card {
        border-color: #354f5e;
    }
}

* {
    text-decoration:none;
}