/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* -------------------------------------------------------------------------
 * Search overlay: keep the close button from covering the search form.
 *
 * Bricks' search element renders TWO buttons -- .toggle (the magnifying
 * glass in the header) and .close (the X inside the overlay). The header
 * template styles them together with a single `#brxe-<id> button` rule, so
 * the `width: 100%; height: 100%` intended for the small toggle also lands
 * on .close. Because .close is `position: fixed`, 100% means the entire
 * viewport, and Bricks' own `:where(.brxe-search) button` rule centres its
 * glyph with flexbox.
 *
 * The result is a viewport-sized button stacked above the form: .close and
 * .bricks-search-inner both carry z-index 1, and .close comes later in the
 * DOM, so it paints on top. At rest its X is white on the white overlay, so
 * the panel is invisible while still swallowing every click (its handler
 * closes the overlay). On hover it takes the template's
 * `background-color: #BA0F00` and the title and input vanish behind it.
 *
 * !important is deliberate. The offending rule is generated from an ID
 * selector we do not author, and it lives in wp_postmeta as part of the
 * Bricks header template -- so narrowing it in the builder would be undone
 * by the next dump import from upstream. A file-based override is the only
 * form of this fix that survives a restore.
 * ------------------------------------------------------------------------- */
.bricks-search-overlay .close {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: inherit !important;
}

.bricks-search-overlay .close:hover,
.bricks-search-overlay .close:focus-visible {
	background-color: transparent !important;
	border-color: transparent !important;
	color: inherit !important;
}