/* ================================================================
   KA EVENTS: all styles
   Part 1: the calendar page (moved from the WPCode CSS snippet)
   Part 2: sponsor spots and promos (calendar and event page)
   Part 3: the single event page
   Part 4: "More at this location" rows

   Everything targets KA Events' own classes, so the rest of the site
   isn't affected. Where a class is repeated (".ka-v2.ka-v2") it's on
   purpose: it makes the rule strong enough to beat Events Manager's
   or the theme's own rules.
   ================================================================ */


/* ================================================================
   PART 1: THE CALENDAR PAGE
   Events Manager's grouped list (.em-events-list-grouped) holds each
   day's heading as a plain <h2>, followed by that day's cards inside
   <div class="ka-v2">.
   ================================================================ */

/* When the page jumps to the filter bar after a filter is used, leave
   a little space above it. If your theme's header stays pinned at the
   top while scrolling, raise this to the header's height plus 12px. */
#ka-events {
  scroll-margin-top: 16px;
}


/* ---------- The overall list ---------- */

/* Turn off Events Manager's own grid and gaps on the list that holds
   our cards. ":has(> .ka-v2)" means "only the list whose direct
   children include our card groups", so other lists are left alone. */
.em:has(> .ka-v2) {
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 820px;
  margin: 0 auto;
}

/* Hide stray empty tags WordPress or Events Manager may add */
.ka-v2 p:empty,
.ka-v2 br {
  display: none;
}


/* ---------- Day heading: light blue band with a calendar icon ---------- */

/* The calendar icon is a tiny drawing stored right in the CSS
   (a "data URI"), so there's no image file to manage */
.em.em-events-list-grouped:has(> .ka-v2) > h2 {
  margin: 22px 0 10px !important;
  padding: 11px 14px 11px 44px !important;
  background: #E1F2F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat 14px center / 20px 20px !important;
  border-radius: 12px;
  color: #003e51 !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.em.em-events-list-grouped:has(> .ka-v2) > h2:first-child {
  margin-top: 0 !important;
}


/* ---------- Each day's group of cards ---------- */

/* Phones: one column, 10px between cards */
.ka-v2.ka-v2 {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ---------- Card: icon | text ---------- */

.ka-v2.ka-v2 .ka-card {
  display: flex;
  gap: 12px;
  margin: 0 !important;
  padding: 12px;
  background: #fff;
  border: 1px solid #E0E9EC;
  border-radius: 12px;
  min-width: 0;
}


/* ---------- Icon tile ---------- */

.ka-v2 .ka-card-icon {
  flex-shrink: 0;
}

/* The tile. With #_KAICON, its color comes from the KA Events
   screen; the light blue here is only a backup. */
.ka-v2 .ka-i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #E6F4FA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* For the older template that prints every icon: only the first one
   shows. #_KAICON prints just one, so this does nothing there. */
.ka-v2 .ka-card-icon .ka-i:not(:first-child) {
  display: none;
}

/* WordPress swaps emoji for small images; size them to the tile */
.ka-v2 .ka-i img.emoji {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}


/* ---------- Text ---------- */

.ka-v2 .ka-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Start time in teal, then "· Free" in gray-blue */
.ka-v2 .ka-card-kicker {
  font-size: 13px;
  font-weight: 800;
  color: #1E7F72;
}

.ka-v2 .ka-free {
  color: #3D6B7A;
  font-weight: 700;
}

/* Title. !important beats the theme's sky-blue link color. */
.ka-v2 .ka-card a.ka-card-title {
  color: #003e51 !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.ka-v2 .ka-card a.ka-card-title:hover {
  text-decoration: underline !important;
}

/* Location: one line, cut off with "…" if it's too long */
.ka-v2 .ka-card-where {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  color: #3D6B7A;
}

.ka-v2 .ka-card-where > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Little map pin, in sky blue */
.ka-v2 .ka-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: #5bc2e7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Description: at most two lines, then "…" */
.ka-v2 .ka-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  color: #4A6670;
}

