/*
 * MIA — WildApricot Global CSS Override
 * Paste this into: Website > Site Settings > CSS Customization
 *
 * This file handles fonts, brand colours, and light navigation/footer overrides.
 * Each page's deeper styling lives inside its own Custom HTML gadget's <style> block.
 */

/* ── Fonts ──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
  --mia-red:        #d8242e;
  --mia-red-hover:  #b01f28;
  --mia-black:      #000000;
  --mia-dark:       #111827;  /* gray-900 */
  --mia-dark-2:     #1f2937;  /* gray-800 */
  --mia-dark-3:     #374151;  /* gray-700 */
  --mia-gray-text:  #d1d5db;  /* gray-300 */
  --mia-font-base:  'Inter', sans-serif;
  --mia-font-head:  'Poppins', sans-serif;
}

/* ── Base typography ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--mia-font-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mia-font-head);
}

/* ── WildApricot nav override — works with most default themes ───────────────── */
/* Header / nav bar */
#waSiteHeader,
.wa-header,
header.site-header {
  background: #ffffff !important;
  border-bottom: 3px solid var(--mia-red) !important;
}

/* Nav links */
.wa-nav a,
#waNav a,
.site-nav a {
  font-family: var(--mia-font-base) !important;
  font-weight: 500 !important;
  color: #333333 !important;
  text-transform: none !important;
}

.wa-nav a:hover,
#waNav a:hover,
.site-nav a:hover {
  color: var(--mia-red) !important;
}

/* Active nav item */
.wa-nav .active > a,
#waNav .active > a {
  color: var(--mia-red) !important;
}

/* ── Utility classes used across all page gadgets ────────────────────────────── */
.mia-btn-primary {
  display: inline-block;
  background: var(--mia-red);
  color: #fff !important;
  font-family: var(--mia-font-base);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  text-decoration: none !important;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
}
.mia-btn-primary:hover { background: var(--mia-red-hover) !important; }

.mia-btn-outline {
  display: inline-block;
  background: transparent;
  color: #fff !important;
  font-family: var(--mia-font-base);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  border: 2px solid #fff;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
}
.mia-btn-outline:hover {
  background: #fff !important;
  color: var(--mia-red) !important;
}

.mia-btn-outline-red {
  display: inline-block;
  background: transparent;
  color: var(--mia-red) !important;
  font-family: var(--mia-font-base);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  border: 2px solid var(--mia-red);
  text-decoration: none !important;
  transition: all 0.2s;
}
.mia-btn-outline-red:hover {
  background: var(--mia-red) !important;
  color: #fff !important;
}

/* Grid helpers */
.mia-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.mia-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.mia-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .mia-grid-3 { grid-template-columns: 1fr 1fr; }
  .mia-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mia-grid-2, .mia-grid-3, .mia-grid-4 { grid-template-columns: 1fr; }
}

