/* Masque le H1 du header thème sur les articles Blog Gutenberg (géré par le pattern article-header) */
.has-blog-gutenberg-layout header h1 {
    display: none;
}

/* Variables */

:root{

    /* Colors */
    --main: #012830;
    --secondary: #99c555;
    --blue:#009ebd;
    /* Dérivées automatiquement via color-mix() — s'adaptent si --secondary change */
    --secondaryFade: color-mix(in srgb, var(--secondary) 15%, transparent);
    --secondaryFadeLighter: color-mix(in srgb, var(--secondary) 20%, transparent);
    --dark-main: #012830;
    --textColor: #012830;
    --white: #ffffff;

    /* Radius */
    --commonRadius: 1rem;
    --imgRadius: 2rem;
    /* Button styles */
    --btnBg: #012830;
    --btnColor: #ffffff;
    --btnRadius: 2rem;
    --btnHoverBg: var(--secondary);
    --btnHoverColor: var(--white);

    /* Share button styles */
    --shareBtnBorder: var(--blue);
    --shareBtnColor: var(--white);
    --shareBtnBg: var(--blue);
    --shareBtnHoverBg: var(--main);
    --shareBtnHoverColor: var(--blue);

    /* Rating system */
    --starFill : #ffb400;
    --starEmpty : #cbcbcb;
    --error: #ff4d4f;

    /* Icons */
    --tagIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS10YWdzLWljb24gbHVjaWRlLXRhZ3MiPjxwYXRoIGQ9Ik0xMy4xNzIgMmEyIDIgMCAwIDEgMS40MTQuNTg2bDYuNzEgNi43MWEyLjQgMi40IDAgMCAxIDAgMy40MDhsLTQuNTkyIDQuNTkyYTIuNCAyLjQgMCAwIDEtMy40MDggMGwtNi43MS02LjcxQTIgMiAwIDAgMSA2IDkuMTcyVjNhMSAxIDAgMCAxIDEtMXoiLz48cGF0aCBkPSJNMiA3djYuMTcyYTIgMiAwIDAgMCAuNTg2IDEuNDE0bDYuNzEgNi43MWEyLjQgMi40IDAgMCAwIDMuMTkxLjE5MyIvPjxjaXJjbGUgY3g9IjEwLjUiIGN5PSI2LjUiIHI9Ii41IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=');
    --moveIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tb3ZlLXJpZ2h0LWljb24gbHVjaWRlLW1vdmUtcmlnaHQiPjxwYXRoIGQ9Ik0xOCA4TDIyIDEyTDE4IDE2Ii8+PHBhdGggZD0iTTIgMTJIMjIiLz48L3N2Zz4=');
    --accordonIcon : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1saXN0LWNoZXZyb25zLXVwLWRvd24taWNvbiBsdWNpZGUtbGlzdC1jaGV2cm9ucy11cC1kb3duIj48cGF0aCBkPSJNMyA1aDgiLz48cGF0aCBkPSJNMyAxMmg4Ii8+PHBhdGggZD0iTTMgMTloOCIvPjxwYXRoIGQ9Im0xNSA4IDMtMyAzIDMiLz48cGF0aCBkPSJtMTUgMTYgMyAzIDMtMyIvPjwvc3ZnPg==');
}

:where(.is-layout-flex) {
    gap:.5em;
}

html {
    scroll-padding-top: var(--bg-header-offset, 110px);
}

body .is-layout-flex {
    display:flex;flex-wrap:wrap;align-items:center;
    &  > :is(*, div) {
        margin:0;
    }
}

/* Décalage des ancres h2/h3/h4 pour compenser le menu sticky.
   scroll-margin-top s'applique à l'élément cible, quelle que soit
   la méthode de scroll (JS window.scrollTo, lien natif, URL hash). */
h2[id], h3[id], h4[id] {
    scroll-margin-top: var(--bg-header-offset, 110px);
}

@keyframes bounceIt {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(3px)
    }

    100% {
        transform: translateX(0)
    }
}
.wp-block-list {
    margin-left: 0;
    margin-bottom: 1.25rem;
    list-style: disc;
    & li{
        margin: .4rem 0;
    }
}
.bg-blog-article{
    & p{
        margin-bottom: 1.25rem;
        & a{
            color: inherit;
            text-decoration: underline;
        }
    }
}

h1, h2, h3, h4, h5{
    font-weight: 600;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}
