/*
Theme Name: Brockett Hello Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.0.1.1707834477
Updated: 2024-02-13 14:27:57

*/

:root {
    /* Standard Colors */
    --clr-white: #fff;
    --clr-black: #000;
    --clr-black-alt1: #231f20;
    --clr-black-alt2: #292929;
    --clr-light-border: #ddd;

    /* Add Elementor Global Colors Here for this site */
    --clr-primary: ;
    --clr-secondary: ;
    --clr-text: ;
    --clr-accent: ;

    /* Elementor Fonts. Replace main fonts in quotes here as needed from Ele site settings */
    --ele-ff-primary: 'Montserrat', sans-serif;
    --ele-ff-secondary: 'Montserrat', sans-serif;
    --ele-ff-text: 'Montserrat', sans-serif;
	--ele-heading-line-height: 1.2;
    --ele-heading-font-weight: 700;
    --ele-text-line-height: 1.4;
    --ele-text-font-weight: 400;
}

/* Moving the ADA and cookie buttons up a bit on mobile to get it out of the way of contact bar the bottom. Turn off if needed. */
@media(max-width: 767px){
	.userway_buttons_wrapper {
		bottom: 50px !important;
	}
	.cky-btn-revisit-wrapper {
		bottom: 50px !important;
	}
}

.elementor-element .inline-link a {
    color: var(--clr-primary);
    font-weight: 700;
    text-decoration: none;
}
.elementor-element .inline-link a:hover {
    color: var(--clr-primary);
    font-weight: 700;
}
.bullet-list ul {
    padding-left: 20px;
}

/*************************** Scroll to top ***************************/
.scroll-to-top {
    position: fixed;
    bottom: 62px;
    right: 7px;
    background-color: transparent;
    padding: 5px 10px;
    border-radius: 50%;
    border: 1px solid black;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
}
.scroll-to-top:hover,
.scroll-to-top:focus,
.scroll-to-top:focus-visible {
    opacity: 1;
    background-color: transparent;
}
.scroll-to-top i {
    color: black;
}

/* 
**
***
    CUSTOM SHRINKING HEADER ON SCROLL :)
    Be sure to add the ID 'ele-shrink-header' on the header element in elementor.
    On the header element, under 'advanced' > 'Motion Effects', set 'Sticky' to 'Top' and add all the breakpoints.
    'Offset' and 'Effects Offset' to 0, those are controlled in js/app.js, as well as adding/removing the 'scrolled' class.
    See comments below on what values can be adjusted as needed per site.
***
**
*/
#ele-shrink-header {
    transition: all 0.3s linear;
}
#ele-shrink-header.scrolled {
	width: 100% !important;
    padding: 0px 10px; /* Adjust as needed */
    transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
}
/* Logo default state */
#ele-shrink-header img {
    width: 100%;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s 
}
/* Mobile logo on scroll */
#ele-shrink-header.scrolled img {
    width: 80%; /* Adjust as needed */
}
 /* Shrink Logo more only on tablet and larger */
@media(min-width: 767px){
    #ele-shrink-header.scrolled img {
        width: 70%; /* Adjust as needed */
    }
}
/* Shrink nav items */
#ele-shrink-header.scrolled .elementor-nav-menu li a {
    font-size: .9rem; /* Adjust as needed */
    transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
}


/*************************** CUSTOM SEARCH WIDGET ***************************/
.custom-search-wrapper {
    position: relative;
    display: inline-block;
}
.search-toggle {
    padding: 0;
}
.fa-solid.fa-magnifying-glass {
    color: white;
}
.fa-solid.fa-magnifying-glass:hover {
    color: white;
    transition: all .3s;
}
.search-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.search-toggle:hover {
    background: none;
}
.search-toggle:focus {
    background: none;
    outline: 2px solid white;
}
.search-toggle:focus-visible {
    background: none;
    outline: 2px solid white;
}
.search-box {
    position: absolute;
    top: 120%;
    right: 0;
    width: 0;
    max-width: 400px;
    background: white;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}
.search-box.show {
    width: 400px;
    opacity: 1;
    pointer-events: auto;
}
.header-search-form input {
    border: 1px solid #ddd;
    outline: none;
    border-radius: 6px;
    font-family: var(--ele-ff-primary);
    transition: all 0.2s ease; 
    box-shadow: none;
}
.header-search-form input:focus {
    border: 1px solid transparent; 
    outline: none;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.2);
}
.search-field {
    padding: 6px;
    font-size: 1rem;
}
.search-submit,
.search-submit:hover {
    padding: 6px 10px;
    font-size: 1rem;
    background: none;
    border: none;
    outline: none;
}
.search-form-btn.fa-solid.fa-magnifying-glass,
.search-form-btn.fa-solid.fa-magnifying-glass:hover {
    background: none; 
    color: white;
}