/**
 * Lid Life events — listing component (event card, pagination, hub heading).
 *
 * References ONLY --ll-* custom properties (see lidlife-tokens.css), never
 * Kadence's --global-* variables directly - decision #3's portability rule.
 * Everything is scoped under .ll-events so it can never fight Kadence's own
 * styles elsewhere on the site.
 *
 * Anatomy (structure, spacing, the flex layout, the pagination pattern)
 * follows events-v2.lidlife.co.uk's own stylesheet - the "component anatomy"
 * half of the brief; only colours/fonts are this site's own (see tokens).
 */

/**
 * Container fix (pass 2, 2026-07-23): this site's global Kadence default is
 * `page_content_style: 'unboxed'` (confirmed via `kadence()->option()`, and
 * true even of the real "Motorcycle Event Finder" page - deliberately
 * full-width so its embedded iframe app gets maximum room). Every page is
 * edge-to-edge by default here; there is no theme-level container to lean
 * on, so the events layout has to bound its own width rather than assume
 * one. Matches the app's own content containers (.hdr-inner, .event-list
 * etc. in events-v2's stylesheet): max-width 1440px, 24px side padding
 * (16px on mobile). `.ll-container` is shared by every top-level events
 * wrapper (the card list, the toolbar) so they stay visually aligned.
 */
/* Matches this site's OWN real content width (Kadence's --global-content-width,
   confirmed live at 1290px), not the reference app's arbitrary 1440px - using
   the app's own value made the events section visibly wider than the site's
   header/footer (Matt's review, 2026-07-24). The fallback is that same real
   value, not a guess, in case the variable is ever unset. */
.ll-container {
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.ll-events {
	--ll-tap: 44px; /* app's --tap - minimum touch target, carried as-is (a UX constant, not a brand value) */
}

@media (max-width: 600px) {
	.ll-container {
		padding: 0 16px;
	}
}

/* Optional heading/footer for the [lidlife_events_list] shortcode (e.g. a
   "Latest Events" homepage widget, Matt's request 2026-08-03) - both
   !important on margin for the same reason as .ll-event-card__title below:
   wherever this shortcode is embedded in a normal Kadence content area
   (unlike hub/pillar/region pages, which bypass that wrapper entirely via
   template-events-listing.php), Kadence's own `.single-content h1...h6`
   rule is a compound class+element selector that beats a single class
   here on specificity alone. */
.ll-events__heading {
	font-family: var(--ll-f-display);
	font-size: clamp(20px, 3vw, 28px);
	text-transform: uppercase;
	letter-spacing: -0.3px;
	color: var(--ll-ink);
	margin: 0 0 16px !important;
}

.ll-events__view-all {
	margin: 20px 0 0;
}

.ll-events__view-all a {
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ll-red);
	text-decoration: none;
}

.ll-events__view-all a:hover {
	text-decoration: underline;
}

.ll-events__count {
	font-family: var(--ll-f-body);
	color: var(--ll-steel);
	margin-bottom: 8px;
}

.ll-events__empty {
	font-family: var(--ll-f-body);
	padding: 40px 0;
}

.ll-events__list {
	border-top: 1px solid var(--ll-border);
}

/* Event card - one row per event, matching the app's .event-row anatomy. */
.ll-event-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ll-border);
}

.ll-event-card__date {
	background: var(--ll-ink);
	color: var(--ll-bone);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 10px 12px;
	flex-shrink: 0;
}

.ll-event-card__date-day {
	font-family: var(--ll-f-display);
	font-size: 30px;
	line-height: 1;
}

.ll-event-card__date-month {
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 9px;
	letter-spacing: 2px;
	color: var(--ll-red);
	text-transform: uppercase;
	margin-top: 4px;
}

.ll-event-card__date-weekday {
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 8px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.45);
}

.ll-event-card__body {
	flex: 1;
	min-width: 0;
}

.ll-event-card__category {
	display: inline-block;
	background: var(--ll-red);
	color: var(--ll-bone);
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 8px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 3px 8px;
	margin-bottom: 8px;
	text-decoration: none;
}

/* Now a real link to the category's hub page (Matt's request, 2026-07-25) -
   was a plain <span> before. Darken slightly on hover/focus so it reads as
   clickable without changing the chip's look at rest. */
a.ll-event-card__category:hover,
a.ll-event-card__category:focus {
	background: var(--ll-ink);
}

.ll-event-card__title {
	font-family: var(--ll-f-display);
	font-size: clamp(16px, 2.2vw, 22px);
	text-transform: uppercase;
	letter-spacing: -0.3px;
	/* 1.05 was too tight once titles wrap to two lines - the hover
	   underline sat close enough to the next line that it visually cut
	   through the text (Matt's report, 2026-08-03). */
	line-height: 1.3;
	/* This card is a real <h3> - wherever the shortcode is embedded in a
	   normal Kadence content area (e.g. a homepage widget, unlike hub/
	   pillar/region pages which bypass that flow entirely), Kadence's own
	   `.single-content h1...h6 { margin: 1.5em 0 .5em; }` is a compound
	   class+element selector that beats this single-class rule on
	   specificity, giving titles far more margin than intended. */
	margin: 0 0 8px !important;
}

