/*
Theme Name: Fund Change Child - Main Styles
Description: Custom styles for the Fund Change child theme.
*/

/*--------------------------------------------------------------
Table of Contents:
--------------------------------------------------------------*/

/* 1.0 General Styles */
/* 2.0 Typography */
/* 3.0 Layout */
/* 4.0 Header */
/* 5.0 Navigation */
/* 6.0 Content */
/* 7.0 Sidebar */
/* 8.0 Footer */
/* 9.0 Responsive Styles */

/*--------------------------------------------------------------
1.0 General Styles
--------------------------------------------------------------*/

.has-radius-10,
.wp-block-group .radius-media-text .wp-block-media-text__media img {
    border-radius: 10px;
}


/*-------------  Hides Element ------------------------------ */
.display-none {
    display: none !important;
}

/*-------------  Search Bar --------------------------------- */
.search-filter-base.search-filter-style--search-text {
    background: var(--wp--preset--color--base);
    border-radius: 5px;
    border: 2px solid var(--wp--preset--color--contrast);
    /* box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2); */
    /* -webkit-box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2); */
    /* -moz-box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2); */
    transition: box-shadow 0.3s ease, fill 0.3s ease;
}

.search-filter-base.search-filter-style--search-text:hover,
.search-filter-base.search-filter-style--search-text:has(.search-filter-input-text__input:focus) {
    box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2);
    -webkit-box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2);
    -moz-box-shadow: 1px -1px 0px 8px var(--wp--preset--color--accent-2);
}

.search-filter-base.search-filter-style--search-text .search-filter-input-text {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    transition: background-color 0.3s ease;
}

.search-filter-base.search-filter-style--search-text .search-filter-input-text {
    height: 54px;
    min-height: 40px;
    min-width: clamp(21.25rem, 9.302vw + 20.087rem, 31.25rem);
    /* width: 1.25em; */
    fill: var(--wp--preset--color--accent-1);
    vertical-align: text-bottom;
    padding: 0.2em 1.2em;
    transition: fill 0.3s ease;
}

.search-filter-base.search-filter-style--search-text .search-filter-input-text:focus {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
    background: var(--wp--preset--color--accent-1);
    fill: var(--wp--preset--color--base);
}

.search-filter-input-button.search-filter-field__input {
    height: 58px;
    border-width: 2px;
    --search-filter-input-background-color: var(--clr-secondary);
    color: white;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--trn-ease-250ms);
}

.search-filter-input-button:hover:not(.is-disabled):not(.search-filter-input-button--is-selected) {
    --search-filter-input-color: white;
    --search-filter-input-background-color: var(--clr-primary);
    --search-filter-input-border-hover-color: var(--clr-primary);
}

.charity_search_area .search-filter-input-text input[type="text"].search-filter-input-text__input,
.charity_search_area .search-filter-input-text input[type="text"].search-filter-input-text__input::placeholder,
.entry-content .search-filter-input-text input[type="text"].search-filter-input-text__input,
.entry-content .search-filter-input-text input[type="text"].search-filter-input-text__input::placeholder {
    --search-filter-input-color: var(--clr-primary);
    font-size: clamp(0.938rem, 0.407vw + 0.887rem, 1.375rem);
}

.entry-content .search-filter-input-button:focus, .search-filter-input-button:active {
    --search-filter-input-border-focus-color: var(--clr-secondary);
}

.search-filter-input-button.search-filter-field__input {
    font-size: var(--fnt-md-base);
}

@media only screen and (max-width: 992px) {

    .entry-content .search-filter-input-text input[type="text"].search-filter-input-text__input,
    .entry-content .search-filter-input-text input[type="text"].search-filter-input-text__input::placeholder {
        font-size: var(--fnt-md-base);
    }

    .search-filter-base.search-filter-style--search-text .search-filter-input-text {
        padding-left: .65em;
        padding-right: .65em;
        min-width: fit-content;
    }

    .search-filter-input-button.search-filter-field__input {
        font-size: var(--fnt-md-base);
    }

    .search-filter-input-button.search-filter-field__input {
        font-size: var(--fnt-sm-base);
    }
}


/*-------------  Buttons Animation ----------------------------*/
.wp-block-button__link.wp-element-button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1;
}

.wp-block-button__link.wp-element-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--accent-2);
    transition: left 0.3s ease;
    z-index: -1;
}

.wp-block-button__link.wp-element-button:hover {
    background-color: var(--wp--preset--color--accent-2);
    border-color: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--contrast);
}

.wp-block-button__link.wp-element-button:hover::before {
    left: 0;
}

/*-------------  Buttons Dark --------------------------------*/
.has-accent-1-background-color .wp-block-buttons .wp-block-button__link {
    background-color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.has-accent-1-background-color .wp-block-buttons .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--accent-2);
}

.has-accent-1-background-color .wp-block-buttons .is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--base);
    transition: color 0.3s ease;
}

.has-accent-1-background-color .wp-block-buttons .is-style-outline .wp-block-button__link:hover {
    color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--accent-2);
}


/* ------------- WebKit Browsers (Chrome, Safari) ------------*/
::-webkit-scrollbar {
    width: 10px;
    /* Adjust width as needed */
}

::-webkit-scrollbar-track {
    background: var(--wp--preset--color--base);
}

::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--accent-1);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wp--preset--color--contrast);
}

/* Firefox */
html {
    scrollbar-color: var(--wp--preset--color--accent-1) var(--wp--preset--color--base);
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/



/*--------------------------------------------------------------
3.0 Layout
--------------------------------------------------------------*/



/*--------------------------------------------------------------
4.0 Header
--------------------------------------------------------------*/



/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/* Header Navigation Desktop */
/* header.wp-block-template-part .wp-block-navigation ul li {
    padding: 8px 16px;
    border-radius: 5px;
}

header.wp-block-template-part .wp-block-navigation ul li:focus {
    outline-width: 0px;
    outline-style: none;
}

header.wp-block-template-part .wp-block-navigation ul li:hover {
    background: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
    text-decoration: none;
}


#modal-1 .wp-block-navigation a:hover {
    text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation ul li ul.wp-block-navigation__submenu-container {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 5px;
    background: var(--wp--preset--color--base);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    border: none;
    padding-top: 1rem;
}


header.wp-block-template-part .wp-block-navigation ul li ul li {
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--wp--preset--color--accent-1);
}

header.wp-block-template-part .wp-block-navigation ul li ul li:hover {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--accent-1);
}


header.wp-block-template-part .wp-block-navigation ul li ul li a {
    font-size: 15px;
    padding: 0;
} */



/*--------------------------------------------------------------
6.0 Content
--------------------------------------------------------------*/



/*--------------------------------------------------------------
7.0 Sidebar
--------------------------------------------------------------*/



/*--------------------------------------------------------------
8.0 Footer
--------------------------------------------------------------*/



/*--------------------------------------------------------------
9.0 Responsive Styles
--------------------------------------------------------------*/

@media (max-width: 768px) {
    /* Add responsive styles for smaller screens here */
}

@media (max-width: 480px) {
    /* Add responsive styles for even smaller screens here */
}

/* Add your custom styles below this line */