/*
 * Cup A Joe Custom Search — Stylesheet
 * Plugin: caj-custom-search
 * Version: 1.6.0
 */

/* ==========================================================================
   Navigation search menu item
   ========================================================================== */

.caj-search-menu-item {
	display: flex;
	align-items: center;
	position: relative;
	list-style: none;
	overflow: visible;
}

/* ==========================================================================
   Toggle icon button
   ========================================================================== */

.caj-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	background: transparent;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	color: inherit;
	line-height: 0;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.caj-search-toggle:hover,
.caj-search-toggle:focus {
	color: #0073aa;
	background-color: rgba( 0, 115, 170, 0.08 );
	outline: none;
}

.caj-search-toggle svg {
	display: block;
	pointer-events: none;
}

/* ==========================================================================
   Collapsible nav search form
   ========================================================================== */

.caj-nav-search-form {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;

	/* Hidden by default; JavaScript adds .is-open to reveal it. */
	overflow: hidden;
	width: 0;
	min-width: 0;
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: width 0.3s ease, max-width 0.3s ease, opacity 0.3s ease;
}

.caj-nav-search-form.is-open {
	width: auto;
	max-width: 320px;
	min-width: 220px;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}

/* Input + button + dropdown wrapper */
.caj-search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

.caj-nav-search-input {
	padding: 4px 8px;
	font-size: 0.875rem;
	line-height: 1.4;
	border: 1px solid #ccc;
	border-radius: 3px;
	min-width: 0;
	width: 0;
	max-width: 100%;
	background-color: #fff;
	color: #333;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease;
}

.caj-nav-search-form.is-open .caj-nav-search-input {
	width: 200px;
}

/* Keep nav search open on search results pages */
.caj-is-search-page .caj-nav-search-form {
	width: auto !important;
	max-width: 320px !important;
	min-width: 220px !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
}

.caj-is-search-page .caj-nav-search-form .caj-nav-search-input {
	width: 200px !important;
}

.caj-nav-search-input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba( 0, 115, 170, 0.25 );
}

.caj-nav-search-button {
	padding: 4px 10px;
	font-size: 0.875rem;
	line-height: 1.4;
	background-color: #0073aa;
	color: #fff;
	border: 1px solid #006291;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.caj-nav-search-button:hover,
.caj-nav-search-button:focus {
	background-color: #005177;
	outline: none;
}

/* ==========================================================================
   Live-results dropdown
   ========================================================================== */

.caj-live-results {
	display: none;
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	min-width: 260px;
	max-width: 360px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	z-index: 9999;
	overflow: hidden;
}

.caj-live-results.is-visible {
	display: block;
}

.caj-live-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 300px;
	overflow: auto;
}

.caj-live-result-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #f0f0f0;
}

.caj-live-result-item:last-child {
	border-bottom: none;
}

.caj-live-result-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	text-decoration: none;
	color: #333;
	transition: background-color 0.15s ease;
}

.caj-live-result-link:hover,
.caj-live-result-link:focus {
	background-color: #f0f7fb;
	color: #0073aa;
	outline: none;
}

.caj-live-result-title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.caj-live-result-date {
	font-size: 0.75rem;
	color: #888;
	line-height: 1.2;
}

.caj-no-results {
	margin: 0;
	padding: 10px 12px;
	font-size: 0.875rem;
	color: #666;
}

/* ==========================================================================
   Search results sort form
   ========================================================================== */

/* .search-results */


.caj-search-sort-form {
	max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
	padding-bottom: 40px;
}

.caj-search-sort-form label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #444;
	margin: 0;
}

.caj-search-sort-form select {
	padding: 4px 8px;
	font-size: 0.875rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
	color: #333;
	cursor: pointer;
}

.caj-search-sort-form select:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba( 0, 115, 170, 0.25 );
}

/* Shortcode form — reuse nav form base styles with minor adjustments */
.caj-shortcode-search-form {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}


