/* =============================================================
   ALPHA LAMBDA OMEGA — Complete CSS Customization
   Paste this entire file into:
   Admin → Website → Colors and Styles → CSS Customization
   Replace everything currently in that box with this.
   Last updated: October 2026
============================================================= */


/* ─────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS custom properties)
───────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --green:        #6bcf6e;
  --green-dark:   #1a7a22;
  --green-mid:    #3a9e42;
  --pink:         #ef939e;
  --pink-dark:    #c9606d;
  --cream:        #FAF8F3;
  --muted:        #5F5E5A;
  --text:         #444441;

  /* Legacy aliases used by older snippets */
  --alo-green:      #6bcf6e;
  --alo-green-dark: #1a7a22;
  --alo-pink:       #ef939e;
  --alo-pink-dark:  #c9606d;
  --alo-cream:      #FAF8F3;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
}


/* ─────────────────────────────────────────────────────────
   2. BASE RESETS
───────────────────────────────────────────────────────── */
body {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}

/* Headings — let component styles set color, not the WA theme */
h1:not(.promo), h2, h3, h4, h5,
.gadgetStyleNone h1:not(.promo),
.gadgetStyleNone h2,
.gadgetStyleNone h3,
.gadgetStyleNone h4,
.gadgetStyleNone h5 {
  color: inherit !important;
}

/* Nav bar background */
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
  background: transparent !important;
}


/* ─────────────────────────────────────────────────────────
   3. BUTTONS
───────────────────────────────────────────────────────── */
.btn,
.alo-btn {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
}

/* Green button */
.btn-green,
.alo-btn-green {
  background-color: var(--green);
  color: var(--green-dark);
  border: none;
}
.btn-green:hover,
.alo-btn-green:hover {
  background-color: var(--green-dark);
  color: #fff;
}

/* Pink button */
.btn-pink,
.alo-btn-pink {
  background-color: var(--pink);
  color: var(--green-dark);
  border: none;
}
.btn-pink:hover,
.alo-btn-pink:hover {
  background-color: var(--pink-dark);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────
   4. CARDS (feature cards, event cards)
───────────────────────────────────────────────────────── */
.alo-card,
.card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.alo-card:hover,
.card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}
.alo-card-img,
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.alo-card-body,
.card-body {
  padding: 20px 22px 26px;
}
.alo-card-body h3,
.card-body h3 {
  color: var(--green-dark);
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 500;
}
.alo-card-body p,
.card-body p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
  font-size: 14px;
}

