/* News Showcase Styles */
#news-showcase {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}

.article-card {
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.article-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
}

.article-card h2 {
    margin-bottom: 10px;
    color: var(--accent-color);
    font-size: 1.2em;
}

.article-card-date {
    font-size: 0.9em;
    color: #aaa;
}

@media (max-width: 992px) {
    .article-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .article-list {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* Article Editor Styles */
.editor-container {
    width: 100%;
    max-width: 900px;
    margin: 20px auto; /* Add margin since it's outside main */
    padding: 20px;
    background-color: var(--card-bg-color);
    border-radius: 8px;
}

.editor-container #article-form .form-group {
    margin-bottom: 20px;
}

.editor-container #article-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

.editor-container #article-form input[type="text"],
.editor-container #article-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: #333;
    color: var(--text-color);
}

.editor-container #article-form input[type="file"] {
    padding: 5px 0;
}

.editor-container #article-form .file-preview {
    margin-top: 10px;
    border: 1px dashed var(--border-color);
    padding: 10px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.editor-container #article-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
}

.editor-container #article-form button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.editor-container #article-form .button-draft {
    background-color: #6c757d; /* Gray */
    color: white;
}

.editor-container #article-form .button-draft:hover {
    background-color: #5a6268;
}

.editor-container #article-form .button-submit {
    background-color: var(--accent-color);
    color: white;
}

.editor-container #article-form .button-submit:hover {
    background-color: #2563eb;
}

.editor-container #article-form .button-publish {
    background-color: #28a745; /* Green */
    color: white;
}

.editor-container #article-form .button-publish:hover {
    background-color: #218838;
}

.editor-container #article-form .button-delete {
    background-color: #dc3545; /* Red */
    color: white;
    margin-right: auto; /* Push other buttons to the right */
}

.editor-container #article-form .button-delete:hover {
    background-color: #c82333;
}

/* Responsive images within editor and article body */
#editor img,
.article-body img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents extra space below image */
    margin: 10px 0; /* Add some vertical spacing */
    border-radius: 4px;
}



/* Article Full View Styles */
.article-full {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--card-bg-color);
    border-radius: 8px;
}

.article-full-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
}

.article-full h1 {
    color: var(--accent-color);
    margin-bottom: 10px;
}

.article-meta {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.article-body {
    line-height: 1.6;
    color: var(--text-color);
}

.article-body p {
    margin-bottom: 1em;
}

.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px 0;
    border-radius: 4px;
}

.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 {
    color: var(--accent-color);
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 {
    color: var(--accent-color);
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.article-body ul {
    margin-left: 20px;
    margin-bottom: 1em;
    list-style-type: disc; /* Default disc for unordered lists */
}

.article-body ol {
    margin-left: 20px;
    margin-bottom: 1em;
    list-style-type: decimal; /* Default decimal for ordered lists */
}

.article-body li {
    margin-bottom: 0.5em;
}

.moderation-panel {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #333;
}

.moderation-panel h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

.moderation-panel button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.moderation-panel .button-approve {
    background-color: #28a745; /* Green */
    color: white;
}

.moderation-panel .button-approve:hover {
    background-color: #218838;
}

.moderation-panel .button-reject {
    background-color: #dc3545; /* Red */
    color: white;
}

.moderation-panel .button-reject:hover {

    background-color: #c82333;

}



/* Custom Editor Toolbar */

.editor-toolbar {

    background-color: #3a3a3a;

    border: 1px solid var(--border-color);

    border-bottom: none;

    padding: 5px;

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

}



.editor-toolbar button {

    background: transparent;

    border: 1px solid transparent;

    color: #eee;

    padding: 5px 10px;

    margin-right: 5px;

    cursor: pointer;

    border-radius: 3px;

    font-family: sans-serif; /* Use a simple font for icons */

}



.editor-toolbar button:hover {

    background-color: #555;

    border-color: var(--border-color);

}



/* Custom Editor Content Area */

#editor {

    border: 1px solid var(--border-color);

    padding: 15px;

    min-height: 400px;

    background-color: #333;

    color: var(--text-color);

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px;

    outline: none; /* Remove focus outline */

}



#editor h1, #editor h2, #editor h3, #editor h4, #editor h5, #editor h6 {

    color: var(--accent-color);

    margin-top: 1em;

    margin-bottom: 0.5em;

}

/* Styles for news category navigation */
.news-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.news-navigation a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.news-navigation a:hover,
.news-navigation a.active {
    background-color: var(--accent-color);
    color: white;
}