.ll-event-card__title a {
	color: var(--ll-ink);
	text-decoration: none;
}

.ll-event-card__title a:hover {
	text-decoration: underline;
}

.ll-event-card__location {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-family: var(--ll-f-label);
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ll-steel);
	line-height: 1.4;
	margin: 0 0 8px;
}

.ll-event-card__pin {
	flex-shrink: 0;
}

.ll-event-card__description {
	font-family: var(--ll-f-body);
	color: var(--ll-ink);
	margin: 0;
}

.ll-event-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}

.ll-event-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ll-tap);
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 10px 14px;
	text-decoration: none;
	white-space: nowrap;
}

.ll-event-card__btn--primary {
	background: var(--ll-ink);
	color: var(--ll-bone);
	border: none;
}

.ll-event-card__btn--secondary {
	background: transparent;
	color: var(--ll-ink);
	border: 1px solid var(--ll-ink);
}

/* Pagination - WordPress core's own paginate_links() markup, scoped and
   styled to match the app's PREV / numbered / NEXT pattern rather than
   renamed (core-generated .page-numbers/.prev/.next/.current classes). */
.ll-events__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
	margin-bottom: 40px; /* breathing room before the footer (Matt's request, 2026-07-25) */
}

.ll-events__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ll-tap);
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 9px 14px;
	background: transparent;
	color: var(--ll-steel);
	border: 1px solid var(--ll-border);
	text-decoration: none;
}

.ll-events__pagination .page-numbers.current {
	background: var(--ll-ink);
	color: var(--ll-bone);
	border-color: var(--ll-ink);
}

.ll-events__pagination .page-numbers.dots {
	border: none;
}

/* Hub page heading treatment ("WHAT'S ON" style). */
.ll-events-heading {
	font-family: var(--ll-f-display);
	font-size: clamp(28px, 4vw, 48px);
	text-transform: uppercase;
	letter-spacing: -0.5px;
	color: var(--ll-ink);
	line-height: 1;
	margin: 16px 0;
	/* Originally needed because Kadence's `.single-content h1:first-child
	   { margin-top: 0; }` (more specific than the rule above) zeroed this
	   out - the pillar/hub Pages went through Kadence's normal page.php
	   flow, which wraps content in .single-content. template-events-listing.php
	   now bypasses that flow entirely (mirrors taxonomy-region.php), so
	   .single-content no longer wraps this heading and the conflict is
	   gone structurally. Left as !important anyway as cheap insurance. */
	margin-top: 60px !important;
}

/* Shared standfirst paragraph class - region archives (taxonomy-region.php)
   and hub pages ([lidlife_type_standfirst]) both pull their intro copy from
   a taxonomy term's own Description field, so both render it with this one
   class (renamed from .ll-region-archive__standfirst, 2026-07-25, when hubs
   started using it too). */
.ll-standfirst {
	font-family: var(--ll-f-body);
	margin: 0 0 20px;
}

.ll-pillar-finder-heading {
	font-family: var(--ll-f-display);
	font-size: clamp(20px, 3vw, 32px);
	text-transform: uppercase;
	color: var(--ll-ink);
	margin: 32px 0 12px;
	/* Same Kadence `:first-child` conflict as .ll-events-heading above -
	   also structurally resolved now by template-events-listing.php,
	   left as !important as cheap insurance. */
	margin-top: 32px !important;
}

/* Events toolbar (class-events-toolbar.php) - the black bar: search left,
   event-type dropdown right. Styled on the app's own header bar. */
.ll-toolbar {
	background: var(--ll-ink);
}

.ll-toolbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	flex-wrap: wrap;
}

.ll-toolbar__search {
	flex: 1;
	min-width: 200px;
	max-width: 420px;
	display: flex;
	align-items: center;
}

/* The form's screen-reader-only label was rendering differently across page
   contexts (centred correctly on region archives, sitting high with excess
   space below on Pages) - rather than rely on Kadence's own
   .screen-reader-text definition (whatever it does differently in each
   context), force the standard, layout-proof hiding pattern explicitly:
   position:absolute removes it from flow entirely regardless of context, so
   it can never affect the search box's own height/centring again (Matt's
   review, 2026-07-24). */
.ll-toolbar__search .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ll-toolbar__search input[type="search"] {
	width: 100%;
	min-height: 44px;
	border: none;
	padding: 0 14px;
	font-family: var(--ll-f-body);
	font-size: 15px;
	background: var(--ll-bone);
	color: var(--ll-ink);
	box-sizing: border-box;
}

/* Real finding (Matt's review, 2026-07-24): the placeholder was unreadable -
   browsers default placeholder colour to a faint grey with reduced opacity,
   which read as nearly invisible against --ll-bone. Explicit colour + full
   opacity (Firefox specifically halves opacity by default otherwise). */
.ll-toolbar__search input[type="search"]::placeholder {
	color: var(--ll-steel);
	opacity: 1;
}

.ll-toolbar__dropdowns {
	display: flex;
	gap: 15px;
	flex-shrink: 0;
}

.ll-toolbar__dropdown {
	position: relative;
	flex-shrink: 0;
}

