/*
Theme Name: Windy City Web Solutions 
Theme URI: https://windycitywebsolutions.com
Description: Custom Divi child theme developed by Windy City Web Solutions.
Author: Windy City Web Solutions
Author URI: https://windycitywebsolutions.com
Template: Divi
Version: 1.0.0
*/


/**
 * ================================================================
 * STYLE.CSS — CUSTOM THEME STYLES
 * ================================================================
 * TABLE OF CONTENTS
 * 1. CUSTOM LINE WRAP
 * 2. IMAGE HOVER STYLES
 *    2.1 Standard Image Hover
 *    2.2 Image Hover (Small Text)
 * 3. IMAGE WRAP STYLES
 * 4. PASSWORD PROTECT PAGES (BRANDED)
 * 5. OVERLAY STYLES
 * 6. TESTIMONIAL GROUP CAROUSEL STYLES
 * ================================================================
 */




/* ===================== 1. CUSTOM LINE WRAP ===================== */

/* Body copy: clean up single-word last lines (orphans). Cheap; touches only the tail. */
.et_pb_text p,
.et_pb_text li,
article.post-password-required .et_password_protected_form p {
    text-wrap: pretty;
}

/* Headings: balance lines so a heading never strands one word alone. Short blocks only. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}




/* ===================== 2. IMAGE HOVER STYLES ===================== */

/* 2.1 STANDARD IMAGE HOVER */
/****** Image Hover ******/
.image-hover.et_pb_image .et_pb_image_wrap::before {
content: var(--ih-label, "Learn More"); /* default fallback */
font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: .25px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.65);
color: #fff;	
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
inset: 0;
/* allow wrapping */
box-sizing: border-box;
padding: 8px 12px;
text-align: center;
line-height: 1.1em;
white-space: normal;     
word-break: break-word; 

}

.image-hover.et_pb_image,
.image-hover.et_pb_image:hover,
.image-hover.et_pb_image:focus-within {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: none !important;
}
.image-hover.et_pb_image .et_pb_image_wrap { position: relative; display:block; overflow:hidden; }
.image-hover.et_pb_image .et_pb_image_wrap img { display:block; width:100%; height:auto; }
/* Show overlay */
.image-hover.et_pb_image:hover .et_pb_image_wrap::before,
.image-hover.et_pb_image .et_pb_image_wrap:hover::before,
.image-hover.et_pb_image:focus-within .et_pb_image_wrap::before { opacity:1; }
/* Focus ring */
.image-hover.et_pb_image a:focus-visible { outline:2px solid #7cb3fb; outline-offset:4px; }

.image-hover.et_pb_image:hover,
.image-hover.et_pb_image:focus-within {
  transform: translateY(-2px);
}


/* 2.2 IMAGE HOVER – SMALL TEXT */
/****** Image Hover ******/
.image-hover-small-text.et_pb_image .et_pb_image_wrap::before {
content: var(--ih-label, "Learn More"); /* default fallback */
font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.65);
color: #fff;	
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
inset: 0;
/* allow wrapping */
box-sizing: border-box;
padding: 8px 12px;
text-align: center;
line-height: 1.1em;
white-space: normal;     
word-break: break-word; 
}

