/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Description: RMP/Wandelogic Site Styles
Version: 1.0
*/

/*/////////////////////////////////////////////////////////
/*  HEADER TEMPLATE CUSTOMIZATIONS
/*/////////////////////////////////////////////////////////

	/* Modify Search Block 
		/* Slide out text on hover - change magnifying glass color on hover

			/* 1. Container: Forces layout and kills theme-injected gaps */
			.wp-block-search, 
			.wp-block-search__inside-wrapper {
				display: flex !important;
				flex-direction: row-reverse !important; 
				align-items: center !important; 
				overflow: visible;
			}

			/* 2. The Text Box: Shorter height and rounded corners */
			.wp-block-search__input {
				height: 38px !important;
				padding: 0 !important;
				border-radius: 20px !important;
				border: 1px solid #ccc !important;
				font-size: 14px !important;
				width: 0; 
				opacity: 0;
				visibility: hidden; 
				flex-shrink: 0; 
				transition: width 0.4s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0.3s;
				margin: 0 !important; 
			}

			/* 3. The Button: Perfect circle with 2px Accent 3 border */
			.wp-block-search__button {
				width: 38px !important;  
				height: 38px !important;
				padding: 0 !important;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				border-radius: 50% !important;
				border: 2px solid var(--wp--preset--color--accent-3) !important;
				background-color: transparent; 
				cursor: pointer;
				transition: all 0.3s ease;
				/* This creates the exact 3px gap by pushing away from the input */
				margin: 0 0 0 5px !important; 
			}

			/* 3.5 Center and scale the magnifying glass icon */
			.wp-block-search__button svg {
				width: 18px !important;
				height: 18px !important;
				display: block;
				fill: currentColor;
			}

			/* 3.6 Button Hover: Background fills with Accent 3 */
			.wp-block-search__button:hover {
				background-color: var(--wp--preset--color--accent-3) !important;
				color: #fff; 
			}

			/* 4. Hover Effect: Slide the text box out */
			.wp-block-search:hover .wp-block-search__input,
			.wp-block-search__input:focus {
				width: 200px; 
				opacity: 1;
				visibility: visible; 
				padding: 0 12px !important;
			}