/* Event cards */
.alo-event-card,
.event-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.alo-event-card:hover,
.event-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}
.alo-event-img,
.event-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.alo-date-badge,
.date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green-dark);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.alo-date-badge.pink,
.date-badge.pink {
  background: var(--pink);
}
.alo-date-month,
.date-month {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
.alo-date-day,
.date-day {
  display: block;
  font-size: 22px;
  font-weight: 700;
}

/* Section helpers */
.alo-section-cream,
.section-cream {
  background-color: var(--cream);
}
.alo-about-text h2,
.about-text h2 {
  color: var(--green-dark);
  margin-bottom: 14px;
  font-family: var(--font-display);
}
.alo-about-text p,
.about-text p {
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 16px;
}

/* Pink title variant */
.pink-title { color: var(--pink-dark) !important; }


/* ─────────────────────────────────────────────────────────
   5. HERO BANNER
───────────────────────────────────────────────────────── */
.alo-hero {
  text-align: center;
  padding: 90px 20px;
  color: #fff;
}
.alo-hero .alo-tagline {
  font-style: italic;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.alo-hero h1 {
  font-size: 42px;
  margin: 8px 0 24px;
  color: #fff;
}


/* ─────────────────────────────────────────────────────────
   6. NATIVE WA EVENTS CALENDAR GADGET RESKIN
   Overrides Wild Apricot's dark default theme everywhere
   the Events Calendar gadget appears on the site.
───────────────────────────────────────────────────────── */

/* Wrapper: replace dark background */
.WaGadgetEventCalendar {
  background:       var(--cream) !important;
  background-color: var(--cream) !important;
  color:            var(--text)  !important;
  border:           none         !important;
  padding-bottom:   48px         !important;
}

/* Nuke dark backgrounds on all children */
.WaGadgetEventCalendar div,
.WaGadgetEventCalendar span,
.WaGadgetEventCalendar table,
.WaGadgetEventCalendar tbody,
.WaGadgetEventCalendar thead,
.WaGadgetEventCalendar tr,
.WaGadgetEventCalendar td,
.WaGadgetEventCalendar th {
  background-color: transparent !important;
  color:            var(--text)  !important;
  border-color:     #e8e4dc      !important;
}

/* Hide RSS feed icon and gadget's own title */
.WaGadgetEventCalendar .rssLink,
.WaGadgetEventCalendar .rssFeedLink,
.WaGadgetEventCalendar a[href*="rss"],
.WaGadgetEventCalendar img[src*="rss"],
.WaGadgetEventCalendar .feedIcon,
.WaGadgetEventCalendar .gadgetTitle,
.WaGadgetEventCalendar h4.gadgetTitleH4,
.WaGadgetEventCalendar .gadgetStyleTitle {
  display: none !important;
}

/* ── "MONTH: OCTOBER 2026" heading ── */
.WaGadgetEventCalendar .calTitle,
.WaGadgetEventCalendar .calMonthTitle,
.WaGadgetEventCalendar .monthTitle,
.WaGadgetEventCalendar .currentPeriod,
.WaGadgetEventCalendar h2.calTitle,
.WaGadgetEventCalendar .titleRow td,
.WaGadgetEventCalendar .calHeader {
  background:       var(--cream)        !important;
  background-color: var(--cream)        !important;
  color:            var(--green-dark)   !important;
  font-family:      var(--font-display) !important;
  font-size:        22px                !important;
  font-weight:      500                 !important;
  text-transform:   none                !important;
  padding:          16px 0 12px        !important;
  border-bottom:    2px solid var(--green) !important;
  letter-spacing:   .2px               !important;
}

/* ── Nav buttons: WEEK / MONTH / YEAR / PREV / TODAY / NEXT ── */
.WaGadgetEventCalendar .navigationRow td,
.WaGadgetEventCalendar .navRow td,
.WaGadgetEventCalendar .calViewSwitcher td,
.WaGadgetEventCalendar td.calNavButton,
.WaGadgetEventCalendar .calNavTable td {
  background:       var(--cream) !important;
  background-color: var(--cream) !important;
  border:           none         !important;
  padding:          10px 4px     !important;
}
.WaGadgetEventCalendar .navigationRow a,
.WaGadgetEventCalendar .navRow a,
.WaGadgetEventCalendar .calViewSwitcher a,
.WaGadgetEventCalendar td.calNavButton a,
.WaGadgetEventCalendar .calNavTable td a {
  color:            var(--green-dark) !important;
  background:       #fff              !important;
  background-color: #fff              !important;
  border:           1.5px solid #d8d4cc !important;
  border-radius:    6px               !important;
  padding:          6px 14px          !important;
  font-size:        11px              !important;
  font-weight:      600               !important;
  text-transform:   uppercase         !important;
  letter-spacing:   .5px             !important;
  text-decoration:  none              !important;
  display:          inline-block      !important;
  transition:       all .15s          !important;
}
.WaGadgetEventCalendar .navigationRow a:hover,
.WaGadgetEventCalendar td.calNavButton a:hover,
.WaGadgetEventCalendar .calNavTable td a:hover {
  background:       var(--green) !important;
  background-color: var(--green) !important;
  border-color:     var(--green) !important;
  color:            #fff         !important;
}
/* Selected/active nav button */
.WaGadgetEventCalendar .navigationRow td.selected a,
.WaGadgetEventCalendar .navigationRow td.active a,
.WaGadgetEventCalendar td.calNavButtonSelected a,
.WaGadgetEventCalendar .calNavTable td.selected a {
  background:       var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  border-color:     var(--green-dark) !important;
  color:            #fff              !important;
}

/* ── "Switch to List View" link ── */
.WaGadgetEventCalendar .switchViewLink,
.WaGadgetEventCalendar a.switchView,
.WaGadgetEventCalendar .listViewLink {
  color:        var(--green-dark) !important;
  font-size:    12px              !important;
  font-weight:  600               !important;
  text-decoration: none           !important;
  border:       1.5px solid var(--green) !important;
  padding:      5px 14px         !important;
  border-radius: 999px           !important;
  background:   transparent      !important;
  display:      inline-block     !important;
}
.WaGadgetEventCalendar .switchViewLink:hover {
  background:       var(--green) !important;
  background-color: var(--green) !important;
  color:            #fff         !important;
}

/* ── Day-of-week header row (Sun … Sat) ── */
.WaGadgetEventCalendar .dayNamesRow td,
.WaGadgetEventCalendar th.dayName,
.WaGadgetEventCalendar .calHeaderRow td,
.WaGadgetEventCalendar thead td,
.WaGadgetEventCalendar thead th {
  background:       var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  color:            #fff              !important;
  font-size:        11px              !important;
  font-weight:      700               !important;
  text-transform:   uppercase         !important;
  letter-spacing:   .6px             !important;
  padding:          10px 4px          !important;
  text-align:       center            !important;
  border:           none              !important;
}

/* ── Day cells ── */
.WaGadgetEventCalendar .calDay,
.WaGadgetEventCalendar td.calDay,
.WaGadgetEventCalendar .monthCell,
.WaGadgetEventCalendar tbody td {
  background:       #fff      !important;
  background-color: #fff      !important;
  color:            var(--text) !important;
  border:           1px solid #e8e4dc !important;
  vertical-align:   top        !important;
  min-height:       80px       !important;
  padding:          6px 8px    !important;
}

/* Day number */
.WaGadgetEventCalendar .dayNum,
.WaGadgetEventCalendar .calDayNum,
.WaGadgetEventCalendar .dateNum {
  font-size:   13px            !important;
  font-weight: 600             !important;
  color:       var(--muted)    !important;
  display:     block           !important;
}

/* Greyed-out overflow days (prev/next month) */
.WaGadgetEventCalendar .calDayOtherMonth,
.WaGadgetEventCalendar td.otherMonth {
  background:       var(--cream) !important;
  background-color: var(--cream) !important;
}
.WaGadgetEventCalendar .calDayOtherMonth .dayNum,
.WaGadgetEventCalendar td.otherMonth .dayNum {
  color: #bbb !important;
}

/* Today highlight */
.WaGadgetEventCalendar .calToday,
.WaGadgetEventCalendar td.today {
  background:       rgba(107,207,110,.10) !important;
  background-color: rgba(107,207,110,.10) !important;
  border-color:     var(--green)          !important;
}
.WaGadgetEventCalendar .calToday .dayNum,
.WaGadgetEventCalendar td.today .dayNum {
  color:       var(--green-dark) !important;
  font-weight: 700               !important;
}

/* ── Event entries inside day cells ── */
.WaGadgetEventCalendar .calDay a,
.WaGadgetEventCalendar .calEvent a,
.WaGadgetEventCalendar .eventAnchor,
.WaGadgetEventCalendar tbody td a {
  font-size:     11px              !important;
  font-weight:   500               !important;
  color:         #fff              !important;
  text-decoration: none            !important;
  background:       var(--green-mid) !important;
  background-color: var(--green-mid) !important;
  border-radius: 4px               !important;
  padding:       2px 5px           !important;
  display:       block             !important;
  margin-bottom: 2px               !important;
  line-height:   1.4               !important;
  overflow:      hidden            !important;
  white-space:   nowrap            !important;
  text-overflow: ellipsis          !important;
}
.WaGadgetEventCalendar .calDay a:hover,
.WaGadgetEventCalendar tbody td a:hover {
  background:       var(--green-dark) !important;
  background-color: var(--green-dark) !important;
}

/* Featured / RSVP events — pink pill */
.WaGadgetEventCalendar .featuredEvent a,
.WaGadgetEventCalendar .calEventFeatured a {
  background:       var(--pink) !important;
  background-color: var(--pink) !important;
}
.WaGadgetEventCalendar .featuredEvent a:hover {
  background:       var(--pink-dark) !important;
  background-color: var(--pink-dark) !important;
}

/* ── List view (when soror switches to it) ── */
.WaGadgetEventCalendar .calListView,
.WaGadgetEventCalendar .listView {
  background:       var(--cream) !important;
  background-color: var(--cream) !important;
}
.WaGadgetEventCalendar .calListView a,
.WaGadgetEventCalendar .listView a {
  font-size:     14px              !important;
  font-weight:   600               !important;
  color:         var(--green-dark) !important;
  text-decoration: none            !important;
  background:    transparent       !important;
  padding:       0                 !important;
  border-radius: 0                 !important;
  white-space:   normal            !important;
  display:       inline            !important;
}
.WaGadgetEventCalendar .calListView a:hover,
.WaGadgetEventCalendar .listView a:hover {
  text-decoration: underline !important;
}


/* ─────────────────────────────────────────────────────────
   7. NATIVE WA UPCOMING EVENTS GADGET RESKIN
   Styles the list-style "Upcoming Events" gadget used on
   the Members-Only dashboard and other pages.
───────────────────────────────────────────────────────── */
.WaGadgetUpcomingEvents {
  background:       var(--cream) !important;
  background-color: var(--cream) !important;
  border:           none         !important;
  padding:          0            !important;
  font-family:      var(--font-body) !important;
}
.WaGadgetUpcomingEvents * {
  background-color: transparent !important;
  font-family:      var(--font-body) !important;
}

/* Hide its own title heading */
.WaGadgetUpcomingEvents h2,
.WaGadgetUpcomingEvents h3,
.WaGadgetUpcomingEvents h4,
.WaGadgetUpcomingEvents .gadgetTitle,
.WaGadgetUpcomingEvents .gadgetStyleTitle,
.WaGadgetUpcomingEvents h4.gadgetTitleH4,
.WaGadgetUpcomingEvents .upcomingEventsTitle {
  display: none !important;
}

/* Event list */
.WaGadgetUpcomingEvents ul {
  list-style: none !important;
  padding:    0    !important;
  margin:     0    !important;
}
.WaGadgetUpcomingEvents ul li {
  display:       flex             !important;
  gap:           14px             !important;
  align-items:   flex-start       !important;
  padding:       14px 4px         !important;
  border-bottom: 1px solid #e8e4dc !important;
  border-left:   none             !important;
  border-right:  none             !important;
  border-top:    none             !important;
  background:    var(--cream)     !important;
}
.WaGadgetUpcomingEvents ul li:last-child {
  border-bottom: none !important;
}
.WaGadgetUpcomingEvents ul li:hover {
  background: #f0ede6 !important;
}

/* Date pill */
.WaGadgetUpcomingEvents ul li .date {
  background:       var(--green-dark) !important;
  background-color: var(--green-dark) !important;
  color:            #fff              !important;
  border-radius:    8px               !important;
  padding:          7px 11px          !important;
  text-align:       center            !important;
  flex-shrink:      0                 !important;
  min-width:        48px              !important;
  display:          flex              !important;
  flex-direction:   column            !important;
  align-items:      center            !important;
}
.WaGadgetUpcomingEvents ul li .date span {
  color:      #fff      !important;
  display:    block     !important;
  background: transparent !important;
}
.WaGadgetUpcomingEvents ul li .date .month {
  font-size:    10px     !important;
  font-weight:  700      !important;
  letter-spacing: .5px  !important;
  opacity:      .85      !important;
  text-transform: uppercase !important;
}
.WaGadgetUpcomingEvents ul li .date .day {
  font-size:   22px !important;
  font-weight: 700  !important;
  line-height: 1.1  !important;
}

/* Event title link */
.WaGadgetUpcomingEvents ul li .title a,
.WaGadgetUpcomingEvents ul li > a {
  font-size:     14px              !important;
  font-weight:   600               !important;
  color:         var(--green-dark) !important;
  text-decoration: none            !important;
  display:       block             !important;
  margin-bottom: 3px               !important;
  line-height:   1.4               !important;
}
.WaGadgetUpcomingEvents ul li .title a:hover {
  text-decoration: underline !important;
}

/* Location */
.WaGadgetUpcomingEvents ul li .location,
.WaGadgetUpcomingEvents ul li .location span {
  font-size: 12px              !important;
  color:     var(--green-mid)  !important;
}

/* Date/time meta */
.WaGadgetUpcomingEvents ul li .eventTime,
.WaGadgetUpcomingEvents ul li .startDate {
  font-size:   12px          !important;
  color:       var(--muted)  !important;
  font-weight: 500           !important;
}

/* "View more" link */
.WaGadgetUpcomingEvents .moreLink,
.WaGadgetUpcomingEvents .moreLinkContainer,
.WaGadgetUpcomingEvents .viewAll {
  text-align:  center             !important;
  padding:     16px 0 20px        !important;
  border-top:  1px solid #e8e4dc  !important;
  background:  var(--cream)       !important;
}
.WaGadgetUpcomingEvents .moreLink a,
.WaGadgetUpcomingEvents .moreLinkContainer a,
.WaGadgetUpcomingEvents .viewAll a {
  font-size:     13px              !important;
  font-weight:   600               !important;
  color:         var(--green-dark) !important;
  text-decoration: none            !important;
  border:        1.5px solid var(--green) !important;
  padding:       8px 24px          !important;
  border-radius: 999px             !important;
  display:       inline-block      !important;
  background:    transparent       !important;
}
.WaGadgetUpcomingEvents .moreLink a:hover,
.WaGadgetUpcomingEvents .moreLinkContainer a:hover {
  background:       var(--green) !important;
  background-color: var(--green) !important;
  color:            #fff         !important;
}


/* ─────────────────────────────────────────────────────────
   8. RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .WaGadgetEventCalendar tbody td { min-height: 52px !important; padding: 4px !important; }
  .WaGadgetEventCalendar tbody td a { font-size: 10px !important; }
}