/*
 * keystone-corporation/assets/css/wildapricot.css
 * WildApricot Widget & Embed CSS Overrides
 * Makes ALL WildApricot-rendered elements match Keystone brand.
 * Visitor never sees WildApricot's default styling.
 */

/* ── VARIABLES ──────────────────────────────────── */
:root {
  --wa-navy:    #002D5A;
  --wa-crimson: #87003C;
  --wa-offwhite:#F5F2ED;
  --wa-white:   #FFFFFF;
  --wa-body:    #1C2B3A;
  --wa-muted:   #4A5568;
  --wa-border:  #DDD8D0;
  --wa-serif:   'Libre Baskerville', Georgia, serif;
  --wa-sans:    'Source Sans 3', Inter, sans-serif;
}

/* ── GLOBAL WIDGET CONTAINER ─────────────────────── */
.WaWidget,
.wa-widget,
[id^="wa-widget"],
[class*="wa-"],
[class*="WaWidget"],
iframe[src*="wildapricot"] {
  font-family: var(--wa-sans) !important;
  color: var(--wa-body) !important;
}

/* ── BUTTONS ─────────────────────────────────────── */
.WaWidget button,
.WaWidget input[type="submit"],
.WaWidget input[type="button"],
.WaWidget .btn,
.WaWidget .button,
[class*="wa-"] button,
[class*="wa-"] input[type="submit"],
.wa-btn,
.AffiliateMember .RegisterButton,
.EventRegistrationForm .btn-register,
.MembershipForm .btn-submit {
  font-family: var(--wa-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  background: var(--wa-crimson) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.WaWidget button:hover,
.WaWidget input[type="submit"]:hover,
[class*="wa-"] button:hover {
  background: #6a002e !important;
}

/* Secondary / outline buttons */
.WaWidget .btn-secondary,
.WaWidget .btn-outline,
[class*="wa-"] .btn-cancel {
  background: transparent !important;
  color: var(--wa-navy) !important;
  border: 2px solid var(--wa-navy) !important;
}
.WaWidget .btn-secondary:hover,
[class*="wa-"] .btn-cancel:hover {
  background: var(--wa-navy) !important;
  color: #fff !important;
}

/* ── FORM INPUTS ─────────────────────────────────── */
.WaWidget input[type="text"],
.WaWidget input[type="email"],
.WaWidget input[type="tel"],
.WaWidget input[type="number"],
.WaWidget input[type="password"],
.WaWidget select,
.WaWidget textarea,
[class*="wa-"] input,
[class*="wa-"] select,
[class*="wa-"] textarea {
  font-family: var(--wa-sans) !important;
  font-size: 15px !important;
  color: var(--wa-body) !important;
  background: var(--wa-white) !important;
  border: 1.5px solid var(--wa-border) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  min-height: 44px !important;
  outline: none !important;
  transition: border-color .2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.WaWidget input:focus,
.WaWidget select:focus,
.WaWidget textarea:focus,
[class*="wa-"] input:focus,
[class*="wa-"] select:focus,
[class*="wa-"] textarea:focus {
  border-color: var(--wa-navy) !important;
  box-shadow: none !important;
}

/* ── FORM LABELS ─────────────────────────────────── */
.WaWidget label,
[class*="wa-"] label {
  font-family: var(--wa-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--wa-body) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* ── HEADINGS ────────────────────────────────────── */
.WaWidget h1, .WaWidget h2, .WaWidget h3,
.WaWidget h4, .WaWidget h5,
[class*="wa-"] h1, [class*="wa-"] h2, [class*="wa-"] h3 {
  font-family: var(--wa-serif) !important;
  color: var(--wa-navy) !important;
  font-weight: 700 !important;
}

/* ── EVENTS CALENDAR ─────────────────────────────── */
.WaWidget .EventList,
.EventCalendar,
[class*="event-list"],
[class*="EventList"] {
  background: var(--wa-white) !important;
}

.WaWidget .EventList-item,
.EventCalendar-event,
[class*="EventItem"] {
  border-bottom: 1px solid var(--wa-border) !important;
  padding: 20px 0 !important;
  background: transparent !important;
}

.WaWidget .EventList-title,
[class*="EventTitle"],
.event-name {
  font-family: var(--wa-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wa-navy) !important;
}
.WaWidget .EventList-title a,
[class*="EventTitle"] a {
  color: var(--wa-navy) !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.WaWidget .EventList-title a:hover,
[class*="EventTitle"] a:hover {
  color: var(--wa-crimson) !important;
}

.WaWidget .EventList-date,
[class*="EventDate"],
.event-date {
  font-family: var(--wa-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wa-crimson) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.WaWidget .EventList-location,
[class*="EventLocation"],
.event-location {
  font-size: 13px !important;
  color: var(--wa-muted) !important;
}

/* Event registration page */
.EventRegistrationForm {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.EventRegistrationForm .section-header,
.EventRegistrationForm h2 {
  font-family: var(--wa-serif) !important;
  color: var(--wa-navy) !important;
  font-size: 24px !important;
  border-bottom: 2px solid var(--wa-crimson) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

/* ── MEMBERSHIP FORM ─────────────────────────────── */
.MembershipForm,
[class*="MembershipApplication"],
[class*="MemberApplication"] {
  max-width: 720px !important;
  margin: 0 auto !important;
  background: var(--wa-white) !important;
  padding: 40px !important;
}

.MembershipForm .section-header {
  font-family: var(--wa-serif) !important;
  font-size: 22px !important;
  color: var(--wa-navy) !important;
  border-left: 3px solid var(--wa-crimson) !important;
  padding-left: 16px !important;
  margin-bottom: 24px !important;
}

/* Membership level selector */
[class*="MembershipLevel"],
.membership-level-option {
  border: 2px solid var(--wa-border) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
}
[class*="MembershipLevel"]:hover,
.membership-level-option:hover {
  border-color: var(--wa-navy) !important;
}
[class*="MembershipLevel"].selected,
.membership-level-option.selected {
  border-color: var(--wa-crimson) !important;
  background: rgba(135,0,60,.04) !important;
}

/* ── MEMBER LOGIN / PORTAL ───────────────────────── */
[class*="LoginForm"],
.member-login-form,
.WaWidget .login-form {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: var(--wa-white) !important;
  padding: 40px !important;
}

/* ── PAYMENT / CHECKOUT ──────────────────────────── */
[class*="PaymentForm"],
[class*="Checkout"],
.payment-form {
  max-width: 640px !important;
  margin: 0 auto !important;
}

.order-summary {
  background: var(--wa-offwhite) !important;
  border-left: 3px solid var(--wa-crimson) !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
}
.order-summary-total {
  font-family: var(--wa-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--wa-navy) !important;
}

/* ── SUCCESS / ERROR MESSAGES ────────────────────── */
.WaWidget .success-message,
.WaWidget .alert-success,
[class*="wa-"] .success {
  background: rgba(0,45,90,.06) !important;
  border-left: 3px solid var(--wa-navy) !important;
  color: var(--wa-navy) !important;
  padding: 16px 20px !important;
  font-family: var(--wa-sans) !important;
  font-weight: 600 !important;
}

.WaWidget .error-message,
.WaWidget .alert-danger,
[class*="wa-"] .error {
  background: rgba(135,0,60,.06) !important;
  border-left: 3px solid var(--wa-crimson) !important;
  color: var(--wa-crimson) !important;
  padding: 16px 20px !important;
  font-family: var(--wa-sans) !important;
  font-weight: 600 !important;
}

/* ── TABLES ──────────────────────────────────────── */
.WaWidget table,
[class*="wa-"] table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--wa-sans) !important;
}
.WaWidget th,
[class*="wa-"] th {
  background: var(--wa-navy) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  text-align: left !important;
}
.WaWidget td,
[class*="wa-"] td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--wa-border) !important;
  font-size: 14px !important;
  color: var(--wa-body) !important;
}
.WaWidget tr:hover td,
[class*="wa-"] tr:hover td {
  background: rgba(0,45,90,.03) !important;
}

/* ── PAGINATION ──────────────────────────────────── */
.WaWidget .pagination,
[class*="wa-"] .pagination {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 32px !important;
}
.WaWidget .pagination a,
[class*="wa-"] .pagination a {
  font-family: var(--wa-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wa-navy) !important;
  border: 1.5px solid var(--wa-border) !important;
  padding: 8px 14px !important;
  transition: all .2s !important;
}
.WaWidget .pagination a:hover,
.WaWidget .pagination .active,
[class*="wa-"] .pagination a:hover {
  background: var(--wa-navy) !important;
  color: #fff !important;
  border-color: var(--wa-navy) !important;
}

/* ── INTEGRATION ZONE CONTAINER ──────────────────── */
.keystone-integration-zone {
  border: 2px dashed rgba(0,45,90,.15);
  overflow: hidden;
}
.keystone-integration-header {
  background: var(--wa-navy);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.keystone-integration-title {
  font-family: var(--wa-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.keystone-integration-body {
  padding: 0;
  min-height: 300px;
  background: var(--wa-white);
}

/* ── MOBILE RESPONSIVE ───────────────────────────── */
@media (max-width: 767px) {
  .WaWidget input[type="text"],
  .WaWidget input[type="email"],
  .WaWidget select,
  .WaWidget textarea,
  [class*="wa-"] input,
  [class*="wa-"] select,
  [class*="wa-"] textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .MembershipForm,
  [class*="MembershipApplication"] {
    padding: 24px 20px !important;
  }

  .WaWidget button,
  .WaWidget input[type="submit"],
  [class*="wa-"] button {
    width: 100% !important;
    padding: 15px !important;
  }
}