/* Lloyd Calendar - front end. Theme-agnostic by design: sets its own
   structure (cards, badges, spacing, shadows) so an event page looks
   intentionally designed on any theme, but takes its actual colour and
   type from the surrounding site wherever it can (currentColor, inherit,
   and a --lloyca-accent that picks up the active theme's own colour)
   rather than imposing a separate visual identity of its own.

   --lloyca-accent has no reliable CSS-only source: a theme names its
   own palette colours however it likes in theme.json (confirmed
   directly against a real one - none of its four colours were called
   "primary" or "contrast"), and setting a link colour there
   (styles.elements.link.color.text) compiles straight into a CSS rule
   on `a` elements, not a separate reusable custom property - so there
   was never a variable name here to guess correctly. accent-color.js
   sets the real value instead, by rendering an actual link and reading
   its computed colour back; this is only the static fallback used
   before that script runs (or if it can't, e.g. JS disabled). */
:root {
	--lloyca-accent: #2271b1;
}

.lloyca-event-list,
.lloyca-event-page,
.lloyca-event-single,
.lloyca-simple-list {
	--lc-muted: color-mix( in srgb, currentColor 60%, transparent );
	--lc-border: color-mix( in srgb, currentColor 14%, transparent );
	--lc-surface: color-mix( in srgb, currentColor 4%, transparent );
}

.lloyca-no-events {
	opacity: 0.7;
}

/* ---- Date badge - the one date that matters for an event, given the
   same visual weight as its title rather than a text line easy to skim
   past. Two sizes: full on the single event page's own hero, small
   overlaid on a list card's thumbnail. A multi-day event gets two of
   these - one per end - joined by a small animated arrow suggesting the
   span from one to the other, rather than a single badge that only ever
   named the start and left the event's actual length unsaid. ---- */

.lloyca-date-badge-wrap {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lloyca-date-badge-wrap--normal {
	left: 20px;
	bottom: -30px;
	font-size: 1em;
}

.lloyca-date-badge-wrap--small {
	top: 10px;
	left: 10px;
	gap: 4px;
	font-size: 0.85em;
}

.lloyca-date-badge {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 6px;
	min-width: 84px;
	background: color-mix( in srgb, Canvas 92%, transparent );
	color: CanvasText;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
	line-height: 1.05;
}

.lloyca-date-badge-wrap--small .lloyca-date-badge {
	min-width: 58px;
	padding: 6px 5px;
}

.lloyca-date-badge__weekday {
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --lloyca-accent );
}

.lloyca-date-badge__day {
	font-size: 1.7em;
	font-weight: 800;
}

.lloyca-date-badge__month {
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* The "from, to" connector - a small filled circle so it reads as its
   own thing between the two badges, not just a loose icon, with a
   gentle side-to-side nudge hinting at the direction of travel from the
   start date to the end date. */
.lloyca-date-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --lloyca-accent );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.22 );
}

.lloyca-date-badge-wrap--small .lloyca-date-arrow {
	width: 18px;
	height: 18px;
}

.lloyca-date-arrow__icon {
	width: 15px;
	height: 15px;
	color: #fff;
	animation: lloyca-date-arrow-nudge 1.6s ease-in-out infinite;
}

.lloyca-date-badge-wrap--small .lloyca-date-arrow__icon {
	width: 10px;
	height: 10px;
}

@keyframes lloyca-date-arrow-nudge {
	0%, 100% {
		transform: translateX( 0 );
	}
	50% {
		transform: translateX( 3px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lloyca-date-arrow__icon {
		animation: none;
	}
}

/* ---- Events list ---- */

.lloyca-event-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 28px;
}

@media ( max-width: 480px ) {
	.lloyca-event-list {
		grid-template-columns: 1fr;
	}
}

.lloyca-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: var( --lc-surface );
	border: 1px solid var( --lc-border );
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lloyca-event-card:hover,
.lloyca-event-card:focus-within {
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -3px );
}

.lloyca-event-card__image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient( 135deg, color-mix( in srgb, var( --lloyca-accent ) 22%, transparent ), color-mix( in srgb, var( --lloyca-accent ) 6%, transparent ) );
}

