/* ==================================================================
   Niagara Transit: header search panel                     v1.0.3
   Option C (owner pick 2026-11-07): a card under the header with a
   visible label, a real Search button, a worded Close button, key hints
   and popular links. Restyles Salient's material search (#search-outer);
   js/search-panel.js adds .nt-sp plus the extra markup, so without JS
   Salient's own panel is untouched. Colours come from the --ntc-*
   tokens, so light and dark both work (fallbacks = light values).
   Mockup: Web Page Drafts/dark-mode/search-dropdown-options.html
   ================================================================== */

/* ---------- Shell: no full-width white sheet, card sits under the header ---------- */
/* Salient fades the header (logo, menu) out while search is open; with the
   card under it, the header stays as it is. */
body #header-outer.material-search-open:has(#search-outer.nt-sp) #top { opacity: 1 !important; }
/* Closed: Salient only slides the panel up by its old height, so the taller
   card's bottom edge peeked out behind the menu. Hide it outright. */
body #header-outer #search-outer.nt-sp:not(.material-open) { visibility: hidden !important; opacity: 0 !important; }
body #header-outer #search-outer.nt-sp::before { display: none !important; }
body #header-outer #search-outer.nt-sp {
	background: transparent !important;
	height: auto !important;
	pointer-events: none; /* the header behind stays usable; the card re-enables */
}
body #header-outer #search-outer.nt-sp #search {
	display: block !important;
	height: auto !important;
	padding: var(--nt-sp-top, 96px) 16px 24px !important;
	background: transparent !important;
}
body #header-outer #search-outer.nt-sp #search .container {
	pointer-events: auto;
	position: relative;
	width: 100% !important;
	max-width: 760px !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: var(--ntc-bg, #ffffff);
	color: var(--ntc-text, #000014);
	border: 1px solid var(--ntc-border, #D9D9D6);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 20, .28);
	overflow: hidden;
}
body #header-outer #search-outer.nt-sp #search .container::before,
body #header-outer #search-outer.nt-sp #search .container::after { display: none !important; }

/* ---------- Search form ---------- */
body #header-outer #search-outer.nt-sp #search-box {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 20px 20px 16px !important;
	transform: none !important;
	opacity: 1 !important;
}
body #header-outer #search-outer.nt-sp #search-box .inner-wrap,
body #header-outer #search-outer.nt-sp #search-box .col {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
body #header-outer #search-outer.nt-sp #search-box form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	margin: 0;
}
body #header-outer #search-outer.nt-sp .nt-sp-label {
	grid-column: 1 / -1;
	display: block;
	margin: 0;
	padding: 0 128px 4px 0; /* room for Close, top right */
	min-height: 44px;
	line-height: 44px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ntc-text, #000014);
}
body #header-outer #search-outer.nt-sp #search-box input[name="s"] {
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	color: var(--ntc-text, #000014) !important;
	background: var(--ntc-bg, #ffffff) !important;
	border: 2px solid var(--ntc-input-border, #6B6B6B) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transform: none !important;
}
/* Salient sets the placeholder with two IDs + !important; separate rules so
   one unknown pseudo-element can't drop the other. */
body.material #header-outer #search-outer.nt-sp input[name="s"]::placeholder { color: var(--ntc-text-muted, #3D3D46) !important; opacity: 1 !important; }
body.material #header-outer #search-outer.nt-sp input[name="s"]::-webkit-input-placeholder { color: var(--ntc-text-muted, #3D3D46) !important; opacity: 1 !important; }
body #header-outer #search-outer.nt-sp #search-box .search-box__button {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ntc-btn-text, #ffffff) !important;
	background: var(--ntc-btn-bg, #07495F) !important;
	border: 2px solid var(--ntc-btn-bg, #07495F) !important;
	border-radius: 6px !important;
	cursor: pointer;
}
body #header-outer #search-outer.nt-sp #search-box .search-box__button:hover { filter: brightness(1.12); }

/* Key hints (Salient's "Hit enter..." line, rewritten by the JS). Full
   opacity: Salient fades it to .7, which tripped contrast checkers. */
body #header-outer #search-outer.nt-sp #search-box .nt-sp-hint {
	grid-column: 1 / -1;
	position: static !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 2px 0 0 !important;
	opacity: 1 !important;
	transform: none !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--ntc-text-muted, #3D3D46) !important;
}
/* Salient styles every span in #search-box (opacity .7, #333). */
body #header-outer #search-outer.nt-sp #search-box .nt-sp-hint > span {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	color: var(--ntc-text-muted, #3D3D46) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
body #header-outer #search-outer.nt-sp .nt-sp-hint kbd {
	display: inline-block;
	margin-right: 4px;
	padding: 0 6px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntc-text, #000014);
	background: var(--ntc-surface, #F0F0EE);
	border: 1px solid var(--ntc-border, #D9D9D6);
	border-radius: 4px;
}
/* No keyboard keys to press on a phone. */
@media (hover: none) and (pointer: coarse) {
	body #header-outer #search-outer.nt-sp #search-box .nt-sp-hint { display: none !important; }
}

/* ---------- Close (top right of the card) ---------- */
body #header-outer #search-outer.nt-sp #close {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	transform: none !important;
}
body #header-outer #search-outer.nt-sp #close a {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	height: auto !important;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	color: var(--ntc-text, #000014) !important;
	background: transparent !important;
	border: 1px solid var(--ntc-border, #D9D9D6) !important;
	border-radius: 6px !important;
	transform: none !important;
	opacity: 1 !important;
}
body #header-outer #search-outer.nt-sp #close a:hover { background: var(--ntc-surface, #F0F0EE) !important; }
body #header-outer #search-outer.nt-sp #close .nt-sp-x { font-size: 20px; font-weight: 400; line-height: 1; }
body #header-outer #search-outer.nt-sp #close a::before,
body #header-outer #search-outer.nt-sp #close a::after { display: none !important; }
body #header-outer #search-outer.nt-sp #close a span {
	position: static !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	color: inherit !important;
	background: none !important;
	line-height: 1 !important;
}
body #header-outer #search-outer.nt-sp #close .close-wrap,
body #header-outer #search-outer.nt-sp #close .close-line { display: none !important; }

/* ---------- Popular links ---------- */
body #header-outer #search-outer.nt-sp .nt-sp-quick {
	margin: 0;
	padding: 14px 20px 18px;
	background: var(--ntc-surface, #F0F0EE);
	border-top: 1px solid var(--ntc-border, #D9D9D6);
}
body #header-outer #search-outer.nt-sp .nt-sp-quick h2 {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--ntc-text-muted, #3D3D46) !important;
}
body #header-outer #search-outer.nt-sp .nt-sp-quick ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
body #header-outer #search-outer.nt-sp .nt-sp-quick li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body #header-outer #search-outer.nt-sp .nt-sp-quick li::before { display: none !important; }
body #header-outer #search-outer.nt-sp .nt-sp-quick a {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0 14px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--ntc-link, #00677F) !important;
	background: var(--ntc-bg, #ffffff) !important;
	border: 1px solid var(--ntc-border, #D9D9D6) !important;
	border-radius: 6px !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	opacity: 1 !important;
	transform: none !important;
}
body #header-outer #search-outer.nt-sp .nt-sp-quick a:hover { text-decoration-thickness: 2px !important; }

/* ---------- Focus (keyboard) ---------- */
body #header-outer #search-outer.nt-sp :is(input[name="s"], .search-box__button, #close a, .nt-sp-quick a):focus-visible {
	outline: 3px solid var(--ntc-focus, #07495F) !important;
	outline-offset: 2px !important;
}

/* ---------- Phones: tighter card, Search button below the box ---------- */
@media (max-width: 560px) {
	body #header-outer #search-outer.nt-sp #search { padding-left: 10px !important; padding-right: 10px !important; }
	body #header-outer #search-outer.nt-sp #search-box { padding: 16px 16px 14px !important; }
	body #header-outer #search-outer.nt-sp #close { top: 16px !important; right: 16px !important; }
	body #header-outer #search-outer.nt-sp #search-box form { grid-template-columns: minmax(0, 1fr); }
	body #header-outer #search-outer.nt-sp #search-box .search-box__button { width: 100% !important; }
	body #header-outer #search-outer.nt-sp .nt-sp-quick { padding: 12px 16px 16px; }
}