/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/
ul.comment-list {list-style: none;padding: 0;}
ul.comment-list li {  list-style: none;}
.avatar {  width: 80px;}
.comment-list ul.children {  padding-left: 96px;}
.comment-list ul.children ul.children {  padding-left: 10px;}
.comment-list ul.children ul.children ul.children {  padding-left: 10px;}
.screen-reader-text {  clip: rect(1px, 1px, 1px, 1px);  position: absolute !important;  height: 1px;  width: 1px;  overflow: hidden;  word-wrap: normal !important;}
.comment-content {  width: calc(100% - 96px);}
.comment-content a {  word-wrap: break-word;}
.bypostauthor {  display: block;}
.comment-content .card p:last-child {  margin-bottom: 0;}

/*--------------------------------------------------------------
Posts
--------------------------------------------------------------*/
.pagination a[rel="prev"]:before {content: "« ";}
.pagination a[rel="next"]:after {  content: " »";}

.blog-posts .card:hover{	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;	transition: box-shadow 0.4s ease;}
.blog-posts .card{	transition: box-shadow 0.4s ease;}
.blog-posts .card .col-12 {width: 100%;height: 0;padding-top: 50%;position: relative;overflow: hidden;}
.blog-posts .card-img-top {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; }

/*--------------------------------------------------------------
Pagination
--------------------------------------------------------------*/
.pagination { justify-content: center; align-items: center; margin-top: 24px;}
.pagination .page-numbers { color: #7F8CA3; font-weight: 400; display: inline-block; padding: 5px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 5px; border-radius: 40px; }
.pagination .page-numbers.current { color: #315296; font-weight: 600; background-color: #EEF4FF; font-size: clamp(0.875rem, 0.76rem + 0.308vw, 1.125rem);}
.pagination .page-numbers:hover { background-color: #EEF4FF; color: #315296; }

a.next.page-numbers, a.prev.page-numbers { border: 2px solid #BCC0C8; width: 46px; height: 46px; border-radius: 50px; padding: 10px; } 
a.next.page-numbers svg, a.prev.page-numbers svg { opacity: 0.5; width: 8px; transition: all 0.3s ease 0s; } 
a.prev.page-numbers { margin-left: 0; margin-right: 20px; }
a.next.page-numbers { margin-left: 20px; margin-right: 0; }

a.next.page-numbers:hover, a.prev.page-numbers:hover { background: #FFF; border: 2px solid #315296; }
a.next.page-numbers:hover svg, a.prev.page-numbers:hover svg { opacity:1; }

/*--------------------------------------------------------------
CF7
--------------------------------------------------------------*/
div.wpcf7-response-output,
div.wpcf7-validation-errors {display: none !important;}

input[aria-invalid="true"],
select[aria-invalid="true"], 
textarea[aria-invalid="true"] {border-color: #ff2c00!important;}

span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader {z-index: 2;opacity: 1 !important;background-color: transparent !important;display: none;transform: unset; position: absolute; right: 8px;}
.submitting span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader {display: inline-block;}
span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader::before{display: none;}

/*--------------------------------------------------------------
AOS easing — match the hero's GSAP power3.out
--------------------------------------------------------------*/
/* The vendored aos.css maps every ease-out-* name to the same quad
   bezier, so the curve is retargeted here instead: quart-out, the CSS
   equivalent of GSAP's power3.out. */
body[data-aos-easing="ease-out-quad"] [data-aos] {
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* aos.css hardcodes 100px travel ($aos-distance is compile-time only);
   tighten it to sit with the hero's subtle GSAP drifts. These replace the
   pre-animate start states — the .aos-animate end states are untouched. */
/* :root { --aos-distance: 50px; }
[data-aos=fade-up] { transform: translate3d(0, var(--aos-distance), 0); }
[data-aos=fade-down] { transform: translate3d(0, calc(var(--aos-distance) * -1), 0); }
[data-aos=fade-right] { transform: translate3d(calc(var(--aos-distance) * -1), 0, 0); }
[data-aos=fade-left] { transform: translate3d(var(--aos-distance), 0, 0); }
[data-aos=fade-up-right] { transform: translate3d(calc(var(--aos-distance) * -1), var(--aos-distance), 0); }
[data-aos=fade-up-left] { transform: translate3d(var(--aos-distance), var(--aos-distance), 0); }
[data-aos=fade-down-right] { transform: translate3d(calc(var(--aos-distance) * -1), calc(var(--aos-distance) * -1), 0); }
[data-aos=fade-down-left] { transform: translate3d(var(--aos-distance), calc(var(--aos-distance) * -1), 0); }
[data-aos=zoom-in-up] { transform: translate3d(0, var(--aos-distance), 0) scale(.6); } */

/*--------------------------------------------------------------
Hero title reveal (GSAP SplitText intro in custom.js)
--------------------------------------------------------------*/
/* Hidden until custom.js reveals it. The zero-duration keyframe is a
   safety net: if the script fails to load or throws, the banner still
   appears after 1.4s. */
.hero-banner-section .banner-info { visibility: hidden; animation: sjbs-hero-reveal 0s 1.4s forwards; }
@keyframes sjbs-hero-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
    .hero-banner-section .banner-info { visibility: visible; animation: none; }
}


.footer-right #webisserie-logo { width: 20px; height: 20px; }
.footer-right #webisserie-logo svg { display: block; }
.footer-right p {display: inline-flex;align-items: center;gap: 6px;}