/**
 * Live Event Reporting — frontend styles.
 *
 * Deliberately low-specificity and built on custom properties: Elementor's
 * Style controls write inline rules against these same selectors, and a theme
 * should be able to override anything here without an !important war.
 */

/*
 * The custom properties are declared on every top-level plugin container, not
 * just the feed — the status bar, key-moments box and sidebar widget are all
 * placed independently on a page and must theme correctly on their own.
 */
.lerp-feed,
.lerp-status,
.lerp-key,
.lerp-sidebar__inner {
	--lerp-accent: #d7263d;
	--lerp-border: rgba( 0, 0, 0, 0.12 );
	--lerp-muted: rgba( 0, 0, 0, 0.6 );
	--lerp-highlight: rgba( 215, 38, 61, 0.08 );
	--lerp-highlight-duration: 4s;
	--lerp-highlight-animation: lerp-flash;
	--lerp-gap: 2.5rem;

	--lerp-divider-color: var( --lerp-border );
	--lerp-divider-width: 1px;
	--lerp-divider-display: block;
}

.lerp-feed {
	position: relative;
}

/* -- Status bar --------------------------------------------------------- */

.lerp-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.lerp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.25em 0.7em;
	border-radius: 2em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.lerp-badge--live {
	background: var( --lerp-accent );
	color: #fff;
}

.lerp-badge--ended,
.lerp-badge--upcoming {
	background: rgba( 0, 0, 0, 0.07 );
	color: var( --lerp-muted );
}

.lerp-badge__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	animation: lerp-pulse 1.8s ease-in-out infinite;
}

@keyframes lerp-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale( 1 );
	}
	50% {
		opacity: 0.35;
		transform: scale( 0.7 );
	}
}

.lerp-status__updated {
	font-size: 0.8125rem;
	color: var( --lerp-muted );
}

/* -- New-updates banner -------------------------------------------------- */

.lerp-banner {
	/*
	 * Not `sticky` here, even though sticky is the intended default.
	 *
	 * The Elementor switcher that controls this can only emit CSS when it is
	 * on — an off switcher has an empty value and writes nothing. So the
	 * stylesheet has to default to the *off* state and let the control add
	 * stickiness, otherwise switching it off would silently do nothing. The
	 * widget's own default is on, so a new feed still sticks.
	 */
	position: relative;
	top: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	padding: 0.5rem 0;
	pointer-events: none;
}

.lerp-banner[hidden] {
	display: none;
}

.lerp-banner__button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: 2em;
	background: var( --lerp-accent );
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lerp-banner__button:hover,
.lerp-banner__button:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.22 );
}

/* -- The stream ---------------------------------------------------------- */

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

.lerp-pinned {
	margin-bottom: var( --lerp-gap );
	padding: 1rem 1.25rem;
	border: 1px solid var( --lerp-border );
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.02 );
}

.lerp-pinned__heading {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --lerp-muted );
}

.lerp-item {
	position: relative;
	margin-bottom: var( --lerp-gap );
}

/*
 * The separator is a pseudo-element floating in the gap *between* items rather
 * than a border on the item itself. Two reasons, both of which show up the
 * moment you style updates as cards:
 *
 * 1. The item's own `border` property stays entirely free, so a border set in
 *    Elementor draws a clean box instead of fighting a hard-coded bottom edge.
 * 2. It sits outside the item's box, so the key-moment edge marker can span the
 *    item exactly without the separator cutting across it.
 */
.lerp-item::after {
	content: "";
	display: var( --lerp-divider-display );
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc( var( --lerp-gap ) / -2 );
	height: var( --lerp-divider-width );
	background: var( --lerp-divider-color );
}

.lerp-item:last-child {
	margin-bottom: 0;
}

.lerp-item:last-child::after {
	content: none;
}

.lerp-item:focus {
	outline: none;
}

/*
 * Head row: timestamp and flags on the left, share on the right, both centred
 * against each other. Centring only reads well because the timestamp no longer
 * breaks mid-value — a two-line ragged stamp beside a centred button would
 * look accidental.
 */
.lerp-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.lerp-item__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem;
	min-width: 0;
}

