/*
 * DGA styling for The Events Calendar's default List view (/events/) and
 * single-event view (/event/slug/), checklist criterion #17 (Media Center:
 * Events). Content and markup come entirely from the plugin's own
 * templates (resources/views/tribe/ only overrides the V2 list templates --
 * the single-event view is pure vendor markup, no override exists) -- this
 * file only recolors/retypes the plugin's existing class names with DGA
 * tokens, the same conservative approach as dga-table.css and dga-faq.css.
 * The "no upcoming events" notice already has its own DGA treatment in
 * dga-notification.css (.tribe-events-c-messages__message--notice) -- left
 * untouched here.
 */

/* ---- Search / filter bar ---- */
/* Tribe's own flex form has no gap, so the "Find Events" button sits flush
   against the field. Give the row a gap and center everything so the field
   and button share one baseline and never touch. */
.tribe-events-c-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: nowrap;
}
.tribe-events-c-search__input-group {
  flex: 1 1 auto;
  min-width: 0;
  /* Tribe's skeleton adds a bottom margin that dropped the field below the
     button's centre -- clear it so the two line up. */
  margin: 0 !important;
}
/* The wrapper is the visible box: full 42px height (matching the button),
   one clean border, field + optional icon centered inside. Tribe otherwise
   lets it collapse to ~24px, so the bordered box floated in the middle of
   the row with its underline "in the center". */
.tribe-events-c-search__input-control {
  display: flex;
  align-items: center;
  height: 42px;
  margin: 0 !important;
  padding-inline: var(--spacing-3);
  border-radius: var(--radius-sm);
  /* border-width/style forced: a global JS-injected reset zeroes border-* on
     this box (renders colored but 0-width), so the shorthand alone leaves it
     borderless. !important on width+style defeats the reset. */
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--form-field-border-default) !important;
  /* !important: Tribe's compiled CSS sets a hardcoded white background with
     higher specificity, which otherwise wins in dark mode. */
  background: var(--form-field-background-default) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Strip the inner <input> back to a transparent, borderless field that just
   fills the box (it otherwise carries its own border/radius/padding). */
.tribe-events-c-search__input-control input,
.tribe-events-c-search__input {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-block: 0 !important;
  box-shadow: none !important;
}
.tribe-events-c-search__input-control input:focus {
  outline: none !important;
}
/* Emphasise on hover/focus without any layout shift. The old rule grew
   border-bottom 1px -> 2px and pulled margin-bottom -1px to compensate,
   which reflowed the field and made it twitch on every hover. An inset
   box-shadow paints the same accent under the border but never changes the
   box size, so the field stays perfectly still. */
.tribe-events-c-search__input-control:hover:not(:focus-within),
.tribe-events-c-search__input-control:focus-within {
  border-color: var(--form-field-border-hovered) !important;
  box-shadow: inset 0 -2px 0 -1px var(--colors-neutral-600);
}
.tribe-events-c-search__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  /* !important: text color needs to win against Tribe's own default too */
  color: var(--form-field-text-focused) !important;
}
/* Client report: the search input shifted/misaligned inside its bordered
   box on tablet widths. Cause: Tribe's own
   `.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input`
   (specificity 0,3,0) applies a negative vertical margin, meant for
   whatever default (icon-only) layout their own medium tier normally
   shows -- but the tablet-breakpoint override below now shows the FULL
   search bar at that same width, so this negative margin fires in a
   context it was never designed for. Neutralized at equal specificity so
   this file's later position in the enqueue order wins the tie. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input {
  margin: 0;
}
/* !important needed on background-color here: Tribe's own compiled CSS
   carries a same-or-higher-specificity rule for this exact button (not
   found in an obvious single place across its skeleton files -- likely a
   dynamically-injected inline <style> for its "kitchen sink" default theme
   colors) that otherwise wins and leaves the button transparent. */
.tribe-events-c-events-bar__search-button,
.tribe-events-c-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding-inline: var(--spacing-4);
  /* Client report: button rendered taller (46px) than the search input
     (42px) next to it and sat 2px higher, so it visibly stuck out above
     and below the input's edges. `height` (not `min-height`) plus
     `padding-block: 0` -- Tribe's own button base class inherits some
     vertical padding that was inflating this past its content's own
     size -- pins it to the exact same 42px as the input, and `align-self:
     center` keeps it centered against the input in the shared flex row. */
  height: 42px;
  padding-block: 0;
  align-self: center;
  background-color: var(--button-background-primary-default) !important;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.tribe-events-c-events-bar__search-button:hover,
