/* The public forms - Pages/Contact.cshtml and Pages/Sponsor.cshtml (MainClass "page inquiry-page").
   Field, chip and alert styles follow DESIGN.md's Inputs: a Muted edge that passes 3:1, a blue
   focus ring, a red edge and Signal Red Ink message on error. */

.inq-narrow { max-width: 46rem; margin-inline: auto; display: grid; gap: 2.25rem; }
.inq-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.25rem; }
.inq-split > .inq-intro { flex: 1 1 22rem; min-width: 0; }
.inq-split > .inq-card { flex: 1.2 1 28rem; min-width: 0; }

.inq-intro { display: grid; gap: 1rem; align-content: start; }
.inq-intro .section-title { margin: 0; text-wrap: balance; }
.inq-intro .section-lede { margin: 0; }
.inq-eyebrow {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .75rem;
    letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.inq-lede { margin: .25rem 0 0; max-width: 44rem; color: var(--ink-soft); text-wrap: pretty; }

/* The three ways to help, beside the sponsor form. */
.inq-ways { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.inq-ways li {
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue);
    border-radius: .85rem; padding: 1.15rem 1.15rem 1.15rem 1.35rem; box-shadow: var(--shadow);
}
.inq-ways b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.inq-ways span { display: block; margin-top: .3rem; font-size: .82rem; line-height: 1.5; color: var(--muted); }

.inq-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: .85rem;
    padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow);
}
.inq-form { display: grid; gap: 1.1rem; }
.inq-form-title, .inq-done h2 { margin: 0; font-size: 1.25rem; line-height: 1.15; color: var(--ink); }
.inq-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.inq-fieldset > legend { padding: 0; margin-bottom: .6rem; }
.inq-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.inq-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.inq-label {
    font-family: var(--font-display); font-weight: 600; font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.inq-optional { font-family: var(--font-sans); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.inq-req { color: var(--red-ink); }

.inq-input {
    width: 100%; min-height: 2.9rem; padding: .6rem .85rem;
    border: 1px solid var(--muted); border-radius: .6rem; background: var(--surface); color: var(--ink);
    font: inherit; font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.inq-textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.inq-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.inq-input.input-validation-error { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.inq-error { font-size: .82rem; color: var(--red-ink); }
.inq-error:empty, .inq-error.field-validation-valid { display: none; }

.inq-small { margin: 0; font-size: .82rem; color: var(--muted); }
.inq-small a, .inq-note a, .inq-check a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: .15em; }
.inq-form .inq-small:has(.inq-req) { margin-top: -.4rem; }

/* Topic chips (/Contact) and the sponsorship type (/Sponsor): radios dressed as chips and tiles,
   so the choice posts with the form and works without script. */
.chip-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.kind-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.chip-pick, .kind-pick { position: relative; display: flex; cursor: pointer; }
.chip-pick input, .kind-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-pick span {
    display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 1rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
    font-size: .82rem; color: var(--ink); transition: border-color .15s ease, color .15s ease;
}
.kind-pick span {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .6rem 1rem;
    border: 1px solid var(--muted); border-radius: .6rem; background: var(--surface); text-align: center;
    font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; color: var(--ink);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.chip-pick:hover span, .kind-pick:hover span { border-color: var(--blue); }
.kind-pick:hover span { transform: translateY(-2px); }
.chip-pick input:checked + span, .kind-pick input:checked + span {
    border-color: var(--blue); color: var(--blue-ink); font-weight: 600;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.kind-pick input:checked + span { box-shadow: inset 0 0 0 1px var(--blue); }
.chip-pick input:focus-visible + span, .kind-pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Topic notes: each shows only while its topic is picked. */
.inq-note { display: none; margin: 0; padding: .8rem 1rem; border-radius: .6rem; font-size: .82rem; line-height: 1.5; }
.inq-note-order { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.inq-note-info {
    background: color-mix(in srgb, var(--blue) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue-ink);
}
.inq-note-info a { color: var(--blue-ink); font-weight: 600; }
.inq-note-order a { color: var(--amber-ink); }
.inq-form:has(input[name="Input.Topic"][value="Order"]:checked) .inq-note-order,
.inq-form:has(input[name="Input.Topic"][value="Sponsorship"]:checked) .inq-note-info { display: block; }

/* Company and website: a corporate sponsor only. */
.inq-corp { display: none; }
.inq-form:has(input[name="Input.Kind"][value="Corporate"]:checked) .inq-corp { display: contents; }

.inq-checks { display: flex; flex-wrap: wrap; gap: 0 1.5rem; color: var(--ink-soft); }
.inq-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.inq-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.inq-consent { align-items: flex-start; min-height: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.inq-consent input { margin-top: 1px; }
/* The consent row keeps a transparent edge (pulled out by its own width, so the text stays in
   line) that turns red when the box must be ticked - a lone unticked box is easy to miss. */
.inq-consent {
    padding: .7rem .85rem; margin-inline: calc(-.85rem - 1px);
    border: 1px solid transparent; border-radius: .6rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.inq-consent:has(input[aria-invalid="true"]), .inq-consent:has(input.input-validation-error) {
    border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}
.inq-consent input[aria-invalid="true"], .inq-consent input.input-validation-error { outline: 2px solid var(--red); outline-offset: 1px; }
.inq-consent + .inq-error { margin-top: .1rem; }
.inq-copy { min-height: 44px; font-size: .92rem; }

.inq-alert {
    padding: .8rem 1rem; border: 1px solid var(--red); border-radius: .6rem; background: var(--surface);
    font-size: .82rem; line-height: 1.5; color: var(--red-ink);
}
.inq-alert .validation-summary-valid { display: none; }
.inq-alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.inq-alert:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.inq-alert-title { margin: 0; font-weight: 600; }
.inq-alert a { color: var(--red-ink); text-decoration: underline; text-underline-offset: .15em; }

.inq-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.inq-send .cta { font-size: 1rem; }

/* The honeypot: off-screen, out of the tab order and the accessibility tree. */
.inq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.inq-done { display: grid; gap: 1rem; justify-items: start; padding: 1rem 0; }
.inq-done p { margin: 0; color: var(--ink-soft); }
.inq-done-mark {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-ink);
}

@media (max-width: 34rem) {
    .kind-picks { grid-template-columns: minmax(0, 1fr); }
}