/*
 * Booth Junkie Knowledgebase - shared structure.
 * Colors, radii, and borders are never hardcoded here - they come from CSS
 * custom properties defined per-theme (see bjkb-theme-*.css), scoped to a
 * body class the theme picker in Settings controls.
 */

.bjkb-wrap {
	max-width: 1220px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	color: var(--bjkb-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

/* Hero - a big, centered search box leads the archive page, the same
   pattern used by help.booth.events and help.snappic.com (both explicitly
   named as the visual bar to match): search first, prominent, not buried
   in a sidebar widget. */
.bjkb-hero {
	text-align: center;
	padding: 48px 20px 40px;
	margin: 0 0 24px;
	background: var(--bjkb-bg-panel);
	border-radius: var(--bjkb-radius-card);
}

.bjkb-hero-title {
	margin: 0 0 24px;
	font-size: 2em;
}

.bjkb-hero .bjkb-search-form {
	max-width: 640px;
	margin: 0 auto;
}

.bjkb-hero .bjkb-input {
	padding: 14px 22px;
	font-size: 1.05em;
}

.bjkb-hero .bjkb-btn {
	padding: 0 28px;
}

/* Popular quick-links row, directly under the hero */
.bjkb-popular-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 32px;
	font-size: 0.9em;
}

.bjkb-popular-row-label {
	font-weight: 700;
	color: var(--bjkb-text-muted);
}

.bjkb-chip.bjkb-popular-row-link {
	background: var(--bjkb-border);
	color: var(--bjkb-text);
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.85em;
}

.bjkb-chip.bjkb-popular-row-link:hover {
	background: var(--bjkb-accent);
	color: #fff;
}

.bjkb-section-title {
	font-size: 1.3em;
	margin: 0 0 16px;
}

.bjkb-section-title-spaced {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--bjkb-border);
}

/* Category cards - the primary way into the knowledgebase, matching the
   reference sites' "browse by collection" pattern rather than leading
   with a flat article list. */
.bjkb-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.bjkb-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 24px 20px;
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	text-decoration: none;
}

.bjkb-category-card:hover {
	border-color: var(--bjkb-accent);
}

.bjkb-category-card-image {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bjkb-radius-card);
	margin-bottom: 4px;
}

.bjkb-category-card-name {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--bjkb-text);
}

.bjkb-category-card-desc {
	color: var(--bjkb-text-muted);
	font-size: 0.88em;
	line-height: 1.4;
}

.bjkb-category-card-count {
	margin-top: auto;
	padding-top: 8px;
	color: var(--bjkb-accent);
	font-size: 0.8em;
	font-weight: 600;
}

/* Two-column layout - position (none/left/right) comes from the
   kbe_sidebar_home / kbe_sidebar_inner settings via Bjkb_Sidebar::layout_class().
   Main content stays first in DOM order (accessibility/SEO) for both sidebar
   positions; "left" reorders visually via `order`, not by moving the markup. */
.bjkb-layout {
	display: grid;
	gap: 40px;
	align-items: start;
	margin-top: 40px;
}

.bjkb-layout-sidebar-right {
	grid-template-columns: minmax(0, 1fr) 350px;
}

.bjkb-layout-sidebar-left {
	grid-template-columns: 350px minmax(0, 1fr);
}

.bjkb-layout-sidebar-left .bjkb-layout-main {
	order: 2;
}

.bjkb-layout-sidebar-left .bjkb-sidebar {
	order: 1;
}

.bjkb-layout-full {
	grid-template-columns: minmax(0, 1fr);
}

.bjkb-layout-main {
	min-width: 0;
}

/* Opt-in modifier for a full-width heading that sits above the main/sidebar
   row without pushing the sidebar down with it - the sidebar's first widget
   lines up with the first thing in .bjkb-layout-main (e.g. the category
   grid), not with this heading. Named areas place main/sidebar explicitly,
   so this works for both the left and right sidebar variants regardless of
   their `order`-based swap above. */
.bjkb-layout-with-heading.bjkb-layout-sidebar-right {
	grid-template-areas:
		"heading heading"
		"main    sidebar";
}

.bjkb-layout-with-heading.bjkb-layout-sidebar-left {
	grid-template-areas:
		"heading heading"
		"sidebar main";
}

.bjkb-layout-with-heading {
	/* .bjkb-layout's 40px gap is meant for the main/sidebar columns; applied
	   to the heading row too it stacked with the heading's own margin-bottom
	   for a much bigger gap than intended. Override just the row axis. */
	row-gap: 16px;
}

.bjkb-layout-with-heading .bjkb-layout-heading-full {
	grid-area: heading;
	margin-bottom: 0;
}

.bjkb-layout-with-heading .bjkb-layout-main {
	grid-area: main;
}

.bjkb-layout-with-heading .bjkb-sidebar {
	grid-area: sidebar;
}

