/*
Theme Name: Stamats Twenty Twenty-Five
Template: 	twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme of twentytwentyfive, Customized for Stamats.
Author: Amanda Gansemer
Version: 1.0.0
*/

/* A11y Styles */
/* ----- */
*:focus-visible {
    outline: 3px solid black !important;
    box-shadow: 0 0 0 6px white !important;
}

/* Site Search Input Focus Indicator */
.wp-block-search__input:focus {
    /* inner indicator */
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 4px var(--wp--preset--color--black);
}
.wp-block-search.wp-block-search__button-only .wp-block-search__button:focus {
    outline: 2px solid var(--wp--preset--color--black);
    outline-offset: 2px;
    box-shadow: none;
}

/* Button Focus Indicators */
.wp-block-button .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    /* inner indicator */
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 4px;
	/* outer indicator */
	box-shadow: 0 0 0 2px var(--wp--preset--color--red);
}
.wp-block-button.is-style-white .wp-block-button__link:focus,
.wp-block-button.is-style-outline-white .wp-block-button__link:focus {
    /* inner indicator */
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 4px;
	/* outer indicator */
	box-shadow: 0 0 0 2px var(--wp--preset--color--navy);
}

/* Site Search Styles */
.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden, 
.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
    overflow: visible;
}
.wp-block-search__inside-wrapper {
    align-items: center;    
}
.wp-block-search button svg {
    height: auto;
    width: 2.0rem;
}
.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    margin-left: 0.25rem;
}


/* Button Styles */
/* fill & fill with arrow */
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill-with-arrow .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white); 
    color: var(--wp--preset--color--navy); 
    border: 2px solid var(--wp--preset--color--navy);
}
/* fill with arrow - hover */
.wp-block-button.is-style-fill-with-arrow .wp-block-button__link:hover::after {
    border-color: var(--wp--preset--color--navy);
}

/* White & white with arrow */
.wp-block-button.is-style-white .wp-block-button__link:hover,
.wp-block-button.is-style-white-with-arrow .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--navy); 
    color: var(--wp--preset--color--white); 
    border: 2px solid var(--wp--preset--color--white);
}
/* white with arrow - hover */
.wp-block-button.is-style-white-with-arrow .wp-block-button__link:hover::after {
    border-color: var(--wp--preset--color--white);
}


/* outline & outline with arrow */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline-with-arrow .wp-block-button__link:hover  {
    background-color: var(--wp--preset--color--navy); 
    color: var(--wp--preset--color--white); 
    border-color: var(--wp--preset--color--white);
}
/* outline with arrow */
.wp-block-button.is-style-outline-with-arrow .wp-block-button__link:hover::after {
    border-color: var(--wp--preset--color--white);
}

/* outline white and outline white with arrow */
.wp-block-button.is-style-outline-white .wp-block-button__link:hover,
.wp-block-button.is-style-outline-white-with-arrow .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white); 
    color: var(--wp--preset--color--red); 
    border-color: var(--wp--preset--color--red);
}
.wp-block-button.is-style-outline-white-with-arrow .wp-block-button__link:hover::after {
    border-color: var(--wp--preset--color--red);
}

/* Footer Customizations */
/* ----- */
/* add arrows after nav items in footer */
footer .wp-block-navigation a::after {
    content:"";
    border: solid white;
    border-width: 0 1px 1px 0;
    display: inline-flex;
    vertical-align: middle;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-left: .3rem;
}
/* change social media svg size - the setting for this was not working */
footer .wp-block-social-links.has-large-icon-size svg {
    height: 2rem;
    width: 2rem;
}
/* add colored bar after footer */
footer::after {
    content:"";
    display:block;
    width:100%;
    height: 1.125rem;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d5fbff+0,d5fbff+19,0091a5+19,0091a5+19,0091a5+31,bb271b+31,bb271b+39,66849e+39,66849e+39,66849e+50,85aeb4+50,85aeb4+76,3e8fa1+76,3e8fa1+76,3e8fa1+81,a5b967+81,a5b967+100 */
    background: linear-gradient(to right,  #d5fbff 0%,#d5fbff 19%,#0091a5 19%,#0091a5 19%,#0091a5 31%,#bb271b 31%,#bb271b 39%,#66849e 39%,#66849e 39%,#66849e 50%,#85aeb4 50%,#85aeb4 76%,#3e8fa1 76%,#3e8fa1 76%,#3e8fa1 81%,#a5b967 81%,#a5b967 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* Add background images to footer */
footer .wp-block-group.LetsChatSection {
    z-index: 1;
}
footer .wp-block-group.LetsChatSection::after {
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image: url('assets/images/background-dots-red-section.svg');
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: scroll;
    z-index: 0;
}
@media screen and (max-width: 1579px) {
    footer .wp-block-group.LetsChatSection::after {
        opacity: .5;
    }
}
footer .wp-block-group.NavyFooter {
    background-image: url('assets/images/Footer-Large-Dots.svg');
    background-position: 100% 99%;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: scroll;
}