/*
 * ASAE All Events Calendar — front-end styles.
 *
 * Loaded only when the [asae_events_calendar] shortcode actually
 * runs (see ASAE_AEC_Shortcode::render → wp_enqueue_style).
 *
 * Conventions:
 *   - Block-scoped under .asae-aec to avoid leaking into the theme.
 *   - Source/type color is set per-event via the --asae-aec-event-color
 *     / --asae-aec-type-color custom properties (computed in PHP from
 *     a stable hash so the same source/type lands on the same color
 *     every render).
 *   - Layout switches to stacked below 1200px per the brief.
 */

.asae-aec {
	font-family: inherit;
	color: inherit;
	max-width: 100%;
	/*
	 * When a paginate / filter / week-nav link includes the
	 * wrapper id as a `#fragment`, the browser scrolls the
	 * wrapper to the viewport top on the resulting load. Add a
	 * small `scroll-margin-top` so the wrapper isn't flush
	 * against the top edge (and lands clear of typical sticky
	 * headers).
	 */
	scroll-margin-top: 1rem;
}

/*
 * Screen-reader-only helper for the per-view <h2> labels added for
 * heading hierarchy. The standard WP `.screen-reader-text` exists on
 * most themes but we provide our own scoped fallback so the headings
 * stay off-screen even on themes that don't ship the class.
 */
.asae-aec .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	white-space: nowrap !important;
	word-wrap: normal !important;
}

.asae-aec * {
	box-sizing: border-box;
}

.asae-aec a {
	text-decoration: none;
	color: inherit;
}

