/* LuxaDocs — Documentation home / archive "Paper" theme.
 *
 * Ported from the luxa-docs-home-mockup design. Scoped under .luxadocs-archive
 * so it never leaks into the active theme or the Single Doc "Paper" theme
 * (assets/css/single-doc.css), which is scoped separately under
 * .luxadocs-single. Shares the same font stack, enqueued only on the
 * documentation archive / category archive in class-luxadocs-assets.php.
 */

.luxadocs-archive {
	--luxadocs-paper:       #FAF9F5;
	--luxadocs-paper-alt:   #F2F0E8;
	--luxadocs-ink:         #2B2A26;
	--luxadocs-ink-soft:    #6B6862;
	--luxadocs-ink-faint:   #A19C90;
	--luxadocs-line:        #E3DFD3;
	--luxadocs-line-strong: #D2CDBD;
	--luxadocs-moss:        #5C6E52;
	--luxadocs-moss-deep:   #40503A;
	--luxadocs-moss-tint:   #EDF0E5;
	--luxadocs-max:         1040px;

	background: var(--luxadocs-paper);
	color: var(--luxadocs-ink);
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	position: relative;
	/* The root element also carries the legacy .luxadocs-wrap class (kept
	   for back-compat / external targeting), whose max-width/padding would
	   otherwise double-box this template's own full-bleed topbar and
	   .luxadocs-archive__wrap centering. Reset them here. */
	max-width: none;
	margin: 0;
	padding: 0;
}

.luxadocs-archive *,
.luxadocs-archive *::before,
.luxadocs-archive *::after {
	box-sizing: border-box;
}

.luxadocs-archive a {
	color: inherit;
	text-decoration: none;
}

.luxadocs-archive a:focus-visible,
.luxadocs-archive button:focus-visible,
.luxadocs-archive input:focus-visible {
	outline: 2px solid var(--luxadocs-moss);
	outline-offset: 2px;
	border-radius: 2px;
}

.luxadocs-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.035;
	background-image: radial-gradient(circle at 1px 1px, #000 1px, transparent 0);
	background-size: 3px 3px;
}

/* ---------- top bar (shared look with the single doc topbar) ---------- */
.luxadocs-archive .luxadocs-topbar {
	border-bottom: 1px solid var(--luxadocs-line);
	position: relative;
	z-index: 2;
}

.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb {
	max-width: var(--luxadocs-max);
	margin: 0 auto;
	padding: 16px 32px;
	font-size: 13px;
	color: var(--luxadocs-ink-faint);
}

.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb a {
	color: var(--luxadocs-ink-soft);
	text-decoration: none;
}

.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb a:hover {
	color: var(--luxadocs-moss-deep);
	text-decoration: underline;
}

.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb__sep {
	margin: 0 8px;
	color: var(--luxadocs-line-strong);
}

.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb__current {
	color: var(--luxadocs-ink);
}

.luxadocs-archive__wrap {
	max-width: var(--luxadocs-max);
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
	z-index: 1;
}

/* ---------- hero ---------- */
.luxadocs-archive__hero {
	max-width: 640px;
	margin: 0 auto;
	padding: 76px 0 40px;
	text-align: center;
}

.luxadocs-archive .luxadocs-archive__title {
	font-family: 'Fraunces', serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0 0 16px;
}

/* Home-page context (a real WP Page) now prints its own <h1
   class="luxadocs-archive__title"> above, same as the rest of the archive
   — no theme-title styling hook needed here anymore. */

.luxadocs-archive__subtitle {
	font-size: 17px;
	color: var(--luxadocs-ink-soft);
	max-width: 44ch;
	margin: 0 auto 34px;
}

/* search — styled like a card-catalog label. Markup/classes come from
   LuxaDocs_Shortcodes::render_search(); the icon is a CSS background so we
   never have to touch that shared markup (used by the [luxadocs_search]
   shortcode elsewhere too). */
.luxadocs-archive .luxadocs-search {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	display: block;
}

