/**
 * - this is secondary stylesheet for custom search-filters block.
 * - within this block is the custom algolia-search-js block.
 * therefore, this is also the secondary stylesheet for algolia-search-js block
 * search buttons are registered as .is-style-large-toggle, can be edited via buttons.css  
`*/
/**
 * ---------------------------------------------------------------------- search filters block
 */
section.wp-block-create-block-search-filters {
	position: relative;
	z-index: 99;
	overflow: visible;
}
/* search suggestion results - move to algolia block */ 
.search-input-wrapper .wp-block-create-block-algolia-search-js{
	position: absolute;
	z-index: 9;
	width: 100%;
  	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
}

.column-relative {
	position: relative; /* where is this ? - dj */
}

/* search toggle buttons - Lg Toggle: see buttons.css */

/* search bar */
.search-input-wrapper {
	width: 100%;
	position: relative;
}
/* disable search bar input field if category tab is active*/
.search-input-wrapper.category-active input{
	pointer-events: none;   /* disables click/focus */
  	user-select: none;      /* prevents text selection */
	width: 1rem;
    height: 1rem;
}
/* hide dropdown search if category tab is active */
.search-input-wrapper.category-active .wp-block-create-block-algolia-search-js{
	display:none !important;
}
/* keyword input field */
.search-recipes .wp-block-search__inside-wrapper input.wp-block-search__input {
	border-bottom-right-radius: 0 !important;
	border-top-right-radius: 0!important;
	width: 100%;
  	height: 80px;

	padding-left: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);

	position: relative;
	z-index: 10;

	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-2);
}
@media (max-width: 1679px) { 
  	.search-recipes .wp-block-search__inside-wrapper input.wp-block-search__input{
		height: 72px;
	}
}
@media (min-width: 768px) { 
  	.search-recipes .wp-block-search__inside-wrapper input.wp-block-search__input {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}
@media (min-width: 992px) { 
  	.search-recipes .wp-block-search__inside-wrapper input.wp-block-search__input {
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}
/* Remove WP's default focus outline & shadow, affects main nav search too */
.wp-block-search__input:focus {
  outline: none !important;        /* Removes the blue outline */
  box-shadow: none !important;     /* Removes WP's focus glow */
  border: 1px solid var(--wp--preset--color--light-d) !important; /* Example: custom border */
}
/* input placeholder text */
.wp-block-search__input::placeholder {
  color: var(--wp--preset--color--black);
  opacity: 1; /* Ensures full opacity in Firefox */
}
.wp-block-search__input:-ms-input-placeholder {
  color: var(--wp--preset--color--black);
}
.wp-block-search__input::-ms-input-placeholder {
  color: var(--wp--preset--color--black);
}

/* search button */
.search-recipes .wp-block-search__inside-wrapper button{
	border-bottom-left-radius: 0!important;
	border-top-left-radius: 0!important;
	margin-left: 0;
	height: 80px;
	border-left: 1px solid var(--wp--preset--color--light-d);

	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
	
	filter: brightness(100%); /* Original brightness */
    transition: filter 0.25s ease; /* Smooth transition for the effect */
	border-color: var(--wp--preset--color--accent) !important;
} 

@media (min-width: 1200px) { 
 html[lang="fr"] .search-recipes .wp-block-search__inside-wrapper button{
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
 }
}
@media (min-width: 1400px) { 
 html[lang="fr"] .search-recipes .wp-block-search__inside-wrapper button{
		padding-left: var(--wp--preset--spacing--60);
		padding-right: var(--wp--preset--spacing--60);
 }
}
@media (max-width: 1679px) { 
  	.search-recipes .wp-block-search__inside-wrapper button {
		height: 72px;
	}
}
@media (max-width: 991px) { 
  	.search-recipes .wp-block-search__inside-wrapper button {
		padding-left: 48px;
		padding-right: 48px;
	}
}
@media (max-width: 768px) { 
  	.search-recipes .wp-block-search__inside-wrapper button, .is-style-large-search .wp-block-search__inside-wrapper button {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}
.search-recipes .wp-block-search__inside-wrapper button:focus,
.search-recipes .wp-block-search__inside-wrapper button:hover {
	background-color: #eb2436;
    filter: brightness(120%); /* Brighten by 50% on hover */
    text-decoration: none;
}

/* search by category dropdown */
#search-by-category {
	display: none;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 9999;
	border-bottom-left-radius: 2.5rem!important;
	border-bottom-right-radius: 2.5rem!important;
	border-top-left-radius: 2.5rem;
}
#search-by-category dl dt, #search-by-category dd label {
	margin-bottom: .625rem;
		line-height: 1.4;

}
#search-by-category dd label {
	    display: flex;
    align-items: flex-start;
}
 #search-by-category dd label:last-child {
	margin-bottom: 0;
 }