.ka-v2.ka-v2 .ka-card-desc,
.ka-v2.ka-v2 .ka-card-desc p {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

.ka-v2.ka-v2 .ka-card-desc p {
  display: inline;
  margin: 0 !important;
}

.ka-v2 .ka-card-desc img {
  display: none;
}


/* ---------- Featured cards in the calendar ---------- */

.ka-v2.ka-v2 .ka-card--featured {
  background: #FFF6EF;
  border: 2px solid #fc4c02;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(252, 76, 2, 0.12);
}

/* The photo replaces the icon tile on featured events */
.ka-v2 .ka-card--featured:has(.ka-card-photo) .ka-card-icon {
  display: none;
}

.ka-v2 .ka-card--featured .ka-card-kicker {
  color: #C43A00;
}

.ka-v2 .ka-card--featured a.ka-card-title {
  font-size: 19px;
  line-height: 1.2;
}

.ka-v2 .ka-card--featured .ka-card-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Photos: hidden on regular cards even if an image exists */
.ka-v2 .ka-card-photo {
  display: none;
}

.ka-v2 .ka-card--featured .ka-card-photo {
  display: block;
  position: relative;
  aspect-ratio: 740 / 400;
  border-radius: 10px;
  overflow: hidden;
  background: #FFE4CF;
}

.ka-v2 .ka-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "★ Featured" badge, slightly darker than the logo orange so the
   small white text stays readable */
.ka-v2 .ka-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #C43A00;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Phones: photo across the top, then the text */
.ka-v2.ka-v2 .ka-card--featured:has(.ka-card-photo) {
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.ka-v2 .ka-card--featured:has(.ka-card-photo) .ka-card-text {
  padding: 0 4px 4px;
}


/* ---------- Desktop: two cards per row ---------- */

@media (min-width: 700px) {
  .ka-v2.ka-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Featured events stretch across both columns */
  .ka-v2.ka-v2 > .ka-card--featured {
    grid-column: 1 / -1;
  }

  .em.em-events-list-grouped:has(> .ka-v2) > h2 {
    font-size: 20px !important;
  }

  /* Featured on desktop: photo on the left at 250px, text beside it */
  .ka-v2.ka-v2 .ka-card--featured:has(.ka-card-photo) {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px;
  }

  .ka-v2 .ka-card--featured .ka-card-photo {
    width: 250px;
    flex-shrink: 0;
  }

  .ka-v2 .ka-card--featured a.ka-card-title {
    font-size: 21px;
  }
}


/* ---------- Date on cards ---------- */

/* Shortcode lists (no day headings): the date in navy */
.ka-v2 .ka-card-date {
  color: #003e51;
}

/* Main events page: the day heading already shows the date */
.em-events-list-grouped .ka-v2 .ka-card-date {
  display: none;
}


/* ---------- Filter bar ---------- */

.ka-filters-wrap {
  max-width: 820px;
  margin: 0 auto 16px;
}

.ka-filters {
  display: flex;
  gap: 8px;
  padding: 2px 0 6px;
  overflow-x: auto;
}

/* All the buttons share one pill look. Some are links, one is a real
   button and two are dropdowns, so this resets the theme's styles. */
.ka-filters .ka-chip.ka-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #CFE3EA;
  border-radius: 999px;
  box-shadow: none;
  color: #003e51 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

.ka-filters .ka-chip.ka-chip:hover {
  border-color: #5bc2e7;
}

/* A filter that's on, or "Pick dates" while open: navy, white text */
.ka-filters .ka-chip.ka-chip.is-active,
.ka-filters .ka-chip.ka-chip.is-open {
  background: #003e51;
  border-color: #003e51;
  color: #fff !important;
}

/* The clear buttons: light blue, like the day headings */
.ka-filters .ka-chip.ka-chip.ka-chip--clear {
  background: #E1F2F9;
  border-color: #E1F2F9;
}

.ka-chip-x {
  font-size: 18px;
  line-height: 1;
}

/* "currentColor" = the button's text color, so it turns white too */
.ka-chip-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- The date panel ---------- */

.ka-date-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  background: #E1F2F9;
  border-radius: 12px;
}

/* "display: flex" above would otherwise override "hidden" */
.ka-date-panel[hidden] {
  display: none;
}

.ka-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  margin: 0;
  color: #003e51;
  font-size: 13px;
  font-weight: 800;
}

.ka-date-field em {
  color: #3D6B7A;
  font-style: normal;
  font-weight: 600;
}

/* 16px text matters: anything smaller makes iPhones zoom in */
.ka-date-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border: 1.5px solid #CFE3EA;
  border-radius: 8px;
  color: #003e51;
  font-family: inherit;
  font-size: 16px;
}

.ka-date-panel .ka-date-go.ka-date-go {
  flex: 1 1 140px;
  min-height: 42px;
  margin: 0;
  padding: 10px 16px;
  background: #C43A00;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
  cursor: pointer;
}

.ka-date-panel .ka-date-go.ka-date-go:hover {
  background: #FC4C02;
}


/* ---------- Area and Category dropdowns ---------- */

/* Turn off the browser's dropdown look, then style it like the other
   pills. The down arrow is a drawing stored in the CSS. */
.ka-filters select.ka-select.ka-select {
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  height: auto;
  padding-right: 32px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003e51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  font-size: 14px;
}

