/* Bricks' own frontend/content-default.css ships a hardcoded
   "#brx-content.wordpress{width:1100px;max-width:100%}" for any page that
   falls back to plain WordPress content rendering instead of a full Bricks
   template -- both the single event page (event-single.php) and the
   category archive (category-single.php) hit that fallback, since neither
   is an actual Bricks-authored template. That fixed 1100px WIDTH (not just
   max-width) on the ancestor silently caps everything inside it, including
   ".msad-event-layout"/".msad-cat-wrap" below, no matter what max-width they
   set themselves -- and it's independent of viewport size, which is why it
   didn't budge when narrowing/widening the window. Same ID+class
   specificity as the original, loaded after it, so !important is needed to
   win regardless of the two stylesheets' relative load order. */
#brx-content.wordpress {
  width: 100% !important;
  max-width: none !important;
}

/* Category archive: Bricks auto-renders the page's title (which resolves to
   the current category's name, e.g. "Massachusetts") as a bare "<h1>" right
   inside "#brx-content.wordpress", with no wrapping element and no class of
   its own -- so once the fixed 1100px width above is removed, this heading
   has nothing constraining it and spans the full viewport edge-to-edge with
   zero gutter, unlike ".msad-cat-wrap" below it. Give it the same
   max-width/centering/gutter treatment as everything else on the site. */
#brx-content.wordpress > h1 {
  width: 100%;
  max-width: var(--content-width, 1300px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 64px;
  padding-left: var(--gutter, 15px);
  padding-right: var(--gutter, 15px);
  box-sizing: border-box;
}

/* "Events" sidebar widget: the plugin colors this left accent line per-event
   using each event's category color (inline --default-border), which is why
   it shows up green/whatever color a category happens to use. Use the site's
   dark brand color instead, consistently. */
.em.em-list-widget .em-item .em-item-info {
  border-left-color: var(--brand-primary, #1b2d59) !important;
}

/* The plugin italicizes any link inside a meta line (e.g. the venue link) --
   drop that so it reads as a normal link like everywhere else on the site. */
.em.em-item .em-item-meta .em-item-meta-line a,
.em.em-list .em-item .em-item-meta .em-item-meta-line a,
.em.em-list-widget .em-item .em-item-meta .em-item-meta-line a {
  font-style: normal !important;
}

/* Events Manager gives several non-field wrapper elements (a button's
   wrapping div, modal content sections, the search form's footer, etc.) a
   generic "input" class for its own unrelated spacing rules -- Bricks'
   generic form-field reset then matches that same class name and adds an
   unwanted border/shadow to them, even though they're not actual form
   fields. This has turned up in a lot of different places now: the More
   Info button in the day-click popup, the month-nav arrow pair, and the
   advanced search modal's button/section wrappers. Fix it everywhere at
   once instead of patching each new spot -- scoped to div/section/footer/
   header so it can never touch a real <input>/<select>/<textarea>'s own
   border. ".em-search-field" is explicitly excluded: those wrapper divs
   (Search, Near...) are meant to look like bordered text fields (the real
   <input> inside is borderless by design, relying on the wrapper for the
   visible box), so stripping their border there would break a legitimate
   field instead of fixing a bug. */
.em div.input:not(.em-search-field),
.em section.input,
.em footer.input,
.em header.input {
  border: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
}

/* Category color legend (Custom HTML widget under the mini calendar): one
   "[dot] Category Name" row per [categories_list] shortcode item -- styling
   only, the actual category names/colors come live from the shortcode. */
.msad-category-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.msad-category-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-body, #444);
  white-space: nowrap;
}

