/* =========================================================
   DANCE SCIENCE 2026
   SIMPLE / ACCESSIBLE FORM SYSTEM

   Used by:
   - Registration
   - Volunteers

   Main goals:
   - lower visual complexity
   - obvious form fields
   - larger readable labels
   - clear selected states
   - comfortable click / tap targets
   - less vertical whitespace
========================================================= */


/* =========================================================
   01 — APPLICATION SECTION
========================================================= */

.volunteer-application {
  padding:
    clamp(70px, 7vw, 105px)
    0
    clamp(80px, 8vw, 120px);

  background:
    var(--ivory);

  border-top:
    1px solid var(--warm-gray);
}


.volunteer-application__grid {
  display: grid;

  grid-template-columns:
    minmax(260px, .55fr)
    minmax(0, 1.45fr);

  gap:
    clamp(45px, 6vw, 85px);

  align-items: start;
}


/* =========================================================
   02 — LEFT INTRO
========================================================= */

.volunteer-application__intro {
  position: sticky;
  top: 110px;
}


.volunteer-application__intro h2 {
  margin:
    10px
    0
    22px;

  font-size:
    clamp(3.1rem, 4.5vw, 5rem);

  line-height: .96;
}


.volunteer-application__intro > p:not(.eyebrow) {
  max-width: 410px;

  margin:
    0
    0
    14px;

  color:
    var(--muted);

  font-size: .94rem;
  line-height: 1.7;
}


/* =========================================================
   03 — LEFT INFORMATION

   Kept clean and compact.
========================================================= */

.volunteer-application__info {
  margin-top: 34px;
}


.volunteer-application__info > div {
  padding:
    14px
    0;

  border-bottom:
    1px solid var(--warm-gray);
}


.volunteer-application__info > div:first-child {
  border-top:
    1px solid var(--warm-gray);
}


.volunteer-application__info span {
  display: block;

  margin-bottom: 4px;

  color:
    var(--terracotta);

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .09em;
}


.volunteer-application__info strong {
  font-family:
    var(--font-display);

  font-size: 1.08rem;
  font-weight: 400;

  line-height: 1.4;
}


/* =========================================================
   04 — FORM CONTAINER

   Important:
   no decorative top line.
========================================================= */

.volunteer-form-wrap {
  min-width: 0;
}


.volunteer-form {
  width: 100%;

  max-width: 820px;

  border: 0;
}


/* =========================================================
   05 — FORM SECTIONS

   The old design separated every section with
   large padding and horizontal rules.

   Here the form reads as one continuous workflow.
========================================================= */

.volunteer-form__section {
  margin:
    0
    0
    38px;

  padding: 0;

  border: 0;
}


.volunteer-form__section + .volunteer-form__section {
  margin-top: 42px;
}


/*
   Remove manual <br><br> spacing from existing HTML.
*/

.volunteer-form__section > br,
.volunteer-form__privacy > br {
  display: none;
}


/* =========================================================
   06 — SECTION TITLES
========================================================= */

.volunteer-form__section legend {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    0
    0
    20px;

  padding: 0;
}


.volunteer-form__section legend > span {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

  color:
    var(--ivory);

  background:
    var(--terracotta);

  border-radius: 50%;

  font-family:
    var(--font-display);

  font-size: 1rem;
  line-height: 1;
}


.volunteer-form__section legend > strong {
  color:
    var(--charcoal);

  font-family:
    var(--font-display);

  font-size:
    clamp(1.45rem, 2vw, 1.9rem);

  font-weight: 400;

  line-height: 1.15;
}


/* =========================================================
   07 — HELP TEXT
========================================================= */

.volunteer-form__help {
  max-width: 680px;

  margin:
    -6px
    0
    18px;

  color:
    var(--muted);

  font-size: .88rem;
  line-height: 1.65;
}


.volunteer-form__help a {
  color:
    var(--charcoal);

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   08 — STANDARD FIELD GRID
========================================================= */

.volunteer-form__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    20px;
}


