/*
 * Shared styling for forms.mindmusingsglobal.com
 * Brand Design System
 */

/* Fonts are declared in /shared/fonts.css, which every page links beside this
   file — self-hosted, and fetched alongside it rather than after it. */

:root {
  /* Brand Colors */
  --color-primary: #F1249A;
  /*
   * The brand pink, darkened enough to be read rather than just seen.
   * --color-primary is 3.59:1 on --bg-subtle and 3.85:1 on white, both under
   * the 4.5:1 that normal-size text needs — fine for a border or a 4px rule,
   * not for words someone has to read. This one is 5.48:1 and 5.87:1.
   */
  --color-primary-strong: #C2185B;
  --color-secondary: #1A59AB;
  /* --color-secondary darkened, for a hover that deepens the button it is on
     instead of changing its colour. Its pink twin above already did this job;
     the blue had no equivalent until the nav buttons started using hue to mean
     something. White on it is 10.77:1. */
  --color-secondary-strong: #123D75;
  --color-accent: #FFE8EE;
  --color-headline: #0D0D12;
  --color-body: #36394A;
  --color-dark-neutral: #060317;
  --color-light-neutral: #CFE3FE;

  /* Typography */
  --font-primary: 'Bright Retro', 'Fredoka', 'Segoe UI', sans-serif;
  --font-secondary: 'Poppins', 'Segoe UI', sans-serif;
  --font-accent: 'Inter', 'Segoe UI', sans-serif;

  /* Legacy/Fallback */
  --fg: var(--color-body);
  --fg-muted: #5b5b5b;
  --border: #d4d4d4;
  --border-focus: var(--color-primary);
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --success-fg: #14532d;
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --error-fg: #7f1d1d;
  --error-bg: #fee2e2;
  --error-border: #fca5a5;
  /* Saturated enough to read as an outline on a white control. */
  --error-strong: #e11d48;
  --radius: 8px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1.5rem;
  font-family: var(--font-secondary);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.form-container {
  max-width: 34rem;
  margin: 0 auto;
}

.form-container.multi-page-form {
  max-width: 42rem;
}

h1 {
  margin: 0 0 0.25rem;
  font-family: var(--font-accent);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--color-headline);
}

h2 {
  font-family: var(--font-primary);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.027em;
  color: var(--color-headline);
}

h3 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.027em;
  color: var(--color-headline);
}

h4 {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.027em;
  color: var(--color-headline);
}

h5 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-headline);
}

h6 {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.027em;
  text-transform: uppercase;
  color: var(--color-headline);
}

.form-subtitle {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-body);
}

.form-intro {
  margin: 0 0 1.5rem;
  color: var(--color-body);
}

.form-intro p {
  margin-bottom: 1rem;
}

.form-intro p:last-child {
  margin-bottom: 0;
}

.crusader-text {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-body);
}

.crusader-highlight,
.text-highlight {
  background-color: #FFB6D9;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: var(--color-primary-strong);
  font-weight: 600;
}

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

.field {
  margin-bottom: 1.125rem;
}

.field label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-headline);
}

.field .hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* A hint under a legend sits above the choices, not below a control. */
.field-group .hint {
  display: block;
  margin: -0.125rem 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* "Other: ___" write-in, revealed by the choice directly above it. */
.write-in {
  margin: 0.375rem 0 0.5rem 1.75rem;
}

.write-in[hidden] {
  display: none;
}

.write-in label {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* The same write-in revealed by an "Other" *option* rather than a radio. There
   is no bullet to indent under, and the select's own .field margin sits between
   the two — so it is pulled back up, close enough to read as part of the answer
   above rather than as the next question down. */
.write-in--under-select {
  margin: -0.75rem 0 1.125rem;
}

/* Country dial code beside a phone number — built by phone-country.js. The
   select is invisible and laid over a short "NG +234" label, so it is still the
   select that is clicked, focused and read out. */
.phone-input {
  display: flex;
  gap: 0.5rem;
}

.phone-input > input {
  flex: 1;
  min-width: 0;
}

.phone-country {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: nowrap;
}

.phone-country::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--fg-muted);
  border-bottom: 2px solid var(--fg-muted);
  transform: translateY(-25%) rotate(45deg);
}

.phone-country select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.phone-country:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* Thank-you panel with something to pass on — shared/share.js builds the
   buttons. Revealed with the success message via data-success-detail. */
.share-panel {
  margin-top: 1.5rem;
  text-align: center;
}

.share-panel[hidden] {
  display: none;
}

.share-panel h2 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
}