h1{
    font-size: 2.5rem;
}
h2{
    font-size: 1.8rem;
}
h3{
    font-size: 1.4rem;
    text-transform: initial;
    letter-spacing: 0;
}
h4{
    font-size: 1.1rem;
    text-transform: initial;
}
h5{
    font-size: 1rem;
    text-transform: initial;
}
.has-large-font-size{
    font-size: 1.8rem !important;
    font-weight: 600;
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}
.has-medium-font-size{
    font-size: 1.4rem !important;
    font-weight: 600;
    line-height: 1.2;
}
.wp-block-image{
    margin: 1rem 0;
    & img{
        border-radius: var(--imgRadius);
    }
}
.wp-block-media-text{
    margin: 2rem 0;
    & img{
        border-radius: var(--imgRadius);
    }
}
.wp-block-list{
    padding-left: 1rem;
}
.wp-block-table{
    margin: 2rem 0;
    max-width: 100%;
    & strong{
        font-weight: bolder;
    }
    & table{
        border-collapse: separate;
        border-color: transparent;
        border-spacing: 10px;
    }
    & thead{
        font-weight: 600;
        border-bottom-width: 1px;
        & th{
            background-color: var(--secondaryFadeLighter);
            border-color: transparent;
            border-radius: calc(var(--commonRadius) / 2);
        }
    }
    & tbody{
        & td{
            border-color: transparent;
            background-color: var(--secondaryFade);
            border-radius: calc(var(--commonRadius) / 2);
        }
    }
}

@media (max-width: 1400px) and (min-width:1201px) {
    .wp-block-table{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        & table{
            min-width: 800px;
            border-collapse: collapse;
            border-spacing: 0;
        }
        & th, td{
            white-space: normal;
            padding: .6rem .75rem;
            vertical-align: top;
            border-radius: 0 !important;
        }
    }
}

.wp-block-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.wp-element-button{
    cursor: pointer;
    border: none;
    border-radius: var(--btnRadius);
    padding: .7rem 2rem;
    font-size: .9rem;
    font-weight: 600;
    background-color: var(--btnBg);
    color: var(--btnColor);
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
    &:hover{
        background-color: var(--btnHoverBg);
        color: var(--btnHoverColor);
    }
}

.bg-blog-article{
    > .wp-block-group{
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        &.bg-header{
            width: 100%;
        }
        &.bg-flag-cta{
            width: calc(1500px - 10vw);
            max-width: 90%;
        }
    }
    & .bg-header{
        padding: 10rem 0;
        background-color: var(--main);
        background-image: var(--post-thumbnail-medium, none);
        background-size: cover;
        background-position:center;
        position: relative;
        color: var(--white);
        & p{
            margin-bottom: 0;
        }
        &::before{
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(1,40,48,0.82) 0%, rgba(1,40,48,0.72) 100%);
            z-index: 1;
        }
        & .wp-block-group__inner-container{
            width: 1500px;
            margin: 0 auto;
            max-width: 100%;
            padding: 0 5vw;
        }
        & > * {
            position: relative;
            z-index: 3;
            color: var(--white);
        }
        & .taxonomy-category{
            display: none;
            & a{
                color: var(--white);
            }
            &:before{
                content: '';
                width: 16px;
                height: 16px;
                background-image: var(--tagIcon);
                background-repeat: no-repeat;
                background-size: 16px 16px;
                display: inline-block;
                margin-right: 8px;
                vertical-align: middle;
                margin-top: -2px;
            }
        }
        & h1{
            margin-bottom: .5rem;
            text-wrap: balance;
        }
        & .wp-block-group-is-layout-flex {
            color: var(--secondary);
        }
    }
}

.bg-panel-and-content{
    display: flex;
    padding: 0 5%;
    gap: 3rem;
    width: 1500px;
    max-width: 100%;
    margin: 2rem auto 4rem auto;
}

.bg-begin-content {
    flex-basis: 0;
    flex-grow: 1;
}

.is-sticky-panel {
	align-self: flex-start;
}

@media (min-width: 1201px) {
	.is-sticky-panel {
		position: sticky;
		top: var(--bg-header-offset, 110px);
		max-height: calc(100vh - var(--bg-header-offset, 110px) - 1rem);
		overflow-y: auto;
		scrollbar-width: none;
	}
	.is-sticky-panel::-webkit-scrollbar {
		display: none;
	}
}

/* Bloc Author */

