/* =========================================================
   ROYAL DIGITAL HUB
   BLOG ARTICLE - STANDALONE CSS
   ========================================================= */

.rdh-blog-hero{
    position:relative;
    width:100%;
    min-height:500px;
    display:flex;
    align-items:center;
    overflow:hidden;
    box-sizing:border-box;

    background:
        linear-gradient(
            90deg,
            rgba(50,0,48,.94) 0%,
            rgba(50,0,48,.78) 55%,
            rgba(50,0,48,.40) 100%
        ),
        url("/assets/images/blog/blog-hero-bg.png")
        center center / cover no-repeat;

    color:#fff;
}

.rdh-blog-hero-inner{
    position:relative;
    z-index:2;

    width:min(1180px,92%);
    margin:0 auto;

    padding:70px 0;
}

.rdh-blog-category{
    display:block;
    margin:0 0 18px;

    color:#f3d36b !important;

    font-size:16px;
    line-height:1.5;
    font-weight:700;
}

.rdh-blog-hero h1{
    display:block;

    max-width:900px;

    margin:0 0 22px;
    padding:0;

    color:#fff !important;

    font-size:clamp(2.4rem,5vw,4.4rem);
    line-height:1.08;
    font-weight:800;
}

.rdh-blog-excerpt{
    display:block;

    max-width:850px;

    margin:0 0 22px;

    color:#fff !important;

    font-size:1.15rem;
    line-height:1.75;
}

.rdh-blog-meta{
    display:block;

    margin:0 0 25px;

    color:#fff !important;

    font-size:.95rem;
    line-height:1.6;
}

.rdh-blog-meta span{
    margin:0 8px;

    color:#f3d36b !important;
}

.rdh-blog-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.rdh-blog-primary,
.rdh-blog-secondary{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:13px 22px;

    border-radius:8px;

    text-decoration:none !important;

    font-weight:700;
    line-height:1.2;
}

.rdh-blog-primary{
    background:#f3d36b;
    color:#4d0750 !important;
}

.rdh-blog-secondary{
    border:2px solid #fff;
    color:#fff !important;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.rdh-breadcrumb{
    display:block;

    width:100%;

    background:#f7f5f8;

    border-bottom:1px solid #e5dbe6;
}

.rdh-breadcrumb-inner{
    width:min(1180px,92%);
    margin:0 auto;

    padding:15px 0;

    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:8px;

    font-size:.95rem;
    line-height:1.5;
}

.rdh-breadcrumb-inner a{
    color:#7b1e75 !important;
    text-decoration:none !important;
    font-weight:600;
}

.rdh-breadcrumb-inner a:hover{
    text-decoration:underline !important;
}

.rdh-breadcrumb-inner span{
    color:#666;
}

/* =========================================================
   BLOG BODY
   ========================================================= */

.blog-section{
    background:#f7f5f8;
    padding:60px 0;
}

.blog-section .container{
    width:min(1180px,92%);
    margin:0 auto;
}

.blog-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:30px;
    align-items:start;
}

.blog-content{
    min-width:0;

    background:#fff;

    border-radius:18px;

    padding:45px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    color:#222;
}

.blog-content article{
    color:#222;
}

.blog-content h2{
    margin:45px 0 15px;

    color:#4d0750;

    font-size:2rem;
    line-height:1.25;
}

.blog-content h3{
    margin:30px 0 12px;

    color:#5f1260;

    font-size:1.4rem;
}

.blog-content p{
    margin:0 0 18px;

    color:#222;

    font-size:1.05rem;
    line-height:1.8;
}

.blog-content ul,
.blog-content ol{
    margin:15px 0 25px 25px;
}

.blog-content li{
    margin-bottom:9px;
    line-height:1.65;
}

.blog-intro{
    font-size:1.15rem !important;
    font-weight:500;
}

/* TABLE OF CONTENTS */

.table-of-content{
    margin-bottom:35px;

    padding:25px;

    background:#faf4fa;

    border:1px solid #ead3e9;

    border-radius:14px;
}