/* A dropdown with a choice picked: navy, with a white arrow. The
   repeat, position and size are restated on purpose: the "active"
   rule above resets them, and without these the arrow tiles. */
.ka-filters select.ka-select.ka-select.is-active {
  background-color: #003e51;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  color: #fff !important;
}

/* The open list: always dark text on white */
.ka-filters select.ka-select option {
  background: #fff;
  color: #003e51;
}

/* Touch devices: 16px text, so iPhones don't zoom on the dropdowns,
   with a little less padding around it */
@media (pointer: coarse) {
  .ka-filters .ka-chip.ka-chip,
  .ka-filters select.ka-select.ka-select {
    font-size: 16px;
  }

  .ka-filters .ka-chip.ka-chip {
    padding: 7px 12px;
  }

  .ka-filters select.ka-select.ka-select {
    padding-right: 30px;
    background-position: right 10px center;
  }
}

/* Phones: wrap onto a second line instead of scrolling sideways */
@media (max-width: 699px) {
  .ka-filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}


/* ---------- Quick-pick tiles above the calendar ---------- */

.ka-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 820px;
  margin: 0 auto 20px;
}

a.ka-tile.ka-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #E1F2F9;
  color: #003e51 !important;
  text-decoration: none !important;
}

a.ka-tile.ka-tile:hover {
  box-shadow: 0 0 0 2px #5bc2e7;
}

.ka-tile-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ka-tile-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #003e51;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ka-tile-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}

/* The short description: hidden on phones */
.ka-tile-sub {
  display: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #3D6B7A;
}

