/*
Theme Name: Newspanel
Version: 1.0
*/
/* --- Reset --- */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: sans-serif; }

/* --- Header Layout --- */
.site-header { border-bottom: 1px solid #eee; padding: 10px 0; }

.desktop-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 1170px; 
    margin: 0 auto; 
    padding: 0 15px; 
}

/* --- Menu (Fixing Screenshot 2026-06-04 221532.png) --- */
#menu-main { 
    display: flex !important; 
    list-style: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    gap: 25px !important; 
}

#menu-main li a { 
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 14px; 
}

/* --- Search Icon --- */
.search-icon-btn { 
    background: #f4f4f4; 
    border: 1px solid #ddd; 
    padding: 8px 12px; 
    cursor: pointer; 
    border-radius: 4px; 
}

/* --- Mobile Header --- */
.mobile-header { display: none; }

@media (max-width: 768px) {
    .desktop-header { display: none !important; }
    .mobile-header { display: flex !important; align-items: center; justify-content: space-between; padding: 10px; }
}



/* --- Hero Grid --- */
.hero-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr; 
    /* Changed from 250px 250px to 200px 200px to reduce height */
    grid-template-rows: 200px 200px; 
    gap: 15px; 
    max-width: 1170px; 
    margin: 20px auto; 
    padding: 0 15px;
}

.hero-grid article { 
    position: relative; 
    overflow: hidden; 
    border-radius: 8px; 
}

.hero-grid article img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/* --- Overlays --- */
.img-wrap { position: relative; display: block; width: 100%; height: 100%; }

.cat-overlay { 
    position: absolute; top: 10px; left: 10px; background: #000; 
    color: #fff; padding: 3px 8px; font-size: 11px; font-weight: bold; text-transform: uppercase; z-index: 2;
}

.title-overlay { 
    position: absolute; bottom: 0; left: 0; width: 100%; 
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); 
    color: #fff; padding: 15px 10px 10px; font-size: 14px; font-weight: bold; line-height: 1.2; z-index: 1;
}

/* --- Responsive Hero --- */
@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .hero-grid article { height: 200px; }
}







/* --- Main Content & Blog Feed --- */
.site-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    max-width: 1170px;
    margin: 40px auto;
    padding: 0 15px;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.post-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.post-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.post-content { 
    padding: 15px;
    min-height: 120px; /* Ensures the box doesn't collapse if text is short */
}

.post-content h2 { 
    font-size: 18px; 
    margin: 0 0 10px 0; 
    color: #333; 
    line-height: 1.3;
}

.post-content p { 
    font-size: 14px; 
    color: #555; 
    margin: 0; 
    line-height: 1.5;
}

/* --- Pagination --- */
.pagination {
    margin: 40px 0;
    text-align: center;
}

.pagination .page-numbers {
    padding: 8px 15px;
    border: 1px solid #ddd;
    margin: 0 5px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}

.pagination .current { background: #333; color: #fff; }

/* --- Responsive Feed --- */
@media (max-width: 768px) {
    .site-container { grid-template-columns: 1fr; }
    .content-grid { grid-template-columns: 1fr; }
}


/* --- Footer --- */
.site-footer { 
    margin-top: 50px; 
    padding: 40px 0; 
    border-top: 1px solid #eee; 
    background: #f9f9f9; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns */
    gap: 20px; 
    align-items: center; 
}

.footer-menu-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: flex-end; 
    gap: 20px; 
}

.footer-menu-list li a { 
    text-decoration: none; 
    color: #666; 
    font-size: 14px; 
}

/* --- Responsive Footer --- */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-menu-list { justify-content: center; }
}

/* --- Sidebar Styling --- */
.sidebar { 
    padding: 0; 
}

.sidebar-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

/* Style the individual widgets */
.widget { 
    background: #fff; 
    padding: 20px; 
    border: 1px solid #eee; 
    border-radius: 8px; 
    margin-bottom: 20px; 
}

.widget h2, .widget .widget-title { 
    font-size: 16px; 
    text-transform: uppercase; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 10px; 
    margin-bottom: 15px; 
    color: #333; 
}

/* Style list items inside widgets (like Recent Posts or Categories) */
.widget ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.widget ul li { 
    margin-bottom: 10px; 
    border-bottom: 1px solid #f9f9f9; 
    padding-bottom: 5px; 
}

.widget ul li a { 
    text-decoration: none; 
    color: #555; 
    font-size: 14px; 
}

.widget ul li a:hover { color: #000; }



/* --- Single Post Page Layout --- */
.single-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    max-width: 1170px;
    margin: 40px auto;
    padding: 0 15px;
}

/* Post Header */
.breadcrumb { font-size: 13px; color: #888; margin-bottom: 10px; }
.post-title { font-size: 32px; margin: 0 0 20px 0; line-height: 1.2; }
.meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.author-info { display: flex; align-items: center; gap: 10px; }
.author-avatar { border-radius: 50%; }
.post-category a { background: #000; padding: 5px 12px; border-radius: 4px; font-size: 12px; text-transform: uppercase; }

/* Content */
.featured-image img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; }
.entry-content p { font-size: 17px; line-height: 1.8; color: #333; margin-bottom: 20px; }

/* Related Posts */
.related-posts-section { margin: 50px 0; padding-top: 30px; border-top: 2px solid #000; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

/* Navigation & Responsive */
@media (max-width: 768px) {
    .single-container { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .post-navigation { flex-direction: column; gap: 20px; text-align: center; }
    .nav-prev, .nav-next { width: 100% !important; justify-content: center !important; }
}