.msad-category-legend__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Calendar widget (All Events page + single event page sidebars, same
   "events_sidebar" widget area on both -- see the Events Calendar page
   section further down for that page's own, different circle style): fill
   the day number's circle with a solid color and white text
   for days that have events, instead of the plugin's small dot tucked below
   the number. The plugin's own
   ".em.em-calendar .em-cal-body .em-cal-day .em-cal-day-date.em-cal-day-date a"
   rule sets color with !important too, at higher specificity (6 classes) than
   a plain ".em-cal-day.eventful .em-cal-day-date a" -- match that same class
   chain (plus the "colored" class the plugin adds on event days) so this
   wins the color, not just the background.

   --em-day-color/--em-day-text-color are set inline per-day by
   em-calendar-day-color.js, copied from that day's own event dot
   (--dot-color lives on the dot span, a sibling of this <a>/<span>, so CSS
   alone can't reach it -- custom properties only inherit downward, not
   sideways). Right after an AJAX month change, the new day cells exist
   before that script has run, so both fall back to "no color yet" --
   transparent background, normal gray number, i.e. a plain uncolored day --
   rather than the brand color, which used to flash briefly on every day
   before fading to its real category color a moment later. */
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored > a,
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored > span,
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date.colored > a,
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date.colored > span,
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date.colored > a,
body.page-id-82611 .em.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date.colored > span,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored > a,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful .em-cal-day-date.colored > span,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date.colored > a,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful-pre .em-cal-day-date.colored > span,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date.colored > a,
body.single-event .em.em-calendar .em-cal-body .em-cal-day.eventful-post .em-cal-day-date.colored > span {
  background: var(--em-day-color, transparent) !important;
  color: var(--em-day-text-color, var(--date-color, #999)) !important;
  border: none !important;
}

.em-cal-day-date .em-cal-day-dots {
  display: none !important;
}

/* Events Calendar page (postId 76709, /events-calendar/): unlike the mini
   calendar above, event days here keep the plugin's own default look (a
   soft gray ring, no fill, normal gray number) -- matching the old site,
   which never overrode this either. Only today gets a filled circle, same
   recipe as the old site's: solid brand-secondary blue with a bold white
   number. Both .colored and non-.colored variants are listed since "today"
   only carries .colored when it also happens to have an event; the extra
   ".em-cal-day-date.em-cal-day-date" doubles that class deliberately (the
   same trick the plugin's own compiled CSS uses) to reach the same
   specificity as its unconditional color rule, so this reliably wins. */
body.page-id-76709 .em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date.em-cal-day-date > a,
body.page-id-76709 .em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date.em-cal-day-date > span,
body.page-id-76709 .em.em-calendar .em-cal-body .em-cal-day.eventless-today .em-cal-day-date.em-cal-day-date > a,
body.page-id-76709 .em.em-calendar .em-cal-body .em-cal-day.eventless-today .em-cal-day-date.em-cal-day-date > span {
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: bold !important;
  border: 1px solid var(--news-accent, #2E7D32) !important;
  background-color: var(--news-accent, #2E7D32) !important;
}

/* Events Calendar page nav bar: without an explicit column count, the
   3-item nav (filter icon, month, arrows) lets the month box's grid track
   stretch to fill almost the entire row -- its normal thin border (the same
   plugin default the old site also shows) then reads as one giant gray box
   instead of a small field. Keep the filter icon + month pair tight on the
   left (max-content), but let the arrows' column (1fr) take the rest of the
   row and push the arrows themselves to its right edge -- floating the
   </>/Today group to the right like the old site, instead of everything
   clumping together on the left once the month box stopped hogging the row. */
body.page-id-76709 .em-cal-nav {
  grid-template-columns: max-content max-content 1fr !important;
  column-gap: 14px !important;
}

/* .month-nav itself still stretches to fill that whole 1fr track (likely
   width:100% from the same Bricks .input reset), leaving justify-self:end
   nothing to push against -- force it back to its own content width so it
   actually becomes a compact box sitting at the track's right edge. */
body.page-id-76709 .em-cal-nav .month-nav {
  width: max-content !important;
  justify-self: end !important;
}

/* Calendar widget: the prev/next arrow pair (.month-nav) carries a leftover
   "input" class, which collides with Bricks' generic form-field reset
   (border, spacing) the same way .em-item-actions.input did on the event
   cards -- that's the boxed-in, messy look around the arrows. Strip it back
   out since this wrapper isn't an actual form field either. */
.month-nav.input {
  border: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.month-nav .em-calnav {
  border-radius: 50%;
  transition: background-color 150ms ease;
}

.month-nav .em-calnav:hover {
  background: rgba(27, 45, 89, 0.08) !important;
}

/* Calendar widget: the "Jul 2026" field is a native <input type="month">, so
   its dropdown month-grid is the browser's own picker UI, not something the
   plugin renders -- accent-color is the one CSS lever Chromium honors for
   that picker's highlight, so use it to match the category pill's blue
   instead of the browser default. */
.em-month-picker {
  accent-color: var(--news-accent, #2E7D32);
}

/* The plugin's own JS measures the widest possible month label (e.g.
   "September 2026") and sets that as a fixed inline grid-template-columns on
   .em-cal-nav, so the layout doesn't jump width when switching months --
   but that leaves short labels like "May 2026" with a lot of empty box on
   the right. Size each column to its actual content instead.
   All Events + single event sidebar mini calendar only -- its nav only ever
   has 2 items (month + arrows). The Events Calendar page's nav has a 3rd
   item (the advanced-search trigger), and forcing 2 columns there wraps it
   onto its own row -- that page keeps the plugin's own default nav grid. */
body.page-id-82611 .em-cal-nav,
body.single-event .em-cal-nav {
  grid-template-columns: max-content max-content !important;
  column-gap: 14px !important;
}

/* All Events page: match the card and sidebar radius/shadow used on the News
   page, and fix the sidebar's 40px margin-top -- on News that offset happens
   to be visually absorbed by the top filter row, but here it just pushes the
   sidebar out of alignment with the first card. */
body.page-id-82611 #brxe-oaibmj .em-item {
  border-radius: 8px !important;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15) !important;
}

body.page-id-82611 #brxe-xwdxfr {
  margin-top: 0 !important;
  border-radius: 8px !important;
}

/* All Events page: make titles, icons, and the More Info button match theme styling. */
body.page-id-82611 #brxe-oaibmj .em-item-title {
  color: var(--text-heading, #444) !important;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

body.page-id-82611 #brxe-oaibmj .em-item-title a,
body.page-id-82611 #brxe-oaibmj .em-item-title a:hover,
body.page-id-82611 #brxe-oaibmj .em-item-title a:focus-visible {
  color: inherit !important;
  text-decoration: none !important;
}

/* Event meta (date, time, location, category): bigger, easier-to-read text.
   Bricks already tints the icons blue to match the brand -- just size them up
   to match instead of flattening them black. */
body.page-id-82611 #brxe-oaibmj .em-item-meta .em-item-meta-line {
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  color: #333 !important;
  gap: 10px !important;
}

body.page-id-82611 #brxe-oaibmj .em-item-meta .em-item-meta-line .em-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  background-size: 22px !important;
  filter: none !important;
}

/* Swap the plugin's thin line-art icons for the Ionicons artwork picked in the
   Bricks icon library (ios-calendar / md-time / ios-pin), recolored to the
   dark brand color instead of Bricks' lighter blue filter. */
body.page-id-82611 #brxe-oaibmj .em-item-meta .em-item-meta-line .em-icon-calendar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M424,96h-40v24c0,4.4-3.6,8-8,8h-16c-4.4,0-8-3.6-8-8V96H160v24c0,4.4-3.6,8-8,8h-16c-4.4,0-8-3.6-8-8V96H88c-22,0-40,18-40,40v272c0,22,18,40,40,40h336c22,0,40-18,40-40V136C464,114,446,96,424,96z M432,396c0,11-9,20-20,20H100c-11,0-20-9-20-20V216c0-4.4,3.6-8,8-8h336c4.4,0,8,3.6,8,8V396z'/%3E%3Cpath d='M160,72c0-4.4-3.6-8-8-8h-16c-4.4,0-8,3.6-8,8v24h32V72z'/%3E%3Cpath d='M384,72c0-4.4-3.6-8-8-8h-16c-4.4,0-8,3.6-8,8v24h32V72z'/%3E%3C/svg%3E") !important;
}

body.page-id-82611 #brxe-oaibmj .em-item-meta .em-item-meta-line .em-icon-clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M255.8,48C141,48,48,141.2,48,256s93,208,207.8,208c115,0,208.2-93.2,208.2-208S370.8,48,255.8,48z M256,422.4c-91.9,0-166.4-74.5-166.4-166.4S164.1,89.6,256,89.6S422.4,164.1,422.4,256S347.9,422.4,256,422.4z'/%3E%3Cpath d='M266.4,152h-31.2v124.8l109.2,65.5l15.6-25.6l-93.6-55.5V152z'/%3E%3C/svg%3E") !important;
}