/* ==========================================================================
   Block editor preview
   ========================================================================== */

.caj-search-block-editor-preview {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background-color: #f0f7fb;
	border: 1px dashed #0073aa;
	border-radius: 4px;
	color: #0073aa;
	font-size: 0.875rem;
	font-weight: 600;
}

.caj-search-block-icon {
	font-size: 1rem;
	line-height: 1;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   Mobile / responsive
   ========================================================================== */

@media ( max-width: 768px ) {
	.caj-search-menu-item {
		width: 100%;
		flex-wrap: wrap;
	}

	.caj-nav-search-form.is-open {
		max-width: 100%;
		width: 100%;
	}

	.caj-nav-search-form {
		width: 100%;
		flex-wrap: wrap;
	}

	.caj-search-input-wrap {
		width: 100%;
		flex-wrap: wrap;
	}

	.caj-nav-search-input {
		width: 100%;
		flex: 1 1 auto;
	}

	.caj-nav-search-button {
		flex-shrink: 0;
	}

	.caj-live-results {
		min-width: 100%;
		max-width: 100%;
	}

	.caj-search-sort-form {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Enhanced Core Search Block Styles
   ========================================================================== */

/* Ensure navigation blocks don't clip our dropdown */
.wp-block-navigation__responsive-container,
.wp-block-navigation__container {
	overflow: visible !important;
}

.caj-enhanced-search-block {
	display: flex;
	align-items: center;
	position: relative;
	gap: 4px;
}

/* Wrapper for the WordPress core search block content */
.caj-search-block-wrapper {
	/* Hidden by default; JavaScript adds .is-open to reveal it. */
	overflow: visible; /* Changed from hidden to allow dropdown to show */
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-width 0.3s ease, opacity 0.3s ease;
}

.caj-search-block-wrapper.is-open {
	max-width: 400px;
	opacity: 1;
	visibility: visible;
	overflow: visible; /* Ensure dropdown isn't clipped */
}

/* Style the WordPress core search block when enhanced */
.caj-enhanced-search-block .wp-block-search {
	margin: 0;
	position: relative;
}

/* Ensure the inside wrapper has positioning context for dropdown */
.caj-enhanced-search-block .wp-block-search__inside-wrapper {
	position: relative;
	overflow: visible; /* Allow dropdown to show outside */
}

/* Add positioning context for live results */
.caj-enhanced-search-block .wp-block-search__input {
	min-width: 0;
	width: 0;
	transition: width 0.3s ease;
}

.caj-search-block-wrapper.is-open .wp-block-search__input {
	min-width: 200px;
	width: auto;
}

/* Live results dropdown positioned relative to the inside-wrapper */
.caj-enhanced-search-block .caj-live-results {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	min-width: 260px;
	max-width: 360px;
	z-index: 999999;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}

/* Mobile adjustments for enhanced block */
@media ( max-width: 768px ) {
	.caj-search-block-wrapper.is-open {
		max-width: 100%;
		overflow: visible;
	}
	
	.caj-enhanced-search-block {
		flex-wrap: wrap;
		width: 100%;
		overflow: visible;
	}
	
	.caj-search-block-wrapper {
		width: 100%;
		overflow: visible;
	}
	
	.caj-enhanced-search-block .wp-block-search {
		width: 100%;
		overflow: visible;
	}
	
	.caj-enhanced-search-block .wp-block-search__inside-wrapper {
		overflow: visible;
	}
	
	.caj-enhanced-search-block .wp-block-search__input {
		width: 100%;
		min-width: 100%;
	}
}

/* ==========================================================================
   Search Results Page - Force Enhanced Blocks Open
   ========================================================================== */

/* Keep enhanced search blocks expanded on search results pages */
.caj-is-search-page .caj-search-block-wrapper {
	max-width: 400px !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
}

.caj-is-search-page .caj-enhanced-search-block .wp-block-search__input {
	min-width: 200px !important;
	width: auto !important;
}