/*
Theme Name: Progress Partners
Theme URI: https://tecology.co
Author: Tecology Consulting Group
Author URI: https://tecology.co
Description: Progress Partners is custom designed native wordpress FSE theme with a flexible range of custom patterns and functionality.
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: progresspartners
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/********** CSS File Index **********
1. Global Variables - Defines the root custom properties used throughout the stylesheet.
2. Global Styling - General styles that apply globally.
3. Main Menu Styling - Styles specific to the main navigation menu.
4. Site Logo Styling - Styling for the site's main logo.
5. Mobile Menu Styling - Adjustments and styles for the mobile version of the menu.
6. Testimonials - Styles for the testimonials section.
7. Media Queries - Responsive design adjustments for different screen sizes.
8. Jet Popup - Styles specific to JetPopup elements.
9. Newsletter Section Styling - Styling for newsletter subscription sections.
10. Social Share Links Styling - Styles for social media sharing buttons.
11. JetFormBuilder Styling - Styles for jetformbuilder
12. JetEngine Carosel Styling - Styles for JetEngine
13. Slim SEO Breadcrumb Styling
************************************/

/********** 1. Global Variables **********/
:root {
    --wp-admin--admin-bar--position-offset: 32px; /* Offset for the WordPress admin bar */
    --header-height-desktop: 65px; /* Header height for desktop */
    --header-listitem-height-desktop: 60px; /* Height of list items in the header on desktop */
    --header-height-mobile: 65px; /* Header height for mobile devices */
    --header-listitemheight-mobile: 59px; /* Height of list items in the header on mobile devices */
}

/********** 2. Global Styling **********/


/* Adds smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 65px; /* For modern browsers */
}

/* Post Naivation Previous */

#author .post-navigation-link-previous a{
	margin-right:2px;
    padding:10px;
    background-color:var(--wp--preset--color--accent);
    width: 30px;
    height: 30px;
    border-radius: 4px;
	font-size:18px;
	font-weight:500;
    text-decoration: none;
	line-height:1.7em;
    transition: all 0.3s ease-in-out;
}

#author .post-navigation-link-previous a:hover{
    background-color: var(--wp--preset--color--accent-hover)!important;
}


#author .post-navigation-link-next a{
	margin-left:2px;
    padding:10px;
    background-color:var(--wp--preset--color--accent);
    width: 30px;
    height: 30px;
    border-radius: 4px;
	font-size:18px;
	font-weight:500;
    text-decoration: none;
	line-height:1.7em;
    transition: all 0.3s ease-in-out;
}

#author .post-navigation-link-next a:hover{
    background-color:var(--wp--preset--color--accent-hover)!important;
}

.text-centre{
    text-align:center!important;
}

/* Basic global styles, including transitions for buttons and positioning utilities */
.wp-block-button__link, .wp-element-button {
    transition: all 0.3s ease-in-out; /* Smooth transition for button hover effects */
}

.main-site-logo {
    z-index: 1200 !important; /* Ensures the logo stays on top of other elements */
}

.position-relative {
    position: relative !important; /* Utility class for relative positioning */
}

.shadow-header {
    box-shadow: 0 4px 60px rgba(116, 116, 116, 0.15); /* Adds a subtle shadow for depth */
}

.overflow-hidden {
    overflow: hidden; /* Utility class to hide overflow */
}

.overflow-visible {
    overflow: visible; /* Utility class to show overflow */
}

.round-image img {
    border-radius: 4px !important; /* Rounds the corners of images */
}

.round-jet-image img {
    border-radius: 100px !important; /* Makes images circular, used for avatars or icons */
    width: 70px;
    height: 70px;
}

.round-jet-image-large img {
    border-radius: 100px !important; /* Makes images circular, used for avatars or icons */
    width: 150px;
    height: 150px;

}

.space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spreads items out evenly in a flex container */
}

.small-shadow {
    box-shadow: rgba(131, 131, 131, 0.25) 0px 13px 27px -5px,
        rgba(221, 221, 221, 0.3) 0px 8px 16px -8px;
    border-radius: 7px;
    overflow: hidden;
}

.small-dark-shadow {
    box-shadow: 12px 12px 50px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    overflow: hidden;
}

