/*
Theme Name: Renovation
Theme URI: https://zen.studio/
Author: Zen Studio
Author URI: https://zen.studio/
Description: Theme developped for G Renovation by Zen Studio
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: renov
Tags: Renovation appartement, Demolition Paris, Gravats
*/
html{scroll-behavior: smooth}
header{z-index:9999 !important;width:100%;background:#fff;}
footer{margin-block-start: 0;}
.solar-solutions .wp-block-getwid-megamenu-item{padding-top:8px;padding-bottom:10px;font-size:16px;}
.solar-solutions a{text-decoration:none;text-transform:uppercase;}
.gform_button{text-transform:uppercase;border:2px solid #fff !important;}
body p, h1, h2, h3{word-break: keep-all !important;}
a{text-decoration:none;}
ul{padding-inline-start: 12px !important;}

.gw-mm-item__dropdown {
    background: transparent !important;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
    padding: 45px 0 0 0 !important;
}

@media (min-width:961px) {
header{position:fixed;top:0;}
.contact-mobile{display:none;}
.contact-form{min-width:440px;}
.contact-us-button{background-color:#df5935;margin-left:40px !important;}
.contact-us-button .gw-mm-item__link.has-text-color a{color:#fff;font-family:"NatFoodBold"}
}
@media (max-width:960px) {
header{position:relative;}
.contenu-travaux{margin-top:-120px !important;}
.redesign{flex-direction: column-reverse;}
.wpml-ls-legacy-list-horizontal{display:none}
.langs .wpml-ls-legacy-list-horizontal{display:block}
.contact-pc{display:none}
.langs .gw-mm-item__dropdown-wrapper {
    overflow: visible !important;
    height: auto;
}
.gw-mm-item .gw-mm-item__toggle{width:82px;}
button.gw-mm__toggle{background:transparent;color:#111;border:none;font-size:11px;margin-top:10px;}
span.dashicons-menu {
display:block;
}
.dashicons-menu:before {
font-size:38px;
}
button.gw-mm__toggle .dashicons{width:40px; height:35px;}
.wp-block-site-logo{max-width:400px}
.solar-video{margin-top:-100px !important;}
.redesign{flex-direction: column-reverse;}
.parallax-divider-image {
top: -40px;
max-width:100px;
  }
.white-label{background-color:rgb(255,255,255,.4);padding:1rem;}
}

/* Solar Details */
/* Define common transition properties for smoother animations */
:root {
    --solar-details-transition-duration: 0.5s; /* General slide duration for full overlay and expander max-height */
    --solar-details-transition-timing: ease-in-out; /* Easing function for movement */
    --solar-details-fade-duration: 0.3s; /* Shorter duration for fading elements (H3, new content opacity) */
    --solar-details-fade-timing: ease-out;

    /* Delays for sequential animation on EXPAND (mouse enter / click) */
    --h3-fade-out-delay: 0s;                  /* H3 fades immediately */
    --initial-bg-fade-out-delay: 0s;          /* Initial background fades immediately */
    --full-overlay-slide-up-delay: 0s;        /* Full overlay slides immediately (starts at 0s, finishes at 0.5s) */
    --new-content-slide-up-delay: 0.3s;       /* UPDATED: New content appears 0.3 seconds after full overlay starts */
    
    /* Delays for sequential animation on COLLAPSE (mouse leave / click outside) */
    --new-content-fade-out-delay: 0s;         /* New content fades immediately */
    --full-overlay-slide-down-delay: 0.2s;    /* Full overlay slides down after 0.2s delay */
    --h3-fade-in-delay: 0.5s;                 /* H3 reappears after 0.5s delay */
    --initial-bg-fade-in-delay: 0.5s;         /* Initial background reappears after 0.5s delay */

    /* Overlay initial position */
    --solar-details-overlay-hidden-offset: 100%; /* Pushes full overlay completely below cover */

    /* Variables for content heights (set by JS) */
    --solar-details-initial-content-height: 100%; /* Fallback for H3 height + padding */
    --solar-details-full-content-height: 500px; /* Fallback for full expander height */
}

/* Ensure the main cover block is a positioning context */
.wp-block-cover.solar-details {
    position: relative;
    overflow: hidden; /* Crucial for clipping sliding elements */
    min-height: 250px; /* Ensure a minimum height for the cover block */
    padding: 0 !important; /* Override default Gutenberg padding */
    cursor: pointer; /* Indicate interactivity */
}

/* --- FULL SLIDING OVERLAY (::before on cover block) --- */
/* This is the dark, full-height overlay that slides up on hover */
.wp-block-cover.solar-details::before {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 100%; /* Will occupy full height when slid up */
    background: rgba(190, 170, 140, 0.8); /* Opaque blue overlay */
    
    /* Initial state (collapsed): hidden below the cover */
    transform: translateY(var(--solar-details-overlay-hidden-offset)); 
    opacity: 0;
    visibility: hidden; /* Hidden until expanded */
    
    z-index: 2; /* Below content, above cover image */
    
    /* Transition for full overlay on collapse: slides down and fades out */
    transition: transform var(--solar-details-transition-duration) var(--solar-details-transition-timing) var(--full-overlay-slide-down-delay),
                opacity var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--full-overlay-slide-down-delay),
                visibility 0s linear calc(var(--full-overlay-slide-down-delay) + var(--solar-details-fade-duration)); /* Hide after animation */
}

/* Ensure inner container has correct positioning and no extra padding/background */
.wp-block-cover.solar-details .wp-block-cover__inner-container {
    position: absolute; /* Take out of flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill the cover block */
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    z-index: 3; /* Above all overlays */
}

/* --- MAIN CONTENT EXPANDER (Group block) --- */
.wp-block-cover.solar-details .solar-details-content-expander {
    position: absolute !important;
    bottom: 0; 
    left: 0;
	right:0;
    width: 100%;
    color: #fff;
    padding: 40px; /* Padding for content inside the expander */
    box-sizing: border-box;
    
    /* Collapsed state: clips content to H3 height, H3 visible at bottom */
    max-height: var(--solar-details-initial-content-height); /* Set by JS to H3 height + padding */
    overflow: hidden; /* Crucial for clipping hidden content */
    background: rgba(190, 170, 140, 0.8); /* Initial subtle overlay background */
    
    /* Ensure the expander is always visible, overriding any default hidden classes */
    opacity: 1 !important;    
    visibility: visible !important; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns H3 to the bottom */
    align-items: flex-start;
    text-align: left;

    /* Transition for content expander on collapse: for max-height and background */
    transition: max-height var(--solar-details-transition-duration) var(--solar-details-transition-timing) var(--new-content-fade-out-delay),
                background-color var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--initial-bg-fade-in-delay);
}

/* --- H3 Title Wrapper (ALWAYS within expander) --- */
.wp-block-cover.solar-details .solar-details-content-expander .solar-details-title-wrapper {
    width: 100%; /* Ensure it takes full width */
}

.wp-block-cover.solar-details .solar-details-content-expander .solar-details-title {
    color: #fff;
    margin-top: 0; 
    margin-bottom: 0; /* Important: remove default margins to keep height precise */
    font-size: 1.1em; /* Adjust as needed */
    line-height: 1.2;
    text-align: left;
	text-transform:uppercase;
    
    /* Collapsed State: fully visible */
    opacity: 1 !important; 
    visibility: visible !important;
    
    /* Transition on collapse: fade back in after full overlay slides down */
    transition: opacity var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--h3-fade-in-delay),
                visibility 0s linear calc(var(--h3-fade-in-delay) + var(--solar-details-fade-duration));
}

/* --- ALL OTHER CONTENT (Paragraphs, Buttons, etc. - initially hidden) --- */
.wp-block-cover.solar-details .solar-details-content-expander > *:not(.solar-details-title-wrapper) {
    width: 100%;
    margin-top: 0.5em; /* Default margin for appearing content */
    margin-bottom: 0.5em; 
    color: #fff;
    text-align: left;

    /* Initially hidden when collapsed */
    max-height: 0; /* Collapsed height */
    opacity: 0;
    visibility: hidden;
    overflow: hidden; /* Hide overflow when collapsed */
    
    /* NEW: Start slightly below their final position to enable slide-up effect */
    transform: translateY(20px); /* Adjust this value for how far down they start */
    
    /* Transition on collapse: fade out immediately and slide down */
    transition: max-height 0.3s ease-out var(--new-content-fade-out-delay),
                opacity 0.3s ease-out var(--new-content-fade-out-delay),
                transform 0.3s ease-out var(--new-content-fade-out-delay), /* Include transform in transition */
                visibility 0s linear calc(var(--new-content-fade-out-delay) + 0.3s); /* Hide after fade */
}
/* Ensure the last child has no bottom margin to avoid extra space */
.wp-block-cover.solar-details .solar-details-content-expander > *:last-child {
    margin-bottom: 0;
}


/* Adjust button styling for new content */
.wp-block-cover.solar-details .solar-details-content-expander .wp-block-button {
    margin-top: 1em;
    display: block;
    text-align: left;
}
.wp-block-cover.solar-details .solar-details-content-expander .wp-block-button__link {
    background-color: transparent; /* No background, border from parent */
    border: 2px solid #fff; /* White border */
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wp-block-cover.solar-details .solar-details-content-expander .wp-block-button__link:hover {
    background-color: #fff;
    color: #232d3b !important; /* Dark text on hover */
}


/* --- Expanded State (on .is-expanded) --- */

/* Full sliding overlay slides up */
.wp-block-cover.solar-details.is-expanded::before {
    transform: translateY(0); /* Slides up to fill the cover */
    opacity: 1; /* Fully visible */
    visibility: visible; /* Show immediately */
    
    /* Transition for full overlay on expand: starts immediately */
    transition: transform var(--solar-details-transition-duration) var(--solar-details-transition-timing) var(--full-overlay-slide-up-delay),
                opacity var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--full-overlay-slide-up-delay),
                visibility 0s linear var(--full-overlay-slide-up-delay);
}

/* Content expander changes height and background, aligns content to top */
.wp-block-cover.solar-details.is-expanded .solar-details-content-expander {
    max-height: var(--solar-details-full-content-height); /* Expands to full content height */
    overflow: visible; /* Allow content to be fully visible */
    background: transparent; /* Initial overlay background fades out */
    
    justify-content: flex-start; /* Aligns content to the top when expanded */

    /* Transition for content expander on expand: for max-height and background */
    transition: max-height var(--solar-details-transition-duration) var(--solar-details-transition-timing) var(--full-overlay-slide-up-delay),
                background-color var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--initial-bg-fade-out-delay);
}

/* H3 title disappears */
.wp-block-cover.solar-details.is-expanded .solar-details-content-expander .solar-details-title-wrapper {
    opacity: 0 !important; /* Fade out */
    visibility: hidden !important; /* Hide */
    max-height: 0 !important; /* Collapse height */
    
    /* Transition on expand: fade out immediately */
    transition: opacity var(--solar-details-fade-duration) var(--solar-details-fade-timing) var(--h3-fade-out-delay),
                max-height 0.8s ease-out var(--h3-fade-out-delay),
                visibility 0s linear calc(var(--h3-fade-out-delay) + var(--solar-details-fade-duration));
}

/* All other content appears and slides up */
.wp-block-cover.solar-details.is-expanded .solar-details-content-expander > *:not(.solar-details-title-wrapper) {
    max-height: 500px; /* Large enough to show all content. Adjust if needed. */
    opacity: 1; /* Fully visible */
    visibility: visible; /* Show immediately */
    overflow: visible; /* Allow content to be fully visible */
    
    /* NEW: Slide to their final position (no offset) */
    transform: translateY(0);
    
    /* Transition on expand: slide/fade in after the new 0.3s delay */
    transition: max-height 0.3s ease-out var(--new-content-slide-up-delay),
                opacity 0.3s ease-out var(--new-content-slide-up-delay),
                transform 0.3s ease-out var(--new-content-slide-up-delay), /* Include transform in transition */
                visibility 0s linear var(--new-content-slide-up-delay);
}


/* Mobile Responsiveness */
@media (max-width: 960px) {
    .wp-block-cover.solar-details .solar-details-content-expander .solar-details-title {
        font-size: 1.25em;
    }
    /* On mobile, tap to toggle. Cursor indicates it's interactive. */
    .wp-block-cover.solar-details {
        cursor: pointer;
    }
}
/* --- EDITOR-SPECIFIC OVERRIDES for Solar Details Cover Block --- */
/* These styles will only apply when editing in the WordPress Gutenberg editor,
   forcing the block to be expanded for easy content editing. */

body.block-editor-page .wp-block-cover.solar-details,
body.wp-admin .wp-block-cover.solar-details {
    /* Prevent any unwanted cursor changes or interactive effects in the editor */
    cursor: default !important;
    pointer-events: auto !important; /* Ensure elements are clickable for editing */
}

/* Force the content expander to show its full height and content */
body.block-editor-page .wp-block-cover.solar-details .solar-details-content-expander,
body.wp-admin .wp-block-cover.solar-details .solar-details-content-expander {
    max-height: var(--solar-details-full-content-height) !important; /* Force full height */
    overflow: visible !important; /* Ensure content is not clipped */
    background: rgba(10, 80, 160, 0.7) !important; /* Keep the initial subtle background for clarity in editor */
    justify-content: flex-start !important; /* Align content to top */
    transition: none !important; /* Disable transitions in editor to prevent animation during editing */
}

/* Ensure the full sliding overlay (::before pseudo-element) is hidden in the editor,
   so it doesn't obstruct the content for editing. */
body.block-editor-page .wp-block-cover.solar-details::before,
body.wp-admin .wp-block-cover.solar-details::before {
    transform: translateY(var(--solar-details-overlay-hidden-offset)) !important; /* Keep it off-screen */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important; /* Disable transitions */
}

/* Keep the H3 title always visible and in its initial position in the editor.
   Normally, it would disappear on expanded state. */
body.block-editor-page .wp-block-cover.solar-details .solar-details-content-expander .solar-details-title-wrapper,
body.wp-admin .wp-block-cover.solar-details .solar-details-content-expander .solar-details-title-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important; /* Allow natural height */
    transform: translateY(0) !important; /* Ensure it's not moved */
    transition: none !important; /* Disable transitions */
}

/* Force all other content blocks to be visible and in their final position in the editor. */
body.block-editor-page .wp-block-cover.solar-details .solar-details-content-expander > *:not(.solar-details-title-wrapper),
body.wp-admin .wp-block-cover.solar-details .solar-details-content-expander > *:not(.solar-details-title-wrapper) {
    max-height: 500px !important; /* Use a value large enough to show all content, or 'none' if preferred */
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important; /* Ensure content is not clipped */
    transform: translateY(0) !important; /* Ensure they are in their final position */
    transition: none !important; /* Disable transitions in editor */
}