/*
 * Simple Theme — Topbar + Search Overlay (v1.13.0)
 *
 * Article-context sticky topbar plus full-viewport search overlay.
 * Loaded only on templates that include parts/topbar-article.html
 * (single-with-topbar customTemplate). All paint via existing
 * --simple-chrome--* tokens. No new tokens introduced.
 *
 * Three responsibilities in this file:
 *   1. .simple-topbar — sticky chrome above the article
 *   2. .simple-topbar__overlay — search overlay (built by JS, painted here)
 *   3. .simple-article-banner default-banner fallback when no featured image
 *
 * No cascade-override flags. Specificity 0,2,0 maximum.
 */

/* === Topbar chrome =============================================== */

.simple-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--custom--simple-chrome--chrome-bg, #FFFFFF);
	border-block-end: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	min-block-size: 52px;
}

.simple-topbar__inner {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--wp--preset--spacing--40, 1rem);
	align-items: stretch;
	min-block-size: 52px;
}

.simple-topbar__articles,
.simple-topbar__progress,
.simple-topbar__taxonomy {
	display: flex;
	align-items: center;
}

.simple-topbar__taxonomy {
	justify-content: flex-end;
}

.simple-topbar__btn {
	appearance: none;
	background: transparent;
	border: none;
	padding: 0 var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	transition: color 0.15s ease;
}

.simple-topbar__btn:hover {
	color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A);
}

.simple-topbar__btn svg {
	inline-size: 14px;
	block-size: 14px;
}

.simple-topbar__btn kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 20px;
	min-inline-size: 20px;
	padding-inline: 0.25rem;
	border: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.04));
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 0.6875rem;
	font-family: inherit;
	margin-inline-start: var(--wp--preset--spacing--20, 0.5rem);
}

.simple-topbar__term {
	font-size: 0.75rem;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0;
}

.simple-topbar__term a {
	color: inherit;
	text-decoration: none;
}

.simple-topbar__term a:hover {
	color: var(--wp--custom--simple-chrome--accent, #666666);
}

/* === Search overlay (JS-toggled visibility) ====================== */

.simple-topbar__overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: none;
	overflow-y: auto;
}

.simple-topbar__overlay[data-open="true"] {
	display: block;
}

.simple-topbar__overlay-inner {
	max-inline-size: 720px;
	margin-inline: auto;
	margin-block-start: 15vh;
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	padding-block-end: var(--wp--preset--spacing--80, 4rem);
}

.simple-topbar__overlay-close {
	position: absolute;
	top: var(--wp--preset--spacing--50, 1.5rem);
	right: var(--wp--preset--spacing--50, 1.5rem);
	appearance: none;
	background: transparent;
	border: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	padding: var(--wp--preset--spacing--20, 0.5rem);
	cursor: pointer;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	font-size: 0.75rem;
}

.simple-topbar__overlay-close:hover {
	color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A);
}

.simple-topbar__overlay-close svg {
	inline-size: 12px;
	block-size: 12px;
}

.simple-topbar__overlay-input {
	inline-size: 100%;
	font-family: var(--wp--custom--simple-chrome--serif-family, Georgia, serif);
	font-size: 2rem;
	font-weight: 400;
	border: none;
	border-block-end: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	padding-block: var(--wp--preset--spacing--40, 1rem);
	background: transparent;
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	outline: none;
}

.simple-topbar__overlay-input::placeholder {
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-style: italic;
}

.simple-topbar__overlay-input:focus {
	border-block-end-color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A);
}

.simple-topbar__overlay-status {
	font-size: 0.75rem;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--40, 1rem);
}

.simple-topbar__overlay-results {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1rem);
}

.simple-topbar__overlay-result {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--wp--preset--spacing--40, 1rem);
	padding-block: var(--wp--preset--spacing--30, 0.75rem);
	border-block-end: 0.5px solid var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.06));
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.simple-topbar__overlay-result:hover {
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.04));
}

.simple-topbar__overlay-result-image {
	aspect-ratio: 4 / 3;
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.06));
	overflow: hidden;
}