/* This weekend: navy with a gold icon square */
a.ka-tile.ka-tile--weekend {
  background: #003e51;
  color: #fff !important;
}
.ka-tile--weekend .ka-tile-icon { background: #FBD872; }
.ka-tile--weekend .ka-tile-sub { color: #CFE3EA; }

a.ka-tile.ka-tile--weekend.is-active {
  box-shadow: 0 0 0 3px #5bc2e7;
}

/* KA Picks: peach with an orange star */
a.ka-tile.ka-tile--picks { background: #FFF6EF; }
.ka-tile--picks .ka-tile-icon { background: #FFE4CF; }
.ka-tile--picks .ka-tile-icon svg { stroke: #C43A00; }

/* Seasonal tile: soft yellow */
a.ka-tile.ka-tile--season { background: #FFF3C4; }

/* "presented by" on the This weekend tile (desktop only) */
.ka-tile-sponsor {
  display: none;
  margin-top: auto;
  color: #CFE3EA;
  font-size: 11px;
  font-weight: 700;
}

.ka-tile-sponsor strong {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff;
  color: #003e51;
  font-weight: 800;
}

@media (min-width: 700px) {
  .ka-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  a.ka-tile.ka-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 120px;
    padding: 14px;
    border-radius: 14px;
  }

  .ka-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .ka-tile-icon svg {
    width: 22px;
    height: 22px;
  }

  .ka-tile-title {
    font-size: 19px;
  }

  .ka-tile-sub,
  .ka-tile-sponsor {
    display: block;
  }
}


/* ---------- Intro paragraph ---------- */

p.ka-events-intro.ka-events-intro {
  max-width: 820px;
  margin: 0 auto 24px !important;
}

@media (max-width: 699px) {
  p.ka-events-intro.ka-events-intro {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}


/* ---------- "About this calendar" below the calendar ---------- */

.ka-events-about {
  max-width: 820px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 3px solid #fc4c02;
}

.ka-events-about h2.wp-block-heading {
  margin: 0 0 16px !important;
  color: #003e51 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Desktop: the blue box on the left, a large Golly on the right */
.ka-events-about .wp-block-media-text.wp-block-media-text {
  grid-template-columns: minmax(0, 1fr) 260px !important;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px !important;
  background: none;
}

.ka-events-about .wp-block-media-text.wp-block-media-text .wp-block-media-text__content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 20px 22px !important;
  background: #E1F2F9;
  border-radius: 16px;
}

.ka-events-about .wp-block-media-text.wp-block-media-text .wp-block-media-text__media {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.ka-events-about .wp-block-media-text__media img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}

.ka-events-about .wp-block-media-text__content p {
  margin: 0 0 8px !important;
  color: #003e51 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.ka-events-about .wp-block-media-text__content ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.ka-events-about .wp-block-media-text__content li {
  margin: 0 0 2px !important;
  color: #003e51 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.ka-events-about .wp-block-media-text__content .wp-block-buttons {
  margin: 14px 0 0 !important;
  justify-content: flex-start;
}

.ka-events-about .wp-block-button__link.wp-block-button__link {
  padding: 9px 18px !important;
  background: #003e51 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.ka-events-about .wp-block-button__link.wp-block-button__link:hover {
  background: #124f6d !important;
}

/* Disclaimer in a light gray box. The theme sometimes adds an extra
   box inside Group blocks, so both cases are covered. */
.ka-events-about.ka-events-about > p,
.ka-events-about.ka-events-about > .wp-block-group__inner-container > p {
  margin: 0 !important;
  padding: 12px 14px;
  background: #F4F8FA;
  border-radius: 12px;
  color: #3D6B7A !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.ka-events-about.ka-events-about > p strong,
.ka-events-about.ka-events-about > .wp-block-group__inner-container > p strong {
  font-weight: 600;
}

/* Phones: Golly centered on top, the blue box below */
@media (max-width: 699px) {
  .ka-events-about .wp-block-media-text.wp-block-media-text {
    grid-template-columns: 100% !important;
    gap: 12px;
  }

  .ka-events-about .wp-block-media-text.wp-block-media-text .wp-block-media-text__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .ka-events-about .wp-block-media-text.wp-block-media-text .wp-block-media-text__content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 16px 18px !important;
  }

  .ka-events-about .wp-block-media-text__media img {
    max-width: 180px;
  }

  .ka-events-about h2.wp-block-heading {
    font-size: 22px !important;
  }
}


/* ================================================================
   PART 2: SPONSOR SPOTS AND PROMOS
   ================================================================ */

/* ---------- The presenting sponsor box (calendar and event page) ---------- */

/* On the calendar it sits in the same 820px column as everything else */
.ka-presenting-wrap {
  max-width: 820px;
  margin: -8px auto 20px;
}

/* Gold, text only. The text takes the room it needs; the button sits
   to its right on desktop and drops below it on phones. */
.ka-presenting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 16px 20px;
  background: #FFF6DA;
  border: 1px solid #FBD872;
  border-radius: 14px;
  color: #003e51;
}

.ka-presenting-text {
  flex: 999 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ka-presenting-label {
  color: #7A5B00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ka-presenting-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.ka-presenting-message {
  font-size: 15.5px;
  line-height: 1.45;
}

a.ka-presenting-button.ka-presenting-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: #fff;
  border: 2px solid #E3C766;
  border-radius: 999px;
  color: #003e51 !important;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
}

a.ka-presenting-button.ka-presenting-button:hover {
  border-color: #003e51;
}


/* ---------- The sponsor card ---------- */

/* Holders for the card above the calendar and in the day slots */
.ka-filter-sponsor,
.ka-day-slot {
  max-width: 820px;
  margin: 0 auto 18px;
}

.ka-day-slot {
  margin-top: 16px;
  margin-bottom: 6px;
}

/* Gold border, cream background */
.ka-sponsor-card {
  overflow: hidden;
  background: #FFF6DA;
  border: 2px solid #FBD872;
  border-radius: 14px;
}

/* Text-only cards (no photo, no logo): light blue, so they don't
   look like a second presenting sponsor */
.ka-sponsor-card.ka-sponsor-card--plain {
  background: #F2F9FC;
  border: 1px solid #D5EAF2;
}

.ka-sponsor-card--plain .ka-sponsor-label,
.ka-sponsor-card--plain .ka-sponsor-tag {
  color: #3D6B7A;
}

.ka-sponsor-card--plain .ka-sponsor-name {
  font-size: 18px;
}

/* The photo: 16:9, filling its space without stretching */
.ka-sponsor-photo {
  display: block;
  aspect-ratio: 16 / 9;
  background: #F4E7B8;
}

.ka-sponsor-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ka-sponsor-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.ka-sponsor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ka-sponsor-label,
.ka-sponsor-tag {
  color: #7A5B00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ka-sponsor-tag {
  font-size: 10px;
}

.ka-sponsor-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ka-sponsor-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

.ka-sponsor-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ka-sponsor-name {
  color: #003e51;
  font-size: 15px;
  font-weight: 800;
}

.ka-sponsor-offer {
  color: #003e51;
  font-size: 13.5px;
  line-height: 1.4;
}

a.ka-sponsor-button.ka-sponsor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #003e51;
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
}

a.ka-sponsor-button.ka-sponsor-button:hover {
  background: #124f6d;
}

/* Desktop: photo on the left, details on the right */
@media (min-width: 700px) {
  .ka-sponsor-card:has(.ka-sponsor-photo) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .ka-sponsor-card .ka-sponsor-photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 170px;
  }

  a.ka-sponsor-button.ka-sponsor-button {
    align-self: flex-start;
  }
}


/* ---------- The featured row above the calendar ---------- */

.ka-feature-row {
  max-width: 820px;
  margin: 0 auto 20px;
}

.ka-feature-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ka-feature-row h2.ka-feature-row-title {
  margin: 0 !important;
  color: #003e51 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* The ‹ › buttons: only shown on desktop, and only when the row has
   more cards than fit */
.ka-feature-row-arrows {
  display: none;
  gap: 6px;
}

.ka-feature-row .ka-feature-arrow.ka-feature-arrow {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1.5px solid #CFE3EA;
  border-radius: 999px;
  color: #003e51;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ka-feature-row .ka-feature-arrow.ka-feature-arrow:hover {
  border-color: #5bc2e7;
}

/* The cards scroll sideways. On phones, people swipe. */
.ka-feature-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ka-feature-track::-webkit-scrollbar {
  display: none;
}

/* One small text-only featured card. Phones: about 1.5 cards show,
   so it's clear the row can be swiped. */
a.ka-feature.ka-feature {
  flex: 0 0 240px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 10px 12px;
  background: #FFF6EF;
  border: 2px solid #fc4c02;
  border-radius: 12px;
  color: #003e51 !important;
  text-decoration: none !important;
  scroll-snap-align: start;
}

a.ka-feature.ka-feature:hover {
  box-shadow: 0 4px 14px rgba(252, 76, 2, 0.15);
}

.ka-feature-when {
  overflow: hidden;
  color: #C43A00;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Titles get up to two lines before "…" */
.ka-feature-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
}

.ka-feature-where {
  overflow: hidden;
  color: #3D6B7A;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 700px) {
  .ka-feature-row.has-overflow .ka-feature-row-arrows {
    display: flex;
  }

  /* Desktop: three cards fit across */
  a.ka-feature.ka-feature {
    flex-basis: calc((100% - 20px) / 3);
  }
}


/* ---------- Featured event in an end-of-day slot ---------- */

a.ka-feature-slot.ka-feature-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 16px;
  background: #FFF6EF;
  border: 2px solid #fc4c02;
  border-radius: 14px;
  color: #003e51 !important;
  text-decoration: none !important;
}

.ka-feature-slot-text {
  flex: 999 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ka-feature-slot-label {
  color: #C43A00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ka-feature-slot-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.ka-feature-slot-where {
  color: #3D6B7A;
  font-size: 14px;
}

.ka-feature-slot-go {
  flex: 0 0 auto;
  color: #C43A00;
  font-size: 15px;
  font-weight: 800;
}


/* ================================================================
   PART 3: THE SINGLE EVENT PAGE
   ================================================================ */

.ka-event {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #003e51;
}

/* WordPress can add empty paragraphs and line breaks between the
   template's lines. Hide them so they don't add uneven gaps. */
.ka-event > p:empty,
.ka-event-head p:empty,
.ka-event-head br {
  display: none;
}

.ka-event-head p {
  margin: 0;
}

/* Sponsor spots take up no space when there's no sponsor */
.ka-spot-presenting:empty,
.ka-spot-sponsor:empty {
  display: none;
}

.ka-event .ka-sponsor-card {
  margin: 0;
}


/* ---------- The event header block ---------- */

.ka-event-head {
  background: #fff;
  border: 1px solid #E0E9EC;
  border-radius: 16px;
  overflow: hidden;
}

.ka-event--featured .ka-event-head {
  background: #FFF6EF;
  border: 2px solid #fc4c02;
  box-shadow: 0 4px 14px rgba(252, 76, 2, 0.12);
}

/* Photos only show on featured events, matching the calendar */
.ka-event-photo {
  display: none;
}

.ka-event--featured .ka-event-photo {
  display: block;
  position: relative;
  aspect-ratio: 740 / 400;
  background: #FFE4CF;
}

.ka-event-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ka-event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #C43A00;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.ka-event-head-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}


/* ---------- Icon tile + title ---------- */

.ka-event-titlerow {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The theme's page title, once the script moves it in here.
   Its size is set in Part 6. */
.ka-event-titlerow h1 {
  margin: 0 !important;
  color: #003e51 !important;
}

.ka-event-icon {
  flex-shrink: 0;
}

.ka-event-icon .ka-i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #E6F4FA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.ka-event-icon .ka-i img.emoji {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}


/* ---------- Date band and location ---------- */

.ka-event-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: #124f6d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ka-event-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #E1F2F9;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.ka-event-when .ka-free {
  color: #1E7F72;
}

.ka-event-where {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
}

.ka-event-where .ka-event-svg {
  margin-top: 1px;
}

.ka-event-venue,
.ka-event-venue a {
  color: #003e51 !important;
  font-weight: 800;
}

.ka-event-address {
  color: #3D6B7A;
}


/* ---------- Add to Calendar and the heart ---------- */

.ka-event-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* Events Manager's Add to Calendar button: the page's one orange
   button. Its menu of calendar links keeps Events Manager's styling. */
.ka-event-actions button.em-event-add-to-calendar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 12px 24px;
  background: #C43A00 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  cursor: pointer;
}

.ka-event-actions button.em-event-add-to-calendar:hover {
  background: #fc4c02 !important;
}

/* Events Manager's own little calendar icon: white, to match the text */
.ka-event-actions button.em-event-add-to-calendar .em-icon {
  filter: brightness(0) invert(1);
}

/* Events Manager shows the calendar links in a pop-up menu. Until its
   script moves them into that menu, keep them hidden so they don't
   flash on the page as a list of plain links. */
.ka-event-actions .em-event-add-to-calendar-content {
  display: none;
}

/* The heart: hidden until My Plan launches */
.ka-save[hidden] {
  display: none !important;
}

.ka-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  background: #fff;
  border: 2px solid #CFE3EA;
  border-radius: 999px;
  color: #003e51;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.ka-save .ka-event-svg {
  stroke: #fc4c02;
}


/* ---------- Description and section headings ---------- */

.ka-event-content {
  font-size: 18px;
  line-height: 1.65;
}

.ka-event h2.ka-event-h2 {
  margin: 0 0 12px !important;
  color: #003e51 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ka-event-picks[hidden] {
  display: none;
}

/* "More featured events": two small cards side by side on desktop */
.ka-mini-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ka-mini-feature-list a.ka-feature.ka-feature {
  flex-basis: auto;
}

@media (min-width: 700px) {
  .ka-mini-feature-list {
    grid-template-columns: 1fr 1fr;
  }

  .ka-event-head-body {
    padding: 24px 28px 28px;
  }


  .ka-event-icon .ka-i {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }
}


/* ================================================================
   PART 4: "MORE AT THIS LOCATION" ROWS
   These also show on each location's own page.
   ================================================================ */

/* The rows are separated by 1px lines: the list's background is the
   line color, with a 1px gap between white rows. Rows the script
   hides leave no gap, so no doubled lines. */
.ka-mini-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #E0E9EC;
  border: 1px solid #E0E9EC;
  border-radius: 14px;
  overflow: hidden;
}

/* In case WordPress wraps rows in paragraphs or adds line breaks */
.ka-mini-list > p {
  display: contents;
}

.ka-mini-list br {
  display: none;
}

a.ka-mini.ka-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  background: #fff;
  color: #003e51 !important;
  text-decoration: none !important;
}

