/*
==================================================
Rumos Answer

Filename : single.css
File Path: /wp-content/themes/rumos-answer/assets/css/single.css

Build    : 006-006
Version  : 1.0
Author   : Rumos
==================================================
*/

/* ==========================================
   Single Page
========================================== */

.ra-single-page{

    padding:56px 0 96px;

}

/* ==========================================
   Breadcrumb
========================================== */

.ra-breadcrumb{

    max-width:860px;

    margin:0 auto 40px;

    font-size:.85rem;

    color:#6B7280;

}

.ra-breadcrumb a{

    color:#6B7280;

    text-decoration:none;

    transition:color .2s ease;

}

.ra-breadcrumb a:hover{

    color:#5B5CF0;

}

.ra-breadcrumb-separator{

    margin:0 10px;

    color:#D1D5DB;

}

.ra-breadcrumb-current{

    color:#111827;

    font-weight:600;

}

/* ==========================================
   Answer
========================================== */

.ra-answer{

    max-width:860px;

    margin:0 auto;

}

/* ==========================================
   Header
========================================== */

.ra-answer-header{

    margin-bottom:56px;

}

.ra-answer-title{

    margin:0 0 12px;

    color:#111827;

    font-size:3.25rem;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1.2px;

}

.ra-answer-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-top:0;

    color:#6B7280;

    font-size:.95rem;

}

.ra-answer-category{

    color:#5B5CF0;

    font-weight:600;

}

/* ==========================================
   Content
========================================== */

.ra-answer-content{

    color:#374151;

    font-size:1.08rem;

    line-height:1.95;

}

.ra-answer-content > *:first-child{

    margin-top:0;

}

.ra-answer-content p{

    margin:0 0 1.8rem;

}

.ra-answer-content h2{

    margin:3.5rem 0 1.2rem;

    color:#111827;

    font-size:2rem;

    font-weight:800;

    line-height:1.3;

}

.ra-answer-content h3{

    margin:2.75rem 0 1rem;

    color:#111827;

    font-size:1.5rem;

    font-weight:700;

    line-height:1.4;

}

.ra-answer-content ul,
.ra-answer-content ol{

    margin:0 0 2rem 1.5rem;

}

.ra-answer-content li{

    margin-bottom:.8rem;

}

.ra-answer-content a{

    color:#5B5CF0;

    text-decoration:none;

}

.ra-answer-content a:hover{

    text-decoration:underline;

}

.ra-answer-content img{

    display:block;

    max-width:100%;

    height:auto;

    margin:48px auto;

    border-radius:18px;

}

.ra-answer-content blockquote{

    margin:40px 0;

    padding:24px 28px;

    background:#F8FAFC;

    border-left:4px solid #5B5CF0;

    border-radius:12px;

}

.ra-answer-content pre{

    overflow-x:auto;

    margin:40px 0;

    padding:24px;

    background:#111827;

    color:#F9FAFB;

    border-radius:14px;

}

.ra-answer-content code{

    padding:2px 6px;

    background:#F3F4F6;

    border-radius:6px;

    font-family:Consolas, monospace;

}

.ra-answer-content pre code{

    padding:0;

    background:transparent;

    color:inherit;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:768px){

    .ra-single-page{

        padding:40px 0 64px;

    }

    .ra-breadcrumb{

        margin-bottom:24px;

        font-size:.85rem;

    }

    .ra-answer-title{

        font-size:2.2rem;

        line-height:1.2;

    }

    .ra-answer-meta{

        margin-top:18px;

        gap:8px;

    }

    .ra-answer-content{

        font-size:1rem;

        line-height:1.85;

    }

    .ra-answer-content h2{

        font-size:1.7rem;

    }

    .ra-answer-content h3{

        font-size:1.35rem;

    }

}