.card-transform, .card-scale {
    transition: transform 0.3s ease-in-out; /* Transition for transforming card elements */
}

.card-transform:hover {
    transform: translateY(-5px); /* Raises card slightly on hover */
}

.card-scale:hover {
    transform: scale(1.01); /* Slightly enlarges the card on hover */
}

.hover-shadow {
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    border-radius: 10px; /* Rounded corners for hover elements */
}

.hover-shadow:hover {
    box-shadow: 0px 10px 12px -4px rgba(198, 198, 198, 0.43); /* Shadow effect on hover */
}

.sticky-sidebar {
    top: 130px; /* Position for sticky sidebar elements */
    z-index: 1;
}

#logo-loop .jet-listing-grid--blocks, .jet-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important; /* Removes padding for certain JetEngine elements */
    overflow: visible;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the site stretches the full height of the viewport */
}

.wp-site-blocks {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* Flex properties to ensure footer sticks to the bottom */
}

.wp-site-blocks header {
    width: 100%;
    z-index: 1000; /* Ensures the header overlaps other content as needed */
}

.wp-site-blocks footer {
    align-self: flex-end;
    width: 100%;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    flex-shrink: 0;
    margin-top: auto; /* Positions the footer at the bottom of the viewport */
    position: relative;
}

/********** 3. Main Menu Styling **********/
/* Detailed styling for the main navigation menu, including hover effects and submenu appearances */

/* Main Menu List item Height to allow for submenus */
.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item{
	height: var(--header-listitem-height-desktop);
}

/* Removes the book a meeting button on desktop */

.mobile-menu-button {
    display: none!important;
}

/* Main Menu Sub menu styling */
.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item ul{
	border-width:0px !important;
	border-top-left-radius:0px!important;
	border-top-right-radius:0px!important;
	left:0px !important;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
	box-shadow:0px 10px 20px -10px rgba(0,0,0,0.20);
	overflow: hidden!important;
}

/* Main Sub Nav Menu Links Styling and transition */
.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation-item .wp-block-navigation-item__content{
	padding-top:15px;
	padding-bottom:15px;
	transition: background-color 0.5s, color 0.5s;
	
}

/* Link (hover) */
.main-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation-item .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--base);
	
}

/********** 4. Site Logo Styling **********/
.main-site-logo {
    z-index: 1200; /* Ensures the site logo is always on top */
}

/********** 5. Mobile Menu Styling **********/
/* Adjustments for the mobile menu, including its open and close states */

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {

	z-index: 1000;
	margin-top: var(--wp-admin--admin-bar--position-offset);
	
}

.wp-block-navigation__responsive-container-close {
    position: fixed;
	display: flex;
	justify-content: center;
    align-items: center;
	height: var(--header-listitemheight-mobile);
	width: var(--header-listitemheight-mobile);
	background-color: var(--wp--preset--color--base);
}


.wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--wp--preset--spacing--20);

}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: var(--header-height-mobile);
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    border-left-width: 5px;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-style: solid;
	border-color: var(--wp--preset--color--accent-6);
    min-width: 200px;
    opacity: 0.8;
	margin-top: 1rem;
	margin-left: 1rem;
	padding-left: 1rem;
    padding-right: 0.5rem;
    position: static;
    width: auto;
    gap: 5px;
}

/********** 6. Testimonials **********/
/* Styles for the testimonials section, emphasizing quotes and author images */

/* Jet listing grid  item */
.testimonials-slider div .jet-listing-grid__item{
	padding-left:20px;
	padding-right:20px;
	padding-bottom:30px;
}

.jet-listing-grid__slider .jet-listing-grid__items > div:nth-child(3){
	top:100%;
	bottom:0px;
	right:0px;
	left:50%;
	margin-top:20px;
	margin-left: 5px;
	background: var(--wp--preset--color--accent);
	border-radius: 7px;
	height: 47px;
}

/* Arrow Back */
.testimonials-slider .jet-listing-grid .jet-listing-grid__slider .jet-listing-grid__items > div:nth-child(1){
	top:100%;
	bottom:0px;
	right:0%;
	left:50%;
	margin-top:20px;
	margin-left: -55px;
	background: var(--wp--preset--color--accent);
	border-radius: 7px;
	height: 47px;
}

