/* ==========================================================================
   BECOME A MEMBER PAGE
   Follows the same inner-page layout & sidebar as membership.css.
   Contains only become-member-specific components (form section).
   ========================================================================== */

/* ==========================================================================
   FORM SECTION
   ========================================================================== */
.mase-become-member-form {
  margin-top: var(--space-6);
  width: 100%;
}

.mase-become-member-form__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
}

.mase-become-member-form__intro {
  margin-bottom: var(--space-8);
  max-width: 680px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--navy-80);
}

.mase-become-member-form__intro p {
  margin: 0;
}

.mase-become-member-form__intro p + p {
  margin-top: var(--space-3);
}

/* ==========================================================================
   FORM WRAPPER — styles the CF7 form to match the site aesthetic
   ========================================================================== */
.mase-become-member-form__wrapper {
  width: 100%;
}

/* --- Labels --- */
.mase-become-member-form__wrapper .wpcf7-form label,
.mase-become-member-form__wrapper label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}

/* --- Text inputs, selects, textareas --- */
.mase-become-member-form__wrapper .wpcf7-form input[type="text"],
.mase-become-member-form__wrapper .wpcf7-form input[type="email"],
.mase-become-member-form__wrapper .wpcf7-form input[type="tel"],
.mase-become-member-form__wrapper .wpcf7-form input[type="url"],
.mase-become-member-form__wrapper .wpcf7-form input[type="number"],
.mase-become-member-form__wrapper .wpcf7-form select,
.mase-become-member-form__wrapper .wpcf7-form textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--navy-08);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.mase-become-member-form__wrapper .wpcf7-form input[type="text"]:focus,
.mase-become-member-form__wrapper .wpcf7-form input[type="email"]:focus,
.mase-become-member-form__wrapper .wpcf7-form input[type="tel"]:focus,
.mase-become-member-form__wrapper .wpcf7-form input[type="url"]:focus,
.mase-become-member-form__wrapper .wpcf7-form input[type="number"]:focus,
.mase-become-member-form__wrapper .wpcf7-form select:focus,
.mase-become-member-form__wrapper .wpcf7-form textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb, 15, 30, 60), 0.08);
}

.mase-become-member-form__wrapper .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* --- Field groups (spacing between fields) --- */
.mase-become-member-form__wrapper .wpcf7-form p {
  margin: 0 0 var(--space-5);
}

.mase-become-member-form__wrapper .wpcf7-form p:last-of-type {
  margin-bottom: 0;
}

/* --- Submit button --- */
.mase-become-member-form__wrapper .wpcf7-form input[type="submit"] {
  display: inline-block;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.mase-become-member-form__wrapper .wpcf7-form input[type="submit"]:hover {
  background: transparent;
  color: var(--navy);
}

.mase-become-member-form__wrapper .wpcf7-form input[type="submit"]:active {
  opacity: 0.8;
}

/* --- Validation errors --- */
.mase-become-member-form__wrapper .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: #c0392b;
}

.mase-become-member-form__wrapper .wpcf7-not-valid {
  border-color: #c0392b !important;
}

/* --- Response output messages --- */
.mase-become-member-form__wrapper .wpcf7-response-output {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
}

/* Success */
.mase-become-member-form__wrapper .wpcf7-mail-sent-ok {
  background: #f0faf4;
  border-color: #2ecc71;
  color: #1a6b3a;
}

/* Error / spam */
.mase-become-member-form__wrapper .wpcf7-mail-sent-ng,
.mase-become-member-form__wrapper .wpcf7-spam-blocked,
.mase-become-member-form__wrapper .wpcf7-validation-errors,
.mase-become-member-form__wrapper .wpcf7-acceptance-missing {
  background: #fef6f5;
  border-color: #e74c3c;
  color: #7b1c14;
}

/* ==========================================================================
   SIDEBAR EVENT WIDGET  (shared with membership.css — included here for
   standalone usage; safe to keep in one file only if both pages share it)
   ========================================================================== */
.mase-about-sidebar-event {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--navy-08);
}

.mase-about-sidebar-event__eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-50);
}

.mase-about-sidebar-event__media { margin-bottom: var(--space-3); }

.mase-about-sidebar-event__image-link { display: block; }

.mase-about-sidebar-event__image {
  display: block;
  width: 94%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  background: var(--light);
  border-radius: var(--radius-md);
}

.mase-about-sidebar-event__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.mase-about-sidebar-event__title a {
  color: inherit;
  transition: opacity var(--transition);
}

.mase-about-sidebar-event__title a:hover { opacity: 0.75; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  .mase-become-member-form { margin-top: var(--space-6); }

  .mase-become-member-form__title {
    font-size: var(--fs-xl);
  }

  .mase-become-member-form__wrapper .wpcf7-form input[type="text"],
  .mase-become-member-form__wrapper .wpcf7-form input[type="email"],
  .mase-become-member-form__wrapper .wpcf7-form input[type="tel"],
  .mase-become-member-form__wrapper .wpcf7-form input[type="url"],
  .mase-become-member-form__wrapper .wpcf7-form input[type="number"],
  .mase-become-member-form__wrapper .wpcf7-form select,
  .mase-become-member-form__wrapper .wpcf7-form textarea {
    font-size: var(--fs-base);
  }

  .mase-become-member-form__wrapper .wpcf7-form input[type="submit"] {
    width: 100%;
    text-align: center;
  }
}