@import "fonts.css";

/* Announcement Bar */
.gh-announcement-bar {
    background-color: #002870;
    padding: 16px 24px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.gh-announcement-link {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.gh-announcement-link:hover {
    color: #ffffff;
    opacity: 0.9;
}

.gh-announcement-text {
    color: rgba(255, 255, 255, 0.9);
}

.gh-announcement-cta {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .gh-announcement-bar {
        padding: 14px 20px;
    }

    .gh-announcement-link {
        font-size: 14px;
        flex-direction: column;
        gap: 4px;
    }

    .gh-announcement-text {
        display: block;
    }

    .gh-announcement-cta {
        display: block;
    }
}

/* Offset header pseudo-elements for announcement bar */
@media (min-width: 992px) {
    .gh-head-menu::before,
    .gh-head-menu::after {
        top: 124px;
    }

    .gh-head-menu::after {
        /* top: 180px; */
        top: 197px
    }
}

/* This style is added to allow for fixed social share bar on post pages*/

#mb-content {
    position: relative;
}

/* Custom design for News in Bullets blockquotes and "State of Fiat Editor's Note" snippet */

.tag-hash-nib .gh-article-image,
.tag-hash-nib .kg-image-card {
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    }

.tag-hash-nib blockquote.kg-blockquote-alt, 
.tag-hash-nib.tag-state-of-fiat .kg-card.kg-callout-card.kg-callout-card-blue {
    background-color: #ffffff;
    box-shadow: 0px 0px 13.3px -3.5px rgba(53, 80, 108, 0.05);
    border-radius: 20px;
    outline: 0.8px #D3383C solid;
    outline-offset: -15px;
    padding: 31px 51px;
    /* border-left: solid #D3383C 4px; */
    font-size: 18px;
    /* line-height: 20px; */
    position: relative;
    color: #2A4056;
    font-weight: 500;
    text-align: left;
    margin-top: calc(0.4em*var(--content-spacing-multiplier, 1));
}

.tag-hash-nib blockquote.kg-blockquote-alt::after,
.tag-state-of-fiat .kg-card.kg-callout-card.kg-callout-card-blue::after {
    content: " ";
    position: absolute;
    border-left: 6px #D3383C solid;
    border-radius: 10px;
    top: 25%;
    left: 12px;
    height: 50%;
    margin-top: auto;
    margin-bottom: auto;
    /* background: url("https://www.mariblock.com/content/images/2023/03/news-blockquote-pseudo.png");
      background-repeat: no-repeat;
    display: block; */
}

/* ===== STYLES FOR CUSTOM MB-SPECIAL-VIDEO */

.tag-template .gh-card.tag-video {
    background-color: #fbfdff;
}

.tag-template .tag-video .gh-card-title {
    color: #15171a;
}

.tag-template .tag-hash-mbsv figure {
    padding-bottom: unset;
}

.tag-hash-mbsv .gh-main {
    padding-top: 180px;
}

.tag-hash-mbsv #gh-head {
    background: #000912;
}

.tag-hash-mbsv .gh-head-actions a {
    color:  #FBFDFF;
}

.tag-hash-mbsv .gh-head-menu:after {
    display: none;
}
.tag-hash-mbsv .gh-head-menu:before {
    background: #385673;
}

.tag-hash-mbsv .tag-seperator {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 12px;
    gap: 10px;  
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px; 
    text-align: center;
    color: #FBFDFF;
}

.tag-hash-mbsv .tag-seperator a {
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #FBFDFF;
}

.tag-hash-mbsv {
    background-color:  #000912;
    color: #FBFDFF;
}

.tag-hash-mbsv .gh-outer {
    background-color: #000912;
}

.tag-hash-mbsv .gh-search svg {
   color: #8FABC8;
}

.tag-hash-mbsv .gh-head-actions a {
    background: #385673;
    border-radius: 22px;
}

.tag-hash-mbsv .gh-head-menu a {
    color: #FBFDFF;
}

.tag-hash-mbsv .gh-article-title {
    /* display: none; */
    margin: 0;
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 600;
    width: 60%;
    padding: 0 0 50px;
    margin: 0 auto;
    font-size: 45px;
    line-height: 54px;
    text-align: center;
    color: #FBFDFF;
}

.tag-hash-mbsv .gh-article-excerpt {
    font-family: 'Objectivity' !important;
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    line-height: 48px;
    color: #FBFDFF;
    padding-bottom: 20px;
    border-bottom: 0.8px solid #8FABC8;
}