/* Allows for shadow overflow */
.testimonials-slider .jet-listing-grid .jet-listing-grid__slider .jet-listing-grid__items > div{
	overflow: visible;
}

.star-absolute {
    position: absolute;
    top: 70px;

}

/* Speech absolute for icon marking */
.testimonials-slider div .speech-absolute{
	/* position:absolute; */
	bottom:-40px;
	right: 80px;
}

/* Speech absolute top for icon marking */
.testimonials-slider div .speech-absolute-top{
	/* position:absolute; */
    transform: rotate(180deg)!important;
    transform-origin: center;
	top:-40px;
	left: 80px;
}

.testamonials-author-wrapper {

    margin-top: -40px!important;
}

/* Testimonial card */
.testimonials-slider div .testimonial-card{
	position:relative;
	overflow:visible;
}

/* Overflow wrapper */
.wp-site-blocks .wp-block-group .overflow-wrapper{
	overflow: hidden!important;
}

/********** 7. Media Queries **********/
@media (max-width: 780px) {
    /* Responsive styles for devices with widths up to 780px */
    .zero-height-mobile{
		min-height:0px !important;
	}

    .mobile-menu-button {
        display: block!important;
    }

    /* Adjust height of header logo */

    .main-site-logo a img{
        height: 48px!important;
    }

    /* Adds smooth scrolling top margin */
    html {
    scroll-padding-top: 0px!important; /* For modern browsers */
    }

	.text-centre-mobile{
		text-align:center!important;
	}

	.center-mobile{
		flex-direction:row!important;
		justify-content:center!important;
	}

    .order-2 {
        order: 2; /* Higher values will be placed later, and vice versa. */
    }
    .order-1 {
        order: 1; /* You can rearrange any child as needed */
    }

	/* Feature section right */
	.padding-mobile{
		padding-left:16px !important;
		padding-right:16px !important;
	}
	
	/* Feature section right */
	.no-padding-mobile{
		padding-left:0px !important;
		padding-right:0px !important;
	}
    .wp-block-button, wp-element-button{
		width: 100%!important;
		text-align: center;
     }

	 * Jet popup  container inner */
	.jet-popup--front-mode .jet-popup__container-inner{
	border-radius:0px !important;
	}

	/* Jet popup  close button */
	.jet-popup--front-mode .jet-popup__close-button{
	border-top-right-radius:0px !important;
	border-bottom-left-radius:4px !important;

	}
}

/********** 8. Jet Popup **********/
/* Styling specific to JetPopup elements, including the container and close button */

/* Jet popup  container */
.jet-popup--front-mode .jet-popup__container{
	max-height:80% !important;
	margin: 10px!important;
	
}

/* Jet popup  container inner */
.jet-popup--front-mode .jet-popup__container-inner{
	border-radius:10px!important;
}

/* Jet popup  close button */
.jet-popup--front-mode .jet-popup__close-button{
	margin-top: 10px;
	margin-right: 10px;
	border-radius:100px !important;
	background-color: var(--wp--preset--color--contrast)!important;
}

/* Partner meta */
.partner-flex .main-partner-group .partner-meta{
	display:flex;
	flex-direction:column;
	align-items:center;
}

/* Social Links */

.social-links {
	gap:10px;
}

/********** 9. Newsletter Section Styling **********/
/* Styling for the newsletter section, with focus on layout and icons */

/* Icon top */
.wp-site-blocks .wp-block-group .icon-top{
	position:absolute;
	top: -150px;
}

/* Icon bottom */
.wp-site-blocks .wp-block-group .icon-bottom{
	position:absolute;
	right:0px;
	bottom:-270px;
}

/********** 10. Social Share Links Styling **********/
/* Styles for social media sharing links, ensuring they are appropriately spaced and visually appealing */

/* Fixes border radious */
.wp-block-outermost-social-sharing-link {
    border-radius: 4px!important;
    transition: transform .3s ease!important;
}

.wp-block-outermost-social-sharing {
    flex-wrap: wrap!important;
}

