.elementor-4771 .elementor-element.elementor-element-a5ae221{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4771 .elementor-element.elementor-element-09c0d9f{--display:flex;}.elementor-widget-search{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search.e-focus{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search .elementor-pagination{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-4771 .elementor-element.elementor-element-0c9b4e6{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-4771 .elementor-element.elementor-element-4b65f9c .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-4771 .elementor-element.elementor-element-68f6498{--swiper-slides-to-display:1;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-4771 .elementor-element.elementor-element-c61f466{--display:flex;}.elementor-4771 .elementor-element.elementor-element-3b26f25{--display:flex;}.elementor-4771 .elementor-element.elementor-element-942d5cd .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-4771 .elementor-element.elementor-element-6638350{--swiper-slides-to-display:1;--swiper-slides-gap:10px;}.elementor-4771 .elementor-element.elementor-element-6638350 .swiper-slide > .elementor-element{height:100%;}.elementor-4771 .elementor-element.elementor-element-26c3188{--display:flex;}.elementor-4771 .elementor-element.elementor-element-e1448f8 .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-4771 .elementor-element.elementor-element-f5b4fe1 .elementor-repeater-item-1f08ecc.elementor-social-icon{background-color:#E2558E;}.elementor-4771 .elementor-element.elementor-element-f5b4fe1 .elementor-repeater-item-1f08ecc.elementor-social-icon i{color:var( --e-global-color-primary );}.elementor-4771 .elementor-element.elementor-element-f5b4fe1 .elementor-repeater-item-1f08ecc.elementor-social-icon svg{fill:var( --e-global-color-primary );}.elementor-4771 .elementor-element.elementor-element-f5b4fe1{--grid-template-columns:repeat(0, auto);text-align:left;--icon-size:14px;--grid-column-gap:15px;--grid-row-gap:0px;}@media(max-width:1024px){.elementor-widget-search .elementor-pagination{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-4771 .elementor-element.elementor-element-68f6498{--swiper-slides-to-display:2;}.elementor-4771 .elementor-element.elementor-element-6638350{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-widget-search .elementor-pagination{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-4771 .elementor-element.elementor-element-68f6498{--swiper-slides-to-display:1;}.elementor-4771 .elementor-element.elementor-element-6638350{--swiper-slides-to-display:1;}}/* Start custom CSS for container, class: .elementor-element-a5ae221 *//* ============================================================
   UCL SIDEBAR — Variant B (Discovery)
   ============================================================
   Append this to your existing UCL Custom CSS, after the header
   block. Works with v1.10 of the brand system + v1.0 of the
   header CSS.

   Architecture: 7 modules stacked vertically, hairline rules
   between, generous whitespace. Two dynamic modules (Editor's
   Picks + Upcoming Events) are powered by JetEngine Listing
   Grids — the styling here targets the JetEngine output classes
   plus optional .ucl-sidebar-* CSS Class names you apply inside
   the listing templates.

   Hidden below 768px (mobile gets full-width content; the In
   This Issue + Newsletter modules can be repeated below the
   article body on mobile via separate sections).

   Apply via CSS Classes on Elementor widgets:
   - .ucl-sidebar on the sidebar Section/Container wrapper
   - .ucl-sidebar-section on each module's inner Section
   - .ucl-sidebar-eyebrow on each module's heading text
   - (plus module-specific classes — see each section below)
   ============================================================ */


/* ============================================================
   14. SIDEBAR — base layout + section rhythm
   ============================================================ */

.ucl-sidebar {
  background-color: var(--ucl-paper) !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
}

.ucl-sidebar-section,
.ucl-sidebar > .elementor-widget,
.ucl-sidebar > .elementor-element {
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--ucl-hairline) !important;
  margin: 0 !important;
}

.ucl-sidebar-section:first-child,
.ucl-sidebar > .elementor-widget:first-child {
  padding-top: 0 !important;
}

.ucl-sidebar-section:last-child,
.ucl-sidebar > .elementor-widget:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Eyebrow / section header — uppercase Inter tracked grey */
.ucl-sidebar-eyebrow,
.ucl-sidebar-eyebrow * {
  font-family: var(--ucl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink-muted) !important;
  margin: 0 0 12px !important;
  display: block !important;
}


/* ============================================================
   14a. SIDEBAR — SEARCH
   ============================================================ */

.ucl-sidebar-search,
.ucl-sidebar-search form,
.ucl-sidebar-search .elementor-search-form__container {
  display: flex !important;
  align-items: center !important;
  border: none !important;
  border-bottom: 1px solid var(--ucl-ink) !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  background: transparent !important;
}

.ucl-sidebar-search input,
.ucl-sidebar-search input[type="search"],
.ucl-sidebar-search .elementor-search-form__input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--ucl-font-body) !important;
  font-size: 13px !important;
  color: var(--ucl-ink) !important;
  padding: 4px 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.ucl-sidebar-search input::placeholder,
.ucl-sidebar-search .elementor-search-form__input::placeholder {
  color: var(--ucl-ink-faint) !important;
}

.ucl-sidebar-search button,
.ucl-sidebar-search .elementor-search-form__submit {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--ucl-ink) !important;
  cursor: pointer !important;
}

.ucl-sidebar-search svg,
.ucl-sidebar-search .elementor-search-form__icon svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--ucl-ink) !important;
}


/* ============================================================
   14b. SIDEBAR — IN THIS ISSUE
   ============================================================
   Layout: small vertical magazine cover thumbnail (left) +
   issue meta / title / tease / subscribe link (right).
   Apply via classes inside the Section:
   - .ucl-sidebar-issue on the wrapper
   - .ucl-sidebar-issue-thumb on the image widget
   - .ucl-sidebar-issue-meta on issue label (Spring 2026 · Issue 04)
   - .ucl-sidebar-issue-title on the cover title
   - .ucl-sidebar-issue-tease on the one-line tease
   ------------------------------------------------------------ */

.ucl-sidebar-issue,
.ucl-sidebar-issue .elementor-widget-container {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.ucl-sidebar-issue-thumb img,
.ucl-sidebar-issue-thumb .elementor-image img {
  width: 70px !important;
  height: 90px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.ucl-sidebar-issue-meta,
.ucl-sidebar-issue-meta * {
  font-family: var(--ucl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink-muted) !important;
  margin: 0 0 4px !important;
}

.ucl-sidebar-issue-title,
.ucl-sidebar-issue-title * {
  font-family: var(--ucl-font-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--ucl-ink) !important;
  margin: 0 0 6px !important;
}

.ucl-sidebar-issue-tease,
.ucl-sidebar-issue-tease * {
  font-family: var(--ucl-font-editorial) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--ucl-ink-soft) !important;
  margin: 0 0 8px !important;
}


/* ============================================================
   14c. SIDEBAR — BROWSE BY CITY
   ============================================================
   Use Elementor's Icon List or Nav Menu widget, OR a plain HTML
   widget. Each city is uppercase tracked with optional count
   indicator on the right.
   ------------------------------------------------------------ */

.ucl-sidebar-cities {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ucl-sidebar-cities ul,
.ucl-sidebar-cities .elementor-icon-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ucl-sidebar-cities li,
.ucl-sidebar-cities .elementor-icon-list-item {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--ucl-mist) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}

.ucl-sidebar-cities li:last-child,
.ucl-sidebar-cities .elementor-icon-list-item:last-child {
  border-bottom: none !important;
}

.ucl-sidebar-cities a,
.ucl-sidebar-cities .elementor-icon-list-text {
  font-family: var(--ucl-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink) !important;
  text-decoration: none !important;
}

.ucl-sidebar-cities a:hover {
  color: var(--ucl-ink-muted) !important;
}

.ucl-sidebar-cities .count {
  font-family: var(--ucl-font-body) !important;
  font-size: 10px !important;
  color: var(--ucl-ink-faint) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
}


/* ============================================================
   14d. SIDEBAR — EDITOR'S PICKS (JetEngine Listing Grid)
   ============================================================
   This module pulls 3 businesses dynamically via a JetEngine
   listing template. Apply .ucl-sidebar-picks to the JetEngine
   Listing Grid widget. Inside the listing template, apply:
   - .ucl-sidebar-pick-card on the item wrapper (Section/Container)
   - .ucl-sidebar-pick-thumb on the featured image widget
   - .ucl-sidebar-pick-cat on the dynamic terms/category widget
   - .ucl-sidebar-pick-name on the dynamic title field widget
   ------------------------------------------------------------ */

.ucl-sidebar-picks,
.ucl-sidebar-picks .jet-listing-grid,
.ucl-sidebar-picks .jet-listing-grid__items {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ucl-sidebar-picks .jet-listing-grid__item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--ucl-mist) !important;
  margin: 0 !important;
}

.ucl-sidebar-picks .jet-listing-grid__item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Item wrapper — flex layout for thumb + info */
.ucl-sidebar-pick-card,
.ucl-sidebar-pick-card .elementor-widget-container,
.jet-listing-grid__item > .elementor-element.ucl-sidebar-pick-card {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
}

.ucl-sidebar-pick-thumb,
.ucl-sidebar-pick-thumb img,
.ucl-sidebar-pick-thumb .elementor-image img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  border-radius: 2px !important;
}

.ucl-sidebar-pick-cat,
.ucl-sidebar-pick-cat * {
  font-family: var(--ucl-font-body) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink-muted) !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

.ucl-sidebar-pick-name,
.ucl-sidebar-pick-name * {
  font-family: var(--ucl-font-display) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--ucl-ink) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}