.lerp-item__actions {
	flex: 0 0 auto;
	margin-left: auto;
}

.lerp-item__time {
	display: inline-flex;
	align-items: baseline;
	/*
	 * Wrap between the parts, never inside one. Without this a narrow column
	 * breaks a timestamp mid-value — "August 8," on one line and "2026," on the
	 * next, with "5:30" split from "PM" — which reads as broken rather than
	 * wrapped. Now the line breaks between date, time and zone instead.
	 */
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --lerp-muted );
	font-variant-numeric: tabular-nums;
}

/*
 * One timestamp, two readings. Both are in the markup and CSS picks; the script
 * flips the class when an update crosses the 24-hour mark, so a page that was
 * cached while an update was fresh still ends up showing a clock time.
 */
.lerp-item__time.is-relative .lerp-item__clock,
.lerp-item__time.is-relative .lerp-item__date {
	display: none;
}

.lerp-item__time:not( .is-relative ) .lerp-item__ago {
	display: none;
}

/* The timezone belongs to the clock time, so it is hidden alongside it. */
.lerp-item__time.is-relative .lerp-item__tz {
	display: none;
}

.lerp-item__tz,
.lerp-sidebar__tz {
	color: inherit;
}

/*
 * Time and date are separate flex children, so each can take its own
 * background, border and padding from the Style tab independently.
 *
 * Each is also a flex container in its own right. That is what makes "Equal
 * height" actually usable: stretching the two boxes to match is only half the
 * job, because the text would otherwise stay pinned to the top of whichever
 * box grew. Centring their own content means a chip can be given any height —
 * by stretch or by a min-height — and still look deliberate.
 */
.lerp-item__clock,
.lerp-item__date,
.lerp-item__tz {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	line-height: 1.5;
	/* Each part is indivisible — see the wrapping note on the container. */
	white-space: nowrap;
}

.lerp-item__clock {
	font-weight: 700;
}

/* The small meta labels are inline-block so background, padding and radius
   from the Elementor Style controls actually apply. Inline elements ignore
   vertical padding and would overlap the lines around them. */
.lerp-item__kicker,
.lerp-item__pin,
.lerp-item__key {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}

.lerp-item__kicker {
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var( --lerp-accent );
}

.lerp-item__pin {
	color: var( --lerp-muted );
}

.lerp-item__key {
	font-weight: 700;
	color: var( --lerp-key-edge, var( --lerp-accent ) );
}

/* A key moment needs to be visible in the feed itself, not only in the
   Key Moments widget. The edge marker is drawn with a pseudo-element so it
   sits outside the item's own padding and survives any background set on it. */
.lerp-item--key {
	--lerp-key-edge: var( --lerp-accent );
	--lerp-key-edge-width: 3px;

	position: relative;
	padding-left: calc( var( --lerp-key-edge-width ) + 0.9rem );

	/* Clips the edge marker to the item's own corners. Without this the bar's
	   square ends sit outside a rounded card: `border-radius: inherit` on a
	   3px-wide element clamps to a radius far smaller than the container's, so
	   the corners still poke past the curve. Scoped to key items only — the
	   feed wrapper must never get this, or the sticky banner stops sticking. */
	overflow: hidden;
}

/* Spans the item box exactly. Because the separator now lives outside that box,
   nothing crosses the marker. */
.lerp-item--key::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var( --lerp-key-edge-width );
	/* Follows the item's own corner, so the marker curves with a card instead
	   of butting a square end against a rounded one. */
	border-radius: inherit;
	background: var( --lerp-key-edge );
}