dl dt strong {
	font-size: 1rem !important;
}

#search-by-category summary {
	position: absolute;
	top: 24px;
	height: 2rem;
	z-index: 1;
	left: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	padding-right: 25px;
  	
	display: flex;
	width: calc(100% - (20px *2));
	justify-content: space-between;
	align-items: center;

	line-height: 1.2;
}
@media (min-width: 1200px) { 
#search-by-category summary {
	width: calc(100% - (40px *2));
}
}
#search-by-category summary::after {
    content: "▾";
    font-size: 44px;
}
@media (max-width: 1679px) { 
  	#search-by-category summary {
		top: 20px; /* height changes to 72px */
	}
}
@media (max-width: 1400px) { 
  		#search-by-category .wp-block-group {
	max-height: 500px;
    overflow-y: auto;
	}
	#search-by-category summary {
		padding:0 0 0 var(--wp--preset--spacing--50);
        left: 1px;
        border-top-left-radius: 2.5rem;
        border-bottom-left-radius: 2.5rem;
		height: 70px;
    	top: 1px;
	    border-top-width: 1px;
    	border-color: #dddddd;
		background: #fff;
	}
}
@media (max-width: 990px) { 
	
	#search-by-category summary::after {
    content: "▾";
    font-size: 35px;
	}

}
@media (max-width: 576px) { 
.wp-block-create-block-algolia-search-js ul.wp-block-post-template>li h2 {
	font-size: 16px !important;
}
}
#search-by-category summary::after {
	content: "▾"; 
	font-size: 44px;
}
#search-by-category[open] > summary::after {
  	content: "▴"; /* toggle icon */
}
.wp-block-create-block-build-filters {
	margin-top: 0;
	margin-block-start: 0 !important;
	border-bottom-left-radius: 1rem!important;
	border-bottom-right-radius: 1rem!important;
	border-top-left-radius: 2rem;
}
.wp-block-create-block-build-filters > .wp-block-group {
	border: 1px solid var(--wp--preset--color--light-d) !important
}
#search-by-category .wp-block-columns  {
	padding-top:4rem;
	 gap: 2em var(--wp--preset--spacing--30);
	 display: flex;
  flex-wrap: wrap !important;
}
#search-by-category .wp-block-columns > .wp-block-column {
  flex: 1 1 100%; /* full width */
  max-width: 100%;
}
@media (min-width: 1200px) { 
#search-by-category .wp-block-columns {
	padding-top:2rem;
}
}
@media (min-width: 1300px) { 
  #search-by-category .wp-block-columns > .wp-block-column {
           flex: 1 1 45%;
        max-width: 45%;
  }
}
@media (min-width: 1400px) { 
#search-by-category .wp-block-columns {
	padding-top:1rem;
}
}
@media (min-width: 1680px) {
  #search-by-category .wp-block-columns  > .wp-block-column {
    flex: 1 1 0;
  }
}


/* search results label */
.search-results-title,
.search-no-results-title {
	display: none;
}

/* Hide default arrow in summary */
#search-by-category summary::-webkit-details-marker {
  display: none;
}

