/* Admin bar/header offset */
body.admin-bar .btSiteHeader,
body.admin-bar .btStickyHeader {
  top: calc(24px + 32px) !important;
}

body:not(.admin-bar) .btSiteHeader,
body:not(.admin-bar) .btStickyHeader {
  top: 24px !important;
}

/* Hide big theme title */
.btPageHeadline {
  display: none !important;
}

/* Create space from the very top of the page */
body {
  padding-top: 24px !important;
}

/* Remove borders from blocks that add them */
html :where(.has-border-color),
html :where([style*="border-width"]) {
  border: none !important;
}
.bt_bb_color_scheme_4.bt_bb_icon.bt_bb_style_borderless .bt_bb_icon_holder:before {
    color: #f3f0eb;
}
/* Force footer backgrounds */
.bt-footer-widgets,
.bt-footer-widgets .bt-container,
.bt-below-footer,
.bt-below-footer .bt-container,
footer .boldSection,
footer .boldRow,
footer .boldColumn,
footer,
#footer,
.site-footer,
.bt-footer,
.btSiteFooter .bt_bb_section {
  background-color: #1B2A3A !important;
}
/* Kill the outline/box around Bold Builder headline */
.bt_bb_headline {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* In case the border is actually on the inner wrapper */
.bt_bb_headline .bt_bb_headline_content {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* If the theme draws it with pseudo-elements */
.bt_bb_headline .bt_bb_headline_content:before,
.bt_bb_headline .bt_bb_headline_content:after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Campaign typography */
.campaign-header {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.campaign-subhead {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 350;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 50px; /* was invalid */
}
/* Make entire column white and equal height */
.equal-cards .bt_bb_column {
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Equal-height card columns inside the policy tab row */
/* Same image height */
.policy-cards .bt_bb_card_image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

/* Force the text panel under each image to the same height */
/* POLICY CARDS — final clean version */
.policy-cards .bt_bb_inner_row_column {
    display: flex !important;
}

.policy-cards .bt_bb_card_image {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

/* leave images alone so they don't crop weirdly */
.policy-cards .bt_bb_card_image img {
    display: block;
    width: 100%;
    height: auto !important;
}

/* make the content area fill the remaining space */
.policy-cards .bt_bb_card_image > .bt_bb_card_image_content,
.policy-cards .bt_bb_card_image > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* reserve equal room for titles */
.policy-cards .bt_bb_card_image h3 {
    min-height: 2.5em !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
}
.bt_bb_accordion_item {
    border-bottom: 1px solid rgba(255,255,255,0.35) !important;
}
/* Thin accordion divider using the element's text color with opacity */
.bt_bb_accordion_item,
.bt_bb_accordion_item_title {
    border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important;
}

/* Keep divider consistent when accordion is open */
.bt_bb_accordion_item .bt_bb_accordion_item_title:after {
    border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important;
}

@media (max-width:768px){
.bt_bb_full_screen {
min-height: 650px !important;
}
}
/* =========================
   BOLD BUILDER ACCORDIONS
   CLEAN REPLACEMENT
   ========================= */

/* Accordion item reset */
.bt_bb_accordion .bt_bb_accordion_item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Title row */
.bt_bb_accordion .bt_bb_accordion_item_title {
    position: relative !important;
    margin: 0 !important;
    padding: 18px 52px 18px 0 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease;
}

/* Content area: CLOSED by default */
.bt_bb_accordion .bt_bb_accordion_item_content {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.65 !important;
    transition: all 0.25s ease;
}

/* Content area: OPEN only */
.bt_bb_accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_content {
    padding: 16px 0 18px 0 !important;
}

/* Paragraph cleanup */
.bt_bb_accordion .bt_bb_accordion_item_content p {
    margin: 0 !important;
}

.bt_bb_accordion .bt_bb_accordion_item_content p + p {
    margin-top: 1em !important;
}

/* Remove extra inner wrapper spacing */
.bt_bb_accordion .bt_bb_accordion_item_content_inner,
.bt_bb_accordion .bt_bb_accordion_item_inner {
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep icon aligned right and centered */
.bt_bb_accordion .bt_bb_accordion_item_title:before,
.bt_bb_accordion .bt_bb_accordion_item_title:after {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Hover polish */
.bt_bb_accordion .bt_bb_accordion_item_title:hover {
    opacity: 0.85;
    cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
    .bt_bb_accordion .bt_bb_accordion_item_title {
        padding: 16px 44px 16px 0 !important;
        line-height: 1.3 !important;
    }

    .bt_bb_accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_content {
        padding: 14px 0 16px 0 !important;
        line-height: 1.6 !important;
    }
}
/* Add breathing room below open accordion text */
.bt_bb_accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_content {
    padding: 18px 0 24px 0 !important;
}
/* Remove duplicate divider when accordion item is open */
.bt_bb_accordion .bt_bb_accordion_item.on .bt_bb_accordion_item_content {
    border-top: none !important;
}
h1 {
    line-height: 1.15; margin-bottom: 0.6em
}

h2 {
    line-height: 1.2; margin-bottom: 0.6em
}
#jobs-headline h1,
#jobs-headline .bt_bb_headline_content,
#jobs-headline .bt_bb_headline_superheadline,
#jobs-headline .bt_bb_headline_inner {
    line-height: 1.2 !important;
    letter-spacing: -0.005em;
}
/* Policy Divider with icons */
.policy-divider *[class*="icon"] {
    opacity: 0.80 !important;
    transform: scale(0.9) !important;
}

.policy-divider *[class*="line"] {
    opacity: 0.6 !important;
}
#hero-lockup .bt_bb_headline_subheadline {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    line-height: 1.05;
}

#hero-lockup h1 {
    font-size: clamp(82px, 7vw, 110px);
    letter-spacing: -0.015em;
    line-height: 1.05;
}

#hero-lockup .bt_bb_headline_subheadline {
    text-transform: uppercase;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: 0.07em;
    opacity: 0.9;
    line-height: 1.08;
    margin-top: -0.05em;
}
@media (max-width: 991px) {
  #hero-section {
    background-position: 84% center !important;
    background-size: cover !important;
  }

  #hero-lockup h1 {
    font-size: clamp(54px, 11vw, 78px);
    line-height: 0.98;
  }

  #hero-lockup .bt_bb_headline_subheadline {
    font-size: clamp(18px, 3.8vw, 24px);
    letter-spacing: 0.05em;
    line-height: 1.1;
  }
}
/* ===== RSVP PAGE ONLY (ID: 3786) ===== */

