/*
 Theme Name: NJ PACE
 Theme URI: 
 Description: Divi Child Theme
 Author: Bandt Agency
 Author URI: https://www.bandtagency.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */


.card{
                max-width: 300px;
                box-shadow: #efefef 10px 20px 20px;
                padding: 20px;
                text-align: center;
                position: absolute;
                background-color: #fff;
                display: none;
                border-radius: 20px;
                z-index: 1000;
            }
            
.card img{
    margin-bottom: 20px;
}
            
    h1, h2{
        font-weight: 900 !important;
    }
    
    h1{
        font-size: 3em !important;
        text-align: left;
        font-family: noto-sans, helvetica;
    }
    
    h1::after{
        content:"";
background-image: url("/wp-content/uploads/accents/yellow-underline.svg");
display: block;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
margin-top: 20px;
    }
    
    .flex_div{
        display: flex;
        flex-direction: column;
    }
    
    #header{
                    padding: 5% 10%;
            background-color: #D8F5FF;
    }
    #breadcrumbs{
        margin-bottom: 30px;
        color: #006E96;
        text-transform: uppercase;
        font-weight:900;
        
    }
    
    .half_1{
        width: 100%;
    }
    
    .half_2{
        width: 100%;
    }
    
    #member-list{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    
        margin: auto;
        
    }

    
    .address{
        margin: 0px 10px;
    }
    
    .contact_num{
        font-size: 20px;
        margin: 20px 0px;
        display: block;
    }
    
    .site{
        font-size: 20px;
        text-decoration: underline;
        text-underline-offset: 5px; 
    }
    
    .site::hover{
        font-weight: 500;
        transform: font-weight 5ms ease-in-out;
    }
    
    .tags{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .county{
        background-color: #FF9F0D;
        color: #000;
        text-transform: uppercase;
        border-radius: 500px;
        padding: 10px 20px;
        margin-bottom: 30px;
        max-width: 45%;

    }
    
    .county p{
       color: #000 !important; 
               text-align: center;
        font-size: 12px;
        font-weight: 700;
    }
    
    form{
        width: 100%;
    }
    
    .form-container {
            width: 100%;
            padding: 20px;
        }
        
     .input-group {
            position: relative;
            margin-top: 20px;
        }

    .input-group label {
        text-transform: uppercase;   
        color: #006E96;
        font-weight: 900;
    }

        .searchbox {
            flex: 1;
            width: 100%;
            padding: 12px 15px !important;
            font-size: 16px;
            border: 3px solid #006E96 !important;
            border-radius: 500px;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.3s;
            background-color: transparent !important;
        }

        .input-group input:focus {
            border-color: #D8F5FF;
        }

        .btn {
            padding: 12px 24px;
            font-size: 16px;
            background-color: #006E96;
            color: white;
            border: none;
            border-radius: 500px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s;
            margin-top: 20px;
        }

        .btn:hover {
            background-color: #004d6b;
        }

        .input-wrapper {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
        }
        
        .org-list-container{
            background-color:#F7F7F7;
            padding: 50px 5%;
        }
        
        .org-list-inner{
            max-width: 1820px;
            display: block;
            margin: auto;
        }
    
        #alt_list{
            display: flex;  flex-wrap: wrap;
        }
        
        #alt_list li {
            font-size: 18px;
            font-weight: 700;
            margin-right: 20px;
        }
        
        .nl-h3{
            
            margin-top: 30px;
        }
        
          /* Hide default checkbox */
        input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 24px;
            height: 24px;
            border: 3px solid #006E96;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            margin-right: 10px;
            vertical-align: middle;
            transition: all 0.2s ease;
            background-color: white;
        }

        /* Checked state - 4px border */
        input[type="checkbox"]:checked {
            border: 4px solid #006E96;
            background-color: #006E96;
        }

        /* Checkmark */
        input[type="checkbox"]:checked::after { 
            content: '';
            position: absolute;
            left: 5px;
            top: 1px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* Hover effect */
        input[type="checkbox"]:hover {
            opacity: 0.8;
        }

        /* Focus state for accessibility */
        input[type="checkbox"]:focus {
            outline: 2px solid #006E96;
            outline-offset: 2px;
        }
        
        #county_filts, #stat_filts{
                                    
        }
        
        .filter-cat{
            font-size:20px;
            color: #006E96;
            font-weight:700;

        }
        
        .arrow{
            font-size:20px;
            color: #006E96;
             font-family: "Font Awesome 5 Free";
        }
        
                .sticky {
        position: fixed;
        top: 0;
        width: 100%; /* Adjust as needed */
        z-index: 1000; /* Ensure it stays above other content */
        /* Add any other styling for your sticky element */
    }
    
        #stick-me{
            position: sticky;
            top: 20px;
            z-index: 500;
            display: block;
            background-color: #fff;
            padding: 30px 10%;
            max-height: 200px;
        }
        
        #stick-box{
            display: block;
        }
        
        #stick-me .form-container{
            display: none;
        }
        
        #filters{
            width: 100%;
            padding: 15px 12px;
            border: #006E96 solid 3px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow-y: visible;
            background-color: #fff;
            margin-left: auto;
        }
        
        .filt_button{
            width: 100%;
        }
        
        .filt_bucket {
            border-top : 3px solid #006E96;
            padding: 5px 20px;
        }
        
        .pt_listing{
           
        }
        
        .pt_list_flex{
             display: flex;
            flex-direction: column;
        }
        .listing_date{
            font-weight: 700;
            font-size: 20px;
            color: #5C0F8B;
            margin-bottom: 20px;
        }
        
        /*** Primary Link Styles ***/
