/* ==========================================================================
   Parkland Search

   The form sits in the Kadence header slot, so it takes its width from the
   theme (.site-header-main-section-center in the child theme) and only styles
   what is inside itself. The panel is absolutely positioned against the form,
   which is why the form is the positioning context rather than the header.
   ========================================================================== */

.pk-search {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
}

/* A theme or plugin search form the script has adopted. It keeps its own look;
   all it needs from us is to be the positioning context for the panel. */
.pk-search-host {
	position: relative;
}

.pk-search-field {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pk-border);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.pk-search-field:focus-within {
	border-color: var(--pk-accent);
	box-shadow: 0 0 0 2px rgba( 88, 175, 61, 0.18 );
}

.pk-search-input,
.pk-search-input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--pk-fs-base);
	color: var(--pk-ink);
	line-height: 1.4;
}

.pk-search-input:focus {
	outline: none;
	box-shadow: none;
}

/* Safari draws its own clear button, which collides with the submit icon. */
.pk-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.pk-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--pk-accent);
	color: var(--pk-ink-invert);
	cursor: pointer;
}

.pk-search-submit:hover,
.pk-search-submit:focus {
	background: #4a9834;
	color: var(--pk-ink-invert);
}

/* Kadence appends its own magnifier to any search form it is handed, which
   lands inside ours as a second, non-functional icon. Hidden rather than
   unhooked: the theme is entitled to decorate its forms, and this is the one
   form where the decoration is already provided. */
.pk-search .kadence-search-icon-wrap {
	display: none;
}

/* --- Suggestion panel --------------------------------------------------- */

.pk-search-panel {
	position: absolute;
	z-index: 100;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	max-height: min( 70vh, 520px );
	overflow-y: auto;
	padding: 4px 0;
	border: 1px solid var(--pk-border);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	text-align: left;
}

.pk-search-panel[hidden] {
	display: none;
}

.pk-search-group + .pk-search-group {
	border-top: 1px solid var(--pk-border);
}

.pk-search-group-label {
	margin: 0;
	padding: 8px 12px 4px;
	font-size: var(--pk-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pk-muted);
}

.pk-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-search-item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	cursor: pointer;
}

.pk-search-item.is-active,
.pk-search-item:hover {
	background: var(--pk-surface);
}

.pk-search-item-media {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.pk-search-item-media img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.pk-search-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pk-search-item-title {
	font-size: var(--pk-fs-sm);
	color: var(--pk-ink);
	/* Part names run long — "Toro Ball Bearing Assembly - Sealed - 1800/2100;
	   Greensmaster Cutting; ..." — so a row is capped at two lines rather than
	   letting one product own the whole panel. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pk-search-item-meta {
	font-size: var(--pk-fs-xs);
	color: var(--pk-muted);
}

.pk-search-all {
	display: block;
	padding: 10px 12px;
	border-top: 1px solid var(--pk-border);
	font-size: var(--pk-fs-sm);
	font-weight: 600;
	color: var(--pk-accent);
	text-decoration: none;
}

.pk-search-all.is-active,
.pk-search-all:hover,
.pk-search-all:focus {
	background: var(--pk-surface);
	color: var(--pk-accent);
	text-decoration: underline;
}

.pk-search-empty,
.pk-search-status {
	margin: 0;
	padding: 12px;
	font-size: var(--pk-fs-sm);
	color: var(--pk-muted);
}

/* --- Results page sections ---------------------------------------------- */

.pk-search-sections {
	margin: 40px 0 0;
	clear: both;
}

.pk-search-section + .pk-search-section {
	margin-top: 32px;
}

.pk-search-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pk-border);
}

.pk-search-section-title {
	margin: 0;
	font-size: var(--pk-fs-lg);
	color: var(--pk-ink);
}

.pk-search-section-count {
	font-size: var(--pk-fs-sm);
	color: var(--pk-muted);
}

.pk-search-plain-list {
	margin: 0;
	padding: 0 0 0 1.1em;
}

.pk-search-plain-list li + li {
	margin-top: 4px;
}

@media ( max-width: 767px ) {
	.pk-search-panel {
		max-height: 60vh;
	}

	.pk-search-section-title {
		font-size: var(--pk-fs-base);
	}
}