/* =========================================
   Linda Mwananchi — Volunteer Page
   ========================================= */

:root {
  --volunteer-primary: #315df4;
  --volunteer-primary-dark: #244bd3;
  --volunteer-primary-soft: #eef2ff;
  --volunteer-background: #f4f7fc;
  --volunteer-surface: #ffffff;
  --volunteer-ink: #101828;
  --volunteer-text: #5f6b7c;
  --volunteer-border: #cad4e3;
  --volunteer-error: #b42318;
}

/* =========================================
   Page layout
   ========================================= */

.volunteer-page,
.volunteer-page * {
  box-sizing: border-box;
}

.volunteer-page {
  min-height: calc(100vh - var(--nav-h, 96px));
  min-height: calc(100dvh - var(--nav-h, 96px));

  padding: clamp(0.75rem, 2vw, 1.5rem);

  color: var(--volunteer-ink);
  background: var(--volunteer-background);
  font-family: Geneva, Tahoma, sans-serif;
}

.volunteer-layout {
  display: grid;
  width: min(100%, 1450px);
  margin: 0 auto;

  grid-template-columns:
    minmax(360px, 1.1fr)
    minmax(440px, 0.9fr);

  align-items: start;
  gap: 1rem;
}

/* =========================================
   Campaign artwork
   ========================================= */

.volunteer-artwork {
  width: 100%;
  min-width: 0;
  align-self: start;
  overflow: hidden;

  background: var(--volunteer-surface);
  border: 1px solid #7d8796;
}

.volunteer-artwork img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;

  object-fit: contain;
  object-position: center top;
}

/* =========================================
   Form column
   ========================================= */

.volunteer-content {
  min-width: 0;

  padding: clamp(1rem, 2.5vw, 2rem);

  background: var(--volunteer-surface);
  border: 1px solid #7d8796;
}

/* =========================================
   Page heading
   ========================================= */

.volunteer-header {
  margin-bottom: 1rem;
}