.bg-author{
	margin: 2rem 0;
	gap: 1.25rem;
	width: 700px;
	max-width: 100%;
	background-color: var(--blue);
	border-radius: var(--commonRadius);
	padding: 2rem;
    &:not(:has(.wp-block-post-author-biography)) {
        display:none;
    }
	& .wp-block-avatar{
		flex-shrink: 0;
		& img{
			border-radius: 50%;
			width: 96px;
			height: 96px;
			object-fit: cover;
		}
	}
	& .wp-block-post-author-name{
		font-weight: 600;
		margin-bottom: .4rem;
	}
	& .wp-block-post-author-biography{
		font-size: .9rem;
		margin-bottom: .5rem;
	}
	& .author-linkedin{
		& a{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			&:hover{
				text-decoration: underline;
			}
		}
		& svg{
			fill: var(--textColor);
            width: 20px;
            height: 20px;
		}
		& span{
			margin-left: .3rem;
			color: var(--textColor);
			font-size: .8rem;
		}
	}
}

/* Bloc TOC (Plan de l'article) */
.bg-toc{
    border: 1px solid var(--blue);
    padding: 1rem 1rem 1rem 1rem;
    border-radius: var(--commonRadius);
	margin-bottom: 1rem;
	& p{
		margin-bottom: .5rem;
	}
	& .bg-toc__list{
		list-style-type: none;
		padding-left: 0;
		margin: 0;
        overflow: hidden;
		& li{
			margin-bottom: .5rem;
		}
		& a{
			text-decoration: none;
			padding-left: 26px;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
            color:var(--btnBg);
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0.2em;
				width: 16px;
				height: 16px;
				background-image: var(--moveIcon);
				background-repeat: no-repeat;
				background-size: 16px 16px;
			}
			&:hover{
                color: var(--textColor);
				&::before{
					animation: bounceIt 1s infinite alternate;
				}
			}
			&.toc-level-3{
				padding-left: 42px;
				font-size: .9em;
				opacity: .85;
			}
		}
	}
}

/* Bloc sidebar banner */
.bg-panel-banner{
    & .wp-block-cover{
        position: relative;
        min-height: 300px;
        border-radius: 1rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        & p{
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            text-transform: uppercase;
            color: var(--btnColor);
        }
        & img {
            mix-blend-mode: soft-light;
            position: absolute;
            top: 0;
            height: 100%;
            width: 100%;
            left: 0;
            object-fit: cover;
            object-position: center;
            z-index:0;
        }
        & a {
            position: relative;
            z-index: 1;
        }
    }
	& .wp-block-image {
		& img {
			border-radius: var(--commonRadius);
		}
	}
}


/* Bloc résumé */

.bg-resume-wrapper{
	background-color: var(--blue);
	padding: 2rem;
	border-radius: var(--commonRadius);
	margin: 2rem 0;
	& .wp-block-group__inner-container{
		& > *:last-child{
			margin-bottom: 0;
		}
	}
}

/* Bloc good to know */

.bg-good-to-know{
	background-color: var(--blue);
	padding: 2rem;
	border-radius: var(--commonRadius);
	margin: 2rem 0;
	& .wp-block-group__inner-container{
		& > *:last-child{
			margin-bottom: 0;
		}
	}
}

/* Partage reseaux. */
.bg-share{
	margin: 2rem 0;
}
.bg-share-links {
	& ul {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		list-style: none;
		padding: 0;
		margin-top: 1rem;
		margin-bottom: 1rem;
		& li{
			margin: 0;
		}
	}
	& a {
		text-decoration: none;
		border: 1px solid var(--shareBtnBorder);
		border-radius: var(--btnRadius);
		padding: 8px 12px;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--shareBtnColor);
		background-color: var(--shareBtnBg);
        & span {
            white-space:nowrap;overflow:hidden;max-width: 0;transition: max-width 0.3s ease;
        }
		&:hover {
			background-color: var(--shareBtnHoverBg);
			color: var(--shareBtnHoverColor);
            & span {
                max-width: 100px;
            }
		}
	}
	& .bg-share-links__linkedin{
		& svg{
			margin-top: -2px;
		}
	}
}


