/* ============================================
   BLOG DETAIL PAGE — HOMOEODENT DENTAL CLINIC
   File: blog-detail.css
   Link this AFTER custom.css
   ============================================ */

:root {
    --blog-primary: #1B3358;     /* change to your brand navy/teal */
    --blog-accent: #C9A24B;      /* change to your brand gold/accent */
    --blog-text: #4A4A4A;
    --blog-heading: #1B1B1B;
    --blog-bg-soft: #F7F8FA;
    --blog-border: #E7E7E7;
}

/* ---------- Page Header ---------- */
.page-header {
    background: linear-gradient(135deg, var(--blog-primary), #0d1b30);
    padding: 70px 0;
}

.page-header-box h1 {
    color: #fff;
    font-weight: 600;
    font-size: 38px;
    line-height: 1.3;
}

.page-header-box h1 span {
    color: var(--blog-accent);
}

/* ---------- Blog Wrapper ---------- */
.page-blog-single {
    background: #fff;
}

/* ---------- Featured Image ---------- */
.post-featured-image {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.post-featured-image img {
    border-radius: 14px;
    transition: transform 0.5s ease;
}

.post-featured-image:hover img {
    transform: scale(1.03);
}

/* ---------- Content Typography ---------- */
.post-single-content {
    font-family: 'Poppins', sans-serif;
    color: var(--blog-text);
    font-size: 16.5px;
    line-height: 1.85;
}

.post-single-content h2 {
    color: var(--blog-heading);
    font-weight: 600;
    font-size: 26px;
    margin-top: 45px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}

.post-single-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: var(--blog-accent);
}

.post-single-content h2:first-of-type {
    margin-top: 0;
}

.post-single-content p {
    margin-bottom: 20px;
}

.post-single-content strong {
    color: var(--blog-primary);
    font-weight: 600;
}

/* ---------- Blockquote ---------- */
.post-single-content blockquote {
    background: var(--blog-bg-soft);
    border-left: 4px solid var(--blog-accent);
    border-radius: 8px;
    padding: 28px 32px;
    margin: 35px 0;
    position: relative;
}

.post-single-content blockquote p {
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    color: var(--blog-heading);
    margin-bottom: 0;
    line-height: 1.6;
}

.post-single-content blockquote::before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 60px;
    color: var(--blog-accent);
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 16px;
    line-height: 1;
}

/* ---------- FAQ Section (AEO) ---------- */
.post-faq-section {
    margin-top: 55px;
    padding-top: 40px;
    border-top: 1px solid var(--blog-border);
}

.post-faq-section > h2 {
    margin-top: 0;
}

.faq-item {
    background: var(--blog-bg-soft);
    border: 1px solid var(--blog-border);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}

.faq-item details {
    padding: 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 50px 18px 22px;
    font-weight: 600;
    font-size: 16.5px;
    color: var(--blog-heading);
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--blog-accent);
    font-weight: 400;
    transition: transform 0.25s ease;
}

.faq-item details[open] summary::after {
    content: "\2212";
}

.faq-item .faq-answer {
    padding: 0 22px 20px 22px;
    color: var(--blog-text);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .page-header {
        padding: 45px 0;
    }

    .page-header-box h1 {
        font-size: 26px;
    }

    .post-single-content {
        font-size: 15.5px;
    }

    .post-single-content h2 {
        font-size: 21px;
    }

    .post-single-content blockquote {
        padding: 20px 22px;
    }

    .post-single-content blockquote p {
        font-size: 16px;
    }

    .faq-item summary {
        font-size: 15px;
        padding: 15px 42px 15px 18px;
    }

    .faq-item .faq-answer {
        font-size: 14.5px;
        padding: 0 18px 16px 18px;
    }
}