.wp-block-outermost-social-sharing.is-style-pill-shape .outermost-social-sharing-link a {
    padding-left: .8em!important;
    padding-right: .8em!important;
}



/******************** 11. JetFormBuilder Styling ********************/


/* Apply Bootstrap form-control style to text fields only */
.jet-form-builder__field.text-field {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem; /* Standard padding for text fields */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Mimic Bootstrap's focus state for text fields */
.jet-form-builder__field.text-field:focus, .jet-form-builder__field.textarea-field:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--wp--preset--color--base); /* Customize as needed */
    outline: 0;
    box-shadow: 0 0 0 0.25rem #ff713d40; /* Customize as needed */
}

/* Apply Bootstrap form-control style to select fields only */
.jet-form-builder__field.select-field {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem; /* Adjusted padding for custom dropdown arrow */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center; /* Position for the dropdown arrow */
    background-size: 16px 12px; /* Size of the dropdown arrow */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none; /* Key for iOS to remove default arrow */
    -moz-appearance: none;
    appearance: none;
}

/* Mimic Bootstrap's focus state for select fields */
.jet-form-builder__field.select-field:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--wp--preset--color--accent); /* Customize as needed */
    outline: 0;
    box-shadow: 0 0 0 0.25rem #ff713d40; /* Customize as needed */
}



/* Style the required icon */
.jet-form-builder__required {
    color: var(--wp--preset--color--accent);
}



/* Style the radio button itself */
.jet-form-builder-choice--item-control-input {
    accent-color: var(--wp--preset--color--accent); /* Change the selection color */
}



/* Additional styling for when the radio button is checked */
.jet-form-builder-choice--item-control-input:checked {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}


/* Add primary colour variable to radio options */
.jet-form-builder__field-label.for-radio :checked+span::before {
    border-color: var(--wp--preset--color--accent);
    background-color: var(--wp--preset--color--accent);
}

/* Spacing for messages */

.jet-form-builder-message {
    margin: 1rem 0 0 0;
}


/* Styling the textarea field */

.textarea-field {
    /* Bootstrap textarea styles */
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    height: calc(4 * 1.5em + 2 * 0.375rem); /* 4 rows height + padding */
    min-height: calc(4 * 1.5em + 2 * 0.375rem); /* Same as height */
    transition: border-color .3s ease-in-out, box-shadow .15s ease-in-out;
}


/* Styling for Success message */

.jet-form-builder-message--success {
    border: 1px solid var(--bs-primary-border-subtle)!important;
    border-radius: 0.375rem;
    color: var(--bs-primary-text)!important;
    background-color: var(--bs-primary-bg-subtle)!important;
    padding: 1rem;
}

/* Styling for Error Message */

.jet-form-builder-message--error {
    border: 1px solid #F1C0C0;
    border-radius: 0.375rem;
    color: #CF2E2E!important;
    background-color: #F8E0E0!important;
    padding: 1rem;
}

/* Fixes focus visibility to primary colour variable */

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline-color: var(--wp--preset--color--accent) ;
}

.jet-form-builder__action-button {
    width: 100%;
	background-color: var(--wp--preset--color--accent);
    border-radius: .33rem;
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base-2);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
	justify-content: center!important;
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding-top: 0.6rem;
    padding-right: 1rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
    margin-top: 10px;
}

.jet-form-builder__action-button:hover {
	background-color: var(--wp--preset--color--accent-hover);
}



/* Block button link */
.wp-block-button__link{
	justify-content:center!important;
    text-transform: uppercase!important;
}

/* Label Text */
.jet-form-builder__label-text{
    margin-bottom: 5px;
    font-weight: 600;
}

.jet-form-builder__field-wrap.checkradio-wrap {
    margin-bottom: 0px;
}

/********** 12. JetEngine Carosel Styling **********/

.jet-listing-grid__slider .jet-slick-dots li:hover, .jet-listing-grid__slider .jet-slick-dots li.slick-active {
    background: var(--wp--preset--color--accent)!important;
}

.jet-listing-grid__slider .jet-slick-dots li {
    width: 18px;
    height: 6px;
    border-radius: 4px;
    text-indent: -50px;
    overflow: hidden;
    cursor: pointer;
    background: #eee;
    margin: 3px;
}