.lloyca-event-card__image img,
.lloyca-event-card__image-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lloyca-event-card__image-fallback {
	position: relative;
}

.lloyca-event-card__image-fallback::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient( circle at 30% 30%, color-mix( in srgb, var( --lloyca-accent ) 30%, transparent ), transparent 60% );
}

.lloyca-event-card__image img {
	transition: transform 0.4s ease;
}

.lloyca-event-card:hover .lloyca-event-card__image img,
.lloyca-event-card:focus-within .lloyca-event-card__image img {
	transform: scale( 1.05 );
}

.lloyca-event-card__body {
	padding: 16px 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lloyca-event-card__title {
	margin: 0 0 2px;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.lloyca-event-card__title a {
	text-decoration: none;
	color: inherit;
}

.lloyca-event-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.lloyca-event-datetime {
	display: block;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var( --lloyca-accent );
	margin: 0;
}

/* The events list card's date/time line - a leading clock icon (same
   treatment as the pin icon on the address line below it), then either
   a single date/time box or a "from -> to" pair. */
.lloyca-event-card__when {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
}

.lloyca-clock-icon {
	width: 1em;
	height: 1em;
	flex: none;
	margin-top: 0.2em;
	opacity: 0.7;
	color: var( --lloyca-accent );
}

.lloyca-event-daterange {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.lloyca-event-daterange__part {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.lloyca-event-daterange__date {
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var( --lloyca-accent );
}

.lloyca-event-daterange__time {
	font-size: 0.8em;
	color: var( --lc-muted );
}

.lloyca-event-daterange__arrow {
	flex: none;
	color: var( --lc-muted );
	font-size: 0.9em;
}

.lloyca-event-card__location,
.lloyca-event-address {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0.2em 0 0;
	color: var( --lc-muted );
	font-size: 0.88em;
	line-height: 1.4;
}

.lloyca-pin-icon {
	width: 1em;
	height: 1em;
	flex: none;
	margin-top: 0.2em;
	opacity: 0.7;
}

/* ---- Simple list ([lloydcal_simple_list]) - plain, link-free rows: no
   image, no linking out to each event's own page, everything printed
   right there. Deliberately closer to a definition list than the card
   grid's own boxed-up styling. ---- */

.lloyca-simple-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lloyca-simple-list__item {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.7em 0;
	border-bottom: 1px solid var( --lc-border );
}

.lloyca-simple-list__item:first-child {
	padding-top: 0;
}

.lloyca-simple-list__item:last-child {
	border-bottom: none;
}

.lloyca-simple-list__title {
	font-weight: 600;
}

.lloyca-simple-list__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25em;
	row-gap: 0.25em;
}

.lloyca-simple-list .lloyca-event-datetime,
.lloyca-simple-list__location,
.lloyca-simple-list__w3w,
a.lloyca-simple-list__subscribe {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var( --lc-muted );
	font-size: 0.88em;
}

.lloyca-simple-list__w3w-icon {
	color: #e11f26;
	font-weight: 700;
}

.lloyca-calendar-icon {
	width: 1em;
	height: 1em;
	flex: none;
	opacity: 0.7;
}

a.lloyca-simple-list__subscribe {
	text-decoration: none;
}

a.lloyca-simple-list__subscribe:hover {
	color: var( --lloyca-accent );
}

.lloyca-calendar-add-icon {
	width: 1em;
	height: 1em;
	opacity: 0.7;
}

.lloyca-simple-list__details {
	font-size: 0.92em;
}

.lloyca-simple-list__details summary {
	cursor: pointer;
	color: var( --lloyca-accent );
	width: fit-content;
}

.lloyca-simple-list__description {
	margin-top: 0.4em;
	color: var( --lc-muted );
}

.lloyca-simple-list__description > :first-child {
	margin-top: 0;
}

.lloyca-simple-list__description > :last-child {
	margin-bottom: 0;
}

.lloyca-simple-list__location .lloyca-pin-icon {
	margin-top: 0;
}

/* ---- Single event page (templates/single-event.php) ---- */

.lloyca-event-page-wrap {
	max-width: 760px;
	margin-inline: auto;
	padding-block: clamp( 24px, 4vw, 48px );
}

.lloyca-event-page__hero {
	/* overflow stays visible, not hidden - the date badge below
	   deliberately overlaps the bottom edge, and clipping it just to
	   round the image's corners would cut the badge off too. The image
	   itself gets the border-radius instead (border-radius on an <img>
	   clips its own corners just fine). */
	position: relative;
	aspect-ratio: 16 / 7;
	border-radius: 16px;
	background: linear-gradient( 135deg, color-mix( in srgb, var( --lloyca-accent ) 55%, transparent ), color-mix( in srgb, var( --lloyca-accent ) 15%, transparent ) );
	margin-bottom: 44px;
}

.lloyca-event-page__hero--plain {
	aspect-ratio: 16 / 5;
}

.lloyca-event-page__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 16px;
}

.lloyca-event-page__title {
	font-size: clamp( 1.7em, 4vw, 2.4em );
	line-height: 1.15;
	margin: 0 0 18px;
	text-wrap: balance;
}

.lloyca-event-page .lloyca-event-datetime {
	font-size: 1.05em;
	margin-bottom: 0.6em;
}

.lloyca-event-page .lloyca-event-address {
	font-size: 1em;
}

.lloyca-event-description {
	margin-top: 1.5em;
	line-height: 1.7;
}

.lloyca-event-page__back {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var( --lc-border );
}

.lloyca-event-page__back a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.lloyca-event-page__back a:hover,
.lloyca-event-page__back a:focus-visible {
	text-decoration: underline;
}

/* ---- [lloydcal_single] shortcode embed - a more modest inline article,
   for anyone placing an event's details inside other content by hand
   rather than visiting its own dedicated page. ---- */

.lloyca-event-single .lloyca-event-datetime {
	font-size: 0.9em;
}

/* ---- Map + calendar actions - shared by the single page and the
   shortcode embed alike. ---- */

.lloyca-event-map {
	margin: 1.25em 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var( --lc-border );
}

.lloyca-event-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

.lloyca-event-map-link {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.85em;
}

.lloyca-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1.25em 0;
}

.lloyca-event-actions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var( --lloyca-accent );
	color: #fff;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: 600;
	transition: opacity 0.15s ease;
}

