/* Footer search control.
 *
 * Corrections to what the WordPress/Astra export left behind. Loaded last so
 * these override the theme rules without needing inflated selectors.
 */

/* 1. The widget was set to display:none between 545px and 921px, while staying
 *    visible on phone and on desktop. Nothing in the design called for hiding
 *    it on tablet only, so show it at every width. */
.ast-header-break-point .footer-widget-area[data-section="sidebar-widgets-footer-widget-3"] {
	display: block;
}

/* 2. The wrapper carries an inline style="width: 20%", which on a 375px phone
 *    left a 67px box holding a 209px input — the control overflowed itself.
 *    Beating an inline style needs !important. */
#colophon .wp-block-search__inside-wrapper {
	width: 100% !important;
	max-width: 340px;
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* 3. The input rendered 22px tall against a 44px button. 44px is the minimum
 *    comfortable touch target (WCAG 2.5.5, Apple HIG), and 16px text stops iOS
 *    zooming the page when the field takes focus. */
#colophon .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 10px 14px;
	font-size: 16px;
	box-sizing: border-box;
	line-height: 1.2;
	border: 0;
	border-radius: 6px;
}

/* 4. The button used the theme's default green (#24B24A), which appears nowhere
 *    else as a fill and clashes with the navy footer. Use the site's CTA blue,
 *    and keep it on the same row as the input rather than wrapping below. */
#colophon .wp-block-search__button {
	flex: 0 0 auto;
	min-width: 48px;
	/* Astra's own padding pushed this to 54px against a 44px input; pin both. */
	height: 44px;
	margin: 0;
	padding: 0 14px;
	box-sizing: border-box;
	border: 0;
	border-radius: 6px;
	background-color: #00AEEF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#colophon .wp-block-search__button:hover,
#colophon .wp-block-search__button:focus {
	background-color: #3E2180;
}

#colophon .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}