body.page-id-82611 #brxe-oaibmj .em-item-meta .em-item-meta-line .em-icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M256,48c-79.5,0-144,59.9-144,133.7c0,104,144,282.3,144,282.3s144-178.3,144-282.3C400,107.9,335.5,48,256,48z M256,238.9c-25.9,0-46.9-21-46.9-46.9s21-46.9,46.9-46.9s46.9,21,46.9,46.9S281.9,238.9,256,238.9z'/%3E%3C/svg%3E") !important;
}

/* The plugin renders a second, plain-text location line (#_EVENTLOCATION,
   tagged with the "at" icon) alongside the linked venue line above it --
   redundant here since the venue link already says where the event is. */
body.page-id-82611 #brxe-oaibmj .em-item-meta-line:has(.em-icon-at) {
  display: none !important;
}

/* Category badge: promote it above the title and style it as a solid pill
   (matching the News page's filter pills) instead of the plugin's small,
   translucent inline tag. The badge is nested two levels deep inside
   .em-item-meta, which itself has its own flex layout (a 2-column wrap, via
   the plugin's ".em-item-meta > div { flex: 1 1 50%; ... }" rule) -- reorder
   tricks like display:contents leak that rule onto .em-item-info's *vertical*
   flex layout instead, stretching every meta line to fill the card's height.
   Taking the badge out of flow with position:absolute sidesteps all of that:
   .em-item-info gets padding-top to reserve room, and the badge just sits in
   that reserved space regardless of how tall the flyer image makes the card. */