.asae-aec .asae-aec-empty {
	padding: 2em 0;
	text-align: center;
	color: var(--asae-text-muted, #595959);
	font-style: italic;
}

/* ── Filter / search form (shared by all three views) ──────────────── */

.asae-aec-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
	margin: 0 0 1em;
	padding: 0.75em 1em;
	background: var(--asae-surface, #f7f7f7);
	border: 1px solid var(--asae-border-subtle, #dddddd);
	border-radius: var(--asae-radius, 3px);
}
.asae-aec-filter {
	display: flex;
	flex-direction: column;
	min-width: 8em;
}
.asae-aec-filter-search {
	flex: 1 1 14em;
}
/* Free + CAE checkboxes share one wrapper so they always sit
 * side-by-side regardless of the filter bar's wrap behavior. */
.asae-aec-filter-toggles {
	flex-direction: row;
	align-items: center;
	gap: 0.85em;
	align-self: flex-end;
	margin-bottom: 0.4em;
}
.asae-aec-toggle {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9rem;
	white-space: nowrap;
}
.asae-aec-filter label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--asae-text-muted, #595959);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.2em;
}
.asae-aec-filter input[type="search"],
.asae-aec-filter input[type="text"],
.asae-aec-filter select {
	padding: 0.4em 0.55em;
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: var(--asae-radius-sm, 2px);
	font-size: 0.95rem;
	background: var(--nv-site-bg, #fff);
}
.asae-aec-filter input[type="search"]:focus,
.asae-aec-filter select:focus {
	outline: 2px solid var(--nv-primary-accent, #bd491e);
	outline-offset: 1px;
	border-color: var(--nv-primary-accent, #bd491e);
}
.asae-aec-filter-actions {
	display: flex;
	gap: 0.5em;
	align-items: center;
}
.asae-aec-filter-submit {
	padding: 0.5em 1.2em;
	border: 1px solid var(--nv-primary-accent, #bd491e);
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
	border-radius: var(--asae-radius-sm, 2px);
	font-weight: 600;
	cursor: pointer;
}
/* Darken the background only — `filter: brightness()` would dim the white label
 * along with the button, greying the text and lowering contrast rather than
 * raising it. This overlay is equally theme-agnostic. */
.asae-aec-filter-submit:hover,
.asae-aec-filter-submit:focus {
	background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}
.asae-aec-filter-clear {
	padding: 0.5em 0.9em;
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: var(--asae-radius-sm, 2px);
	color: var(--asae-text-muted, #595959);
	background: var(--nv-site-bg, #fff);
	text-decoration: none;
}
.asae-aec-filter-clear:hover,
.asae-aec-filter-clear:focus {
	border-color: var(--asae-border-control, #767676);
	color: var(--nv-text-color, #2b2b2b);
}
.asae-aec-filter-clear:focus-visible,
.asae-aec-active-filters-clear:focus-visible {
	outline: 2px solid var(--nv-primary-accent, #bd491e);
	outline-offset: 2px;
}
.asae-aec-register-now {
	/* (existing visual rules below — adding focus + outline only) */
}
.asae-aec-event:has(.asae-aec-event-cta:focus-visible) .asae-aec-register-now {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/*
 * Asterisk next to the Type / Topic labels — links them to the
 * "Only Types and Topics currently available are shown." footnote
 * rendered at the bottom of the filter form.
 */
.asae-aec-filter-fn-marker {
	color: var(--nv-primary-accent, #bd491e);
	font-weight: 700;
	margin-left: 0.15em;
}

.asae-aec-filter-footnote {
	flex: 1 1 100%;
	margin: 0.5em 0 0;
	font-size: 0.78rem;
	color: var(--asae-text-muted, #595959);
	font-style: italic;
}
.asae-aec-filter-footnote span[aria-hidden] {
	color: var(--nv-primary-accent, #bd491e);
	font-weight: 700;
	font-style: normal;
}

/* ── Active-filters banner (shown above AND below results) ─────────── */

.asae-aec-active-filters {
	margin: 0.5em 0;
	padding: 0.6em 0.9em;
	background: #fff8e1;
	border-left: 4px solid var(--nv-primary-accent, #bd491e);
	border-radius: 0 var(--asae-radius, 3px) var(--asae-radius, 3px) 0;
	font-size: 0.9rem;
	color: var(--nv-text-color, #2b2b2b);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.6em;
	align-items: center;
}
.asae-aec-active-filters-label {
	font-weight: 600;
}
.asae-aec-active-filters-clear {
	margin-left: auto;
	color: var(--nv-primary-accent, #bd491e);
	text-decoration: underline;
	font-weight: 600;
}

/* ── Pagination (shared by graphic + simple, top + bottom) ───────────── */

/*
 * Visually matches the asae-news-releases pagination so themed Neve
 * sites pick up `--nv-primary-accent` (the primary accent color the
 * site admin configured in Neve's color settings). Untheme'd sites
 * fall back to the WP-admin blue.
 */

.asae-aec-pagination {
	margin: 1em 0;
}
.asae-aec-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
}
.asae-aec-pagination a,
.asae-aec-pagination span {
	display: inline-block;
	padding: 0.3em 0.7em;
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: var(--asae-radius-sm, 2px);
	color: var(--nv-primary-accent, #bd491e);
	background: var(--nv-site-bg, #fff);
	text-decoration: none;
	min-width: 2.4em;
	text-align: center;
}
.asae-aec-pagination a:hover,
.asae-aec-pagination a:focus {
	border-color: var(--nv-primary-accent, #bd491e);
	filter: brightness(0.95);
}
.asae-aec-pagination a:focus-visible {
	outline: 2px solid var(--nv-primary-accent, #bd491e);
	outline-offset: 2px;
}
.asae-aec-pagination .is-current span {
	background: var(--nv-primary-accent, #bd491e);
	border-color: var(--nv-primary-accent, #bd491e);
	color: #fff;
	font-weight: 600;
}
/* Disabled prev/next now renders as <button disabled> (was a <span>);
 * cover both selectors so prior visual matches and browsers don't
 * apply native button styling. */
.asae-aec-pagination .is-disabled span,
.asae-aec-pagination .is-disabled button[disabled] {
	color: #a7aaad;
	background: var(--asae-surface, #f7f7f7);
	border-color: var(--asae-border-subtle, #dddddd);
	cursor: not-allowed;
	font: inherit;
	display: inline-block;
	padding: 0.3em 0.7em;
	min-width: 2.4em;
	text-align: center;
}
.asae-aec-pagination .is-ellipsis span {
	border: none;
	background: transparent;
	padding: 0.3em 0.2em;
	color: var(--asae-text-muted, #595959);
	min-width: 0;
}

/* ── Graphic List view ──────────────────────────────────────────────── */

.asae-aec-events {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1em;
}

.asae-aec-event {
	border: 1px solid var(--asae-border-subtle, #dddddd);
	/* All Default-view cards carry the 10px wide left bar; multi-day
	 * events used to widen from 6px → 10px to mark themselves out,
	 * but consistent width across every card reads cleaner now that
	 * multi-day events are also signaled by the badge + date-range. */
	border-left: 10px solid var(--asae-aec-event-color, #2271b1);
	border-radius: var(--asae-radius, 3px);
	background: var(--nv-site-bg, #fff);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}
.asae-aec-event:hover,
.asae-aec-event:focus-within {
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.asae-aec-event-link {
	display: flex;
	flex-direction: row;
	gap: 1em;
	padding: 1em 1.25em;
	align-items: stretch;
}
/* Stretched link: the title's link covers the whole card, so the card is
 * clickable without wrapping it in an <a> (the Join ASAE! link inside a
 * card would otherwise be a nested link). Links meant to stay separately
 * clickable sit above the overlay. */
.asae-aec-event {
	position: relative;
}
.asae-aec-event-cta {
	color: inherit;
	text-decoration: none;
}
.asae-aec-event-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.asae-aec-event-cta:focus {
	outline: none;
}
.asae-aec-event-cta:focus-visible::after {
	outline: 2px solid var(--nv-primary-accent, #bd491e);
	outline-offset: -2px;
}
.asae-aec-price-caption a {
	position: relative;
	z-index: 2;
}

.asae-aec-date-block {
	flex: 0 0 auto;
	min-width: 4.5em;
	text-align: center;
	padding: 0.25em 0.5em;
	border-right: 1px solid var(--asae-border-subtle, #dddddd);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.asae-aec-date-month {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--nv-text-color, #2b2b2b);
	letter-spacing: 0.05em;
}
.asae-aec-date-day {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}
.asae-aec-date-year {
	font-size: 0.75rem;
	color: var(--asae-text-muted, #595959);
	margin-top: 0.25em;
}

/* "thru DATE" line on cross-month multi-day events; same-month
 * multi-day shows the range inline in .asae-aec-date-day. */
.asae-aec-date-thru {
	font-size: 0.7rem;
	color: var(--nv-text-color, #2b2b2b);
	font-weight: 600;
	margin-top: 0.35em;
	padding-top: 0.35em;
	border-top: 1px dashed var(--asae-border-subtle, #dddddd);
}

/* Multi-day visual cue on the card itself — base border-width is
 * already 10px, so no width override needed. Class kept so the
 * badge + date-range markup can hook other styles per multi-day. */

/* Generic "Multi-day" pill badge used in event meta + simple list.
 * inline-flex + align-items:center + line-height:1 keeps the uppercase
 * text optically centered inside the pill (line-height alone leaves
 * letters floating high because of the font's vertical metrics). */
.asae-aec-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25em 0.65em;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
}
/*
 * Multi-day badge no longer color-codes by event type — the left
 * border + the visible date range already convey the multi-day
 * status with that color. The pill now uses a neutral secondary-
 * theme outline on white so it reads as a quiet meta indicator
 * rather than competing with the event type's accent color.
 */
.asae-aec-badge-multiday {
	background: var(--nv-site-bg, #fff);
	color: var(--nv-secondary-accent, #333333);
	border: 1px solid var(--nv-secondary-accent, #333333);
}

.asae-aec-event-body {
	flex: 1 1 auto;
	min-width: 0;
}
/*
 * Event title is an <h2> for hierarchy (under the SR-only view <h2>
 * sibling, both children of the page <h1>) — but it should NOT pick
 * up the theme's default h2 size. Explicit font-size override keeps
 * the card visual weight where the design wants it; explicit color
 * overrides any theme heading-color so titles always render black.
 */
.asae-aec-event-title {
	margin: 0 0 0.25em;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nv-text-color, #2b2b2b);
}
.asae-aec-event-title a {
	color: inherit;
}
.asae-aec-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	font-size: 0.875rem;
	color: var(--asae-text-muted, #595959);
	margin-bottom: 0.4em;
}
.asae-aec-event-meta .asae-aec-type {
	font-weight: 600;
	color: var(--asae-aec-event-color, #2271b1);
}
.asae-aec-event-meta .asae-aec-location::before { content: "•  "; color: var(--asae-border-subtle, #dddddd); }
.asae-aec-event-meta .asae-aec-type::before     { content: "•  "; color: var(--asae-border-subtle, #dddddd); }
.asae-aec-event-meta > :first-child::before     { content: ""; }

.asae-aec-excerpt {
	margin: 0.4em 0;
	font-size: 0.95rem;
	color: var(--nv-text-color, #2b2b2b);
	line-height: 1.5;
}

.asae-aec-event-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	font-size: 0.85rem;
	color: var(--asae-text-muted, #595959);
	margin-top: 0.4em;
}
.asae-aec-event-footer .asae-aec-cae { color: var(--asae-success, #2e7d32); font-weight: 600; }
.asae-aec-event-footer .asae-aec-price {
	color: var(--nv-text-color, #2b2b2b);
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

/*
 * Pricing boxes — three variants, role-aware (see
 * ASAE_AEC_Shortcode::render_pricing for the dispatch rules).
 *
 *   --anon       primary-color border, white bg, dark text. Used
 *                for both-prices display to anonymous visitors AND
 *                for the all-free "Free" indicator.
 *   --member     primary-color background, white text. Used when the
 *                viewer is the member (or when the event is free
 *                for members but paid for non-members, regardless
 *                of who's viewing — marketing the discount).
 *   --nonmember  secondary-color background, white text. Used when
 *                a signed-in nonmember sees their applicable rate.
 *
 * Themed Neve sites pick up `--nv-primary-accent` /
 * `--nv-secondary-accent` automatically; un-themed sites get the
 * sensible fallbacks.
 */
.asae-aec-price-box {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.7em;
	border-radius: var(--asae-radius, 3px);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.asae-aec-price-box--anon {
	border: 2px solid var(--nv-primary-accent, #bd491e);
	background: #fff;
	color: var(--nv-text-color, #2b2b2b);
}
.asae-aec-price-box--member {
	border: 2px solid var(--nv-primary-accent, #bd491e);
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
}
.asae-aec-price-box--nonmember {
	border: 2px solid var(--nv-secondary-accent, #333333);
	background: var(--nv-secondary-accent, #333333);
	color: #fff;
}

.asae-aec-price-caption {
	font-size: 0.88em;
	color: var(--nv-secondary-accent, #333333);
	font-weight: 400;
}
.asae-aec-price-caption a {
	color: var(--nv-primary-accent, #bd491e);
	font-weight: 600;
	text-decoration: underline;
}
.asae-aec-price-caption a:hover,
.asae-aec-price-caption a:focus {
	text-decoration: none;
}

/* Bold "Your ASAE [members-only] benefit." captions (cases 2b and 2d).
 * The site's text color, darker than the upsell caption, so the bold reads. */
strong.asae-aec-price-caption--member,
strong.asae-aec-price-caption--members-only {
	color: var(--nv-text-color, #2b2b2b);
	font-weight: 700;
	font-size: 0.92em;
}

/* Strikethrough modifier on the price-box — used in case 2d to show
 * "what non-members would pay" before the member's discounted price. */
.asae-aec-price-box.is-strikethrough {
	opacity: 0.9;
}
/* The struck value is a real <del>; re-declare colour + line-through so a
 * theme's del styling can't change the look. */
.asae-aec-price-box.is-strikethrough .asae-aec-price-del {
	color: inherit;
	background: transparent;
	text-decoration: line-through;
}

/* "Register Now" pill — rendered when the event has a CTA URL but
 * no priced data. Same primary fill as the member box but with
 * uppercase tracking so it reads as a button-style CTA.
 *
 * Box metrics (line-height, vertical padding, border width, font
 * size) are deliberately kept identical to `.asae-aec-price-box` so
 * the two render at the same pixel height — this pill stands in for
 * a price chip when no price data exists, so it should slot into the
 * same row without changing the row height. The border is filled
 * with the same color as the background so it's invisible while
 * still contributing the same 2px to the box height as the price
 * box's visible border. */
.asae-aec-register-now {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 1.1em;
	border: 2px solid var(--nv-primary-accent, #bd491e);
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
	border-radius: var(--asae-radius-sm, 2px);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* ── Simple List view ───────────────────────────────────────────────── */

.asae-aec-simple-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--asae-border-subtle, #dddddd);
}
.asae-aec-simple-row {
	border-bottom: 1px solid var(--asae-border-subtle, #dddddd);
	/* Every row gets the same 7px bar — was 4px for single-day events
	 * and 7px for multi-day. Consistent width reads cleaner and
	 * multi-day is still flagged by the inline date range + badge. */
	border-left: 7px solid var(--asae-aec-event-color, #2271b1);
}
/* .is-multi-day class kept as a hook for future tweaks; no longer
 * widens the border on its own. */
.asae-aec-simple-row .asae-aec-badge-multiday {
	margin-left: 0.5em;
	font-size: 0.65rem;
	/* Keep base pill padding so text stays vertically centered;
	 * the previous override zeroed vertical padding which pushed
	 * the uppercase text against the top edge. */
}
.asae-aec-simple-link {
	display: grid;
	grid-template-columns: 6em 5em 1fr auto auto;
	gap: 0.5em 1em;
	padding: 0.65em 0.85em;
	align-items: baseline;
	font-size: 0.95rem;
	transition: background 0.15s ease;
}
.asae-aec-simple-link:hover,
.asae-aec-simple-link:focus {
	background: var(--asae-surface, #f7f7f7);
}
.asae-aec-simple-date { font-weight: 600; color: var(--nv-text-color, #2b2b2b); }
.asae-aec-simple-time { color: var(--asae-text-muted, #595959); font-size: 0.875rem; }
.asae-aec-simple-title { font-weight: 500; }
.asae-aec-simple-type { font-size: 0.85rem; color: var(--asae-text-muted, #595959); }
.asae-aec-simple-cae  { font-size: 0.85rem; color: var(--asae-success, #2e7d32); font-weight: 600; }

/* ── Calendar view ──────────────────────────────────────────────────── */

.asae-aec-cal-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 1em;
}
.asae-aec-cal-nav .asae-aec-cal-label {
	margin: 0;
	font-size: 1.1rem;
	text-align: center;
	flex: 1 1 auto;
}
.asae-aec-cal-prev,
.asae-aec-cal-next {
	/* The active prev/next render as <a> (inline) while the disabled
	 * prev renders as <button> (inline-block, UA box model). Pin
	 * display, box-sizing and line-height here so anchor and button
	 * compute an identical box — otherwise the <button> grows taller
	 * than the <a> and the disabled "Previous week" looks larger than
	 * the active "Next week". */
	display: inline-block;
	box-sizing: border-box;
	padding: 0.4em 0.8em;
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: var(--asae-radius-sm, 2px);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	/* Pin weight + transform so the disabled <button> (which otherwise
	 * inherits Neve's bold, capitalized native-button styling) renders the
	 * SAME as the active <a>. Without this the disabled "Previous Week"
	 * came out bolder than the active "Next Week". */
	text-transform: none;
}
.asae-aec-cal-prev:hover,
.asae-aec-cal-next:hover,
.asae-aec-cal-prev:focus,
.asae-aec-cal-next:focus {
	background: var(--asae-surface, #f7f7f7);
}
/* Disabled prev renders as <button disabled> (active prev is an <a>).
 * The shared rule above already pins the box + weight; here we only paint
 * the disabled state as a GREYED-OUT version of the active button: same
 * transparent outline shape, just muted text.
 *
 * Contrast: disabled controls are exempt from WCAG 1.4.3/1.4.11, but we
 * meet them anyway. Muted text #595959 = 7:1 on white (AA normal text); the
 * old #a7aaad was only 2.3:1. The border stays the control token #767676
 * (4.5:1, same as active) rather than the old near-invisible #dcdcde (1.4:1). The
 * grey text + not-allowed cursor + disabled attribute carry the
 * "inactive" signal. */
.asae-aec-cal-prev.is-disabled {
	color: var(--asae-text-muted, #595959);
	background: transparent;
	border-color: var(--asae-border-control, #767676);
	cursor: not-allowed;
}
/* Neutralize native <button> metrics so it matches the <a> exactly. */
button.asae-aec-cal-prev {
	margin: 0;
	font-family: inherit;
}

.asae-aec-cal-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.asae-aec-cal-grid th {
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--asae-text-muted, #595959);
	padding: 0.5em 0.25em;
	border-bottom: 2px solid var(--asae-border-subtle, #dddddd);
	text-align: center;
}
.asae-aec-cal-grid td {
	vertical-align: top;
	border: 1px solid var(--asae-border-subtle, #dddddd);
	padding: 0.4em 0.4em 0.6em;
	min-height: 5em;
	height: 8em;
}
.asae-aec-cal-grid td.is-today {
	background: #fff8e1;
}
.asae-aec-cal-date {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	margin-bottom: 0.35em;
}
.asae-aec-cal-month {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--asae-text-muted, #595959);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.asae-aec-cal-daynum {
	font-size: 1.05rem;
	font-weight: 700;
}
.asae-aec-cal-events {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.asae-aec-cal-event {
	border-left: 4px solid var(--asae-aec-event-color, #2271b1);
	padding: 0;
	background: var(--asae-surface, #f7f7f7);
	border-radius: 0 var(--asae-radius, 3px) var(--asae-radius, 3px) 0;
	overflow: hidden;
}
/* Multi-day spans: tinted background so contiguous day-of-N cells
 * read as the same event at a glance, with directional bars. */
.asae-aec-cal-event.is-multi-day {
	background: color-mix(in srgb, var(--asae-aec-event-color, #2271b1) 12%, var(--nv-site-bg, #fff));
}
.asae-aec-cal-event.is-multi-day .asae-aec-cal-link {
	border-top: 2px solid var(--asae-aec-event-color, #2271b1);
	border-bottom: 2px solid var(--asae-aec-event-color, #2271b1);
}
.asae-aec-cal-continued {
	display: block;
	font-size: 0.65rem;
	color: var(--asae-aec-event-color, #2271b1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Long event (> MULTIDAY_CAP days): single start-day cell with a
 * "→ N days" marker rather than spanning the whole grid. Visually
 * distinct from the spanned multi-day pill (no tinted bg / borders). */
.asae-aec-cal-event.is-long-event {
	background: var(--asae-surface, #f7f7f7);
}
.asae-aec-cal-longrun {
	display: inline-block;
	margin-left: 0.35em;
	font-size: 0.65rem;
	color: var(--asae-aec-event-color, #2271b1);
	font-weight: 700;
	white-space: nowrap;
}
.asae-aec-cal-link {
	display: block;
	padding: 0.3em 0.45em;
	font-size: 0.82rem;
	line-height: 1.3;
}
.asae-aec-cal-link:hover,
.asae-aec-cal-link:focus {
	background: var(--nv-site-bg, #fff);
}
.asae-aec-cal-time {
	display: block;
	font-size: 0.7rem;
	color: var(--asae-text-muted, #595959);
	font-weight: 600;
}
.asae-aec-cal-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Small text line under the title: either "Virtual" or the
 * stored location_text (e.g. "Washington, DC"). Muted size so it
 * doesn't compete with the title; same color treatment as the
 * time line above for visual consistency. */
.asae-aec-cal-location {
	display: block;
	margin-top: 0.15em;
	font-size: 0.68rem;
	color: var(--asae-text-muted, #595959);
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Responsive: stack below 1200px per the brief ───────────────────── */

@media (max-width: 1199px) {
	.asae-aec-event-link {
		flex-direction: column;
		gap: 0.5em;
	}
	.asae-aec-date-block {
		border-right: 0;
		border-bottom: 1px solid var(--asae-border-subtle, #dddddd);
		padding-bottom: 0.5em;
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.5em;
		align-items: baseline;
		min-width: 0;
	}
	.asae-aec-date-day { font-size: 1.5rem; }
	.asae-aec-simple-link {
		grid-template-columns: 6em 1fr;
		grid-template-areas:
			"date title"
			"time type"
			"time cae";
		gap: 0.15em 1em;
	}
	.asae-aec-simple-date  { grid-area: date; }
	.asae-aec-simple-time  { grid-area: time; }
	.asae-aec-simple-title { grid-area: title; }
	.asae-aec-simple-type  { grid-area: type; }
	.asae-aec-simple-cae   { grid-area: cae; }
}

/* Calendar collapses to vertical list on narrow viewports — a 7-column
   grid is unreadable at phone widths. */
@media (max-width: 800px) {
	.asae-aec-cal-grid,
	.asae-aec-cal-grid thead,
	.asae-aec-cal-grid tbody,
	.asae-aec-cal-grid tr {
		display: block;
		width: 100%;
	}
	.asae-aec-cal-grid thead { display: none; }
	.asae-aec-cal-grid td {
		display: block;
		width: 100%;
		min-height: 0;
		height: auto;
		padding: 0.75em;
		border-top: 0;
	}
	.asae-aec-cal-grid td:first-child { border-top: 1px solid var(--asae-border-subtle, #dddddd); }
	/* Narrow-viewport day-of-week label, populated from data-dow on
	 * each cell's .asae-aec-cal-date in view-calendar.php. */
	.asae-aec-cal-date::before {
		content: attr(data-dow) " ·";
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--asae-text-muted, #595959);
		margin-right: 0.35em;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.asae-aec-cal-events {
		gap: 0.4em;
	}
	.asae-aec-cal-link {
		font-size: 0.9rem;
	}
}