/* =========================================================
   VB RIDSPORT - GUIDE SYSTEM
   Shared styles for all guide posts
   ========================================================= */


/* =========================================================
   CONTENT WIDTH
   ========================================================= */

/* Text-element fyller alltid hela sin Row */
.vb-guide-page .vb-guide-copy {
    width: 100%;
}

/* Row styr själva läsbredden */
.vb-guide-page .vb-guide-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.vb-guide-page .vb-guide-lead {
    font-size: 20px;
    line-height: 1.65;
}

.vb-guide-page .vb-guide-kicker {
    margin-bottom: 8px;
    color: #333333;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vb-guide-page .vb-guide-copy p {
    line-height: 1.72;
}


/* =========================================================
   GENERIC INFORMATION BOX
   ========================================================= */

.vb-guide-page .vb-guide-box {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 24px;
    background-color: #f2f4f6;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
}

.vb-guide-page .vb-guide-box > :first-child {
    margin-top: 0;
}

.vb-guide-page .vb-guide-box > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   IMPORTANT BOX
   ========================================================= */

.vb-guide-page .vb-guide-box--important {
    background-color: #ffffff;
    border: 2px solid #333333;
}


/* =========================================================
   TIP BOX
   ========================================================= */

.vb-guide-page .vb-guide-box--tip {
    border-left: 4px solid #333333;
    border-radius: 0 8px 8px 0;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.vb-guide-page .vb-guide-toc {
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 24px;
    background-color: #f2f4f6;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
}

.vb-guide-page .vb-guide-toc strong {
    display: block;
    margin-bottom: 12px;
}

.vb-guide-page .vb-guide-toc ul {
    margin: 0;
    padding-left: 20px;
}

.vb-guide-page .vb-guide-toc li {
    margin-bottom: 6px;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.vb-guide-page .vb-guide-checklist {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 24px;
    background-color: #f2f4f6;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
}

.vb-guide-page .vb-guide-checklist li {
    margin-bottom: 8px;
}


/* =========================================================
   IMAGES
   ========================================================= */

.vb-guide-page .vb-guide-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


/* =========================================================
   CTA
   ========================================================= */

.vb-guide-page .vb-guide-cta {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 32px;
    text-align: center;
    background-color: #eef2f5;
    border: 1px solid #dfe4e8;
    border-radius: 12px;
}

.vb-guide-page .vb-guide-cta h2 {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 28px;
    line-height: 1.25;
}

.vb-guide-page .vb-guide-cta p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.6;
}

.vb-guide-page .vb-guide-cta .vb-guide-kicker {
    text-align: center;
    font-size: 13px;
}


/* CTA BUTTON */

.vb-guide-page .vb-guide-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 30px;
    background-color: #22364d;
    color: #ffffff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.vb-guide-page .vb-guide-cta-button span {
    position: relative;
    top: -1px;
}

.vb-guide-page .vb-guide-cta-button:hover {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
}


/* =========================================================
   SOURCES
   ========================================================= */

.vb-guide-page .vb-guide-sources {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e1e5e9;
    font-size: 14px;
}

.vb-guide-page .vb-guide-sources p {
    line-height: 1.6;
}

.vb-guide-page .vb-guide-reviewed {
    margin-top: 16px;
    color: #777777;
    font-size: 13px;
}


/* =========================================================
   FAQ
   ========================================================= */

.vb-guide-page .accordion-title {
    font-weight: 600;
}


/* =========================================================
   GUIDE AUTHOR / REVIEW META
   ========================================================= */

.vb-guide-page .vb-guide-meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    color: #666666;
}

.vb-guide-page .vb-guide-meta span {
    margin-right: 18px;
    margin-bottom: 8px;
}

.vb-guide-page .vb-guide-meta strong {
    color: #333333;
}


/* =========================================================
   REMOVE STANDARD BLOG ELEMENTS ON GUIDES
   ========================================================= */

.vb-guide-page .entry-meta,
.vb-guide-page .entry-meta-footer,
.vb-guide-page .entry-category,
.vb-guide-page .entry-tags {
    display: none;
}

.vb-guide-page .entry-author,
.vb-guide-page .author-box,
.vb-guide-page .blog-author {
    display: none;
}

.vb-guide-page .navigation-post,
.vb-guide-page .post-navigation,
.vb-guide-page .nav-links {
    display: none;
}

.vb-guide-page .blog-share,
.vb-guide-page .share-icons {
    display: none;
}


/* =========================================================
   LONG LINKS
   ========================================================= */

.vb-guide-page a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 549px) {

    .vb-guide-page .vb-guide-lead {
        font-size: 18px;
    }

    .vb-guide-page .vb-guide-box,
    .vb-guide-page .vb-guide-toc,
    .vb-guide-page .vb-guide-checklist,
    .vb-guide-page .vb-guide-cta {
        padding: 18px;
    }

    .vb-guide-page .vb-guide-cta h2 {
        font-size: 24px;
    }

    .vb-guide-page .vb-guide-cta p {
        font-size: 15px;
    }

    .vb-guide-page .vb-guide-cta-button {
        height: 46px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 15px;
    }

}