/**
 * Vibe WP — theme stylesheet.
 *
 * Colors, font sizes, spacing and other tokens come from theme.json
 * (var(--wp--preset--*) and var(--wp--custom--*)), so the editor, the front
 * end and every style variation stay in sync. Code styles live in
 * code-highlight.css.
 */

/* ---------- Base ---------- */

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

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Long URLs and words must not push the layout wider than the screen. */
.wp-block-post-content {
	overflow-wrap: break-word;
}

.wp-block-post-content a {
	overflow-wrap: anywhere;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Page shell: sidebar + content column ---------- */

.site {
	min-height: 100vh;
}

/* The shell groups use flow layout; their children should not get block-gap margins. */
.site > *,
.site-column > * {
	margin-block: 0;
}

.site-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
	padding-block: 8px;
}

@media (min-width: 783px) {
	.site {
		display: grid;
		grid-template-columns: var(--wp--custom--sidebar-width, 280px) minmax(0, 1fr);
	}

	.site-header {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow-y: auto;
	}

	.admin-bar .site-header {
		top: var(--wp-admin--admin-bar--height, 32px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	/* Let a background set on the sidebar's group in the editor fill the full height. */
	.site-header > .wp-block-group {
		min-height: 100%;
	}
}

/* ---------- Sidebar ---------- */

/*
 * The sidebar's contents come from the "sidebar" template part
 * (parts/sidebar.html), editable in Appearance > Editor. These rules only set
 * placement and sensible defaults.
 */

.site-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 783px) {
	.site-header {
		border-bottom: 0;
		border-right: 1px solid var(--wp--preset--color--border);
	}
}

.site-header .wp-block-site-title {
	margin: 0;
	line-height: 1.2;
}

.site-header .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.site-header .wp-block-site-tagline {
	margin: 0;
}

.sidebar-navigation a,
.sidebar-categories .wp-block-categories a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sidebar-navigation a:hover,
.sidebar-navigation .current-menu-item > a,
.sidebar-categories .wp-block-categories a:hover {
	color: var(--wp--preset--color--primary);
}

.sidebar-categories .wp-block-heading {
	margin: 0;
}

.sidebar-categories .wp-block-categories {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.sidebar-categories .wp-block-categories li + li {
	margin-top: 0.35rem;
}

.sidebar-search {
	width: 100%;
}

.sidebar-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
}

.sidebar-search .wp-block-search__button {
	padding: 0.5rem 0.75rem;
}

/* On small screens the sidebar collapses into a top bar; the Navigation block shows its own menu button. */
@media (max-width: 782px) {
	.site-column {
		min-height: 0;
	}

	/* Keep mobile horizontal gutters flush; honor the template's vertical padding. */
	.site-main {
		padding-inline: 0 !important;
	}

	.site-main > .wp-block-query,
	.site-main > .entry {
		width: 100%;
		max-width: 100%;
	}

	/* The final comment-form margin must not collapse past the post background. */
	.site-main .comment-form > :last-child {
		margin-bottom: 0;
	}

	/* Empty Hybrid queries must not leave a block-gap margin above the footer. */
	:where(.blog) .site-main > .wp-block-query:not(:has(*)) {
		display: none;
	}

	.site-header .sidebar-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-block: 1rem !important;
	}

	.site-header .sidebar-search,
	.site-header .sidebar-categories {
		flex-basis: 100%;
	}
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

textarea {
	width: 100%;
}

input:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
}

/* ---------- Archive headers ---------- */

.page-header .wp-block-query-title {
	margin: 0;
}

.page-header .wp-block-term-description {
	color: var(--wp--preset--color--muted);
}

/* ---------- Post meta and terms ---------- */

.entry-meta {
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.entry-meta > * {
	margin: 0;
}

.entry-meta > * + *::before {
	content: "·";
	margin-right: 0.5rem;
}

.entry-meta a {
	color: inherit;
}

/* Category pills. */
.post-card__category,
.entry-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.post-card__category a,
.entry-categories a {
	padding: 0.15rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
}

.post-card__category a:hover,
.entry-categories a:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
}

