/*
 * Lumini — Inspirație blog area (posts page, single post, term archives).
 *
 * Standalone module registered in the stylesheet manifest (inc/enqueue.php,
 * handle lumini-inspiration) for the native-post surfaces: is_home,
 * is_singular('post'), category/tag/date/author archives. Hand-authored plain
 * CSS — no Tailwind, no @apply. Holds ONLY what beats utilities: the clamp
 * headings, the link-pill filter chip with its aria-current state, core's
 * pagination markup (.page-numbers — not reachable with utilities), and the
 * `prose` token overrides for the article body. Everything structural stays
 * as Tailwind utilities in the markup. Cascades after main.css (dependency),
 * so it can reuse the :root design tokens by name.
 *
 * Markup: home.php, single.php, archive.php,
 *         template-parts/content/content.php,
 *         template-parts/inspiration/category-pills.php.
 */

/* ---------------------------------------------------------------- Headings */

.lumini-insp__title {
	font-weight: 500;
	font-size: clamp(36px, 6vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Single posts + term archives — editorial scale, not the landing hero. */
.lumini-insp__title--post {
	font-size: clamp(32px, 4.5vw, 54px);
	line-height: 1.04;
}

.lumini-insp__accent {
	font-style: italic;
	color: var(--color-amber);
}

/* ------------------------------------------------------------ Filter chip */

/* Same grammar as .lumini-ghiduri__chip, but a link whose active state is
 * server-rendered via aria-current (no JS on this surface). */
.lumini-insp__chip {
	display: inline-block;
	padding: 8px 20px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-ink);
	background: transparent;
	border: 1px solid var(--color-line-2);
	border-radius: 999px;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.lumini-insp__chip:hover {
	border-color: var(--color-amber);
}

.lumini-insp__chip[aria-current="page"] {
	color: var(--color-amber-fg);
	background: var(--color-amber);
	border-color: var(--color-amber);
}

/* ------------------------------------------------------------- Pagination */

/* Core the_posts_pagination() markup — nav.pagination > .nav-links with
 * .page-numbers items (anchors, the current <span>, prev/next). */

.lumini-insp .pagination {
	margin-top: 56px;
}

.lumini-insp .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.lumini-insp .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 14px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-ink);
	border: 1px solid var(--color-line-2);
	border-radius: 8px;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.lumini-insp .pagination a.page-numbers:hover {
	border-color: var(--color-amber);
}

.lumini-insp .pagination .page-numbers.current {
	color: var(--color-amber-fg);
	background: var(--color-amber);
	border-color: var(--color-amber);
}

.lumini-insp .pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--color-ink-3);
}

.lumini-insp .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------- Article body */

/* Token overrides for the typography plugin: .prose reads its palette from
 * --tw-prose-* custom properties, so the body inherits the design system
 * without restating the plugin's rhythm rules. */
.lumini-insp__body {
	--tw-prose-body: var(--color-ink-2);
	--tw-prose-headings: var(--color-ink);
	--tw-prose-lead: var(--color-ink-2);
	--tw-prose-links: var(--color-turquoise-hot);
	--tw-prose-bold: var(--color-ink);
	--tw-prose-counters: var(--color-turquoise);
	--tw-prose-bullets: var(--color-amber);
	--tw-prose-hr: var(--color-line);
	--tw-prose-quotes: var(--color-ink);
	--tw-prose-quote-borders: var(--color-amber);
	--tw-prose-captions: var(--color-ink-3);
	--tw-prose-code: var(--color-ink);
	--tw-prose-th-borders: var(--color-line-2);
	--tw-prose-td-borders: var(--color-line);
	font-size: 17px;
	line-height: 1.75;
}

/* Headings: the condensed face cascades from the base layer; pin the house
 * semibold weight over the plugin's 700/600 defaults. */
.lumini-insp__body h2,
.lumini-insp__body h3,
.lumini-insp__body h4 {
	font-weight: 600;
	letter-spacing: -0.02em;
}

.lumini-insp__body h2 {
	font-size: 1.7em;
}

.lumini-insp__body a {
	text-decoration-color: color-mix(in srgb, var(--color-turquoise) 45%, transparent);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lumini-insp__body a:hover {
	color: var(--color-turquoise);
	text-decoration-color: currentColor;
}

.lumini-insp__body img {
	border-radius: 8px;
}

.lumini-insp__body blockquote {
	font-style: italic;
	font-weight: 400;
}