.image-hover-small-text.et_pb_image,
.image-hover-small-text.et_pb_image:hover,
.image-hover-small-text.et_pb_image:focus-within {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: none !important;
}
.image-hover-small-text.et_pb_image .et_pb_image_wrap { position: relative; display:block; overflow:hidden; }
.image-hover-small-text.et_pb_image .et_pb_image_wrap img { display:block; width:100%; height:auto; }
/* Show overlay */
.image-hover-small-text.et_pb_image:hover .et_pb_image_wrap::before,
.image-hover-small-text.et_pb_image .et_pb_image_wrap:hover::before,
.image-hover-small-text.et_pb_image:focus-within .et_pb_image_wrap::before { opacity:1; }
/* Focus ring */
.image-hover-small-text.et_pb_image a:focus-visible { outline:2px solid #7cb3fb; outline-offset:4px; }

.image-hover-small-text.et_pb_image:hover,
.image-hover-small-text.et_pb_image:focus-within {
  transform: translateY(-2px);
}







/* ===================== 3. IMAGE WRAP STYLES ===================== */


/* 1. THE KILLER SWITCH: 
   If a column contains a wrap class, we MUST disable Divi's Flexbox 
*/
.et_pb_column:has(.imagewrap-left), 
.et_pb_column:has(.imagewrap-right) {
    display: block !important;
}

/* 2. MODULE OVERRIDE: 
   Divi 5 modules are flex by default. We need them to be block to flow.
*/
.imagewrap-left, 
.imagewrap-right,
.et_pb_column:has(.imagewrap-left) .et_pb_text,
.et_pb_column:has(.imagewrap-right) .et_pb_text {
    display: block !important;
}

/* 3.1 IMAGE WRAP LEFT – DESKTOP */
.imagewrap-left {
    float: left !important;
    max-width: 500px;
    width: 100%;
    margin: 0 2.5rem 1.5rem 0 !important;
}

/* 3.2 IMAGE WRAP RIGHT – DESKTOP */
.imagewrap-right {
    float: right !important;
    max-width: 500px;
    width: 100%;
    margin: 0 0 2.5rem 2.5rem !important;
}

/* Ensure image respects container */
.imagewrap-left img, .imagewrap-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3.3 TABLET & MOBILE STACKING (Below 1250px) */
@media (max-width: 1250px) {
    .imagewrap-left, 
    .imagewrap-right {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 2rem 0 !important;
    }
    
    /* Reset the column back to normal flow on mobile */
    .et_pb_column:has(.imagewrap-left), 
    .et_pb_column:has(.imagewrap-right) {
        display: flex !important;
        flex-direction: column !important;
    }
}



/* ===================== 4. PASSWORD PROTECT PAGES (BRANDED) ===================== */

/* 1) Universal layout shield: Hides all headers, footers, mobile hamburger panels, and alert bars universally */
body:has(.post-password-required) .et-l--header,
body:has(.post-password-required) .et-l--footer,
body:has(.post-password-required) .wcws-bottom-bar,
body:has(.post-password-required) #top-header {
    display: none !important;
}

/* 1b) Prevent horizontal layout tracking overflow */
body:has(.post-password-required) html,
body:has(.post-password-required) body,
body:has(.post-password-required) #page-container,
body:has(.post-password-required) #et-main-area,
body:has(.post-password-required) #main-content,
article.post-password-required,
article.post-password-required .entry-content,
article.post-password-required .et_password_protected_form {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* 1c) FIX BACKGROUND SPLIT: Forces the outer sections and body viewport context to match your gray color */
body:has(.post-password-required),
body:has(.post-password-required) #page-container,
body:has(.post-password-required) #main-content,
body:has(.post-password-required) .et_pb_section,
body:has(.post-password-required) .et_pb_row {
    background-color: #f5f7fa !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Perfect vertical workspace flex centering */
body:has(.post-password-required) #main-content {
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2) FIXED SELECTORS: Breaks out of Divi 5 horizontal compression by targeting the article tag directly */
article.post-password-required,
article.post-password-required .entry-content,
article.post-password-required .et-l--post,
article.post-password-required .et_builder_inner_content,
article.post-password-required .et_pb_row,
article.post-password-required .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
}

article.post-password-required .et_pb_section {
    padding: 0 !important;
}