.lerp-item__title {
	margin: 0 0 0.5rem;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lerp-item__byline {
	margin: 0 0 0.9rem;
	font-size: 0.9375rem;
	color: var( --lerp-muted );
}

.lerp-item__author {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lerp-item__content > *:first-child {
	margin-top: 0;
}

.lerp-item__content > *:last-child {
	margin-bottom: 0;
}

.lerp-item__content img,
.lerp-item__content iframe,
.lerp-item__content video {
	max-width: 100%;
	height: auto;
}

.lerp-item__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var( --lerp-muted );
}

.lerp-item__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* -- Share ---------------------------------------------------------------- */

.lerp-share {
	--lerp-share-size: 2.75rem;
	--lerp-share-icon: 1.25rem;
	--lerp-share-surface: #fff;

	/*
	 * Icon colour is a variable rather than inherited text colour, and that is
	 * deliberate. Copy-link is a <button> while the other options are <a>, so
	 * any theme rule styling buttons — and every theme has one — reached the
	 * copy icon and nothing else, leaving it a different colour from its
	 * neighbours. Chasing that with specificity is an arms race that would end
	 * up outranking the plugin's own Style controls too. Painting the icons
	 * from a property the element type cannot influence settles it outright.
	 */
	--lerp-share-ink: rgba( 0, 0, 0, 0.68 );
	--lerp-share-ink-active: #fff;

	/* The toggle has its own pair. Sharing one variable would put two Style
	   controls on the same property, where the later one silently wins. */
	--lerp-share-toggle-ink: rgba( 0, 0, 0, 0.68 );
	--lerp-share-toggle-ink-active: #fff;

	position: relative;
	display: inline-flex;
}

.lerp-share__icon {
	fill: var( --lerp-share-ink );
}

.lerp-share__glyph {
	stroke: var( --lerp-share-toggle-ink );
}

.lerp-share .lerp-share__link:hover .lerp-share__icon,
.lerp-share .lerp-share__link:focus-visible .lerp-share__icon,
.lerp-share .lerp-share__link--copy.is-copied .lerp-share__icon {
	fill: var( --lerp-share-ink-active );
}

.lerp-share .lerp-share__toggle:hover .lerp-share__glyph,
.lerp-share.is-open .lerp-share__toggle .lerp-share__glyph {
	stroke: var( --lerp-share-toggle-ink-active );
}

.lerp-share .lerp-share__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --lerp-share-size );
	height: var( --lerp-share-size );
	padding: 0;
	border: 1px solid var( --lerp-border );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lerp-share .lerp-share__toggle:hover,
.lerp-share.is-open .lerp-share__toggle {
	background: var( --lerp-accent );
	border-color: var( --lerp-accent );
	color: #fff;
}

.lerp-share__glyph {
	width: var( --lerp-share-icon );
	height: var( --lerp-share-icon );
}

/*
 * The menu sits above the button and is taken out of flow, so opening it never
 * reflows the update or shifts anything below it — which on a live feed would
 * move the very text someone is reading.
 */
.lerp-share__menu {
	position: absolute;
	bottom: calc( 100% + 0.5rem );
	top: auto;
	left: 50%;
	transform: translateX( -50% );
	z-index: 6;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --lerp-border );
	border-radius: 8px;
	background: var( --lerp-share-surface );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.14 );
}

.lerp-share__menu[hidden] {
	display: none;
}

/* Flipped by the script when there is no room above. */
.lerp-share.is-below .lerp-share__menu {
	bottom: auto;
	top: calc( 100% + 0.5rem );
}

/*
 * Copy-link is a <button> while the rest are <a>, and themes style buttons.
 * A rule as ordinary as `.entry-content button { color: … }` outweighs a bare
 * `color: inherit`, which left the copy icon a different colour from its
 * neighbours. The `.lerp-share` ancestor lifts these above such a rule, and the
 * reset covers the rest of what a theme button rule tends to bring with it —
 * font, background, border — so the two element types render identically.
 */
.lerp-share .lerp-share__link,
.lerp-share .lerp-share__toggle {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}

.lerp-share .lerp-share__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc( var( --lerp-share-size ) * 1.35 );
	height: calc( var( --lerp-share-size ) * 1.35 );
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.lerp-share .lerp-share__link + .lerp-share__link {
	border-top: 1px solid var( --lerp-border );
}

.lerp-share .lerp-share__link:hover,
.lerp-share .lerp-share__link:focus-visible {
	background: var( --lerp-accent );
	color: #fff;
}

.lerp-share__icon {
	width: var( --lerp-share-icon );
	height: var( --lerp-share-icon );
}

/* Confirmation for the copy-link action, which has no page of its own to
   navigate to and so needs to say something itself. */
