/*--------------------------------------------------------------
GLOBAL STYLES (Entire site)
--------------------------------------------------------------*/

/**
 * Global Variables
 */

/* 
:root {
	--global-kb-spacing-xxs: 0.5rem;
	--global-kb-spacing-xs: 1rem;
	--global-kb-spacing-sm: 1.5rem;
	--global-kb-spacing-md: 2rem;
	--global-kb-spacing-lg: 3rem;
	--global-kb-spacing-xl: 4rem;
	--global-kb-spacing-xxl: 5rem;
	--global-kb-spacing-3xl: 6.5rem;
	--global-kb-spacing-4xl: 8rem;
	--global-kb-spacing-5xl: 10rem;
	--custom-font-family: Lora, serif;
}
*/

:root {
	--custom-font-weight-bold: 500;
	--custom-responsive-spacing: clamp(3.5rem, 1.197rem + 4.805vw, 4.5rem); /* vw 767 → 1100 | rem 3.5 → 4.5 */
}


/**
 * Media queries
 */

.hide_all { 
	display: none !important; 
}
@media only screen and (max-width: 478px) { 
	.hide_xs { display: none !important; } 
}
@media only screen and (max-width: 767px) { 
	.hide_sm { display: none !important; } 
}
@media only screen and (min-width: 768px) and (max-width: 1024px) { 
	.hide_md { display: none !important; } 
}
@media only screen and (min-width: 1025px) { 
	.hide_lg { display: none !important; } 
}

/**
 * Kadence Debug
 */

/* Read more links → icons are not aligned vertically */
a.post-more-link {
	display: inline-flex;
	align-items: center;
}

a.post-more-link .kadence-svg-iconset.svg-baseline svg {
	top: initial;
}


/**
 * Tags
 */

strong {
	font-weight: var(--custom-font-weight-bold);
}

.single-content p:not(:last-child),
.entry .single-content ul:not(:last-child), 
.entry .single-content ol:not(:last-child) {
	margin-bottom: 1.2em;
}

.entry .single-content li ul, 
.entry .single-content li ol {
	margin-bottom: 0;
}

::placeholder {
	color: var(--global-palette5);
}


/**
 * Custom classes
 */

@media only screen and (min-width: 768px)
{
	.align-justify :is(p, li) {
		text-align: justify;
	}
}

/* Logo bg decoration (tablets and above) */

.block-decoration {
	position: relative;
}

.block-decoration::after,
#main-footer > .kt-row-column-wrap::after,
#main-banner.banner-posts::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	max-width: 70%;
	z-index: -1;
	opacity: 10%;
}

.block-decoration::after {
	right: -15%;
	width: 391px;
	background: url(https://www.cs-paysage.com/wp-content/uploads/logo-cs-paysage-green-nude.svg) no-repeat 0 95% / contain;
}

#main-banner.banner-posts::after,
#main-footer > .kt-row-column-wrap::after {
	width: 240px;
	background: url(https://www.cs-paysage.com/wp-content/uploads/logo-cs-paysage-white-nude.svg) no-repeat 0 120% / 100% auto;
}

#main-banner.banner-posts::after {
	left: -10%;
	background-position: 0 120%; /* decoration < container height */
}

#main-footer > .kt-row-column-wrap::after {
	left: -3%;
	background-position: 0 -20%; /* decoration > container height */
}

@media only screen and (max-width: 767px)
{
	.block-decoration::after,
	#main-footer > .kt-row-column-wrap::after {
		display: none;
	}
}

/* Lightbox buttons background (Kadence bug → keeps the buttons' linear gradient */

#glightbox-body.glightbox-container :is(.gclose,.gnext,.gprev)  {
	background-image: none;
}

/* Custom Youtube Embed (HTML block to avoid YT suggestions) */