.tag-hash-mbsv figure {
    width: 75%;
    margin: 0 auto;
    padding-bottom: 60px;
}

.tag-hash-mbsv figure figcaption {
    display: none;
}

.tag-hash-mbsv .gh-article-meta {
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    margin-left: auto; 
    margin-right: auto;
    flex-wrap: wrap;
    text-align: left;
    margin-top: 40px;
}

.tag-hash-mbsv .gh-article-meta .gh-author-name-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 10px;
    border-bottom: 0.8px solid #8FABC8;
}

.tag-hash-mbsv .gh-article-meta .gh-author-name-list a {
    color: #FBFDFF;
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #FBFDFF;
}

.tag-hash-mbsv .gh-article-meta .gh-article-meta-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 10px;
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 44px;
    color: #8FABC8;
}

.tag-hash-mbsv .share-block {
    display: flex;
    align-items: center;
}

.tag-hash-mbsv .share-block .share-icons{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 ;
    padding: 0;
}

.tag-hash-mbsv .share-block .share-text {
    font-family: 'Objectivity';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 25px;
    color: #FBFDFF;
}

.tag-hash-mbsv .share-block .mb-share-icon {
    background: #385673;
}

.tag-hash-mbsv .share-block .mb-share-icon::before {
    color: #F2F6FA;
}

    /* drop-cap */

.tag-hash-mbsv #mb-content p {
  /* border-top: 1px solid rgb(255, 255, 255);
  border-bottom: 1px solid rgb(255, 255, 255); */
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    clear: both;
    line-height: 29px;
    color: #FBFDFF;
}


.tag-hash-mbsv #mb-content p:nth-child(odd) {
    color: #d7e6f5;
}

.tag-hash-mbsv #mb-content p:first-of-type::first-letter ,
.tag-hash-mbsv hr + p:first-of-type::first-letter,
.tag-hash-mbsv hr + h2 + p:first-of-type::first-letter {
    float: left;
    line-height: 28px;
    font-size: 127px;
    font-weight: bold;
    font-family: 'Lora';
    color: #FBFDFF;;
    font-style: normal;              
    padding-top: 39px;
    padding-bottom: 20px;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
    margin-bottom: 4px;
     /* margin: 0 10px 10px 0; */
}

.tag-hash-mbsv #mb-content hr {
    color: #8FABC8;
    background: #8FABC8;
}

.tag-hash-mbsv figure video .ytp-impression-link {
    display: none !important;
}

body > div.gh-site > main > article > figure > figure {
    height: 585px;
    width: 100%;
}

.tag-hash-mbsv > div.gh-site > main > article > figure > figure > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tag-hash-mbsv > div.gh-site > main > article > figure > iframe .cld-video-player .vjs-big-play-button:before {
    color:black;
}

.tag-hash-mbsv > div.gh-site > main > article > figure {
    position: relative;
    padding-bottom: 35.25%;
    height: 0;
    width: 62%;
}

.tag-hash-mbsv .gh-outer {
    margin-top: 0; 
}

/* ==== MEDIA QUERIES ===== */

/* Media Queries for screens smaller than 480px */
@media (max-width: 479.98px) {

    .tag-hash-mbsv .gh-main {
        padding-top: 80px;
    }

    body > div.gh-site > main > article > h1.gh-article-title {
        width: 85%;
        font-size: 22px;
        line-height: 34px;
        padding: 0 0 20px;
    }

    .tag-hash-mbsv .tag-seperator {
        gap: 8px;  
        font-size: 12px;
    }

    .tag-hash-mbsv .tag-seperator a {
        font-size: 14px;
        line-height: 25px;
    }

    .tag-hash-mbsv figure {
        width: 90%;
        height: 550px;
    }

    body > div.gh-site > main > article > div.gh-article-meta > div.gh-author-name-list > h4 > a {
        font-size: 14px;
        font-weight: 300;
    }
    
    .tag-hash-mbsv .gh-article-meta .gh-article-meta-inner {
        padding-top: 8px;
        font-weight: 300;
        font-size: 14px;
    }

    .tag-hash-mbsv .share-block .share-icons .share-icon {
        gap: 2px;
        padding: 0;
    }

    .tag-hash-mbsv .share-block .share-icons .share-icon .mb-share-icon {
        height: 28px;
        width: 28px;
        padding: 9px;
    }
    
    body > div.gh-site > main > article > header > p.gh-article-excerpt {
        font-size: 20px;
    }
    
    .tag-hash-mbsv .share-block .share-text {
        font-size: 20px;
    }

    .tag-hash-mbsv #mb-content p:first-of-type::first-letter ,
    .tag-hash-mbsv hr + p:first-of-type::first-letter,
    .tag-hash-mbsv hr + h2 + p:first-of-type::first-letter {
        font-size: 108px;
        padding-top: 27px;
        padding-bottom: 5px;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: 5px;
        margin-bottom: 4px;
    }

    body > div.gh-site > main > article > figure > figure {
        height: auto;
        width: 90%;
    }

    .tag-hash-mbsv > div.gh-site > main > article > figure {
        width: 90%;
        height: auto;
    }
}

