/* 2025-04-09 14:28 */

/* Hide text on load */
.search-help-text {
    display: none;
}

/* Show help text */
.show-help .search-help-text {
    display: block;
}

.search-box {
    text-align: start;
}

.search-box ul {
    padding-left: 1.2em;
}

.show-help .search-bar
{
    gap: 1em;
}

.search-box.show-help {
	max-height: 90svh;
	overflow: auto;
}

 /* Style for the question mark icon */
 .search-help-icon {
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--clr-accent);
}

/* Style for the question mark icon */
.search-help-icon {
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--clr-accent);
}

/* Help text styles (hidden by default) */
.search-help-text {
    margin-top: 2em;
    font-size: 0.7rem;
    color: #333;
    display: none;
}

/* Adjust line spacing in paragraphs */
.search-help-text p {
    line-height: 1.2;
}
.search-help-text li,
.search-help-text p {
    margin-bottom: 0.8em;
    list-style-type: disc;
    /* Change value as needed */
}
.search-help-text code {
    background-color: #f0f0f0;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    font-weight: 500;
}

/* When help is shown, slightly increase the bottom padding */
.search-box.show-help {
    padding-bottom: 2em;
    transition: padding-bottom 0.3s ease;
}

.search-button, .show-help .search-bar__submit {
    padding: 0.5em;
    font-size: 0.9rem;
    border: 2px solid;
    background-color: transparent;
    flex-shrink: 0;
    color: var(--clr-accent);
    cursor: pointer;
    border-radius: 0.3em;
    transition: border-color 0.3s ease-in-out;
}

.search-box .search-bar__submit .button-text {
    display: none;
}

.search-input, 
.show-help .search-bar .search-bar__input, 
.show-help .search-bar:focus-within .search-bar__input{
    flex: 1;
    padding: 0.4em;
    font-size: 0.9rem;
    border: none;
    border-bottom: 2px solid var(--clr-accent);
    outline: none;
    width: 100%;
}

@media screen and (max-width: 785px) {
	/* Search bar on the small screenst in pink */

	.search-bar {
		--size: 1.9rem;
		display: flex;
		gap: 5px;
		position: relative;
		height: var(--size);
		width: var(--size);
		transition: width 500ms ease;
		padding: 3px;
		overflow: hidden;
		margin: 0 auto;
	}

	/* Search help icon hidding initially */
	.search-bar .search-help-icon {
		display: none;
	}

	.search-box.show-help {	
		position: absolute;
		left: 10svw;
		right: 10svw;
		overflow: auto;
		background: white;
		z-index: 10;
		top: 9svh;
		/*bottom: 6svh;*/
		border-radius: 0.5em;
		padding: 2em 1.5em;
		overflow: auto;
		transition: height 500ms;
	}

    
	.search-bar__input {
		flex-grow: 1;
		padding: 0 0.5em;
		position: absolute;
		border-radius: 4px;
		border: 0;
		line-height: var(--size);
		cursor: pointer;
		z-index: 2;
		background:0;
	}

    .search-box.show-help .search-bar__input {
        border-radius: 0;
    }

    .search-bar__input::placeholder {
        font-size: 0;
    }

    .search-bar:focus-within .search-bar__input::placeholder {
        font-size: unset;
    }

	.search-bar__submit {
		font-size: 1.1em;
		cursor: pointer;
		background: 0;
		border: 0;
		width: calc(var(--size) - 6px);
		height: calc(var(--size) - 6px);
		margin-left: auto;
		transition: transform 200ms ease-in;
		display: flex;
		justify-content: center;
		align-items: center; 
		color: var(--clr-accent);
	}
    
    .search-box.show-help .search-bar {
        width: 100%;
    }

    .show-help .search-bar:focus-within {
        outline: 0;
    }
    
    .show-help .search-bar:hover {
        outline: 0;
    }

	.search-bar:focus-within {
		width: 100%;
	}

	.search-bar:focus-within .search-bar__input,
    .show-help .search-bar__input
	{
        opacity:1;
        z-index: initial;
        cursor: initial;
        background-color: white;
        width: calc(100% - var(--size) - 3px);
        outline: 0;
        border: 0;
        position: static;
	}

	.search-bar:focus-within .search-help-icon,
    .search-box.show-help .search-help-icon {
		display: block;
	}

	.search-bar:focus-within .search-bar__submit:focus,
	.search-bar:focus-within .search-bar__submit:hover,
	.search-bar__submit:hover
	{
        outline:0;
        border:0;
	}
}

@media screen and (min-width:786px) {
/* Search overlay */
    .search-overlay {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 999;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .search-box {
        position: relative;
        background: white;
        padding: 1.5em;
        border-radius: 0.5em;
        width: 80%;
        max-width: 22em;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .search-input-container {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 1rem;
    }

    .search-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .search-overlay.active .search-box {
        transform: scale(1);
    }

    .search-box .search-bar__submit .fas.fa-magnifying-glass {
        display: none;
    }

    .search-box .search-bar__submit .button-text {
        display: inline;
    }
}