/* =========================================================
   09 — STANDARD FORM FIELD
========================================================= */

.form-field {
  position: relative;

  min-width: 0;
}


/* Labels must be immediately obvious */

.form-field label {
  display: block;

  margin-bottom: 7px;

  color:
    var(--charcoal);

  font-size: .84rem;
  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 0;
}


.form-field label span {
  color:
    var(--terracotta);
}


/* =========================================================
   10 — TEXT INPUTS

   Full bordered inputs instead of underline-only fields.
   Much clearer for inexperienced users.
========================================================= */

.form-field input {
  width: 100%;
  height: 52px;

  padding:
    0
    15px;

  color:
    var(--charcoal);

  background:
    #fff;

  border:
    1px solid #cfcac3;

  border-radius:
    4px;

  outline: 0;

  font:
    inherit;

  font-size: .96rem;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.form-field input:hover {
  border-color:
    #aaa49c;
}


.form-field input:focus {
  border-color:
    var(--terracotta);

  box-shadow:
    0 0 0 3px rgba(184, 92, 61, .12);

  background:
    #fff;
}


/* Browser autofill */

.form-field input:-webkit-autofill {
  -webkit-box-shadow:
    0 0 0 1000px #fff inset;
}


/* Invalid */

.form-field.is-invalid input {
  border-color:
    var(--terracotta);

  box-shadow:
    0 0 0 3px rgba(184, 92, 61, .09);
}


/* =========================================================
   11 — ERRORS
========================================================= */

.form-field__error,
.form-group-error {
  display: none;

  margin-top: 6px;

  color:
    #9d3f28;

  font-size: .76rem;
  font-weight: 500;

  line-height: 1.45;
}


.form-field.is-invalid
.form-field__error,
.form-group-error.is-visible {
  display: block;
}


/* =========================================================
   12 — CHOICE / RADIO / CHECKBOX BASE
========================================================= */

.choice {
  position: relative;

  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 48px;

  padding:
    10px
    12px;

  cursor: pointer;

  color:
    var(--charcoal);

  font-size: .88rem;
  line-height: 1.4;

  transition:
    background 160ms ease,
    border-color 160ms ease;
}


/* =========================================================
   13 — CUSTOM RADIO / CHECKBOX
========================================================= */

.choice input {
  appearance: none;

  width: 20px;
  height: 20px;

  flex:
    0
    0
    20px;

  margin: 0;

  border:
    2px solid #aaa49c;

  border-radius: 50%;

  background:
    #fff;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.choice input:checked {
  background:
    var(--terracotta);

  border-color:
    var(--terracotta);

  box-shadow:
    inset 0 0 0 4px #fff;
}


.choice input:focus-visible {
  outline:
    3px solid rgba(184, 92, 61, .18);

  outline-offset: 2px;
}


/* =========================================================
   14 — LARGE CHOICES / REGISTRATION CATEGORY

   These behave like simple selectable buttons.
========================================================= */

.volunteer-role-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  border: 0;
}


.choice--large {
  min-height: 60px;

  padding:
    15px
    16px;

  background:
    #fff;

  border:
    1px solid #d7d2cb;

  border-radius:
    5px;
}


.choice--large:hover {
  border-color:
    #b9b2aa;

  background:
    rgba(255,255,255,.8);
}


.choice--large:has(input:checked) {
  color:
    var(--charcoal);

  background:
    rgba(184, 92, 61, .055);

  border-color:
    var(--terracotta);
}


/* =========================================================
   15 — AVAILABILITY

   Volunteer form only.
========================================================= */

.availability-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  border: 0;
}


.availability-day {
  padding:
    20px;

  background:
    #fff;

  border:
    1px solid #d7d2cb;

  border-radius:
    5px;
}


.availability-day__heading {
  display: flex;

  justify-content:
    space-between;

  align-items:
    baseline;

  gap: 12px;

  margin-bottom: 12px;
}


.availability-day__heading span {
  color:
    var(--terracotta);

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .07em;
}


