/*
Theme Name: JarvisClaw Blog
Theme URI: https://api.jarvisclaw.ai/
Author: JarvisClaw
Author URI: https://api.jarvisclaw.ai/
Description: Official blog theme for JarvisClaw — a light, SEO-friendly WordPress block theme with a nav banner, blog hero, article card grid, and in-article table of contents.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jarvisclaw-blog
Tags: blog, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, translation-ready, wide-blocks, block-styles
*/

/* ---- Header ---- */
.jc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.1) blur(8px);
}
/* feat 1: the search button and the two CTA buttons share one height and pill
   shape so they read as a single control set. WordPress core styles the outline
   variation at specificity (0,3,0); these selectors reach (0,4,0)/(0,5,0) so
   our sizing wins. Height is fixed (border-box) so all three match exactly
   regardless of text vs icon content. */
.jc-header .wp-block-buttons .wp-block-button .wp-block-button__link,
.jc-header .wp-block-search__button {
	box-sizing: border-box;
	height: 2.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
}
/* The search block wraps its button in <form> > .wp-block-search__inside-wrapper.
   Those outer boxes carry core margins/padding that make the search flex item a
   different height than .wp-block-buttons, so row-level centering lands the
   button ~4px off from the CTAs. Collapse the wrappers so the search item is
   exactly the button's height and both center on the same line. */
.jc-header .wp-block-search,
.jc-header .wp-block-search > .wp-block-search__inside-wrapper,
.jc-header .wp-block-search form,
.jc-header .wp-block-search form > .wp-block-search__inside-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
}
.jc-header .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 0 1.4rem;
	border: 1px solid transparent;
}
.jc-header .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: currentColor;
}
.jc-header .wp-block-search__button {
	padding: 0 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}
.jc-header .wp-block-search__button svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

/* feat 2: keep the two CTA buttons flush right in their block. */
.jc-header .wp-block-buttons {
	justify-content: flex-end;
}

/* feat 3: hide the CTA buttons while the search field is OPEN, so the expanding
   input has room instead of pushing them into overflow; they return on close.

   Keyed on core's OPEN state, NOT on :focus-within. Focus fires on mousedown —
   before the click resolves — so hiding then shifted the (right-aligned) search
   button out from under the pointer and the click was lost, requiring a second
   click (the reported bug). Core's expandable search sets the open state in its
   CLICK handler, after the click completes, so no layout shift mid-click.

   Open signal: the .jc-search-open class that header-search.js sets on the
   header when the field opens (it owns the state deterministically, in sync
   with core, so there is no dependence on core's internal markup and no
   mousedown-vs-click race). The aria-expanded selector is a no-JS fallback. */
.jc-header.jc-search-open .wp-block-buttons,
.jc-header .wp-block-search:has(.wp-block-search__button[aria-expanded="true"]) ~ .wp-block-buttons {
	display: none;
}

/* feat 4: breathing room between the open input and the search button. */
.jc-header.jc-search-open .wp-block-search__input,
.jc-header .wp-block-search:has(.wp-block-search__button[aria-expanded="true"]) .wp-block-search__input {
	margin-right: 0.5rem;
}
/* Mobile header. The outer row wraps (logo group on one line, controls group
   on the next) so nothing is clipped. But the controls group itself — nav
   hamburger + search button + the two buttons — must stay on ONE line, so it is
   kept nowrap and its buttons/search are shrunk to fit common phone widths. */
@media (max-width: 781px) {
	/* Outer wide row may wrap onto two lines (logo / controls). */
	.jc-header > .wp-block-group {
		flex-wrap: wrap !important;
	}
	/* Right-side controls group and its inner buttons stay on one line. */
	.jc-header > .wp-block-group > .wp-block-group:nth-child(2),
	.jc-header .wp-block-buttons {
		flex-wrap: nowrap !important;
	}
	/* Shrink buttons so search + Sign in + JarvisClaw fit one line (height stays
	   fixed from the shared rule above; only tighten horizontal padding/font). */
	.jc-header .wp-block-buttons .wp-block-button .wp-block-button__link {
		padding: 0 0.75rem;
		font-size: 0.8125rem;
		white-space: nowrap;
	}
	.jc-header .wp-block-buttons .wp-block-button .wp-block-button__link,
	.jc-header .wp-block-search__button {
		height: 2.3rem;
	}
	.jc-header .wp-block-search__input {
		max-width: 100%;
		min-width: 0;
	}
	.jc-header .wp-block-group {
		min-width: 0;
	}
}

/* Mobile overlay menu: the nav block sets justifyContent:right, which core's
   open overlay inherits and pushes the items + close button to the right.
   Left-align them in the OPEN overlay only (desktop inline bar keeps right). */
.jc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
}
.jc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.jc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}
.jc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	right: auto;
	left: var(--wp--preset--spacing--30, 1rem);
}

/* ---- Hero ---- */
.jc-hero__title {
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.jc-hero__subtitle {
	max-width: 40ch;
	margin-inline: auto;
}

/* ---- Article cards ---- */
.jc-card {
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}
.jc-card:hover {
	box-shadow: 0 8px 30px rgba(22, 22, 29, 0.08);
	transform: translateY(-2px);
}
.jc-card__image img {
	width: 100%;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
}
.jc-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* ---- Single post + TOC ---- */
.jc-single {
	display: block;
}
.jc-toc {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	line-height: 1.4;
}
.jc-toc__title {
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.jc-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-inline-start: 2px solid var(--wp--preset--color--border);
}
.jc-toc__item--h3 {
	padding-inline-start: 1rem;
}
.jc-toc__link {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	margin-inline-start: -2px;
}
.jc-toc__link.is-active {
	color: var(--wp--preset--color--primary);
	border-inline-start-color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.jc-single__content :is(h2, h3) {
	scroll-margin-top: 5rem;
}

/* ---- Desktop: two-column with sticky TOC ---- */
/* Only form the grid when the TOC nav is actually shown (toc.js clears the
   [hidden] attribute once it builds a list). If the TOC is absent or hidden,
   .jc-single stays a normal block and the article uses the full width. */
@media (min-width: 1024px) {
	.jc-single:has(.jc-toc:not([hidden])) {
		display: grid;
		/* Stay at the wide width (1200px) so the block's left edge lines up with
		   the featured image / title above it. Col 2 (article) is capped narrower
		   than the full width, and col 1 (TOC) absorbs the remaining space. */
		grid-template-columns: minmax(200px, 1fr) minmax(0, 820px);
		gap: 1rem;
		align-items: start;
	}
	.jc-single:has(.jc-toc:not([hidden])) .jc-toc {
		position: sticky;
		top: 5rem;
		margin-bottom: 0;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}
}