@media (max-width: 820px) {
	.bjkb-layout-sidebar-right,
	.bjkb-layout-sidebar-left {
		grid-template-columns: minmax(0, 1fr);
	}

	.bjkb-layout-sidebar-left .bjkb-layout-main,
	.bjkb-layout-sidebar-left .bjkb-sidebar {
		order: initial;
	}

	.bjkb-layout-with-heading {
		grid-template-areas:
			"heading"
			"main"
			"sidebar";
	}
}

/* Sidebar */
.bjkb-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bjkb-sidebar-widget {
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	padding: 20px;
}

.bjkb-sidebar-widget .bjkb-search-form {
	margin: 0;
	max-width: none;
}

.bjkb-sidebar-widget-title {
	margin: 0 0 12px;
	font-size: 0.95em;
	font-weight: 700;
}

.bjkb-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bjkb-sidebar-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
}

.bjkb-sidebar-list a {
	color: var(--bjkb-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bjkb-sidebar-list a:hover {
	color: var(--bjkb-accent);
}

.bjkb-sidebar-list-current a {
	color: var(--bjkb-accent);
	font-weight: 600;
}

.bjkb-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bjkb-tag-link {
	text-decoration: none;
}

.bjkb-tag-link:hover {
	color: var(--bjkb-accent);
}

.bjkb-page-title {
	font-size: 1.8em;
	margin: 0 0 0.4em;
}

.bjkb-intro {
	color: var(--bjkb-text-muted);
	margin: 0 0 1.5em;
}

/* Breadcrumbs */
.bjkb-breadcrumbs {
	font-size: 0.85em;
	color: var(--bjkb-text-muted);
	margin-bottom: 20px;
}

.bjkb-breadcrumbs a {
	color: var(--bjkb-accent);
	text-decoration: none;
}

.bjkb-breadcrumbs a:hover {
	text-decoration: underline;
}

.bjkb-breadcrumbs-sep {
	margin: 0 6px;
}

.bjkb-breadcrumbs-current {
	color: var(--bjkb-text);
}

/* Cards */
.bjkb-card {
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	padding: 24px;
}

/*
 * Article listings - a plain vertical list of card rows. Not CSS subgrid:
 * each row here is a single content column (title/chip/excerpt), not
 * several independent columns needing cross-row alignment - that's what
 * the Account theme's own source (bjae-frontend.css) uses subgrid for
 * (licence/gallery rows with aligned stat columns), which this simpler
 * content shape doesn't need.
 */
.bjkb-row-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bjkb-row {
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	padding: 16px 20px;
}

.bjkb-row-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bjkb-row-title-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--bjkb-text);
	text-decoration: none;
	font-size: 1.05em;
}

.bjkb-row-title-value:hover {
	color: var(--bjkb-accent);
}

.bjkb-row-excerpt {
	margin: 8px 0 0;
	color: var(--bjkb-text-muted);
	font-size: 0.92em;
}

.bjkb-kb-id-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--bjkb-accent);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	text-decoration: none;
}

.bjkb-kb-id-badge:hover {
	filter: brightness(0.88);
}

/* Chips / badges */
.bjkb-chip {
	display: inline-block;
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: var(--bjkb-radius-button);
	background: var(--bjkb-control-bg);
	color: var(--bjkb-text-muted);
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.bjkb-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--bjkb-radius-button);
	font-size: 0.85em;
	font-weight: 600;
}

/* Buttons / inputs */
.bjkb-wrap .bjkb-btn {
	display: inline-block;
	padding: 8px 20px;
	background: var(--bjkb-accent);
	color: #fff;
	border: none;
	border-radius: var(--bjkb-radius-button);
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.bjkb-wrap .bjkb-btn:hover {
	/* brightness(), not a second --bjkb-accent-hover colour: the shared
	   Booth Junkie brand colour can be changed from the admin at any time
	   (see includes/shared-branding.php), so the hover shade needs to
	   adapt to whatever --bjkb-accent currently is rather than a
	   precomputed value that only matched the old per-theme accent. */
	filter: brightness(0.88);
	color: #fff;
}

/*
 * .bjkb-wrap-prefixed: the theme's own global form-control reset
 * (`input[type="search"]` etc., specificity 0-1-1) otherwise beats a bare
 * `.bjkb-input` class (0-1-0) and wins on background/border/radius -
 * confirmed live. The extra ancestor class raises this to 0-2-0 without
 * needing !important.
 */
.bjkb-wrap .bjkb-input,
.bjkb-wrap .bjkb-select {
	background: var(--bjkb-control-bg);
	border: 1px solid var(--bjkb-control-border);
	border-radius: var(--bjkb-radius-button);
	color: var(--bjkb-text);
	padding: 8px 16px;
	font-size: 0.95em;
}

/* Search form */
.bjkb-search-form {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	max-width: 480px;
}

.bjkb-search-form .bjkb-input {
	flex: 1 1 auto;
	min-width: 0;
}

.bjkb-search-form {
	position: relative;
}

.bjkb-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	margin: 4px 0 0;
	padding: 6px;
	list-style: none;
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bjkb-search-results li + li {
	margin-top: 2px;
}

.bjkb-search-results a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--bjkb-radius-card);
	color: var(--bjkb-text);
	text-decoration: none;
	font-size: 0.9em;
}

