/*
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;
    --clr-light-bg: #f1f5f6;
    --clr-blue-700: #001A4F;
    --clr-blue-600: #0A688B;

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

    /* Fonts. Replace main fonts in quotes here as needed from Ele site settings */
    --ff-heading: 'Manrope', sans-serif;
    --ff-paragraph: 'Poppins', sans-serif;

    /* FONT SIZES */

    /* Paragraph */
    --font-body: 1rem; /* 16px fixed */

    /* Headings min (mobile) */
    --h6-min: 1.125rem; /* 18px */
    --h5-min: 1.25rem;  /* 20px */
    --h4-min: 1.5rem;   /* 24px */
    --h3-min: 1.75rem;  /* 28px */
    --h2-min: 2rem;     /* 32px */
    --h1-min: 2.5rem;   /* 40px */

    /* Headings max (desktop) */
    --h6-max: 1.375rem; /* 22px */
    --h5-max: 1.75rem;  /* 28px */
    --h4-max: 2rem;     /* 32px */
    --h3-max: 2.5rem;   /* 40px */
    --h2-max: 3rem;     /* 48px */
    --h1-max: 4rem;     /* 64px */

    /* Line Heights */
    --p-line-height: 1.6;
    --h6-line-height: 1.6;
    --h5-line-height: 1.4;
    --h4-line-height: 1.2;
    --h3-line-height: 1.2;
    --h2-line-height: 1.2;
    --h1-line-height: 1.2;

}

/* -------------------------------------
    FLUID TYPOGRAPHY SYSTEM
    This lays above Elementor, and should be the default for most font sizes, unless you specifcally want to set a font size on a single element with Elementor.
    Baseline: 1rem = 16px (paragraph)
    Adjust these values as needed at the start of a new site, after the fonts of that site are installed
------------------------------------- */
.elementor-heading-title {
    /* line-height: unset !important; */
}
p { 
    font-size: var(--font-body); 
    font-family: var(--ff-paragraph); 
    line-height: var(--p-line-height) !important; 
    font-weight: 400; 
    /* color: var(--clr-text);  */
}
h6 { 
    font-size: clamp(var(--h6-min), 0.5rem + 1vw, var(--h6-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h6-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
h5 { 
    font-size: clamp(var(--h5-min), 0.5rem + 1.25vw, var(--h5-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h5-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
h4 { 
    font-size: clamp(var(--h4-min), 0.5rem + 1.5vw, var(--h4-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h4-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
h3 { 
    font-size: clamp(var(--h3-min), 0.5rem + 2vw, var(--h3-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h3-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
h2 { 
    font-size: clamp(var(--h2-min), 0.5rem + 3vw, var(--h2-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h2-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
h1 { 
    font-size: clamp(var(--h1-min), 1rem + 4vw, var(--h1-max)); 
    font-family: var(--ff-heading); 
    line-height: var(--h1-line-height) !important; 
    font-weight: 700; 
    color: var(--clr-primary); 
}
li { 
    color: var(--clr-text); 
    margin-bottom: .5em; 
}
.elementor-button {
    font-family: var(--ff-heading);
}
.elementor-button-text,
.gform-footer #gform_submit_button_1 {
    font-weight: 700;
    font-size: var(--font-body);
    font-family: var(--ff-heading);
}
.elementor-icon-list-item {
    font-family: var(--ff-paragraph);
    color: var(--clr-text); 
}
.margin-bottom-0 p {
    margin-bottom: 0;
}
/* 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;
}
ul {
    padding-left: 20px;
}
 

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

/* 
**
***
    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: 85%; /* 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;
}
/* Buttons */
#ele-shrink-header .elementor-button {
    /* font-size: 1.2rem */
}
/* Buttons */
#ele-shrink-header.scrolled .elementor-button {
    font-size: 0.85rem
}


/*************************** CUSTOM SEARCH WIDGET ***************************/
.custom-search-wrapper {
    position: relative;
    display: inline-block;
    padding: 0 1em;
}
.fa-solid.fa-magnifying-glass {
    color: var(--clr-white);
}
.fa-solid.fa-magnifying-glass:hover {
    color: var(--clr-blue-600);
    transition: all .3s;
}
.custom-search-wrapper button.search-toggle {
    background: none;
    padding: 0;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
}
.custom-search-wrapper button.search-toggle:hover {
    background: none;
}
.custom-search-wrapper button.search-toggle:focus {
    background: none;
    outline: none;
}
.custom-search-wrapper button.search-toggle:focus-visible {
    background: none;
    outline: none;
}
.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(--ff-heading);
    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;
}
.ginput_container_textarea textarea {
    padding: 10px !important;
}

.presentation-doc-item .elementor-button .elementor-button-text {
	font-weight: 300 !important;
}
.presentation-doc-item p {
	font-size: .85rem !important;
}