.lloyca-event-actions a:hover,
.lloyca-event-actions a:focus-visible {
	opacity: 0.85;
}

.lloyca-event-actions a:nth-child(2) {
	background: transparent;
	color: var( --lloyca-accent );
	box-shadow: inset 0 0 0 1.5px var( --lloyca-accent );
}

/* ---- Calendar grid view ---- */

.lloyca-calendar {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}

.lloyca-calendar caption {
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 0.75em;
	text-align: left;
}

.lloyca-calendar th {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
	padding: 6px;
	text-align: center;
}

.lloyca-calendar td {
	border: 1px solid rgba( 127, 127, 127, 0.15 );
	vertical-align: top;
	padding: 6px;
	height: 90px;
	width: 14.28%;
}

.lloyca-calendar td.lloyca-calendar-empty {
	background: rgba( 127, 127, 127, 0.04 );
}

.lloyca-calendar-day-number {
	display: block;
	font-size: 0.85em;
	opacity: 0.6;
	margin-bottom: 4px;
}

.lloyca-calendar-event {
	display: block;
	font-size: 0.8em;
	line-height: 1.3;
	margin-bottom: 2px;
	padding: 2px 5px;
	border-radius: 4px;
	background: rgba( 127, 127, 127, 0.12 );
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lloyca-calendar-event:hover,
.lloyca-calendar-event:focus-visible {
	background: rgba( 127, 127, 127, 0.22 );
}

.lloyca-calendar-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75em;
}

.lloyca-calendar-nav a {
	text-decoration: none;
}

@media ( max-width: 600px ) {
	.lloyca-calendar,
	.lloyca-calendar tbody,
	.lloyca-calendar tr,
	.lloyca-calendar td {
		display: block;
		width: 100%;
	}

	.lloyca-calendar thead {
		display: none;
	}

	.lloyca-calendar td {
		height: auto;
		min-height: 2.5em;
	}

	.lloyca-calendar td:empty,
	.lloyca-calendar td.lloyca-calendar-empty:not(:has(.lloyca-calendar-event)) {
		display: none;
	}
}