/* =====================================================================
MyvanCMS — Articles search band
---------------------------------------------------------------------
The deliberate counterpart to the footer's "Let's Talk" CTA band
(assets/footer-cta.css). It borrows that band's construction and then
INVERTS AND SHRINKS it, so the two read as a pair rather than a repeat:
- the CTA is maroon with white type; this is white with maroon type
- the CTA's title is 52px; this is ~20px, because it sits directly under
the hero's own and must not compete with it
- the CTA spans the container; this is capped at 760px and centred
- the same inline arrow, scaled down to match
- the same overlap trick — the CTA hangs off the TOP of the footer, this
hangs off the BOTTOM of the hero
NOT merged into footer-cta.css: that file owns the footer, and one of these
two will eventually be restyled without the other. They share a look, not an
implementation.
Loaded site-wide from layouts/public.php; costs nothing on a page with no
.search-band.
===================================================================== */
:root{
/* How far the band rides up over the hero's lower edge. Mirrors
--cta-overlap (78px) in footer-cta.css but is smaller, for two reasons:
the hero has a breadcrumb sitting just above this point that a deeper pull
would cover, and the band itself is now a shorter element than the CTA —
the overlap has to stay proportionate to it or the panel looks like it is
sliding off the photo. */
--search-overlap:28px;
}
.search-band-wrap{
position:relative;
z-index:3;
/* The pull-up. Negative TOP margin here, where the CTA band uses a negative
bottom margin, because this one overlaps the block ABOVE it. */
margin-top:calc(var(--search-overlap) * -1);
/*
* NO bottom margin. The .section that follows already carries the site's
* standard vertical rhythm, and adding to it here left an obvious dead band
* between the search and the first card — the two compounded.
*
* The pull-up above is also cancelled out of the flow below it: a negative
* top margin moves the element without reducing the space the NEXT element
* gets, which is exactly what is wanted here.
*/
}
/*
INVERTED against the footer's CTA band, on purpose: that band is maroon with
white type, this one is white with maroon type. Same shape, same radius, same
shadow, same arrow — reversed palette. It reads as the pair's second half
rather than as a duplicate, and it keeps a heavy block of brand colour off
the top of the page where the hero photo is already doing the work.
A white panel on a near-white page needs its own edge or it dissolves, so it
carries a hairline border as well as the shadow — the maroon version needed
neither.
*/
/*
COMPRESSED AND CENTRED. It no longer spans the container: it is capped and
auto-margined, so it reads as a search control sitting under the hero rather
than as a full-width band competing with it. justify-content:center packs the
title and field together in the middle instead of pushing them to opposite
edges.
*/
.search-band{
background:#fff;
border:1px solid var(--pl-line, #ece7e9);
border-radius:14px;
padding:12px 18px;
display:flex;
align-items:center;
justify-content:center;
gap:16px;
box-shadow:0 14px 34px rgba(23,27,42,.12);
/* It is a