/** * bw/search — "Brentwood Search" block. * * Thin layer on top of the shared header-search styles (assets/bw-search.css): * it reuses .bw-search__bar / __field / __lead / __input / __clear / __results * verbatim and only re-shapes the widget from an inline icon-dropdown into a * full-width, always-open search bar with a dropdown results panel — mirroring * brentwood.ca/search. Accents stay Brentwood red (#c8272c). */ /* Override the header widget's inline-flex; the block is a block-level bar. */ .bw-search.bw-search--inline { position: relative; display: block; width: 100%; max-width: 46rem; margin-left: auto; margin-right: auto; line-height: 1.4; } /* Wide/full alignment should fill the available width. */ .bw-search.bw-search--inline.alignwide, .bw-search.bw-search--inline.alignfull { max-width: none; } /* The bar: [ icon input ][ clear ][ Search ] as one row (no padding shell). */ .bw-search.bw-search--inline .bw-search__bar { padding: 0; margin: 0; display: flex; align-items: stretch; } .bw-search--inline .bw-search__field { position: relative; flex: 1 1 auto; display: flex; min-width: 0; } /* Input: rounded left, square right so it butts against the clear/submit. */ .bw-search--inline .bw-search__input { border-radius: .4rem 0 0 .4rem; } /* When there is no clear button and no submit button, round both ends. */ .bw-search--static .bw-search__input { border-right: 1px solid #e3e3e3; border-radius: .4rem; } .bw-search--static .bw-search__field { flex: 1 1 auto; } /* The visible "Search" submit button (Brentwood red). */ .bw-search--inline .bw-search__submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.4rem; border: 1px solid #c8272c; border-left: 0; border-radius: 0 .4rem .4rem 0; background: #c8272c; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; } .bw-search--inline .bw-search__submit:hover, .bw-search--inline .bw-search__submit:focus-visible { background: #a81f24; border-color: #a81f24; } /* When a submit button follows the clear button, the clear cell keeps its right border off so the three cells read as one control. */ .bw-search--inline .bw-search__clear { border-radius: 0; } /* Red focus ring across the whole control (mirror the header widget). */ .bw-search--inline .bw-search__bar:focus-within .bw-search__input, .bw-search--inline .bw-search__bar:focus-within .bw-search__clear { border-color: #c8272c; } /* ---- Live results: portalled fixed panel ---- assets/bw-search.js moves this element to and tags it .--float, so it can't be trapped by a transformed/clipped ancestor. It's fixed to the viewport; JS sets left/top/width to track the bar (positionInline) and reflows on scroll. Styled top-level (not under .bw-search--inline) because it no longer lives inside the block wrapper. */ .bw-search__results--float { position: fixed; z-index: 100000; background: #fff; border: 1px solid #e3e3e3; border-radius: .5rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .14), 0 3px 10px rgba(0, 0, 0, .06); max-height: 70vh; overflow-y: auto; } /* Editor-only helper note under the preview bar. */ .bw-search__editor-note { margin: .6rem 0 0; font-size: .8rem; color: #6b7280; font-style: italic; } /* ---- Mobile: stack the Search button under the input ---- */ @media (max-width: 480px) { .bw-search--inline .bw-search__bar { flex-wrap: wrap; } .bw-search--inline .bw-search__field { flex: 1 1 100%; } .bw-search--inline .bw-search__input { border-right: 1px solid #e3e3e3; border-radius: .4rem; } .bw-search--inline .bw-search__clear { border: 1px solid #e3e3e3; border-top: 0; border-radius: 0 0 0 .4rem; } .bw-search--inline .bw-search__submit { flex: 1 1 auto; border: 1px solid #c8272c; border-top: 0; border-radius: 0 0 .4rem 0; padding: .6rem 1rem; } }