/* Tag chips. */
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.entry-tags a {
	padding: 0.15rem 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}

.entry-tags a::before {
	content: "#";
}

.entry-tags a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ---------- Post cards (grid and hybrid layouts) ---------- */

/* Match the space between cards with gutters at both edges of the card list. */
.wp-block-query > .wp-block-post-template:has(> li > .post-card) {
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
}

@media (max-width: 782px) {
	.wp-block-query > .wp-block-post-template:has(> li > .post-card) {
		padding: 0;
	}
}

.post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.post-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
}

.post-card > * {
	margin-block: 0;
}

.post-card .wp-block-post-featured-image,
.post-card .wp-block-post-featured-image img {
	margin: 0;
	border-radius: 0;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.post-card__body > * {
	margin-block: 0;
}

.post-card__body > * + * {
	margin-top: 0.6rem;
}

.post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Excerpts that keep their Code blocks (vibe_wp_get_code_teaser() in functions.php). */
.wp-block-post-excerpt__excerpt.has-code > * {
	margin-block: 0;
}

.wp-block-post-excerpt__excerpt.has-code > * + * {
	margin-top: 0.6rem;
}

.wp-block-post-excerpt__excerpt.has-code :is(.wp-block-code, .code-block) {
	font-size: 0.85em;
}

.wp-block-post-excerpt__excerpt.has-code .wp-block-code {
	max-height: 16em;
	overflow-y: auto;
}

/* Let wide code scroll inside its card instead of stretching the grid column. */
.wp-block-post-template.is-layout-grid > li {
	min-width: 0;
}

.post-card--featured .post-card__body {
	padding: 1.75rem;
}

.post-card__more {
	font-weight: 600;
	text-decoration: none;
}

.post-card__more::after {
	content: " →";
}

.post-card .post-card__body > .post-card__more {
	align-self: flex-end;
	margin-top: auto;
	padding-top: 0.6rem;
}

.post-card--compact .post-card__body {
	padding: 1rem;
}

.post-card--compact .post-card__body > * + * {
	margin-top: 0.35rem;
}

/* ---------- Related posts ---------- */

.related-posts {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.related-posts > .wp-block-heading {
	margin: 0 0 1.25rem;
}

/* ---------- Classic list layout ---------- */

.post-list__item {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.post-list__item > * {
	margin-block: 0;
}

.post-list__item > * + * {
	margin-top: 0.5rem;
}

.post-list .wp-block-post-excerpt__excerpt {
	margin: 0;
}

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

.wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.25rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-query-pagination .current {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ---------- Single posts and pages ---------- */

/* Older saved templates may not include the background block settings. */
.site-main .entry:where(:not(.has-background)) {
	background-color: var(--wp--preset--color--base, #fff);
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

.entry-header > * {
	margin-block: 0;
}

.entry-header > * + * {
	margin-top: 0.75rem;
}

.post-navigation {
	gap: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.post-navigation .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

/* ---------- Comments ---------- */

.comments-area {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.comment-body {
	padding-block: 1rem;
}

.comment-body > * {
	margin-block: 0;
}

.comment-body > * + * {
	margin-top: 0.75rem;
}

.comment-meta {
	align-items: center;
	gap: 0.75rem;
}

.comment-meta .wp-block-avatar img {
	border-radius: 50%;
}

.wp-block-comment-template ol {
	padding-left: 1.5rem;
	border-left: 2px solid var(--wp--preset--color--border);
}

/* ---------- ComfyUI workflow panel ---------- */

.workflow-panel {
	padding: 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}

.workflow-panel > :first-child {
	margin-top: 0;
}

.workflow-panel__badge {
	width: fit-content;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
}

.workflow-panel__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.workflow-panel .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

/* ---------- Footer ---------- */

.site-footer {
	padding: 2rem var(--wp--style--root--padding-right, 1.5rem) 2rem var(--wp--style--root--padding-left, 1.5rem);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
}

.site-footer p {
	margin: 0;
}