.tribe-events-c-search__button:hover {
  background-color: var(--button-background-primary-hovered) !important;
}
.tribe-events-c-events-bar__search-button-text,
.tribe-events-c-search__button {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-oncolor-primary);
}
.tribe-events .tribe-common-c-btn.tribe-events-c-search__button {
  width: auto;
  margin-top: 0;
}
.tribe-events-c-events-bar__search-button-icon-svg {
  color: var(--text-oncolor-primary);
}
/* In --tabs style (<=3 public views, the case on this site) Tribe's own CSS
   hides .tribe-events-c-view-selector__button entirely (display:none) and
   shows the view list as tabs instead -- style the real visible element. */
.tribe-events-c-view-selector__list-item-link {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.tribe-events-c-view-selector__list-item-link:hover {
  color: var(--colors-primary-sa-flag-600-primary);
}
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  color: var(--colors-primary-sa-flag-600-primary);
  border-bottom: 2px solid var(--colors-primary-sa-flag-600-primary);
}
/* Client request: hide the "List" view-switcher for now -- there's only
   one public view registered on this site anyway, so a switcher with a
   single option isn't useful yet. Hides the whole wrapper (covers both
   the tabs-style link and the icon-button variant from the tablet
   breakpoint override above) rather than just one of its two variants. */
.tribe-events-c-events-bar__views {
  display: none !important;
}

/* ---- Today / prev-next / date label top bar ---- */
.tribe-events-c-top-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
/* Client report: "Today" rendered as a bordered pill while "Upcoming"
   (the datepicker trigger) was just plain colored text right next to it --
   inconsistent, and the "< >" arrows didn't share the same height/vertical
   center as either one. All four now share one explicit height (36px) and
   sit in the same flex row with align-items:center (.tribe-events-c-top-bar,
   below), so their centers line up exactly instead of each element sizing
   itself off its own content/box-sizing quirks. */
.tribe-events-c-top-bar__today-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  /* !important: Tribe's own button-reset base class sets border:0 with
     higher effective specificity, same fight noted elsewhere in this file
     -- without it the border never rendered at all. */
  border: 1px solid var(--border-neutral-primary) !important;
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-3);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tribe-events-c-top-bar__today-button:hover {
  color: var(--text-oncolor-primary) !important;
  border-color: var(--button-background-primary-default) !important;
  background-color: var(--button-background-primary-default) !important;
}
.tribe-events-c-top-bar__nav-link {
  /* !important: Tribe's own `.tribe-events .tribe-events-c-top-bar__nav-link
     { display: block; }` (specificity 0,2,0) beats this class-only rule
     (0,1,0), so the icon lost its inline-flex centering and rendered
     block-level -- the actual cause of the arrow misalignment. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--text-default);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tribe-events-c-top-bar__nav-link:hover {
  color: var(--colors-primary-sa-flag-600-primary);
  background-color: var(--background-primary-25);
}
.tribe-events-c-top-bar__datepicker-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  /* Upcoming is the current/selected view, so it reads as "selected": solid
     green fill with white text, the same green as the Find Events / other
     primary buttons. */
  color: var(--text-oncolor-primary) !important;
  border: 1px solid var(--button-background-primary-default) !important;
  background-color: var(--button-background-primary-default) !important;
  border-radius: var(--radius-sm);
  /* !important: this element is a real <button> (unlike the "Today" link
     above), so Tribe's own `.tribe-common button { padding: 0; }` reset
     (specificity 0,1,1, an element selector beats this class-only 0,1,0)
     was winning and squashing the left/right padding back to 0. */
  padding: 0 var(--spacing-3) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tribe-events-c-top-bar__datepicker-button:hover,
.tribe-events-c-top-bar__datepicker-button[aria-expanded="true"] {
  border-color: var(--button-background-primary-hovered) !important;
  background-color: var(--button-background-primary-hovered) !important;
}
.tribe-events-c-top-bar__datepicker-container table {
  width: 100%;
}

/* ---- Bottom list-view pagination (Previous / Today / Next) ----
   Client report: rendered as plain unstyled text -- unlike the icon-only
   Today/prev-next controls in the top bar above (.tribe-events-c-top-bar__*),
   this is a completely separate Tribe template (list/nav.php, classes
   .tribe-events-c-nav__*) that only appears once the list view has more
   than one page of events, and dga-events.css never styled it because it
   was never seen during earlier passes. Matches the top bar's own visual
   language (bordered pill for Today, plain text+icon links either side)
   rather than inventing a new treatment. */
.tribe-events-c-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: var(--spacing-lg) 0 0;
}
/* Client request: proper bordered buttons for Previous/Next (one is a real
   <button disabled> when there's nothing further back to page to, the
   other an <a>), matching the "Today" pill's own button chrome instead of
   plain unstyled text+icon links. */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 36px;
  box-sizing: border-box;
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  background-color: transparent;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-3) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tribe-events-c-nav__prev:hover:not(:disabled),
.tribe-events-c-nav__next:hover {
  color: var(--text-oncolor-primary);
  border-color: var(--button-background-primary-default);
  background-color: var(--button-background-primary-default);
}
.tribe-events-c-nav__prev:disabled {
  color: var(--text-default-disabled);
  border-color: var(--border-disabled);
  background-color: transparent;
  cursor: not-allowed;
}
.tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next-icon-svg {
  width: 16px;
  height: 16px;
}
.tribe-events-c-nav__today {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-3);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tribe-events-c-nav__today:hover {
  color: var(--text-oncolor-primary);
  border-color: var(--button-background-primary-default);
  background-color: var(--button-background-primary-default);
}

