/*
 * ==========================================================================
 * wps_eventscalendar – event list styles
 * ==========================================================================
 *
 * Theme it by overriding the custom properties (variables) in section 1,
 * or per template in its own section.
 *
 * Contents
 *   1. Variables – all event lists
 *      1.1 Colors
 *      1.2 Layout and spacing
 *      1.3 Typography
 *      1.4 Hover and motion
 *   2. Base styles – all event lists
 *   3. Template: default (date box)  – also used by event-list-classic
 *   4. Template: event-list-classic (overrides)
 *   5. Calendar link – all templates
 *   6. Accessibility: reduced motion – all templates
 *
 * Order matters: the template overrides (4) and reduced motion (6) must stay
 * after the rules they override.
 * ==========================================================================
 */


/*
 * ==========================================================================
 * 1. Variables – all event lists
 * ==========================================================================
 */

.wps-events-list {
	/*
	 * 1.1 Colors
	 * ------------------------------------------------------------------------
	 */
	--wps-events-card-background: transparent;
	--wps-events-date-background: transparent;
	--wps-events-date-border: 1px solid #445370; /* full border value */
	--wps-events-date-color: #445370; /* day and month text */
	--wps-events-date-hover-background: #2768e0; /* date box on card hover */
	--wps-events-date-hover-color: #ffffff; /* day and month text on hover */
	--wps-events-focus-color: currentColor;
	--wps-events-hover-color: #2768e0; /* all card text on hover */

	/*
	 * 1.2 Layout and spacing
	 * ------------------------------------------------------------------------
	 */
	--wps-events-gap: 0; /* space between cards */
	--wps-events-list-spacing: 1rem; /* space below the list */
	--wps-events-card-border: none; /* full border value, e.g. 1px solid rgba(0, 0, 0, 0.15) */
	--wps-events-card-padding: 0.2em 0; /* vertical only: no space left/right of the event; ≈4px at 18px text */
	--wps-events-card-radius: 0.25rem;
	--wps-events-date-box-gap: 2px; /* vertical space between day and month */
	--wps-events-date-box-width: calc(var(--wps-events-date-day-font-size) * 1.9); /* minimum width, keeps all boxes equally wide; ≈46px at 24px: narrower than tall (portrait) */
	--wps-events-date-box-padding: 0.5em 0; /* vertical only */
	--wps-events-title-spacing: 0.125em; /* space between date/time and title */
	--wps-events-icon-size: 1em; /* clock and calendar icons, follow the date/time font size */
	--wps-events-icon-gap: 0.25em; /* space between icon and time; the date uses its own 0.25em gap */

	/*
	 * 1.3 Typography
	 * ------------------------------------------------------------------------
	 */

	/* Event title */
	--wps-events-title-font-family: "Open Sans", sans-serif;
	--wps-events-title-font-size: 14px;
	--wps-events-title-font-weight: 700;

	/* Event date and time */
	--wps-events-datetime-font-family: "Open Sans", sans-serif;
	--wps-events-datetime-font-size: 12px;
	--wps-events-datetime-font-weight: 400;

	/* Date box: day and month */
	--wps-events-date-day-font-family: "Open Sans", sans-serif;
	--wps-events-date-day-font-size: 24px;
	--wps-events-date-day-font-weight: 700;
	--wps-events-date-month-font-family: "Open Sans", sans-serif;
	--wps-events-date-month-font-size: 11px;
	--wps-events-date-month-font-weight: 400;
	--wps-events-date-month-text-transform: uppercase;

	/*
	 * 1.4 Hover and motion
	 * ------------------------------------------------------------------------
	 */
	--wps-events-card-transition-duration: 910ms;
	--wps-events-card-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); /* soft start, long gentle fade-out */
	--wps-events-date-text-transition-duration: calc(var(--wps-events-card-transition-duration) / 2); /* date box text on hover-in */
}


/*
 * ==========================================================================
 * 2. Base styles – all event lists
 * ==========================================================================
 */

.wps-events-list {
	container-type: inline-size;
	display: grid;
	gap: var(--wps-events-gap);
	margin: 0 0 var(--wps-events-list-spacing);
	/* !important: many themes indent lists in content areas with ID selectors
	   (e.g. "#content ul { padding-left: 1em }"), which no class selector can override. */
	padding: 0 !important;
	list-style: none;
}