a.ka-mini.ka-mini:hover {
  background: #F4F8FA;
}

.ka-mini-date {
  flex: 0 0 46px;
  padding: 4px 0;
  background: #E1F2F9;
  border-radius: 10px;
  text-align: center;
}

.ka-mini-mon {
  display: block;
  color: #124f6d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ka-mini-day {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.ka-mini-text {
  flex: 1;
  min-width: 0;
}

.ka-mini-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.ka-mini-when {
  display: block;
  color: #3D6B7A;
  font-size: 13.5px;
}

.ka-mini-arrow {
  color: #3D6B7A;
  font-size: 20px;
}

.ka-event-seeall {
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
}


/* ================================================================
   PART 5: WINNING AGAINST EVENTS MANAGER'S OWN STYLES
   Events Manager wraps event output in its "Pixelbones" styles
   (class "em pixelbones"), which restyle every button and link
   inside it, often with !important. On the live sites that turned
   Add to Calendar into a white, all-caps button and made the rows
   and cards below the description lose their colors.

   A CSS rule wins when it's more specific, so these repeat the
   plugin's classes ("...-calendar.em-event-add-to-calendar") and
   start from .ka-event. That makes them stronger than Events
   Manager's rules without touching anything outside our blocks.
   The colors are also set on the text inside each link, so nothing
   can pass its own link color down to them.
   ================================================================ */

