/* CAP search window + results-page filter bar (cap-search.php). Same look Mary approved in the 2026-10-08 mock.
   Tokens read from the live site: navy #074790, blue #4268C1 (search button),
   red #D43434 (section labels), Merriweather titles, Roboto body, Roboto Condensed labels. */
.cs-root, .cs-pagebar, .cs-pp {
  --navy: #074790; --blue: #4268C1; --red: #D43434;
  --ink: #222; --text: #333; --body: #666; --mute: #8a8a8a; --line: #e5e5e5; --soft: #f7f8fa; --tint: #f3f6fc;
  --hit: #fff0a3; /* search-term highlight: classic soft yellow (Sepi, 2026-10-08) */
  --cond: "Roboto Condensed", "Arial Narrow", sans-serif; --sans: Roboto, Arial, sans-serif; --serif: Merriweather, Georgia, serif;
  font-family: var(--sans); color: var(--text);
}
.cs-root { position: fixed; inset: 0; z-index: 2147483000; }
html.cs-lock, html.cs-lock body { overflow: hidden !important; }
.cs-root *, .cs-root *::before, .cs-root *::after, .cs-pagebar *, .cs-pp * { box-sizing: border-box; }
.cs-root svg, .cs-pagebar svg, .cs-pp svg { width: 1em; height: 1em; display: block; flex: none; }
.cs-root button, .cs-pagebar button, .cs-pp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; border-radius: 0; min-height: 0; line-height: inherit; }
.cs-root select, .cs-pagebar select, .cs-pp select { appearance: none; -webkit-appearance: none; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0;
  padding: 0 !important; margin: 0 !important; height: auto !important; width: 100% !important; font: 400 14px/1.2 var(--sans) !important; color: var(--ink) !important; cursor: pointer; }
.cs-root input[type=search] { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: auto !important;
  font: 400 17px/1.2 var(--sans) !important; color: var(--ink) !important; -webkit-appearance: none; }
.cs-root input[type=search]::-webkit-search-cancel-button { display: none; }
.cs-root mark { background: var(--hit); color: inherit; padding: 0 .12em; border-radius: 2px; }