/* Hide header + nav */
.page-id-3786 header,
.page-id-3786 .mainHeader,
.page-id-3786 .bt-site-header,
.page-id-3786 .menuPort,
.page-id-3786 .btVerticalHeaderTop {
    display: none !important;
}

/* ===== Campaign Launch RSVP page only ===== */
.page-id-3786 header,
.page-id-3786 footer,
.page-id-3786 .mainHeader,
.page-id-3786 .mainFooter,
.page-id-3786 .bt-site-header,
.page-id-3786 .bt-site-footer,
.page-id-3786 .menuPort,
.page-id-3786 .btVerticalHeaderTop,
.page-id-3786 .btPageHeadline,
.page-id-3786 .btBreadcrumbs,
.page-id-3786 [class*="footer"],
.page-id-3786 [id*="footer"] {
    display: none !important;
}

/* Reset page spacing */
.page-id-3786 .btPageWrap,
.page-id-3786 .btContentWrap,
.page-id-3786 .btContentHolder,
.page-id-3786 .bt_bb_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.page-id-3786 .bt_bb_section:not(:first-of-type){
    display:none !important;
}
.page-id-3786 .btSiteFooter {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* ============================================
   FONTS
   Libre Baskerville: everything except the Calendar widget/icon and
   the event body copy. Source Sans 3: the Calendar widget, the
   calendar icon (day/month), and event body copy (excerpt/description).
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ============================================
   CALENDAR WIDGET [events_calendar] month view
   ============================================ */
/* ---- FONT: Source Sans everywhere in this widget ----
   The site's sitewide default font (Libre Baskerville, set elsewhere
   outside this file) was still inheriting onto the day-number links,
   weekday header, etc. since nothing here set a font-family on them
   directly. One wildcard rule guarantees the whole widget — numbers,
   weekday row, nav, "today" button, month label — uses Source Sans,
   overriding that sitewide default regardless of what specific element
   it lands on. */
.em.pixelbones.em-calendar,
.em.pixelbones.em-calendar * {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
}
/* ---- Remove the plugin's white card background ---- */
.em.pixelbones.em-calendar,
.em.pixelbones.em-calendar .em-cal-head,
.em.pixelbones.em-calendar .em-cal-body,
.em.pixelbones.em-calendar .em-cal-day,
.em.pixelbones.em-calendar .em-cal-day-date {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* ---- Date numbers – cream, centered in a true circle ----
   Fixed width/height (not content-based) keeps 1- and 2-digit
   dates equally round instead of "15"/"29" stretching into a pill.
   Only the number link is centered – .em-cal-dot is explicitly
   excluded so the event dot underneath isn't affected. */
.em.pixelbones.em-calendar .em-cal-day-date {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 2.2em !important;
  height: 2.2em !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}
/* CENTERING FIX: on event days, this calendar type wraps the number in
   an extra `.ring` div (`.em-cal-day-date > .ring > a`), so the number
   link is a GRANDCHILD, not a direct child, of .em-cal-day-date. The
   old `>` direct-child selector silently missed it, which is why only
   event-day numbers looked off-center. Switched to a plain descendant
   selector so it reaches the link/span regardless of whether the ring
   wrapper is there or not — fixes centering on both event and
   non-event days without needing two separate rules. */
.em.pixelbones.em-calendar .em-cal-day-date a,
.em.pixelbones.em-calendar .em-cal-day-date span:not(.em-cal-dot) {
  color: #F5F3EE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  text-align: center !important;
}
/* The `.ring` wrapper itself (event days only) also needs to actually
   fill the circle for the centering above to have something to center
   within — otherwise it sizes to its own content instead of the full
   date circle. */
.em.pixelbones.em-calendar .em-cal-day-date .ring {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
/* ---- Weekday row (M T W T F S S) ---- */
.em.pixelbones.em-calendar .em-cal-head .em-cal-day {
  color: #8AA6C0 !important;
  font-weight: normal !important;
}
/* ---- Prev/next month dates – dimmed ---- */
.em.pixelbones.em-calendar .eventless-pre,
.em.pixelbones.em-calendar .eventless-post,
.em.pixelbones.em-calendar .eventful-pre,
.em.pixelbones.em-calendar .eventful-post {
  opacity: 0.35;
}
/* ---- "Jul 2026" month picker label ----
   FONT: Source Sans (part of the Calendar widget). */
.em.pixelbones.em-calendar .em-month-picker {
  color: #F5F3EE !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
}
/* ---- Prev/next month nav arrows ---- */
.em.pixelbones.em-calendar .em-calnav svg path {
  stroke: #F5F3EE !important;
}
/* ---- "Today" jump button ---- */
.em.pixelbones.em-calendar a.em-calnav-today {
  background: transparent !important;
  color: #8AA6C0 !important;
  border: 1px solid #8AA6C0 !important;
  border-radius: 999px !important;
}
/* ---- Days WITHOUT events – thin outline ring ---- */
.em.pixelbones.em-calendar .em-cal-body [class*="eventless"] .em-cal-day-date,
.em.pixelbones.em-calendar .em-cal-body [class*="eventless"] .em-cal-day-date::before,
.em.pixelbones.em-calendar .em-cal-body [class*="eventless"] .em-cal-day-date span {
  background: none !important;
  box-shadow: none !important;
}
.em.pixelbones.em-calendar .em-cal-body [class*="eventless"] .em-cal-day-date {
  border: 1px solid rgba(244, 241, 232, 0.25) !important;
  border-radius: 50% !important;
}
/* ---- Today – slate ring, thicker + bold number (not color-only) ---- */
.em.pixelbones.em-calendar .em-cal-body .eventless-today .em-cal-day-date,
.em.pixelbones.em-calendar .em-cal-body .eventful-today .em-cal-day-date {
  border-color: #8AA6C0 !important;
  border-width: 3px !important;
  border-style: solid !important;
}
.em.pixelbones.em-calendar .em-cal-body .eventless-today .em-cal-day-date span,
.em.pixelbones.em-calendar .em-cal-body .eventless-today .em-cal-day-date a,
.em.pixelbones.em-calendar .em-cal-body .eventful-today .em-cal-day-date span,
.em.pixelbones.em-calendar .em-cal-body .eventful-today .em-cal-day-date a {
  font-weight: 700 !important;
}
/* ---- Days WITH events – ring only, no fill (per request) ----
   Previously a filled cream circle behind a navy number. The fill is
   removed here — background/border on the date circle itself are
   cleared so nothing but the ring (below) shows, and the number stays
   cream like every other day instead of switching to navy (there's no
   longer a light circle behind it to need dark text for contrast). */
.em.pixelbones.em-calendar .em-cal-body .eventful .em-cal-day-date {
  background: none !important;
  border: none !important;
}
.em.pixelbones.em-calendar .em-cal-body .eventful .em-cal-day-date a {
  color: #F5F3EE !important;
  font-weight: 600 !important;
}
/* The ring itself (event days): this calendar type draws the event
   indicator as a `.ring` div whose border-color reads a CSS custom
   property, --date-border-color — and the plugin sets that variable
   with an INLINE style straight on the .ring element itself (per-event
   category color, e.g. #80b538 green). A plain `border-color`
   override here can't win: inline declarations on the element beat
   ancestor-level values regardless of !important, since inheritance
   only kicks in when nothing targets the element directly. The fix is
   to override the CUSTOM PROPERTY itself with a rule that also
   targets .ring directly (not just an ancestor) — confirmed live that
   this is what actually beats the inline value. */
.em.pixelbones.em-calendar .ring {
  --date-border-color: #8AA6C0 !important;
  border-color: #8AA6C0 !important;
}
/* ---- Event dots ----
   This calendar type doesn't render a separate dot element at all (the
   `.ring` above is the only event indicator) — confirmed live, nothing
   currently matches this selector. Left in place, inert, in case a
   future calendar view brings dots back. */
.em.pixelbones.em-calendar .em-cal-dot {
  --dot-color: #8AA6C0 !important;
  background: #8AA6C0 !important;
}
/* ---- Minimum touch target size (WCAG 2.5.8) ---- */
.em.pixelbones.em-calendar .em-cal-day-date,
.em.pixelbones.em-calendar .em-cal-day-date a {
  min-width: 24px !important;
  min-height: 24px !important;
}
/* ---- Keyboard focus indicators (WCAG 2.4.7 / 2.4.11) ----
   The rules above strip box-shadow globally, which can hide the
   browser's default focus ring. These restore a visible, high-contrast
   focus indicator for every interactive calendar control. */
.em.pixelbones.em-calendar .em-cal-day-date a:focus-visible,
.em.pixelbones.em-calendar .em-month-picker:focus-visible,
.em.pixelbones.em-calendar .em-calnav a:focus-visible,
.em.pixelbones.em-calendar a.em-calnav-today:focus-visible {
  outline: 2px solid #F5F3EE !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================
   EVENT POPUP — click-a-date modal
   ============================================ */
.em.pixelbones.em-modal .em-modal-popup {
  background: #F5F3EE !important;
  border-radius: 6px !important;
}
.em.pixelbones.em-modal .em-modal-title {
  color: #14202E !important;
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
}
.em.pixelbones .em-modal-content .em-item {
  --default-border: #8AA6C0 !important;
}
.em.pixelbones .em-modal-content .em-item-name a {
  color: #41597A !important;
  font-weight: 600 !important;
}
.em.pixelbones .em-modal-content .em-item-name a:focus-visible {
  outline: 2px solid #14202E !important;
  outline-offset: 2px !important;
}
.em.pixelbones .em-modal-content .em-item-meta,
.em.pixelbones .em-modal-content .em-item-meta *,
.em.pixelbones .em-modal-content .em-item-image-placeholder,
.em.pixelbones .em-modal-content .em-item-image-placeholder * {
  color: #14202E !important;
}
/* Date/location icons were inheriting white fill/stroke, making them
   (and the text beside them) invisible on the cream popup. */
.em.pixelbones .em-modal-content .em-item-meta svg,
.em.pixelbones .em-modal-content .em-item-meta svg * {
  fill: #14202E !important;
  stroke: #14202E !important;
}

/* ============================================
   SINGLE EVENT PAGE — readable on navy background
   ============================================ */
body.single-event,
body.single-event p,
body.single-event li,
body.single-event span,
body.single-event .bt_bb_port {
  color: #F5F3EE !important;
}
body.single-event h1, body.single-event h2, body.single-event h3,
body.single-event h4, body.single-event h5 {
  color: #F5F3EE !important;
}
body.single-event .bt_bb_port a,
body.single-event article a,
body.single-event .em-event-single a {
  color: #8AA6C0 !important;
}
body.single-event .bt_bb_port a:hover,
body.single-event article a:hover {
  color: #BFD0E0 !important; /* slate-200 on hover */
}
body.single-event .bt_bb_port a:focus-visible,
body.single-event article a:focus-visible,
body.single-event .em-event-single a:focus-visible {
  outline: 2px solid #F5F3EE !important;
  outline-offset: 2px !important;
}

/* ============================================
   FOOTER MENU — cream links everywhere
   ============================================ */
.menu-footer-menu-for-footer-page-container a,
.bt_bb_custom_menu a {
  color: #F5F3EE !important;
}
.menu-footer-menu-for-footer-page-container a:hover,
.bt_bb_custom_menu a:hover {
  color: #8AA6C0 !important;
}
.menu-footer-menu-for-footer-page-container a:focus-visible,
.bt_bb_custom_menu a:focus-visible {
  outline: 2px solid #F5F3EE !important;
  outline-offset: 2px !important;
}

/* ============================================
   WEEKLY EVENTS LIST – [events_list_grouped]
   Pairs with reid-events-list-grouped-shortcode.txt, which replaces
   the shortcode's default (unstyled) per-event template with these
   custom classes (reid-elist-*).
   ============================================ */
.em.pixelbones.em-events-list-grouped {
  background: transparent !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #F5F3EE !important;
}
/* ---- Week/month section heading ----
   The plugin auto-inserts this between groups when using mode="weekly".
   Styled (not hidden) so weeks read as clear section breaks. */
.em.pixelbones.em-events-list-grouped > h2 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #8AA6C0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 32px 0 4px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(245, 243, 238, 0.35) !important;
}
.em.pixelbones.em-events-list-grouped > h2:first-child {
  margin-top: 0 !important;
}
/* ---- Row container (one per event) ---- */
.reid-elist-row {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(245, 243, 238, 0.25) !important;
}
.reid-elist-row:last-child {
  border-bottom: none !important;
}
/* ---- Date column ---- */
.reid-elist-date {
  display: flex !important;
  flex-direction: column !important;
  min-width: 90px !important;
  flex-shrink: 0 !important;
}
/* Day number */
.reid-elist-day {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  font-size: 2.75rem !important;
  line-height: 1 !important;
  color: #F5F3EE !important;
}
/* Month name */
.reid-elist-month {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  font-size: 1rem !important;
  color: #F5F3EE !important;
  margin-top: 2px !important;
}
/* Event time, under the date */
.reid-elist-time {
  font-size: 0.9rem !important;
  color: #8AA6C0 !important;
  margin-top: 6px !important;
}
/* ---- Info column (title + location) ---- */
.reid-elist-info {
  flex: 1 1 240px !important;
  min-width: 0 !important;
}
/* Event title */
.reid-elist-title,
.reid-elist-title a {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #F5F3EE !important;
  text-decoration: none !important;
}
.reid-elist-title a:hover {
  color: #8AA6C0 !important;
}
.reid-elist-title a:focus-visible {
  outline: 2px solid #F5F3EE !important;
  outline-offset: 2px !important;
}
/* Location line */
.reid-elist-location {
  font-size: 1rem !important;
  color: #8AA6C0 !important;
  margin-top: 4px !important;
}
/* ---- CTA button column ---- */
.reid-elist-cta {
  flex-shrink: 0 !important;
  align-self: center !important;
}
.reid-elist-button {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: #14202E !important;
  color: #F5F3EE !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  border: 1px solid #F5F3EE !important;
}
.reid-elist-button:hover {
  background: #1F3247 !important;
}
.reid-elist-button:focus-visible {
  outline: 2px solid #8AA6C0 !important;
  outline-offset: 2px !important;
}
/* ---- Mobile: stack date / info / button ---- */
@media (max-width: 600px) {
  .reid-elist-row {
    flex-direction: column !important;
  }
  .reid-elist-cta {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .reid-elist-button {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   FULL EVENTS LIST – [events_list]
   Styles Events Manager's built-in default list template (image,
   title, date/time/location meta with icons, excerpt, More Info
   button, pagination) — no custom shortcode template needed, this
   uses EM's own default markup/classes.
   ============================================ */
.em.pixelbones.em-list.em-events-list,
.em.pixelbones.em-list.em-events-list-grouped {
  background: transparent !important;
  color: #F5F3EE !important;
}
/* ---- Card layout (CSS Grid) ----
   The image + meta list BOTH span all 3 rows in column 1 (offset from
   each other via margin-top on the meta), while title/description/
   button each get their own row in column 2. That's what lets the
   card's real height auto-adjust to whichever column actually needs
   more room — a short excerpt won't collapse the card shorter than
   the image+meta need, and a long excerpt just grows the card
   normally, with zero manual/fixed-height guessing. */
.em.pixelbones .em-event.em-item {
  display: grid !important;
  /* Column width — matches the meta column's own width below (250px).
     The calendar icon itself is narrower (180px, centered) and doesn't
     need the track widened any further.
     ROWS: 4 rows, not 3 — found via live testing that this is what was
     causing an oversized gap between the title and description. Column
     1 (image + meta) spans multiple rows and is taller overall than
     column 2's own rows (title/desc/actions) need — when a spanning
     item needs more height than the rows it spans naturally have,
     the grid spec distributes the extra space across ALL of those
     rows, which was quietly inflating the title's own row (measured:
     72px tall for a 33px-tall title) and pushing the description down
     with it. Adding a 4th row — used only by column 1's span, empty
     in column 2 — gives that extra space somewhere to go that isn't
     "between the title and description." Confirmed live: gap dropped
     from ~39px to the intended 8px (the title's own margin-bottom). */
  grid-template-columns: 250px 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  column-gap: 24px !important;
  padding: 24px !important;
  /* "Navy panel" card look — bordered hairline instead of just a
     bottom divider, matching the brand's card style. */
  background: rgba(20, 32, 46, 0.35) !important;
  border: 1px solid rgba(245, 243, 238, 0.25) !important;
  border-radius: 6px !important;
  margin-bottom: 24px !important;
  /* Events Manager's default templates use var(--default-border) for
     accent lines/borders (e.g. the divider next to the image). Setting
     it here overrides the plugin's default green wherever it's used. */
  --default-border: #8AA6C0 !important;
}
.em.pixelbones .em-event.em-item:last-child {
  margin-bottom: 0 !important;
}
/* Promotes em-item-info's children (title, meta, desc, actions) to be
   direct grid items of .em-item, alongside .em-item-image, so each
   can be placed independently in the grid above. */
.em.pixelbones .em-event.em-item .em-item-info {
  display: contents !important;
}
/* ---- Calendar icon / featured image: outer box size ----
   This is the OUTER box that holds either a real featured photo, or
   (when there's no photo) the CSS-built calendar icon below. */
.em.pixelbones .em-event.em-item .em-item-image {
  /* An older iteration of this file positioned this box with
     position:absolute + a fixed left offset. If that older CSS is
     still the version live on the site, it pulls the box out of the
     grid entirely — it stops respecting the column-gap and drifts
     until it's flush against the title column with no visible gap.
     Forcing relative (not static) fixes the grid placement while
     still giving the calendar-icon markup inside (which uses
     position:absolute + inset:0) something correct to anchor to. */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 1 !important;
  grid-row: 1 / span 4 !important;
  align-self: start !important;
  /* SIZE + PLACEMENT: the column track is 250px, but the icon itself
     is narrower and centered within it (justify-self:center) rather
     than stretching to fill the column. The plugin's own default
     min-width:150px on this element was never an issue at the old
     210px width, but at a smaller width it would silently win and
     stretch the box back out — pinning both bounds stops that. */
  justify-self: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 180px !important;
  border: 2px solid rgba(245, 243, 238, 0.5) !important;
}
/* Real featured photo (when an event has one) */
.em.pixelbones .em-event.em-item .em-item-image img {
  display: block !important;
  width: 100% !important;
  height: 213px !important;
  object-fit: cover !important;
}
/* ---- Calendar icon: box (events without a featured photo) ----
   Events without a featured image get a "has-placeholder" box with a
   real day/month (.date > .day/.month) sitting on top of a baked-in
   gray SVG calendar icon (a background-image, so it can't be
   recolored — only removed). Instead of just removing it, this
   rebuilds an actual "calendar page" look in pure CSS: a colored band
   with the month name across the top, small binder-ring dots above
   it, and the day number large underneath.
   HEIGHT: matched to the outer box (180px) rather than the earlier
   170px — that 10px gap was getting silently clipped by overflow:hidden
   below (the inner placeholder fills the full 180px outer box via
   inset:0, so the old 170px here just cut off the bottom 10px instead
   of actually shrinking the layout). Also given its own position so
   inset:0 below maps to this box exactly, not the outer one. */
.em.pixelbones .em-event.em-item .em-item-image.has-placeholder {
  position: relative !important;
  height: 180px !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: rgba(20, 32, 46, 0.55) !important;
  border: 1px solid rgba(245, 243, 238, 0.35) !important;
}
/* ---- Calendar icon: inner layout wrapper ----
   Found the actual cause by inspecting the plugin's own stylesheet:
   it sets max-width:150px and aspect-ratio:1/1 on this element (sized
   for its own default layout) — that combination, not a plain width
   rule, is what was capping it short of the outer box and distorting
   its shape. Neither had !important, but max-width isn't overridden by
   setting width/height alone, which is why the earlier fixes didn't
   stick. */
/* Real Events page tiles (List/Grid) now always render the date
   placeholder (images were removed from both views), but Events
   Manager's own placeholder CSS still dims it to 45% opacity as a
   "no photo yet" affordance. Force full brightness, matching the
   same fix already applied to the footer popup tile. */
.em.pixelbones .em-event.em-item .em-item-image-placeholder {
  opacity: 1 !important;
}

.em.pixelbones .em-event.em-item .em-item-image-placeholder {
  background-image: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
/* ---- Calendar icon: binder-ring dots — REMOVED per request ----
   Previously a ::after with box-shadow drew 3 dots (center + two
   offset copies) hanging above the month band. Rule intentionally
   left here, commented out, in case you want them back later.
.em.pixelbones .em-event.em-item .em-item-image-placeholder::after {
  content: '' !important;
  position: absolute !important;
  top: 3.4px !important;
  left: 50% !important;
  width: 5px !important;
  height: 10px !important;
  margin-left: -3.5px !important;
  background: #14202E !important;
  border-radius: 50% !important;
  box-shadow: -26px 0 0 #14202E, 26px 0 0 #14202E !important;
  z-index: 1 !important;
}
*/
/* ---- Calendar icon: date wrapper (holds month + day) ----
   The plugin sets align-self:end on this element (it's the
   placeholder's first child div), which pushed it to the right edge
   instead of centering — align-self on the child overrides the
   parent's align-items, so it has to be reset here directly.
   IMPORTANT: .month is actually nested INSIDE this wrapper alongside
   .day (confirmed live — not a sibling of .date), so this stays
   justify-content:flex-start. Centering this wrapper as a whole would
   center the month+day pair as one block and pull the band down off
   the icon's top edge. Instead: the band (.month, order:-1) stays
   pinned at the top here, and .day below is the one that grows to
   fill the leftover space and centers itself — see .day. */
.em.pixelbones .em-event.em-item .em-item-image-placeholder .date {
  align-self: stretch !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
/* ---- Calendar icon: DAY NUMBER (large, e.g. "06") ----
   The plugin also sets align-self:end directly on this span (in
   addition to the .date container above) — same fix needed here too.
   CENTERING (answers "if the calendar height is 180, where does the
   day text sit to be centered"): rather than a hand-tuned margin-top
   pixel value that only works for one exact icon/band height and
   breaks the moment either changes, .day is now itself a flex
   container with flex:1 1 auto — it grows to fill whatever vertical
   space is left below the month band (icon height minus band height,
   whatever that is) and centers its own text in that leftover space
   via align-items/justify-content. The old margin-top:15px is gone.
   FONT: Source Sans (part of the calendar icon). */
.em.pixelbones .em-event.em-item .em-item-image-placeholder .day {
  align-self: stretch !important;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  font-size: 6.6rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #F5F3EE !important;
}
/* ---- Calendar icon: MONTH BAND (e.g. "JUL") ----
   This element IS the header band (reordered above .day with flex
   `order`, and stretched to the icon's full width) rather than a
   separate empty strip — puts the month first, without touching the
   plugin's markup order. Dark navy text on the slate band checks out
   at ~6.5:1 contrast, comfortably AA even at the larger size below.
   Padding kept modest (thin bar) on purpose — the day number below is
   the focal point, not this label.
   FONT: Source Sans (part of the calendar icon). Also fixed an invalid
   `font-size: 1 rem` (stray space made the whole declaration drop). */
.em.pixelbones .em-event.em-item .em-item-image-placeholder .month {
  order: -1 !important;
  align-self: stretch !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  /* Band height/font scaled to match the footer calendar popup's
     own blue-band-to-tile ratio (~42% of tile height), measured
     directly off the popup's rendered box model. Colors untouched. */
  padding: 10px 0 !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  background: #8AA6C0 !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  font-size: 1.65rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #14202E !important;
  font-weight: 700 !important;
}
/* When the calendar icon is showing, the "July 6, 2026" meta line next
   to the title is redundant — hide just that line, only on items that
   have the icon (events with a real photo still need it, since
   there's no date badge to fall back on). */
.em.pixelbones .em-event.em-item:has(> .em-item-image.has-placeholder) .em-item-meta-line.em-event-date {
  display: none !important;
}
/* ---- EVENT TITLE ---- */
.em.pixelbones .em-event.em-item .em-item-title,
.em.pixelbones .em-event.em-item .em-item-title a {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #F5F3EE !important;
  text-decoration: none !important;
  margin: 0 0 8px !important;
  align-self: start !important;
}
.em.pixelbones .em-event.em-item .em-item-title a:hover {
  color: #8AA6C0 !important;
}
.em.pixelbones .em-event.em-item .em-item-title a:focus-visible {
  outline: 2px solid #F5F3EE !important;
  outline-offset: 2px !important;
}
/* ---- META INFO (time / location / category) ----
   Sits under the calendar icon — same column-1 grid area as the icon
   (spanning all 3 rows), offset down via margin-top rather than a
   fixed position, so it always lands right below the icon regardless
   of the icon's own height. */
.em.pixelbones .em-event.em-item .em-event-meta.em-item-meta {
  /* An older iteration of this file positioned this block with
     position:absolute + a fixed top offset. If that older CSS is
     still the version pasted into the site, it stacks with the
     margin-top below and pushes this block way past the card,
     overlapping the next event. Forcing static here guarantees the
     grid placement above is what actually controls position. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  grid-column: 1 !important;
  grid-row: 1 / span 4 !important;
  align-self: start !important;
  /* Offset = the calendar icon's height (180px) + a 20px gap, so this
     list always lands right below it. */
  margin: 200px 0 0 0 !important;
  width: 250px !important;
  max-width: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* One meta row (icon + text), e.g. "Spring Lake District Library" */
.em.pixelbones .em-event.em-item .em-item-meta-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 3px !important;
  font-size: 0.9rem !important;
  color: #F5F3EE !important;
  /* Flex items default to a content-based minimum width, which is
     what was letting long location/category text overflow the column
     instead of wrapping — min-width:0 lets it actually shrink and
     wrap onto a second line. */
  min-width: 0 !important;
}
.em.pixelbones .em-event.em-item .em-item-meta-line .em-icon {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.em.pixelbones .em-event.em-item .em-item-meta-line a,
.em.pixelbones .em-event.em-item .em-item-meta-line > span:not(.em-icon) {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.em.pixelbones .em-event.em-item .em-item-meta-line a {
  color: #8AA6C0 !important;
  /* The theme's default link style is italic + underlined, which read
     as unstyled/inconsistent next to the serif title and button —
     drop both for a cleaner, more deliberate look. */
  font-style: normal !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.em.pixelbones .em-event.em-item .em-item-meta-line a:hover {
  text-decoration: underline !important;
}
/* Meta icons (clock/pin/folder) — baked-in gray SVGs recolored to
   cream via filter, since their fill can't be set directly. */
.em.pixelbones .em-event.em-item .em-icon {
  filter: invert(1) brightness(1.5) !important;
  opacity: 0.9 !important;
}
/* ---- BODY COPY (event description / excerpt) ----
   FONT: Source Sans (event body copy). */
.em.pixelbones .em-event.em-item .em-item-desc {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  /* The theme's default paragraph/div style adds a 20px margin-top —
     that (plus the old grid row-coupling) was the real source of the
     big title-to-description gap. */
  margin-top: 0 !important;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
  color: rgba(245, 243, 238, 0.85) !important;
  font-size: .85rem !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}
.em.pixelbones .em-event.em-item .em-item-actions {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: start !important;
}
/* ---- "MORE INFO" / RSVP BUTTON ----
   Pill button matching the "RSVP NOW" style from the brand kit — solid
   fill, fully rounded, bold white uppercase text, no border. The fill
   uses a deeper slate than the #8AA6C0 accent used elsewhere, since
   white text on the lighter accent slate doesn't have enough contrast
   (checked: ~2.5:1 vs ~5.5:1 with this deeper tone). */
.em.pixelbones .em-event.em-item .em-item-actions .button,
.em.pixelbones .em-event.em-item .em-item-read-more.button {
  /* The theme's base .button class was forcing a wider box than the
     text needed, so the label sat left-aligned inside empty space —
     inline-flex + centered content fixes that regardless of width. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  text-align: center !important;
  padding: 12px 28px !important;
  background: #4C6C8C !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  margin-right: 8px !important;
}
.em.pixelbones .em-event.em-item .em-item-actions .button:hover {
  background: #5C7E9E !important;
}
.em.pixelbones .em-event.em-item .em-item-actions .button:focus-visible {
  outline: 2px solid #8AA6C0 !important;
  outline-offset: 2px !important;
}
/* ---- PAGINATION – circular numbers matching the calendar's style ---- */
.em.pixelbones .em-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 20px !important;
}
.em.pixelbones .em-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 50% !important;
  color: #F5F3EE !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
}
.em.pixelbones .em-pagination a.page-numbers:hover {
  background: rgba(245, 243, 238, 0.15) !important;
}
.em.pixelbones .em-pagination .page-numbers.current {
  background: #F5F3EE !important;
  color: #14202E !important;
  font-weight: 700 !important;
}
.em.pixelbones .em-pagination a.page-numbers:focus-visible {
  outline: 2px solid #8AA6C0 !important;
  outline-offset: 2px !important;
}
/* ---- MOBILE (≤640px): stack everything, drop the 2-column grid ----
   Below 640px, the card becomes normal document flow: image, title,
   meta, description, button (em-item-info's real DOM order). */
@media (max-width: 640px) {
  .em.pixelbones .em-event.em-item {
    display: block !important;
    padding: 16px !important;
  }
  .em.pixelbones .em-event.em-item .em-item-image {
    width: 100% !important;
    height: 180px !important;
    margin-bottom: 12px !important;
  }
  .em.pixelbones .em-event.em-item .em-item-image img {
    height: 180px !important;
  }
  .em.pixelbones .em-event.em-item .em-event-meta.em-item-meta {
    margin: 12px 0 !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 20px !important;
  }
}

/* ============================================
   ACCESSIBILITY — respect reduced-motion preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .em.pixelbones.em-calendar * {
    transition: none !important;
    animation: none !important;
  }
}

/* Make divider icons always match the divider line color (universal fix) */
.bt_bb_separator.btWithIcon .bt_bb_icon_holder:before {
    color: rgb(204, 204, 204);
}