/* When there are no upcoming events, Tribe still renders the empty
   `<ul class="tribe-events-calendar-list">` above the "Latest Past Events"
   fallback -- with zero <li> children it's invisible, but the element
   itself still takes up a list's default box, leaving a stray gap between
   the search header and "Latest Past Events" below it. */
.tribe-events-calendar-list:empty {
  display: none;
}

/* ---- "Latest Past Events" list ---- */
.tribe-events-calendar-latest-past__heading {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
}
/* Client feedback ("do some design updates"): each row had no background,
   border, or shadow at all by default -- only a shadow that appeared on
   hover -- so the list read as plain floating text/images rather than
   the boxed .dga-card look used everywhere else on the site (media
   cards, file cards, search results). Giving it the same persistent
   border + shadow + background as those real DGA cards, with hover
   lifting to the stronger shadow exactly like .dga-card already does. */
.tribe-events-calendar-latest-past__event-row {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background-color: var(--background-card);
  border: 1px solid var(--border-neutral-primary);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow 0.15s ease;
}
.tribe-events-calendar-latest-past__event-row:hover {
  box-shadow: var(--shadow-md);
}
/* Client report (seen on both local and staging, intermittently -- title
   missing/misplaced, venue text detached above the whole list, image
   dropping to sit above the text instead of beside it): this row/column
   layout (image column + details column) is pure flexbox with no fixed
   width reserved for the image column -- both columns just get
   `flex: 1 1 auto`-style sizing based on their CURRENT rendered content.
   If the image hasn't finished loading yet (slow connection, or the
   browser deferring it until scrolled into view) it has no rendered
   height/width to size against, so the details column can end up taking
   the entire row width, and the row visually reflows once the image
   finally loads -- exactly matching an in-progress-load layout shift.
   Reserving a fixed width for the image column regardless of its load
   state removes the shift entirely; 408px matches this column's own
   already-observed rendered width when everything IS loaded. */
/* Desktop only: on mobile the image is SUPPOSED to stack above the text
   (already confirmed correct there), and a fixed 408px minimum would
   force horizontal overflow on a narrow screen instead. */
@media (min-width: 768px) {
  .tribe-events-calendar-latest-past__event-featured-image-wrapper {
    flex: 0 0 408px;
    max-width: 408px;
  }
}
/* The row-reverse / 37.5%-62.5% split added below only takes effect if
   `width` actually drives this item's size -- but flex-basis (the 408px
   above) wins over `width` on the main axis whenever it isn't `auto`, so
   without resetting it here the split would compute correctly but never
   render. Scoped to 960px+ only; the 768-959px tablet tier keeps the
   original fixed-408px fix untouched. */
@media (min-width: 960px) {
  .tribe-events-calendar-latest-past__event-featured-image-wrapper {
    flex: 0 1 auto;
    max-width: none;
  }
}
/* Client decision: the compact phone treatment (icon-only search/view
   toggle, stacked image-over-text cards) should also cover tablet widths,
   not just true phones. Tribe's own compiled CSS already does exactly
   this switch, but at a flat 768px cutoff -- everything from 768px up
   (which includes ordinary tablets, not just laptops/desktops) got the
   full desktop toolbar and side-by-side cards. Re-forcing the same
   compact rules up to 959px (Tribe's own "full" breakpoint tier starts at
   960 per this page's own breakpoints:{xsmall:500,medium:768,full:960}
   config) closes that gap without touching any vendor file. !important
   throughout: fighting the vendor's own >=768px rules, which would
   otherwise still win since they're equally or more specific. */