.share-panel p {
  margin: 0 0 1rem;
  color: var(--fg-muted);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Links and buttons alike, so every option looks like the same kind of thing. */
.share-buttons .share-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font: 500 0.9375rem var(--font-secondary);
  color: var(--color-primary-strong);
  background: var(--bg);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.share-buttons .share-button:hover,
.share-buttons .share-button--primary {
  color: #fff;
  background: var(--color-primary);
}

.share-buttons .share-button--primary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.share-buttons .share-button[hidden] {
  display: none;
}

.share-link {
  max-width: 20rem;
}

/* The ILLUMINATION "I will be attending" card — shared/attending-card.js draws
   it. Revealed with the success message via data-success-detail. */
.attending-card {
  margin-top: 1.5rem;
  text-align: center;
}

.attending-card h2 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
}

.attending-card > p {
  margin: 0 0 1rem;
  color: var(--fg-muted);
}

.attending-card-stage {
  position: relative;
  max-width: 26rem;
  margin: 0 auto 1.25rem;
}

.attending-card-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(13, 13, 18, 0.12);
  /* Shown for the moment before the template has loaded. */
  background: var(--color-accent);
}

/* Over the photo window alone, in the template's own proportions (the window
   is 156,602 543x495 of 1200x1486), so the rest of the card scrolls the page
   as usual on a phone and only the photo itself is grabbed. */
.attending-card-handle {
  position: absolute;
  left: 13%;
  top: 40.51%;
  width: 45.25%;
  height: 33.31%;
  border-radius: 9.2% / 10.1%;
  cursor: grab;
  touch-action: none;
}

.attending-card-handle.is-dragging {
  cursor: grabbing;
}

.attending-card-handle:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.attending-card-fields {
  max-width: 26rem;
  margin: 0 auto 0.5rem;
  text-align: left;
}

.attending-card-fields input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}

/* Between the card's own buttons and the per-network ones (share.js), which
   send the link and the message rather than the picture. */
.attending-card > .attending-card-link-note {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.875rem;
}

/* Where to follow us, under the share buttons: passing the event on is one
   thing, hearing about the next one is another. */
.social-follow {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}

.social-follow h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: block;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

.social-links a:hover {
  opacity: 0.8;
}

.social-links a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.social-links img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

/* A consent row is a .field only so it can own its own error message; it does
   not need a field's spacing. */
.consent-item {
  margin-bottom: 0.25rem;
}

/* Standing note inside a form — closing terms, what happens next, etc. */
.form-note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-accent);
  border-radius: var(--radius);
}

/* A .form-note that waits for the thank-you instead of sitting in the form.
   Revealed by form-handler.js on success — see data-success-detail. */
.form-success-detail {
  margin-top: 0.75rem;
}

.form-success-detail[hidden] {
  display: none;
}

.textarea-wrapper {
  position: relative;
}

/*
 * Counters sit in the same corner and read the same way whether they are
 * counting characters (enforced by the browser's own `maxlength`) or words
 * (enforced by validate() in form-handler.js). `.word-count` had no rule at all
 * and was inheriting body text into the corner of the textarea.
 */