body.page-id-82611 #brxe-oaibmj .em-item-info {
  position: relative !important;
}

body.page-id-82611 #brxe-oaibmj .em-item-taxonomy.em-event-categories {
  position: absolute !important;
  top: 18px !important;
  left: 22px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2;
}

body.page-id-82611 #brxe-oaibmj .em-item-taxonomy.em-event-categories .em-icon-category {
  display: none !important;
}

/* Match the News page's .msad-news-card__badge pill exactly (same padding,
   font-size, weight, letter-spacing, line-height, color, and radius) so the
   two badges read as one consistent design language across pages. Background
   follows each pill's own category color -- same "Massachusetts/MSAD/
   Nationwide/New England/Virtual" colors as the mini calendar's dots and
   legend -- via "--category-color", set inline per-link in functions.php
   (falls back to the old flat blue for a category with no color set). */
body.page-id-82611 #brxe-oaibmj .em-item-meta .em-event-categories a {
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: var(--category-color, var(--news-accent, #2E7D32)) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
}

/* More Info button: Bricks already gives it a clean pill shape with no border
   and no static shadow -- leave that alone, just center it under the content,
   since the row it sits in was never actually centered.

   The wrapping div also carries Events Manager's own "input" class (for their
   own unrelated spacing rules), which collides with Bricks' generic form-field
   reset for ".input" (border, fixed line-height, full width) -- that reset is
   what was showing up as a long thin box around the button. Strip it back out
   here since this div isn't an actual form field. */
body.page-id-82611 #brxe-oaibmj .em-item-actions {
  display: flex !important;
  justify-content: center !important;
  width: auto !important;
  border: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: normal !important;
}

/* The plugin still adds a small right-padding to the flyer <img> that Bricks'
   own image styling never overrides, leaving a bare light-gray sliver directly
   against the photo. Let the photo fill its column edge-to-edge instead of
   adding a divider line there. */
body.page-id-82611 #brxe-oaibmj .em-item-image img {
  padding-right: 0 !important;
}

