/**
 * Sampark Group - Service Details Stylesheet
 * Refined typography, bullet points, sub-points, headings, and structured content formatting
 */

/* Main Container Text Alignment & Font */
.service-details-content,
.post-single__main {
    text-align: left !important;
    color: #374151;
    font-size: 16px;
    line-height: 1.8;
}

/* Page Title Enhancement */
.post-single__title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}

@media (max-width: 767px) {
    .post-single__title {
        font-size: 1.5rem !important;
    }
}

/* Lead Summary Callout Card */
.service-lead-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f2fe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #0066cc;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
}

.service-lead-card .service-lead-icon {
    font-size: 1.4rem;
    color: #0066cc;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.service-lead-card .service-lead-text {
    font-size: 1.05rem;
    color: #1e3a8a;
    font-weight: 500;
    line-height: 1.65;
    margin: 0;
}

.service-lead-card .service-lead-text p {
    margin: 0;
    color: #1e3a8a;
    font-weight: 500;
}

/* Content Paragraphs */
.service-details-content p,
.post-single__main p {
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 1.35rem !important;
    color: #374151;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.01em;
}

.service-details-content strong,
.post-single__main strong {
    font-weight: 600;
    color: #111827;
}

/* Headings Hierarchy */
.service-details-content h2,
.post-single__main h2,
.service-details-content h3,
.post-single__main h3 {
    text-align: left !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.35 !important;
    padding-left: 0.9rem !important;
    border-left: 4px solid #0066cc !important;
    position: relative;
    letter-spacing: -0.01em;
}

.service-details-content h4,
.post-single__main h4 {
    text-align: left !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-top: 1.6rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

.service-details-content h5,
.post-single__main h5 {
    text-align: left !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
}

/* Bullet Points (Unordered Lists) */
.service-details-content ul,
.post-single__main ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 1.75rem 0 !important;
    text-align: left !important;
}

.service-details-content ul > li,
.post-single__main ul > li {
    display: block !important;
    position: relative !important;
    padding-left: 2rem !important;
    margin-bottom: 0.85rem !important;
    line-height: 1.7 !important;
    color: #374151 !important;
    font-size: 15.5px !important;
    text-align: left !important;
}

/* Stylish Bullet Marker */
.service-details-content ul > li::before,
.post-single__main ul > li::before {
    content: '' !important;
    position: absolute !important;
    left: 0.35rem !important;
    top: 0.55rem !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18) !important;
}

/* Sub-points / Nested Lists */
.service-details-content ul ul,
.post-single__main ul ul,
.service-details-content ol ul,
.post-single__main ol ul {
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
    margin-left: 0.5rem !important;
    padding-left: 1.25rem !important;
    border-left: 2px dashed #cbd5e1 !important;
}

.service-details-content ul ul > li,
.post-single__main ul ul > li,
.service-details-content ol ul > li,
.post-single__main ol ul > li {
    display: block !important;
    position: relative !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.55rem !important;
    font-size: 14.5px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
}

/* Sub-bullet Marker */
.service-details-content ul ul > li::before,
.post-single__main ul ul > li::before,
.service-details-content ol ul > li::before,
.post-single__main ol ul > li::before {
    content: '' !important;
    position: absolute !important;
    left: 0.25rem !important;
    top: 0.58rem !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 1px !important;
    background-color: #0284c7 !important;
    box-shadow: none !important;
}

/* Numbered Process Steps (Ordered Lists) */
.service-details-content ol,
.post-single__main ol {
    counter-reset: service-step-counter !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1.25rem 0 1.85rem 0 !important;
    text-align: left !important;
}

.service-details-content ol > li,
.post-single__main ol > li {
    counter-increment: service-step-counter !important;
    display: block !important;
    position: relative !important;
    padding-left: 3rem !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.7 !important;
    color: #374151 !important;
    font-size: 15.5px !important;
    text-align: left !important;
}

/* Number Badge */
.service-details-content ol > li::before,
.post-single__main ol > li::before {
    content: counter(service-step-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.05rem !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 102, 204, 0.25) !important;
    line-height: 1 !important;
}

/* Nested Ordered Lists within Steps */
.service-details-content ol ol,
.post-single__main ol ol {
    counter-reset: sub-step-counter !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
    margin-left: 0.5rem !important;
    padding-left: 1.25rem !important;
    border-left: 2px dashed #cbd5e1 !important;
}

.service-details-content ol ol > li,
.post-single__main ol ol > li {
    counter-increment: sub-step-counter !important;
    padding-left: 2rem !important;
    font-size: 14.5px !important;
}

.service-details-content ol ol > li::before,
.post-single__main ol ol > li::before {
    content: counter(service-step-counter) "." counter(sub-step-counter) !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: #0066cc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Highlight / Callout Box */
.service-callout-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0066cc;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}

.service-callout-box h4 {
    margin-top: 0 !important;
    color: #0066cc !important;
    font-size: 1.15rem !important;
}

.service-callout-box p:last-child {
    margin-bottom: 0 !important;
}

/* Clean up spacing after images and titles */
.post-single__image {
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.post-single__meta {
    padding-bottom: 12px !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Sidebar Enhancement */
.blog-aside__column .blog__aside-item .rounded {
    border: 1px solid #e2e8f0;
}