@media (max-width: 959px) {
  .tribe-events-c-events-bar__search-container {
    display: none !important;
  }
  /* Client report: clicking the search icon stopped opening the search
     box. Cause: Tribe's own click handler toggles this open by setting an
     INLINE `style="display: block"` on the container -- an inline style
     normally wins over any external stylesheet rule, but not over one
     marked !important like the hide rule right above, so the container
     stayed permanently hidden at every width in this range (not just
     tablet -- this broke phones too). This selector is more specific
     (adjacent-sibling + the button's own --active class, added by that
     same click handler) so it wins whenever the box is actually open. */
  .tribe-events-c-events-bar__search-button--active + .tribe-events-c-events-bar__search-container {
    display: block !important;
  }
  .tribe-events-c-events-bar__search-button {
    display: inline-block !important;
  }
  [data-js="tribe-events-view-selector-button"] {
    display: flex !important;
  }
  [data-js="tribe-events-view-selector-list-container"] {
    display: none !important;
  }
  .tribe-events-calendar-latest-past__event {
    flex-direction: column !important;
  }
  .tribe-events-calendar-latest-past__event-featured-image-wrapper {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* The two overrides above still lost to these two exact vendor
     selectors at the 768-959px range: both are also !important, and both
     out-specificity a plain single-class selector (0,3,0 vs 0,1,0) --
     the JS-added `tribe-common--breakpoint-medium` class is Tribe's OWN
     signal for "desktop-style toolbar", which is exactly the tier we're
     overriding here. Repeating their literal selector keeps specificity
     equal, so this file's later position in the enqueue order (after
     views-skeleton.css) is what wins the tie. */
  .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-button {
    display: inline-block !important;
    visibility: visible !important;
  }
  .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__button {
    display: flex !important;
    visibility: visible !important;
  }
  .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-latest-past__event-details {
    width: 100% !important;
  }
}
/* Client report: visible empty strip between the image and the row's
   outer edge. Cause: this wrapper also carries Tribe's own generic
   `.tribe-common-g-col` grid-column utility class, which always reserves
   a 24px gutter on BOTH sides of every column (the usual half-gutter-per-
   side pattern for a 12-col grid) so adjacent columns get consistent
   spacing. The inline-start side is exactly the gap we want between the
   image and the text column -- keep it. The inline-end side faces nothing
   (this is the row's last/only column) and was just dead space before the
   row's true edge. `padding-inline-end` (not `padding-right`) so this
   still targets the correct/outer side once the row's flex order flips
   under RTL, instead of accidentally removing the wanted image<->text gap
   there.
 *
 * !important needed: the real rule setting this gutter is
 * `.tribe-common .tribe-common-g-row--gutters > .tribe-common-g-col`
 * (specificity 0,3,0, and an even more specific 0,4,0 variant at the
 * medium breakpoint) -- both beat this selector's 0,2,0 on specificity
 * alone, !important is the only way to reliably win regardless of which
 * breakpoint variant is active. */
.tribe-events-calendar-latest-past__event-featured-image-wrapper.tribe-common-g-col {
  padding-inline-end: 0 !important;
}
.tribe-events .tribe-events-calendar-latest-past__event-date-tag {
  min-width: 90px;
  width: var(--tec-grid-width-1-of-9);
}
.tribe-events .tribe-common-g-col {
  padding-left: var(--tec-grid-gutter-half);
  padding-right: var(--tec-grid-gutter-half);
}
@media (min-width: 960px) {
  .tribe-events-calendar-latest-past__event {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
  }
  .tribe-events-calendar-latest-past__event-featured-image-wrapper {
    width: 37.5% !important;
  }
  .tribe-events-calendar-latest-past__event-details {
    width: 62.5% !important;
  }
}
.tribe-events .tribe-events-calendar-latest-past__event-details {
  margin-top: 20px;
  margin-bottom: 20px;
}
.tribe-events-calendar-latest-past__event-title {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
}
.tribe-events-calendar-latest-past__event-title a:hover {
  color: var(--colors-primary-sa-flag-600-primary);
}
.tribe-events-calendar-latest-past__event-datetime,
.tribe-events-calendar-latest-past__event-venue {
  font-family: var(--font-family-arabic);
  color: var(--text-secondary-paragraph);
}
.tribe-events-calendar-latest-past__event-date-tag {
  /* Client report: -25 tint was almost indistinguishable from the page's
     white background, and regular weight made the date hard to read at a
     glance. Bumped to -50 (still a light tint, not a solid block) and bold
     text, both together per the request. */
  background-color: var(--background-primary-50);
  border-radius: var(--radius-md);
  color: var(--colors-primary-sa-flag-600-primary);
  font-weight: var(--font-weight-bold);
}
/* Tribe stretches the <time> to the full row height with its month/day pinned
   to the top. Center them vertically so the date sits in the middle of the
   column, level with the card beside it. */