.simple-topbar__overlay-result-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.simple-topbar__overlay-result-title {
	font-family: var(--wp--custom--simple-chrome--serif-family, Georgia, serif);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
}

.simple-topbar__overlay-result-excerpt {
	font-size: 0.875rem;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	line-height: 1.5;
	margin: 0;
}

/* === Default banner fallback ====================================== */
/*
 * When .simple-article-banner contains no <img> (post has no featured
 * image), :has() picks it up and paints a CSS-generated neutral
 * gradient banner. Authors override by setting a featured image OR by
 * filtering simple_theme_default_banner_url to point at a real image.
 * Wide browser support for :has() as of 2024; Firefox got it in v121.
 */
.simple-article-banner:not(:has(img)) {
	aspect-ratio: 16 / 7;
	background:
		linear-gradient(135deg,
			var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.06)) 0%,
			var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5) 100%
		);
	position: relative;
}

.simple-article-banner:not(:has(img))::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 30%,
			color-mix(in srgb, var(--wp--custom--simple-chrome--accent, #666666) 8%, transparent) 0%,
			transparent 50%
		);
	pointer-events: none;
}

/* === Mobile cascade =============================================== */

@media (max-width: 768px) {
	.simple-topbar__inner {
		padding-inline: var(--wp--preset--spacing--30, 0.75rem);
		gap: var(--wp--preset--spacing--20, 0.5rem);
	}
	.simple-topbar__btn span:not(.simple-topbar__btn-icon) {
		display: none;
	}
	.simple-topbar__btn kbd {
		display: none;
	}
	.simple-topbar__taxonomy {
		display: none;
	}
	.simple-topbar__overlay-inner {
		margin-block-start: 8vh;
	}
	.simple-topbar__overlay-input {
		font-size: 1.5rem;
	}
	.simple-topbar__overlay-result {
		grid-template-columns: 60px 1fr;
	}
}

/* =====================================================================
 * v1.13.01 — Visual separation, alignment, popover, editor parity.
 * ===================================================================== */

/* Visual separation: paint topbar on a faintly-distinct surface so it
 * reads as its own band beneath the header and above the article banner.
 * Header above sits on --simple-chrome--bg; topbar steps one tone toward
 * accent-soft. Hairline on TOP mirrors header's bottom shadow so the
 * boundary reads cleanly without doubling-up borders. */
.simple-topbar {
	background: var(--wp--custom--simple-chrome--surface, #FAFAFA);
	border-block-start: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
}

/* Inner-item alignment: topbar inner gutter matches the header's inline
 * padding so logo (header) and "All articles" (topbar) land on the same
 * vertical axis. Header uses --wp--preset--spacing--50 by default; we
 * already inherit that, but explicit vertical alignment via flex
 * stretch on children prevents any rounding drift. */
.simple-topbar__inner {
	align-items: center;
}

/* === All Articles popover ========================================== */
/*
 * Activated by JS toggling [data-simple-topbar-articles] aria-expanded.
 * Anchored beneath the topbar, left-aligned with the "All articles"
 * button. Built lazily on first activation; markup appended to body
 * so position:fixed escapes the sticky topbar's stacking context.
 */
.simple-topbar__popover {
	position: fixed;
	z-index: 60;
	display: none;
	min-inline-size: 280px;
	max-inline-size: 360px;
	max-block-size: 70vh;
	overflow-y: auto;
	background: var(--wp--custom--simple-chrome--chrome-bg, #FFFFFF);
	border: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: var(--wp--preset--spacing--30, 0.75rem) 0;
}

.simple-topbar__popover[data-open="true"] {
	display: block;
}

.simple-topbar__popover-header {
	padding: 0 var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--20, 0.5rem);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	border-block-end: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
}

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

.simple-topbar__popover-item a {
	display: block;
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A);
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.4;
	transition: background-color 0.12s ease;
}

.simple-topbar__popover-item a:hover {
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.04));
}

.simple-topbar__popover-item-meta {
	display: block;
	font-size: 0.6875rem;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	margin-block-start: 0.125rem;
}

