/* article.css */

/* Global styles (like --primary-color, --spacing-md etc.) are assumed to be loaded from style.css */

/* ========== Article Page Specific Styles ========== */
.landing.article-page {
    padding-top: var(--spacing-xxl); /* Adjust top padding for article pages */
    padding-bottom: var(--spacing-xxl); /* Adjust bottom padding */
    text-align: center; /* Center the main article section on the page */
}

/* Ensure article takes up appropriate width within the landing container */
.landing.article-page article {
    max-width: 800px; /* Max width for article content for readability */
    margin: 0 auto; /* Center the article content */
    text-align: left; /* Reset text alignment for article content itself */
}

/* Article Header */
.article-header {
    margin-bottom: var(--spacing-xxxl);
    padding: var(--spacing-lg); /* Some padding around the header content */
    animation: fadeUp 0.9s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
    will-change: transform, opacity;
    animation-fill-mode: forwards;
}

.article-header h1 {
    font-size: 3.2rem; /* Larger title for articles */
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    text-align: center; /* Center the main article title */
}

.article-header .article-meta {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin-bottom: var(--spacing-xl); /* Space below meta info */
    text-align: center; /* Center meta info */
}

.article-header .article-meta .author {
    font-weight: 600;
    color: var(--primary-color);
}

.hero-img {
    margin: var(--spacing-xxl) auto; /* Space around the hero image */
    max-width: 100%;
    border-radius: var(--border-radius-large);
    overflow: hidden; /* Ensure image border-radius applies */
    box-shadow: var(--box-shadow-medium);
}

.hero-img img {
    width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
}


/* ========== Article Content Styling ========== */
.article-content {
    background: var(--bg-color); /* Maintain light background for content area */
    padding: var(--spacing-xxxl);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-light);
    line-height: 1.8; /* Good line height for readability */
    font-size: 1.05rem; /* Slightly larger base font size */
    color: var(--text-color);
}

.article-content p {
    margin-bottom: var(--spacing-xl); /* Consistent spacing between paragraphs */
}

.article-content h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: var(--spacing-xxxl); /* More space above H2s */
    margin-bottom: var(--spacing-xl); /* Space below H2s */
    line-height: 1.3;
}

.article-content h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: var(--spacing-xxl); /* Space above H3s */
    margin-bottom: var(--spacing-md); /* Space below H3s */
}

.article-content ul {
    list-style: disc; /* Default disc bullets */
    margin-left: var(--spacing-xxl); /* Indent lists */
    margin-bottom: var(--spacing-xl);
    padding: 0;
}

.article-content ul li {
    margin-bottom: var(--spacing-sm); /* Space between list items */
}

/* Images within article content */
.article-image {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures it acts as a block element */
    margin: var(--spacing-xxl) auto; /* Center image with vertical spacing */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
}

/* Adjustments for the form-box within article */
.form-box.article-form {
    margin-top: var(--spacing-xxxl);
    margin-bottom: var(--spacing-xl); /* Less space at the bottom if it's the last element */
    box-shadow: var(--box-shadow-light); /* Lighter shadow for less prominence */
}


/* ========== Responsive Adjustments for Article Page ========== */
@media (max-width: 992px) {
    .article-header h1 {
        font-size: 2.8rem;
    }
    .article-content {
        font-size: 1rem;
        padding: var(--spacing-xxl);
    }
    .article-content h2 {
        font-size: 1.8rem;
        margin-top: var(--spacing-xxl);
    }
    .article-content h3 {
        font-size: 1.4rem;
        margin-top: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .landing.article-page {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .article-header h1 {
        font-size: 2.2rem;
    }
    .article-header .article-meta {
        font-size: 0.85rem;
    }
    .article-content {
        padding: var(--spacing-xl);
        font-size: 0.95rem;
    }
    .article-content h2 {
        font-size: 1.6rem;
        margin-top: var(--spacing-xl);
    }
    .article-content h3 {
        font-size: 1.2rem;
        margin-top: var(--spacing-lg);
    }
    .article-content ul {
        margin-left: var(--spacing-xl);
    }
    .form-box.article-form {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 480px) {
    .article-header h1 {
        font-size: 1.8rem;
    }
    .article-content {
        padding: var(--spacing-md);
    }
    .article-content h2 {
        font-size: 1.4rem;
    }
    .article-content h3 {
        font-size: 1rem;
    }
    .article-content p {
        margin-bottom: var(--spacing-lg);
    }
}