/* Set on the item itself: themes put list-style on the ul, and an inherited value never beats this. */
.wps-events-list__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* !important: some themes draw bullets with li::before using ID selectors. */
.wps-events-list__item::before {
	content: none !important;
}

/* The card: one link per event. */
.wps-events-card {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: var(--wps-events-card-padding);
	border: var(--wps-events-card-border);
	border-radius: var(--wps-events-card-radius);
	background: var(--wps-events-card-background);
	color: inherit;
	text-decoration: none;
	transition: color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing);
}

/* Card hover and keyboard focus: all text takes the highlight color */
.wps-events-card:hover,
.wps-events-card:focus-visible {
	color: var(--wps-events-hover-color);
}

.wps-events-card:focus-visible {
	outline: 2px solid var(--wps-events-focus-color);
	outline-offset: 2px;
}

.wps-events-card__content {
	min-width: 0;
}

/* Date/time line and title */
.wps-events-card__datetime {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	font-family: var(--wps-events-datetime-font-family);
	font-size: var(--wps-events-datetime-font-size);
	font-weight: var(--wps-events-datetime-font-weight);
	line-height: 1.3;
}

.wps-events-card__time {
	display: inline-flex;
	align-items: center;
	gap: var(--wps-events-icon-gap);
}

/* Clock and calendar icons: stroke uses currentColor, so they follow the text and hover color */
.wps-events-icon {
	flex-shrink: 0;
	width: var(--wps-events-icon-size);
	height: var(--wps-events-icon-size);
}

.wps-events-card__date {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
}

/* .wps-events-list prefix: beats theme rules such as Divi's ".et_pb_column_1_3 h4" (0,1,1) */
.wps-events-list .wps-events-card__title {
	margin: var(--wps-events-title-spacing) 0 0;
	padding: 0; /* Divi gives headings padding-bottom: 10px */
	font-family: var(--wps-events-title-font-family);
	font-size: var(--wps-events-title-font-size);
	font-weight: var(--wps-events-title-font-weight);
	line-height: 1.3;
	color: inherit; /* themes color headings; inherit keeps the card's hover color */
	overflow-wrap: anywhere;
}


/*
 * ==========================================================================
 * 3. Template: default (date box)
 *    Also used by event-list-classic, which only changes variables (section 4).
 * ==========================================================================
 */

/* Two columns: date box | content */
.wps-events-card--detailed {
	display: grid;
	grid-template-columns: minmax(var(--wps-events-date-box-width), max-content) minmax(0, 1fr);
	gap: 0.75em 1em;
	align-items: center;
}

/* Date box: day above month, centered */
.wps-events-date-box {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wps-events-date-box-gap);
	min-width: var(--wps-events-date-box-width);
	padding: var(--wps-events-date-box-padding);
	border: var(--wps-events-date-border);
	border-radius: var(--wps-events-card-radius);
	background: var(--wps-events-date-background);
	color: var(--wps-events-date-color);
	line-height: 1;
	transition:
		background-color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing),
		border-color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing),
		color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing);
}

/* Date box on card hover and keyboard focus */
.wps-events-card:hover .wps-events-date-box,
.wps-events-card:focus-visible .wps-events-date-box {
	border-color: var(--wps-events-date-hover-background);
	background: var(--wps-events-date-hover-background);
	color: var(--wps-events-date-hover-color);
	/* Hover-in: the text turns white twice as fast as the background fills in.
	   Hover-out uses the base rule, so text and background fade back together. */
	transition:
		background-color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing),
		border-color var(--wps-events-card-transition-duration) var(--wps-events-card-transition-easing),
		color var(--wps-events-date-text-transition-duration) var(--wps-events-card-transition-easing);
}

.wps-events-date-box__day {
	font-family: var(--wps-events-date-day-font-family);
	font-size: var(--wps-events-date-day-font-size);
	font-weight: var(--wps-events-date-day-font-weight);
}

.wps-events-date-box__month {
	font-family: var(--wps-events-date-month-font-family);
	font-size: var(--wps-events-date-month-font-size);
	font-weight: var(--wps-events-date-month-font-weight);
	text-transform: var(--wps-events-date-month-text-transform);
}