.tag-hash-mbsv .gh-topic-grid .gh-card-excerpt,
.tag-hash-mbsv h1,
.tag-hash-mbsv h2,
.tag-hash-mbsv h3,
.tag-hash-mbsv h4,
.tag-hash-mbsv h5,
.tag-hash-mbsv h6 {
    color: #FBFDFF;
}


/* Media Queries for screens smaller than 768px */
@media (max-width: 767.98px) {

    .tag-hash-mbsv .gh-main {
        padding-top: 90px;
    }

    .tag-hash-mbsv .gh-article-title {
        width: 90%;
        font-size: 28px;
        line-height: 38px;
        padding: 0 20px 20px;
    }

    .tag-hash-mbsv .gh-article-excerpt {
        font-size: 24px;
        line-height: 32px;
    }

    .tag-hash-mbsv .gh-article-meta {
        width: 90%;
    }

    .tag-hash-mbsv .gh-article-meta .gh-author-name-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .tag-hash-mbsv .gh-article-meta .gh-author-name-list a {
        font-size: 16px;
        line-height: 20px;
    }

    .tag-hash-mbsv .gh-article-meta .gh-article-meta-inner {
        font-size: 12px;
        line-height: 34px;    
    }

    .tag-hash-mbsv .share-block .share-icons {
        width: 80%;
        gap: 1px;
    }

    .tag-hash-mbsv .share-block .share-icons i {
        height: 32px;
        width: 32px;
    }

    .tag-hash-mbsv #mb-content .secondary-share-block {
        display: none;
    }

    .tag-hash-mbsv #mb-content p {
        padding: 0 8px 8px;
    }

    .tag-hash-mbsv .share-block .share-text {
        font-size: 12px;
        line-height: 22px;
    }

    .tag-hash-mbsv #mb-content p:first-of-type::first-letter ,
    .tag-hash-mbsv hr + p:first-of-type::first-letter,
    .tag-hash-mbsv hr + h2 + p:first-of-type::first-letter {
        font-size: 98px;
        padding-top: 27px;
        padding-bottom: 5px;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: 5px;
        margin-bottom: 4px;
    }

            body > div.gh-site > main > article > h1.gh-article-title {
        width: 80%;
        font-size: 28px;
        line-height: 34px;
        padding: 10px 0 20px;
    }
    .tag-hash-mbsv figure {
        width: 90%;
        height: 550px;
    }

    body > div.gh-site > main > article > div.gh-article-meta {
        width : 90%;
        font-size: 16px;
        font-weight: 300;
    }
    body > div.gh-site > main > article > figure > figure {
        height: auto;
        width: 90%;
    }

    .tag-hash-mbsv > div.gh-site > main > article > figure {
        width: 90%;
        height: auto;
    }

}

/* Media Queries for screens between 768px and 1023.98px */
@media (min-width: 768px) and (max-width: 1023.98px) {

    body > div.gh-site > main.gh-main {
        padding-top: 120px;
    }

    .tag-hash-mbsv .gh-article-title {
        width: 70%;
        font-size: 42px;
        line-height: 48px;
    }

    .tag-hash-mbsv .gh-article-excerpt {
        font-size: 28px;
        line-height: 36px;
    }

    .tag-hash-mbsv figure {
        width: 90%;
    }
        .tag-hash-mbsv #mb-content .secondary-share-block {
        display: none;
    }

    .tag-hash-mbsv #mb-content p:first-of-type::first-letter ,
    .tag-hash-mbsv hr + p:first-of-type::first-letter,
    .tag-hash-mbsv hr + h2 + p:first-of-type::first-letter {
        font-size: 98px;
        padding-top: 27px;
        padding-bottom: 5px;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: 5px;
        margin-bottom: 4px;
    }

        body > div.gh-site > main > article > h1.gh-article-title {
        width: 80%;
        font-size: 28px;
        line-height: 34px;
        padding: 10px 0 20px;
    }
    .tag-hash-mbsv figure {
        width: 90%;
        height: 550px;
    }

    body > div.gh-site > main > article > div.gh-article-meta {
        width : 90%;
        font-size: 16px;
        font-weight: 300;
    }
    body > div.gh-site > main > article > figure > figure {
        height: auto;
        width: 90%;
    }

    .tag-hash-mbsv > div.gh-site > main > article > figure {
        width: 90%;
        height: auto;
    }

}