.luxadocs-archive .luxadocs-search__input {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--luxadocs-ink);
	background-color: var(--luxadocs-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A19C90' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 17px 17px;
	border: 1px solid var(--luxadocs-line-strong);
	border-radius: 8px;
	padding: 14px 16px 14px 46px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.luxadocs-archive .luxadocs-search__input::placeholder {
	color: var(--luxadocs-ink-faint);
}

.luxadocs-archive .luxadocs-search__input:focus {
	border-color: var(--luxadocs-moss);
	box-shadow: 0 0 0 3px var(--luxadocs-moss-tint);
}

/* The submit button is unnecessary visual weight once live AJAX search is
   on (Enter still submits the form for the no-JS fallback) — kept in the
   DOM for accessibility/no-JS, just visually minimal here. */
.luxadocs-archive .luxadocs-search__button {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.luxadocs-archive .luxadocs-search__results:not([hidden]) {
	text-align: left;
	max-width: 520px;
	margin: 10px auto 0;
	background: var(--luxadocs-paper);
	border: 1px solid var(--luxadocs-line);
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 12px 28px -14px rgba(43, 42, 38, 0.25);
}

.luxadocs-archive__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	align-items: center;
}

.luxadocs-archive__chips-label {
	font-size: 12.5px;
	color: var(--luxadocs-ink-faint);
	margin-right: 2px;
}

.luxadocs-archive__chip {
	font-size: 13px;
	color: var(--luxadocs-ink-soft);
	border: 1px solid var(--luxadocs-line);
	background: var(--luxadocs-paper-alt);
	padding: 6px 12px;
	border-radius: 20px;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.luxadocs-archive__chip:hover {
	border-color: var(--luxadocs-moss);
	color: var(--luxadocs-moss-deep);
	background: var(--luxadocs-moss-tint);
}

/* ---------- section labels + perforated divider ---------- */
.luxadocs-archive__section {
	padding: 48px 0;
}

.luxadocs-archive__section-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--luxadocs-ink-faint);
	margin-bottom: 22px;
}

.luxadocs-archive .luxadocs-perf {
	border: none;
	height: 1px;
	margin: 0;
	background-image: repeating-linear-gradient(to right, var(--luxadocs-line-strong) 0, var(--luxadocs-line-strong) 5px, transparent 5px, transparent 11px);
}

/* ---------- two-column shell: doc list + category sidebar ---------- */
.luxadocs-archive__shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}

.luxadocs-archive__main {
	min-width: 0;
}

.luxadocs-archive__rail {
	position: sticky;
	top: 32px;
}

/* ---------- category list (right sidebar) ---------- */
.luxadocs-archive__category-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.luxadocs-archive .luxadocs-archive__category-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	transition: background .15s ease;
}

.luxadocs-archive a.luxadocs-archive__category-list-item:hover {
	background: var(--luxadocs-paper-alt);
}

.luxadocs-archive a.luxadocs-archive__category-list-item.is-current {
	background: var(--luxadocs-moss-tint);
}

.luxadocs-archive__category-list-item .luxadocs-archive__badge {
	flex: none;
	width: 30px;
	height: 30px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: 11px;
	color: var(--luxadocs-moss-deep);
	background: var(--luxadocs-moss-tint);
	border-radius: 7px;
	overflow: hidden;
}

.luxadocs-archive__category-list-item.is-current .luxadocs-archive__badge {
	background: var(--luxadocs-paper);
}

