/*--------------------------------------------------------------
  BLOG DETAIL  (single.php)
  Loaded on posts, archives, blog listing and search - see the
  'blogpg' bundle in includes/assets.php. Everything here is
  scoped to the blog-detail / related / search class names so it
  cannot leak into the listing pages that share this stylesheet.
--------------------------------------------------------------*/



.blogdetail-wrap {
    display: flex;
    flex-wrap: wrap;
    
}

.blogdetail-left {
    width:75%;
    padding-right:100px;
}

.blogdetail-right {
    width:25%;
    
}

/*-----ARTICLE-----*/

.blogdetail-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 600;
    color: #171717;
    margin-bottom: 15px;
}

.blogdetail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 30px;
}

.blogdetail-meta .blog-date {
    font-size: 14px;
    line-height: 1.12;
    color: #626967;
}

.blogdetail-meta .blog-cat {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: #3E9400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 7px 16px;
    border: 1px solid #3E9400;
    border-radius: 20px;
    transition: all .3s ease-in-out;
}

.blogdetail-left ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom:28px;
}
.blogdetail-left ul li{
        color: #414141;
    font-size: 16px;
    line-height: 1.1;
    padding-left: 28px;
    position: relative;
    letter-spacing: 0.4px;
    width: 100%;
    margin-bottom:0;
}
.blogdetail-left ul li:not(:last-child){
        margin-bottom:15px;
}
.blogdetail-left ul li:before
{
    content: "";
    position: absolute;
    left: 0;
    top:1px;
    background: url(../images/svg/check-icon.svg) no-repeat;
    width: 16px;
    height: 16px;
    background-size: auto;
    background-position: center;
}
.blogdetail-meta .blog-cat:hover {
    color: #FFFFFF;
    background-color: #3E9400;
}

.blogdetail-img,
figure.wp-block-image.size-large
{
    margin-bottom: 35px;
    text-align: center;
    background-color: #f3f3f3;
    padding:20px;
}

/* max-width, not width: an image narrower than the column (e.g. when the source
   is too small for the 1000x450 blog_detail crop) keeps its natural size and is
   centred, rather than being stretched and going soft. */
.blogdetail-img img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Body copy inherits .ptag / .contentpg from common.css - only the
   headings and the odd embedded element need setting here. */
.blogdetail-content h2,
.blogdetail-content h3,
.blogdetail-content h4 {
    color: #171717;
    font-weight: 600;
    margin-bottom: 16px;
}
/*

.blogdetail-content h2 {
    font-size: 26px;
    line-height: 34px;
}

.blogdetail-content h3 {
    font-size: 22px;
    line-height: 30px;
}

.blogdetail-content h4 {
    font-size: 18px;
    line-height: 26px;
}
*/

.blogdetail-content img {
    max-width: 100%;
    height: auto;
}



.blogdetail-content blockquote {
    border-left: 3px solid #3E9400;
    background-color: #F3F3F3;
    padding: 25px 30px;
    margin: 0 0 26px;
}

.blogdetail-content blockquote p:last-of-type {
    margin-bottom: 0;
}

/*-----FAQS-----*/
/* The accordion itself is styled by smk-accordion.css (shared with the FAQs
   page template). Only the section wrapper needs setting here - and the
   plugin's 1200px centred max-width is dropped so it fills the column. */

.blogdetail-faqs {
    margin-top: 45px;
}

.blogdetail-faqs .smk_accordion {
    max-width: 100%;
    margin: 0;
}

.blogfaq-head {
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    color: #171717;
    margin-bottom: 20px;
}

/*-----PREV / NEXT-----*/

.blogdetail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    border-top: 1px solid #E3E3E3;
    margin-top: 40px;
    padding-top: 30px;
}

.blogdetail-nav a {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    
}

.blogdetail-nav .blogdetail-nav-next {
    margin-left: auto;
    text-align: right;
}

.blogdetail-nav .nav-label {
    display: block;
    font-size: 14px;
    line-height: 1;
    color:#414141;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight:bold;
    & i{
        font-weight:bold;
    }
}
.blogdetail-nav .nav-label:hover{
     color: #3E9400;
}
.blogdetail-nav .nav-title {
    display: block;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #242929;
    transition: all .3s ease-in-out;
}

.blogdetail-nav a:hover .nav-title {
    color: #3E9400;
}

/*-----SIDEBAR-----*/

.blog-sidebar {
    position: sticky;
    top:155px;
}

.blog-search form {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 40px;
}

.blog-search input[type="search"] {
    width: calc(100% - 50px);
    height: 50px;
    border: 1px solid #E3E3E3;
    border-right: 0;
    background-color: #FFFFFF;
    padding: 0 15px;
    font-size: 16px;
    color: #414141;
    outline: none;
}

.blog-search button {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 0;
    cursor: pointer;
    color: #FFFFFF;
    background-color: #3E9400;
    font-size: 16px;
    transition: all .3s ease-in-out;
}

.blog-search button:hover {
    background-color: #242929;
}

.blog-recent-head {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: #171717;
    margin-bottom: 20px;
}

.recentblog-ul li:not(:last-child) {
    margin-bottom:30px;
    padding-bottom:30px;
    border-bottom:1px solid #f3f3f3;
}
.recentblog-ul li a{
    display:flex;
    flex-wrap:wrap;
}
.recentblog-ul li .blog-img {
    width:80px;
   
}
.recentblog-ul li .blog-bottom{
    width:calc(100% - 80px);
    padding-left:20px;
}
.recentblog-ul li .blog-img img {
    width: 100%;
    display: block;
}