.availability-day__heading strong {
  font-family:
    var(--font-display);

  font-size: 1.35rem;
  font-weight: 400;
}


/* Choices inside availability cards */

.availability-day .choice {
  padding:
    8px
    0;
}


/* =========================================================
   16 — REGISTRATION FEE SUMMARY

   Registration form only.

   Remove the "table / horizontal-rule" feeling and
   turn it into one simple information panel.
========================================================= */

.registration-fee-summary {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0;

  margin:
    18px
    0
    16px;

  padding:
    18px
    20px;

  background:
    #fff;

  border:
    1px solid #d7d2cb;

  border-radius:
    5px;
}


.registration-fee-summary > div {
  padding: 0;

  border: 0;
}


.registration-fee-summary > div:first-child {
  border: 0;
}


.registration-fee-summary > div + div {
  padding-left: 22px;

  border-left:
    1px solid var(--warm-gray);
}


.registration-fee-summary span {
  margin-bottom: 5px;

  font-size: .67rem;
}


.registration-fee-summary strong {
  font-size: 1.35rem;
}


/* Price should be very obvious */

#registration-fee-amount {
  color:
    var(--terracotta);

  font-size: 1.8rem;
}


/* =========================================================
   17 — PRIVACY / CONSENT

   Kept visually separate but not intimidating.
========================================================= */

.volunteer-form__privacy {
  margin-top: 38px;

  padding:
    20px;

  background:
    rgba(236, 230, 221, .45);

  border:
    1px solid var(--warm-gray);

  border-radius:
    5px;
}


.privacy-choice {
  display: flex;

  align-items:
    flex-start;

  gap: 12px;

  max-width: 760px;

  cursor: pointer;
}


.privacy-choice input {
  appearance: none;

  width: 21px;
  height: 21px;

  flex:
    0
    0
    21px;

  margin-top: 1px;

  background:
    #fff;

  border:
    2px solid #aaa49c;

  border-radius:
    3px;

  cursor: pointer;
}


.privacy-choice input:checked {
  position: relative;

  background:
    var(--terracotta);

  border-color:
    var(--terracotta);

  box-shadow:
    inset 0 0 0 4px #fff;
}


.privacy-choice input:focus-visible {
  outline:
    3px solid rgba(184, 92, 61, .18);

  outline-offset: 2px;
}


.privacy-choice > span {
  color:
    #4a4743;

  font-size: .82rem;
  line-height: 1.55;
}


.privacy-choice a {
  color:
    var(--charcoal);

  text-decoration: underline;
  text-underline-offset: 3px;
}


.privacy-choice strong {
  color:
    var(--terracotta);
}


/*
   Privacy explanatory text does not need huge spacing.
*/

.volunteer-form__privacy
.volunteer-form__help {
  margin:
    12px
    0
    0;

  padding-left:
    33px;

  font-size: .75rem;
  line-height: 1.55;
}


/* =========================================================
   18 — HONEYPOT
========================================================= */

.volunteer-form__honeypot {
  position:
    absolute !important;

  left:
    -9999px !important;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}


/* =========================================================
   19 — SUBMIT AREA
========================================================= */

.volunteer-form__submit {
  display: flex;

  align-items:
    center;

  gap: 20px;

  margin-top: 24px;

  padding-top: 0;
}


/*
   Main conversion action.

   Larger and more obvious than before.
*/

.volunteer-form__submit .btn {
  min-width: 250px;
  min-height: 54px;

  justify-content:
    space-between;

  padding:
    0
    22px;

  font-size: .76rem;
  font-weight: 700;

  letter-spacing: .06em;
}


.volunteer-form__submit .btn:hover {
  transform:
    translateY(-1px);
}


.volunteer-form__submit .btn:disabled {
  opacity: .55;

  cursor: wait;

  pointer-events: none;
}


.volunteer-form__submit-note {
  max-width: 310px;

  margin: 0;

  color:
    var(--muted);

  font-size: .75rem;
  line-height: 1.5;
}


/* =========================================================
   20 — FORM MESSAGES
========================================================= */

