/* ==========================================================
   Arena Times widgets — shared foundations
   Loaded by any widget that needs the editor placeholder.
   ========================================================== */

/* The placeholder a dynamic widget shows in the Elementor editor when
   there is nothing for it to describe — an archive template with a Post
   Title on it, say. Without it the widget renders nothing, collapses to
   zero height, and becomes impossible to click and remove. It never
   reaches a visitor: arena_widget_editor_notice() returns early outside
   the editor. */
.arena-widget-notice {
	padding: 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	color: #64748b;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	background: rgba(148, 163, 184, 0.06);
}

/* Related News: the {category} in "More in {category}". It reads as part of
   the heading - same colour and weight - and shows it is a link on hover.
   (0,2,0) clears the Global Kit's link colour (0,1,1); the widget's own
   Category Name colours (0,4,0+) override it. */
.arena-w-related__title .arena-w-related__cat {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.arena-w-related__title .arena-w-related__cat:is(:hover, :focus-visible) {
	color: var(--arena-accent, #c8102e);
}

/* ── News Grid section heading: "From Sarah Chen ————" ─────────────────
   Beside: a flex row, the line is a pseudo-element that takes whatever
   width the title leaves. Under: a border across the full width. Centre
   puts a line on each side. (0,2,0) clears the Kit's h2 and link rules;
   the widget's controls write at (0,4,0) and above. */
.arena-w-heading {
	--arena-wh-line-color: var(--arena-line, #e3e7ec);
	--arena-wh-line-width: 1px;
	--arena-wh-line-gap: 16px;
	--arena-wh-before: none;
	--arena-wh-after: block;
	margin: 0 0 18px;
}

.arena-w-heading .arena-w-heading__title {
	margin: 0;
	color: var(--arena-ink, #14181f);
	font-family: var(--arena-font-head, Georgia, serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

.arena-w-heading .arena-w-heading__link {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.arena-w-heading .arena-w-heading__link:is(:hover, :focus-visible) {
	color: var(--arena-accent, #c8102e);
}

.arena-w-heading.arena-w-heading--line-beside {
	display: flex;
	align-items: center;
	gap: var(--arena-wh-line-gap);
}

/* Each line is shown or not - a zero-width one would still take a gap. */
.arena-w-heading.arena-w-heading--line-beside::before,
.arena-w-heading.arena-w-heading--line-beside::after {
	content: "";
	flex: 1 1 0;
	border-block-start: var(--arena-wh-line-width) solid var(--arena-wh-line-color);
}

.arena-w-heading.arena-w-heading--line-beside::before {
	display: var(--arena-wh-before);
	order: -1;
}

.arena-w-heading.arena-w-heading--line-beside::after {
	display: var(--arena-wh-after);
}

.arena-w-heading.arena-w-heading--line-beside .arena-w-heading__title {
	flex: 0 1 auto;
}

.arena-w-heading.arena-w-heading--line-under {
	padding-block-end: var(--arena-wh-line-gap);
	border-block-end: var(--arena-wh-line-width) solid var(--arena-wh-line-color);
}

/* News Grid on an archive or search with no stories: the message that
   replaces the empty space. Plain by default - Style > Nothing Found. */
.arena-w-cards-empty {
	padding: 28px 20px;
	border: 1px dashed var(--arena-line, #e3e7ec);
	color: var(--arena-ink-soft, #5b6472);
	text-align: center;
}

/* News Grid page links on an archive or search. Plain by default -
   Style > Pagination. */
.arena-w-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-block-start: 32px;
}

.arena-w-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--arena-line, #e3e7ec);
	border-radius: 8px;
	color: var(--arena-ink, #14181f);
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.arena-w-pagination .page-numbers.current {
	background: var(--arena-ink, #14181f);
	border-color: var(--arena-ink, #14181f);
	color: var(--arena-bg, #fff);
}

.arena-w-pagination .page-numbers.dots {
	border-color: transparent;
}