/* Media Queries for screens between 1024px and 1439.98px */
@media (min-width: 1024px) and (max-width: 1439.98px) {

    .tag-hash-mbsv .gh-article-title {
        width: 60%;
        font-size: 48px;
        line-height: 54px;
    }

    .tag-hash-mbsv > div.gh-site > main > article > figure,
    .tag-hash-mbsv .gh-article-meta {
        width: 70%;
    }

    .tag-hash-mbsv .gh-article-title {
        font-size: 40px;
    }

    .tag-hash-mbsv .gh-article-excerpt {
        font-size: 32px;
        line-height: 38px;
        text-align: center;
    }

    .tag-hash-mbsv .gh-article-excerpt {
        font-size: 32px;
        line-height: 40px;
    }

    .tag-hash-mbsv #mb-content .secondary-share-block {
        display: none;
    }        
    
    .tag-hash-mbsv #mb-content p:first-of-type::first-letter ,
    .tag-hash-mbsv hr + p:first-of-type::first-letter,
    .tag-hash-mbsv hr + h2 + p:first-of-type::first-letter {
        font-size: 108px;
        padding-top: 27px;
        padding-bottom: 5px;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: 5px;
        margin-bottom: 4px;
    }


}

/* Media Queries for screens larger than 1440px */
@media (min-width: 1440px) {

    .tag-hash-mbsv .gh-article-title {
        width: 51%;
        font-size: 48px;
        line-height: 54px;
    }

    .tag-hash-mbsv .gh-article-excerpt {
        font-size: 32px;
        line-height: 44px;
    }

    .tag-hash-mbsv #mb-content .secondary-share-block {
        display: none;
    }

}

/* STYLES FOR CUSTOM MB-SPECIAL-VIDEO ===== */

/* =========== Style for BETA EDITOR ========== */

/* Style for hiding page title and feature image */


@media (max-width: 767px) {
    :root {
        --footer-spacing: 64px;
    }
}

.page-template .gh-foot {
    margin-top: 0;
}

/* Mid-article ad styles */
.ad-slot--mid-article {
    margin: 24px 0;
    display: block;
    text-decoration: none;
}
@media (min-width: 992px) {
    .ad-slot--mid-article {
        margin: 32px 0;
    }
}

/* Clean promo unit frame (neutral naming) */
.mbx-unit {
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    /* border-radius: 12px; */
    background: #fff;
    overflow: hidden;
    max-width: 720px;
    margin: 24px auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    padding: 24px 0 8px; /* extra top padding to clear badge above image */
    position: relative; /* anchor the badge positioning */
}

/* Subtle hover effect */
.mbx-unit .mbx-slot img {
    transition: opacity .12s ease;
}
.mbx-unit:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mbx-unit:hover .mbx-slot img {
    opacity: .98;
}
.mbx-badge {
    position: absolute;
    top: 8px;
    right: auto;
    left: 50%;
    z-index: 1;
    /* background: rgba(17,24,39,0.84); dark backdrop for contrast */
    /* border-radius: 999px; */
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #656568;
    font-weight: 500;
    transform: translateX(-50%);
    text-align: center;
    display: inline-block;
}

/* Slight rounding for the creative inside the padded frame */
.ad-unit .ad-slot img {
    border-radius: 0; /* remove rounding so it can meet edges */
}

@media (min-width: 768px) {
    .mbx-unit { padding: 32px 0 12px; }
}

/* Mobile refinements for the mid-article ad */
@media (max-width: 767.98px) {
    .mbx-unit {
        margin: 16px auto;
        padding: 28px 0 12px; /* more top padding to separate label from image */
    }
    .mbx-badge {
        top: 8px;
        font-size: 11px;
        padding: 2px 8px;
    }
    .mbx-slot--mid {
        margin: 16px 0;
    }
}