/* Bloc FAQ */
.bg-gutenberg-faq{
	padding: 2rem 5%;
    width: 1500px;
    margin: 0 auto;
    max-width: 100%;
	& .schema-faq-section{
		padding: 1rem;
		background-color: var(--btnBg);
		margin: 1rem 0;
		border-radius: var(--commonRadius);
		cursor: pointer;
		&:hover{
			background-color:var(--btnHoverBg);
		}
		&.is-open .schema-faq-answer {
			display: block;
		}
	}
	& .schema-faq-question {
		display: flex;
		align-items: center;
		font-weight: 600;
		position: relative;
		padding-left: 26px;
        line-height: 1;
		&:before{
			content: '';
			width: 16px;
			height: 16px;
			background-image: var(--accordonIcon);
			background-repeat: no-repeat;
			background-size: 16px 16px;
			position: absolute;
			left: 0;
			top: 0;
		}
		
	}
	& .schema-faq-answer{
		margin: 8px 0;
		padding: 0 0 0 26px;
		display: none;
	}
}

/* Related posts slider */
.bg-other-post{
	width: 100%;
	padding: 2rem 5%;
	width: 1500px;
	margin: 0 auto;
	max-width: 100%;
    & p {
        flex: 1 1 100%;text-align: center;
    }
    & .wp-block-buttons {
        width: 100%;
    }
}
/* ── Swiper vanilla commun ─────────────────────────────────────────────── */
.swiper-wrap {
	overflow: hidden;
	position: relative;
}
.swiper-track {
	display: flex;
}
.swiper-slide {
	flex-shrink: 0;
	box-sizing: border-box;
}
.swiper-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: rgba(0,0,0,.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 2.2rem;
	height:auto;
    aspect-ratio: 1;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	&:hover { background: rgba(0,0,0,.7); }
	&:disabled { opacity: .3; cursor: default; }
	&.prev { left: .5rem; }
	&.next { right: .5rem; }
}
.swiper-dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding-top: .75rem;
}
.swiper-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .2s;
	&.active { background: var(--main, #000); }
}

/* Articles liés */
.bg-related-swiper {
	margin-top: 1rem;margin-bottom: 1rem;
}
.bg-related-card {
	border-radius: var(--commonRadius);
    text-align: center;
    & img, & .bg-related-card-placeholder {
        background-color: var(--secondaryFade);
        width: 100%;
        height: auto;
        border-radius: var(--commonRadius);
        aspect-ratio: 556 / 330;
        object-fit: cover;
        pointer-events: none;
        margin-bottom:1rem;
    }
    & a {
        display: block;
    }
}
.bg-related-thumb {
	width: 100%;
	height: 160px;
	background-size: cover;
	background-position: center;
	border-radius: var(--commonRadius);
	margin-bottom: 8px;
}
.bg-related-title {
	font-size: 1.2rem;
    font-weight: bold;
	margin: 0 0 6px 0;
	text-transform: initial;
	letter-spacing: 0;
	text-wrap: balance;
	& a {
		color: inherit;
		text-decoration: none;
		&:hover { text-decoration: underline; }
	}
}
.bg-related-date {
	font-size: .9rem;
	color: var(--textColor);
	margin: 0;
}

/* Diaporama */
.bg-slideshow {
	border-radius: var(--commonRadius);
	margin: 1.5rem 0;
	& .swiper-slide figure,
	& .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		margin: 0;
		border-radius: var(--commonRadius);
	}
	& .swiper-btn {
		top: calc(50% - .75rem);
	}
}

/* Bloc pre-footer CTA */
.bg-flag-cta{
	background-color: var(--dark-main);
	padding: 2rem;
	width: 1500px;
	max-width: 90%;
	margin: 2rem auto;
	border-radius: var(--commonRadius);
    color: var(--white);
    position: relative;
    overflow: hidden;
    &.wp-block-cover{
        min-height:fit-content;
    }
    & .wp-block-cover__inner-container{
        position: relative;
        z-index: 2;
    }
    & .wp-element-button {
        background-color: var(--secondary);
        color: var(--main);
        display: block;
        &:hover{
            background-color:white;
            color: var(--main);
        }
        &:is(:empty) {
            display:none;
        }
    }
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(0deg, rgba(1, 40, 48,0.8) 0%, rgba(1, 40, 48, 0.7) 100%);
        z-index: 1;
    }
}
.bg-other-post {
    & .wp-element-button{
        background-color:var(--btnBg);color:var(--btnColor);
        &:hover{
            background-color: var(--main);
            color: var(--secondary);
        }
    }
}


/* --- Simple star rating --- */
.csr-wrapper {
    display: inline-block;
    padding: 0;
}

.csr-title {
    font-size: 1.4rem;
    text-transform: initial;
    font-weight: bold;
}
.csr-label{
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--textColor);
}

