/*
Theme Name: PoliticsDaily360
Theme URI: http://example.com/
Author: Arib Umar
Description: A responsive news and magazine theme focused on Indian politics. Clean design, red and white color scheme.
Version: 1.0
Text Domain: politicsdaily360
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ==========================================================================
   1. Base & Reset
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; background-color: #f7f7f7; color: #222; line-height: 1.6; }
a { text-decoration: none; color: #d32f2f; transition: 0.3s; }
a:hover { color: #b71c1c; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ==========================================================================
   2. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-bottom: 15px; color: #111; line-height: 1.3; }
p { margin-bottom: 20px; }

/* ==========================================================================
   3. Top Bar (Thin black bar)
   ========================================================================== */
.top-thin-bar { background: #1a1a1a; height: 30px; width: 100%; }

/* ==========================================================================
   4. Header & Logo
   ========================================================================== */
.site-header { background: #e60000; color: #fff; padding: 10px 0; }
.main-header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.site-branding { flex: 1; min-width: 200px; }
.site-branding img { max-height: 50px; }
.logo-fallback { font-family: sans-serif; }
.menu-toggle { display: none; background: #b71c1c; color: #fff; border: 1px solid #fff; padding: 5px 15px; cursor: pointer; font-size: 24px; border-radius: 3px; }

/* ==========================================================================
   5. Navigation
   ========================================================================== */
.primary-navigation { display: flex; align-items: center; }
.primary-navigation ul { display: flex; margin: 0; padding: 0; list-style: none; }
.primary-navigation ul li a { color: #fff; padding: 15px 15px; font-weight: 600; font-size: 15px; text-transform: uppercase; }
.primary-navigation ul li a:hover { background: rgba(0,0,0,0.1); color: #fff; }
.header-search-icon { color: #fff; margin-left: 15px; font-size: 18px; }

.sub-navigation-wrap { background: #e0e0e0; border-bottom: 2px solid #ccc; overflow-x: auto; }
.sub-navigation ul { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; white-space: nowrap; }
.sub-navigation ul li { list-style: none; padding: 0; }
.sub-navigation ul li a { display: block; padding: 10px 15px; color: #333; font-size: 14px; font-weight: 500; }
.sub-navigation ul li a:hover { color: #e60000; }

/* ==========================================================================
   6. News Ticker
   ========================================================================== */
.breaking-news { background: #fff; border-bottom: 1px solid #eaeaea; display: flex; align-items: center; padding: 0; font-size: 14px; margin-bottom: 20px; overflow: hidden; }
.breaking-title { background: #d32f2f; color: #fff; padding: 10px 20px; font-weight: bold; text-transform: uppercase; white-space: nowrap; position: relative; }
.breaking-ticker { padding: 10px 20px; overflow: hidden; width: 100%; }
.breaking-ticker marquee { color: #333; font-weight: 500; }

/* ==========================================================================
   7. Main Layout (Sidebar & Content)
   ========================================================================== */
.site-content { padding: 30px 0; }
.row { display: flex; margin: 0 -15px; flex-wrap: wrap; }
.main-column { width: 66.66%; padding: 0 15px; }
.sidebar-column { width: 33.33%; padding: 0 15px; }
@media(max-width: 991px) {
    .main-column, .sidebar-column { width: 100%; }
    
    /* Header Responsive Fixes */
    .menu-toggle { display: block; }
    .primary-navigation { width: 100%; margin-top: 15px; }
    .primary-navigation ul { display: none; flex-direction: column; background: #b71c1c; border-radius: 4px; padding: 10px 0; }
    .primary-navigation ul.show-menu { display: flex; }
    .primary-navigation ul li a { display: block; padding: 10px 15px; font-size: 14px; }
    
    /* Sub Nav Overflow scrolling */
    .sub-navigation ul { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    
    /* News Ticker Mobile */
    .breaking-news { flex-direction: column; align-items: flex-start; }
    .breaking-title { width: 100%; text-align: center; }
}

/* ==========================================================================
   8. Front Page Hero
   ========================================================================== */
.hero-section { margin-bottom: 30px; display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.hero-main { position: relative; overflow: hidden; }
.hero-side { display: flex; flex-direction: column; gap: 20px; }
.hero-post { position: relative; height: 100%; overflow: hidden; background: #000; border-radius: 4px; }
.hero-post img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.5s; }
.hero-post:hover img { opacity: 1; transform: scale(1.05); }
.hero-content { position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%); }
.hero-content .cat-label { background: #d32f2f; color: #fff; padding: 3px 8px; font-size: 11px; text-transform: uppercase; border-radius: 2px; margin-bottom: 10px; display: inline-block; }
.hero-content h2 { color: #fff; font-size: 24px; margin-bottom: 5px; }
.hero-content h2 a { color: #fff; }
.hero-side .hero-post .hero-content h2 { font-size: 16px; }

@media(max-width: 768px) {
    .hero-section { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. Post Listings
   ========================================================================== */
.section-title { font-size: 20px; color: #fff; background: #222; display: inline-block; padding: 8px 15px; text-transform: uppercase; margin-bottom: -2px; position: relative; z-index: 2; border-bottom: 2px solid #d32f2f; border-left: 4px solid #d32f2f; }
.section-wrapper { border-top: 2px solid #ddd; margin-bottom: 40px; padding-top: 20px; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.post-item { background: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #efefef;}
.post-thumb { margin-bottom: 15px; border-radius: 4px; overflow: hidden; display: block; }
.post-thumb img { width: 100%; height: auto; transition: 0.3s; }
.post-thumb:hover img { transform: scale(1.03); }
.post-item h3 { font-size: 18px; margin-bottom: 10px; }
.post-item h3 a { color: #222; }
.post-item h3 a:hover { color: #d32f2f; }
.post-meta { font-size: 12px; color: #888; margin-bottom: 10px; display: flex; gap: 15px;}
.post-meta a { color: #888; }
.post-excerpt { color: #555; font-size: 14px; }

/* List Style */
.post-list { display: flex; flex-direction: column; gap: 20px; }
.post-list-item { display: flex; gap: 20px; background: #fff; padding: 15px; border-radius: 4px; border: 1px solid #efefef;}
.post-list-item .post-thumb { width: 30%; margin: 0; }
.post-list-item .post-content { width: 70%; }

@media(max-width: 768px) {
    .post-grid { grid-template-columns: 1fr; }
    .post-list-item { flex-direction: column; }
    .post-list-item .post-thumb, .post-list-item .post-content { width: 100%; }
}

/* ==========================================================================
   10. Single Post
   ========================================================================== */
.single-post-wrap { background: #fff; padding: 30px; border-radius: 4px; border: 1px solid #efefef;}
.entry-header { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.entry-title { font-size: 32px; margin-bottom: 10px; }
.entry-meta { display: flex; gap: 15px; color: #777; font-size: 13px; }
.entry-content { font-size: 16px; color: #333; line-height: 1.8; }
.entry-content p { margin-bottom: 20px; }
.entry-content blockquote { border-left: 4px solid #d32f2f; padding-left: 20px; margin: 20px 0; font-size: 18px; font-style: italic; color: #555; background: #f9f9f9; padding: 20px; }

/* ==========================================================================
   11. Sidebar Elements
   ========================================================================== */
.widget { background: #fff; padding: 20px; margin-bottom: 30px; border: 1px solid #efefef; border-radius: 4px; }
.widget-title { font-size: 18px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #d32f2f; text-transform: uppercase; }
.widget ul { margin-left: 0; }
.widget ul li { padding: 10px 0; border-bottom: 1px dashed #eee; font-size: 14px; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: #333; }
.widget ul li a:before { content: "\203A"; color: #d32f2f; margin-right: 8px; font-weight: bold; }
.widget ul li a:hover { color: #d32f2f; }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer { background: #222; color: #ccc; margin-top: 40px; padding-top: 50px; }
.footer-widgets { padding-bottom: 30px; border-bottom: 1px solid #333; }
.footer-widgets .widget { background: transparent; border: none; padding: 0; box-shadow: none; color: #aaa; }
.footer-widgets .widget-title { color: #fff; border-bottom-color: #555; }
.footer-widgets .widget ul li { border-bottom-color: #333; }
.footer-widgets .widget ul li a { color: #aaa; }
.footer-widgets .widget ul li a:hover { color: #fff; }
.site-info { text-align: center; padding: 20px 0; font-size: 14px; color: #777; }
.site-info a { color: #fff; }