.char-count,
.word-count {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  pointer-events: none;
  background: var(--bg);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/*
 * Over a word limit. Nothing is truncated any more — going over is shown here
 * and blocked at the button — so this has to be visible enough to be the reason
 * someone edits, rather than a detail they only meet when submitting fails.
 */
.word-count .over-limit {
  color: var(--error-strong);
  font-weight: 600;
}

.file-input-group {
  padding: 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-input-option {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.file-input-option input[type="file"],
.file-input-option input[type="url"] {
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.file-input-option input[type="file"]:focus-visible,
.file-input-option input[type="url"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.file-divider {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

/*
 * Our own dropdown arrow, in place of the browser's.
 *
 * The native one sits inside the right padding and no property moves it, so
 * it ended up almost against the border (worst on macOS). Drawn here instead,
 * 1rem in, in the same grey as the phone picker's chevron, with room kept for
 * it so a long option never runs underneath.
 *
 * The :not()s leave list boxes alone, which have no arrow. They also lift this
 * above the `background:` shorthands that set a select's colour elsewhere — the
 * error state below — which would otherwise reset the image and leave a dropdown
 * with no arrow at all.
 *
 * The admin dashboard does not load this file and draws its own; nothing here
 * reaches /admin/. See the note at the top of admin/index.html's <style>.
 */
select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b5b5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* --- Validation feedback ---------------------------------------------------
 * Deliberately placed after the control and :focus-visible rules above: these
 * selectors tie with `input[type="tel"]` and friends on specificity, so order
 * is what decides them.
 */

.field-error {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--error-fg);
}

.has-error > input,
.has-error .phone-input > input,
.has-error > select,
.has-error > textarea,
.has-error .textarea-wrapper textarea {
  border-color: var(--error-strong);
  background: #fff8f8;
}

/* Keep the ring red too, so focusing the field doesn't paint over the state. */
.has-error > input:focus-visible,
.has-error > select:focus-visible,
.has-error > textarea:focus-visible,
.has-error .textarea-wrapper textarea:focus-visible {
  outline-color: var(--error-strong);
  border-color: var(--error-strong);
}

/* The legend is the only heading a choice group has, so it carries the state. */
.field-group.has-error > legend {
  color: var(--error-fg);
}

/* Form sections (multi-part forms like volunteer intake) */
.form-section {
  border: 0;
  padding: 1.5rem 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--border);
}

.form-section:first-of-type {
  padding-top: 0;
}

.form-section:last-of-type {
  border-bottom: 0;
  margin-bottom: 1.5rem;
}

.form-section legend {
  padding: 0 0 1rem 0;
  margin: 0 0 1.125rem;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-headline);
  border-bottom: 2px solid var(--color-primary);
}

/* Checkbox / radio groups (e.g. volunteer availability, poll options) */
.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.125rem;
}

.field-group legend {
  padding: 0;
  margin-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-headline);
}

/* flex-start (plus the nudge on the input) keeps the box beside the *first*
   line when a choice label wraps, e.g. the consent statements. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  color: var(--color-body);
}

.choice input {
  margin: 0.3125rem 0 0;
  width: auto;
  accent-color: var(--color-primary);
}

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

/* A paged form's nav buttons are excluded throughout: they carry their own
   complete style in multi-page-form.css, which sets every property this block
   does. Listing `button[type="submit"]` here as well as `button` adds nothing
   except specificity — (0,1,1) against `.btn-nav`'s (0,1,0) — and that was
   enough to make Submit the one nav button ignoring the nav padding and font
   size. It rendered visibly chunkier than Next and Previous beside it, and sat
   immune to the mobile overrides that size the row to fit. */
button:not(.btn-nav),
button[type="submit"]:not(.btn-nav) {
  padding: 0.6875rem 1.5rem;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[type="submit"]:not(.btn-nav):hover:not(:disabled),
button:not(.btn-nav):hover:not(:disabled) {
  background: var(--color-secondary);
}

button[type="submit"]:not(.btn-nav):disabled,
button:not(.btn-nav):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Status messages ------------------------------------------------------- */

.form-status {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form-status[hidden] {
  display: none;
}

.form-status--success {
  color: var(--success-fg);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.form-status--error {
  color: var(--error-fg);
  background: var(--error-bg);
  border-color: var(--error-border);
}

/*
 * A form that has stopped accepting responses, shown in place of the form
 * itself rather than after a submission is refused.
 *
 * Not styled as an error: nothing has gone wrong and the visitor has done
 * nothing to correct. It reads as a notice, which is why it takes the brand
 * pink rule rather than the red one.
 */
.form-closed {
  margin: 2rem 0;
  padding: 1.75rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-accent);
}

.form-closed h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--color-headline);
}

.form-closed p {
  margin: 0;
  color: var(--color-body);
}

/*
 * The form's banner, moved out of the form it belonged to and left above the
 * notice. Styled here rather than leaning on `.page-hero` in
 * multi-page-form.css, because the single-page forms never load that file and a
 * closed page must not depend on which one of the two the form happened to be.
 *
 * The image keeps no bottom margin of its own — `.form-closed`'s top margin is
 * the gap, and one rule owning that spacing is one rule to change.
 */
.form-closed-hero .page-hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0;
  background: var(--bg-subtle);
}

/* A heading that is nothing but the banner: it survives for its alt text, which
   is the page's title, and must not add space around an image that carries its
   own. */
.form-closed-hero h1,
.form-closed-hero h2 {
  margin: 0;
  line-height: 0;
}

/*
 * The gap while the status is being fetched. Deliberately plain and quiet: on
 * the common path — a form that is open — it is on screen for a couple of
 * hundred milliseconds and should read as the page still loading, not as
 * something happening.
 */
.form-checking {
  margin: 2rem 0;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/*
 * --- Honeypot ---------------------------------------------------------------
 * Positioned off-screen rather than display:none / visibility:hidden on purpose.
 * Better bots skip fields hidden the obvious way; off-screen fields still get
 * filled in, which is exactly the signal we want.
 */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Index page ------------------------------------------------------------ */

.form-index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-index li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-secondary);
}

.form-index a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.form-index a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}