/* ---------- Add to Calendar: the orange pill ---------- */

.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar,
.ka-event .ka-event-actions .em-event-add-to-calendar.em-event-add-to-calendar > button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 24px !important;
  background: #C43A00 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar:hover,
.ka-event .ka-event-actions .em-event-add-to-calendar.em-event-add-to-calendar > button:hover {
  background: #fc4c02 !important;
}

/* The little arrow Events Manager draws after the words: white */
.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar::after,
.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar .em-icon {
  filter: brightness(0) invert(1);
}


/* ---------- "More at this location" rows ---------- */

.ka-event .ka-mini-list a.ka-mini.ka-mini,
.ka-mini-list.ka-mini-list a.ka-mini.ka-mini {
  background: #fff !important;
  color: #003e51 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ka-event .ka-mini-list a.ka-mini.ka-mini:hover,
.ka-mini-list.ka-mini-list a.ka-mini.ka-mini:hover {
  background: #F4F8FA !important;
}

.ka-mini-list.ka-mini-list .ka-mini-title,
.ka-mini-list.ka-mini-list .ka-mini-day {
  color: #003e51 !important;
}

.ka-mini-list.ka-mini-list .ka-mini-mon {
  color: #124f6d !important;
}

.ka-mini-list.ka-mini-list .ka-mini-when,
.ka-mini-list.ka-mini-list .ka-mini-arrow {
  color: #3D6B7A !important;
}


/* ---------- Small featured cards (event page and featured row) ---------- */

.ka-event a.ka-feature.ka-feature,
.ka-feature-row a.ka-feature.ka-feature {
  background: #FFF6EF !important;
  border: 2px solid #fc4c02 !important;
  border-radius: 12px !important;
  color: #003e51 !important;
  text-decoration: none !important;
}

.ka-event a.ka-feature.ka-feature .ka-feature-title,
.ka-feature-row a.ka-feature.ka-feature .ka-feature-title {
  color: #003e51 !important;
}

.ka-event a.ka-feature.ka-feature .ka-feature-when,
.ka-feature-row a.ka-feature.ka-feature .ka-feature-when {
  color: #C43A00 !important;
}

.ka-event a.ka-feature.ka-feature .ka-feature-where,
.ka-feature-row a.ka-feature.ka-feature .ka-feature-where {
  color: #3D6B7A !important;
}


/* ---------- Featured event in an end-of-day slot ---------- */

.ka-day-slot a.ka-feature-slot.ka-feature-slot {
  background: #FFF6EF !important;
  border: 2px solid #fc4c02 !important;
  color: #003e51 !important;
  text-decoration: none !important;
}

.ka-day-slot a.ka-feature-slot.ka-feature-slot .ka-feature-slot-title {
  color: #003e51 !important;
}

.ka-day-slot a.ka-feature-slot.ka-feature-slot .ka-feature-slot-where {
  color: #3D6B7A !important;
}


/* ---------- Sponsor buttons ---------- */

.ka-event a.ka-sponsor-button.ka-sponsor-button,
.ka-day-slot a.ka-sponsor-button.ka-sponsor-button,
.ka-filter-sponsor a.ka-sponsor-button.ka-sponsor-button {
  background: #003e51 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.ka-event a.ka-presenting-button.ka-presenting-button,
.ka-presenting-wrap a.ka-presenting-button.ka-presenting-button {
  background: #fff !important;
  color: #003e51 !important;
  text-decoration: none !important;
}


/* ================================================================
   PART 6: EVENT PAGE COVER BAND, CATEGORY CHIPS, GOOGLE MAPS
   ================================================================ */

/* ---------- The cover band (regular events) ---------- */

/* The band takes the event's icon color, which the template passes
   in as "--ka-cover" (from the KA Events screen). */
.ka-event-cover {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 18px;
  background: var(--ka-cover, #E6F4FA);
}

/* Featured events have the photo and peach card instead, so the band
   blends into the card and the icon keeps its own color */
.ka-event--featured .ka-event-cover {
  background: transparent;
  padding-bottom: 0;
}

/* On the colored band, the icon tile turns white with a soft shadow.
   (!important because #_KAICON sets the tile color right on the tile.) */
.ka-event:not(.ka-event--featured) .ka-event-cover .ka-event-icon .ka-i {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 62, 81, 0.10);
}

/* The title: a little smaller than before */
.ka-event .ka-event-titlerow h1 {
  font-size: 24px !important;
  line-height: 1.15 !important;
}

/* ---------- Date band on regular events: white with a light border ---------- */

.ka-event:not(.ka-event--featured) .ka-event-when {
  background: #fff;
  border: 1.5px solid #CFE3EA;
}


/* ---------- Category chips ---------- */

.ka-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ka-event-tags:empty {
  display: none;
}

/* Each chip is a link to that category on the calendar. Repeated
   classes so the theme's and Events Manager's link styles don't win. */
.ka-event .ka-event-tags a.ka-tag.ka-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
  padding: 4px 14px;
  background: #fff !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px;
  color: #003e51 !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
}

.ka-event .ka-event-tags a.ka-tag.ka-tag:hover {
  border-color: #5bc2e7 !important;
}

/* On the peach featured card, give the white chips an outline */
.ka-event--featured .ka-event-tags a.ka-tag.ka-tag {
  border-color: #FFD9C2 !important;
}


/* ---------- Open in Google Maps ---------- */

/* Phones: a text link under the address.
   Desktop: a white pill next to Add to Calendar.
   Both are in the template; CSS shows the right one. */
.ka-event a.ka-maps.ka-maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #004F71 !important;
  font-weight: 800;
  text-decoration: none !important;
}