.video-iframe-wrapper {
	& iframe {
		height: 100%;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	&.ratio-16-9 iframe {
		aspect-ratio: 16 / 9;
	}
	&.ratio-4-3 iframe {
		aspect-ratio: 4 / 3;
	}
}


/*--------------------------------------------------------------
HEADER
--------------------------------------------------------------*/

/**
 * Header Top 
 */

/* Logo shrink (Kadence debug) */
#main-header .site-branding img {
	padding: 6px 0;
}


/**
 * Main Menu
 */

/* Menu FadeIn on homepage */
body.home #masthead {
	animation: menuFadeIn 1800ms;
}

@keyframes menuFadeIn {
	0%, 40% { opacity: 0; }
	100% { opacity: 1; }
}


/**
 * Mobile Drawer (Off Canvas)
 */

/* No border required below last item */
#mobile-drawer .mobile-navigation ul li:last-child a {
	border-bottom: none;
}


/**
 * Banners + Logos (Responsive)
 */

#main-banner > .kt-inside-inner-col {
	padding-block: clamp(3.75rem, 1.885rem + 3.891vw, 4.375rem) clamp(4.375rem, 2.51rem + 3.891vw, 5rem); /* vw 767 → 1024 | px (top 60 → 70) (bottom 70 → 80) */
}

#main-banner.banner-responsive-height > .kt-inside-inner-col {
	min-height: clamp(22.5rem, -28.748rem + 106.907vw, 44.75rem); /* vw 767 → 1100 | 360px (430-70) → 716px (816-100) */
	padding-block: 0;
}

#main-banner.banner-responsive-height .logo-lottie {
	height: 70%;
	width: auto;
}

#main-banner.banner-responsive-height .logo-svg {
	height: 65%;
}
#main-banner.banner-responsive-height .logo-svg img {
	height: 100%;
	width: auto;
}

body.single-realisations #main-banner.banner-responsive-height .logo-svg {
	display: none;
}


/*--------------------------------------------------------------
PAGES
--------------------------------------------------------------*/


/*--------------------------------------------------------------
POSTS + Realisations (CPT)
--------------------------------------------------------------*/

/*** Single Posts - Title Bar Margin ***/

body.single #primary .single-entry .entry-header {
	margin-bottom: var(--custom-responsive-spacing);

}

/*** Single Posts - Post content (misc.) ***/

#main .post-dotted-section {
	margin-top: var(--custom-responsive-spacing);
	padding-top: 2.5rem;
	padding-top: calc( var(--custom-responsive-spacing) - 1.5rem);
	border-top: 1px dashed var(--global-palette5);
}

#main .post-section-title {
	font-size: clamp(1.5rem, 1.125rem + 1.667vw, 2rem); /* vw 360 → 840 | rem 1.5 → 2 */
	line-height: 1.2;
	margin-bottom: 1.2em;
}

#main .post-inset {
	--post-inset-color: var(--global-palette1);
	--post-inset-color-bg: #f4f9f5;
	background: var(--post-inset-color-bg);
	border-left: 3px solid var(--post-inset-color);
	border-radius: 0 2px 2px 0;
	padding: 1.4rem 1.6rem;
}

#main .post-inset .title {
	text-transform: uppercase;
	font-size: .9em;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--post-inset-color);
	margin-bottom: .8em;
}

#main .post-inset ul {
	list-style: none;
	padding: 0;
	margin-inline-start: .1em;
}

#main .post-inset li {
	position: relative;
	padding: .2em 0 0 1.5em;
}

#main .post-inset li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--post-inset-color);
	font-weight: 600;
}

/* Override Kadence blockquotes */
#main .post-quote {
	border: 1px solid #ddd;
	border-left: none;
	border-right: none;
	padding: 1.6rem 1.2rem 1.8rem;
	margin: 2.6rem auto;
	max-width: 70ch;
	text-align: center;
}

#main .timeline-item {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: .6rem 1.2rem;
	padding: 1.6em 0 1.8em;
	border-top: 1px solid #eee;
	align-items: start;	
	margin: 0;
}

/*** Single Posts - CTA ***/