.simple-topbar__popover-empty {
	padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
	font-size: 0.8125rem;
	color: var(--wp--custom--simple-chrome--muted, #666666);
}

/* === Editor canvas parity ========================================== */
/*
 * Site Editor iframe disables sticky for the same reason as chrome.css
 * disables it for the header: static scroll feel inside the editor.
 * Also relax min-height so the topbar reads as a compact band in the
 * canvas without dropdowns expanding to fill it.
 */
.editor-styles-wrapper .simple-topbar {
	position: relative;
}

.editor-styles-wrapper .simple-topbar__overlay,
.editor-styles-wrapper .simple-topbar__popover {
	display: none !important;
}

/* =====================================================================
 * v1.13.02 — Slot rework + retired search + progress bar + image cap.
 * ===================================================================== */

/* Topbar grid + gutter alignment with header above.
 *
 * Three-column grid: All articles (left), reading progress (center),
 * taxonomy label (right). Constrained to 1200px max with
 * --wp--preset--spacing--50 horizontal padding so the topbar's inner
 * gutter lands on the same axis as the header's logo + nav cluster
 * above it. (Header's max-inline-size also = 1200px via chrome.css.) */
.simple-topbar__inner {
	grid-template-columns: auto 1fr auto;
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	max-inline-size: 1200px;
	margin-inline: auto;
}

/* Retired search-slot border treatment is no longer relevant since
 * the search slot itself is gone. Center slot now hosts the progress
 * bar, which has its own visual treatment below. */

/* === Reading progress bar ============================================
 *
 * Sits in the middle topbar slot. Track is a faint hairline-bordered
 * box at 4px tall, fill is a solid accent that grows left-to-right
 * as the article scrolls. JS updates the .width as scroll position
 * advances past the article body's bounding rect.
 * =================================================================== */

.simple-topbar__progress {
	align-items: center;
	min-inline-size: 120px;
	padding-inline: var(--wp--preset--spacing--40, 1rem);
}

.simple-topbar__progress-track {
	flex: 1;
	block-size: 4px;
	background: var(--wp--custom--simple-chrome--accent-soft, rgba(0,0,0,0.06));
	border: 0.5px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5);
	overflow: hidden;
}

.simple-topbar__progress-fill {
	display: block;
	block-size: 100%;
	inline-size: 0%;
	background: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A);
	transition: inline-size 0.08s linear;
}

/* === Hero / featured image height cap ================================
 *
 * The article banner was rendering at native aspect ratio (often 16:9
 * or taller for portrait images), pushing the article title far below
 * the fold. Cap the banner block at 480px, crop with object-fit on
 * the image. Default-banner gradient fallback (no featured image) keeps
 * its 16:7 aspect ratio rule above, but is also clamped to 480px to
 * stay consistent.
 * =================================================================== */

.simple-article-banner {
	max-block-size: 480px;
	overflow: hidden;
}

.simple-article-banner img {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 480px;
	object-fit: cover;
	object-position: center;
}

/* Default-banner gradient fallback: aspect-ratio 16:7 still applies for
 * narrow viewports; max-height cap takes precedence on wider ones. */
.simple-article-banner:not(:has(img)) {
	max-block-size: 480px;
}

/* === Category / archive hero image cap ===============================
 *
 * v1.13.02 introduced a broad `.wp-block-query .wp-block-post-featured-
 * image` cap that collided with .simple-archive-hero__card's intended
 * 16:10 sizing — the cap forced 480px tall, the hero grid was already
 * trying to share that vertical space with the body column, the body
 * collapsed to a cramped strip.
 *
 * v1.13.03 retires the broad rule. Archive cards (.simple-archive-card,
 * .simple-archive-hero__card) already have their own aspect-ratio
 * constraints in chrome.css; they don't need this safety net. The cap
 * remains in place for .simple-article-banner only — that's the single-
 * post hero, which is the surface that actually needed clamping.
 * =================================================================== */
/* === Mobile cascade additions ======================================== */

@media (max-width: 768px) {
	.simple-topbar__progress {
		display: none;
	}
	.simple-article-banner,
	.simple-article-banner img,
	.simple-article-banner:not(:has(img)) {
		max-block-size: 280px;
	}
}