/*
Theme Name: ZentroHub
Theme URI: https://zentrohub.co.uk/
Author: ZentroHub
Author URI: https://zentrohub.co.uk/
Description: A modern dark-themed news & magazine WordPress theme inspired by ZentroHub. Features AJAX load more, tabbed sidebar widgets, breaking news ticker, popular posts by view count, social sharing, demo importer, and full responsive design. No plugins required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zentrohub
Tags: news, magazine, blog, dark-mode, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter','Roboto',system-ui,-apple-system,sans-serif;background:#0f1117;color:#a8b2c1;line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#e6edf3;text-decoration:none;transition:color .2s}
a:hover{color:#ff4d2e}
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;color:#fff;line-height:1.25;margin:0 0 .6em;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
button,input,textarea,select{font-family:inherit;font-size:inherit}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

:root{
  --bg:#0f1117;
  --header-bg:#0d1117;
  --surface:#161b22;
  --surface-2:#1c2128;
  --border:#21262d;
  --border-light:#30363d;
  --text:#ffffff;
  --text-secondary:#a8b2c1;
  --muted:#6b7280;
  --accent:#e8242e;
  --accent-hover:#c01820;
  --footer-bg:#0d1117;
  --footer-bottom-bg:#080b10;
}

/* ---------- TOP BAR ---------- */
.top-bar{background:#0a0d12;border-bottom:1px solid var(--border);padding:8px 0;font-size:13px;color:var(--muted)}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.top-bar .date{display:flex;align-items:center;gap:6px}
.top-bar .socials a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:4px;color:var(--muted);margin-left:4px}
.top-bar .socials a:hover{background:var(--accent);color:#fff}

/* ---------- HEADER ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px}
.site-branding .site-title{margin:0;font-size:28px;font-weight:800;letter-spacing:-.5px}
.site-branding .site-title a{color:#fff}
.site-branding .site-title .accent{color:var(--accent)}
.site-branding .site-description{margin:2px 0 0;font-size:12px;color:var(--muted)}
.site-branding img.custom-logo{max-height:50px;width:auto}

.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{display:block;padding:10px 14px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;border-radius:4px}
.main-nav li.current-menu-item > a,.main-nav a:hover{color:var(--accent)}

.header-actions{display:flex;align-items:center;gap:10px}
.search-toggle,.menu-toggle{background:transparent;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.search-toggle:hover,.menu-toggle:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.menu-toggle{display:none}

.search-overlay{display:none;background:var(--surface);border-bottom:1px solid var(--border);padding:20px 0}
.search-overlay.active{display:block}
.search-overlay form{display:flex;gap:8px;max-width:700px;margin:0 auto}
.search-overlay input[type=search]{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:4px}
.search-overlay button{background:var(--accent);border:0;color:#fff;padding:0 24px;border-radius:4px;cursor:pointer;font-weight:600}

/* ---------- BREAKING NEWS ---------- */
.breaking-news{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;overflow:hidden}
.breaking-news .container{display:flex;align-items:center;gap:14px}
.breaking-label{background:var(--accent);color:#fff;padding:6px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:3px;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.breaking-label::before{content:"";width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.breaking-track{flex:1;overflow:hidden;white-space:nowrap;position:relative}
.breaking-track-inner{display:inline-block;padding-left:100%;animation:marquee 40s linear infinite;font-size:14px}
.breaking-track-inner a{color:var(--text);margin-right:50px;font-weight:500}
.breaking-track-inner a:hover{color:var(--accent)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ---------- LAYOUT ---------- */
.site-main{padding:30px 0 60px}
.layout-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.content-area{min-width:0}
.sidebar{position:sticky;top:90px}

/* ---------- HERO ---------- */
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:40px}
.hero-main,.hero-side .post-card{position:relative;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.hero-main{min-height:460px}
.hero-main .thumb,.hero-side .thumb{position:relative;overflow:hidden}
.hero-main .thumb img{width:100%;height:460px;object-fit:cover;transition:transform .5s}
.hero-main:hover .thumb img,.hero-side .post-card:hover .thumb img{transform:scale(1.05)}
.hero-main .meta-overlay{position:absolute;inset:auto 0 0 0;padding:30px 24px;background:linear-gradient(to top,rgba(0,0,0,.95) 20%,transparent)}
.hero-main h2{font-size:28px;margin:10px 0 8px;line-height:1.2}
.hero-main h2 a{color:#fff}
.hero-main .excerpt{color:#cdd5dd;font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-side{display:grid;gap:18px}
.hero-side .post-card .thumb img{height:140px;width:100%;object-fit:cover}
.hero-side .post-card .body{padding:14px}
.hero-side .post-card h3{font-size:15px;margin:8px 0 0;line-height:1.35}

/* ---------- CATEGORY BADGE ---------- */
.cat-badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 10px;border-radius:3px}
.cat-badge.on-thumb{position:absolute;top:12px;left:12px;z-index:2}
.post-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:6px}
.post-meta .dot{width:3px;height:3px;background:var(--muted);border-radius:50%}

/* ---------- SECTION HEADERS ---------- */
.section-header{display:flex;justify-content:space-between;align-items:center;margin:35px 0 20px;border-bottom:2px solid var(--border);padding-bottom:10px;position:relative}
.section-header::after{content:"";position:absolute;bottom:-2px;left:0;width:80px;height:2px;background:var(--accent)}
.section-header h2{font-size:22px;margin:0;text-transform:uppercase;letter-spacing:.5px}
.section-header .view-all{font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.section-header .view-all:hover{color:var(--accent)}

/* ---------- POST CARDS GRID ---------- */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.post-card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-card .body{padding:16px}
.post-card h3{font-size:16px;margin:8px 0;line-height:1.35}
.post-card h3 a{color:#fff}
.post-card h3 a:hover{color:var(--accent)}
.post-card .excerpt{font-size:13px;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- LOAD MORE ---------- */
.load-more-wrap{text-align:center;margin-top:30px}
.btn,.load-more{display:inline-block;background:var(--accent);color:#fff !important;padding:12px 32px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:13px;border:0;cursor:pointer;transition:background .2s}
.btn:hover,.load-more:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text) !important}
.btn-outline:hover{border-color:var(--accent);background:var(--accent)}

/* ---------- SIDEBAR / WIDGETS ---------- */
.widget{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:24px}
.widget-title{font-size:14px;text-transform:uppercase;letter-spacing:1px;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid var(--border);position:relative}
.widget-title::after{content:"";position:absolute;bottom:-2px;left:0;width:50px;height:2px;background:var(--accent)}
.widget ul{list-style:none;padding:0;margin:0}
.widget ul li{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.widget ul li:last-child{border-bottom:0}
.widget ul li a{color:var(--text)}
.widget ul li a:hover{color:var(--accent)}

/* Tabs widget */
.tabs-widget .tabs-nav{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tabs-widget .tab-btn{flex:1;background:transparent;border:0;color:var(--muted);padding:10px;cursor:pointer;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.5px;border-bottom:2px solid transparent;transition:all .2s}
.tabs-widget .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabs-widget .tab-pane{display:none}
.tabs-widget .tab-pane.active{display:block}
.mini-post{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.mini-post:last-child{border-bottom:0}
.mini-post .thumb{flex-shrink:0;width:70px;height:55px;border-radius:4px;overflow:hidden;background:var(--surface-2)}
.mini-post .thumb img{width:100%;height:100%;object-fit:cover}
.mini-post .body{flex:1;min-width:0}
.mini-post h4{font-size:13px;margin:0 0 4px;line-height:1.3;font-weight:600}
.mini-post h4 a{color:var(--text)}
.mini-post h4 a:hover{color:var(--accent)}
.mini-post .meta{font-size:11px;color:var(--muted)}

/* About widget */
.about-widget p{font-size:13px;color:var(--muted);margin:0 0 8px}
.about-widget .email{color:var(--accent);font-weight:600;font-size:13px}

/* Newsletter */
.newsletter-widget p{font-size:13px;color:var(--muted);margin:0 0 12px}
.newsletter-widget input[type=email]{width:100%;padding:10px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:4px;margin-bottom:8px}
.newsletter-widget button{width:100%;background:var(--accent);color:#fff;border:0;padding:10px;border-radius:4px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:1px;cursor:pointer}
.newsletter-widget button:hover{background:var(--accent-hover)}
.newsletter-widget .msg{font-size:12px;margin-top:8px}
.newsletter-widget .msg.ok{color:#3fb950}
.newsletter-widget .msg.err{color:var(--accent)}

/* Category widget */
.cat-widget li{display:flex;justify-content:space-between;align-items:center}
.cat-widget .count{background:var(--surface-2);color:var(--muted);font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}

/* ---------- SINGLE POST ---------- */
.single-post .post-header{margin-bottom:24px}
.single-post .post-header .meta-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.single-post .post-title{font-size:36px;line-height:1.2;margin:10px 0 16px}
.single-post .meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:var(--muted);font-size:13px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.single-post .meta-row span{display:inline-flex;align-items:center;gap:6px}
.single-post .featured{margin:24px 0;border-radius:8px;overflow:hidden}
.single-post .featured img{width:100%;height:auto}
.share-row{display:flex;gap:10px;margin:24px 0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap}
.share-row .label{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px;margin-right:6px}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:4px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.share-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.entry-content{font-size:16px;line-height:1.8}
.entry-content h2,.entry-content h3{margin-top:1.5em}
.entry-content blockquote{border-left:3px solid var(--accent);padding:8px 18px;margin:1.5em 0;color:var(--muted);font-style:italic;background:var(--surface)}
.entry-content a{color:var(--accent);text-decoration:underline}
.entry-content img{border-radius:6px;margin:1em 0}
.tags-row{margin:24px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tags-row .label{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px;margin-right:4px}
.tag-link{padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--muted)}
.tag-link:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.author-box{display:flex;gap:18px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:30px 0}
.author-box .avatar{flex-shrink:0;width:70px;height:70px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;overflow:hidden}
.author-box img{border-radius:50%}
.author-box h4{margin:0 0 6px;font-size:16px}
.author-box p{margin:0;font-size:14px;color:var(--muted)}
.related-posts{margin-top:40px}

/* Comments */
.comments-area{margin-top:40px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px}
.comments-area h3{font-size:18px;margin-bottom:20px}
.comments-area .comment-list{list-style:none;padding:0}
.comments-area .comment{padding:14px 0;border-bottom:1px solid var(--border)}
.comments-area textarea,.comments-area input[type=text],.comments-area input[type=email],.comments-area input[type=url]{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:4px;margin-bottom:10px}
.comments-area .submit{background:var(--accent);color:#fff;border:0;padding:10px 24px;border-radius:4px;cursor:pointer;font-weight:600}

/* ---------- PAGE / CONTACT FORM ---------- */
.page-content{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:30px}
.page-content h1{font-size:32px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--border);position:relative}
.page-content h1::after{content:"";position:absolute;bottom:-2px;left:0;width:80px;height:2px;background:var(--accent)}
.page-content h2{font-size:22px;margin-top:1.5em}
.zh-contact-form{display:grid;gap:14px;margin:20px 0;max-width:700px}
.zh-contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zh-contact-form input,.zh-contact-form textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:4px}
.zh-contact-form button{background:var(--accent);color:#fff;border:0;padding:14px 28px;border-radius:4px;cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:13px;justify-self:start}
.zh-contact-form button:hover{background:var(--accent-hover)}
.zh-form-msg{padding:12px 16px;border-radius:4px;margin-bottom:16px}
.zh-form-msg.ok{background:rgba(63,185,80,.1);border:1px solid #3fb950;color:#3fb950}
.zh-form-msg.err{background:rgba(255,77,46,.1);border:1px solid var(--accent);color:var(--accent)}

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{margin:0 6px}

/* ---------- ARCHIVE HEADER ---------- */
.archive-header{margin-bottom:24px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.archive-header h1{font-size:28px;margin:0 0 8px}
.archive-header p{margin:0;color:var(--muted)}

/* ---------- 404 ---------- */
.error-404{text-align:center;padding:60px 20px}
.error-404 h1{font-size:120px;margin:0;color:var(--accent);line-height:1}
.error-404 h2{font-size:24px;margin:10px 0 20px}
.error-404 p{color:var(--muted);margin-bottom:24px}
.error-404 form{max-width:400px;margin:0 auto;display:flex;gap:8px}
.error-404 form input{flex:1;padding:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:4px}
.error-404 form button{background:var(--accent);color:#fff;border:0;padding:10px 20px;border-radius:4px;cursor:pointer}

/* ---------- FOOTER ---------- */
.site-footer{background:#0a0d12;border-top:1px solid var(--border);padding:50px 0 0;margin-top:60px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:40px}
.footer-col h3{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--border);position:relative}
.footer-col h3::after{content:"";position:absolute;bottom:-2px;left:0;width:50px;height:2px;background:var(--accent)}
.footer-col p{color:var(--muted);font-size:14px}
.footer-col ul{list-style:none;padding:0}
.footer-col ul li{padding:6px 0;font-size:14px}
.footer-col ul li a{color:var(--muted)}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding:18px 0;font-size:13px;color:var(--muted)}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom .socials a{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:4px;background:var(--surface);color:var(--muted);margin-left:6px}
.footer-bottom .socials a:hover{background:var(--accent);color:#fff}
.footer-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap}
.footer-nav a{color:var(--muted);font-size:13px}

/* ---------- BACK TO TOP ---------- */
.back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;border:0;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.back-to-top.visible{display:flex}
.back-to-top:hover{background:var(--accent-hover)}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination .page-numbers{padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);font-weight:600}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- ADMIN IMPORTER ---------- */
.zh-importer{max-width:760px;background:#fff;padding:30px;border:1px solid #ccd0d4;border-radius:6px;margin-top:20px}
.zh-importer h1{margin-top:0}
.zh-importer .button-primary{background:#ff4d2e !important;border-color:#ff4d2e !important;color:#fff !important;padding:10px 24px !important;height:auto !important;font-size:14px !important}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .layout-grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .hero-grid{grid-template-columns:1fr}
  .hero-main .thumb img{height:340px}
}
@media (max-width:768px){
  .menu-toggle{display:inline-flex}
  .main-nav{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--surface);padding:80px 20px 20px;transition:right .3s;z-index:99;display:block;overflow-y:auto}
  .main-nav.active{right:0}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav ul li{border-bottom:1px solid var(--border)}
  .main-nav a{padding:14px 0}
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .single-post .post-title{font-size:26px}
  .zh-contact-form .row{grid-template-columns:1fr}
  .hero-main .meta-overlay{padding:20px 16px}
  .hero-main h2{font-size:20px}
  .top-bar{display:none}
}
@media (max-width:480px){
  .posts-grid{grid-template-columns:1fr}
  .error-404 h1{font-size:80px}
}

/* ===== ZentroHub v2 overrides (match zentrohub.co.uk) ===== */
body{color:var(--text-secondary);background:var(--bg)}
a{color:#fff}
.site-header{background:var(--header-bg)}
.top-bar{background:#080b10}

/* Breaking news = solid red */
.breaking-news{background:var(--accent);border-bottom:0;padding:0;height:40px;display:flex;align-items:center}
.breaking-news .container{height:100%}
.breaking-label{background:#b01020;border-radius:0;padding:0 18px;height:40px;display:inline-flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:1.2px}
.breaking-label::before{background:#fff}
.breaking-track-inner a{color:#fff;font-weight:600}
.breaking-track-inner a:hover{color:#fff9c4}

/* Hero side: horizontal mini-cards with bottom border */
.hero-side{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 14px}
.hero-side .post-card{display:grid;grid-template-columns:120px 1fr;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:14px 0;align-items:center}
.hero-side .post-card:last-child{border-bottom:0}
.hero-side .post-card .thumb{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.hero-side .post-card .thumb img{height:100%;width:100%;object-fit:cover}
.hero-side .post-card .body{padding:0}
.hero-side .post-card h3{font-size:14px;margin:6px 0 0;line-height:1.35}
.hero-side .post-card h3 a{color:#fff}
.hero-side .post-card h3 a:hover{color:var(--accent)}

/* Section header: red left border accent */
.section-header{border-bottom:1px solid var(--border);padding:0 0 10px;margin:35px 0 18px}
.section-header::after{display:none}
.section-header h2{padding-left:12px;border-left:4px solid var(--accent);font-size:18px;text-transform:uppercase}

/* Post cards */
.post-card{border-radius:6px;box-shadow:none}
.post-card:hover{transform:none;border-color:var(--border-light)}
.post-card h3 a{color:#fff}
.post-card h3 a:hover{color:var(--accent)}

/* Sidebar mini-post (tabs/popular) */
.mini-post{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.mini-post:last-child{border-bottom:0}
.mini-post .thumb{width:64px;height:64px;border-radius:4px;overflow:hidden;background:var(--surface-2)}
.mini-post .thumb img{width:100%;height:100%;object-fit:cover}
.mini-post .body h4{margin:0 0 4px;font-size:13px;line-height:1.35;font-weight:600}
.mini-post .body h4 a{color:#fff}
.mini-post .body h4 a:hover{color:var(--accent)}
.mini-post .body .meta{font-size:11px;color:var(--muted)}

/* Tabs widget */
.tabs-widget .tab-btn{position:relative;padding:12px 8px}
.tabs-widget .tab-btn.active{color:#fff}
.tabs-widget .tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* Footer */
.site-footer{background:var(--footer-bg)}
.footer-bottom{background:var(--footer-bottom-bg);border-top:1px solid var(--border);margin-top:0}

/* Load more outline style */
.load-more{background:transparent;color:#fff;border:1px solid var(--border-light);padding:10px 32px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
.load-more:hover{background:var(--accent);border-color:var(--accent)}

/* Search overlay - full page */
.search-overlay{position:fixed;inset:0;width:100%;height:100%;background:rgba(13,17,23,.97);z-index:9999;padding:0;display:none;align-items:center;justify-content:center}
.search-overlay.active{display:flex}
.search-overlay form{width:90%;max-width:700px;display:flex;flex-direction:column;gap:0;border-bottom:2px solid var(--accent);background:transparent}
.search-overlay input[type=search]{background:transparent;border:0;color:#fff;font-size:24px;padding:18px 4px}
.search-overlay input[type=search]:focus{outline:none}
.search-overlay button{background:transparent;color:var(--accent);font-size:14px;padding:8px;text-align:right}
.search-close{position:absolute;top:24px;right:24px;background:transparent;border:0;color:#fff;cursor:pointer;font-size:32px;line-height:1}

/* Reading progress bar */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:10000;transition:width .1s linear}

/* Author box improvements */
.author-box{background:var(--surface);border:1px solid var(--border);border-radius:6px}

/* Share buttons brand colors */
.share-btn[href*="facebook"]{background:#1877f2;border-color:#1877f2;color:#fff}
.share-btn[href*="twitter"]{background:#000;border-color:#000;color:#fff}
.share-btn[href*="whatsapp"]{background:#25d366;border-color:#25d366;color:#fff}

/* Hero overlay: make image always have black gradient even without thumb */
.hero-main{display:flex;flex-direction:column}
.hero-main .thumb{flex:1;min-height:460px}

@media (max-width:1024px){
  .hero-side .post-card{grid-template-columns:100px 1fr}
}
@media (max-width:768px){
  .hero-side{padding:6px 10px}
}