#main .single-post-cta {
	background: #f4f9f5;
	border: 1px solid var(--global-palette1);
	border-radius: 3px;
	text-align: center;
	line-height: 1.6;
	margin: calc( var(--custom-responsive-spacing) - 1rem) 0;
	padding: calc( var(--custom-responsive-spacing) - 2rem)  calc( var(--custom-responsive-spacing) - 2rem) calc( var(--custom-responsive-spacing) - 1.5rem);
	overflow: hidden;
}

.single-post-cta.block-decoration::after {
	right: -5%;
	bottom: -20%;
	width: 30%;
	background: url(https://www.cs-paysage.com/wp-content/uploads/logo-cs-paysage-green-nude.svg) no-repeat cover;
	z-index: 0;
}

#main .single-post-cta .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

#main .single-post-cta .title {
	font-size: clamp(1.2rem, 0.825rem + 1.667vw, 1.7rem); /* vw 360 → 840 | rem 1.2 → 1.7 */
	line-height: 1.2;
	text-wrap: balance;
}

#main .single-post-cta .text {
	max-width: 40ch;
}

/*** Single Posts - Related Posts ***/

#main .entry-related {
	margin-top: var(--custom-responsive-spacing);
}

#main .entry-related-inner-content {
	padding-top: var(--global-lg-spacing);
	padding-bottom: var(--global-lg-spacing);
}

#main h2.entry-related-title {
	margin-bottom: 1em;
}

#main .entry-related-carousel .entry.loop-entry {
	height: 100%;
}

#main .entry-related .entry-header {
	margin-bottom: 0.5em;
}

#main .entry-related .splide .splide__pagination {
	bottom: -30px;
}

/*** Realisations Archive Loop ***/

/* More spacing between loop's rows */
#archive-container.grid-cols {
	padding-top: 1rem;
	row-gap: 3.5rem;
}

/* Add SVG logo on the img overlay on hover */
body.post-type-archive #archive-container .kt-image-overlay-color-wrapper { 
	display: flex;
	justify-content: center;
	align-items: center;
}

body.post-type-archive #archive-container .kt-image-overlay-color-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: url(https://www.cs-paysage.com/wp-content/uploads/logo-cs-paysage.svg) no-repeat 50% / auto 70%;
}

/*** Realisations Single - Navigation (prev/next) ***/

.wp-block-post-navigation-wrapper {
	font-size: clamp(0.75rem, 0.6563rem + 0.5vw, 1rem);
	font-weight: normal;
}

.wp-block-post-navigation-wrapper .wp-block-post-navigation-link {
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
	justify-content: flex-start;
	text-align: left;
}

.wp-block-post-navigation-wrapper .wp-block-post-navigation-link.post-navigation-link-next {
	justify-content: flex-end;
	text-align: right;
}

.wp-block-post-navigation-wrapper .wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	font-weight: 300;
}


/*--------------------------------------------------------------
PAGE Partners (CPT Loop)
--------------------------------------------------------------*/

body.page-partenaires .partner-loop > ul > li:not(:last-child) .partner-item {
	border-bottom: 1px solid var(--global-palette1, #3182CE);
}

body.page-partenaires .partner-loop > ul > li .partner-item > div {
	padding-block: 3rem 3.5rem;
}

body.page-partenaires .partner-loop > ul > li:last-child .partner-item > div {
	padding-bottom: 0;
}


/*--------------------------------------------------------------
FOOTER (Element)
--------------------------------------------------------------*/

/**
 * Main Footer
 */

/* Colors */

:is(#footer-contact, #footer-copyright) * {
	--text-color: rgba(255, 255, 255, 0.8);
	color: var(--text-color);
}

:is(#main-footer, #footer-copyright) a {
	transition: all 300ms linear;
	text-decoration: none;
}

:is(#footer-contact, #footer-copyright) a:hover {
	color: rgba(255, 255, 255, 1);
}

/**
 * Footer Copyright
 */

#footer-copyright {
	text-align: center;
	font-size: .85rem;
}

