/**
 * Events list styling — parity with the old TEC List view.
 *
 * Deliberately low-specificity, single-class selectors so Elementor's own controls still
 * win where an editor sets something explicitly. Colors inherit from the theme where
 * possible; the accent falls back to the site green only if no theme variable is set.
 */

.pie-events-list {
    --pie-events-accent: var(--e-global-color-primary, #2e7d32);
    --pie-events-rule: #e5e5e5;
}

/* Stacked date block: weekday over day-number, as TEC rendered it. */
.pie-event-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    min-width: 3.5rem;
}

.pie-event-date-block .pie-event-dow {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

.pie-event-date-block .pie-event-day {
    font-size: 2rem;
    font-weight: 700;
}

/* "August 20 @ 11:00 am - 1:00 pm" */
.pie-event-when {
    display: block;
    margin-bottom: .35rem;
}

/* Title link — green + underlined, matching the old list. */
.pie-events-list .pie-event-title a,
.pie-event-title a {
    color: var(--pie-events-accent, #2e7d32);
    text-decoration: underline;
    font-weight: 600;
}

.pie-events-list .pie-event-title a:hover,
.pie-event-title a:hover {
    text-decoration: none;
}

/* Venue line: bold name, plain address. */
.pie-event-venue {
    display: block;
    margin: .35rem 0;
}

.pie-event-venue-name {
    font-weight: 700;
}

/* Row separation for the list layout. */
.pie-events-list .pie-event-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--pie-events-rule, #e5e5e5);
}

.pie-events-list .pie-event-row:last-child {
    border-bottom: 0;
}

.pie-events-list .pie-event-body {
    flex: 1 1 auto;
}

/* Filters sidebar heading, to echo the old "Filters" column. */
.pie-events-filters-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .pie-events-list .pie-event-row {
        gap: 1rem;
    }
    .pie-event-date-block .pie-event-day {
        font-size: 1.5rem;
    }
}

/* ══ [pie_events] archive ══════════════════════════════════════════════════════
   Structure mirrors the TEC List view + Filter Bar this replaces: search bar with
   FIND EVENTS + List/Month/Day, left accordion filter rail, results under month
   separators. --pie-events-accent is TEC's own accent (#228737), read off the live
   page; override it once here if the brand green ever changes. */
.pie-events {
    --pie-events-accent: #228737;
    --pie-events-rule: rgba(0, 0, 0, 0.12);
    --pie-events-muted: #5d5d5d;

    /* WIDTH IS PINNED HERE ON PURPOSE. The theme hands the filtered request
       (/events/?ev_cat[]=...) a narrower content container than the unfiltered one, so the
       same markup rendered boxed after hitting FIND EVENTS and the widget visibly shrank.
       Rather than depend on which layout the theme picks per request, break out of whatever
       container we land in and always render at one width. box-sizing + overflow-x: clip
       stop the negative margins from producing a horizontal scrollbar. */
    box-sizing: border-box;
    margin-inline: calc(50% - 50vw);
    padding-inline: clamp(1rem, 3vw, 3.5rem);
    overflow-x: clip;
}

/* ── top search bar ── */
.pie-events-searchbar {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--pie-events-rule);
    padding: 0.55rem;          /* so the green button clears the bar outline top and bottom */
    margin-bottom: 2rem;
}

.pie-events-searchbar__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 0 1rem;
}

.pie-events-searchbar__icon { flex: 0 0 auto; color: var(--pie-events-muted); }

.pie-events-searchbar__field input[type="search"] {
    width: 100%;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 1.15rem 0.75rem;
    font-size: 1.05rem;
}

.pie-events-searchbar__submit {
    flex: 0 0 auto;
    background: var(--pie-events-accent);
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 1rem 2.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pie-events-searchbar__submit:hover { background: rgba(34, 135, 55, 0.85); }

.pie-events-views {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.75rem;
}

.pie-events-view {
    text-decoration: underline;
    color: inherit;
    font-size: 1.05rem;
    padding-bottom: 0.2rem;
}

.pie-events-view.is-active {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid currentColor;
}

/* ── two-column body ── */
.pie-events-body {
    display: grid;
    grid-template-columns: minmax(210px, 22%) 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── filter rail ── */
.pie-events-filters__title { font-size: 1.6rem; margin-bottom: 0.75rem; }

.pie-events-filter { border-top: 1px solid var(--pie-events-rule); }
.pie-events-filter:last-of-type { border-bottom: 1px solid var(--pie-events-rule); }

.pie-events-filter__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 1.15rem 0;
    font-weight: 700;
}

.pie-events-filter__toggle::-webkit-details-marker { display: none; }
.pie-events-filter__toggle::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; }
.pie-events-filter[open] .pie-events-filter__toggle::after { content: "\2212"; } /* minus */

.pie-events-filter__fields {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    /* Top padding keeps the first checkbox off the scroll-box edge (it was clipped); the
       larger bottom padding separates the last one from the group's closing rule. */
    padding: 0.5rem 0.25rem 1.5rem;
    max-height: 20rem;
    overflow-y: auto;
}

