/* assets/css/blog1.css */

/* Blog Hero Section */
.blog-hero {
    background: transparent; /* Matches blog.css: background: 0 */
    color: var(--purple, #6a0dad); /* From blog.css */
    padding: 120px 0 0; /* From blog.css: padding-top: 120px, padding-bottom: 0 */
    text-align: center;
}

.blog-hero .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.blog-hero h2 {
    font-size: 3rem; /* Matches blog.css: .blog-page-hero h1 */
    margin-bottom: 1rem;
    color: var(--dark, #1a3c6d); /* Fallback to align with blog theme */
    text-align: left;
}

.blog-hero p {
    font-size: 1.1rem;
    color: var(--gray, #6c757d); /* From blog.css */
    text-align: left;
}

/* Blog Container */
.blog-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.blog-title {
    font-size: 2rem; /* Slightly smaller than blog.css section-title */
    color: var(--dark, #1a3c6d);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Replaces inline margin-left: 1.5rem */
    font-size: 0.9rem;
    color: var(--gray, #6c757d); /* Matches blog.css: .blog-card-meta */
    margin-bottom: 2rem;
}

.blog-meta span {
    display: flex;
    align-items: center;
}

.blog-meta i {
    margin-right: 0.3rem; /* Matches blog.css: .blog-card-meta i */
    color: var(--purple, #6a0dad);
}

.blog-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark, #333);
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content strong {
    font-weight: 600;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Matches blog.css: .blog-card */
    margin: 1.5rem 0;
}

.blog-content h2 {
    font-size: 1.8rem;
    color: var(--dark, #1a3c6d);
    font-weight: 600;
    margin: 2rem 0 1rem;
}

.blog-content h3 {
    font-size: 1.4rem;
    color: #000000;
    font-weight: 600;
    margin: 1.5rem 0 1rem;
}

.blog-content ul, .blog-content ol {
    margin: 1rem 0 1.5rem 2rem;
}

.blog-content ul li, .blog-content ol li {
    margin-bottom: 0.75rem;
}

/* Color Card */
.color-card {
    padding: 1.5rem;
    border-radius: 8px; /* Matches blog.css: .blog-card */
    color: var(--white, #fff);
    margin: 1.5rem 0;
    box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1)); /* Matches blog.css */
}

.color-card.blue {
    background-color: #ffffff; /* From blog.php inline style */
    box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
}

.color-card.green {
    background-color: #ffffff; /* From blog.php */
    box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
}

.color-card.red {
    background-color: #ffffff; /* From blog.php */
    box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
}

.color-card h3 {
    font-size: 1.3rem; /* Matches blog.css: .blog-card-title */
    margin-bottom: 0.75rem;
}

.color-card p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Case Study */
.case-study {
    background: var(--white, #fff);
    padding: 1.5rem; /* Matches blog.css: .blog-card-content */
    border-left: 4px solid var(--purple, #6a0dad); /* Matches blog.css accent */
    border-radius: 4px;
    margin: 1.5rem 0;
    box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
}

.case-study h3 {
    font-size: 1.4rem;
    color: var(--dark, #1a3c6d);
    margin-bottom: 1rem;
}

.case-study ul {
    margin-left: 1.5rem;
}

.case-study ul li {
    margin-bottom: 0.5rem;
}

/* Checklist */
.checklist {
    margin: 1.5rem 0;
}

.checklist ul, .checklist ol {
    margin-left: 2rem;
}

.checklist ul li, .checklist ol li {
    margin-bottom: 0.75rem;
}
p {
    margin-bottom: 15px;
    color: #ffffff;
}

/* Table */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.blog-content table th, .blog-content table td {
    border: 1px solid var(--gray, #ddd);
    padding: 0.75rem;
    text-align: left;
}

.blog-content table th {
    background: var(--white, #f4f7fa);
    font-weight: 600;
    color: var(--dark, #1a3c6d);
}

.blog-content table td {
    color: var(--dark, #333);
}

/* Call-to-Action Section */
.cta-section {
    text-align: center;
    margin: 3rem 0; /* From blog.php inline style */
}

.cta-section .btn {
    display: inline-block;
    padding: 1rem 2rem; /* From blog.php inline style */
    font-size: 1.1rem; /* From blog.php */
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.cta-section .btn-blue {
    background: var(--purple, #6a0dad); /* Matches blog.css: .read-more */
    color: var(--white, #fff);
}

.cta-section .btn-blue:hover {
    background: var(--dark, #4a0a8d); /* Darker purple for hover */
}

.cta-section p {
    margin-top: 1rem;
    font-size: 0.9rem; /* From blog.php inline style */
    color: var(--gray, #6c757d); /* Matches blog.css */
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-hero {
        padding: 80px 0 0;
    }

    .blog-hero h2 {
        font-size: 2.5rem; /* Matches blog.css */
    }

    .blog-hero p {
        font-size: 1rem;
    }

    .blog-title {
        font-size: 1.8rem;
    }

    .blog-content {
        font-size: 1rem;
    }

    .blog-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .blog-hero {
        padding: 60px 0 0; /* Matches blog.css: 3rem 0 */
    }

    .blog-hero h2 {
        font-size: 2rem; /* Matches blog.css */
    }

    .blog-hero p {
        font-size: 0.9rem; /* Matches blog.css */
    }

    .blog-title {
        font-size: 1.6rem;
    }

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

    .blog-content h3 {
        font-size: 1.3rem;
    }
}