/* ============================================================
   14e. SIDEBAR — UPCOMING EVENTS (JetEngine + TEC)
   ============================================================
   Pulls upcoming events from The Events Calendar via a JetEngine
   listing querying tribe_events post type. Apply .ucl-sidebar-events
   to the Listing Grid widget. Inside the listing template, apply:
   - .ucl-sidebar-event-card on item wrapper
   - .ucl-sidebar-event-date on the date block (use Dynamic Field
     for event_start_date with custom callback formatting OR a
     manual layout — see build guide)
   - .ucl-sidebar-event-name on the event title
   - .ucl-sidebar-event-city on the city/venue
   ------------------------------------------------------------ */

.ucl-sidebar-events .jet-listing-grid__item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--ucl-mist) !important;
  margin: 0 !important;
}

.ucl-sidebar-events .jet-listing-grid__item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.ucl-sidebar-event-card,
.ucl-sidebar-event-card .elementor-widget-container {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.ucl-sidebar-event-date {
  width: 42px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  border-right: 1px solid var(--ucl-hairline) !important;
  padding-right: 8px !important;
}

.ucl-sidebar-event-date .month,
.ucl-sidebar-event-date .ucl-sidebar-event-month {
  font-family: var(--ucl-font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink-muted) !important;
  display: block !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.ucl-sidebar-event-date .day,
.ucl-sidebar-event-date .ucl-sidebar-event-day {
  font-family: var(--ucl-font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--ucl-ink) !important;
  display: block !important;
  letter-spacing: -0.02em !important;
}

.ucl-sidebar-event-info {
  flex: 1 !important;
  padding-top: 2px !important;
}

.ucl-sidebar-event-name,
.ucl-sidebar-event-name * {
  font-family: var(--ucl-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ucl-ink) !important;
  margin: 0 0 2px !important;
}

.ucl-sidebar-event-city,
.ucl-sidebar-event-city * {
  font-family: var(--ucl-font-body) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ucl-ink-muted) !important;
  margin: 0 !important;
}


/* ============================================================
   14f. SIDEBAR — NEWSLETTER
   ============================================================
   Use a Klaviyo embed OR a plain styled form. Either way these
   classes catch both Klaviyo's klaviyo-form-XXX wrapper and
   generic form input + submit.
   ------------------------------------------------------------ */

.ucl-sidebar-newsletter form,
.ucl-sidebar-newsletter .klaviyo-form,
.ucl-sidebar-newsletter [class*="klaviyo-form"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ucl-sidebar-newsletter input[type="email"],
.ucl-sidebar-newsletter input[type="text"],
.ucl-sidebar-newsletter .needsclick[type="email"] {
  width: 100% !important;
  border: 1px solid var(--ucl-hairline) !important;
  background: var(--ucl-paper) !important;
  padding: 9px 12px !important;
  font-family: var(--ucl-font-body) !important;
  font-size: 12px !important;
  color: var(--ucl-ink) !important;
  border-radius: 2px !important;
  margin-bottom: 8px !important;
  outline: none !important;
  box-shadow: none !important;
}

.ucl-sidebar-newsletter input:focus,
.ucl-sidebar-newsletter input[type="email"]:focus {
  border-color: var(--ucl-ink) !important;
  box-shadow: 0 0 0 3px rgba(15, 20, 25, 0.08) !important;
}

.ucl-sidebar-newsletter button,
.ucl-sidebar-newsletter button[type="submit"],
.ucl-sidebar-newsletter input[type="submit"] {
  width: 100% !important;
  background-color: var(--ucl-ink) !important;
  color: var(--ucl-paper) !important;
  border: 1.5px solid var(--ucl-ink) !important;
  font-family: var(--ucl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background-color 200ms ease !important;
}

.ucl-sidebar-newsletter button:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.ucl-sidebar-newsletter .helper-text,
.ucl-sidebar-newsletter .ucl-sidebar-newsletter-helper {
  font-family: var(--ucl-font-editorial) !important;
  font-size: 10px !important;
  font-style: italic !important;
  color: var(--ucl-ink-muted) !important;
  margin: 6px 0 0 !important;
}

.ucl-sidebar-newsletter p {
  font-family: var(--ucl-font-editorial) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--ucl-ink-soft) !important;
  margin: 0 0 10px !important;
}


/* ============================================================
   14g. SIDEBAR — FOLLOW (social icons)
   ============================================================
   Use Elementor's Social Icons widget. Apply .ucl-sidebar-follow.
   ------------------------------------------------------------ */

.ucl-sidebar-follow .elementor-social-icons-wrapper,
.ucl-sidebar-follow .elementor-grid {
  display: flex !important;
  gap: 14px !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.ucl-sidebar-follow .elementor-icon.elementor-social-icon,
.ucl-sidebar-follow .elementor-grid-item .elementor-icon {
  background-color: transparent !important;
  color: var(--ucl-ink) !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.ucl-sidebar-follow .elementor-icon:hover {
  color: var(--ucl-ink-muted) !important;
  background: transparent !important;
}

.ucl-sidebar-follow svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}


/* ============================================================
   14h. SIDEBAR — RESPONSIVE (hide below 1024px)
   ============================================================
   On tablet and below, the sidebar takes too much vertical space
   and competes with the article. Hide it entirely below 1024px.
   For mobile-critical CTAs (newsletter, magazine), build separate
   sections below the article body that show only on mobile via
   Elementor's per-device visibility.
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .ucl-sidebar {
    display: none !important;
  }
}


/* ============================================================
   END OF SIDEBAR CSS
   ============================================================ *//* End custom CSS */