/*
MUSAFIRCAB-V8.1J.1G-BLOG-READING-UX
Scoped public Blog Detail typography only.
*/
.msc-blog-reading{
    --msc-ink:#102b45;
    --msc-muted:#5f7183;
    --msc-line:#e6edf3;
    --msc-accent:#f59e0b;
    --msc-accent2:#e84b3c;
    color:var(--msc-ink);
    font-size:16px;
    line-height:1.7;
    letter-spacing:.002em;
    overflow-wrap:anywhere;
}
.msc-blog-reading > :first-child{margin-top:0!important}
.msc-blog-reading > :last-child{margin-bottom:0!important}

.msc-blog-reading p{
    margin:0 0 13px!important;
    line-height:1.7!important;
}
.msc-blog-reading p:empty{display:none!important}
.msc-blog-reading p:has(> br:only-child){display:none!important}

.msc-blog-reading h2{
    position:relative;
    margin:28px 0 11px!important;
    padding-left:13px!important;
    color:#0b2d49!important;
    font-size:clamp(22px,2vw,29px)!important;
    line-height:1.28!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
}
.msc-blog-reading h2:before{
    content:"";
    position:absolute;
    left:0;
    top:.15em;
    width:4px;
    height:1.06em;
    border-radius:99px;
    background:linear-gradient(180deg,var(--msc-accent),var(--msc-accent2));
}

.msc-blog-reading h3{
    margin:22px 0 9px!important;
    color:#173f60!important;
    font-size:clamp(18px,1.55vw,22px)!important;
    line-height:1.35!important;
    font-weight:800!important;
    letter-spacing:-.012em!important;
}
.msc-blog-reading h4{
    margin:18px 0 8px!important;
    color:#234e6e!important;
    font-size:17px!important;
    line-height:1.4!important;
    font-weight:800!important;
}

.msc-blog-reading ul,
.msc-blog-reading ol{
    margin:7px 0 14px!important;
    padding-left:24px!important;
}
.msc-blog-reading li{
    margin:4px 0!important;
    padding-left:3px!important;
    line-height:1.6!important;
}
.msc-blog-reading li > p{
    margin:0!important;
    padding:0!important;
    line-height:1.6!important;
}
.msc-blog-reading li::marker{color:#df4c3e}

.msc-blog-reading strong{
    color:#0d2d46;
    font-weight:750;
}
.msc-blog-reading a{
    color:#0b6fd3;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
}
.msc-blog-reading a:hover{color:#084f98}

.msc-blog-reading blockquote{
    margin:18px 0!important;
    padding:13px 16px!important;
    border:1px solid #dce8f1!important;
    border-left:4px solid #0d7893!important;
    border-radius:10px!important;
    background:#f6fbfd!important;
    color:#365268!important;
}
.msc-blog-reading blockquote > :last-child{margin-bottom:0!important}

.msc-blog-reading .msc-reading-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:17px 0;
}
.msc-blog-reading table{
    width:100%!important;
    margin:17px 0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    border:1px solid #dfe8ef!important;
    border-radius:11px!important;
    overflow:hidden!important;
    background:#fff!important;
    font-size:14px!important;
}
.msc-blog-reading .msc-reading-table-wrap > table{margin:0!important}
.msc-blog-reading th,
.msc-blog-reading td{
    padding:10px 11px!important;
    border-right:1px solid #e8eef3!important;
    border-bottom:1px solid #e8eef3!important;
    vertical-align:top!important;
}
.msc-blog-reading th{
    background:#f3f7fb!important;
    color:#163a57!important;
    font-weight:800!important;
}
.msc-blog-reading tr:last-child td{border-bottom:0!important}
.msc-blog-reading th:last-child,
.msc-blog-reading td:last-child{border-right:0!important}

.msc-blog-reading img{
    max-width:100%!important;
    height:auto!important;
    border-radius:12px!important;
}
.msc-blog-reading figure{margin:18px 0!important}
.msc-blog-reading figcaption{
    margin-top:7px!important;
    color:#718397!important;
    font-size:13px!important;
    line-height:1.45!important;
}
.msc-blog-reading hr{
    margin:24px 0!important;
    border:0!important;
    border-top:1px solid var(--msc-line)!important;
}

/* Itinerary-specific enhancement without changing stored HTML */
.msc-blog-reading .msc-day-heading{
    margin:24px 0 11px!important;
    padding:12px 14px!important;
    border:1px solid #e3eaf0!important;
    border-left:4px solid #f59e0b!important;
    border-radius:10px!important;
    background:linear-gradient(90deg,#fff8e8 0%,#fff 72%)!important;
    box-shadow:0 7px 20px rgba(18,52,82,.04)!important;
}
.msc-blog-reading .msc-day-heading:before{display:none!important}
.msc-blog-reading .msc-overnight-line{
    display:block;
    margin:13px 0 16px!important;
    padding:9px 11px!important;
    border:1px solid #dce8f1!important;
    border-radius:9px!important;
    background:#f2f8fc!important;
    color:#173d5b!important;
}

@media(max-width:767px){
    .msc-blog-reading{font-size:15.5px;line-height:1.68}
    .msc-blog-reading p{margin-bottom:11px!important}
    .msc-blog-reading h2{margin-top:24px!important;padding-left:12px!important}
    .msc-blog-reading h3{margin-top:20px!important}
    .msc-blog-reading ul,
    .msc-blog-reading ol{padding-left:21px!important;margin-bottom:13px!important}
    .msc-blog-reading li{margin:4px 0!important}
    .msc-blog-reading .msc-day-heading{padding:10px 11px!important}
}

@media(prefers-reduced-motion:no-preference){
    .msc-blog-reading a,
    .msc-blog-reading .msc-day-heading{transition:.18s ease}
    .msc-blog-reading .msc-day-heading:hover{
        transform:translateY(-1px);
        box-shadow:0 10px 25px rgba(18,52,82,.07)!important;
    }
}
