/* ==========================================================================
   CUSTOM CSS — Rebranded Theme
   Primary:  #1270B5 (blue)
   Accent:   #DB515D (coral/red)
   Paste this into Site > Design > Custom CSS (or Common Tasks > Edit gadgets
   > Site CSS, depending on your WA plan).
   ========================================================================== */

/* --- 1. Import fonts ------------------------------------------------------
   Lora = warm, humanist serif for headings (approachable but credible)
   Inter = clean, highly readable sans for body text
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* --- 2. Color & spacing variables ----------------------------------------*/
:root {
  --color-primary: #1270B5;
  --color-primary-dark: #0D5182;
  --color-primary-light: #2395E9;
  --color-accent: #DB515D;
  --color-accent-dark: #C22835;
  /* Lighter tint of the accent, for use as TEXT on top of --color-primary /
     --color-primary-dark backgrounds (footer links, mobile nav "selected"
     state). The old sage accent was pale enough to read directly on purple;
     this coral accent is too saturated for that, so this tint keeps the
     brand-accent feel while staying legible/AA-contrast on a blue background. */
  --color-accent-tint: #FBEAEC;
  --color-bg: #F7FAFC;          /* very soft blue-white */
  --color-bg-accent: #FEF9F9;   /* very soft coral-white for alternating sections */
  --color-text: #25262B;
  --color-text-muted: #6B6D75;
  --radius: 14px;
  --shadow-soft: 0 4px 16px rgba(18, 112, 181, 0.08);
  --shadow-hover: 0 8px 24px rgba(18, 112, 181, 0.14);
}

/* --- 3. Global typography & base ------------------------------------------*/
body, .WaToolbarContainer, .wa-page-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--color-text) !important;
  line-height: 1.65 !important;
  background-color: var(--color-bg) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wa-module-title, .gadgetTitle {
  font-family: 'Lora', Georgia, serif !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.3 !important;
}

h1 { font-size: 2.4em !important; margin-bottom: 0.5em !important; }
h2 { font-size: 1.8em !important; margin-top: 1.4em !important; margin-bottom: 0.5em !important; }
h3 { font-size: 1.35em !important; }

p {
  color: var(--color-text) !important;
  font-size: 1.05em;
}

a {
  color: var(--color-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-accent-dark) !important;
}

/* --- 4. Page container / max-width ----------------------------------------*/
.wa-page-content, .wa-content, #content {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- 5. Header / nav -------------------------------------------------------*/
.wa-header, #header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E7F1F8;
  box-shadow: 0 2px 10px rgba(18, 112, 181, 0.05);
}

