/* ICNA Dawah Leads — volunteer capture form (LEADS-WP-1).
 *
 * Structure follows docs/dawah-form-fix/ICNA_Dawah_Interest_Lead_Form-1.html:
 * a single card, rounded fields, gender as two pills rather than a dropdown,
 * and each observation option as a card with a bold title over a one-line
 * description. The palette is the ICNA site's dark green rather than the
 * reference's teal, so the form sits inside the live theme instead of next
 * to it.
 *
 * There is no JavaScript. Every selected state below hangs off :checked, so
 * the form still shows what is picked with scripts blocked. */

.icna-leads-form,
.icna-leads-form-notice {
    /* Scoped to the form: these are set on the elements themselves rather than
       on :root so nothing here can leak into the surrounding theme. */
    --icna-green-900: #0d3b22;
    --icna-green-800: #14532d;
    --icna-green-600: #2f7a4f;
    --icna-gold-600: #a97f2b;
    --icna-sand-50: #fcfbf7;
    --icna-sand-100: #f4f1e8;
    --icna-line: #ddd8ca;
    --icna-ink-900: #16241d;
    --icna-ink-500: #5c6b67;
    --icna-error: #b3402f;
}

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

.icna-leads-form {
    box-sizing: border-box;
    max-width: 620px;
    margin: 0 auto;
    padding: 30px 28px 26px;
    background: var(--icna-sand-50);
    border: 1px solid var(--icna-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18, 32, 29, 0.04), 0 12px 32px -18px rgba(13, 59, 34, 0.25);
    color: var(--icna-ink-900);
}

.icna-leads-form *,
.icna-leads-form *::before,
.icna-leads-form *::after {
    box-sizing: border-box;
}

.icna-leads-intro {
    margin: 0 0 22px;
    color: var(--icna-ink-500);
    font-size: 14.5px;
    line-height: 1.55;
}

/* THE HONEYPOT.
   Do not delete this rule and do not replace it with `display:none`.

   - Removing it makes the trap field visible, and real volunteers start filling
     it in — which silently discards their submission, the worst possible
     failure for a form whose whole job is capturing contact details.
   - `display:none` is what naive bots look for when deciding which fields to
     skip. Positioning it off-screen keeps it in the layout tree, so a bot that
     fills "every visible field" still takes the bait.

   The field also carries aria-hidden and tabindex="-1" in the markup, so
   screen-reader and keyboard users never reach it either. */
.icna-leads-form .icna-leads-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Fields ------------------------------------------------------------ */

.icna-leads-field {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0; /* a fieldset otherwise refuses to shrink inside a grid cell */
}

.icna-leads-field > label,
.icna-leads-field > legend {
    display: block;
    padding: 0;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--icna-green-900);
}

.icna-leads-req {
    color: var(--icna-gold-600);
}

.icna-leads-opt {
    color: var(--icna-ink-500);
    font-size: 12px;
    font-weight: 400;
}

.icna-leads-form input[type="text"],
.icna-leads-form input[type="email"],
.icna-leads-form input[type="tel"],
.icna-leads-form select,
.icna-leads-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--icna-line);
    border-radius: 9px;
    background: #fff;
    color: var(--icna-ink-900);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.icna-leads-form textarea {
    min-height: 58px;
    resize: vertical;
}

.icna-leads-form input:focus,
.icna-leads-form select:focus,
.icna-leads-form textarea:focus {
    outline: none;
    border-color: var(--icna-green-600);
    box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.18);
}

.icna-leads-form ::placeholder {
    color: #9aa6a1;
    opacity: 1;
}

/* Phone and email sit side by side on anything wider than a phone; the
   single-column fallback is the base rule, so a narrow screen needs no query. */
.icna-leads-row2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 14px;
}

@media (min-width: 480px) {
    .icna-leads-row2 {
        grid-template-columns: 1fr 1fr;
    }
}