/* Narrow containers: date box above the content */
@container (max-width: 15rem) {
	.wps-events-card--detailed {
		grid-template-columns: minmax(0, 1fr);
	}

	.wps-events-date-box {
		justify-self: start;
	}

	.wps-events-date-box__day {
		font-size: calc(var(--wps-events-date-day-font-size) * 0.75);
	}
}


/*
 * ==========================================================================
 * 4. Template: event-list-classic (overrides)
 *    Same markup and rules as default (section 3); only these variables differ.
 *    Must stay after section 1 so these values win.
 * ==========================================================================
 */

.wps-events-list--classic {
	/* Colors – date box: no background, no border; text follows the card hover color */
	--wps-events-date-background: transparent;
	--wps-events-date-border: none;
	--wps-events-date-color: #445370;
	--wps-events-date-hover-background: transparent;
	--wps-events-date-hover-color: var(--wps-events-hover-color); /* same highlight as the rest of the card */

	/* Layout – date box */
	--wps-events-date-box-width: calc(var(--wps-events-date-day-font-size) * 1.25); /* follows the day size (30px at 24px), not the theme's text size */
	--wps-events-date-box-padding: 0.5em 0; /* vertical only */

	/* Typography */
	--wps-events-title-font-size: 14px;
	--wps-events-title-font-weight: 700;
	--wps-events-datetime-font-size: 12px;
	--wps-events-date-day-font-size: 24px;
	--wps-events-date-month-font-size: 11px;
}


/*
 * ==========================================================================
 * 5. Calendar link – all templates
 *    The link is a sibling of .wps-events-list, so it cannot inherit the
 *    variables above. Its own variables have their defaults inside var();
 *    set them on .wps-events-calendar-link or on any parent (e.g. :root):
 *      --wps-events-calendar-link-color        (currentColor: same color as the event title)
 *      --wps-events-calendar-link-font-family  ("Open Sans", sans-serif)
 *      --wps-events-calendar-link-font-size    (14px)
 *      --wps-events-calendar-link-font-weight  (400)
 *      --wps-events-calendar-link-icon-size    (1em)
 *      --wps-events-calendar-link-icon-gap     (0.25em)
 *      --wps-events-calendar-link-hover-color  (#2768e0: same as --wps-events-hover-color)
 *      --wps-events-calendar-link-min-height   (44px: comfortable click/touch target)
 *      --wps-events-calendar-link-margin       (0: the min-height already adds air)
 *    Hover uses the same duration and easing as the cards (910ms, soft fade).
 * ==========================================================================
 */

/* No space between the list and the link: the list's bottom spacing is dropped when the link follows */
.wps-events-list:has(+ .wps-events-calendar-link) {
	margin-bottom: 0;
}

.wps-events-calendar-link {
	margin: var(--wps-events-calendar-link-margin, 0);
	padding: 0; /* themes such as Divi space paragraphs with padding-bottom */
	font-size: var(--wps-events-calendar-link-font-size, 14px);
}

/* Icon and text; currentColor = the inherited text color, like the event title */
.wps-events-calendar-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wps-events-calendar-link-icon-gap, 0.25em);
	min-height: var(--wps-events-calendar-link-min-height, 44px); /* larger click target, same font size */
	color: var(--wps-events-calendar-link-color, currentColor);
	font-family: var(--wps-events-calendar-link-font-family, "Open Sans", sans-serif);
	font-weight: var(--wps-events-calendar-link-font-weight, 400);
	transition: color var(--wps-events-card-transition-duration, 910ms) var(--wps-events-card-transition-easing, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* Hover and keyboard focus: same text color change as the cards */
.wps-events-calendar-link a:hover,
.wps-events-calendar-link a:focus-visible {
	color: var(--wps-events-calendar-link-hover-color, #2768e0);
}

.wps-events-calendar-link .wps-events-icon {
	width: var(--wps-events-calendar-link-icon-size, 1em);
	height: var(--wps-events-calendar-link-icon-size, 1em);
}


/*
 * ==========================================================================
 * 6. Accessibility: reduced motion – all templates
 *    Must stay last, so it overrides every transition above.
 * ==========================================================================
 */

@media (prefers-reduced-motion: reduce) {
	.wps-events-card,
	.wps-events-calendar-link a,
	.wps-events-date-box,
	.wps-events-card:hover .wps-events-date-box,
	.wps-events-card:focus-visible .wps-events-date-box {
		transition: none;
	}
}