.luxadocs-archive__category-list-item .luxadocs-archive__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.luxadocs-archive__category-list-name {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	color: var(--luxadocs-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.luxadocs-archive__category-list-count {
	flex: none;
	font-size: 12px;
	color: var(--luxadocs-ink-faint);
}

/* ---------- article list (recent/popular docs, and the full doc grid) ---------- */
.luxadocs-archive .luxadocs-grid {
	display: block;
	border-top: 1px solid var(--luxadocs-line);
}

.luxadocs-archive .luxadocs-grid__item {
	display: grid;
	grid-template-columns: 140px 1fr auto auto;
	align-items: center;
	gap: 18px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--luxadocs-line);
	transition: background .15s ease;
}

.luxadocs-archive a.luxadocs-grid__item:hover {
	background: var(--luxadocs-paper-alt);
}

.luxadocs-archive .luxadocs-grid__thumb {
	display: none; /* Editorial list style has no thumbnails, by design. */
}

.luxadocs-archive__item-cat {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	color: var(--luxadocs-moss-deep);
	background: var(--luxadocs-moss-tint);
	padding: 4px 9px;
	border-radius: 4px;
	justify-self: start;
	white-space: nowrap;
}

.luxadocs-archive .luxadocs-grid__title {
	font-size: 15px;
	color: var(--luxadocs-ink);
	font-weight: 500;
	margin: 0;
}

.luxadocs-archive .luxadocs-grid__excerpt {
	display: none; /* Editorial list style shows title only, like the mockup. */
}

.luxadocs-archive__item-time {
	font-size: 13px;
	color: var(--luxadocs-ink-faint);
	white-space: nowrap;
}

.luxadocs-archive__item-go {
	color: var(--luxadocs-ink-faint);
	font-size: 15px;
}

.luxadocs-archive__explore-more {
	margin-top: 24px;
	text-align: center;
}

.luxadocs-archive__explore-more a {
	display: inline-block;
	font-size: 14px;
	color: var(--luxadocs-moss-deep);
	border-bottom: 1px solid var(--luxadocs-line-strong);
	padding-bottom: 2px;
}

.luxadocs-archive .luxadocs-empty {
	color: var(--luxadocs-ink-soft);
	padding: 32px 4px;
	text-align: center;
}

/* pagination — paginate_links( array( 'type' => 'plain' ) ) output, wrapped
   in our own <nav>; same classes the_posts_pagination() used to produce. */
.luxadocs-archive .luxadocs-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
	font-size: 13.5px;
}

.luxadocs-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--luxadocs-line);
	border-radius: 6px;
	color: var(--luxadocs-ink-soft);
}

.luxadocs-archive .page-numbers.current {
	background: var(--luxadocs-moss-tint);
	border-color: var(--luxadocs-moss);
	color: var(--luxadocs-moss-deep);
}

.luxadocs-archive .page-numbers:hover:not(.current):not(.dots) {
	border-color: var(--luxadocs-moss);
	color: var(--luxadocs-moss-deep);
}

/* ---------- footer ---------- */
.luxadocs-archive .luxadocs-doc-footer {
	margin-top: 20px;
	padding: 28px 0 60px;
	border-top: 1px solid var(--luxadocs-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	color: var(--luxadocs-ink-faint);
}

.luxadocs-archive .luxadocs-doc-footer a {
	color: var(--luxadocs-ink-soft);
}

.luxadocs-archive .luxadocs-doc-footer a:hover {
	color: var(--luxadocs-moss-deep);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 860px) {
	.luxadocs-archive__shell {
		display: block;
	}

	.luxadocs-archive__rail {
		position: static;
		margin-top: 40px;
		padding-top: 32px;
		border-top: 1px solid var(--luxadocs-line);
	}
}

@media (max-width: 640px) {
	.luxadocs-archive__wrap {
		padding: 0 20px;
	}

	.luxadocs-archive .luxadocs-topbar .luxadocs-breadcrumb {
		padding: 14px 20px;
	}

	.luxadocs-archive__hero {
		padding: 52px 0 32px;
	}

	.luxadocs-archive .luxadocs-grid__item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"cat time"
			"title title";
		row-gap: 6px;
	}

	.luxadocs-archive__item-cat {
		grid-area: cat;
	}

	.luxadocs-archive__item-time {
		grid-area: time;
	}

	.luxadocs-archive .luxadocs-grid__title {
		grid-area: title;
	}

	.luxadocs-archive__item-go {
		display: none;
	}

	.luxadocs-archive .luxadocs-doc-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 420px) {
	.luxadocs-archive__chips {
		justify-content: flex-start;
	}

	.luxadocs-archive__chips-label {
		width: 100%;
		margin-bottom: 4px;
	}
}