/* =============================================================================
   Global Search Overlay
   Full-viewport dialog opened by the header search icon.
   ============================================================================= */

/* Inherit theme fonts everywhere inside the overlay */
.ac-search-overlay,
.ac-search-overlay * {
	font-family: var(--ac-font-family-ui, 'Nunito Sans', sans-serif);
	box-sizing:  border-box;
}

/* -----------------------------------------------------------------------------
   Overlay shell
   ----------------------------------------------------------------------------- */
.ac-search-overlay {
	position:       fixed;
	inset:          0;
	z-index:        8900;     /* below mobile menu (9000) but above everything else */
	display:        flex;
	flex-direction: column;
	align-items:    center;

	/* Hidden state */
	opacity:    0;
	visibility: hidden;
	transition:
		opacity    0.28s ease,
		visibility 0s   0.28s;   /* delay hides only after fade-out completes */
}

.ac-search-overlay[data-open] {
	opacity:    1;
	visibility: visible;
	transition: opacity 0.28s ease; /* no visibility delay on open */
}

/* Prevent body scroll when open */
body.ac-search-open {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Backdrop
   ----------------------------------------------------------------------------- */
.ac-search-overlay__backdrop {
	position:        absolute;
	inset:           0;
	background:      rgba( 6, 18, 40, 0.82 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

/* -----------------------------------------------------------------------------
   Panel (search box + results)
   ----------------------------------------------------------------------------- */
.ac-search-overlay__panel {
	position:   relative;        /* above backdrop */
	width:      calc( 100% - var(--ac-space-8) );
	max-width:  700px;
	margin-top: clamp( 64px, 14vh, 140px );
	max-height: calc( 100dvh - clamp( 64px, 14vh, 140px ) - var(--ac-space-6) );
	display:    flex;
	flex-direction: column;

	background: var(--ac-color-white);
	border-radius: var(--ac-radius-2xl, 20px);
	box-shadow: 0 32px 80px rgba( 0, 0, 0, 0.4 );
	overflow:   hidden;

	/* Entrance animation */
	transform: translateY( -24px ) scale( 0.97 );
	opacity:   0;
	transition:
		transform 0.38s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity   0.28s ease;
}

.ac-search-overlay[data-open] .ac-search-overlay__panel {
	transform: translateY( 0 ) scale( 1 );
	opacity:   1;
}

/* -----------------------------------------------------------------------------
   Input row
   ----------------------------------------------------------------------------- */
.ac-search-overlay__input-row {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
	padding:     var(--ac-space-4) var(--ac-space-5);
	border-bottom: 1px solid var(--ac-color-border);
	flex-shrink: 0;
}

.ac-search-overlay__input-icon {
	font-size:   1.3rem;
	color:       var(--ac-color-primary);
	flex-shrink: 0;
	line-height: 1;
}

.ac-search-overlay__form {
	flex: 1;
	margin: 0;
}

.ac-search-overlay__input {
	width:       100%;
	border:      none;
	background:  transparent;
	font-family: var(--ac-font-family-ui, inherit);
	font-size:   clamp( var(--ac-font-size-lg), 2.2vw, var(--ac-font-size-xl) );
	font-weight: var(--ac-font-weight-medium);
	color:       var(--ac-color-text);
	outline:     none;
	caret-color: var(--ac-color-primary);

	/* Animated caret */
	animation: ac-so-caret 0.9s step-end infinite;
}

.ac-search-overlay__input::placeholder {
	color:   var(--ac-color-text-muted);
	opacity: 0.7;
}

/* Remove browser search-input clear button (we have our own) */
.ac-search-overlay__input::-webkit-search-cancel-button,
.ac-search-overlay__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance:         none;
}

/* Clear button */
.ac-search-overlay__clear {
	flex-shrink:  0;
	background:   transparent;
	border:       none;
	cursor:       pointer;
	color:        var(--ac-color-text-muted);
	font-size:    1.2rem;
	line-height:  1;
	padding:      var(--ac-space-1);
	border-radius: var(--ac-radius-full, 999px);
	transition:   color 0.15s ease;
}

.ac-search-overlay__clear:hover {
	color: var(--ac-color-text);
}

.ac-search-overlay__clear:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

/* Close button */
.ac-search-overlay__close {
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	gap:          var(--ac-space-1);
	background:   color-mix( in srgb, var(--ac-color-primary) 8%, transparent );
	border:       none;
	color:        var(--ac-color-primary);
	font-size:    1rem;
	padding:      var(--ac-space-2) var(--ac-space-3);
	border-radius: var(--ac-radius-pill, 999px);
	cursor:       pointer;
	transition:   background-color 0.15s ease;
	line-height:  1;
}

.ac-search-overlay__close:hover {
	background: color-mix( in srgb, var(--ac-color-primary) 14%, transparent );
}

.ac-search-overlay__close:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

.ac-search-overlay__close-hint {
	font-size:      0.6rem;
	font-weight:    var(--ac-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity:        0.7;
}

/* -----------------------------------------------------------------------------
   Results region
   ----------------------------------------------------------------------------- */
.ac-search-overlay__results {
	flex:       1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding:    var(--ac-space-3) var(--ac-space-3);
	min-height: 0;
}

/* Status messages */
.ac-search-overlay__status {
	text-align:  center;
	padding:     var(--ac-space-8) var(--ac-space-4);
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-loose);
}

.ac-search-overlay__status-icon {
	display:       block;
	font-size:     2.4rem;
	margin-bottom: var(--ac-space-3);
	color:         var(--ac-color-text-muted);
	opacity:       0.5;
}

/* Section label (e.g. "Programs", "Categories") */
.ac-search-overlay__section-label {
	display:        block;
	font-size:      0.7rem;
	font-weight:    var(--ac-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--ac-color-text-muted);
	padding:        var(--ac-space-3) var(--ac-space-2) var(--ac-space-2);
}

/* Results list */
.ac-search-overlay__list {
	list-style: none;
	margin:     0 0 var(--ac-space-2);
	padding:    0;
}

/* Result card */
.ac-search-overlay__card {
	display:         flex;
	align-items:     center;
	gap:             var(--ac-space-4);
	padding:         var(--ac-space-3) var(--ac-space-3);
	border-radius:   var(--ac-radius-lg, 12px);
	text-decoration: none;
	color:           inherit;
	transition:      background-color 0.12s ease;

	/* Stagger entrance */
	opacity:   0;
	transform: translateX( -8px );
}

.ac-search-overlay__card.ac-so-visible {
	opacity:    1;
	transform:  translateX( 0 );
	transition:
		opacity    0.28s ease var(--ac-so-delay, 0ms),
		transform  0.28s cubic-bezier( 0.22, 1, 0.36, 1 ) var(--ac-so-delay, 0ms),
		background-color 0.12s ease;
}

.ac-search-overlay__card:hover,
.ac-search-overlay__card.is-active {
	background: color-mix( in srgb, var(--ac-color-primary) 6%, transparent );
}

.ac-search-overlay__card:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

/* Thumbnail / icon media block */
.ac-search-overlay__card-media {
	flex-shrink:  0;
	width:        48px;
	height:       48px;
	border-radius: var(--ac-radius-md, 8px);
	overflow:     hidden;
	background:   var(--ac-color-surface);
	display:      flex;
	align-items:  center;
	justify-content: center;
}

.ac-search-overlay__card-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Icon fallback circle */
.ac-search-overlay__card-icon {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--ac-icon-bg, var(--ac-color-primary));
	color:           var(--ac-color-white);
	font-size:       1.2rem;
	border-radius:   inherit;
}

/* Body: title + badge */
.ac-search-overlay__card-body {
	flex:       1;
	min-width:  0;
	display:    flex;
	align-items: center;
	justify-content: space-between;
	gap:        var(--ac-space-3);
}

.ac-search-overlay__card-title {
	font-size:     var(--ac-font-size-base);
	font-weight:   var(--ac-font-weight-semibold);
	color:         var(--ac-color-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.ac-search-overlay__card-badge {
	flex-shrink:    0;
	font-size:      0.62rem;
	font-weight:    var(--ac-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding:        3px 10px;
	border-radius:  999px;
	color:          var(--ac-color-white);
	background:     var(--ac-color-primary);
}

.ac-search-overlay__card-badge--program  { background: var(--ac-color-primary); }
.ac-search-overlay__card-badge--activity { background: #1a7a5e; } /* teal         */
.ac-search-overlay__card-badge--event    { background: #c0592b; } /* warm orange  */
.ac-search-overlay__card-badge--page     { background: #3d6a8f; } /* steel blue   */
.ac-search-overlay__card-badge--post     { background: #5a6a3d; } /* olive green  */
.ac-search-overlay__card-badge--category { background: #2a7d4f; } /* teal green   */
.ac-search-overlay__card-badge--audience { background: #7c3d8f; } /* purple       */

/* Event date / subtitle below the title */
.ac-search-overlay__card-title-wrap {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	overflow:       hidden;
}

.ac-search-overlay__card-meta {
	font-size:   0.72rem;
	font-weight: var(--ac-font-weight-medium);
	color:       var(--ac-color-text-muted);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

/* All-results link */
.ac-search-overlay__all-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ac-space-2);
	margin:          var(--ac-space-3) var(--ac-space-2) var(--ac-space-2);
	padding:         var(--ac-space-3);
	border:          1.5px dashed var(--ac-color-border);
	border-radius:   var(--ac-radius-lg, 12px);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-semibold);
	color:           var(--ac-color-primary);
	text-decoration: none;
	transition:      background-color 0.15s ease, border-color 0.15s ease;
}

.ac-search-overlay__all-link:hover {
	background:   color-mix( in srgb, var(--ac-color-primary) 5%, transparent );
	border-color: var(--ac-color-primary);
}

.ac-search-overlay__all-link:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

/* Loading spinner */
.ac-search-overlay__spinner {
	display:         flex;
	justify-content: center;
	padding:         var(--ac-space-8);
}

.ac-search-overlay__spinner-dot {
	width:         10px;
	height:        10px;
	border-radius: 50%;
	background:    var(--ac-color-primary);
	margin:        0 4px;
	animation:     ac-so-bounce 0.8s ease-in-out infinite;
}

.ac-search-overlay__spinner-dot:nth-child(2) { animation-delay: 0.16s; }
.ac-search-overlay__spinner-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes ac-so-bounce {
	0%, 80%, 100% { transform: scale( 0.6 ); opacity: 0.4; }
	40%            { transform: scale( 1.0 ); opacity: 1;   }
}

/* -----------------------------------------------------------------------------
   Footer keyboard hints
   ----------------------------------------------------------------------------- */
.ac-search-overlay__footer {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ac-space-5);
	padding:         var(--ac-space-3) var(--ac-space-5);
	border-top:      1px solid var(--ac-color-border);
	font-size:       0.7rem;
	color:           var(--ac-color-text-muted);
}

.ac-search-overlay__footer kbd {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      20px;
	padding:        1px 5px;
	border:         1px solid var(--ac-color-border);
	border-bottom-width: 2px;
	border-radius:  4px;
	font-family:    var(--ac-font-family-ui, monospace);
	font-size:      0.65rem;
	color:          var(--ac-color-text-muted);
	background:     var(--ac-color-surface);
}

/* Hide footer on very small screens */
@media ( max-width: 480px ) {
	.ac-search-overlay__footer { display: none; }
}

/* -----------------------------------------------------------------------------
   Header search trigger button — mirrors .ac-header__help-btn sizing exactly
   ----------------------------------------------------------------------------- */
.ac-header__search-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      transparent;
	border:          none;
	border-radius:   var(--ac-radius-pill, 999px);
	color:           var(--ac-color-primary);   /* #002F86 */
	font-size:       2.2rem;
	cursor:          pointer;
	text-decoration: none;
	transition:      color var(--ac-duration-short, 0.15s) var(--ac-ease-standard, ease);
}

.ac-header__search-btn:hover,
.ac-header__search-btn:focus-visible {
	color: var(--ac-color-blue);   /* #0081C9 */
}

.ac-header__search-btn:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring, var(--ac-color-primary));
	outline-offset: 2px;
}

/* Hide on mobile — same breakpoint as help button */
@media ( max-width: 56.25em ) {
	.ac-header__search-btn {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   prefers-reduced-motion
   ----------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ac-search-overlay,
	.ac-search-overlay__panel,
	.ac-search-overlay__card,
	.ac-search-overlay__card.ac-so-visible {
		transition:  none !important;
		animation:   none !important;
		transform:   none !important;
		opacity:     1   !important;
	}
}

/* -----------------------------------------------------------------------------
   Dark mode — uses the theme's standard two-selector pattern
   (html[data-color-scheme="dark"] + @media prefers-color-scheme:dark)
   ----------------------------------------------------------------------------- */
html[data-color-scheme="dark"] .ac-search-overlay__panel,
html[data-color-scheme="dark"] .ac-search-overlay__panel { background: var(--ac-color-surface); box-shadow: 0 32px 80px rgba( 0, 0, 0, 0.7 ); }
html[data-color-scheme="dark"] .ac-search-overlay__input-row                  { border-bottom-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-search-overlay__input                      { color: var(--ac-color-text); caret-color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-search-overlay__input-icon                 { color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-search-overlay__close                      { background: rgba(255,255,255,0.08); color: var(--ac-color-text); }
html[data-color-scheme="dark"] .ac-search-overlay__close:hover                { background: rgba(255,255,255,0.14); }
html[data-color-scheme="dark"] .ac-search-overlay__card:hover,
html[data-color-scheme="dark"] .ac-search-overlay__card.is-active             { background: rgba(255,255,255,0.06); }
html[data-color-scheme="dark"] .ac-search-overlay__card-title                 { color: var(--ac-color-text); }
html[data-color-scheme="dark"] .ac-search-overlay__card-media                 { background: color-mix( in srgb, var(--ac-color-primary) 12%, var(--ac-color-surface) ); }
html[data-color-scheme="dark"] .ac-search-overlay__all-link                   { color: var(--ac-color-link); border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-search-overlay__all-link:hover             { background: rgba(255,255,255,0.06); border-color: var(--ac-color-link); }
html[data-color-scheme="dark"] .ac-search-overlay__footer                     { border-top-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-search-overlay__footer kbd                 { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
html[data-color-scheme="dark"] .ac-search-overlay__spinner-dot                { background: var(--ac-color-secondary); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-search-overlay__panel            { background: var(--ac-color-surface); box-shadow: 0 32px 80px rgba( 0, 0, 0, 0.7 ); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__input-row        { border-bottom-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__input            { color: var(--ac-color-text); caret-color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__input-icon       { color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__close            { background: rgba(255,255,255,0.08); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__close:hover      { background: rgba(255,255,255,0.14); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__card:hover,
	html:not([data-color-scheme="light"]) .ac-search-overlay__card.is-active   { background: rgba(255,255,255,0.06); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__card-title       { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__card-media       { background: color-mix( in srgb, var(--ac-color-primary) 12%, var(--ac-color-surface) ); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__all-link         { color: var(--ac-color-link); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__all-link:hover   { background: rgba(255,255,255,0.06); border-color: var(--ac-color-link); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__footer           { border-top-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__footer kbd       { background: var(--ac-color-surface); border-color: var(--ac-color-border); }
	html:not([data-color-scheme="light"]) .ac-search-overlay__spinner-dot      { background: var(--ac-color-secondary); }
}