.table-of-content h2{
    margin:0 0 15px;

    color:#4d0750;

    font-size:1.4rem;
}

.table-of-content ul{
    margin:0;
    padding-left:20px;
}

.table-of-content a{
    color:#7b1e75 !important;
    font-weight:600;
}

/* SIDEBAR */

.blog-sidebar{
    background:#fff;

    border-radius:16px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.07);
}

.blog-sidebar a{
    color:#7b1e75 !important;
}

/* NOTES */

.blog-note,
.blog-tip{
    margin:25px 0;

    padding:22px;

    border-left:4px solid #7b1e75;

    background:#faf4fa;

    border-radius:8px;
}

.blog-note h4,
.blog-tip h4{
    margin:0 0 8px;

    color:#7b1e75;
}

/* CTA */

.blog-cta{
    margin-top:40px;

    padding:35px;

    background:#7b1e75;

    border-radius:14px;

    color:#fff;
}

.blog-cta h2,
.blog-cta h3{
    color:#fff !important;
}

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

@media(max-width:850px){

    .rdh-blog-hero{
        min-height:480px;
    }

    .rdh-blog-hero-inner{
        padding:55px 0;
    }

    .rdh-blog-hero h1{
        font-size:2.5rem;
    }

    .rdh-blog-excerpt{
        font-size:1rem;
    }

    .blog-grid{
        grid-template-columns:1fr;
    }

    .blog-content{
        padding:28px 22px;
    }

}

@media(max-width:600px){

    .rdh-blog-hero{
        min-height:520px;
    }

    .rdh-blog-hero-inner{
        padding:45px 0;
    }

    .rdh-blog-hero h1{
        font-size:2.05rem;
    }

    .rdh-blog-category{
        font-size:.9rem;
    }

    .rdh-blog-actions{
        flex-direction:column;
    }

    .rdh-blog-primary,
    .rdh-blog-secondary{
        width:100%;
        text-align:center;
    }

    .blog-content{
        padding:22px 17px;
    }

    .blog-content h2{
        font-size:1.55rem;
    }

}


/* =========================================================
   FINAL BLOG SIDEBAR - PROFESSIONAL + STICKY
   ========================================================= */

.blog-sidebar{
    position:sticky;
    top:25px;

    align-self:start;

    background:#ffffff;

    border:1px solid #eaddea;
    border-radius:18px;

    padding:28px 24px;

    box-shadow:0 12px 35px rgba(77,7,80,.10);

    color:#222;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.blog-sidebar:hover{
    box-shadow:0 16px 42px rgba(77,7,80,.16);
}

/* Sidebar headings */

.blog-sidebar h2,
.blog-sidebar h3{
    margin:0 0 14px;

    color:#4d0750 !important;

    font-size:1.35rem;
    line-height:1.3;

    font-weight:800;
}

/* Service list */

.blog-sidebar ul{
    margin:0 0 25px;
    padding:0;

    list-style:none;
}

.blog-sidebar li{
    margin:0;

    border-bottom:1px solid #f0e8f0;
}

.blog-sidebar li:last-child{
    border-bottom:0;
}

.blog-sidebar li a{
    display:block;

    padding:10px 4px;

    color:#7b1e75 !important;

    text-decoration:none !important;

    font-size:1rem;
    line-height:1.35;

    transition:
        color .2s ease,
        padding-left .2s ease;
}

.blog-sidebar li a:hover{
    color:#4d0750 !important;
    padding-left:9px;
}

/* Website CTA */

.blog-sidebar h3{
    margin-top:22px;
    margin-bottom:10px;

    font-size:1.25rem;
}

.blog-sidebar p{
    margin:0 0 14px;

    color:#444;

    font-size:.98rem;
    line-height:1.6;
}

