/* ---------------------------------------------------------------------------
   Contact us, to the approved mock-up: the landmarks hero, the form card with
   its topic select, and the WhatsApp and other-ways cards beside it.

   Colours come from the shared --care-* and --sihatuna-* tokens; the one
   colour that is nobody's token is WhatsApp's own green, which stays literal
   in both themes because it is their brand, not ours. Offsets are logical
   for the Arabic mirror.
   --------------------------------------------------------------------------- */
.contact-page {
    background:
        radial-gradient(circle at 90% 5%,
            color-mix(in srgb, var(--care-primary-strong, #08765d) 8%, transparent),
            transparent 26%),
        radial-gradient(circle at 8% 8%,
            color-mix(in srgb, var(--care-secondary, #4aa0d8) 8%, transparent),
            transparent 24%);
}

/* ----- Hero --------------------------------------------------------------- */

.contact-hero {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: grid;
    place-items: center;
    padding: 64px 0;
    border-block-end: 1px solid var(--care-border, #e4ece8);
    background:
        radial-gradient(circle at 82% 12%,
            color-mix(in srgb, var(--care-secondary, #4aa0d8) 8%, transparent),
            transparent 28%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--care-surface, #edf6f2) 68%, transparent),
            color-mix(in srgb, var(--care-surface-soft, #f7fbfe) 97%, transparent) 58%,
            color-mix(in srgb, var(--care-surface-soft, #f7fbfe) 90%, transparent)),
        var(--care-surface, #edf6f2);
}

/* The About hero's landmarks, at the shared side-strip scale: bottom-anchored
   with the top overhang so the artwork's wordmark stays clipped, and flipped
   in LTR so the mask flips with it. */
.contact-hero::before {
    content: "";
    position: absolute;
    inset-block: -14rem -40px;
    inset-inline-start: -40px;
    width: min(46vw, 620px);
    opacity: 0.44;
    background-image: url("/images/home/sihatuna-home-landmarks.webp");
    background-size: cover;
    background-position: center bottom;
    filter: saturate(0.72);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    pointer-events: none;
}

[dir="ltr"] .contact-hero::before {
    transform: scaleX(-1);
}

[data-bs-theme="dark"] .contact-hero::before {
    opacity: 0.22;
    filter: saturate(0.55) brightness(0.72);
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin-inline: auto;
    text-align: center;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--care-primary-dark, #055744);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.contact-eyebrow::before {
    content: "";
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: var(--sihatuna-gold, #c49a37);
}

.contact-hero h1 {
    margin: 22px 0 0;
    color: var(--care-ink, #163e5f);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.contact-hero p {
    max-width: 720px;
    margin: 20px auto 0;
    color: var(--care-muted, #55635f);
    font-size: 1.08rem;
    line-height: 1.75;
}

/* Georgia carries no Arabic; the RTL headings take the page's own face. */
[dir="rtl"] .contact-hero h1,
[dir="rtl"] .contact-card h2 {
    font-family: inherit;
    letter-spacing: 0;
}

/* ----- Layout ------------------------------------------------------------- */

.contact-section {
    padding: 48px 0;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.contact-card,
.contact-support-card,
.contact-info-card {
    overflow: hidden;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 28px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-md, 0 14px 34px rgba(4, 65, 50, .10));
}

/* ----- The form card ------------------------------------------------------ */

.contact-card {
    position: relative;
    padding: 28px;
}

.contact-card h2 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1.18;
}

.contact-card > p {
    margin: 10px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.7;
}

.contact-form {
    display: grid;
    gap: 18px;
    margin-block-start: 24px;
}

.contact-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-field {
    display: grid;
    gap: 8px;
}

.contact-field label {
    color: var(--care-ink, #163e5f);
    font-weight: 800;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 1px solid var(--care-control-border, #c7d6d0);
    border-radius: 15px;
    color: var(--care-ink, #163e5f);
    background: var(--care-card, #fff);
    outline: none;
    box-shadow: none;
}

.contact-field input,
.contact-field select {
    height: 54px;
    padding: 0 16px;
}

.contact-field textarea {
    min-height: 190px;
    padding: 16px;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: color-mix(in srgb, var(--care-primary-strong, #08765d) 62%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--care-primary-strong, #08765d) 12%, transparent);
}

.contact-form .field-validation-error {
    color: var(--bs-danger, #dc3545);
    font-size: 0.86rem;
}

.contact-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.contact-privacy-note {
    max-width: 520px;
    margin: 0;
    color: var(--care-muted, #55635f);
    font-size: 0.86rem;
    line-height: 1.6;
}

.contact-form-footer .btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 16px;
    font-weight: 800;
}

/* ----- The security check ------------------------------------------------- */

/* A quiet box, not a checkpoint: the card's own border and radius, a green
   tint at the legend, and nothing in a warning colour unless something has
   actually gone wrong. Logical offsets so the Arabic mirror comes free. */
.contact-security {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 18px 20px 20px;
    border: 1px solid color-mix(in srgb, var(--care-primary-strong, #08765d) 28%, var(--care-border, #e4ece8));
    border-radius: 18px;
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 4%, var(--care-card, #fff));
    min-inline-size: 0;
}

.contact-security-heading {
    float: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.contact-security-heading .isax {
    color: var(--care-primary-dark, #055744);
    font-size: 1.25rem;
}

.contact-security-lead {
    margin: -6px 0 0;
    color: var(--care-muted, #55635f);
    font-size: 0.9rem;
    line-height: 1.6;
}

.contact-security-question {
    max-width: 360px;
}

.contact-math-label {
    font-weight: 700;
}

/* The sum itself: always left to right, whatever the sentence around it. */
.contact-math-question {
    display: inline-block;
    margin-inline: 0.1em 0.05em;
    padding: 0 0.4em;
    border-radius: 8px;
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 10%, var(--care-card, #fff));
    color: var(--care-primary-dark, #055744);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    direction: ltr;
    unicode-bidi: isolate;
}

.contact-security-question input {
    max-width: 180px;
    text-align: start;
}

.contact-security-help {
    color: var(--care-muted, #55635f);
    font-size: 0.82rem;
}

.contact-turnstile {
    display: grid;
    gap: 10px;
    min-inline-size: 0;
    /* Cloudflare's flexible widget never goes below 300px; on the narrowest
       phones that is wider than this box, so the widget scrolls inside its own
       row rather than pushing the page sideways. */
    overflow-x: auto;
}

/* The widget's flexible size fills its column; 300px is Cloudflare's minimum. */
.contact-turnstile-widget {
    min-height: 65px;
    max-width: 100%;
}

.contact-turnstile-widget iframe {
    max-width: 100%;
}

/* The one warning colour in the box, and only when verification could not
   load or fails: icon plus text, so the colour is never the only signal. */
.contact-security-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--bs-danger, #dc3545);
    font-size: 0.9rem;
    line-height: 1.5;
}

.contact-security-error .isax {
    margin-block-start: 2px;
    font-size: 1.1rem;
}

/* ----- The honeypot ------------------------------------------------------- */

/* Off-screen rather than display:none: a field a script can see and fill but a
   person never does. Kept out of the tab order by the markup (tabindex=-1) and
   out of assistive technology by aria-hidden; this only takes it off the canvas. */
.contact-extra-field {
    position: absolute;
    inset-inline-start: -10000px;
    inset-block-start: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* The confirmation after the redirect, above the form it answers for. */
.contact-sent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 20px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--care-primary-strong, #08765d) 32%, var(--care-border, #e4ece8));
    border-radius: 18px;
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 8%, var(--care-card, #fff));
}

.contact-sent .isax {
    margin-block-start: 2px;
    color: var(--care-primary-dark, #055744);
    font-size: 1.3rem;
}

.contact-sent strong {
    color: var(--care-ink, #163e5f);
}

.contact-sent p {
    margin: 4px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.6;
}

/* ----- The WhatsApp card -------------------------------------------------- */

.contact-side-stack {
    display: grid;
    gap: 16px;
}

.contact-side-label {
    margin: 0 0 10px;
    color: var(--care-muted, #55635f);
    font-size: 0.83rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-support-card {
    position: relative;
    padding: 22px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--care-secondary, #4aa0d8) 12%, var(--care-card, #fff)),
        var(--care-card, #fff));
}

.contact-support-card::after {
    content: "";
    position: absolute;
    inset-block-end: -80px;
    inset-inline-end: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 7%, transparent);
    pointer-events: none;
}

.contact-support-card > * {
    position: relative;
    z-index: 1;
}

/* WhatsApp's own green, in both themes: the tile is their mark, not ours. */
.contact-whatsapp-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: #25d366;
    box-shadow: var(--sihatuna-shadow-sm, 0 8px 22px rgba(4, 65, 50, .08));
    font-size: 2.1rem;
}

.contact-support-card h2 {
    margin: 18px 0 0;
    color: var(--care-ink, #163e5f);
    font-size: 1.22rem;
}

.contact-support-card p {
    margin: 10px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.65;
}

.contact-support-card .btn {
    min-height: 50px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-block-start: 18px;
    border-radius: 16px;
    font-weight: 800;
}

.contact-whatsapp-number {
    display: block;
    margin-block-start: 14px;
    color: var(--care-muted, #55635f);
    font-weight: 800;
    /* A phone number reads left-to-right in both languages. */
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .contact-whatsapp-number {
    text-align: end;
}

/* ----- Other ways to reach us --------------------------------------------- */

.contact-info-card {
    padding: 22px;
}

.contact-info-card h2 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1.15rem;
}

.contact-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: start;
    color: var(--care-muted, #55635f);
    line-height: 1.55;
}

.contact-list .isax {
    margin-block-start: 2px;
    color: var(--care-primary-dark, #055744);
    font-size: 1.2rem;
}

.contact-list strong {
    display: block;
    color: var(--care-ink, #163e5f);
}

.contact-list a {
    color: var(--care-primary-dark, #055744);
    font-weight: 800;
    text-decoration: none;
}

/* ----- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .contact-field-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero {
        min-height: 330px;
    }

    .contact-card {
        padding: 22px;
    }

    .contact-security {
        padding: 16px 14px 16px;
    }

    .contact-security-question,
    .contact-security-question input {
        max-width: none;
    }

    .contact-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-form-footer .btn {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .contact-hero {
        padding: 52px 0;
    }

    .contact-section {
        padding: 32px 0;
    }
}

/* ----- Report-an-error form -----

   The report page borrows this sheet on purpose: it is the contact form plus
   photos. One centred card, no side stack. */

.contact-card.report-single {
    max-width: 680px;
    margin-inline: auto;
}

.report-single .report-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--care-primary-dark, #055744);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.report-single .report-back svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
}

.report-single .report-title {
    font-size: 1.4rem;
    margin-bottom: 6px;
}

.report-single input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px dashed var(--care-control-border, #74889b);
    border-radius: 12px;
    background: var(--care-surface-soft, #f7fbfe);
    font-size: .86rem;
}

[data-bs-theme="dark"] .report-single input[type="file"] {
    background: rgba(255, 255, 255, .04);
}