/*
Theme Name:   Cabinet médico-dentaire Rambrouch 
Description:  Twenty Twenty Five Child Theme
Author:       Sérgio Alves Santos
Website:      www.webdesign.hanko.lu
Template:     twentytwentyfive
Version:      1.0
Year:         2025
*/
/* Global styles =======================================================================================
===================================================================================================== */
:root {
    --teal: #00e9e3;
    --smooth: all .15s ease-in-out;
}
html {
	scroll-behavior: smooth;
}
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}
/* Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Narrow scrollbar */
}
::-webkit-scrollbar-thumb {
    background-color: #999; /* Default color */
    border-radius: 3px; /* Rounded edges */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #666; /* Color on hover */
}
/* Optional: Hide scrollbar track (rail) */
::-webkit-scrollbar-track {
    background: transparent;
}
/* Hide scrollbar arrows in some browsers */
::-webkit-scrollbar-button {
    display: none;
}
strong {
	font-weight: 700;
}
/* Homepage ============================================================================================
===================================================================================================== */
.div-cabinet img {
	width: 100%;
}
.p-present, .p-close {
	margin-bottom: 0;
	cursor: pointer;
    text-decoration: underline;
    display: flex;
    gap: 10px;
    justify-content: center;
}
.p-close {
    margin-top: 55px;
}
.p-present:before, .p-close:before {
        content: '';
        display: block;
        width: 25px;
        min-width: 25px;
        height: 25px;
        min-height: 25px;
        transition: var(--smooth);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.03 28.03'%3E%3Ccircle cx='14.02' cy='14.02' r='12.89' style='fill:none; stroke:%23444444; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3Cline x1='14.02' y1='7.95' x2='14.02' y2='20.08' style='fill:none; stroke:%23444444; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3Cline x1='7.95' y1='14.02' x2='20.08' y2='14.02' style='fill:none; stroke:%23444444; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3C/svg%3E") no-repeat center;
}
.p-close:before {
        transition: var(--smooth);
        transform: rotate(45deg);
}
.swiper-wrapper {
	padding-bottom: 15px;
}
.div-intro {
	background: var(--teal);
	text-align: center;
	height: 100%;
    box-sizing: border-box;
	display: flex;
    align-items: center;
	flex-direction: column;
	h3 {
	  margin-top: 0;
	}
	img {
		width: 100%;
	}
	div {
		padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 201px;
	}
}
.div-bio {
    display: none;
}
.div-bio p:first-of-type {
    margin-top: 0;
}
.swiper-slide.active .div-bio {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 25px 25px 70px 25px;
    background: #fffffff2;
    border: 1px solid #e4e4e4;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
	backdrop-filter: blur(10px);
}
.swiper-pagination-bullet {
    width: 11px !important;
    height: 11px !important;
}
.swiper-pagination-bullet-active {
    background: var(--teal) !important;
}
.swiper {
    padding-bottom: 20px;
}
.swiper-pagination {
    bottom: 0 !important;
    position: relative !important;
}
.swiper:not(.swiper-cabinet) .swiper-slide {
	max-width: 420px;
    position: relative;
}
.wp-block-gmap-gmap-block.gmap-block-8khdz7la {
    margin-bottom: -5px !important;
}
.cell-align-top td {
    vertical-align: top !important;
}
.wp-block-table.is-style-stripes {
    border-bottom: none;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f096;
}
.accordions {
    &>div {
        margin-top: 10px;
    }
    div {
        overflow: hidden;
    }
    h3 {
        margin: 0 -25px !important;
        transition: var(--smooth);
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
    }
    h3:after {
        content: '';
        display: block;
        width: 25px;
        min-width: 25px;
        height: 25px;
        min-height: 25px;
        transition: var(--smooth);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.03 28.03'%3E%3Ccircle cx='14.02' cy='14.02' r='12.89' style='fill:none; stroke:%23666766; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3Cline x1='14.02' y1='7.95' x2='14.02' y2='20.08' style='fill:none; stroke:%23666766; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3Cline x1='7.95' y1='14.02' x2='20.08' y2='14.02' style='fill:none; stroke:%23666766; stroke-linecap:round; stroke-miterlimit:10; stroke-width:2.25px;'/%3E%3C/svg%3E") no-repeat center;
    }
    h3.active {
        background: var(--teal);
    }
    h3.active:after {
        transition: var(--smooth);
        transform: rotate(45deg);
    }
    h3:hover {
        background: var(--teal);
        transition: var(--smooth);
        cursor: pointer;
    }
    h3+div p:first-of-type {
        padding-top: 20px;
    }
    h3+div p:last-of-type {
        padding-bottom: 20px;
    }
    h3+div {
        max-height: 0;    
        margin: 0;
        transition: var(--smooth);
    }
    h3.active+div {
        max-height: 1000px;
        transition: var(--smooth);
    }
}
@media (max-width: 768px) {  
    .menu-button {
        margin: 0 auto !important;
    }
	.desktop-cover {
		background: #f3f3f3;
	}
	.desktop-cover>img {
			display: none !important;
	}
}
@media (min-width: 768px) {
	.mobile-spacer {
		display: none;
	}
}
/* Footer =====================================================*******==================================
===================================================================================================== */
footer p {
    font-size: 1rem !important;
}