/* Minimal responsive layout for a news grid */
html, body { overflow-x: hidden; max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; box-sizing: border-box; }

.site-header { border-bottom: 1px solid #e5e7eb; background: #ffffff; position: relative; z-index: 100; }
.header-inner { padding: 12px 0; position: relative; }
.header-top { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; }
.branding { flex: 1; }
.branding { display: flex; justify-content: center; }
.branding .custom-logo { max-height: 90px; width: auto; }
.branding .site-title { font-weight: 700; font-size: 1.6rem; color: #111; display: block; }
.site-description { margin: 4px 0 0; color: #6b7280; font-size: .9rem; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.menu-toggle-icon { display: flex; flex-direction: column; gap: 4px; width: 24px; height: 18px; }
.menu-toggle-icon span { display: block; height: 2px; width: 100%; background: #111; transition: all .3s ease; border-radius: 2px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1),
.primary-nav.show ~ .header-top .menu-toggle .menu-toggle-icon span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2),
.primary-nav.show ~ .header-top .menu-toggle .menu-toggle-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3),
.primary-nav.show ~ .header-top .menu-toggle .menu-toggle-icon span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.menu { list-style: none; display: flex; flex-direction: row; gap: 16px; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.menu li { list-style: none; }
.menu li a { padding: 8px 10px; border-radius: 6px; display: block; text-decoration: none; color: #111; }
.menu li a:hover { background: #f3f4f6; text-decoration: none; color: #0b5fff; }

.topbar { background: #0b5fff; color: #fff; position: relative; z-index: 99; }
.topbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 0; }
.badge-breaking { font-weight: 700; background: #ff2d55; color: #fff; padding: 6px 10px; border-radius: 999px; font-size: .85rem; white-space: nowrap; }
.ticker { overflow: hidden; min-width: 0; }
.ticker-track { display: inline-flex; gap: 24px; white-space: nowrap; animation: ticker-scroll 35s linear infinite; }
.ticker-item { color: #fff; opacity: .95; }
.ticker-item:hover { text-decoration: underline; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.topbar-search { min-width: 0; }
.topbar-search input[type="search"] { width: 220px; max-width: 100%; padding: 6px 10px; border: none; border-radius: 6px; }

.site-content { padding: 20px 0; }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } }

.post-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: box-shadow .2s ease; }
.post-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.post-card-link { display: grid; color: inherit; }
.post-card-media img { width: 100%; height: auto; display: block; }
.post-card-content { padding: 12px; }
.post-card-title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.post-card-meta { color: #6b7280; font-size: .85rem; }
.post-card-excerpt { margin: 8px 0 0; color: #374151; }

.pagination { display: flex; justify-content: center; margin: 24px 0; }
.pagination .page-numbers { padding: 8px 12px; margin: 0 4px; border: 1px solid #e5e7eb; border-radius: 6px; }
.pagination .current { background: #111; color: #fff; border-color: #111; }

.site-footer { border-top: 3px solid #0b5fff; background: linear-gradient(to bottom, #1e293b, #0f172a); margin-top: 24px; }
.footer-widgets { padding: 32px 0 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-widgets .widget-title { color: #fff; font-size: 1.1rem; margin-bottom: 16px; }
.footer-widgets .widget { color: #cbd5e1; }
.footer-widgets a { color: #94a3b8; transition: color .2s ease; }
.footer-widgets a:hover { color: #0b5fff; }
.footer-bottom { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; color: #94a3b8; }
.footer-bottom p { margin: 0; }
.footer-nav .menu { gap: 12px; }
.footer-nav .menu a { color: #cbd5e1; transition: color .2s ease; }
.footer-nav .menu a:hover { color: #0b5fff; }

.entry-header { margin-bottom: 12px; }
.entry-title { margin: 0 0 6px; font-size: 1.8rem; }
.featured-media img { width: 100%; height: auto; border-radius: 8px; }
.entry-content { line-height: 1.7; }
.entry-content img { max-width: 100%; height: auto; }
.post-nav { display: flex; justify-content: space-between; margin-top: 24px; }

.section-title { font-size: 1.5rem; font-weight: 700; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; }

/* Hero Section with Slider and Sidebar */
.hero-section { margin: 24px 0; width: 100%; box-sizing: border-box; position: relative; z-index: 1; }
.hero-wrapper { display: grid; grid-template-columns: 1.2fr 1.3fr; gap: 16px; align-items: start; width: 100%; box-sizing: border-box; }
.hero-slider { width: 100%; box-sizing: border-box; position: relative; z-index: 1; }
.slider-container { position: relative; height: 100%; width: 100%; box-sizing: border-box; z-index: 1; }
.slider-main { position: relative; min-height: 360px; height: 360px; border-radius: 8px; overflow: hidden; width: 100%; z-index: 1; }
.slider-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; }
.slider-slide.active { position: relative; opacity: 1; visibility: visible; }
.slide-link { display: block; color: inherit; position: relative; }
.slide-media { position: relative; width: 100%; height: 360px; overflow: hidden; }
.slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-time { position: absolute; top: 16px; left: 16px; z-index: 10; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.7); color: #ffa500; padding: 8px 12px; border-radius: 20px; font-size: .9rem; font-weight: 600; }
.slide-time svg { width: 16px; height: 16px; }
.slide-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); color: #fff; padding: 20px 18px 18px; }
.slide-title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,.5); }

/* Slider Arrow Buttons */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 15; width: 48px; height: 48px; background: rgba(0,0,0,.6); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
.slider-arrow:hover { background: rgba(0,0,0,.8); transform: translateY(-50%) scale(1.1); }
.slider-arrow svg { width: 24px; height: 24px; }
.slider-prev { left: 16px; }
.slider-next { right: 16px; }

/* Slider Number Navigation */
.slider-nav-numbers { display: flex; gap: 4px; margin-top: 4px; justify-content: flex-start; padding: 8px; background: #f9fafb; border-radius: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f9fafb; }
.slider-nav-numbers::-webkit-scrollbar { height: 6px; }
.slider-nav-numbers::-webkit-scrollbar-track { background: #f9fafb; border-radius: 4px; }
.slider-nav-numbers::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.slider-nav-numbers::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.slider-number { flex-shrink: 0; min-width: 36px; height: 36px; padding: 0 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all .2s ease; font-size: .95rem; font-weight: 600; color: #374151; display: flex; align-items: center; justify-content: center; }
.slider-number:hover { border-color: #0b5fff; background: #f0f7ff; color: #0b5fff; }
.slider-number.active { background: #ff6b35; border-color: #ff6b35; color: #fff; }

/* Hero Sidebar News Blocks */
.hero-sidebar { display: flex; flex-direction: column; gap: 14px; width: 100%; box-sizing: border-box; }
.hero-sidebar::-webkit-scrollbar { width: 6px; }
.hero-sidebar::-webkit-scrollbar-track { background: #f9fafb; border-radius: 4px; }
.hero-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.hero-sidebar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.sidebar-news-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: box-shadow .2s ease; width: 100%; box-sizing: border-box; }
.sidebar-news-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.sidebar-news-link { display: block; color: inherit; text-decoration: none; height: 100%; position: relative; }
.sidebar-news-media { position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; margin: 0; }
.sidebar-news-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-news-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4), transparent); padding: 14px 12px 12px; z-index: 2; }
.sidebar-news-title { margin: 0 !important; font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: #fff !important; display: block !important; visibility: visible !important; opacity: 1 !important; word-wrap: break-word; overflow-wrap: break-word; text-shadow: 0 2px 4px rgba(0,0,0,.5); }

.primary-nav { margin-top: 12px; }
.primary-nav.collapse:not(.show) { display: none; }
.primary-nav.collapse.show { display: block; }

@media (min-width: 768px) {
    .primary-nav { display: block !important; margin-top: 12px; }
    .menu { flex-direction: row !important; }
    .menu li { width: auto; }
    .menu li a { padding: 8px 10px; border-bottom: none; }
}

@media (min-width: 992px) {
    .primary-nav { background: #ec0000; border-radius: 10px; padding: 12px 18px; margin-top: 18px; }
    .menu { justify-content: center; gap: 20px; }
    .menu li a { color: #fff; font-weight: 600; transition: background .2s ease, color .2s ease; }
    .menu li a:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .hero-sidebar.d-lg-block { display: flex !important; }
}

@media (max-width: 991.98px) {
    .menu-toggle { display: block !important; }
    .primary-nav { margin-top: 12px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
    .primary-nav.show { border-top: 1px solid #e5e7eb; }
    .primary-nav .menu { display: flex; flex-direction: column !important; gap: 0; padding: 0; align-items: stretch; width: 100%; }
    .primary-nav .menu li { width: 100%; }
    .primary-nav .menu li:last-child a { border-bottom: none; }
    .primary-nav .menu li a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid #f3f4f6; width: 100%; }
    .menu li:last-child a { border-bottom: none; }
    .menu li a:hover { background: transparent; color: #0b5fff; }
    
    .topbar-inner { grid-template-columns: auto 1fr; gap: 8px; }
    .topbar-search { order: 3; grid-column: 1 / -1; }
    .topbar-search input[type="search"] { width: 100%; }
    .ticker { display: none; }
    
    .hero-wrapper { grid-template-columns: 1fr; gap: 16px; }
    .hero-slider { width: 100%; margin-bottom: 0; }
    .slider-container { width: 100%; }
    .slider-main { width: 100%; min-height: 300px; height: 300px; }
    .slide-media { height: 300px; }
    .slide-content { padding: 20px 16px 16px; }
    .slide-title { font-size: 1.3rem; }
    .slider-arrow { width: 40px; height: 40px; }
    .slider-arrow svg { width: 20px; height: 20px; }
    .slider-nav-numbers { margin-top: 8px; }
}
@media (max-width: 575.98px) {
    .header-inner { padding: 10px 0; }
    .header-top { gap: 12px; }
    .branding .custom-logo { max-height: 32px; }
    .branding .site-title { font-size: 1rem; }
    .site-description { display: none; }
    
    .topbar-inner { padding: 6px 0; }
    .badge-breaking { font-size: .75rem; padding: 4px 8px; }
    
    .hero-section { margin: 16px 0; }
    .hero-wrapper { gap: 12px; }
    .hero-sidebar { grid-template-columns: 1fr; gap: 10px; }
    .sidebar-news-item { margin: 0; }
    .sidebar-news-media { padding-bottom: 60%; }
    .sidebar-news-title { font-size: .85rem; }
    .sidebar-news-overlay { padding: 10px 8px 8px; }
    
    .slide-media { height: 240px; }
    .slider-main { min-height: 240px; height: 240px; }
    .slide-content { padding: 16px 12px 12px; }
    .slide-title { font-size: 1.1rem; padding: 0; }
    .slide-time { top: 10px; left: 10px; padding: 5px 8px; font-size: .8rem; }
    .slider-arrow { width: 32px; height: 32px; }
    .slider-arrow svg { width: 16px; height: 16px; }
    .slider-prev { left: 6px; }
    .slider-next { right: 6px; }
    .slider-number { min-width: 28px; height: 28px; font-size: .8rem; padding: 0 6px; }
    .slider-nav-numbers { gap: 3px; padding: 6px; }
    
    .container { padding: 0 12px; }
    .site-content { padding: 12px 0; }
    .posts-grid { gap: 12px; }
    .post-card { margin: 0; }
}