.pie-events-filter__option { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; }

.pie-events-reset { display: inline-block; margin-top: 1rem; font-size: 0.95rem; }

/* ── rolling date-window nav (TEC's  <  >  Today  "Now - September 17" row) ── */
.pie-events-datenav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
}

.pie-events-datenav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.6rem;
    line-height: 1;
    color: inherit;
    text-decoration: none;
}
.pie-events-datenav__arrow.is-disabled { opacity: 0.3; }

.pie-events-datenav__today {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--pie-events-rule);
    color: inherit;
    text-decoration: none;
    font-size: 0.95rem;
}
.pie-events-datenav__today.is-current { opacity: 0.55; }

.pie-events-datenav__range { font-size: 1.75rem; margin-left: 0.5rem; }

@media (max-width: 860px) {
    .pie-events-datenav { flex-wrap: wrap; gap: 0.6rem; }
    .pie-events-datenav__range { font-size: 1.35rem; width: 100%; margin-left: 0; }
}

/* ── results ── */
.pie-events-month {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1.5rem;
}

.pie-events-month:not(:first-child) { margin-top: 2.5rem; }
.pie-events-month span { flex: 0 0 auto; }
.pie-events-month::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pie-events-rule); }

.pie-events-list .pie-event-row { display: flex; gap: 2.5rem; padding: 1.6rem 0 2.4rem; }

.pie-event-date-block { flex: 0 0 3.5rem; text-align: center; line-height: 1.1; }
.pie-event-date-block .pie-event-dow {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pie-events-muted);
}
.pie-event-date-block .pie-event-day { display: block; font-size: 2.1rem; font-weight: 400; }

.pie-event-body { flex: 1 1 auto; }
.pie-event-when { display: block; margin-bottom: 0.4rem; }

.pie-events-list .pie-event-title { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 400; }
.pie-events-list .pie-event-title a { color: var(--pie-events-accent); text-decoration: underline; }

.pie-event-venue { display: block; margin-bottom: 0.75rem; }
.pie-event-venue-name { font-weight: 700; }

.pie-event-excerpt { color: inherit; }

.pie-events-empty { margin: 1rem 0; font-style: italic; }

.pie-events-toolbar { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; }
.pie-events-when { text-decoration: none; opacity: 0.6; font-weight: 600; }
.pie-events-when.is-active { opacity: 1; text-decoration: underline; }

.pie-events-pagination { display: flex; gap: 0.75rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--pie-events-rule); }
.pie-events-pagination .page-numbers.current { font-weight: 700; }
.pie-events-pagination a { color: var(--pie-events-accent); }

/* ── narrow screens ── */
@media (max-width: 860px) {
    .pie-events-body { grid-template-columns: 1fr; gap: 1.5rem; }
    .pie-events-searchbar { flex-wrap: wrap; }
    .pie-events-searchbar__field { flex: 1 1 100%; border-bottom: 1px solid var(--pie-events-rule); }
    .pie-events-searchbar__submit { flex: 1 1 auto; padding: 1rem 1.5rem; }
    .pie-events-views { flex: 1 1 auto; justify-content: center; padding: 0.75rem 1rem; }
    .pie-events-list .pie-event-row { gap: 1.25rem; }
}

/* ══ single event ═════════════════════════════════════════════════════════════
   Mirrors TEC's single view: back link, date/time under the title, description,
   Add to calendar, DETAILS/VENUE columns, Related Events, prev/next. The theme
   still owns the title and sidebar, exactly as it did for TEC. */
.pie-event-single { --pie-events-accent: #228737; --pie-events-rule: rgba(0, 0, 0, 0.12); --pie-events-muted: #5d5d5d; }

.pie-event-single__back { margin-bottom: 1.25rem; }
.pie-event-single__back a { color: var(--pie-events-accent); text-decoration: underline; }

.pie-event-single__when { color: var(--pie-events-muted); margin-bottom: 1.75rem; }
.pie-event-single__content { margin-bottom: 2rem; }

/* Add to calendar — <details> so the dropdown needs no JavaScript. */
.pie-event-atc { display: inline-block; position: relative; margin-bottom: 2.5rem; }
.pie-event-atc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--pie-events-rule);
    color: var(--pie-events-accent);
}
.pie-event-atc__toggle::-webkit-details-marker { display: none; }
.pie-event-atc__toggle::after { content: "\25BE"; margin-left: 0.4rem; }
.pie-event-atc[open] .pie-event-atc__toggle::after { content: "\25B4"; }

.pie-event-atc__menu {
    position: absolute;
    z-index: 5;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pie-events-rule);
    border-top: 0;
}
.pie-event-atc__menu a { padding: 0.75rem 1.5rem; white-space: nowrap; color: var(--pie-events-accent); }
.pie-event-atc__menu a:hover { background: rgba(34, 135, 55, 0.07); }