.csr-stars {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.csr-star {
    appearance: none;
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: relative;
    transition: transform 120ms ease, opacity 120ms ease;
    color: var(--starEmpty);
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.csr-star:hover,
.csr-star:focus-visible {
    transform: translateY(-1px) scale(1.04);
    outline: none;
    background: transparent;
}

.csr-star.csr-disabled {
    cursor: initial;
    &:hover,
    &:focus-visible {
        transform: translateY(0) scale(1);
    }
}

.csr-star-base,
.csr-star-fill {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--starEmpty);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.95 6.07 6.7.56-5.1 4.57 1.54 6.65L12 16.9l-6.09 2.95 1.54-6.65-5.1-4.57 6.7-.56L12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.95 6.07 6.7.56-5.1 4.57 1.54 6.65L12 16.9l-6.09 2.95 1.54-6.65-5.1-4.57 6.7-.56L12 2z'/%3E%3C/svg%3E");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: left;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
}

.csr-star-fill {
    background: var(--starFill);
    /*
     * inset:0 impose left:0 + right:0, ce qui rend width ignoré pour les
     * éléments abspos. On utilise clip-path pour rogner la partie dorée
     * depuis la droite selon --fill (hérité du bouton .csr-star parent).
     */
    clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
    overflow: visible;
}

.csr-has-votes{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    & div{
        &:first-child{
            &:after{
                content: '-';
                margin-left: .5rem;
            }
        }
    }
}
.csr-feedback {
    font-size: 14px;
    color: var(--textColor);
}

.csr-message {
    margin-top: 6px;
    font-size: 14px;
}

.csr-message.success {
    color: var(--textColor);
}

.csr-message.error {
    color: var(--error);
}

.csr-message.info {
    color: var(--textColor);
}

.csr-trap {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Responsive styles */
@media (max-width: 1200px) {
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.6rem;
    }
    h3, .csr-title{
        font-size: 1.2rem;
    }
    h4, h5{
        font-size: 1rem;
    }
    .has-large-font-size{
        font-size: 1.6rem !important;
    }
    .has-medium-font-size{
        font-size: 1.1rem !important;
    }
    .bg-panel-and-content {
        margin-bottom: 0;
        gap: 0;
        &.wp-block-columns{
            flex-wrap: wrap !important;
        }
        & .wp-block-column {
            flex-basis: 100%!important;
        }
    }
    .bg-panel-banner{
        display: none;
    }
}
@media (max-width: 900px) {
    .wp-block-table{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: auto !important;
        scrollbar-color: var(--textColor) var(--main) !important;
    }

    .wp-block-table table{
        min-width: 800px;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .wp-block-table th,
    .wp-block-table td{
        white-space: normal;
        padding: .6rem .75rem;
        vertical-align: top;
        border-radius: 0 !important;
    }

}
@media (max-width: 600px) {
    .wp-block-media-text>.wp-block-media-text__content {
        margin: 1rem 0;
        padding: 0;
    }
}

@media (max-width: 480px) {
    h1{
        font-size: 1.6rem;
        letter-spacing: 0px;
    }
    h2{
        font-size: 1.4rem;
        letter-spacing: 0px;
    }
    h3, .csr-title{
        font-size: 1.1rem;
        letter-spacing: 0px;
    }
    h4, h5{
        font-size: 1rem;
        letter-spacing: 0px;
    }
    .has-large-font-size{
        font-size: 1.4rem !important;
        letter-spacing: 0px;
    }
    .has-medium-font-size{
        font-size: 1rem !important;
        letter-spacing: 0px;
    }
    .bg-header {
        & .wp-block-group-is-layout-flex {
            gap: .2rem;
            & .wp-block-separator {
                opacity: 0;
                flex-basis: 100%;
                visibility: hidden;
                height: 0;
                border-width: 0px;
            }
        }
    }
    .bg-author {
        & .wp-block-group__inner-container {
            padding: 1rem;
        }
        & .wp-block-avatar img {
            width: 40px;
            height: 40px;
        }
    }
    .bg-share-links {
        & ul {
            & li {
                & a{
                    width: 40px;
                    height: 40px;
                    padding: 8px;
                    & svg{
                        width: 100%;
                        height: 100%;
                    }
                    & span{
                        display: none;
                    }
                }
            }
        }
    }
}

@media (max-width: 380px){
    .csr-has-votes {
        gap: 0;
        margin-top: .5rem;
        & div {
            width: 100%;
            &:first-child {
                &:after{
                    content: none;
                }
            }
        }
    }
}