.ll-toolbar__dropdown summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--ll-red);
	color: var(--ll-bone);
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 12px;
	letter-spacing: 1.5px;
	line-height: 1;
	white-space: nowrap; /* longer labels (INTERNATIONAL, RACING CALENDAR)
		were wrapping their arrow onto a second line while short ones
		(LONDON) didn't, producing inconsistent button heights - Matt's
		screenshot review, 2026-07-24. */
}

.ll-toolbar__dropdown summary::-webkit-details-marker {
	display: none;
}

.ll-toolbar__dropdown summary::after {
	content: "\25BE";
	margin-left: 8px;
}

.ll-toolbar__dropdown[open] summary::after {
	content: "\25B4";
}

.ll-toolbar__menu {
	position: absolute;
	top: calc(100% + 2px);
	right: 0;
	min-width: 220px;
	width: max-content;
	background: var(--ll-ink);
	display: flex;
	flex-direction: column;
	z-index: 20;
}

.ll-toolbar__menu a {
	display: block;
	padding: 12px 18px;
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 12px;
	letter-spacing: 1.5px;
	white-space: nowrap; /* same reasoning as the summary button - a
		two/three-word entry like "Racing Calendar" wrapping to a second
		line would sit taller than single-word entries in the same menu. */
	color: var(--ll-bone);
	text-decoration: none;
}

.ll-toolbar__menu a[aria-current="page"] {
	background: var(--ll-red);
	color: var(--ll-bone);
}

.ll-toolbar__menu a:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ll-toolbar__menu a[aria-current="page"]:hover {
	background: var(--ll-red);
}

/* Live counts, e.g. "EAST MIDLANDS (34)" - regular weight against the
   label's own bold/label weight, so the number reads as a secondary
   detail rather than part of the name itself (Matt's spec, 2026-07-25). */
.ll-toolbar__count {
	font-weight: normal;
	letter-spacing: normal;
}

/* The menu's `right: 0; width: max-content;` anchoring works on desktop,
   where there's room either side of the button, but on mobile the EVENT
   TYPE button sits well left of centre while its own menu (sized to fit
   "RACING CALENDAR") is wider than the gap between the button and the
   left edge of the screen - it rendered partially off-canvas, cutting
   off its own left edge (Matt's screenshot review, 2026-07-25). Anchor
   the menu to the whole toolbar row instead of the individual button, so
   it spans the row's own width and can never overflow the viewport
   regardless of which button opened it or how long its labels are. Note:
   without JS (mutual-exclusivity is a JS enhancement), deliberately
   opening both dropdowns at once would now stack their panels at the
   same position rather than side by side as on desktop - an acceptable,
   documented trade-off for a rare non-JS edge case. */
@media (max-width: 600px) {
	.ll-toolbar__inner {
		position: relative;
	}

	.ll-toolbar__dropdown {
		position: static;
	}

	.ll-toolbar__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
	}
}

/* Interim single-event meta block (class-single-event-content.php) - basic
   token styling only, deliberately not a real design (see CLAUDE.md). */
.ll-event-meta__summary {
	font-family: var(--ll-f-body);
	font-size: 1.1em;
	margin: 0 0 20px;
}

/* Kadence's own Customizer-generated content padding (2rem, dropping to
   1.5rem on tablet/mobile) applies sitewide to `.entry-content-wrap` on
   every single post/page going through its normal render flow - removed
   here for single-event pages specifically (Matt's request, 2026-07-25),
   scoped via WP's own `single-event` body class so blog posts and Kadence's
   other single-post content keep their default padding untouched. */
body.single-event .entry-content-wrap {
	padding: 0 !important;
}

/* "Back to {category}" link, rendered just above the event title (see
   class-single-event-content.php - hooked before the title, not via
   the_content, since the toolbar/back-link need to sit above the heading,
   not just above the meta block). Block-level, left-aligned by default. */
.ll-event-back-link {
	font-family: var(--ll-f-label);
	font-size: 12px;
	letter-spacing: 1px;
	margin: 16px 0 4px;
}

.ll-event-back-link a {
	color: var(--ll-steel);
	text-decoration: none;
}

.ll-event-back-link a:hover {
	color: var(--ll-red);
}

.ll-event-meta {
	border-top: 1px solid var(--ll-border);
	border-bottom: 1px solid var(--ll-border);
	padding: 16px 0;
	margin: 0 0 24px;
}

.ll-event-meta p {
	font-family: var(--ll-f-body);
	margin: 0 0 8px;
}

.ll-event-meta__label {
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ll-steel);
	margin-right: 6px;
}

.ll-event-meta__category a,
.ll-event-meta__region a {
	color: var(--ll-red);
}

.ll-event-meta__map a,
.ll-event-meta__link a {
	font-family: var(--ll-f-label);
	font-weight: var(--ll-f-label-weight);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ll-red);
}

@media (max-width: 600px) {
	.ll-event-card {
		flex-wrap: wrap;
	}

	.ll-event-card__actions {
		flex-direction: row;
		width: 100%;
	}

	.ll-event-card__btn {
		flex: 1;
	}
}