/* DETAILS / VENUE columns, rules above and below like TEC's. */
.pie-event-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--pie-events-rule);
    border-bottom: 1px solid var(--pie-events-rule);
}

.pie-event-meta__heading { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; margin: 0 0 1rem; }
.pie-event-meta__row { margin: 0 0 0.9rem; }
.pie-event-meta__label { display: block; font-weight: 700; }
.pie-event-meta__value,
.pie-event-meta__value a { word-break: break-word; }
.pie-event-meta__value a,
.pie-event-meta__venue-name a { color: var(--pie-events-accent); text-decoration: underline; }
.pie-event-meta__venue-name { margin: 0 0 0.25rem; }
.pie-event-meta__venue-line { margin: 0 0 0.25rem; }

/* Related events — three cards, placeholder art since these events carry no image. */
.pie-event-related { padding-top: 2.5rem; }
.pie-event-related__title { font-size: 2rem; margin: 0 0 1.5rem; }
.pie-event-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; }

.pie-event-card__media { background: #ededed; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; }
.pie-event-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pie-event-card__media--empty { color: #b7b7b7; }
.pie-event-card__title { font-size: 1rem; font-weight: 400; margin: 0 0 0.4rem; }
.pie-event-card__title a { color: var(--pie-events-accent); text-decoration: underline; }
.pie-event-card__when { color: inherit; margin: 0; }

/* Prev/next, split left and right like TEC's. */
.pie-event-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pie-events-rule);
}
.pie-event-nav a { color: inherit; text-decoration: underline; }
.pie-event-nav__next { margin-left: auto; text-align: right; }

@media (max-width: 860px) {
    .pie-event-meta { gap: 1.5rem; }
    .pie-event-nav { flex-direction: column; }
    .pie-event-nav__next { margin-left: 0; text-align: left; }
}

.pie-event-meta__organizer-name { margin: 0 0 0.6rem; }
.pie-event-meta__organizer-name a { color: var(--pie-events-accent); text-decoration: underline; }

/* ══ [pie_events_summary] — condensed category card ═══════════════════════════
   Replaces TEC's summary view: month-grouped rows in a fixed-height scroll box,
   Previous/Today/Next, and a Subscribe button. Sized to sit inside a narrow card
   in a multi-column row, so it sets no width of its own. */
.pie-events-summary {
    --pie-events-accent: #228737;
    --pie-events-rule: rgba(0, 0, 0, 0.12);
    --pie-events-muted: #5d5d5d;
    text-align: left;

    /* Fill the card it is placed in and pin Subscribe to the bottom, like TEC's summary. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*
 * Elementor wraps a shortcode in .elementor-widget-container, so the widget's own height has
 * to be passed down or `height: 100%` above has nothing to measure against. :has() lets that
 * happen without editing the Elementor template; browsers without it simply fall back to the
 * old auto-height behaviour, which is the pre-fix appearance rather than a broken one.
 */
.elementor-widget-shortcode:has(.pie-events-summary),
.elementor-widget-shortcode:has(.pie-events-summary) > .elementor-widget-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pie-events-summary__head { font-size: 1.3rem; margin-bottom: 0.75rem; }

.pie-events-summary__scroll { overflow-y: auto; padding-right: 0.5rem; }
.pie-events-summary__scroll.is-fill { flex: 1 1 auto; min-height: 0; }  /* min-height:0 lets a flex child actually scroll */

.pie-events-summary__month {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    margin: 1rem 0 0.5rem;
}
.pie-events-summary__month:first-child { margin-top: 0; }
.pie-events-summary__month span { flex: 0 0 auto; }
.pie-events-summary__month::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pie-events-rule); }

.pie-events-summary__row { display: flex; gap: 0.9rem; padding: 0.55rem 0; }

.pie-events-summary__date { flex: 0 0 2.8rem; text-align: center; line-height: 1.1; }
.pie-events-summary__dow {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pie-events-muted);
}
.pie-events-summary__day { display: block; font-size: 1.9rem; }

.pie-events-summary__body { flex: 1 1 auto; }
.pie-events-summary__when { display: block; font-size: 1rem; color: var(--pie-events-muted); }
.pie-events-summary__title { color: var(--pie-events-accent); text-decoration: underline; }

.pie-events-summary__empty { color: var(--pie-events-muted); font-style: italic; margin: 0.5rem 0; }
.pie-events-summary__error { color: #b32d2e; }

.pie-events-summary__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    flex: 0 0 auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--pie-events-rule);
    font-size: 0.95rem;
}
.pie-events-summary__nav a { color: inherit; text-decoration: underline; }
.pie-events-summary__nav .is-disabled { opacity: 0.35; }

.pie-events-summary__subscribe {
    display: block;
    margin-top: auto;   /* pinned to the bottom of the filled card */
    padding: 0.75rem 1rem;
    border: 1px solid var(--pie-events-accent);
    border-radius: 4px;
    color: var(--pie-events-accent);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.pie-events-summary__subscribe:hover { background: rgba(34, 135, 55, 0.07); }