.ka-event a.ka-maps.ka-maps .ka-event-svg {
  width: 16px;
  height: 16px;
}

.ka-event a.ka-maps--link.ka-maps--link {
  min-height: 40px;
  font-size: 15px;
}

.ka-event a.ka-maps--pill.ka-maps--pill {
  display: none;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 20px;
  background: #fff !important;
  border: 2px solid #CFE3EA !important;
  border-radius: 999px;
  color: #003e51 !important;
  font-size: 15px;
}

.ka-event a.ka-maps--pill.ka-maps--pill:hover {
  border-color: #5bc2e7 !important;
}

@media (min-width: 700px) {
  .ka-event-cover {
    padding: 26px 28px 22px;
  }

  .ka-event--featured .ka-event-cover {
    padding-bottom: 0;
  }

  .ka-event .ka-event-titlerow h1 {
    font-size: 30px !important;
  }

  .ka-event a.ka-maps--link.ka-maps--link {
    display: none;
  }

  .ka-event a.ka-maps--pill.ka-maps--pill {
    display: inline-flex;
  }
}

/* Date band: the calendar icon stays beside the text, even when the
   date wraps onto two lines on a phone */
.ka-event .ka-event-when {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ka-event .ka-event-when .ka-event-svg {
  margin-top: 1px;
}


/* ================================================================
   PART 7: HEADING FONT ON THE CALENDAR AND EVENT PAGES
   Only on pages whose <body> has "ka-heading-font", which the plugin
   adds to the calendar and single event pages when "Use Nunito for
   headings" is ticked on the KA Events screen. The site header,
   footer and every other page keep the theme's fonts.
   ================================================================ */

/* Headings in the page's main content: the page title, the event
   title, section headings and the calendar's day headings.
   ":where()" adds no strength to the rule, so the lighter weight for
   day headings below can still win. */
body.ka-heading-font :where(main, article, .site-main, .entry-content, #content) :is(h1, h2, h3),
body.ka-heading-font .ka-event :is(h1, h2, h3),
body.ka-heading-font .em-events-list-grouped:has(> .ka-v2) > h2,
body.ka-heading-font .ka-feature-row h2.ka-feature-row-title {
  font-family: 'Nunito', 'VAG Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Day headings and the featured row title: a step lighter, since
   they're smaller and repeat down the page */
body.ka-heading-font .em-events-list-grouped:has(> .ka-v2) > h2,
body.ka-heading-font .ka-feature-row h2.ka-feature-row-title {
  font-weight: 800 !important;
}


/* ================================================================
   PART 8: LIGHTER EVENT PAGE BUTTONS AND "‹ ALL EVENTS"
   ================================================================ */

/* "‹ All events" above the event */
.ka-event a.ka-event-back.ka-event-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: -10px;
  color: #004F71 !important;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
}

.ka-event a.ka-event-back.ka-event-back:hover {
  text-decoration: underline !important;
}

/* The buttons under the event: smaller and lighter. Add to Calendar
   keeps a hint of orange (soft peach with an orange outline) so it's
   still the first thing to tap, without shouting. */
.ka-event .ka-event-actions {
  gap: 8px;
}

.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar,
.ka-event .ka-event-actions .em-event-add-to-calendar.em-event-add-to-calendar > button {
  min-height: 40px !important;
  padding: 8px 16px !important;
  background: #FFF6EF !important;
  border: 1.5px solid #FC4C02 !important;
  color: #B83A00 !important;
  font-size: 14px !important;
}

.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar:hover,
.ka-event .ka-event-actions .em-event-add-to-calendar.em-event-add-to-calendar > button:hover {
  background: #FFE9DA !important;
}

/* Its little calendar icon and arrow: orange, to match the words */
.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar::after,
.ka-event .ka-event-actions button.em-event-add-to-calendar.em-event-add-to-calendar .em-icon {
  filter: none;
}

.ka-event a.ka-maps--pill.ka-maps--pill,
.ka-event button.ka-save.ka-save--page.ka-save--page {
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-width: 1.5px !important;
  font-size: 14px !important;
}