.wa-menu, .wa-nav, .topMenu {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

.wa-menu a, .topMenu a {
  color: var(--color-text) !important;
  padding: 10px 16px !important;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wa-menu a:hover, .topMenu a:hover {
  background-color: var(--color-bg-accent) !important;
  color: var(--color-primary) !important;
}

.wa-menu a.selected, .topMenu a.active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* --- 6. Buttons -------------------------------------------------------------
   Primary = solid blue. Secondary/accent = coral outline, used sparingly
   for softer calls-to-action (e.g. "Learn more", "Read stories").
   -------------------------------------------------------------------------- */
.wa-btn, .gadgetButton, input[type="submit"], button,
a.wa-btn-primary {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wa-btn:hover, .gadgetButton:hover, input[type="submit"]:hover, button:hover,
a.wa-btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* Secondary/accent button variant — add class "btn-accent" via the HTML
   gadget editor when you want a coral-colored call-to-action */
.btn-accent {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}
.btn-accent:hover {
  background-color: var(--color-accent-dark) !important;
  color: #FFFFFF !important;
}

/* --- 7. Cards (events, member directory, content blocks) ------------------*/
.wa-event-card, .EventCard, .wa-module, .gadgetContainer,
.directoryListing, .wa-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E7F1F8 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
  padding: 20px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wa-event-card:hover, .EventCard:hover, .wa-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* --- 8. Alternating section backgrounds (apply class "section-accent"
   to specific content blocks/snippets where you want the soft coral tint) -- */
.section-accent {
  background-color: var(--color-bg-accent) !important;
  border-radius: var(--radius);
  padding: 48px 32px !important;
}

/* --- 9. Hero section (build via HTML gadget, then style with this class) --*/
.hero-section {
  background: linear-gradient(135deg, #1270B5 0%, #2395E9 100%);
  color: #FFFFFF !important;
  border-radius: var(--radius);
  padding: 64px 40px !important;
  text-align: center;
  margin-bottom: 40px;
}
.hero-section h1, .hero-section p { color: #FFFFFF !important; }
.hero-section .btn-accent {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* --- 10. Footer -------------------------------------------------------------*/
.wa-footer, #footer {
  background-color: var(--color-primary) !important;
  color: #F1F6FB !important;
  padding: 40px 24px !important;
  margin-top: 60px;
}
.wa-footer a, #footer a {
  color: var(--color-accent-tint) !important;
}
.wa-footer a:hover, #footer a:hover {
  color: #FFFFFF !important;
}

/* --- 11. Forms (donation, membership, contact) -----------------------------*/
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  border: 1px solid #D0E2F0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(18, 112, 181, 0.12) !important;
}

/* --- 12. Small accent touches (coral used sparingly, as you suggested) -----*/
blockquote {
  border-left: 4px solid var(--color-accent) !important;
  background-color: var(--color-bg-accent);
  padding: 16px 20px !important;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

hr {
  border: none;
  border-top: 2px solid var(--color-accent);
  width: 60px;
  margin: 24px 0;
}

/* --- 13. Mobile responsiveness check ---------------------------------------*/
@media (max-width: 768px) {
  h1 { font-size: 1.8em !important; }
  h2 { font-size: 1.4em !important; }
  .hero-section { padding: 40px 20px !important; }
  .wa-page-content, .wa-content, #content { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   NAV MENU FIX v2 — targets actual structure (WaGadgetMenuHorizontal /
   HorizontalMenuStyle002) confirmed via dev tools inspection
   Replace the previous nav-fix CSS with this version.
   ========================================================================== */

/* The header placeholder itself has an inline style background-color:#3F88E8.
   Inline styles beat normal CSS specificity, so we need !important here,
   targeting the exact id/class combo seen in the inspector. */
#id_Header1.WaPlaceHolder,
.WaPlaceHolderHeader1 {
  background-color: #FFFFFF !important;
}

/* Menu widget background + bar */
.WaGadgetMenuHorizontal,
.WaGadgetMenuHorizontal .menuBackground,
.WaGadgetMenuHorizontal .menuInner {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E7F1F8 !important;
  border-bottom: 1px solid #E7F1F8 !important;
}

/* Top-level menu list */
.WaGadgetMenuHorizontal .firstLevel {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
}

.WaGadgetMenuHorizontal .firstLevel > li {
  list-style: none !important;
  /* Center each link's box vertically within the nav row regardless of its
     own content height, so a colored "selected" pill (below) can be made
     shorter than the row without drifting to the top of it */
  display: flex !important;
  align-items: center !important;
}

.WaGadgetMenuHorizontal .firstLevel > li .item {
  background-color: transparent !important;
}

/* The actual links */
.WaGadgetMenuHorizontal .firstLevel > li .item a {
  color: var(--color-primary) !important;
  background-color: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95em !important;
  letter-spacing: 0.02em;
  padding: 16px 20px !important;
  display: inline-block;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
}

.WaGadgetMenuHorizontal .firstLevel > li .item a span {
  color: inherit !important;
}

/* Hover state */
.WaGadgetMenuHorizontal .firstLevel > li .item a:hover {
  background-color: var(--color-bg-accent) !important;
  color: var(--color-primary-dark) !important;
}

/* Currently selected page (li.sel in the markup) — a compact pill sized to
   its own text, not a block filling the whole link's click-area, so it
   doesn't read as a big, full-height button next to the plain-text links
   beside it. The `li` above is now a flex row that centers this shorter
   pill vertically, so it doesn't just stick to the top of the row. */
.WaGadgetMenuHorizontal .firstLevel > li.sel .item a {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  padding: 8px 18px !important;
  margin: 8px 4px !important;
  border-radius: 999px !important;
}

/* Dropdown / nested menus. WildApricot reuses the SAME class "secondLevel"
   for every dropdown depth — a sub-submenu like About Us > Join Us > Events
   is still just another <ul class="secondLevel">, one level deeper. The
   compound ".secondLevel .secondLevel" selectors below exist purely to
   out-specificity the platform's own default styling for a nested panel
   (which otherwise can win and leave a deeper flyout looking unstyled),
   so every depth of dropdown matches instead of only the first one. */
.WaGadgetMenuHorizontal .secondLevel,
.WaGadgetMenuHorizontal .secondLevel .secondLevel,
.WaGadgetMenuHorizontal ul[class*="Level2"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E7F1F8 !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 6px !important;
}

.WaGadgetMenuHorizontal .secondLevel a,
.WaGadgetMenuHorizontal .secondLevel .secondLevel a,
.WaGadgetMenuHorizontal ul[class*="Level2"] a {
  color: var(--color-text) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 10px 16px !important;
}

.WaGadgetMenuHorizontal .secondLevel a:hover,
.WaGadgetMenuHorizontal .secondLevel .secondLevel a:hover,
.WaGadgetMenuHorizontal ul[class*="Level2"] a:hover {
  background-color: var(--color-bg-accent) !important;
  color: var(--color-primary) !important;
}
/* ==========================================================================
   NAV DROPDOWN BLEED FIX — corrects a selector specificity bug where the
   "selected page" coral background meant only for the top-level nav item
   (e.g. "About") was leaking onto every link inside its dropdown submenu,
   because the original selector used a descendant combinator instead of
   a direct-child one.
   ========================================================================== */

/* Tighten the "selected top-level item" rule to ONLY the direct anchor
   child, not any anchor nested deeper inside (i.e. submenu links) */
.WaGadgetMenuHorizontal .firstLevel > li.sel > .item > a {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  padding: 8px 18px !important;
  margin: 8px 4px !important;
  border-radius: 999px !important;
}

/* Explicitly reset submenu links so they can never inherit a coral
   background from an ancestor's selected or hover state */
.WaGadgetMenuHorizontal .firstLevel > li > .item > ul li > .item > a {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

.WaGadgetMenuHorizontal .firstLevel > li > .item > ul li > .item:hover > a {
  background-color: var(--color-bg-accent) !important;
  color: var(--color-primary) !important;
}

/* Also tighten the equivalent hover rule for non-selected dropdown
   parents (e.g. hovering "Events" before clicking) so it doesn't bleed
   into its submenu either */
.WaGadgetMenuHorizontal .firstLevel > li > .item:hover > a {
  background-color: var(--color-bg-accent) !important;
  color: var(--color-primary-dark) !important;
}

/* ==========================================================================
   BRAND COLOR OVERRIDE — replaces every hardcoded instance of the theme's
   default blue (#3f88e8 / #64a6fd / #2e6ab4) and pink (#ff60a4) with your
   blue/coral palette. Append this AFTER your existing custom CSS (it must
   load last so its !important rules win on equal specificity).
   ========================================================================== */

/* --- Headings (h1-h6, .promo, .header, gadget title styles) ---------------
   Theme hardcodes #3f88e8 on h1/h2/h5/h6/.promo and gadgetStyleTitle h4 */
h1, h2, h5, h6, .promo, .h1, .h2, .h5, .h6,
.gadgetStyleNone .gadgetStyleTitle h4,
.gadgetStyle002 .gadgetStyleTitle h4,
.gadgetStyle002 h1:not(.promo):not(.header):not(.h1Alt),
.gadgetStyle002 h2, .gadgetStyle002 h5, .gadgetStyle002 h6,
.WaGadgetBlog .blogCommentsOuterContainer h3.sectionTitle,
.WaGadgetEvents .pageTitleContainer h1, .WaGadgetEvents .titleContainer h1,
.WaGadgetEventsStateList h3.sectionTitle,
.WaGadgetForumStateList .boxHeaderOuterContainer table td h4,
.captionOuterContainer .captionContainer .fieldBody h4,
.WaGadgetFeaturedMember ul .label_1 {
  color: var(--color-primary) !important;
}

/* --- All links --------------------------------------------------------- */
a, a:link,
.gadgetStyle002 a:not(.stylizedButton),
.gadgetStyle002 a:link:not(.stylizedButton) {
  color: var(--color-primary) !important;
}
a:hover,
.gadgetStyle002 a:not(.stylizedButton):hover,
.gadgetStyle002 a:link:not(.stylizedButton):hover {
  color: var(--color-primary-dark) !important;
}

/* --- All buttons (catches every variant the theme defines) ---------------
   buttonStyle001/002/003, .functionalButton, input[type=submit] family,
   .typeButton, .loginButton, .searchButton, OnlineStore buttons, etc. */
a.buttonStyle001, a:link.buttonStyle001,
a.buttonStyle002, a:link.buttonStyle002,
a.buttonStyle003, a:link.buttonStyle003,
.functionalButton,
.attachmentsContainer .attachmentsUploadContainer .inputUploadFileLabel,
input.typeButton, input[type=submit], input.nextButton, input.loginButton,
input.searchButton, .OnlineStoreProduct_addToCartButton,
.WaGadgetTermsOfUse .login-role-actions input[type='submit'] {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}
a.buttonStyle001:hover, a:link.buttonStyle001:hover,
a.buttonStyle002:hover, a:link.buttonStyle002:hover,
a.buttonStyle003:hover, a:link.buttonStyle003:hover,
.functionalButton:hover,
.attachmentsContainer .attachmentsUploadContainer .inputUploadFileLabel:hover,
input.typeButton:hover, input[type=submit]:hover, input.nextButton:hover,
input.loginButton:hover, input.searchButton:hover,
.OnlineStoreProduct_addToCartButton:hover {
  background: var(--color-primary-dark) !important;
  color: #FFFFFF !important;
}

/* Outline-style pink buttons (buttonStyle004/005) -> coral outline */
a.buttonStyle004, a:link.buttonStyle004,
a.buttonStyle005, a:link.buttonStyle005 {
  border-color: var(--color-accent) !important;
  color: var(--color-accent-dark) !important;
}
a.buttonStyle004:hover, a:link.buttonStyle004:hover,
a.buttonStyle005:hover, a:link.buttonStyle005:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* --- Dividers / accent bars (was pink #ff60a4) ----------------------------*/
.quotedText, .gadgetStyle002 .quotedText,
.WaContentDivider.dividerStyle004, .WaContentDivider.dividerStyle009,
.WaGadgetCustomMenu.menuStyle003 .orientationHorizontal,
.WaGadgetCustomMenu.menuStyle003 .orientationVertical,
.WaGadgetForumStateMessageList .messageListOuterContainer ul.boxesList li.boxesListItem,
.WaGadgetForumStateMessageList .messageListOuterContainer ul.boxesList li.boxesListItem .boxHeaderOuterContainer table.forumMessageHeaderTable td.forumMessageHeaderInfoContainer,
.WaGadgetForumStateMessageList .messageListOuterContainer ul.boxesList li.boxesListItem .boxBodyOuterContainer table.forumMessageTable td.left {
  border-color: var(--color-accent) !important;
}

/* Recent blog posts / forum updates / upcoming events left-border accent */
.WaGadgetRecentBlogPosts.recentBlogPostsStyle002 ul li,
.WaGadgetRecentBlogPosts.recentBlogPostsStyle005 ul li,
.WaGadgetForumUpdates.forumUpdatesStyle002 ul li,
.WaGadgetForumUpdates.forumUpdatesStyle005 ul li {
  border-left-color: var(--color-accent) !important;
}

/* --- Calendar widget (month view event chips, recurring icon) ------------*/
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div {
  border-left-color: var(--color-accent) !important;
}
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td.EventListCalendarItemSelected a.calendarDate,
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td.EventListCalendarItemSelected a.calendarDate:hover {
  color: var(--color-primary) !important;
}

/* --- Search results pager (the pink "current page" + faded ends) ---------*/
.WaGadgetSiteSearchResults .searchPager a {
  color: var(--color-primary) !important;
}
.WaGadgetSiteSearchResults .searchPager span {
  color: var(--color-accent-dark) !important;
}

/* --- Forum message header accent bar (was pink) ---------------------------*/
.WaGadgetForum #idTopicListContainer .boxBodyOuterContainer table tr.topicListRow.highlight,
.WaGadgetForum #idTopicListContainer .boxBodyOuterContainer table tr.topicListRow.highlight td {
  background: var(--color-bg-accent) !important;
}

/* --- Member directory / generic list table header text -------------------*/
.genericListTable thead th, .membersTable thead th {
  color: var(--color-primary) !important;
}

/* --- Horizontal menu dropdown background (was blue #3f88e8) --------------*/
.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul ul {
  /* background: var(--color-primary) !important;
  border-color: var(--color-primary-dark) !important; */
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .stickyMenu.active {
  background: #FFFFFF !important;
  border-bottom-color: #E7F1F8 !important;
}

/* --- Online store list price / catalog accents ----------------------------*/
.OnlineStoreCatalog_list_price, .OnlineStoreProduct_aside .OnlineStoreCatalog_list_price {
  color: var(--color-primary) !important;
}

/* --- Slideshow / camera nav arrows (was solid blue bar) -------------------*/
.camera_wrap, .camera_next, .camera_prev, .camera_thumbs_cont,
.camera_commands > .camera_play, .camera_commands > .camera_stop {
  background: var(--color-primary) !important;
}
.camera_next:hover, .camera_prev:hover {
  background: var(--color-primary-dark) !important;
}
.camera_caption {
  background: rgba(18, 112, 181, 0.75) !important;
}

/* Clean white header */
.zoneHeader,
.layoutHeader {
    background: #fff !important;
}

/* Smaller logo — your logo gadget's real class is WaGadgetAccountLogo (the
   rule below only matched WaGadgetLogo/.custom-header-logo, neither of
   which exist on this page, so it silently did nothing). The gadget's own
   markup also sets style="height:100%" inline on the <img>, and an inline
   style beats a plain CSS rule regardless of selector specificity — with
   no explicit height on any ancestor, that 100% resolved to the image's
   full native size. !important on the rule below is what's needed to win
   against that inline style. */
.WaGadgetAccountLogo img,
.WaGadgetLogo img,
.custom-header-logo img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
}

/* Reduce excess whitespace */
.zoneHeader {
    padding: 8px 0;
}

/* Reset outer gadget wrapper */
.networkLoginButton {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Align button to the right */
.networkLoginButton .alignRight,
.networkLoginButton .loginContainer {
    text-align: right;
}
.networkLoginButton {
    margin-top: 30px !important;
}
.networkLoginButton.WaGadgetLoginButton .loginContainer .loginLink {
    display: inline-block;
    background-color: #0D5182 !important;
    color: #ffffff !important;
    border: 2px solid #0D5182 !important;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.networkLoginButton.WaGadgetLoginButton .loginContainer .loginLink:hover,
.networkLoginButton.WaGadgetLoginButton .loginContainer .loginLink.hover {
    background-color: #DB515D !important;
    border-color: #DB515D !important;
    color: #ffffff !important;
}


.WaGadgetHeadline .gadgetStyleBody p {
  font-family: 'Lora', Georgia, serif !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 1.8em !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em 0 !important;
}

/* ==========================================================================
   REUSABLE BUTTON STYLES — apply by typing the class name into the
   gadget's "CSS Class" field (Secondary Menu / Navigation Links gadget).
   Team members just copy the gadget and type one of: btn-primary,
   btn-secondary, btn-dark
   ========================================================================== */

/* Shared base for all three — sizing, font, shape stays consistent */
.btn-primary ul li a,
.btn-secondary ul li a,
.btn-dark ul li a {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* btn-primary — solid blue, main call-to-action */
.btn-primary ul li a {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: var(--shadow-soft);
}
.btn-primary ul li a:hover {
  background: var(--color-primary-dark) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* btn-secondary — coral outline, softer secondary action */
.btn-secondary ul li a {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-accent) !important;
  padding: 10px 26px !important; /* slightly less to account for border */
}
.btn-secondary ul li a:hover {
  background: var(--color-bg-accent) !important;
  color: var(--color-primary-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

/* btn-dark — solid coral fill, for use on photo/hero backgrounds where a
   blue button might blend in too much against a dark image */
.btn-dark ul li a {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: var(--shadow-soft);
}
.btn-dark ul li a:hover {
  background: var(--color-accent-dark) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   HEADSHOT STYLING — apply "headshot-circle" via the Image gadget's
   CSS Class field for consistent, professional team photos regardless
   of the original image's size or aspect ratio.
   ========================================================================== */

.headshot-circle img {
  display: block !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important; /* favors faces over the top of frame */
  margin: 0 auto 16px !important;
  border: 4px solid #FFFFFF !important;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.headshot-circle img:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Smaller variant — useful for inline headshots next to a quote or bio
   blurb rather than a standalone team-grid photo */
.headshot-circle-small img {
  display: block !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 auto 12px !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: var(--shadow-soft);
}

/* Square/rounded-corner variant, if you ever want a less formal look than
   a perfect circle (e.g. for a "meet our volunteers" casual section) */
.headshot-square img {
  display: block !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: var(--radius) !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 auto 16px !important;
  box-shadow: var(--shadow-soft);
}

/* Caption text below the photo (name / role) — applies if the Image
   gadget's built-in caption field is used, OR to a Content gadget
   stacked directly underneath carrying this same class */
.headshot-caption {
  text-align: center !important;
}
.headshot-caption p {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
.headshot-caption p:first-of-type {
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  font-size: 1.05em !important;
}
.headshot-caption p:nth-of-type(2) {
  color: var(--color-text-muted) !important;
  font-size: 0.9em !important;
  font-style: italic;
}

/* ==========================================================================
   FOOTER FIX v2 — corrected to target the actual markup (previous version
   used guessed class names that didn't exist on this page). Overrides the
   inline line-height values and default paragraph margins causing the
   mismatched spacing between the two footer columns.
   ========================================================================== */

/* Kill default paragraph margins + the inline line-height overrides on
   every paragraph inside the footer's content gadgets */
.WaPlaceHolderFooter2 .gadgetStyleBody p,
.zoneFooter3 .gadgetStyleBody p {
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Hide empty trailing paragraphs (e.g. the stray <p align="center"><br></p>
   left over from editing) so they don't add extra blank space */
.WaPlaceHolderFooter2 .gadgetStyleBody p:empty,
.zoneFooter3 .gadgetStyleBody p:empty {
  display: none !important;
}

/* Add a small, consistent gap between lines within each column (replaces
   the removed margin with something intentional and even) */
.WaPlaceHolderFooter2 .gadgetStyleBody p + p,
.zoneFooter3 .gadgetStyleBody p + p {
  margin-top: 6px !important;
}

/* Top-align both footer columns regardless of content height */
.WaPlaceHolderFooter2 .WaLayoutItem,
.zoneFooter3 .WaLayoutItem {
  vertical-align: top !important;
}

/* ==========================================================================
   MOBILE MENU FIX — restyles the WaGadgetMobilePanel (hamburger menu)
   from the theme's default orange/blue to your blue/coral palette.
   ========================================================================== */

/* The top bar containing the hamburger icon and login icon */
.WaGadgetMobilePanel .mobilePanel {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
  color: #FFFFFF !important;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active {
  background: var(--color-primary-dark) !important;
  color: #FFFFFF !important;
}

/* The dropdown menu panel itself (first-level links) */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel {
  background: var(--color-primary-dark) !important;
  border-top-color: var(--color-primary-dark) !important;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a {
  color: #FFFFFF !important;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--color-accent-tint) !important;
}

/* Second-level (submenu) links */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul {
  background: var(--color-primary) !important;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a {
  color: #DCEBF7 !important; /* soft light blue-white, readable on dark bg */
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a {
  color: var(--color-accent-tint) !important;
}

/* Login panel (when the login icon is tapped) */
.WaGadgetMobilePanel .mobilePanel .loginInner {
  background: var(--color-primary-dark) !important;
  border-top-color: var(--color-primary-dark) !important;
}

.WaGadgetMobilePanel .mobilePanel .loginInner .generalLoginBox a,
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated a {
  color: #FFFFFF !important;
}

.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:hover {
  background: var(--color-accent-dark) !important;
  color: #FFFFFF !important;
}

.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$='TextBox'] input[class$='TextBoxControl'] {
  background: var(--color-primary) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   HERO HEADING MOBILE FIX v2 — corrected to target the actual element.
   The 56px size is set inline on a nested <font> tag inside the h1, not
   on the h1 itself, so we must override the font tag directly.
   ========================================================================== */

@media screen and (max-width: 600px) {
  h1 font {
    font-size: 28px !important;
  }
  h1 {
    line-height: 1.3 !important;
  }
}

@media screen and (max-width: 400px) {
  h1 font {
    font-size: 22px !important;
  }
}

/* Prevent overflow regardless of font size, as a safety net */
h1, h1 font {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* ==========================================================================
   HERO HEIGHT MOBILE FIX — the hero gadget has a fixed 600px/568px height
   baked into inline styles. Shrinking the text (previous fix) didn't
   shrink the box, leaving excess empty space. This scales the box down
   to match on small screens. Targeted by component ID since this is a
   specific, one-off hero gadget unique to this page.
   ========================================================================== */

@media screen and (max-width: 600px) {
  #id_VBXo1pm {
    height: 280px !important;
  }
  #id_VBXo1pm .gadgetStyleBody {
    height: 280px !important;
  }
  #id_VBXo1pm table[height] {
    height: 280px !important;
  }
}

@media screen and (max-width: 400px) {
  #id_VBXo1pm {
    height: 240px !important;
  }
  #id_VBXo1pm .gadgetStyleBody {
    height: 240px !important;
  }
  #id_VBXo1pm table[height] {
    height: 240px !important;
  }
}

/* ==========================================================================
   EVENT IMAGE SIZE FIX v2 — switched from object-fit: cover (which
   aggressively crops square/portrait images into a wide short box) to
   object-fit: contain, which shows the full image with no cropping,
   filling any leftover space with a soft background instead of stretching
   or zooming.
   ========================================================================== */

.WaGadgetEventsStateList .boxBodyContentContainer.fixedHeight {
  max-height: none !important;
  overflow: visible !important;
}

.gadgetEventEditableArea img {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background-color: var(--color-bg-accent) !important;
  border-radius: var(--radius) !important;
  margin: 0 !important;
}

.gadgetEventEditableArea p {
  margin: 0 !important;
}

.WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer {
  background-color: var(--color-bg-accent) !important;
}
 
 .WaGadgetEventsStateList .boxBodyInfoContainer,
.WaGadgetEventsStateDetails .boxBodyInfoContainer,
.WaGadgetEvents .boxBodyInfoContainer {
  background-color: var(--color-bg-accent) !important;
}

/* ==========================================================================
   INFO CARD — apply via a Content gadget's CSS Class field to get a
   white card with padding, rounded corners, soft shadow, and on-brand
   heading/body text styling. Designed to sit side-by-side using
   Wildapricot's column layout (2 or 3 columns), matching the "Who are
   we? / How did we start? / Latest Newsletter" pattern from the old site.

   USAGE:
   - Add a Content gadget, type your heading as the FIRST line/paragraph,
     then your body text as subsequent paragraphs.
   - Set the gadget's CSS Class to: info-card
   - Repeat in adjacent columns for a multi-card row.
   ========================================================================== */

.info-card {
  background-color: #FFFFFF !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
  padding: 32px 28px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.info-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* The first paragraph acts as the card's heading — bold, regular black,
   same size as body text, matching your serif heading font */
.info-card .gadgetStyleBody p:first-of-type {
  font-family: 'Lora', Georgia, serif !important;
  color: rgb(37, 38, 43) !important;
  font-weight: 400 !important;
  font-size: 1em !important;
  margin: 0 0 12px 0 !important;
}

/* Body paragraphs — regular black text, readable, with breathing room
   between them */
.info-card .gadgetStyleBody p {
  color: rgb(37, 38, 43) !important;
  font-size: 1em !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
}

.info-card .gadgetStyleBody p:last-of-type {
  margin-bottom: 0 !important;
}

/* --- Variant: card with an image (e.g. newsletter thumbnail) -------------*/
.info-card-image {
  background-color: #FFFFFF !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
  padding: 32px 28px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.info-card-image:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.info-card-image .gadgetStyleBody p:first-of-type {
  font-family: 'Lora', Georgia, serif !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 1.2em !important;
  margin: 0 0 4px 0 !important;
}

/* Date/subtitle line directly under the heading (second paragraph) */
.info-card-image .gadgetStyleBody p:nth-of-type(2) {
  color: var(--color-text-muted) !important;
  font-size: 0.9em !important;
  margin: 0 0 16px 0 !important;
}

/* The image itself — contained, rounded, soft border, consistent sizing */
.info-card-image .gadgetStyleBody img {
  display: block !important;
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-soft);
}

/* --- Optional: coral-tinted variant for visual variety across a row ------*/
.info-card-accent {
  background-color: var(--color-bg-accent) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
  padding: 32px 28px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.info-card-accent:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.info-card-accent .gadgetStyleBody p:first-of-type {
  font-family: 'Lora', Georgia, serif !important;
  color: var(--color-primary) !important;
  font-weight: 400 !important;
  font-size: 1.2em !important;
  margin: 0 0 12px 0 !important;
}
.info-card-accent .gadgetStyleBody p {
  color: var(--color-text) !important;
  font-size: 0.96em !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
}

.WaLayoutSeparator {
  width: 28px !important;
}

/* ==========================================================================
   REMOVE TRAILING GAP BEFORE FOOTER (precise) — targets the exact content
   placeholder (#id_Content3) confirmed via dev tools to be the source of
   the 40px padding, rather than guessing or applying globally.
   ========================================================================== */

#id_Content3 > div {
  padding-bottom: 0 !important;
}
css
/* ==========================================================================
   LOGIN PAGE FIXES — the "please log in" interstitial page uses two link
   types the main site CSS didn't reach: a bare .loginLink (no gadget
   wrapper) for the top "Log in" button, and WildApricot's own OAuth
   buttons (.wa-authenticateLoginLink) for Google/Microsoft/Apple. Both are
   plain <a> tags, so the global "a, a:link { color: var(--color-primary) }"
   rule was painting their text blue — on top of button backgrounds that
   are already blue-ish, giving the "blue on blue" look.
   ========================================================================== */

/* Top "Log in" link on the login-required page */
a.loginLink {
  background-color: var(--color-primary-dark) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--color-primary-dark) !important;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
a.loginLink:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* OAuth "Log in with ___" buttons — keep WildApricot's own button colors,
   just force the text white regardless of provider (Google/Microsoft/Apple
   all share this same class) */
a.wa-authenticateLoginLink,
a.wa-authenticateLoginLink:link,
a.wa-authenticateLoginLink:visited,
a.wa-authenticateLoginLink:hover,
a.wa-authenticateLoginLink .authenticateLoginText {
  color: #FFFFFF !important;
}
/* Top "Log in" link on the login-required page. The doubled class
   (.loginLink.loginLink) isn't a typo — repeating a class is a standard
   way to raise specificity without !important wars, so this wins
   regardless of where it sits in the file relative to the global
   "a, a:link" rule, instead of depending on source order. */
a.loginLink.loginLink,
a.loginLink.loginLink:link,
a.loginLink.loginLink:visited {
  background-color: var(--color-primary-dark) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--color-primary-dark) !important;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
a.loginLink.loginLink:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* OAuth "Log in with ___" buttons — same fix, same reasoning */
a.wa-authenticateLoginLink.wa-authenticateLoginLink,
a.wa-authenticateLoginLink.wa-authenticateLoginLink:link,
a.wa-authenticateLoginLink.wa-authenticateLoginLink:visited,
a.wa-authenticateLoginLink.wa-authenticateLoginLink:hover,
a.wa-authenticateLoginLink.wa-authenticateLoginLink .authenticateLoginText {
  color: #FFFFFF !important;
}