.lerp-share .lerp-share__link--copy.is-copied {
	background: var( --lerp-accent );
	color: #fff;
}

.lerp-share__link--copy.is-copied::after {
	content: attr( data-copied-label );
	position: absolute;
	right: calc( 100% + 0.5rem );
	padding: 0.25em 0.6em;
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.8 );
	color: #fff;
	font-size: 0.75rem;
	white-space: nowrap;
}

/* Freshly inserted and deep-linked items get a brief, quiet highlight. */
.lerp-item--new,
.lerp-item--targeted {
	animation: var( --lerp-highlight-animation ) var( --lerp-highlight-duration ) ease-out 1;
}

/*
 * The highlight is an inset shadow rather than a background.
 *
 * Animating `background` would mean the animation owns that property for its
 * whole run — so an item styled as a card would lose its own background for
 * four seconds and then snap back, which looks like a rendering fault. An
 * inset shadow layers the tint over whatever background is already there, and
 * follows the item's border radius for free.
 */
@keyframes lerp-flash {
	from {
		box-shadow: inset 0 0 0 9999px var( --lerp-highlight );
	}
	to {
		box-shadow: inset 0 0 0 9999px transparent;
	}
}

/* Inside the pinned block the items are the whole content, so they drop the
   stream's separators. A pinned item left inline keeps them. */
.lerp-list--pinned .lerp-item {
	margin-bottom: 1rem;
}

.lerp-list--pinned .lerp-item::after {
	content: none;
}

/* -- Load more ----------------------------------------------------------- */

.lerp-more {
	margin-top: var( --lerp-gap );
	text-align: center;
}

.lerp-more[hidden] {
	display: none;
}

.lerp-more__button {
	padding: 0.7em 1.6em;
	border: 1px solid var( --lerp-border );
	border-radius: 2em;
	background: transparent;
	color: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

.lerp-more__button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.lerp-empty {
	color: var( --lerp-muted );
	font-style: italic;
}

/* -- Key moments --------------------------------------------------------- */

.lerp-key {
	padding: 1rem 1.25rem;
	border: 1px solid var( --lerp-border, rgba( 0, 0, 0, 0.12 ) );
	border-radius: 6px;
}

.lerp-key__heading {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lerp-key__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lerp-key__item + .lerp-key__item {
	margin-top: 0.5rem;
}

.lerp-key__link {
	display: flex;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
}

.lerp-key__time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	opacity: 0.7;
}

.lerp-key__link:hover .lerp-key__label {
	text-decoration: underline;
}

/* -- Sidebar widget ------------------------------------------------------ */

.lerp-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lerp-sidebar__item + .lerp-sidebar__item {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
}

.lerp-sidebar__label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.lerp-sidebar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	white-space: nowrap;
	margin-bottom: 0.2rem;
	font-size: 0.75rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.lerp-sidebar__time {
	font-weight: 600;
}

/*
 * An explicit size rather than an inherited one. Sidebars often sit inside a
 * theme region where the ambient font size is set for headings, which left the
 * update titles rendering far larger than a sidebar wants and pushed each entry
 * to three or four lines.
 */
.lerp-sidebar__link {
	display: block;
	text-decoration: none;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.lerp-sidebar__link:hover {
	text-decoration: underline;
}

.lerp-sidebar__excerpt {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	opacity: 0.8;
}

/* -- "View all" link ------------------------------------------------------ */

.lerp-sidebar__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: 1rem;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-decoration: none;
}

.lerp-sidebar__more .lerp-chevron {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.lerp-sidebar__more:hover .lerp-chevron {
	transform: translateX( 0.15em );
}

@media ( prefers-reduced-motion: reduce ) {
	.lerp-sidebar__more .lerp-chevron {
		transition: none;
	}
}

/* -- Misc ---------------------------------------------------------------- */

.lerp-notice {
	padding: 0.75rem 1rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
	color: rgba( 0, 0, 0, 0.6 );
	font-size: 0.875rem;
}

.lerp-announce {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.lerp-badge__dot,
	.lerp-item--new,
	.lerp-item--targeted {
		animation: none;
	}

	.lerp-banner__button {
		transition: none;
	}
}