/* Search page on classic themes (the Elementor site). search.css styles the results; this file adds the
   Watterson palette (the theme has no theme.json tokens), the hero, and resets the theme's own form, button,
   heading and list styles inside the page. Text uses the site's own font (Manrope on the Industrium site):
   everything inherits it from the page instead of search.css's Space Grotesk / Inter.
   Everything is scoped to #wts-search-page, or #wts-search-ov for the search pop-up (loaded on every page). */

#wts-search-page {
	--wp--preset--color--ink: #15173A;
	--wp--preset--color--muted: #5B6082;
	--wp--preset--color--line: #BCC5DE;
	--wp--preset--color--paper: #FAFBFF;
	--wp--preset--color--lift: #ECEEFF;
	--wp--preset--color--violet: #5661E6;
	--wp--preset--color--violet-ink: #3B45C2;
	--wp--preset--color--cyan: #14BFDC;
	--wp--preset--color--cyan-ink: #0A93AB;
	display: block;
	width: 100%;
	background: #FAFBFF;
	color: #15173A;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
#wts-search-page *, #wts-search-page *::before, #wts-search-page *::after { box-sizing: border-box; font-family: inherit; }

/* hero: same blue gradient as the Watterson page heroes */
#wts-search-page .wts-sr-hero {
	background: radial-gradient(520px 300px at 92% 0, rgba(20, 191, 220, .55), transparent 65%), linear-gradient(135deg, #2A2F9E 0%, #4650E0 60%, #3F78E3 100%);
	padding: 44px 24px 34px;
}
#wts-search-page .wts-sr-hero__in { max-width: 1180px; margin: 0 auto; }
#wts-search-page .wts-sr-hero__eyebrow {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #9FF0FF;
}
#wts-search-page .wts-sr-hero__eyebrow::before { content: ""; width: 22px; height: 2px; background: #9FF0FF; border-radius: 2px; }
#wts-search-page .wts-sr-hero__title {
	margin: 14px 0 10px; padding: 0;
	font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: #fff;
}
#wts-search-page .wts-sr-page__body { padding: 36px 24px 64px; }

/* resets against the theme */
#wts-search-page h2, #wts-search-page h3, #wts-search-page h4, #wts-search-page p, #wts-search-page summary {
	text-transform: none; letter-spacing: normal; text-shadow: none;
}
#wts-search-page h2, #wts-search-page h3 { color: #15173A; font-weight: 700; }
#wts-search-page .wts-sr__facet h4 { margin: 18px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
#wts-search-page .wts-card h3 { font-weight: 600; }
#wts-search-page ul, #wts-search-page li { list-style: none; margin-left: 0; padding-left: 0; }
#wts-search-page li::before, #wts-search-page li::after { content: none !important; display: none !important; }
#wts-search-page a { text-decoration: none; box-shadow: none; }

/* Link-styled controls: the theme's link colour (and hover colour) outranks search.css, so set them here.
   Borders are set in full: the pills are links with a 1px border on every side. */
#wts-search-page .wts-sr__sort a, #wts-search-page .wts-sr__popular a { color: #15173A; border: 1px solid var(--wp--preset--color--line); background: #fff; }
#wts-search-page .wts-sr__sort a:hover, #wts-search-page .wts-sr__popular a:hover { color: var(--wp--preset--color--violet-ink); border-color: var(--wp--preset--color--violet); background: #fff; }
#wts-search-page .wts-sr__sort a.is-on, #wts-search-page .wts-sr__sort a.is-on:hover { color: #fff; background: #15173A; border-color: #15173A; }
#wts-search-page .wts-sr__popular a { display: inline-block; line-height: 1.3; }
#wts-search-page .wts-sr__facet li a { color: #15173A; border: 0; }
#wts-search-page .wts-sr__facet li a:hover { color: #15173A; background: var(--wp--preset--color--lift); }
#wts-search-page .wts-sr__facet li a.is-on, #wts-search-page .wts-sr__facet li a.is-on:hover { color: var(--wp--preset--color--violet-ink); background: var(--wp--preset--color--lift); }
#wts-search-page .wts-card h3 a { color: #15173A; }
#wts-search-page .wts-card h3 a:hover { color: var(--wp--preset--color--violet-ink); }
#wts-search-page .wts-chip, #wts-search-page .wts-chip:hover { color: var(--wp--preset--color--violet-ink); background: var(--wp--preset--color--lift); }
#wts-search-page .wts-sr__clear, #wts-search-page .wts-sr__clear:hover { color: var(--wp--preset--color--muted); text-decoration: underline; }
#wts-search-page .wts-sr__more, #wts-search-page .wts-sr__more:hover { color: var(--wp--preset--color--violet-ink); }
#wts-search-page .wts-sr__ask { display: inline-block; color: #fff; background: #15173A; border: 0; font-weight: 600; line-height: 1.2; transition: background .18s; }
#wts-search-page .wts-sr__ask:hover, #wts-search-page .wts-sr__ask:focus { color: #fff; background: var(--wp--preset--color--violet); }
#wts-search-page a::before, #wts-search-page a::after { content: none !important; display: none !important; }
#wts-search-page details > summary::-webkit-details-marker { display: none; }
#wts-search-page details > summary::marker { content: ""; }