.blog-sidebar .sidebar-cta,
.blog-sidebar a[href="/contact"]{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:11px 18px;

    border-radius:7px;

    background:#7b1e75;

    color:#fff !important;

    text-decoration:none !important;

    font-weight:700;

    transition:
        background .2s ease,
        transform .2s ease;
}

.blog-sidebar .sidebar-cta:hover,
.blog-sidebar a[href="/contact"]:hover{
    background:#4d0750;
    transform:translateY(-2px);
}

/* Keep sidebar sticky on desktop */

@media(min-width:851px){

    .blog-grid{
        align-items:start;
    }

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

}

/* Mobile: don't make sidebar sticky */

@media(max-width:850px){

    .blog-sidebar{
        position:relative;
        top:auto;

        width:100%;

        margin-top:25px;
    }

}


/* =========================================================
   BLOG COMPARISON TABLES
   ========================================================= */

.blog-content table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;

    margin:30px 0;

    background:#fff;

    border:1px solid #eaddea;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 8px 24px rgba(77,7,80,.07);

    font-size:1rem;
}

.blog-content table th{
    padding:17px 18px;

    background:#7b1e75;

    color:#fff !important;

    font-size:1rem;
    font-weight:800;

    text-align:left;

    border-bottom:2px solid #651562;
}

.blog-content table td{
    padding:15px 18px;

    color:#333 !important;

    line-height:1.55;

    border-bottom:1px solid #eee4ef;

    vertical-align:top;
}

.blog-content table tr:last-child td{
    border-bottom:none;
}

.blog-content table tr:nth-child(even) td{
    background:#fbf8fc;
}

.blog-content table tr:hover td{
    background:#f5edf6;
}

/* First column */

.blog-content table td:first-child,
.blog-content table th:first-child{
    font-weight:700;
}

/* Comparison table emphasis */

.blog-content table td:nth-child(2){
    color:#b42318 !important;
}

.blog-content table td:nth-child(3){
    color:#24743a !important;
}

/* =========================================================
   BLOG CTA - FIX TEXT VISIBILITY
   ========================================================= */

.blog-content .blog-cta{
    margin-top:45px;

    padding:40px 35px;

    background:
        linear-gradient(
            135deg,
            #7b1e75,
            #5a1258
        );

    border-radius:18px;

    box-shadow:0 12px 35px rgba(77,7,80,.18);

    color:#fff !important;
}

.blog-content .blog-cta h2,
.blog-content .blog-cta h3{
    margin-top:0;

    margin-bottom:15px;

    color:#fff !important;

    font-size:2rem;
    line-height:1.25;
}

.blog-content .blog-cta p{
    margin:0 0 20px;

    color:#fff !important;

    font-size:1.08rem;
    line-height:1.8;
}

.blog-content .blog-cta a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 22px;

    background:#f3d36b;

    color:#4d0750 !important;

    border-radius:8px;

    text-decoration:none !important;

    font-weight:800;

    transition:
        transform .2s ease,
        background .2s ease;
}

.blog-content .blog-cta a:hover{
    background:#fff;

    color:#4d0750 !important;

    transform:translateY(-2px);
}


/* =========================================================
   NOTES / HIGHLIGHT BOXES
   ========================================================= */

.blog-content .blog-note,
.blog-content .blog-tip{
    background:#faf4fa;

    border-left:4px solid #7b1e75;

    border-radius:10px;

    padding:22px 24px;

    margin:28px 0;
}

.blog-content .blog-note h4,
.blog-content .blog-tip h4{
    margin:0 0 8px;

    color:#7b1e75 !important;
}

.blog-content .blog-note p,
.blog-content .blog-tip p{
    margin-bottom:0;
}


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

@media(max-width:700px){

    .blog-content table{
        display:block;

        overflow-x:auto;

        white-space:normal;
    }

    .blog-content table th,
    .blog-content table td{
        min-width:150px;

        padding:13px 14px;

        font-size:.95rem;
    }

    .blog-content .blog-cta{
        padding:30px 22px;
    }

    .blog-content .blog-cta h2{
        font-size:1.6rem;
    }

}