/*
Theme Name: SuperAds
Theme URI: https://nairobinews.co.ke
Author: NairobiNews
Description: Fast, professional news theme for NairobiNews.co.ke.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: superads
Tags: news, blog, custom-logo, featured-images
*/

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:1rem;line-height:1.6;color:#333;background:#f8f9fa}
a{text-decoration:none;color:inherit}
img,picture,video{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;background:none;border:none;font:inherit}

/* ── Container ────────────────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}

/* ── Sticky Header Scroll Fix ─────────────────────────────────────────────── */
/* Prevents the sticky header from covering page content/anchors when scrolling */
:root{--header-height:60px}
html{scroll-padding-top:var(--header-height)}
*{scroll-margin-top:var(--header-height)}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header{background:#fff;border-top:4px solid #2563eb;box-shadow:0 1px 3px rgba(0,0,0,.1);position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin-inline:auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-branding{flex:1 1 auto;text-align:center}
.site-logo img{max-height:56px;width:auto}
.site-title{font-size:1.75rem;font-weight:700;line-height:1.2}
.site-title a{color:#1a1a1a}
.site-description{color:#6b7280;font-size:.875rem;margin-top:2px}

/* Navigation */
.main-navigation{flex:1 1 auto}
.main-navigation ul{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.main-navigation ul li a{display:block;padding:6px 10px;font-size:.9rem;font-weight:600;color:#333;border-radius:4px;transition:color .2s,background .2s}
.main-navigation ul li a:hover,.main-navigation ul li.current-menu-item > a{color:#2563eb;background:#eff6ff}
.main-navigation ul ul{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12);border-radius:4px;min-width:180px;z-index:200}
.main-navigation ul li{position:relative}
.main-navigation ul li:hover > ul{display:block}

/* Mobile hamburger */
.menu-toggle{display:none;padding:6px;color:#333;line-height:0}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:22px;height:2px;background:#333;border-radius:2px;transition:transform .25s,opacity .25s}
.menu-icon{position:relative}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;left:0}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}
.menu-toggle[aria-expanded=true] .menu-icon{background:transparent}
.menu-toggle[aria-expanded=true] .menu-icon::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-icon::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:767px){
  .menu-toggle{display:flex;align-items:center;margin-left:auto}
  .main-navigation{display:none;width:100%;order:3}
  .main-navigation.is-open{display:block}
  .main-navigation ul{flex-direction:column;gap:0}
  .main-navigation ul li a{padding:10px 14px;border-bottom:1px solid #f0f0f0}
}

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.news-hero-section{background:#fff}
.hero-container{max-width:1200px;margin-inline:auto;padding:28px 20px;border-top:1px solid #e9ecef}
.hero-row{display:flex;gap:32px;align-items:flex-start}
.main-column{flex:0 0 60%;min-width:0}
.sidebar-column{flex:0 0 calc(40% - 32px);padding-left:24px;border-left:1px solid #e9ecef}

/* Main story */
.main-story{margin-bottom:16px}
.main-story .post-thumbnail{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.main-story-content{padding:14px 0}
.main-story h1{font-size:1.6rem;font-weight:700;line-height:1.3;margin-bottom:8px;color:#1a1a1a}
.main-story h1 a:hover{color:#2563eb}

/* Support stories */
.support-stories{display:flex;gap:16px}
.support-story{flex:1;border-top:1px solid #e9ecef;padding-top:10px}
.support-story .post-thumbnail{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.support-story-content{padding:10px 0}
.support-story h3{font-size:.95rem;font-weight:600;line-height:1.4;color:#1a1a1a}
.support-story h3 a:hover{color:#2563eb}

/* Sidebar latest list */
.latest-stories{display:flex;flex-direction:column;gap:0}
.latest-story{padding:12px 0;border-bottom:1px solid #e5e7eb}
.latest-story:last-child{border-bottom:none}
.latest-story h4{font-size:.9rem;font-weight:600;line-height:1.4;color:#1a1a1a;margin-bottom:4px}
.latest-story h4 a:hover{color:#2563eb}

/* Shared meta */
.story-meta{font-size:.8rem;color:#6b7280;font-weight:500;margin-top:4px}

/* No thumbnail fallback */
.no-thumbnail{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:600;aspect-ratio:16/9}

/* ── Section Styles ───────────────────────────────────────────────────────── */
.category-section,.featured-stories-section,.latest-news-section{background:#f8f9fa;padding:4px 0}
.section-header{margin-bottom:12px;padding-bottom:8px;border-bottom:3px solid #2563eb}
.section-header h2{font-size:1.2rem;font-weight:700;color:#1a1a1a;letter-spacing:.3px}
.section-header h2::first-letter{text-transform:uppercase}

/* News grid */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:12px}
.news-card{border-radius:6px;overflow:hidden}
.news-thumbnail{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.news-content{padding:10px 0}
.news-content h3{font-size:.95rem;font-weight:600;line-height:1.4;color:#1a1a1a}
.news-content h3 a:hover{color:#2563eb}

/* ── Single Post ──────────────────────────────────────────────────────────── */
.single-post-container{padding:28px 20px}
.single-post-row{display:flex;gap:32px}
.single-post-main{flex:0 0 70%;min-width:0}
.single-post-sidebar{flex:0 0 calc(30% - 32px);padding-left:24px;border-left:1px solid #e9ecef}
.entry-title{font-size:1.8rem;font-weight:700;line-height:1.3;margin-bottom:12px;color:#1a1a1a}
.featured-image{margin:16px 0}
.featured-image .post-thumbnail{width:100%;border-radius:6px}
.thumbnail-caption{font-size:.8rem;color:#6b7280;margin-top:6px;font-style:italic}
.entry-content{font-size:1.05rem;line-height:1.75;color:#374151}
.entry-content p{margin-bottom:1.2em}
.entry-content h2,.entry-content h3{margin:1.5em 0 .5em;font-weight:700;color:#1a1a1a}
.entry-content img{border-radius:4px;margin:1em 0}
.entry-content a{color:#2563eb;text-decoration:underline}
.tags-links{margin-top:20px;font-size:.85rem;color:#6b7280}
.tags-links a{color:#2563eb;margin-right:4px}
.news-tip-line{margin-top:16px;padding:12px 16px;background:#f0f7ff;border-left:4px solid #2563eb;font-size:.85rem;color:#374151;border-radius:0 4px 4px 0}
.post-navigation{display:flex;justify-content:space-between;margin-top:24px;gap:16px;font-size:.9rem}
.post-navigation a{color:#2563eb;font-weight:600}

/* Social sharing (single2) */
.social-sharing{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px 0}
.share-text{font-weight:600;font-size:.9rem}
.social-share{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:4px;color:#fff;font-size:.85rem;font-weight:600;transition:opacity .2s}
.social-share:hover{opacity:.85;color:#fff}
.social-share.twitter{background:#1DA1F2}
.social-share.facebook{background:#4267B2}
.social-share.whatsapp{background:#25D366}
.social-share svg{width:16px;height:16px;flex-shrink:0}

/* Related posts */
.related-posts{margin-top:32px;border-top:3px solid #2563eb;padding-top:20px}
.related-posts-title{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:#1a1a1a}
.related-posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related-post-link{display:block;color:#1a1a1a}
.related-post-link:hover .related-post-title{color:#2563eb}
.related-post-thumbnail img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.related-post-title{font-size:.85rem;font-weight:600;line-height:1.4;margin-top:8px}
.related-post-date{font-size:.75rem;color:#6b7280;display:block;margin-top:4px}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.above-footer-wrapper{max-width:1200px;margin-inline:auto;padding:16px 20px;text-align:center}
.site-footer{background:#1a1a1a;color:#d1d5db;padding:40px 20px 20px}
.footer-widgets{max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:32px}
.footer-widget .widget-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #2563eb}
.footer-widget a{color:#9ca3af;font-size:.9rem;transition:color .2s}
.footer-widget a:hover{color:#fff}
.site-info{max-width:1200px;margin-inline:auto;padding-top:20px;border-top:1px solid #374151;text-align:center;font-size:.85rem;color:#6b7280}

/* ── Page / Archive / Search ──────────────────────────────────────────────── */
.content-area{max-width:1200px;margin-inline:auto;padding:28px 20px}
.page-content,.entry-content-page{font-size:1rem;line-height:1.75;color:#374151}
.page-content p{margin-bottom:1.2em}

/* ── Sidebar widget ───────────────────────────────────────────────────────── */
.widget{margin-bottom:28px}
.widget-title{font-size:1rem;font-weight:700;color:#1a1a1a;border-bottom:2px solid #2563eb;padding-bottom:6px;margin-bottom:12px}

/* ── Accessibility ────────────────────────────────────────────────────────── */
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.screen-reader-text:focus{clip:auto!important;background:#fff;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);display:block;font-size:.875rem;font-weight:700;height:auto;padding:14px 23px;width:auto;z-index:100000}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .related-posts-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  .hero-row{flex-direction:column;gap:24px}
  .main-column,.sidebar-column{flex:1 1 100%}
  .sidebar-column{padding-left:0;border-left:none;border-top:2px solid #e9ecef;padding-top:20px}
  .support-stories{flex-direction:column}
  .main-story h1{font-size:1.35rem}
  .single-post-row{flex-direction:column}
  .single-post-sidebar{flex:1 1 100%;padding-left:0;border-left:none;border-top:1px solid #e9ecef;padding-top:20px}
  .footer-widgets{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .related-posts-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .hero-container{padding:16px}
  .entry-title{font-size:1.4rem}
  .related-posts-grid{grid-template-columns:1fr}
  .post-navigation{flex-direction:column;gap:8px}
}