.tribe-events-calendar-latest-past__event-date-tag-datetime {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Source images for past events come from whatever was uploaded per-post,
   with no consistent aspect ratio (e.g. one landscape 2500x1661, the next
   square 2500x2500 -- both real examples on this list). Left to their
   natural size inside the fixed 408px-wide column, each row's image ends
   up a different height, so the row heights (and the vertical center of
   each row's text) visibly zig-zag down the list instead of reading as a
   uniform set of cards. A fixed aspect-ratio + object-fit crops every
   image to the same shape regardless of its source dimensions. */
.tribe-events-calendar-latest-past__event-featured-image-wrapper img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---- Single event view (/event/slug/) ----
   No theme override exists for this template anywhere in resources/views/
   tribe/ (only the V2 list view is overridden there), so every class below
   is the plugin's bare, unstyled classic-template markup -- headings,
   meta, and the calendar-export widget all rendered at browser defaults. */

/* The page's own hero section (rendered above this, "container ... px-5
   md:px-20", class="h1 font-bold") already prints this exact title once,
   styled. Tribe's own template prints it a SECOND time here, completely
   unstyled -- besides the visual duplication, two <h1>s on one page is
   also a real accessibility/SEO issue, not just a style gap. */
.tribe-events-single-event-title {
  display: none;
}

/* The vendor template has no container/gutter of its own at all, so this
   entire block ran edge-to-edge at the browser's default text measure.
   Matches the hero section immediately above it (px-5 / md:px-20). */
.tribe-events-single {
  padding-inline: var(--spacing-5);
}
@media (min-width: 768px) {
  .tribe-events-single {
    padding-inline: var(--spacing-20);
  }
}

.tribe-events-back a {
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.tribe-events-back a:hover {
  color: var(--colors-primary-sa-flag-600-primary);
}

/* "This event has passed" -- same warning-notice look already given to
   the archive page's own notice in dga-notification.css
   (.tribe-events-c-messages__message--notice), instead of a bare default
   bulleted <ul><li>. */
.tribe-events-notices ul {
  background-color: var(--notification-background-warning-light);
  border: 1px solid var(--border-warning-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  margin: 0 0 var(--spacing-4);
  list-style: none;
}
.tribe-events-notices li {
  font-family: var(--font-family-arabic);
  color: var(--text-default);
}

.tribe-events-schedule {
  font-family: var(--font-family-arabic);
  color: var(--text-secondary-paragraph);
  margin-bottom: var(--spacing-4);
}

/* Full-bleed source image (2500x2500 on this event, but varies per post)
   otherwise dominates the page above the fold before any real content
   appears. Same crop-to-consistent-shape fix as the archive page's
   "Latest Past Events" cards above, just capped at a sane max height
   instead of a fixed column width since this one runs full-width. */
.tribe-events-event-image img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-5);
}

.tribe-events-single-event-description {
  font-family: var(--font-family-arabic);
  color: var(--text-secondary-paragraph);
  line-height: var(--line-height-text-md);
}
.tribe-events-single-event-description p {
  margin-bottom: var(--spacing-4);
}

/* ---- "Add to calendar" widget ----
   This is V2 "blocks" widget markup dropped into the classic single-event
   template, but neither Tribe's own CSS for it (tribe-events-single-
   blocks.css has no rule at all for .tribe-events-c-subscribe-dropdown__
   content) nor the JS that would normally toggle it open/closed is wired
   up for this page -- so all four calendar links rendered permanently
   visible under a plain unstyled button, and clicking it did nothing.
   Styled like the site's other bordered buttons; hidden by default and
   toggled via the --active class added by dga-event-subscribe-toggle.js. */
.tribe-events-c-subscribe-dropdown__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 42px;
  padding-inline: var(--spacing-4);
  font-family: var(--font-family-arabic);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  border: 1px solid var(--border-neutral-primary) !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tribe-events-c-subscribe-dropdown__button:hover {
  color: var(--text-oncolor-primary) !important;
  border-color: var(--button-background-primary-default) !important;
  background-color: var(--button-background-primary-default) !important;
}
.tribe-events-c-subscribe-dropdown__content {
  display: none;
  margin-top: var(--spacing-2);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background-color: var(--background-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.tribe-events-c-subscribe-dropdown__content--active {
  display: block;
}
.tribe-events-c-subscribe-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tribe-events-c-subscribe-dropdown__list-item-link {
  display: block;
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family-arabic);
  color: var(--text-default);
  transition: background-color 0.15s ease;
}
.tribe-events-c-subscribe-dropdown__list-item-link:hover {
  background-color: var(--background-primary-25);
  color: var(--colors-primary-sa-flag-600-primary);
}

/* ---- Details / Venue meta ---- */
@media (min-width: 768px) {
  .tribe-events-event-meta.primary,
  .tribe-events-event-meta.secondary {
    width: 100%;
  }
}
.tribe-events-single-section-title {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  margin-bottom: var(--spacing-2);
}
/* Client report (mobile): Details / Map / Venue rendered out of source
   order (Map sandwiched between Details and Venue) with the three cards
   touching each other edge-to-edge, no gap. Cause: Tribe's own compiled
   CSS floats these three groups for a desktop 2-up layout and never
   clears/resets that below its own "medium" breakpoint tier, so on mobile
   each float box only claims its intrinsic content width (not the full
   line) and the browser packs the next box wherever the previous float
   leaves room -- exactly the kind of out-of-order-looking wrap floats
   produce. `float: none` restores normal block stacking (which is also
   naturally source order: Details, Venue, Map) and `width: 100%` plus
   `margin-bottom` fixes both the missing gap and the "not full width" look
   in one pass, at every width, not just mobile. */
.tribe-events-meta-group {
  float: none;
  width: 100%;
  background-color: var(--background-card);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-4);
}
.tribe-events-meta-group:last-child {
  margin-bottom: 0;
}
.tribe-events-single-section .tribe-events-meta-group {
  width: 100%;
  margin: 2px;
}
@media (max-width: 800px) {
  .tribe-events-single-section .tribe-events-meta-group {
    margin: 0;
    margin-bottom: 10px;
  }
}
.tribe-events-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tribe-events-meta-item,
.tribe-events-meta-label,
.tribe-events-meta-value,
.tribe-venue,
.tribe-events-address {
  font-family: var(--font-family-arabic);
  color: var(--text-secondary-paragraph);
}
.tribe-venue a {
  color: var(--text-default);
  font-weight: var(--font-weight-semibold);
}
.tribe-events-meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.tribe-events-gmap {
  color: var(--colors-primary-sa-flag-600-primary);
}
.tribe-events-venue-map iframe {
  border-radius: var(--radius-lg);
  width: 100%;
}

/* Client request: hide the events-bar search icon/button entirely.
   !important + placed last: the tablet-range rules earlier in this file
   (768-959px) force this same button back to `display: inline-block
   !important` to work around a Tribe/DGA breakpoint mismatch -- this must
   win over those at every width, including that range. */
.tribe-events-c-events-bar__search-button {
  display: none !important;
}

/* Tablet range (768-959px): with the search icon/button hidden entirely
   (rule above), the search box has no toggle to open it anymore -- so it
   must just stay visible here instead of collapsing behind a button.
   Placed last: overrides this same range's earlier `search-container {
   display: none !important }` / `search-button { display: inline-block
   !important }` pair, which assumed the icon-toggle behavior this
   supersedes. */
@media (max-width: 959px) {
  .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-button {
    display: none !important;
  }
  .tribe-events-c-events-bar__search-container {
    display: block !important;
  }
}

/* Same as above, but unconditional -- the search box now stays visible at
   every width (not just the 768-959px tablet range), since the icon
   toggle it used to hide behind is gone everywhere now. */
.tribe-events-c-events-bar__search-container {
  display: block !important;
}
.tribe-events .tribe-events-c-events-bar__search-container {
  position: relative;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.tribe-events-header__events-bar {
  width: 100%;
}
.tribe-events .tribe-events-c-events-bar__search-container {
  display: block !important;
  position: static !important;
  width: 100%;
  padding: 0 !important;
  margin-bottom: 20px;
}
.tribe-common-c-btn.tribe-events-c-search__button {
  width: auto !important;
  margin-top: 0 !important;
}
.tribe-events .tribe-events-header__events-bar {
  width: 100% !important;
}