/* Card */
.mia-card {
  background: #1f2937;
  border-radius: 0.5rem;
  overflow: hidden;
}
.mia-card-white {
  background: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Section wrapper */
.mia-section {
  padding: 4rem 1.5rem;
}
.mia-container {
  max-width: 1280px;
  margin: 0 auto;
}
/* Force red on all WildApricot nav hover states */
a:hover, a:focus {
  color: #d8242e !important;
}

.gadget-navigation a:hover,
.gadget-navigation a:focus,
.WaGadgetNavigationMenuHorizontal a:hover,
.WaGadgetNavigationMenuHorizontal li:hover > a,
.WaGadgetNavigationMenuHorizontal li.active > a,
nav a:hover, nav a:focus,
#mainNav a:hover,
.nav-menu a:hover {
  color: #d8242e !important;
  background-color: transparent !important;
}

/* Active page in nav */
.gadget-navigation .selected > a,
.gadget-navigation .active > a,
.WaGadgetNavigationMenuHorizontal .selected > a {
  color: #d8242e !important;
  border-bottom: 2px solid #d8242e !important;
}


/* ============================================================
   MIA — System Pages Override
      Fonts, brand colours & light styling for all WA-generated
         functional pages: registration, login, member directory,
            member profile, portal, invoices.
               ============================================================ */

               /* — Global font for WA system content — */
               body, .fieldName, .fieldValue, .membersList,
               .memberCard, .memberProfileContainer,
               .registrationForm, .loginBox, .paymentForm,
               .invoiceDetails, #waForm, .waForm {
                   font-family: 'Inter', sans-serif !important;
                   }

                   h1, h2, h3, h4, h5, h6 {
                     font-family: 'Poppins', sans-serif !important;
                       color: #111827;
                       }

                       a { color: #d8242e; }
                       a:hover { color: #b01f28; }

                       /* — All WA submit / action buttons — */
                       .buttonStyle,
                       input[type="submit"],
                       button[type="submit"],
                       .registrationButton,
                       .applyButton,
                       .renewButton {
                         background: #d8242e !important;
                           border: none !important;
                             border-radius: 0.375rem !important;
                               color: #fff !important;
                                 font-family: 'Inter', sans-serif !important;
                                   font-weight: 600 !important;
                                     padding: 0.625rem 1.5rem !important;
                                       cursor: pointer !important;
                                         transition: background 0.2s !important;
                                         }
                                         .buttonStyle:hover,
                                         input[type="submit"]:hover,
                                         button[type="submit"]:hover {
                                           background: #b01f28 !important;
                                           }

                                           /* — Form inputs — */
                                           .registrationForm input[type="text"],
                                           .registrationForm input[type="email"],
                                           .registrationForm input[type="tel"],
                                           .registrationForm select,
                                           .registrationForm textarea,
                                           #membershipApplicationForm input,
                                           #membershipApplicationForm select,
                                           #membershipApplicationForm textarea,
                                           .loginBox input {
                                               border: 1px solid #d1d5db !important;
                                                 border-radius: 0.375rem !important;
                                                   padding: 0.5rem 0.75rem !important;
                                                     font-family: 'Inter', sans-serif !important;
                                                     }
                                                     .registrationForm input:focus,
                                                     #membershipApplicationForm input:focus,
                                                     .loginBox input:focus {
                                                         outline: none !important;
                                                           border-color: #d8242e !important;
                                                             box-shadow: 0 0 0 2px rgba(216,36,46,0.15) !important;
                                                             }

                                                             /* — Membership level selection — */
                                                             .membershipLevelsList .membershipLevel,
                                                             .levelOption {
                                                               border: 2px solid #e5e7eb !important;
                                                                 border-radius: 0.5rem !important;
                                                                   padding: 1rem !important;
                                                                     margin-bottom: 0.75rem !important;
                                                                     }
                                                                     .membershipLevelsList .membershipLevel:hover,
                                                                     .levelOption:hover {
                                                                       border-color: #d8242e !important;
                                                                     }
                                                                     .membershipLevelsList .membershipLevel.selected,
                                                                     .levelOption.selected {
                                                                       border-color: #d8242e !important;
                                                                         background: rgba(216,36,46,0.04) !important;
                                                                         }

                                                                         /* — Member Directory cards — */
                                                                         .membersList .memberCard {
                                                                             border-radius: 0.5rem !important;
                                                                               border: 1px solid #e5e7eb !important;
                                                                                 transition: transform 0.2s, box-shadow 0.2s;
                                                                                 }
                                                                                 .membersList .memberCard:hover {
                                                                                     transform: translateY(-2px);
                                                                                       box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
                                                                                       }
                                                                                       .membersList .memberName a {
                                                                                           color: #111827 !important;
                                                                                             font-weight: 700;
                                                                                               font-family: 'Poppins', sans-serif !important;
                                                                                               }
                                                                                               .membersList .memberName a:hover { color: #d8242e !important; }

                                                                                               /* — Member Profile page — */
                                                                                               .memberProfileContainer .memberName,
                                                                                               .memberProfilePage .memberName {
                                                                                                   font-family: 'Poppins', sans-serif !important;
                                                                                                     font-size: 1.5rem !important;
                                                                                                       font-weight: 800 !important;
                                                                                                         color: #111827 !important;
                                                                                                         }
                                                                                                         .memberProfileContainer .fieldLabel,
                                                                                                         .memberProfilePage .fieldLabel {
                                                                                                             font-weight: 600;
                                                                                                               color: #6b7280;
                                                                                                                 font-size: 0.8rem;
                                                                                                                   text-transform: uppercase;
                                                                                                                     letter-spacing: 0.05em;
                                                                                                                     }

                                                                                                                     /* — Invoice / payment totals — */
                                                                                                                     .invoiceTotal, .paymentTotal {
                                                                                                                         color: #d8242e !important;
                                                                                                                           font-weight: 700 !important;
                                                                                                                           }

                                                                                                                           /* — Validation errors — */
                                                                                                                           .errorMessage, .validationError, .fieldError {
                                                                                                                               color: #d8242e !important;
                                                                                                                               }

                                                                                                                               /* — Checkbox & radio accent — */
                                                                                                                               input[type="checkbox"],
                                                                                                                               input[type="radio"] {
                                                                                                                                   accent-color: #d8242e;

/* ─── Membership level labels (WA hardcoded English) ──────── */
span.levelRenewal {
  visibility: hidden !important;
  position: relative !important;
  display: block !important;
}
span.levelRenewal::before {
  content: 'Per\00EDodo de suscripci\00F3n: 1 a\00F1o';
  visibility: visible;
  position: absolute;
  left: 0;
  font-size: inherit;
  color: inherit;
}

span.levelRecurring {
  visibility: hidden !important;
  position: relative !important;
  display: block !important;
}
span.levelRecurring::before {
  content: 'Renovaci\00F3n manual';
  visibility: visible;
  position: absolute;
  left: 0;
  font-size: inherit;
  color: inherit;
}

strong.mandatoryLabel { font-size: 0; }
strong.mandatoryLabel::before {
  content: 'Nivel de membres\00EDa';
  font-size: 1rem;
  font-weight: 600;
}
                                                                                                                                   }
                                                                                                                               }
                                                                                                                           }
                                                                                                                     }
                                                                                                         }
                                                                                               }
                                                                                       }
                                                                                 }
                                                                         }
                                                     }
                                           }
               }