/* ==========================================================================
   CUSTOM CSS — Warm/Trustworthy Health Nonprofit Theme
   Primary:  #573D94 (purple)
   Accent:   #A7D4A9 (sage green)
   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: #573D94;
  --color-primary-dark: #432e73;
  --color-primary-light: #7a5cb8;
  --color-accent: #A7D4A9;
  --color-accent-dark: #7fb583;
  --color-bg: #FAF8FC;          /* very soft lavender-white */
  --color-bg-accent: #F3F9F3;   /* very soft sage-white for alternating sections */
  --color-text: #2E2A35;
  --color-text-muted: #6B6675;
  --radius: 14px;
  --shadow-soft: 0 4px 16px rgba(87, 61, 148, 0.08);
  --shadow-hover: 0 8px 24px rgba(87, 61, 148, 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 #ECE7F4;
  box-shadow: 0 2px 10px rgba(87, 61, 148, 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 purple. Secondary/accent = sage 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 softer, sage-colored call-to-action */
.btn-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-primary-dark) !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 #ECE7F4 !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 sage 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, #573D94 0%, #6e4fb0 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: var(--color-primary-dark) !important;
}

/* --- 10. Footer -------------------------------------------------------------*/
.wa-footer, #footer {
  background-color: var(--color-primary) !important;
  color: #F3EFFA !important;
  padding: 40px 24px !important;
  margin-top: 60px;
}
.wa-footer a, #footer a {
  color: var(--color-accent) !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 #D9D1E8 !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(87, 61, 148, 0.12) !important;
}

/* --- 12. Small accent touches (sage 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 #ECE7F4 !important;
  border-bottom: 1px solid #ECE7F4 !important;
}

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

.WaGadgetMenuHorizontal .firstLevel > li {
  list-style: none !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) */
.WaGadgetMenuHorizontal .firstLevel > li.sel .item a {
  background-color: var(--color-accent) !important;
  color: var(--color-primary-dark) !important;
}

/* Dropdown / second-level menus, if any items have children */
.WaGadgetMenuHorizontal .secondLevel,
.WaGadgetMenuHorizontal ul[class*="Level2"] {
  background-color: #FFFFFF !important;
  border: 1px solid #ECE7F4 !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 6px !important;
}

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

.WaGadgetMenuHorizontal .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" sage 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: var(--color-primary-dark) !important;
}

/* Explicitly reset submenu links so they can never inherit a sage/green
   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
   purple/sage 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) -> sage 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: #ECE7F4 !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(87, 61, 148, 0.75) !important;
}

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

/* Smaller logo */
.WaGadgetLogo img,
.custom-header-logo img {
    max-height: 100px;
    width: auto;
    height: auto;
}

/* 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: #432E73 !important;
    color: #ffffff !important;
    border: 2px solid #432E73 !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: #a7d4a9 !important;
    border-color: #a7d4a9 !important;
    color: #432E73 !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 purple, 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 — sage 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 sage fill, for use on photo/hero backgrounds where a
   purple button might blend in too much against a dark image */
.btn-dark ul li a {
  background: var(--color-accent) !important;
  color: var(--color-primary-dark) !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 purple/sage 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) !important;
}

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

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

.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a {
  color: var(--color-accent) !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: var(--color-primary-dark) !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(46, 42, 53) !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(46, 42, 53) !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: sage-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;
}