/* The theme's own search form (inc/search-widget.php's
   nonotami_render_search_form()) — used by the "Nonotami: Search" widget
   and the mobile menu overlay alike, one shared look: just the field and
   a glass-icon submit button, no label, no title. */
.nonotami-search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid currentColor;
	padding: 0.5rem 0.75rem;
	/* In the sidebar (align-items: stretch, see css/layout.css) a flex
	   item with no width of its own fills the cross axis, so without a
	   max-width this just stretches edge to edge instead of sitting
	   centered like the logo widget does. Harmless in the mobile menu
	   overlay, the form's other call site, which is already narrow. */
	max-width: 20rem;
	margin: 0 auto;
}

.nonotami-search-field {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	font: inherit;
	background: none;
	color: inherit;
}

/* outline: none above only ever removes the FIELD's own default ring —
   the whole form's border still visibly changes on focus, so a keyboard
   user tabbing in isn't left with no indication where they are at all. */
.nonotami-search-form:has( .nonotami-search-field:focus-visible ) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nonotami-search-submit {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	font-size: 0;
}

.nonotami-search-submit::after {
	content: '\1F50D';
	font-size: 1.2rem;
	line-height: 1;
}