/* Flyer thumbnails are now wrapped in a link (see functions.php) so the whole
   image is clickable through to the event page -- make it fill the same
   space as the image itself. */
body.page-id-82611 #brxe-oaibmj .em-item-image .msad-event-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* The plugin's own meta layout forces each date/time/location line to a
   250px minimum width, meant for wrapping into 2 columns when there's room --
   this card only ever stacks them vertically in a single narrow text column,
   so that minimum just forces overflow once the column gets tighter than
   250px (from 900px width down through the mobile breakpoint). */
body.page-id-82611 #brxe-oaibmj .em-item-meta > div {
  min-width: 0 !important;
}

/* The page's own responsive rules for this card (240px/1fr image column at
   900px, full-width stacked at 767px) are declared *before* the unconditional
   "grid-template-columns: 300px 1fr" rule in the same stylesheet -- with equal
   selector specificity, that later unconditional rule always wins regardless
   of screen size, so the card never actually goes responsive. Re-apply the
   same breakpoints here with !important so they take effect. */
@media (max-width: 900px) {
  body.page-id-82611 #brxe-oaibmj .em-item {
    grid-template-columns: 240px 1fr !important;
  }

  body.page-id-82611 #brxe-oaibmj .em-item-image,
  body.page-id-82611 #brxe-oaibmj .em-item-image > div,
  body.page-id-82611 #brxe-oaibmj .em-item-image.has-placeholder,
  body.page-id-82611 #brxe-oaibmj .em-item-image .em-item-image-placeholder {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    aspect-ratio: 3 / 4 !important;
  }
}

@media (max-width: 767px) {
  body.page-id-82611 #brxe-oaibmj .em-item {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.page-id-82611 #brxe-oaibmj .em-item-image,
  body.page-id-82611 #brxe-oaibmj .em-item-image > div,
  body.page-id-82611 #brxe-oaibmj .em-item-image.has-placeholder,
  body.page-id-82611 #brxe-oaibmj .em-item-image .em-item-image-placeholder {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4 !important;
  }

  /* .em-item-image has its own light-gray placeholder background (for while
     the flyer image loads); the <img> is inline by default and leaves a
     sliver of it exposed along the bottom edge. That was always there but
     hidden under the green border above -- now that the border's gone, match
     the card's own white background instead of patching the inline gap. */
  body.page-id-82611 #brxe-oaibmj .em-item-image {
    background: var(--white, #fff) !important;
  }

  /* Remove the plugin's category-color top border (a green/whatever-color
     line here) and give the category pill room to breathe above the title --
     the desktop padding-top of 46px only just clears the pill, which reads
     fine there but crowds the stacked mobile layout. */
  body.page-id-82611 #brxe-oaibmj .em-item-info {
    padding: 64px 16px 16px !important;
    border-top: 0 !important;
  }

  /* Match the pill's left offset to .em-item-info's mobile padding-left
     (16px here vs 22px on desktop) so it lines up with the title below it. */
  body.page-id-82611 #brxe-oaibmj .em-item-taxonomy.em-event-categories {
    left: 16px !important;
  }

  /* Hide the events sidebar widget on mobile only -- the event list
     (#brxe-ym0002) already has flex-grow:1 in the same row, so it fills the
     full width on its own once the sidebar is removed. */
  body.page-id-82611 #brxe-xwdxfr {
    display: none !important;
  }
}


.wp-block-events-manager__title {
  display: none !important;
}

/* Single event page (event-single.php): Events Manager's own the_content
   filter prepends a bare, unstyled "<h1>#_PAGETITLE</h1>" before our markup
   (controlled by the "dbem_title_html"/"dbem_disable_title_rewrites" EM
   setting, not by event-single.php itself) -- on top of the site's own
   global "Interior Page Hero" banner already showing the same title. Rather
   than show the event name a 3rd time in plain, unstyled text, visually hide
   this one and render our own styled ".msad-event-title" heading instead
   (matching the "News Title" pattern the Single News Bricks template already
   uses). Kept in the DOM (not display:none) so it still exists for
   accessibility/SEO as the page's one <h1>. */
