/* Header search button and panel. See ecl-search.php. */
nav.navbar.validnavs ul.nav > li.ecl-search-item { display: flex; align-items: center; }
.ecl-search-open { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 10px 0 4px; padding: 0; border: 1px solid rgba(36, 20, 73, .14); border-radius: 50%; background: #fff; color: #241449; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.ecl-search-open:hover, .ecl-search-open:focus-visible, .ecl-search-open[aria-expanded="true"] { border-color: #6849d9; background: #f1edff; color: #5937c8; }
.ecl-search-open:focus-visible { outline: 3px solid rgba(104, 73, 217, .35); outline-offset: 2px; }
.ecl-search-open svg { display: block; }
.ecl-search-open__text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecl-search-open::before, .ecl-search-open::after { content: none !important; }
.ecl-search-open--mobile { display: none; }
/* The theme positions buttons inside menu items absolutely; keep this one in the row. */
nav.navbar.validnavs ul.nav > li.ecl-search-item > .ecl-search-open { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; }
/* Room for the icon: menu links lose 3px of side padding where the theme uses 15px. */
@media (min-width: 1400px), (min-width: 1200px) and (max-width: 1299px) {
	nav.navbar.validnavs ul.nav > li > a { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 1023px) {
	nav.navbar.validnavs ul.nav > li.ecl-search-item { display: none !important; }
	nav.navbar.validnavs .navbar-header .ecl-search-open--mobile { display: inline-grid; order: 2; margin: 0 10px 0 auto; width: 40px; height: 40px; }
	nav.navbar.validnavs .navbar-header .navbar-toggle { order: 3; margin-left: 0; }
}

html.ecl-search-on { overflow: hidden; }
.ecl-search { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 9vh, 110px) 16px 16px; font-family: Inter, "ECL Inter Fallback", Arial, sans-serif; }
.ecl-search[hidden] { display: none; }
.ecl-search *, .ecl-search *::before, .ecl-search *::after { box-sizing: border-box; }
.ecl-search .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecl-search__backdrop { position: absolute; inset: 0; background: rgba(23, 12, 48, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.ecl-search__panel { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border-radius: 26px; background: #fff; box-shadow: 0 40px 90px rgba(23, 12, 48, .35); opacity: 0; transform: translateY(-12px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.ecl-search.is-open .ecl-search__backdrop { opacity: 1; }
.ecl-search.is-open .ecl-search__panel { opacity: 1; transform: none; }

.ecl-search__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ecl-search__eyebrow { margin: 0 0 6px; color: #6849d9; font: 800 12px/1.3 Inter, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ecl-search__title { margin: 0; color: #241449; font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.ecl-search__close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(36, 20, 73, .14); border-radius: 50%; background: #fff; color: #241449; font-size: 26px; line-height: 1; cursor: pointer; }
.ecl-search__close:hover, .ecl-search__close:focus-visible { background: #241449; color: #fff; }
.ecl-search__close::before, .ecl-search__close::after { content: none !important; }

.ecl-search__form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border: 1.5px solid #ddd6ef; border-radius: 999px; background: #fbfaff; color: #6f687c; }
.ecl-search__form:focus-within { border-color: #6849d9; background: #fff; box-shadow: 0 0 0 4px rgba(104, 73, 217, .14); color: #6849d9; }
.ecl-search__form svg { flex: 0 0 auto; }
.ecl-search__form input[type=search] { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 6px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #241449; font: 500 17px/1 Inter, Arial, sans-serif; outline: none; }
.ecl-search__form input::placeholder { color: #8f879d; opacity: 1; }
.ecl-search__form input::-webkit-search-cancel-button { cursor: pointer; }
.ecl-search .ecl-search__form button { flex: 0 0 auto; height: 48px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: #241449; color: #fff; font: 700 15px/1 Inter, Arial, sans-serif; cursor: pointer; }
.ecl-search .ecl-search__form button::before, .ecl-search .ecl-search__form button::after { content: none !important; }
.ecl-search .ecl-search__form button:hover, .ecl-search .ecl-search__form button:focus-visible { background: #ffbd10; color: #241449; }

.ecl-search__status { margin: 14px 4px 10px; color: #6f687c; font-size: 14px; line-height: 1.5; }
.ecl-search__results ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ecl-search a.ecl-search__hit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 14px 16px; border: 1px solid transparent; border-radius: 16px; color: #241449; text-decoration: none; transition: background-color .14s ease, border-color .14s ease; }
.ecl-search a.ecl-search__hit:hover, .ecl-search a.ecl-search__hit:focus-visible { border-color: rgba(104, 73, 217, .3); background: #f6f3ff; outline: none; }
.ecl-search__type { grid-row: span 2; align-self: start; padding: 4px 9px; border-radius: 999px; background: #f1edff; color: #5937c8; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ecl-search__type--guide { background: #fff4d6; color: #7a5600; }
.ecl-search__type--page { background: #eaf6ff; color: #12507a; }
.ecl-search__hit strong { font-size: 16px; line-height: 1.35; }
.ecl-search__hit small { display: -webkit-box; overflow: hidden; color: #6f687c; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ecl-search a.ecl-search__all { display: inline-flex; gap: 8px; margin: 12px 4px 0; color: #5937c8; font-size: 15px; font-weight: 800; text-decoration: none; }
.ecl-search a.ecl-search__all:hover, .ecl-search a.ecl-search__all:focus-visible { color: #241449; text-decoration: underline; }

.ecl-search__popular { margin-top: 6px; }
.ecl-search__popular[hidden] { display: none; }
.ecl-search__popular p { margin: 0 4px 10px; color: #241449; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ecl-search__popular ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ecl-search__popular a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #ddd6ef; border-radius: 999px; background: #fff; color: #241449; font-size: 14px; font-weight: 700; text-decoration: none; }
.ecl-search__popular a:hover, .ecl-search__popular a:focus-visible { border-color: #241449; background: #241449; color: #fff; }

@media (max-width: 600px) {
	.ecl-search { padding: 12px; }
	.ecl-search__panel { padding: 20px 16px; border-radius: 20px; }
	.ecl-search__form { padding-left: 14px; }
	.ecl-search .ecl-search__form button { padding: 0 16px; }
	.ecl-search__form input[type=search] { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ecl-search__backdrop, .ecl-search__panel, .ecl-search-open { transition: none; }
}
/* Small laptops: the theme's 960px container is too narrow for the menu plus the icon, so the header uses the full width. */
@media (min-width: 1024px) and (max-width: 1199px) {
	nav.navbar.validnavs > .container { width: calc(100% - 32px) !important; max-width: none !important; }
}