.volunteer-eyebrow {
  display: block;
  margin-bottom: 0.35rem;

  color: var(--volunteer-primary);

  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.volunteer-header h1 {
  margin: 0;

  color: #05070c;

  font-size: clamp(2.3rem, 4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
}

.volunteer-header p {
  max-width: 650px;
  margin: 0.65rem auto 0;

  color: var(--volunteer-text);

  font-size: 1rem;
  line-height: 1.65;
  text-align: center;
}

/* =========================================
   Main form
   ========================================= */

.volunteer-form {
  display: grid;
  gap: 0;
}

.volunteer-section {
  min-width: 0;

  margin: 0;
  padding: 1.1rem 0;

  border: 0;
  border-top: 1px solid var(--volunteer-border);
}

.volunteer-section:first-of-type {
  padding: 1rem;
  margin-bottom: 1.5rem;

  border: 2px solid #000000;
}

.volunteer-section legend {
  width: auto;
  padding: 0.1rem;

  color: #ffffff;
  background-color: #000000;

  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.section-description {
  margin: 0.35rem 0 0.8rem;

  color: var(--volunteer-text);

  font-size: 0.76rem;
  line-height: 1.45;
}

/* =========================================
   Volunteer capacity checkboxes
   ========================================= */

.capacity-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.capacity-option {
  display: grid;
  min-width: 0;
  min-height: 135px;

  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;

  padding: 0.85rem;

  background: var(--volunteer-surface);
  border: 1px solid var(--volunteer-border);

  cursor: pointer;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.capacity-option input[type="checkbox"] {
  position: static;

  display: block;
  width: 18px;
  height: 18px;
  margin: 0.1rem 0 0;

  flex-shrink: 0;

  opacity: 1;
  appearance: auto;
  accent-color: var(--volunteer-primary);

  cursor: pointer;
}

.capacity-option__content {
  display: block;
  min-width: 0;
}

.capacity-option__content strong {
  display: block;
  margin-bottom: 0.45rem;

  color: var(--volunteer-ink);

  font-size: 0.82rem;
  line-height: 1.3;
}

.capacity-option__content small {
  display: block;

  color: var(--volunteer-text);

  font-size: 0.7rem;
  line-height: 1.5;
}

.capacity-option:hover,
.capacity-option:focus-within {
  border-color: var(--volunteer-primary);
  box-shadow: 0 0 0 3px rgba(49, 93, 244, 0.1);
}

.capacity-option:has(input[type="checkbox"]:checked) {
  background: var(--volunteer-primary-soft);
  border-color: var(--volunteer-primary);
}

/* =========================================
   Personal and location fields
   ========================================= */

.personal-grid,
.location-grid {
  display: grid;
  gap: 0.85rem;
}

.personal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-field {
  min-width: 0;
  margin-bottom: 1.35rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.2rem;

  color: #000000;

  font-size: 0.82rem;
  font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;

  width: 100%;
  min-width: 0;

  padding: 0.75rem;

  color: var(--volunteer-ink);
  background: #fbfcfe;
  border: 1px solid #000000;
  border-radius: 0;
  outline: none;

  font: inherit;
  font-size: 0.8rem;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-field input,
.form-field select {
  min-height: 46px;
}

.form-field textarea {
  min-height: 125px;

  line-height: 1.5;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: #ffffff;
  border-color: var(--volunteer-primary);
  box-shadow: 0 0 0 3px rgba(49, 93, 244, 0.12);
}

/* =========================================
   Consent
   ========================================= */

.volunteer-consent {
  display: grid;

  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;

  margin-top: 1rem;
}

.volunteer-consent input[type="checkbox"] {
  position: static;

  display: block;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;

  opacity: 1;
  appearance: auto;
  accent-color: var(--volunteer-primary);

  cursor: pointer;
}

.volunteer-consent label {
  color: var(--volunteer-text);

  font-size: 0.82rem;
  line-height: 1.55;

  cursor: pointer;
}

/* =========================================
   Validation and errors
   ========================================= */

.field-error {
  margin: 0.4rem 0 0;

  color: var(--volunteer-error);

  font-size: 0.73rem;
  font-weight: 750;
}

.volunteer-alert {
  margin-bottom: 1rem;
  padding: 0.85rem;

  color: var(--volunteer-error);
  background: #fff1f0;
  border: 1px solid #f7bbb6;
}

.volunteer-alert p {
  margin: 0;

  font-size: 0.8rem;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--volunteer-error);
}

/* =========================================
   Django messages
   ========================================= */

.volunteer-messages {
  display: grid;
  gap: 0.75rem;

  margin-bottom: 1rem;
}

.volunteer-message {
  padding: 0.9rem 1rem;

  border: 1px solid transparent;

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.55;
}

.volunteer-message--success {
  color: #146c43;
  background: #eaf8f1;
  border-color: #9ed9bb;
}

.volunteer-message--error {
  color: #9f1c14;
  background: #fff1f0;
  border-color: #f2b6b1;
}

.volunteer-message--warning {
  color: #725600;
  background: #fff8e5;
  border-color: #ecd58d;
}

.volunteer-message--info {
  color: #244bd3;
  background: #eef2ff;
  border-color: #bdcbff;
}

/* =========================================
   Submit button
   ========================================= */

.volunteer-submit {
  display: inline-flex;

  width: 100%;
  min-height: 52px;

  align-items: center;
  justify-content: center;

  margin-top: 1rem;
  padding: 0.75rem 1rem;

  color: #ffffff;
  background: var(--volunteer-primary);
  border: 2px solid var(--volunteer-primary);

  cursor: pointer;

  font: inherit;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.volunteer-submit:hover,
.volunteer-submit:focus-visible {
  color: #ffffff;
  background: var(--volunteer-primary-dark);
  border-color: var(--volunteer-primary-dark);
}

.volunteer-submit:focus-visible {
  outline: 3px solid rgba(49, 93, 244, 0.25);
  outline-offset: 3px;
}

.volunteer-disclaimer {
  margin: 0.65rem 0 0;

  color: var(--volunteer-text);

  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}

/* =========================================
   Thank-you page
   ========================================= */

.volunteer-page--thank-you {
  display: flex;

  align-items: center;
  justify-content: center;

  padding: 3rem 1rem;
}

.volunteer-thank-you {
  width: min(100%, 680px);

  padding: clamp(1.5rem, 5vw, 3.5rem);

  background: var(--volunteer-surface);
  border: 1px solid var(--volunteer-border);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.1);

  text-align: center;
}

.volunteer-thank-you h1 {
  margin: 0.8rem 0 1rem;

  color: var(--volunteer-ink);

  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
}

.volunteer-thank-you p {
  margin: 0;

  color: var(--volunteer-text);

  line-height: 1.7;
}

.volunteer-thank-you .volunteer-submit {
  width: fit-content;
  margin-top: 1.5rem;
}

/* =========================================
   Tablet layout
   ========================================= */

@media (max-width: 1000px) {
  .volunteer-layout {
    width: min(100%, 760px);
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Mobile layout
   ========================================= */

@media (max-width: 650px) {
  .volunteer-page {
    padding: 0.6rem;
  }

  .volunteer-content {
    padding: 1rem;
  }

  .volunteer-header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .capacity-grid,
  .personal-grid,
  .location-grid {
    grid-template-columns: 1fr;
  }

  .capacity-option {
    min-height: 0;
  }

  .volunteer-section:first-of-type {
    padding: 0.85rem;
  }

  .volunteer-submit {
    min-height: 48px;
  }
}

/* =========================================
   Very small screens
   ========================================= */

@media (max-width: 380px) {
  .volunteer-page {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
  }

  .volunteer-content {
    padding: 0.8rem;
  }

  .capacity-option {
    padding: 0.75rem;
  }

  .volunteer-header h1 {
    font-size: 1.9rem;
  }
}