.form-message {
  display: flex;

  align-items:
    flex-start;

  gap: 14px;

  margin-top: 22px;

  padding:
    18px;

  background:
    #fff;

  border:
    1px solid var(--warm-gray);

  border-radius:
    5px;
}


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


.form-message > span {
  display: grid;

  place-items: center;

  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

  color:
    var(--ivory);

  background:
    var(--terracotta);

  border-radius:
    50%;
}


.form-message strong {
  display: block;

  margin-bottom: 4px;

  color:
    var(--charcoal);

  font-family:
    var(--font-display);

  font-size: 1.18rem;
  font-weight: 400;
}


.form-message p {
  margin: 0;

  color:
    var(--muted);

  font-size: .8rem;
  line-height: 1.55;
}


/* =========================================================
   21 — SUCCESS
========================================================= */

.form-message--success {
  border-color:
    rgba(62, 111, 76, .35);

  background:
    rgba(62, 111, 76, .045);
}


.form-message--success > span {
  background:
    #3e6f4c;
}


/* =========================================================
   22 — ERROR
========================================================= */

.form-message--error {
  border-color:
    rgba(157, 63, 40, .35);

  background:
    rgba(157, 63, 40, .04);
}


/* =========================================================
   23 — TABLET
========================================================= */

@media (max-width: 980px) {

  .volunteer-application__grid {
    grid-template-columns:
      minmax(220px, .45fr)
      minmax(0, 1fr);

    gap: 45px;
  }


  .availability-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   24 — MOBILE
========================================================= */

@media (max-width: 760px) {

  .volunteer-application {
    padding:
      55px
      0
      80px;
  }


  .volunteer-application__grid {
    grid-template-columns:
      1fr;

    gap: 42px;
  }


  .volunteer-application__intro {
    position: static;
  }


  .volunteer-application__intro h2 {
    font-size:
      clamp(2.8rem, 13vw, 4rem);
  }


  /*
     On mobile the information panel should remain short.
  */

  .volunteer-application__info {
    margin-top: 26px;
  }


  .volunteer-form__grid {
    grid-template-columns:
      1fr;

    gap: 17px;
  }


  .volunteer-role-grid {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .availability-grid {
    grid-template-columns:
      1fr;
  }


  .volunteer-form__section {
    margin-bottom: 34px;
  }


  .volunteer-form__section
  + .volunteer-form__section {
    margin-top: 36px;
  }


  .volunteer-form__section legend {
    margin-bottom: 18px;
  }


  /*
     Avoid tiny tap targets on mobile.
  */

  .form-field input {
    height: 54px;

    font-size: 16px;
  }


  .choice--large {
    min-height: 58px;
  }


  .registration-fee-summary {
    grid-template-columns:
      1fr;

    gap: 15px;
  }


  .registration-fee-summary > div + div {
    padding:
      15px
      0
      0;

    border-left: 0;

    border-top:
      1px solid var(--warm-gray);
  }


  .volunteer-form__privacy {
    padding:
      18px;
  }


  .volunteer-form__privacy
  .volunteer-form__help {
    padding-left: 0;
  }


  .volunteer-form__submit {
    flex-direction:
      column;

    align-items:
      stretch;

    gap: 12px;
  }


  .volunteer-form__submit .btn {
    width: 100%;

    min-height: 56px;
  }


  .volunteer-form__submit-note {
    max-width: none;

    text-align: center;
  }

}


/* =========================================================
   25 — VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .volunteer-form__section legend > span {
    width: 29px;
    height: 29px;

    flex-basis: 29px;

    font-size: .9rem;
  }


  .volunteer-form__section legend > strong {
    font-size: 1.4rem;
  }


  .availability-day {
    padding: 17px;
  }


  .choice--large {
    padding:
      14px;
  }


  .privacy-choice > span {
    font-size: .8rem;
  }

}


/* =========================================================
   26 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .form-field input,
  .choice,
  .choice input,
  .volunteer-form__submit .btn {
    transition: none;
  }

}