#footer-copyright p {
	margin: 0;
}

#footer-copyright .footer-disclaimer {
	color: var(--text-color);
	font-size: .75rem;
	margin-top: .6rem;
}

#footer-copyright .mentions-wrapper,
#footer-copyright .mentions-wrapper .inline-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	row-gap: 0;
}

#footer-copyright .mentions-wrapper > *:not(:last-child)::after,
#footer-copyright .mentions-wrapper > .inline-wrap > *:not(:last-child)::after {
	content: "\00a0|";
	margin-inline: .5em .8em;
}

@media only screen and (max-width: 767px)
{

	#footer-copyright .mentions-wrapper {
		flex-direction: column;
		row-gap: .5em;
	}
	
	#footer-copyright .mentions-wrapper > *::after {
		display: none;
	}

	#footer-copyright .footer-disclaimer {
		margin-top: 1rem;
	}
}


/**
 * Footer Reviews
 */

#footer-reviews .reviews-wrapper figure {
	width: 100px;
}

#footer-reviews .reviews-wrapper img {
	width: 100%;
	height: auto;
	transition: all 0.4s ease-in-out;
}

#footer-reviews .reviews-wrapper a:hover img {
	filter: drop-shadow(-1px 1px 4px rgba(0, 38, 5, 1));
	transform: scale(1.05);
}


/**
 * [Tools] After / Before Image Comparison
 */

:root {
	--slider-handler-color: white;
	--arrow-color: #5D5D5D;
	--slider-line-width: 3px;
	--slider-button-size: 34px;
	--arrow-border-width: 6px;
}

.before-after {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.before-after .image-before,
.before-after .image-after {
	display: block;
	width: 100%;
	margin: 0 !important;
}

.before-after .image-after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0 0 0 50%);
}

.before-after .slider {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: ew-resize;
	z-index: 2;
}

.before-after .slider::-webkit-slider-thumb,
.before-after .slider::-moz-range-thumb {
	width: 0;
	height: 0;
	background: transparent;
	border: none;
	cursor: ew-resize;
}

.before-after .slider-line {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: var(--slider-line-width);
	background: var(--slider-handler-color);
	transform: translateX(-50%);
	cursor: ew-resize;
	pointer-events: auto; /* Make line interactive */
	z-index: 1;
}

.before-after .slider-button {
	position: absolute;
	width: var(--slider-button-size);
	height: var(--slider-button-size);
	border-radius: 50%;
	background: var(--slider-handler-color);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	cursor: ew-resize;
	pointer-events: none; /* Make button interactive */
	z-index: 3;
}

.before-after .slider-button::before,
.before-after .slider-button::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-width: var(--arrow-border-width);
	border-style: solid;
	border-color: transparent;
}

.before-after .slider-button::before {
	border-right-color: var(--arrow-color);
}

.before-after .slider-button::after {
	border-left-color: var(--arrow-color);
}


/**
 * Complianz Cookies
 */

#cmplz-cookiebanner-container  {
	font-weight: 400;
}
#cmplz-cookiebanner-container .cmplz-header,
#cmplz-cookiebanner-container .cmplz-divider {
	display: none;
}
#cmplz-cookiebanner-container .cmplz-message {
	text-align: center;
}
#cmplz-cookiebanner-container p {
	margin: 0;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
	background-image: none; /* Kadence debug button style gradient */
	padding: .4em .8em;
	line-height: 1.3;
	font-size: 12px;
	font-weight: normal;
	text-transform: none;
	height: auto;
}
@media only screen and (max-width: 767px)
{
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept {
		padding-block: .8em;
	}
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept {} 
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny {}
#cmplz-cookiebanner-container .cmplz-links {
	margin-top: .3rem;
}
#cmplz-cookiebanner-container .cmplz-links a:not(:hover, :active, :focus) {
	text-decoration: none;
}