.recentblog-ul li .blog-date {
    font-size: 14px;
    line-height: 1.12;
    color: #626967;
    margin-bottom:4px;
    font-weight:bold;
}

.recentblog-ul li .blog-title {
        font-size: 14px;
    line-height: 1.36;
    font-weight: normal;
        transition: all .3s ease-in-out;
    color: #414141;
}

.recentblog-ul li a:hover .blog-title {
    color: #3E9400;
}

/*--------------------------------------------------------------
  RELATED ARTICLES SLIDER
  Card visuals mirror the home page blog cards (common.css 2395+),
  which are scoped to ul.hmblog-ul and so cannot be reused here.
--------------------------------------------------------------*/

.sec-relatedblog {
    margin-bottom: 80px;
}

/* Before slick boots (and if JS ever fails) show the cards as a row
   rather than letting them flash stacked at full width. */
.relatedblog-ul:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    
}

.relatedblog-ul:not(.slick-initialized) li {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    
}
.relatedblog-ul li:not(:nth-child(-n + 3)){
    display:none;
}
.relatedblog-ul li {
    margin: 0 15px;
}
.relatedblog-ul{
    margin:0 -15px;
}


.relatedblog-ul .blog-list-li {
    background-color: #F3F3F3;
    height: 100%;
}

.relatedblog-ul .blog-img {
    height: 240px;
}

.relatedblog-ul .blog-img img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    object-position:center center;
    display: block;
}

.relatedblog-ul .blog-bottom {
    padding: 30px;
}

.relatedblog-ul .blog-date {
    font-size: 14px;
    line-height: 1.12;
    color: #626967;
    margin-bottom: 12px;
}

.relatedblog-ul .blog-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: #242929;
    margin-bottom: 14px;
}

/* .btn_black_border has no base rule in common.css - it only exists
   nested under ul.hmblog-ul - so it is restated here. */
.relatedblog-ul .btn_black_border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #242929;
    color: #242929;
    line-height: 1;
    height: 42px;
    min-width: 146px;
    margin-top: 20px;
    font-weight: bold;
    transition: all .3s ease-in-out;
}

.relatedblog-ul .btn_black_border:hover {
    border: 1px solid #242929;
    background-color: #242929;
    color: #FFFFFF;
}

/*-----SEARCH: NO RESULTS-----*/

.blog-noresults {
    text-align: center;
    padding: 20px 0 40px;
}

.blog-noresults p {
    font-size: 18px;
    line-height: 28px;
    color: #414141;
    margin-bottom: 25px;
}

.blog-noresults .blog-search form {
    max-width: 420px;
    margin: 0 auto;
}

/*-----MEDIA QUERIES-----*/

@media(max-width:1439px){
    .relatedblog-ul li {
        margin: 0 15px;
    }
    .relatedblog-ul{
        margin:0 -15px;
    }
    .relatedblog-ul .blog-bottom {
        padding:20px;
    }
    .blogdetail-left{
        padding-right:50px;
    }
}
@media(max-width:1199px) {
    .blogdetail-left {
        width: 78%;
    }

    .blogdetail-right {
        width: 22%;
    }

    .blogdetail-title {
        font-size: 32px;
    }
    .recentblog-ul li .blog-img {
        width:60px;
    }
    .recentblog-ul li .blog-bottom {
        width: calc(100% - 60px);
        padding-left: 20px;
    }
    .recentblog-ul li:not(:last-child){
        margin-bottom:20px;
        padding-bottom:20px;
    }
    .relatedblog-ul .blog-title{
        font-size:18px;
    }
    .relatedblog-ul li {
        margin: 0 8px;
    }
    .relatedblog-ul{
        margin:0 -8px;
    }
    .sec-relatedblog {
        margin-bottom:40px;
    }
    
}

@media(max-width:991px) {

    .blogdetail-left,
    .blogdetail-right {
        width: 100%;
    }
    .blogdetail-left {
        padding-right:0px;
    }
    .blogdetail-right {
        margin-top: 50px;
    }

    .blog-sidebar {
        position: static;
    }

    
    

    
     .relatedblog-ul li {
        margin: 0 4px;
    }
    .relatedblog-ul{
        margin:0 -4px;
    }
}

@media(max-width:767px) {
    .blogdetail-title {
        font-size: 26px;
    }

    .blogdetail-nav a,
    .blogdetail-nav .blogdetail-nav-next {
        max-width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .recentblog-ul li {
        width: 100%;
    }

    .recentblog-ul li:not(:last-child) {
        margin-bottom: 25px;
    }

    .relatedblog-ul .blog-bottom {
        padding: 25px 20px;
    }
    
    .relatedblog-ul li {
        margin: 0 4px;
    }
    .relatedblog-ul{
        margin:0 -4px;
    }
   .blogdetail-right {
        margin-top:30px;
    }
    .blog-search form{
        margin-bottom:20px;
    }
}

@media(max-width:580px){
    .blogdetail-left ul li:not(:last-child) {
        margin-bottom: 15px;
    }
    .blogdetail-left ul li{
            padding-left: 24px;
    }
    .blogdetail-left ul{
        margin-bottom:20px;
    }
    .relatedblog-ul .blog-bottom {
        padding: 16px;
    }
    .relatedblog-ul .blog-title {
        font-size: 14px;
    }
    .relatedblog-ul .blog-date{
        margin-bottom:5px;
    }
}