#search-by-category summary::marker {
  display: none; /* Firefox */
}

/* Optional: adjust styling so text stays aligned */
#search-by-category summary {
  list-style: none;
  cursor: pointer;
}
/**
 * ---------------------------------------------------------------------- algolia search js block (suggestions)
 */
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
 /* Hide by default */
.wp-block-create-block-algolia-search-js { 
  display: none;
	margin-top: -2rem !important;
	padding-top: calc(var(--wp--preset--spacing--40) + 2rem) !important;
  padding-left: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}

/* Show when input (or any child) is focused */
.search-input-wrapper:focus-within > .wp-block-create-block-algolia-search-js,
.wp-block-create-block-algolia-search-js:focus,
.wp-block-create-block-algolia-search-js:hover,
.wp-block-search__input:focus + .wp-block-create-block-algolia-search-js,
.wp-block-search__input:hover + .wp-block-create-block-algolia-search-js{
  	display: block;
}

/* query js */
.wp-block-create-block-algolia-search-js section.query-js{
	display: none;
	max-height: 36vh;
	overflow-y: scroll;
}
.wp-block-create-block-algolia-search-js.show-results section.query-js{
	display: block;
}

/* query template */ 
.wp-block-create-block-algolia-search-js ul.wp-block-post-template > li {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--30);
      padding-right: var(--wp--preset--spacing--40);
}
@media (max-width: 1679px) {
  .wp-block-create-block-algolia-search-js ul.wp-block-post-template > li {
    margin-top: var(--wp--preset--spacing--30);
    margin-bottom: var(--wp--preset--spacing--30);
  }
}
@media (max-width: 1399px) {
  .wp-block-create-block-algolia-search-js ul.wp-block-post-template > li {
    margin-top: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--20);
  }
  	.recently-viewed > .wp-block-group {
		    flex-direction: column;
			gap: 0;
			align-items: flex-start;
	} 
		.recently-viewed .wp-block-post article figure,.recently-viewed .wp-block-post article figure a ,
	.keyword-active .wp-block-post article figure, .keyword-active .wp-block-post article figure a {
       height: 60px !important;
	}
}
@media (max-width: 1200px) {
	#search-by-category .wp-block-group {
			padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.keyword-active .wp-block-create-block-algolia-search-js {
  		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.wp-block-create-block-search-filters > .wp-block-group > .wp-block-group:last-child {
		width:100%;
	}
}

@media (max-width: 990px) {
	.keyword-active .wp-block-create-block-algolia-search-js {
		padding-top: calc(var(--wp--preset--spacing--20) + 2rem) !important;
	}


}
.wp-block-create-block-algolia-search-js ul.wp-block-post-template > li > article{
  gap: var(--wp--preset--spacing--20);
}
.wp-block-create-block-algolia-search-js ul.wp-block-post-template > li:first-of-type {
  margin-top: 0;
}
.wp-block-create-block-algolia-search-js ul.wp-block-post-template > li:last-of-type {
  margin-bottom: 0;
}

/* recently viewed -----------------------------------------  */
.recently-viewed .wp-block-buttons {
	    margin-right: var(--wp--preset--spacing--20);
    margin-top: 0 !important;
}
.wp-block-create-block-algolia-search-js.show-results section.recently-viewed{
	display: none;
}
section.recently-viewed .query-recently-viewed{
	max-height: 36vh;
	overflow-y: scroll;
}
.wp-block-create-block-algolia-search-js figure a, .wp-block-create-block-algolia-search-js figure img {
	border-radius: 0.5rem !important;
} 
.no-recently-viewed-message {
	font-weight: 400;
}
/* hide wordpress nav on submit ----------------------------------- */
.wp-block-create-block-search-filters nav.hide-nav {
	display: none;
}
/* selected filter chips -------------------------------------------*/
.selected-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  position: absolute;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  background: #f2f2f2;
  border: 0;
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
.filter-chip .chip-remove {
  background: none;
  border: none;
  margin-left: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}