/* Contact / complaint page. Builds on ../styles.css (colour tokens, dark mode, body, footer). */

main.contact { max-width: 720px; padding-bottom: 24px; }

.contact-intro h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.25; margin: 28px 0 10px; letter-spacing: -0.02em; }
.contact-intro p { color: var(--text-muted); line-height: 1.55; margin: 0 0 24px; }
main.contact a { color: var(--blue); }

/* ---- form ---- */
#contact-form { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }

fieldset.choices { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
fieldset.choices legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin: 0 0 10px; }

.choice {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--blue); }
.choice input { margin: 4px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--blue); }
.choice-body { display: grid; gap: 2px; }
.choice-body small { color: var(--text-muted); font-size: .88rem; line-height: 1.4; }
.choice:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,111,237,.25); }
.choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice-urgent:has(input:checked) { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198,40,40,.25); }
.badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #c62828; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }

/* Collapsed: only the chosen option stays visible, with a "Change" button to unfold the rest */
fieldset.choices.collapsed .choice:not(:has(input:checked)) { display: none; }
fieldset.choices.collapsed .choice { cursor: default; }
button.change-choice {
  justify-self: start; font: inherit; font-weight: 600; font-size: .88rem; color: var(--blue);
  background: transparent; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline;
}
button.change-choice:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.hint { background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 10px; padding: 4px 14px; margin: 0 0 18px; }
.hint p { margin: 10px 0; line-height: 1.5; font-size: .95rem; }
.hint[data-category="SuspectedDataBreach"] { border-left-color: #c62828; }

.field { margin: 0 0 16px; }
.field > label { display: block; font-weight: 600; margin: 0 0 6px; }
.optional, .required { font-weight: 400; color: var(--text-muted); font-size: .85rem; }
.field input[type=text], .field input[type=email], .field select, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid rgba(47,111,237,.45); outline-offset: 1px; border-color: var(--blue); }
.field.invalid input, .field.invalid textarea { border-color: #c62828; }
.field-help { margin: 6px 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.45; }
.field-error, .form-error { color: #c62828; font-size: .9rem; margin: 6px 0 0; font-weight: 600; }
.form-error { border: 1px solid #c62828; border-radius: 10px; padding: 10px 12px; background: rgba(198,40,40,.08); margin: 0 0 14px; }
@media (prefers-color-scheme: dark) { .field-error, .form-error { color: #ff8a80; } .field.invalid input, .field.invalid textarea { border-color: #ff8a80; } }

/* Honeypot: off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.notice { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px 6px; margin: 4px 0 18px; font-size: .9rem; line-height: 1.5; }
.notice h2 { font-size: 1rem; margin: 12px 0 6px; }
.notice ul { margin: 0 0 8px; padding-left: 18px; }
.notice li { margin: 6px 0; }
.notice p { margin: 0 0 10px; color: var(--text-muted); }

button.submit, button.secondary {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 12px 22px; cursor: pointer;
}
button.submit { background: var(--navy); color: #fff; width: 100%; }
button.submit:hover:not(:disabled) { background: var(--navy-dark); }
button.submit:disabled { opacity: .6; cursor: progress; }
button.secondary { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { button.submit { background: var(--blue); } button.submit:hover:not(:disabled) { background: #2559c4; } }

/* ---- confirmation ---- */
.done { background: var(--card-bg-green); border: 1px solid #b7d9ae; border-radius: var(--radius); padding: 8px 22px 16px; color: #16331a; }
.done h2 { font-size: 1.3rem; }
.done:focus { outline: none; }
.done .reference { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; user-select: all; }
.done button.secondary { color: #16331a; border-color: #16331a; }
.done a { color: #0d4a1e; }
@media (prefers-color-scheme: dark) { .done { background: #12301a; border-color: #2c5a37; color: #dff3e3; } .done button.secondary { color: #dff3e3; border-color: #dff3e3; } .done a { color: #9fe0ad; } }

/* ---- info cards ---- */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 22px 18px; margin: 20px 0 0; }
.card h2 { font-size: 1.15rem; margin: 16px 0 10px; }
.card h3 { font-size: .95rem; margin: 0 0 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.card p, .card li { line-height: 1.55; }
.card ol { padding-left: 20px; margin: 0; }
.card li { margin: 8px 0; }

dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 8px; }
dl.details dt { color: var(--text-muted); font-weight: 600; }
dl.details dd { margin: 0; }
@media (max-width: 520px) { dl.details { grid-template-columns: 1fr; gap: 0; } dl.details dd { margin-bottom: 10px; } }

.link-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.link-groups ul { list-style: none; margin: 0; padding: 0; }
.link-groups li { margin: 6px 0; }

/* Pages that do not exist yet */
a.placeholder { color: var(--text-muted); text-decoration: underline dashed; cursor: default; }
a.placeholder::after { content: "coming soon"; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; display: inline-block; }

.site-footer a { color: var(--text-muted); }

.brand { color: var(--text); text-decoration: none; }