/**
 * "Search Blog Articles" — the article search (template-parts/article-search.php).
 *
 * One component, loaded wherever the search appears: the blog listing, every article, the static pages on the
 * article layout, and the Difficult Conversations page. inc/article-search.php decides where.
 *
 * The field and button styles below used to live in archive.css scoped under .sc-blog, which is exactly why the
 * search could only ever appear on the blog listing — anywhere else the form came out unstyled. They are scoped
 * to the component now, with the same values, so the blog listing looks the same as before and every other page
 * gets the identical form.
 *
 * Placement (see inc/article-search.php):
 *   > 900px   the card, first in the sidebar                 (.sc-asearch--wide)
 *   <= 900px  the bar, at the top of the page                  (.sc-asearch--narrow)
 * 900px is where both the blog listing and the article layout drop their sidebar underneath the content.
 */

/* ------------------------------------------------------------- foundation */
.sc-asearch {
	/* The same three greys the blog listing and the article page already use for their fields and card edges
	   (archive.css --sc-blog-*, single.css --sc-post-*). */
	--sc-asearch-line: #e8ecf3;
	--sc-asearch-field: #dfe4ec;
	--sc-asearch-placeholder: #9aa4b2;
	--sc-asearch-gap: 24px;
}

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

/* ------------------------------------------------------------------ form */
.sc-asearch .sc-bsearch {
	display: grid;
	gap: var(--sc-asearch-gap);
}

/* The article sidebar's cards are the compact kind (20/18 padding, 17px titles), so the fields sit closer
   together than on the blog listing's roomier card. */
.sc-asearch.sc-pwidget {
	--sc-asearch-gap: 14px;
}

.sc-asearch .sc-field {
	position: relative;
	display: block;
}

.sc-asearch .sc-field__icon,
.sc-asearch .sc-field__chev {
	position: absolute;
	top: 50%;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
}

.sc-asearch .sc-field__icon {
	left: 14px;
	color: var(--sc-asearch-placeholder);
}

.sc-asearch .sc-field__chev {
	right: 12px;
	color: var(--sc-text-muted);
}

.sc-asearch input[type="search"],
.sc-asearch select {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--sc-asearch-field);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	box-shadow: none;
	font-family: var(--sc-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--sc-text);
	-webkit-appearance: none;
	appearance: none;
}

.sc-asearch input[type="search"] {
	padding-left: 42px;
}

.sc-asearch input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sc-asearch input[type="search"]::placeholder {
	color: var(--sc-asearch-placeholder);
	opacity: 1;
}

.sc-asearch select {
	padding-right: 40px;
	cursor: pointer;
}

.sc-asearch input[type="search"]:focus,
.sc-asearch select:focus {
	outline: none;
	border-color: var(--sc-navy);
	box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

.sc-asearch .sc-bsearch__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-orange);
	color: var(--sc-text-invert);
	font-family: var(--sc-font-body);
	font-size: 15px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: background var(--sc-transition);
}

.sc-asearch .sc-bsearch__submit:hover,
.sc-asearch .sc-bsearch__submit:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

/* ------------------------------------------------------------------- bar */
/* The compact form: a visible label, then the keyword field and the button on one row. Same white card, border
   and shadow as the sidebar cards, so it reads as the same thing moved to the top. */
.sc-asearch--bar {
	padding: 16px 18px 18px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-asearch-line);
	border-radius: var(--sc-radius);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
	text-align: left;
}

.sc-asearch .sc-asearch__form {
	margin: 0;
}

/* Styled like the sidebar card titles it stands in for (heading face, navy, 17px). */
.sc-asearch .sc-asearch__label {
	display: block;
	margin: 0 0 10px;
	font-family: var(--sc-font-heading);
	font-size: 17px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.3;
	color: var(--sc-navy);
	cursor: pointer;
}

.sc-asearch__row {
	display: flex;
	gap: 10px;
}

.sc-asearch .sc-asearch__keyword {
	flex: 1 1 auto;
	min-width: 0;
}

.sc-asearch .sc-asearch__cats {
	flex: 0 0 220px;
	min-width: 0;
}

/* Sized to its label beside the field, rather than full width as in the card. */
.sc-asearch .sc-asearch__submit {
	flex: 0 0 auto;
	width: auto;
	padding: 0 22px;
	white-space: nowrap;
}

/* -------------------------------------------------------- where it sits */
/* Article and topic pages: between the breadcrumb and the page heading, matching the breadcrumb's own gap. */
.sc-post__search {
	margin-bottom: 30px;
}

/* Blog listing: under the introduction, above the "Showing N blogs" line - search, then what it found. */
.sc-blog__search {
	margin-bottom: 20px;
}

/* Difficult Conversations: under the introduction in the hero, centred with it. */
.sc-dc__search {
	max-width: 640px;
	margin: 34px auto 0;
}

/* ------------------------------------------------------------ visibility */
/* Two copies on pages with a sidebar: the card for wide screens, the bar for narrow ones. Only one is ever
   displayed; display:none also takes the other out of the tab order and away from screen readers. */
.sc-asearch.sc-asearch--narrow {
	display: none;
}

@media (max-width: 900px) {
	.sc-asearch.sc-asearch--wide {
		display: none;
	}

	.sc-asearch.sc-asearch--narrow {
		display: block;
	}

	/* Blog listing only: archive.css lays its sidebar out as two cards side by side here - the search and
	   Related Blogs. With the search moved to the top, Related Blogs is the only card left, and would sit alone
	   in half the width. (The article sidebar keeps its 2x2 grid: it still has four cards.) */
	.sc-blog .sc-blog__side {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 768px) {
	.sc-post__search {
		margin-bottom: 22px;
	}

	.sc-dc__search {
		margin-top: 28px;
	}
}

/* Phones: the blog listing's bar carries the category menu as well, and three controls do not fit one row
   here - they stack, full width, in the same order as the sidebar card. */
@media (max-width: 640px) {
	.sc-asearch__row--cats {
		flex-direction: column;
	}

	.sc-asearch__row--cats .sc-asearch__cats {
		flex-basis: auto;
	}

	.sc-asearch__row--cats .sc-asearch__submit {
		width: 100%;
	}
}

/* Narrow phones: the keyword field would be left too short to show its own hint, so the button drops under
   it at full width. */
@media (max-width: 400px) {
	.sc-asearch__row {
		flex-direction: column;
	}

	.sc-asearch .sc-asearch__submit {
		width: 100%;
	}

	.sc-asearch--bar {
		padding: 14px 14px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-asearch .sc-bsearch__submit {
		transition-duration: 0.01ms;
	}
}