.icna-leads-hint {
    margin: -8px 0 18px;
    color: var(--icna-ink-500);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ---- Gender pills ------------------------------------------------------ */

.icna-leads-pill-group {
    display: flex;
    gap: 10px;
}

/* Visually hidden, NOT display:none — a hidden-by-display radio is skipped by
   the keyboard and by some screen readers, which would make the pills
   unreachable without a mouse. */
.icna-leads-pill-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.icna-leads-pill {
    flex: 1 1 0;
    padding: 12px 10px;
    border: 1.5px solid var(--icna-line);
    border-radius: 9px;
    background: #fff;
    color: var(--icna-ink-900);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.icna-leads-pill:hover {
    border-color: var(--icna-green-600);
}

.icna-leads-pill-input:checked + .icna-leads-pill {
    background: var(--icna-green-800);
    border-color: var(--icna-green-800);
    color: #fff;
    font-weight: 600;
}

.icna-leads-pill-input:focus-visible + .icna-leads-pill {
    outline: 2px solid var(--icna-green-600);
    outline-offset: 2px;
}

/* ---- Observation cards ------------------------------------------------- */

.icna-leads-check-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.icna-leads-check-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border: 1.5px solid var(--icna-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.icna-leads-check-card:hover {
    border-color: var(--icna-green-600);
}

.icna-leads-check-card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--icna-green-800);
    cursor: pointer;
}

/* :has() is what tints the whole card. Where it is unsupported the card simply
   stays white and the native checkbox still shows the state — the styling
   degrades, the information does not. */
.icna-leads-check-card:has(input:checked) {
    border-color: var(--icna-green-600);
    background: rgba(47, 122, 79, 0.07);
}

.icna-leads-check-card:has(input:focus-visible) {
    outline: 2px solid var(--icna-green-600);
    outline-offset: 2px;
}

/* ---- The box "Other" reveals ------------------------------------------- */

/* Written INVERTED on purpose: the box is visible by default and hidden only
   while "Other" is unticked.

   A browser without :has() throws the whole rule away as an unknown selector,
   so the field stays permanently visible there — the volunteer can still type,
   which is what matters. Written the other way round (hidden by default, shown
   by :has()) the same browser would hide the box with no way to reveal it, and
   a required field nobody can fill in blocks the submission outright.

   The state is the checkbox's own :checked, so a form re-rendered by the server
   with "Other" already ticked comes back with the box open, no script involved.

   The "other" in the attribute selector is ICNA_LEADS_OTHER_STATUS. A stylesheet
   cannot read a PHP constant, so renaming that slug means editing this line too. */
.icna-leads-check-list:not(:has(input[value="other"]:checked)) .icna-leads-reveal {
    display: none;
}

.icna-leads-reveal {
    /* Indented to the card text above it, so it reads as belonging to "Other"
       rather than as the next question. */
    margin: -3px 0 2px;
    padding: 0 0 0 30px;
}

.icna-leads-reveal > label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--icna-green-900);
}

.icna-leads-reveal.is-invalid > label {
    color: var(--icna-error);
}

.icna-leads-reveal.is-invalid input[type="text"] {
    border-color: var(--icna-error);
}

.icna-leads-check-text {
    display: flex;
    flex-direction: column;
}

.icna-leads-check-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--icna-green-900);
}

.icna-leads-check-desc {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--icna-ink-500);
}

/* ---- Validation -------------------------------------------------------- */

.icna-leads-field.is-invalid > label,
.icna-leads-field.is-invalid > legend {
    color: var(--icna-error);
}

.icna-leads-field.is-invalid input[type="text"],
.icna-leads-field.is-invalid input[type="email"],
.icna-leads-field.is-invalid input[type="tel"],
.icna-leads-field.is-invalid select,
.icna-leads-field.is-invalid textarea,
.icna-leads-field.is-invalid .icna-leads-pill,
.icna-leads-field.is-invalid .icna-leads-check-card {
    border-color: var(--icna-error);
}

.icna-leads-errtext {
    display: block;
    margin-top: 5px;
    color: var(--icna-error);
    font-size: 12.5px;
    line-height: 1.45;
}

/* The contact-details error belongs to three fields at once, so it is printed
   under the hint rather than inside any one of them. */
.icna-leads-errtext.is-block {
    margin: -10px 0 18px;
}

/* ---- Submit ------------------------------------------------------------ */

.icna-leads-submit {
    margin: 6px 0 0;
}

.icna-leads-submit button {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--icna-green-800);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.icna-leads-submit button:hover,
.icna-leads-submit button:focus {
    background: var(--icna-green-600);
}

.icna-leads-privacy {
    margin: 14px 0 0;
    color: var(--icna-ink-500);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* ---- Notices ----------------------------------------------------------- */

.icna-leads-form-notice {
    max-width: 620px;
    margin: 0 auto 20px;
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid;
    color: var(--icna-ink-900);
}

.icna-leads-form-notice p {
    margin: 0 0 8px;
}

.icna-leads-form-notice p:last-child {
    margin-bottom: 0;
}

.icna-leads-notice-title {
    font-weight: 700;
}

.icna-leads-form-notice.is-success {
    background: #edf6ef;
    border-color: var(--icna-green-800);
}

.icna-leads-form-notice.is-error {
    background: #fcf1ef;
    border-color: var(--icna-error);
}

.icna-leads-form-notice ul {
    margin: 0;
    padding-left: 20px;
}

.icna-leads-again {
    display: inline-block;
    margin-top: 4px;
    padding: 9px 16px;
    border: 1.5px solid var(--icna-green-800);
    border-radius: 8px;
    color: var(--icna-green-800);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.icna-leads-again:hover,
.icna-leads-again:focus {
    background: var(--icna-green-800);
    color: #fff;
}

/* The green flash the script shows after a background save. It is removed from
   the DOM once it has faded, so there is no hidden element left behind to
   confuse a screen reader on the next submission. */
.icna-leads-flash {
    transition: opacity 0.25s ease;
}

.icna-leads-flash.is-leaving {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .icna-leads-flash {
        transition: none;
    }
}

/* While a background save is in flight. */
.icna-leads-submit button:disabled {
    background: #7d8f85;
    cursor: progress;
}

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 520px) {
    .icna-leads-form {
        padding: 22px 18px 20px;
        border-radius: 12px;
    }
}