/* Star rating */
:root {
  --star-size: 20px;
  --star-color: #CCD0D1;
  --star-background: #ffbf00;
}

.mb_star_rating {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.mb_star_rating::before {
  content: "★★★★★";
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Star rating */

header {
    background-image: none;
    background-color: transparent;
    min-height: unset;
}
.rating-filled { color: #ffbf00 !important; }
.icon-checkmarks { color: #41AD39 !important; }
.icon-crossmarks { color: #B61616 !important; }
dl dd dl dt, .panel-collapsible .panel-heading h6 {
    border: 1px solid #cccccc;
    background-color: #fafafa;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
}
dl dd dl dd, .panel-collapsible .panel-content {
    margin-top: -5px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-top: none;
}
dl dd dl dd p, dl dd dl dd figure, .panel-collapsible .panel-content p, .panel-collapsible .panel-content figure {
    padding: 10px 20px;
}
dl dd dl dd ul, .panel-collapsible .panel-content ul {
    padding: 10px 20px;
    list-style-type: none;
}
dl dd dl dd ul li, .panel-collapsible .panel-content ul li {
    list-style-type: none;
}
dl dd dl dt::before, .panel-collapsible .panel-heading h6::before {
    display: block;
    float: right;
    font-weight: bold;
}
dl dd dl dt[aria-expanded=false]::before, .panel-collapsible .panel-heading[aria-expanded=false] h6::before { content: '+'; }
dl dd dl dt[aria-expanded=true]::before, .panel-collapsible .panel-heading[aria-expanded=true] h6::before { content: '-'; }
h2, h3, h4, h5, h6, dl dt, .panel-collapsible .panel-heading h6 {
    font-weight: 600!important;
    color: #000000;
}
h2 { font-size: 2.25rem!important; }
h3 { font-size: 2rem!important; }
h4 { font-size: 1.75rem!important; }
h5, dl dt { font-size: 1.50rem!important; }
h6, dl dd dl dt { font-size: 1.25rem!important; }
aside .toc li ul li ul { display: none; }
table th { min-width: 120px; }
.blockquote.tip { font-size: 1rem!important; }

.lite-youtube-fallback {
	aspect-ratio: 16 / 9; /* matches YouTube player */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1em;
	padding: 1em;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}

/* right-facing triangle "Play" icon */
.lite-youtube-fallback::before {
	display: block;
	content: '';
	border: solid transparent;
	border-width: 2em 0 2em 3em;
	border-left-color: red;
}

.lite-youtube-fallback:hover::before {
	border-left-color: #fff;
}

.lite-youtube-fallback:focus {
	outline: 2px solid red;
}

#blogsubscribe p a { 
    color: #000000;
    font-weight: bold;
}
/* This is to help the contrast issue in lighthouse score on blog posts)*/
body article a { font-weight: bold; }

/* Blog Index Page Styles */

/* Hide case-studies Except in English */
#blognavbarNav .cat_case-studies {
    display: none;
}
html[lang="en"] #blognavbarNav .cat_case-studies {
    display: block;
}
/* Hide case-studies Except in English */

.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 {
    margin-top: 2rem;
}






/* Blog Design upgrade */

#blognavbarNav a {
    color: white !important;
    text-transform: none !important;
}

.blogpost-featured, 
.blogpost-blurb {
    border-radius: 1.5rem!important;
    border: solid 15px #3266e2 !important;
    /* background: linear-gradient(-44deg, #1e54e9, #4275de) !important; */
    background-color: #3266e2!important;
    overflow: hidden;
    color: white !important;
    
    box-shadow: 0 0 0 rgba(0,0,0,0.3);
    transition: transform .2s ease-out;
}

.blogpost-featured:hover, 
.blogpost-blurb:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
}

.blogpost-featured:pressed, 
.blogpost-blurb:pressed {
    transform: scale(1.01);
}


.blogpost-featured:hover a, 
.blogpost-blurb:hover a {
    text-decoration: none!important;
}

.blogpost-featured a,
.blogpost-blurb a {
    color: white !important;
}

.blogpost-featured figure,
.blogpost-blurb figure {
    margin-bottom: 0!important;
    position: relative;
}

.blogpost-featured figure .published-date,
.blogpost-blurb figure .published-date {
    margin-top: -5px;
    position: absolute;
    right: 12px;
    background: #3266e2;
    padding: 8px;
    border-radius: 8px 8px 0 0;
    bottom: 0;
}

.blogpost-featured figure {
    margin-bottom: 0!important;
    position: relative;
}

.blogpost-featured figure img,
.blogpost-blurb figure img {
    border-radius: 1rem!important;
    height: 169px;
}

.blogpost-featured .text-dark,
.blogpost-blurb .text-dark {
    color: white!important;
}
.blogpost-blurb p.h4 {
  font-size: 1.2rem;
  margin-top: 0!important;
}

#block-maincontent h1,
#block-maincontent h2,
#block-maincontent h3,
#block-maincontent h4,
#block-maincontent h5, 
#block-maincontent dl dt:not([data-bs-toggle="collapse"])
{
    font-family: "Lexend", Inter, Arial;
    text-align: left !important;
    font-weight: 600!important;
    margin-top: 3rem;
    letter-spacing: -0.02em;
}

#block-maincontent h1 { font-size: 35px !important; }
#block-maincontent h2 { font-size: 30px !important; }
#block-maincontent h3 { font-size: 25px !important; }
#block-maincontent h4 { font-size: 23px !important; }
#block-maincontent h5 { font-size: 21px !important; }

