/*
 * Width/left-alignment is handled natively by wp:columns {"align":"wide"}
 * with an explicit column width percentage (matching this theme's own
 * footer.html convention) — no CSS override needed for that.
 *
 * The breadcrumb→title and title→search gaps use padding-bottom set
 * directly as a real block attribute (style.spacing.padding on wp:group
 * and wp:post-title/wp:query-title), not margin or blockGap — both proved
 * unreliable here via direct DevTools inspection (WordPress's layout
 * support zeroes margin-block-end on every child of a default/constrained
 * container, and a competing rule silently beat blockGap's own
 * margin-block-start too). Padding has no such conflict.
 *
 * theme.json's global heading style still sets its own margin-top on every
 * heading, which the padding-bottom approach doesn't cancel — reset just
 * that one property so it doesn't add unwanted extra space above the title
 * on top of the breadcrumb's padding-bottom.
 *
 * core/search's border support is marked __experimentalSkipSerialization in
 * its own block.json, so border-radius set via block attributes does not
 * reliably serialize into the saved markup — this genuinely needs CSS,
 * unlike the spacing/width issues above.
 *
 * The breadcrumb icon's line-height:0 fix lives in the shared
 * spotlight-breadcrumb-icon.css instead of here, since the same icon
 * pattern repeats in page-intro-banner.php too.
 */

.archive-listing-header .wp-block-post-title.archive-listing-header__title,
.archive-listing-header .wp-block-query-title.archive-listing-header__title {
	margin-top: 0;
}

/*
 * WordPress core's own block-library CSS ships `.wp-block-columns {
 * align-items: normal !important; }`, which beats the native
 * verticalAlignment attribute's own (non-!important) class — confirmed
 * live via matched stylesheets. Same unavoidable case as
 * dashboard-promo-hero.css.
 */
.archive-listing-header .wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}

/*
 * post-listing-header (search.html's own results-page search box) reuses
 * this same pill treatment — same wp:search buttonPosition:"button-inside"
 * shape, just a plain light-background context instead of the dark
 * archive-listing-header banner.
 */
.archive-listing-header .wp-block-search__inside-wrapper,
.post-listing-header .wp-block-search__inside-wrapper {
	border-radius: var(--wp--preset--border-radius--500);
	overflow: hidden;
	height: 60px;
	padding: var(--wp--preset--spacing--5);
	align-items: center;
}

/* Figma's Search Button node (547:9536) uses border-radius--500 directly
   on the button itself, not just the outer wrapper — a full pill/capsule,
   not just rounded corners on the overall bar. It's also h-full in Figma
   (fills the 60px pill minus the wrapper's own spacing--5 padding), not
   sized by its own vertical padding — the button's default padding-top/
   bottom (from theme.json's element style) was inflating the whole bar
   to ~73px tall instead of Figma's 60px.
 */
.archive-listing-header .wp-block-search__button,
.post-listing-header .wp-block-search__button {
	border-radius: var(--wp--preset--border-radius--500);
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);
}

.archive-listing-header .wp-block-search__input,
.post-listing-header .wp-block-search__input {
	padding-left: var(--wp--preset--spacing--60);
	background-image: url('../icons/magnifying-glass.svg');
	background-repeat: no-repeat;
	background-position: var(--wp--preset--spacing--20) center;
	background-size: 1.25em;
}

.post-listing-header .wp-block-search__inside-wrapper {
	border: var(--wp--custom--border-width--base) solid var(--wp--preset--color--neutral-300);
}

/*
 * wp:search's own "width" attribute is a fixed px value with no
 * responsive fallback — post-listing-header's 400px search box
 * overflowed narrow viewports instead of shrinking with its flex-wrap
 * row.
 */
.archive-listing-header .wp-block-search,
.post-listing-header .wp-block-search {
	max-width: 100%;
}