/* 3) Form Container Card - Set to your exact width, border-radius, and top padding specifications */
article.post-password-required .et_password_protected_form {
    display: block !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 640px !important; /* Locks width limits to widescreen format card settings */
    margin: 0 auto 4rem !important;
    padding: 3.5rem 2.5rem !important; 
    background: #ffffff !important;
    border: 1px solid rgba(2, 47, 108, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(4, 29, 69, 0.08) !important;
    box-sizing: border-box !important;
}

/* 3b) Top Navigation Link Wrapper */
.wcws-pw-top-nav {
    text-align: left !important;
    margin-bottom: 2rem !important;
    border-bottom: 1px solid #eeeeee !important;
    padding-bottom: 1.25rem !important;
    width: 100% !important;
    display: block !important;
}

.wcws-pw-top-nav a.wcws-back-home {
    color: #5183bf !important; /* Master Agency Blue Accent */
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease;
    display: inline-block !important;
}

.wcws-pw-top-nav a.wcws-back-home:hover {
    color: #022f6c !important;
}

/* 4) Typography Rules - Set to your custom 1.1 line-height values */
article.post-password-required .et_password_protected_form h1 {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    color: #022f6c !important;
    margin: 0 0 0 0 !important;
    letter-spacing: 0px !important;
    text-align: left !important;
}

article.post-password-required .et_password_protected_form p,
article.post-password-required .et_password_protected_form label {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    color: #222222 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important; /* Implements your requested tight line-height constraints */
    text-align: left !important;
}

article.post-password-required .et_password_protected_form label {
    display: block !important;
    font-weight: 600 !important;
    color: #022f6c !important;
    margin-bottom: 0rem !important; /* Applies absolute zero baseline padding spacing selection */
}

/* Resets theme margins inside the form layout framework */
article.post-password-required .et_password_protected_form form p {
    margin: 0 !important;
    padding: 0 !important;
}

article.post-password-required .et_password_protected_form .wcws-password-field-row {
    margin-bottom: 0.5rem !important;
}

/* 5) Password Input Field Alignment tracking */
article.post-password-required .et_password_protected_form input[type="password"] {
    width: 100% !important;
    padding: 16px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(2, 47, 108, 0.2) !important;
    background: #f9fbfc !important;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 1rem !important;
    color: #222222 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin-top: 0 !important; /* Balanced gap spacing below 0-margin text headers */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

article.post-password-required .et_password_protected_form input[type="password"]:focus {
    border-color: #022f6c !important;
    box-shadow: 0 0 0 4px rgba(2, 47, 108, 0.1) !important;
    background: #ffffff !important;
}

/* 6) Submit Action Alignment Row Context */
article.post-password-required .et_password_protected_form .wcws-submit-row {
    text-align: right !important;
    margin: 0.5rem 0 0 0 !important; /* Grants spacing tracking balance inside your card container */
    display: block !important;
    clear: both !important;
}

article.post-password-required .et_password_protected_form .et_pb_button:after,
article.post-password-required .et_password_protected_form button:after {
    display: none !important;
    content: none !important;
}

article.post-password-required .et_password_protected_form .et_pb_button,
article.post-password-required .et_password_protected_form button.et_submit_button {
    background-color: #022f6c !important; /* Fixed Windy City Branded Blue */
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    letter-spacing: .25px !important;
    line-height: 2em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.3em 2em !important;
    border-radius: 50px !important;
    border-width: 0px !important;
    cursor: pointer;
    float: left !important; 
    transition: background-color 300ms ease, transform 200ms ease !important;
    text-transform: none !important;
}

article.post-password-required .et_password_protected_form .et_pb_button:hover,
article.post-password-required .et_password_protected_form button.et_submit_button:hover {
  background-color: #5183bf !important; /* Fixed Windy City Dark Blue Hover */
    transform: translateY(-1px);
}

@media only screen and (max-width: 479px) {
    article.post-password-required .et_password_protected_form button.et_submit_button {
        float: none !important;
        width: 100% !important;
    }
}





/* ===================== 5. OVERLAY STYLES ===================== */

/* 1) The full-screen curtain - Default state (Hidden & Non-blocking) */
.wcws-entry-modal-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999999 !important;
    background: rgba(0, 0, 0, 0.75) !important; 
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    
    /* Center the content */
    display: none; 
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;

    /* CRITICAL: This allows clicks to "pass through" to the form below */
    pointer-events: none; 
    visibility: hidden;
}

/* 2) Active state - Triggered by JS */
.wcws-entry-modal-bg.entry-is-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Re-enable clicks so the popup buttons work */
    pointer-events: auto !important; 
}







/**
 * ===================== 6. TESTIMONIAL GROUP CAROUSEL STYLES =====================
 */

/* 1. Base State: Instantly reset hidden slides to the right */
.wcws-testimonial-carousel-1 .et_pb_group_carousel_slide .et_pb_group {
    opacity: 0 !important;
    visibility: hidden;
    transform: translate3d(50px, 0, 0) !important;
    transition: none !important;
    backface-visibility: hidden;
}

/* 2. EXIT State: Immediate Slide-Left & Fade-Out */
.wcws-testimonial-carousel-1 .et_pb_group_carousel_slide:not(.et_pb_group_carousel_slide_active) .et_pb_group {
    opacity: 0 !important;
    visibility: visible;
    transform: translate3d(-50px, 0, 0) !important;
    transition: all 400ms cubic-bezier(0.47, 0, 0.745, 0.715) !important;
}

/* 3. ENTRY State: Delayed Glide-In from the Right */
.wcws-testimonial-carousel-1 .et_pb_group_carousel_slide_active .et_pb_group {
    opacity: 1 !important;
    visibility: visible;
    transform: translate3d(0, 0, 0) !important;
    /* 200ms stagger delay ensures the stage is cleared */
    transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms !important;
}

/* 4. Maintenance: Prevent loop clones from re-animating */
.wcws-testimonial-carousel-1 .et_pb_group_carousel_clone .et_pb_group {
    transition: none !important;
}