#block-blogarchive .row {
    margin-top: 2rem!important;
}

#block-blogsubscribe .border {
    border: none !important;
    border-radius: 1.5rem !important;
    background-color: color(srgb 0.925 0.9442 1)!important;
}
#blogcategories {
    padding-right: 2rem!important;
    padding-left: 2rem!important;
}
#blogcategories a {
    color: black!important;
}
#blogcategories .fst-italic {
    font-style: normal!important;
}

.authorbox {
    line-height: 23px;
    margin-bottom: 2rem;
}
.author-info-box{
    margin-top: 5rem;
}

#block-maincontent .author_bio {
    
}

#block-maincontent .authorbox .author-img {
    display: block !important;
}

#block-maincontent .authorbox .img-thumbnail,
#block-maincontent .author-info-box .img-thumbnail {
    float: left;
    margin-right: 12px;
}

/* #block-maincontent .breadcrumb {
    margin: -1.5rem 0 1.5rem;
} */

#block-maincontent article {
    font-family: 'Source Serif 4', Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 20px;
    color: rgb(36, 36, 36);
    line-height: 32px;
}
#block-maincontent article #disqus_thread {
    font-family: "Lexend", Inter, Arial;
}
#block-maincontent article strong {
    font-weight: 700;
}

#block-maincontent article .figure:first-of-type {  /* First blog image */
    margin-top: 1rem;
}

#block-maincontent article .figure-img {
    border-radius: 1.5rem!important;
    border: 10px solid #eee;
}


#blog-column-nav ol:first-of-type {
    margin-top: 0.5rem;
}

#blog-column-nav ol.toc > li {
    margin-bottom: 0.2rem;
}

#blog-column-nav ol ul > li:last-of-type {
    margin-bottom: 0.5rem;
}

#blog-column-nav ol ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
}

#blog-column-nav nav {
    margin-top: 50px;
    background: #f9f9f9;
    border: 0px solid #ccc;
    border-radius: 15px;
    padding: 25px;
    right: 0px;
    color: #ccc !important;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#blog-column-nav nav a {
    color: #ccc !important;
    transition: color 0.2s ease-in-out;
}

#blog-column-nav nav:hover,
#blog-column-nav nav:hover a {
    color: #555 !important;
    border-color: #555 !important;
}

#blog-column-nav nav a:hover {
    color: #000 !important;
    text-decoration: none !important;
}


/* BLOG DESIGN UPDATES END */

/* 2025 BLOG DESIGN UPDATES START */
#block-blogfeatured .blog-card {
  position: relative;
  border-radius: 12px;
}
#block-blogfeatured .blog-card .blog-card-img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 12px;
}
#block-blogfeatured .blog-card .blog-card-content {
  width: 598px;
  padding: 40px;
  position: absolute;
  right: 56px;
  bottom: -28px;
  background: white;
  box-shadow: 0px 12px 24px -6px rgba(24, 26, 42, 0.12);
  border-radius: 12px;
  outline: 1px solid #E8E8EA;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#block-blogfeatured .blog-card .blog-card-content .blog-card-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#block-blogfeatured .blog-card .blog-card-content .featured-badge {
  padding: 4px 10px;
  background: #0F37C3;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  line-height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#block-blogfeatured .blog-card .blog-card-content .blog-card-title {
  color: #181A2A;
  font-size: 36px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  line-height: 40px;
}
#block-blogfeatured .blog-card .blog-card-content .blog-card-footer {
  display: flex;
  align-items: center;
  gap: 20px;
}
#block-blogfeatured .blog-card .blog-card-content .author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
#block-blogfeatured .blog-card .blog-card-content .author-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
#block-blogfeatured .blog-card .blog-card-content .author-name,
#block-blogfeatured .blog-card .blog-card-content .blog-date {
  color: #97989F;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
}
#block-blogfeatured .blog-card .blog-card-content .author-name {
  font-weight: 500;
}
#block-blogfeatured .blog-card .blog-card-content .blog-date {
  font-weight: 400;
}
/* 2025 BLOG DESIGN UPDATES END */

details summary {
    margin-top: 1em;
    font-weight: 600;
}

details div[itemscope] {
    margin-left: 0.95em;
}

#block-maincontent section.bg-light {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

#block-maincontent section.bg-light h1,
#block-maincontent section.bg-light h2,
#block-maincontent section.bg-light h3 {
    margin-top: 0px;
}

/* Author Tooltip - 2025 */
.author-tooltip {
    display: none;
    width: 450px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    border-radius: 12px!important;
    padding: 16px!important;
    text-align: left!important;
    z-index: 100!important;
    margin-top: 6px!important;
    font-family: 'Inter', Arial;
}
.author-tooltip span {
    display: block;
    font-size: 12px!important;
    line-height: 12px!important;
    letter-spacing: normal!important;
    font-weight: 400!important;
    color: #828282!important;
    margin-bottom: 8px!important;
}
.author-tooltip a span {
    display: block;
    font-size: 16px!important;
    line-height: 16px!important;
    letter-spacing: normal!important;
    font-weight: 700!important;
    color: #000!important;
    margin-bottom: 8px!important;
}
.author-tooltip p {
    margin-bottom: 0px!important;
    font-size: 12px!important;
    line-height: 12px!important;
    letter-spacing: normal!important;
    font-weight: 400!important;
}