body.single-event article.type-event > h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Two-column layout: main content + the same sidebar widget area used on the
   All Events page (#events_sidebar), reusing that page's own container
   styling (width, sticky position, card shadow) so the two pages read as one
   consistent design. */
.msad-event-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: var(--content-width, 1400px);
  margin: 0 auto;
  padding: 64px var(--gutter, 15px);
  gap: 25px;
}

.msad-event-main {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  background: var(--white, #fff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
  padding: clamp(24px, 4vw, 48px);
}

.msad-event-sidebar {
  flex: 0 0 360px;
  width: 360px;
  background: var(--white, #fff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 24px 28px;
  position: sticky;
  top: 55px;
  align-self: flex-start;
}

/* Each widget in the "events_sidebar" area is wrapped in
   "<li class="bricks-widget-wrapper">" (the sidebar's own before_widget/
   after_widget). On the All Events page, Bricks' own "sidebar" element
   wraps that whole dynamic_sidebar() call in a plain, unstyled <ul> for us;
   calling dynamic_sidebar() directly here means we have to supply that same
   <ul> wrapper (see event-single.php) and its list-style reset ourselves,
   otherwise the browser's default UA list-item marker shows a bullet next
   to each widget. */
.msad-sidebar-widgets,
.msad-sidebar-widgets li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .msad-event-layout {
    flex-direction: column;
  }

  /* Mirror the All Events page: the sidebar disappears entirely below this
     breakpoint rather than stacking under the main content. */
  .msad-event-sidebar {
    display: none !important;
  }
}

/* Category badge: same solid pill treatment as the All Events page's card
   badges and the News page's filter pills -- background follows the
   category's own color via "--category-color" (set inline per-link in
   functions.php), same fallback blue otherwise. */
.msad-event-badge {
  margin-bottom: 16px;
}

.msad-event-badge ul.event-categories {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.msad-event-badge .event-categories a {
  display: inline-block !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: var(--category-color, var(--news-accent, #2E7D32)) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
}

.msad-event-title {
  color: var(--text-heading, #444);
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 clamp(20px, 3vw, 28px);
  overflow-wrap: anywhere;
}

/* WHEN / WHERE row */
.msad-event-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: 24px;
}

.msad-event-when,
.msad-event-where {
  flex: 1 1 220px;
  min-width: 0;
}

.msad-event-when h3,
.msad-event-where h3 {
  color: var(--text-heading, #444);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

.msad-event-when .em-item-meta-line,
.msad-event-where .em-item-meta-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
}

.msad-event-when .em-item-meta-line .em-icon,
.msad-event-where .em-item-meta-line .em-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background-size: 22px;
  filter: none !important;
  margin-top: 2px;
}

.msad-event-when .em-icon-calendar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M424,96h-40v24c0,4.4-3.6,8-8,8h-16c-4.4,0-8-3.6-8-8V96H160v24c0,4.4-3.6,8-8,8h-16c-4.4,0-8-3.6-8-8V96H88c-22,0-40,18-40,40v272c0,22,18,40,40,40h336c22,0,40-18,40-40V136C464,114,446,96,424,96z M432,396c0,11-9,20-20,20H100c-11,0-20-9-20-20V216c0-4.4,3.6-8,8-8h336c4.4,0,8,3.6,8,8V396z'/%3E%3Cpath d='M160,72c0-4.4-3.6-8-8-8h-16c-4.4,0-8,3.6-8,8v24h32V72z'/%3E%3Cpath d='M384,72c0-4.4-3.6-8-8-8h-16c-4.4,0-8,3.6-8,8v24h32V72z'/%3E%3C/svg%3E") !important;
}

.msad-event-when .em-icon-clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M255.8,48C141,48,48,141.2,48,256s93,208,207.8,208c115,0,208.2-93.2,208.2-208S370.8,48,255.8,48z M256,422.4c-91.9,0-166.4-74.5-166.4-166.4S164.1,89.6,256,89.6S422.4,164.1,422.4,256S347.9,422.4,256,422.4z'/%3E%3Cpath d='M266.4,152h-31.2v124.8l109.2,65.5l15.6-25.6l-93.6-55.5V152z'/%3E%3C/svg%3E") !important;
}

.msad-event-where .em-icon-location,
.msad-event-where .em-icon-at {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b2d59'%3E%3Cpath d='M256,48c-79.5,0-144,59.9-144,133.7c0,104,144,282.3,144,282.3s144-178.3,144-282.3C400,107.9,335.5,48,256,48z M256,238.9c-25.9,0-46.9-21-46.9-46.9s21-46.9,46.9-46.9s46.9,21,46.9,46.9S281.9,238.9,256,238.9z'/%3E%3C/svg%3E") !important;
}

.msad-event-where .em-item-meta-line a {
  font-style: normal;
}

/* Add to calendar button, own row below WHEN/WHERE */
.msad-event-addtocal {
  margin-bottom: clamp(24px, 4vw, 36px);
}

/* Full-width flyer image (not floated beside text) */
.msad-event-image {
  width: 100%;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.msad-event-image a {
  display: block;
  cursor: zoom-in;
}

.msad-event-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
}

.msad-event-tags {
  margin-bottom: 20px;
}

.msad-event-content {
  color: var(--text-body, #555);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msad-event-content p {
  margin: 0 0 1.25em;
}

/* Single event page only: the plugin's own nested-list rule
   (".em.pixelbones ol ol/ol ul/ul ol/ul ul") adds a 10px top margin before
   every nested list inside the event description -- drop just that top
   gap here, higher specificity than the plugin's own (0,2,2) via the
   "body.single-event" prefix so it reliably wins. */
body.single-event .em.pixelbones ol ol,
body.single-event .em.pixelbones ol ul,
body.single-event .em.pixelbones ul ol,
body.single-event .em.pixelbones ul ul {
  margin: 0px 0 30px 0px !important;
}

.msad-event-content a {
  color: var(--brand-primary, #1b2d59);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.msad-event-content a:hover {
  color: var(--brand-secondary, #2E7D32);
}

.msad-event-bookings {
  margin-top: clamp(28px, 4vw, 42px);
  padding-top: 20px;
  border-top: 1px solid var(--border-default, #dee2e6);
}

/* Footer row: mirrors the News single template's Footer Row (divider +
   "Back to News" + Share Links, all centered). This page isn't Bricks-
   rendered, so it's hand-rolled to match.
   NOTE: Events Manager's own theme CSS ships ".em.pixelbones a{color:var(
   --accent-color)!important}" (see plugins/events-manager/includes/css/
   events-manager.min.css). That selector is 2 classes + 1 element (0,2,1)
   specificity -- higher than a plain class selector like ".msad-event-back"
   (0,1,0) or ".msad-event-share li a" (0,1,2) even WITH !important, since
   !important ties are broken by specificity first, not source order. Using
   #id selectors here (specificity (1,0,0)+) is what actually wins, not the
   !important alone -- keep !important too as a second line of defense. */
.msad-event-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(28px, 4vw, 42px);
  padding-top: 20px;
  border-top: 1px solid var(--border-default, #dee2e6);
}

#msad-event-back {
  color: var(--brand-primary, #1b2d59) !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  padding-bottom: 47px;
}

#msad-event-back:hover {
  color: var(--brand-secondary, #2E7D32) !important;
}

/* Facebook = circular brand-primary badge with a centered white "f"
   (font-icon glyph sits ~4px high in its own box, hence the ::before
   nudge); X = bare brand-primary glyph, no badge. */
#msad-event-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
}

#msad-event-share li {
  list-style: none;
}

#msad-event-share li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-heading, #444) !important;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}

#msad-event-share li span {
  font-size: 18.2px;
  white-space: nowrap;
}

#msad-event-share li:first-child .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-primary, #1b2d59) !important;
  color: var(--white, #fff) !important;
  font-size: 22px;
  position: relative;
  overflow: hidden;
}

#msad-event-share li:first-child .icon::before {
  position: relative;
  top: 4px;
}

#msad-event-share li:last-child .icon {
  color: var(--brand-primary, #1b2d59) !important;
  font-size: 22px;
}

#msad-event-share li a:hover span {
  color: var(--brand-secondary, #2E7D32) !important;
}

#msad-event-share li:first-child a:hover .icon {
  background: var(--brand-secondary, #2E7D32) !important;
}

#msad-event-share li:last-child a:hover .icon {
  color: var(--brand-secondary, #2E7D32) !important;
}

/* Category archive (category-single.php override): same card design as the
   homepage's "Upcoming Events" grid (Bricks query loop), hand-rolled here
   since this page isn't Bricks-rendered -- see functions.php's docblock on
   the homepage's #brxe-x00qbv element for why colors/pill background use
   the category's own "--category-color", and why date/time come straight
   from EM_Event::output_dates()/output_times() rather than cached postmeta.

   NOTE: Events Manager's own theme CSS ships ".em.pixelbones a{color:var(
   --accent-color)!important}" (2 classes + 1 element = (0,2,1) specificity),
   which beats a plain ".msad-cat-card-title a{color:...}" rule even WITH
   !important, since !important ties are broken by specificity, not source
   order (same issue already solved on the single event page's share row --
   see #msad-event-share above). Compounding the selector with the card's
   own class (".msad-cat-card .msad-cat-card-title a") matches that same
   (0,2,1) specificity, and since this stylesheet loads after Events
   Manager's own, the tie goes to us. */
.msad-cat-wrap {
  width: 100%;
  max-width: var(--content-width, 1400px);
  margin: 0 auto;
  padding: 48px var(--gutter, 15px);
}

.msad-cat-empty {
  color: var(--text-body, #555);
}

.msad-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

@media (max-width: 991px) {
  .msad-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 478px) {
  .msad-cat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.msad-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white, #fff);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .18);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.msad-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .22);
}

.msad-cat-card .msad-cat-card-image {
  display: block !important;
  width: 100% !important;
  height: 340px !important;
  flex-shrink: 0;
  overflow: hidden;
}

.msad-cat-card .msad-cat-card-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
}

.msad-cat-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--brand-primary, #1b2d59);
  padding: 18px 16px 20px;
  border-top: 5px solid var(--brand-secondary, #2E7D32);
}

.msad-cat-card-title {
  margin: 0 0 10px;
}

.msad-cat-card .msad-cat-card-title a {
  color: var(--white, #fff) !important;
  font-family: "Heebo", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msad-cat-card .msad-cat-card-title a:hover {
  text-decoration: underline;
}

.msad-cat-card-row {
  display: flex;
  align-items: flex-start;
  color: var(--white, #fff) !important;
}

.msad-cat-card-row:first-of-type {
  margin-bottom: 8px;
}

.msad-cat-card-row + .msad-cat-card-row {
  margin-bottom: 14px;
}

.msad-cat-card-row i {
  font-size: 19px;
  margin-right: 10px;
}

.msad-cat-card-row span {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.msad-cat-card a.msad-cat-card-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--category-color, var(--brand-secondary, #2E7D32)) !important;
  color: var(--white, #fff) !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
}

.msad-cat-card a.msad-cat-card-pill:hover {
  color: var(--white, #fff) !important;
  text-decoration: none;
}

.msad-cat-pagination {
  display: flex;
  align-items: center;
  margin-top: 32px;
}

/* Same pill-button look as the site's "View All Events"/"View All News"
   buttons (background/radius/padding/font all match #brxe-tukuvl). Both
   "Newer" and "Older" get it; "Older" always sits on the far right via
   margin-left:auto, whether or not "Newer" is present (only shows once
   you're past page 1) -- plain justify-content:space-between would instead
   left-align a lone "Older" link on page 1. */
.msad-cat-wrap a.msad-cat-pagination-btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-primary, #1b2d59) !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white, #fff) !important;
  text-decoration: none !important;
}

.msad-cat-wrap a.msad-cat-pagination-btn:hover {
  background-color: var(--brand-secondary, #2E7D32) !important;
}

.msad-cat-wrap a.msad-cat-pagination-btn--next {
  margin-left: auto;
}