.small_link{
	font-family: Lato, arial, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 500;
	color: #006E96;
	text-decoration: none;
	margin-top: 50px;
}

.small_link:after{
	content: "";
	width: 10px;
	height: 15px;
	background-image: url("https://agefriendlynj.org/wp-content/uploads/2024/07/arrow-right.svg");
    background-size: 10px 15px;
	display: inline-block;
	transition: transform 0.2s ease-in-out;	
    margin-left: 14px;
}

.small_link.rev{
	font-family: Lato, arial, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

.small_link.rev:after{
	content: "";
	width: 10px;
	height: 15px;
	background-image: url("/wp-content/uploads/icons/arrow_forward_rev.webp");
    background-size: 10px 15px;
	display: inline-block;
	 margin-left: 14px;
}

.small_link:hover:after{
transform: translateX(20px);	
transition: transform 0.1s ease-in-out;	
}

.listing_img{
    width: 100%;
}

.post_info{
    margin-top: 30px;
}

.tag_list_parent{
    display:flex; font-size: 16px; color: #006E96; margin: 20px 0px;
}

.tags_list{
    display: flex;
    align-content: center;
}

.tags_list li {
    margin-right: 20px;
}
@media screen and (min-width: 767px){
    
    h1{
        font-size: 4em !important;
    }
    
    .flex_div{
        flex-direction: row;
    }
        #header{
            padding: 5% 10%;
            background-color: #D8F5FF;
        }
        
        
                .input-group label {
            position: absolute;
            top: -10px;
            left: 5%;
            background-color: #D8F5FF;
            padding: 0 10px;
            font-size: 14px;
            color: #006E96;
            pointer-events: none;
        }
        
                .half_1{
        width: 60%;
        margin-right: 5%;
    }
            .half_2{
        width: 35%;
    }
    
        .input-wrapper {
            flex-direction: row;   
            align-items: center;
        }
        
        .input-group .btn {
            margin-top: 0px;   
        }
        
          .org-list-container{
            background-color:#F7F7F7;
            padding: 50px 10%;
        }
        
        #member-list{
            flex-direction: row;
            justify-content: space-between
        }
        

        
            #filters{
            width: 300px;
            padding: 15px 12px;
            border: #D8F5FF solid 3px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        
          #stick-box{
            display:flex;
            justify-content: space-between;
        }
        
        .listing_img{
    max-width: 300px;
}
        

    }
    
    @media screen and (min-width: 1300px){
        
        h1{
        font-size: 5em !important;
    }
    
          .form-container {
            max-width: 40vw;

        }
        
                .half_1{
        width: 45%;
        margin-right: 5%;
    }
            .half_2{
        width: 45%;
    }

        
        #member-list{
            flex-direction: row;
            justify-content: space-between
        }
        

        .pt_list_flex{
             display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    }