/**
 * Library Search v2 Block Styles -- V2 OPTIMIZATION LANE (September 2026)
 *
 * Copy of blocks/library-search/styles.css with every selector renamed to its
 * v2-prefixed equivalent (library-search-v2-*, pml-search-v2-*), including the
 * keyframe animation names (keyframes are global in CSS, so v1 and v2 must not
 * share them). This lets both blocks load on the same site without interfering.
 *
 * The one v1 rule NOT copied here is the generic ".home .wp-block-columns" margin
 * rule, because it is not tied to this block's classes at all -- v1's stylesheet
 * already applies it site-wide, and copying it would apply the same !important
 * rule twice.
 */

/* Columns Block with Chapel Blue Background */
.wp-block-columns:has(.library-search-v2-block) {
	background: #004159;
	padding: 0rem;
}

/* Search Block Container */
.library-search-v2-block {
	background: transparent;
	padding: 1.5rem 0;
	text-align: center;
}

.library-search-v2-wrapper {
	background: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.library-search-v2-container {
	max-width: 100%;
}

.library-search-v2-title {
	color: white;
	font-family: "GT America", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	letter-spacing: -0.5px;
}

/* Search Form */
.pml-search-v2-form {
	margin: 0;
}

.library-search-v2-input-wrapper {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
}

.pml-search-v2-input {
	flex: 1;
	min-width: 300px;
	max-width: 450px;
	padding: 0.75rem 1rem;
	font-family: "GT America", sans-serif;
	font-size: 1rem;
	border: 1px solid #ddd;
	border-radius: 0;
	background: white;
	color: #333;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
}

.pml-search-v2-input:focus {
	outline: none;
	border-color: #333;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pml-search-v2-input::placeholder {
	color: #999;
}

.pml-search-v2-button {
	padding: 0.75rem 1.75rem;
	background: #000;
	color: white;
	border: none;
	border-radius: 0;
	font-family: "GT America Bold", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	text-transform: uppercase;
}

.pml-search-v2-button:hover {
	background: #222;
}

.pml-search-v2-button:active {
	transform: scale(0.98);
}

.pml-search-v2-button:focus {
	outline: 2px solid #333;
	outline-offset: 2px;
}

/* Loading Spinner */
.library-search-v2-spinner {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.75rem;
	vertical-align: middle;
	visibility: hidden;
}

.library-search-v2-spinner-svg {
	animation: library-search-v2-spin 1s linear infinite;
	width: 100%;
	height: 100%;
}

.library-search-v2-spinner-svg .library-search-v2-spinner-path {
	stroke: white;
	stroke-linecap: round;
	animation: library-search-v2-dash 1.5s ease-in-out infinite;
}

@keyframes library-search-v2-spin {
	100% { transform: rotate(360deg); }
}

@keyframes library-search-v2-dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* Quick Links */
.library-search-v2-quick-links {
	margin-top: 0.75rem;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0;
	border-top: none;
	display: flex;
	justify-content: flex-start;
	gap: .5rem;
	flex-wrap: wrap;
	width: 550px;
}

.library-search-v2-quick-links a {
	color: white;
	text-decoration: underline;
	font-family: "GT America", sans-serif;
	font-size: 0.75rem;
	transition: color 0.2s ease;
}

.library-search-v2-quick-links a:hover {
	color: #ccc;
}

.library-search-v2-quick-links a:focus {
	outline: 2px solid white;
	outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.library-search-v2-block {
		padding: 2.5rem 1.5rem;
	}

	.library-search-v2-wrapper {
		padding: 2rem 1.5rem;
	}

	.library-search-v2-title {
		font-size: 1.75rem;
		margin-bottom: 1.5rem;
	}

	.library-search-v2-input-wrapper {
		flex-direction: column;
		gap: 0.5rem;
	}

	.pml-search-v2-input {
		max-width: 100%;
		padding: 0.875rem 1rem;
		font-size: 1rem;
	}

	.pml-search-v2-button {
		padding: 0.875rem 1.5rem;
	}
}

@media (max-width: 480px) {
	.library-search-v2-block {
		padding: 2rem 1rem;
	}

	.library-search-v2-wrapper {
		padding: 1.5rem 1rem;
	}

	.library-search-v2-title {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}

	.pml-search-v2-input {
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
	.library-search-v2-wrapper {
		background: #1a1a1a;
	}

	.library-search-v2-title {
		color: white;
	}

	.pml-search-v2-input {
		background: #2a2a2a;
		color: white;
		border-color: #444;
	}

	.pml-search-v2-input::placeholder {
		color: #aaa;
	}

	.pml-search-v2-input:focus {
		border-color: white;
	}
}

/* balance the horizontal spacing, to take into account the spinner on the right */
.pml-search-v2-input {
	margin-left : 1.5em ;
}


.library-search-v2-block a, .library-search-v2-block a:visited, .library-search-v2-block a:active, .library-search-v2-block a:hover {
		color : #fff ;
}

.library-search-v2-wrapper {
    background: transparent;
}

.library-search-v2-container a {
	font-size : .85em ;
}

/* Library Search v2 Block - Alignment Fixes */

/* Center the heading over the text input field only, not the full form width */
.library-search-v2-title {
	/* Calculate centering: shift left by half of (button width + gap) */
	/* Button: 124px, Gap: 0.75rem */
	margin-left: calc(-70px - 0.375rem);
}

/* Reset heading alignment when layout stacks at mobile breakpoint */
@media (max-width: 768px) {
	.library-search-v2-title {
		margin-left: 0;
	}
}

/* Add visual separation above the quick links */
.library-search-v2-quick-links {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.25); /* Semi-transparent white for the teal background */
	/* Ensure quick links span the same width as the search input above */
	width: 100%;
	justify-content : center ;
}

/* InnerBlocks adjustment: the quick-links contents are now a single WordPress
   core paragraph block (edited through the block editor) instead of loose
   inline anchors. That means the container has ONE block-level child (the
   paragraph) rather than several inline flex items, so the earlier
   display:flex/gap/flex-wrap layout no longer fits -- switch the container to
   plain block layout and center via text-align, which produces the same
   visual output (inline links separated by pipes, wrapping naturally at
   narrow widths). Also zero out the paragraph's default browser margin so it
   does not add extra vertical space above or below the links. */
.library-search-v2-quick-links {
	display : block ;
	text-align : center ;
}
.library-search-v2-quick-links p {
	margin : 0 ;
}