#wts-search-page .wts-sr__form input[type="search"] {
	height: auto !important; min-height: 48px; width: auto; margin: 0 !important;
	font-family: inherit !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important;
	padding: 13px 14px !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 11px !important;
	background: var(--wp--preset--color--paper) !important; color: #15173A !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
#wts-search-page .wts-sr__form input[type="search"]:focus { border-color: var(--wp--preset--color--violet) !important; box-shadow: 0 0 0 4px var(--wp--preset--color--lift) !important; background: #fff !important; }
#wts-search-page .wts-sr__form button {
	height: auto !important; min-height: 48px; margin: 0 !important; width: auto !important;
	font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: normal !important; text-transform: none !important;
	padding: 0 18px !important; border: 1px solid #15173A !important; border-radius: 11px !important; background: #15173A !important; color: #fff !important; box-shadow: none !important;
}
#wts-search-page .wts-sr__form button:hover { background: var(--wp--preset--color--violet) !important; border-color: var(--wp--preset--color--violet) !important; }
#wts-search-page .wts-sr__form button::before, #wts-search-page .wts-sr__form button::after { content: none !important; display: none !important; }

@media (max-width: 600px) {
	#wts-search-page .wts-sr-hero { padding: 32px 16px 26px; }
	#wts-search-page .wts-sr-page__body { padding: 24px 16px 48px; }
}

/* Search pop-up (#wts-search-ov, on every page): same palette, the site's font, and resets against the theme's
   input and button styles (Industrium strips the field's padding and makes buttons bold uppercase). */
#wts-search-ov {
	--wp--preset--color--ink: #15173A;
	--wp--preset--color--muted: #5B6082;
	--wp--preset--color--line: #BCC5DE;
	--wp--preset--color--paper: #FAFBFF;
	--wp--preset--color--lift: #ECEEFF;
	--wp--preset--color--violet: #5661E6;
	--wp--preset--color--violet-ink: #3B45C2;
	--wp--preset--color--cyan-ink: #0A93AB;
	font-family: inherit;
	line-height: 1.45;
	text-align: left;
}
#wts-search-ov *, #wts-search-ov *::before, #wts-search-ov *::after { box-sizing: border-box; font-family: inherit; letter-spacing: normal; text-transform: none; }
#wts-search-ov .wts-ov__form { display: flex; gap: 8px; margin: 0; }
#wts-search-ov .wts-ov__form input[type="search"] {
	flex: 1; min-width: 0; width: auto !important; height: auto !important; min-height: 52px; margin: 0 !important;
	font-size: 16px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important;
	padding: 13px 16px !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 11px !important;
	background: var(--wp--preset--color--paper) !important; color: #15173A !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none; appearance: none;
}
#wts-search-ov .wts-ov__form input[type="search"]::placeholder { color: #8A8FAE; opacity: 1; }
#wts-search-ov .wts-ov__form input[type="search"]:focus { border-color: var(--wp--preset--color--violet) !important; box-shadow: 0 0 0 4px var(--wp--preset--color--lift) !important; background: #fff !important; }
#wts-search-ov .wts-ov__form button {
	flex: 0 0 auto; width: auto !important; height: auto !important; min-height: 52px; margin: 0 !important;
	font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
	padding: 0 22px !important; border: 1px solid #15173A !important; border-radius: 11px !important; background: #15173A !important; color: #fff !important; box-shadow: none !important;
}
#wts-search-ov .wts-ov__form button:hover { background: var(--wp--preset--color--violet) !important; border-color: var(--wp--preset--color--violet) !important; }
#wts-search-ov .wts-ov__close {
	display: grid; place-items: center; width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: #fff !important; color: #15173A !important;
	font-size: 22px !important; line-height: 1 !important; box-shadow: 0 6px 18px -6px rgba(21, 23, 58, .4) !important;
}
#wts-search-ov ul, #wts-search-ov li { list-style: none; margin-left: 0; padding-left: 0; }
#wts-search-ov li::before, #wts-search-ov li::after, #wts-search-ov a::before, #wts-search-ov a::after,
#wts-search-ov button::before, #wts-search-ov button::after { content: none !important; display: none !important; }
#wts-search-ov a { text-decoration: none; box-shadow: none; }
#wts-search-ov .wts-ov__pop a { display: inline-block; line-height: 1.3; color: #15173A; border: 1px solid var(--wp--preset--color--line); background: #fff; }
#wts-search-ov .wts-ov__pop a:hover { color: var(--wp--preset--color--violet-ink); border-color: var(--wp--preset--color--violet); background: #fff; }
#wts-search-ov .wts-ov__list a, #wts-search-ov .wts-ov__list a:hover { color: #15173A; }
#wts-search-ov .wts-ov__all, #wts-search-ov .wts-ov__all:hover { color: var(--wp--preset--color--violet-ink); }
#wts-search-ov .wts-ov__pop span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--muted); }
#wts-search-ov .wts-ov__type { letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 520px) {
	#wts-search-ov .wts-ov__form button { padding: 0 16px !important; }
}