/* ==========================================================================
   Bird Conservation Nepal — forms
   --------------------------------------------------------------------------
   The furniture every form on the site needs: the panel it sits in, a field
   with its label, hint and error, and the submit button. Kept separate from
   any one page because the donate form and the contact form are the same
   thing wearing different labels.

   The redesigned pages load neither Bootstrap nor style.css, so .form-control
   and .form-group mean nothing on them. Nothing here depends on either.

   Plain CSS, no build step:
     $data['page_css'] = array('bcn-page.css', 'bcn-blocks.css', 'bcn-form.css');
   ========================================================================== */

/* --- The panel ------------------------------------------------------------ */

.form-panel {
    max-width: 40rem;
    background: var(--paper-hi);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-panel__title {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: var(--display-weight);
    margin: 0 0 0.6rem;
}

.form-panel__lede {
    margin: 0 0 1.75rem;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

/* --- One field ------------------------------------------------------------ */

.field { margin-bottom: 1.4rem; }

.field > label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

/* "required" spelled out rather than an asterisk. An asterisk has to be
   explained by a legend somewhere else on the page; the word does not. */
.field__req {
    margin-left: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--alert);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(46, 107, 166, 0.15);
}

.field__hint {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

/* --- When a field is wrong ------------------------------------------------ */

.field--bad input,
.field--bad select,
.field--bad textarea { border-color: var(--alert); }

.field--bad input:focus,
.field--bad select:focus,
.field--bad textarea:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15); }

/* The message sits under the field it is about. Colour alone would not say
   which field is wrong to a reader who cannot see it, so the text names the
   field too. */
.field__error {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--alert);
}

/* --- Money ---------------------------------------------------------------- */

/* The currency is set inside the box rather than left in the label, so it is
   still on screen while the number is being typed. */
.field__money { display: flex; align-items: stretch; }

.field__prefix {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-right: none;
    border-radius: 2px 0 0 2px;
}

.field__money input { border-radius: 0 2px 2px 0; }

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

/* Off-screen rather than display:none — a bot that skips hidden fields is
   more likely to fill one it believes is merely positioned oddly. It is
   aria-hidden and out of the tab order, so nobody using the page meets it. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- The answer ----------------------------------------------------------- */

.form-note {
    margin: 0 0 1.5rem;
    padding: 0.95rem 1.15rem;
    border-left: 3px solid var(--rule-2);
    background: #fff;
    font-size: 0.9375rem;
}

.form-note--ok  { border-left-color: var(--accent); }
.form-note--bad { border-left-color: var(--alert); }

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

.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95em 2.2em;
    font-family: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.form-submit:hover:not(:disabled) { background: transparent; color: var(--accent); }

.form-submit:disabled { opacity: 0.6; cursor: default; }

/* --- The QR code ---------------------------------------------------------- */

/* The way the money actually moves, so it is given the side column rather
   than being hidden behind a dropdown as it was before. */
.qr-card__code {
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    padding: 0.75rem;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
    image-rendering: pixelated;
}

.qr-card__note {
    margin: 0.9rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --- Verifying the payment ------------------------------------------------ */

/* The line that lets a donor check the QR code has not been swapped. It is
   given a rule and a tint so it reads as an instruction rather than as more
   supporting text, because it is the only defence a donor has that does not
   depend on the site itself being untampered with. */
.qr-card__check {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--alert);
    background: #fff;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink);
}

.qr-card__check a { color: var(--blue); text-decoration: underline; }

.safety-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.safety-list li { margin-bottom: 0.6rem; }
.safety-list li:last-child { margin-bottom: 0; }

/* --- Grouped sections ----------------------------------------------------- */

/* A long form broken into named parts. The membership application asks about
   twenty questions, and an undivided run of that many boxes is read as work
   rather than as a set of small, answerable groups. */

.form-set {
    margin: 0 0 2rem;
    padding: 0;
    border: none;
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
}

.form-set:first-of-type { border-top: none; padding-top: 0; }

.form-set > legend {
    padding: 0;
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.9rem;
}

.form-set > .field__hint { margin: -0.5rem 0 1rem; }

/* Two fields on one line where they are naturally a pair — a title and a date
   of birth, a phone number and a post box. They stack on a narrow screen. */
.field--pair { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }

@media (min-width: 560px) {
    .field--pair { grid-template-columns: 1fr 1fr; }
}

.field--pair label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.field--pair input,
.field--pair select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
}

/* --- A choice ------------------------------------------------------------- */

/* The whole row is the label, so the target is the line and not the 13-pixel
   box at the start of it. */
.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.choice:hover { border-color: var(--blue); }

.choice input { margin: 0.2rem 0 0; flex: 0 0 auto; }

.choice:has(input:checked) { border-color: var(--accent); background: var(--paper-hi); }

.choice__body { display: block; }

.choice__name { display: block; font-size: 0.9375rem; color: var(--ink); }

.choice__note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.form-set.field--bad { border-left: 3px solid var(--alert); padding-left: 1rem; }

/* --- Map ------------------------------------------------------------------ */

/* Responsive, unlike the 350x350 box the embed generator hardcoded. */
.map { margin-top: clamp(2rem, 4vw, 3rem); max-width: 40rem; }

.map__note {
    margin: 0 0 0.9rem;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.map__note a { color: var(--blue); text-decoration: underline; }

.map__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-hi);
}

.map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}