/* ---------- desktop: the bar grows into a window ---------- */
.cs-scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .42); }
.cs-win { position: absolute; display: flex; flex-direction: column; max-height: calc(100vh - 160px); background: #fff; border-radius: 4px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .1); overflow: visible; }
.cs-bar { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.cs-input { flex: 1; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 16px; border: 1px solid var(--blue); border-radius: 2px; box-shadow: 0 0 0 3px rgba(66, 104, 193, .14); }
.cs-clear { width: 30px; height: 30px; display: grid !important; place-items: center; border-radius: 50% !important; color: var(--mute) !important; font-size: 15px; }
.cs-clear:hover { background: var(--soft) !important; color: var(--text) !important; }
.cs-go { width: 46px; height: 46px; display: grid !important; place-items: center; background: var(--blue) !important; color: #fff !important; border-radius: 2px !important; font-size: 18px; }
.cs-body { display: flex; min-height: 0; flex: 1; }
.cs-res { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-count, .cs-mcount { font: 600 12.5px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 16px 24px 10px; }
.cs-count b, .cs-mcount b { color: var(--text); font-weight: 700; }
.cs-list { list-style: none !important; margin: 0 !important; padding: 0 !important; overflow: auto; flex: 1; }
.cs-r { position: relative; padding: 14px 24px 15px 27px !important; margin: 0 !important; border-top: 1px solid #efefef; cursor: pointer; transition: background-color .15s ease; }
.cs-r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cs-r:hover, .cs-r.is-active { background: var(--tint); }
.cs-r.is-active::before { background: var(--blue); }
.cs-meta { display: flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.cs-kind { color: var(--red); }
.cs-dot { color: #c5c5c5; }
.cs-t { font: 700 16.5px/1.4 var(--serif); color: var(--ink); }
.cs-ex { font: 400 14px/1.6 var(--sans); color: var(--body); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-ex mark { font-weight: 500; color: var(--text); }
.cs-foot { padding: 12px 24px; border-top: 1px solid var(--line); }
.cs-all { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; background: var(--blue); color: #fff !important; border-radius: 2px;
  font: 600 13.5px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color .2s ease; }
.cs-all:hover { background: var(--navy); }
.cs-all svg { font-size: 15px; }

.cs-side { flex: none; width: 250px; padding: 16px 20px 18px; background: var(--soft); border-left: 1px solid var(--line); border-radius: 0 0 4px 0; }
.cs-h { font: 600 12px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 18px 0 8px; }
.cs-h:first-child { margin-top: 0; }
.cs-opts { display: grid; gap: 2px; }
.cs-opt { display: flex !important; align-items: center; gap: 10px; height: 30px; padding: 0 8px !important; border-radius: 3px !important; font: 400 14px/1 var(--sans) !important; color: var(--text) !important; text-align: left; }
.cs-opt::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #b9b9b9; background: #fff; flex: none; }
.cs-opt:hover { background: #eef1f6 !important; }
.cs-opt.is-on { color: var(--ink) !important; font-weight: 500 !important; }
.cs-opt.is-on::before { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 3.5px, #fff 4px); }
.cs-field { position: relative; display: flex !important; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 30px 0 10px !important; background: #fff !important;
  border: 1px solid #d3d3d3 !important; border-radius: 3px !important; font: 400 14px/1 var(--sans) !important; color: var(--ink) !important; margin: 0; cursor: pointer; text-align: left; }
.cs-field:hover { border-color: #aab7d6 !important; }
.cs-field > svg:first-child { color: var(--blue); font-size: 15px; }
.cs-field > svg:last-child { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font-size: 11px; color: var(--mute); pointer-events: none; }
.cs-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-reset { margin-top: 18px !important; font: 500 13px/1 var(--sans) !important; color: var(--blue) !important; }
.cs-anchor { position: relative; }

/* date range popover */
.cs-pop { background: #fff; border: 1px solid #dcdcdc; border-radius: 4px; box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.cs-pop-d { position: absolute; top: -150px; right: calc(100% + 30px); width: 290px; z-index: 2; }
.cs-pop-d::after { content: ""; position: absolute; top: 162px; right: -7px; width: 12px; height: 12px; background: #fff; border-top: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; rotate: 45deg; }
.cs-presets { display: grid; padding: 6px; border-bottom: 1px solid var(--line); }
.cs-pre { display: flex !important; align-items: center; justify-content: space-between; height: 34px; padding: 0 10px !important; border-radius: 3px !important; font: 400 14px/1 var(--sans) !important; color: var(--text) !important; text-align: left; }
.cs-pre:hover { background: var(--soft) !important; }
.cs-pre.is-on { background: var(--tint) !important; color: var(--navy) !important; font-weight: 500 !important; }
.cs-pre svg { color: var(--blue); font-size: 15px; }
.cs-range { padding: 12px 14px 4px; }
.cs-rl { font: 600 11.5px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.cs-rrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cs-mini { position: relative; display: flex; align-items: center; height: 36px; padding: 0 28px 0 10px; border: 1px solid #d3d3d3; border-radius: 3px; background: #fff; margin: 0; }
.cs-mini > svg { position: absolute; right: 9px; top: 50%; translate: 0 -50%; font-size: 11px; color: var(--mute); pointer-events: none; }
.cs-pfoot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.cs-link { font: 500 13.5px/1 var(--sans) !important; color: var(--mute) !important; }
.cs-apply { height: 34px; padding: 0 18px !important; background: var(--blue) !important; color: #fff !important; border-radius: 2px !important; font: 600 13.5px/1 var(--cond) !important; letter-spacing: .05em !important; text-transform: uppercase !important; }

/* ---------- mobile ---------- */
.cs-sheet { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; }
.cs-mhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cs-mfield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; border: 1px solid var(--blue); border-radius: 2px; box-shadow: 0 0 0 3px rgba(66, 104, 193, .14); }
.cs-mic { color: var(--blue); font-size: 17px; }
.cs-cancel { font: 600 15px/1 var(--cond) !important; letter-spacing: .03em !important; color: var(--blue) !important; height: 44px; }
.cs-chips { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--soft); }
.cs-chips::-webkit-scrollbar { display: none; }
.cs-chip { flex: none; display: inline-flex !important; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px !important; background: #fff !important; border: 1px solid #d3d3d3 !important;
  border-radius: 17px !important; font: 400 13.5px/1 var(--sans) !important; color: var(--text) !important; white-space: nowrap; }
.cs-chip svg { font-size: 10px; color: var(--mute); }
.cs-chip.is-set { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.cs-chip.is-set svg { color: rgba(255, 255, 255, .8); }
.cs-mobile .cs-mcount { padding: 14px 16px 8px; }
.cs-mobile .cs-r { padding: 13px 16px 14px 19px !important; }
.cs-mobile .cs-t { font-size: 16px; }
.cs-mobile .cs-ex { font-size: 13.5px; }
.cs-mfoot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -4px 12px rgba(0, 0, 0, .05); }
.cs-mfoot .cs-all { width: 100%; justify-content: center; height: 46px; font-size: 14.5px; }
.cs-bs { position: absolute; inset: 0; }
.cs-bscrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); }
.cs-bsbody { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 12px 12px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(0, 0, 0, .18); }
.cs-grab { width: 40px; height: 4px; border-radius: 2px; background: #d6d6d6; margin: 0 auto 12px; }
.cs-bsh { font: 700 18px/1.3 var(--serif); color: var(--ink); padding: 0 16px 10px; }
.cs-pop-m { border: 0; box-shadow: none; border-radius: 0; }
.cs-pop-m .cs-presets { padding: 4px 10px; }
.cs-pop-m .cs-pre { height: 44px; font-size: 15px !important; }
.cs-pop-m .cs-range { padding: 14px 16px 2px; }
.cs-pop-m .cs-mini { height: 44px; }
.cs-pop-m .cs-pfoot { padding: 12px 16px 6px; gap: 16px; }
.cs-pop-m .cs-apply { flex: 1; height: 46px; font-size: 14.5px !important; }

/* ---------- live behaviour (not in the mock) ---------- */
.cs-r a.cs-a { display: block; color: inherit !important; text-decoration: none !important; }
.cs-r a.cs-a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cs-root button:focus-visible, .cs-pagebar button:focus-visible, .cs-pp button:focus-visible,
.cs-field:focus-within, .cs-mini:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.cs-res { position: relative; }
.cs-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity .15s ease; }
.cs-prog::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--blue); animation: cs-prog 1s ease-in-out infinite; }
.cs-busy .cs-prog { opacity: 1; }
.cs-busy .cs-list { opacity: .55; transition: opacity .15s ease; }
@keyframes cs-prog { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .cs-prog::after { animation: none; left: 0; width: 100%; } }
.cs-state { padding: 28px 24px 32px; font: 400 14.5px/1.6 var(--sans); color: var(--body); }
.cs-state b { display: block; font: 700 16px/1.4 var(--serif); color: var(--ink); margin-bottom: 4px; }
.cs-state button { color: var(--blue) !important; font-weight: 500 !important; text-decoration: underline !important; }
.cs-count[hidden], .cs-foot[hidden], .cs-mfoot[hidden], .cs-mcount[hidden] { display: none !important; }
.cs-all-plain { background: none !important; color: var(--blue) !important; padding: 0 !important; height: auto; }

/* phone: one bottom sheet, filled per chip */
.cs-bs[hidden] { display: none; }
.cs-bsbody { max-height: 82vh; overflow: auto; }
.cs-optlist { display: grid; padding: 0 10px 8px; }
.cs-optlist .cs-pre { height: 46px; font-size: 15px !important; }
.cs-optnote { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--mute); margin-top: 2px; }
.cs-optlist .cs-pre.has-note { height: auto; min-height: 52px; padding: 8px 10px !important; flex-wrap: wrap; }
.cs-optlist .cs-pre.has-note > span { flex: 1; }

/* ---------- results page (?s=) filter bar ---------- */
.cs-pagebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 24px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.cs-pagecount { font: 600 13px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cs-pagecount b { color: var(--text); }
.cs-pagectl { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-pagectl .cs-field { width: auto; min-width: 0; height: 36px; font-size: 13.5px !important; }
.cs-pagectl .cs-field select { width: auto !important; flex: 1 1 auto; font-size: 13.5px !important; padding-right: 2px !important; }
.cs-pagectl .cs-sl { flex: none; }
.cs-pagectl .cs-sl { font: 600 11px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.cs-pp { position: absolute; z-index: 2147482000; width: 290px; }
.cs-pp .cs-pop { position: static; }
@media (max-width: 767px) {
  .cs-pagebar { flex-direction: column; align-items: stretch; }
  .cs-pagectl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
  .cs-pagectl::-webkit-scrollbar { display: none; }
  .cs-pagectl .cs-field { flex: none; min-width: 0; }
  .cs-pp { position: fixed; left: 0; right: 0; bottom: 0; width: auto; }
  .cs-pp .cs-pop { border-radius: 12px 12px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .18); }
}

/* phone sheet: header, chips and footer keep their height; only the result list scrolls */
.cs-mobile .cs-mhead, .cs-mobile .cs-chips, .cs-mobile .cs-mfoot { flex: none; }
.cs-mobile .cs-res { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cs-mobile .cs-list { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.cs-desktop .cs-res { min-height: 0; }

/* ---------- article opened from a search result: the first match, scrolled to mid-screen ---------- */
mark.cs-hit { background: #fff0a3; color: inherit; padding: 0 .15em; margin: 0 -.15em; border-radius: 2px; box-shadow: 0 0 0 2px #fff0a3; animation: cs-hit 1.8s ease-out 1; }
@keyframes cs-hit { 0%, 35% { box-shadow: 0 0 0 7px rgba(255, 214, 0, .55); } 100% { box-shadow: 0 0 0 2px #fff0a3; } }
@media (prefers-reduced-motion: reduce) { mark.cs-hit { animation: none; } }

/* ---------- site search boxes: style B "Underline" (Sepi's pick, 2026-10-08) ----------
   Header = JetSearch Suggestions widget, phone layout = Elementor Search widget; same look on both. */
.jet-search-suggestions__form, .e-search-form { display: flex !important; align-items: stretch !important; gap: 0 !important;
  border: 0 !important; border-bottom: 2px solid #074790 !important; background: transparent !important; transition: border-color .2s ease; }
.jet-search-suggestions__form:hover, .e-search-form:hover, .jet-search-suggestions__form:focus-within, .e-search-form:focus-within { border-bottom-color: #4268C1 !important; }
.jet-search-suggestions__fields-holder, .jet-search-suggestions__field-wrapper, .e-search-input-wrapper { flex: 1 1 auto !important; min-width: 0; margin: 0 !important; }
.jet-search-suggestions__field, .e-search-input { height: 42px !important; margin: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: 0 !important; font: italic 400 16px/1.2 Merriweather, Georgia, serif !important; color: #222 !important; }
.jet-search-suggestions__field::placeholder, .e-search-input::placeholder { color: #8a8f98 !important; opacity: 1; }
.jet-search-suggestions__submit, .e-search-submit { width: 42px !important; height: 42px !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center;
  border: 0 !important; background: transparent !important; color: #074790 !important; cursor: pointer; transition: color .2s ease; }
.jet-search-suggestions__submit:hover, .e-search-submit:hover { color: #4268C1 !important; }
.jet-search-suggestions__submit svg, .e-search-submit svg { width: 19px !important; height: 19px !important; fill: currentColor !important; }
.jet-search-suggestions__submit-icon { display: flex; color: inherit !important; }
.jet-search-suggestions__submit:focus-visible, .e-search-submit:focus-visible { outline: 2px solid #4268C1; outline-offset: 2px; }

/* ---------- the window's own search field matches the site bar (style B): navy underline, plain navy magnifier ---------- */
.cs-input { border: 0 !important; border-bottom: 2px solid var(--navy) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 4px !important; transition: border-color .2s ease; }
.cs-input:focus-within { border-bottom-color: var(--blue) !important; }
.cs-go { background: transparent !important; color: var(--navy) !important; font-size: 22px; transition: color .2s ease; }
.cs-go:hover { color: var(--blue) !important; }
.cs-mfield { border: 0 !important; border-bottom: 2px solid var(--navy) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 2px !important; }
.cs-mfield:focus-within { border-bottom-color: var(--blue) !important; }
.cs-mic { color: var(--navy); }
.cs-go svg { width: 22px !important; height: 22px !important; }

/* ---------- open / close motion: short and quiet (Sepi, 2026-10-08) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cs-root .cs-scrim { animation: cs-fade .2s ease-out both; }
  .cs-root .cs-win { transform-origin: 50% 0; animation: cs-pop .24s cubic-bezier(.2, .8, .2, 1) both; }
  .cs-root .cs-sheet { animation: cs-rise .24s cubic-bezier(.2, .8, .2, 1) both; }
  .cs-root.is-closing .cs-scrim { animation: cs-fade-out .16s ease-in both; }
  .cs-root.is-closing .cs-win { animation: cs-pop-out .16s ease-in both; }
  .cs-root.is-closing .cs-sheet { animation: cs-rise-out .18s ease-in both; }
  .cs-bs:not([hidden]) .cs-bscrim { animation: cs-fade .2s ease-out both; }
  .cs-bs:not([hidden]) .cs-bsbody { animation: cs-up .28s cubic-bezier(.2, .8, .2, 1) both; }
  .cs-bs.is-closing .cs-bscrim { animation: cs-fade-out .18s ease-in both; }
  .cs-bs.is-closing .cs-bsbody { animation: cs-down .2s ease-in both; }
  .cs-anchor .cs-pop, .cs-pp .cs-pop { animation: cs-drop .16s ease-out both; }
}
@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-fade-out { to { opacity: 0; } }
@keyframes cs-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes cs-pop-out { to { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cs-rise-out { to { opacity: 0; transform: translateY(16px); } }
@keyframes cs-up { from { transform: translateY(100%); } }
@keyframes cs-down { to { transform: translateY(100%); } }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-4px); } }