.bjkb-search-results a:hover {
	background: var(--bjkb-control-bg);
	color: var(--bjkb-accent);
}

/* Table of contents */
.bjkb-toc {
	background: var(--bjkb-bg-panel);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	padding: 16px 20px;
	margin: 0 0 24px;
}

.bjkb-toc-title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bjkb-text-muted);
}

.bjkb-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bjkb-toc a {
	color: var(--bjkb-accent);
	text-decoration: none;
	font-size: 0.92em;
	line-height: 1.9;
}

.bjkb-toc a:hover {
	text-decoration: underline;
}

.bjkb-toc-level-3 {
	padding-left: 16px;
}

/* Feedback */
.bjkb-feedback {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--bjkb-border);
	font-size: 0.95em;
}

.bjkb-feedback-prompt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.bjkb-feedback-thanks {
	margin: 0;
	color: var(--bjkb-text-muted);
}

/* Empty states */
.bjkb-empty {
	color: var(--bjkb-text-muted);
	padding: 32px 0;
	text-align: center;
}

/* Pagination - wraps WordPress's own the_posts_pagination() markup */
.bjkb-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.bjkb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: var(--bjkb-radius-button);
	background: var(--bjkb-control-bg);
	color: var(--bjkb-text);
	text-decoration: none;
	font-size: 0.9em;
}

.bjkb-pagination .page-numbers.current {
	background: var(--bjkb-accent);
	color: #fff;
}

/* Single article */
.bjkb-article-title {
	font-size: 1.7em;
	margin: 0 0 0.6em;
}

.bjkb-article-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--bjkb-radius-card);
	margin-bottom: 20px;
}

.bjkb-article-content h2 {
	font-size: 1.3em;
	margin-top: 1.6em;
}

.bjkb-article-content h3 {
	font-size: 1.1em;
	margin-top: 1.4em;
}

.bjkb-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bjkb-radius-card);
	cursor: zoom-in;
}

/* Image lightbox - see assets/js/bjkb-lightbox.js */
.bjkb-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 32px;
	cursor: zoom-out;
}

.bjkb-lightbox-overlay.is-open {
	display: flex;
}

.bjkb-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--bjkb-radius-card);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
	cursor: default;
}

body.bjkb-lightbox-locked {
	overflow: hidden;
}

.bjkb-related {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--bjkb-border);
}

.bjkb-related h2 {
	font-size: 1.2em;
	margin: 0 0 12px;
}

/* Quality indicators */
.bjkb-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 20px;
	color: var(--bjkb-text-muted);
	font-size: 0.85em;
}

/* Amber warning banner - same shape as the account plugin's own
   "Expires in X days" alert (.bjae-alert-banner), amber instead of red:
   staleness is a nudge, not an alarm. */
.bjkb-stale-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fcf0cd;
	color: #7c5f00;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 20px;
	font-size: 0.88em;
	font-weight: 600;
}

/* Circular count badge - same treatment as the Credits plugin's numbered
   "1 / 2 / 3" step icons (a solid-filled circle), reused here for
   category article counts. */
.bjkb-count-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 50%;
	background: var(--bjkb-accent);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
}

/* Previous/next navigation */
.bjkb-adjacent-nav {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

.bjkb-adjacent-link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	text-decoration: none;
	min-width: 0;
}

.bjkb-adjacent-next {
	text-align: right;
	margin-left: auto;
}

.bjkb-adjacent-label {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bjkb-text-muted);
}

.bjkb-adjacent-title {
	color: var(--bjkb-text);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bjkb-adjacent-link:hover .bjkb-adjacent-title {
	color: var(--bjkb-accent);
}

/* Feedback reasons */
.bjkb-feedback-reasons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bjkb-feedback-reasons p {
	margin: 0;
	width: 100%;
	font-weight: 600;
}

/* Print - drop chrome that only makes sense on screen, widen content back out */
@media print {
	.bjkb-sidebar,
	.bjkb-search-form,
	.bjkb-feedback,
	.bjkb-adjacent-nav,
	.bjkb-pagination {
		display: none !important;
	}

	.bjkb-layout,
	.bjkb-layout-sidebar-left,
	.bjkb-layout-sidebar-right {
		grid-template-columns: 1fr !important;
	}

	.bjkb-wrap {
		max-width: none;
	}
}