/*
Theme Name: NewsBytes Pro
Theme URI: https://example.com/newsbytes-pro
Author: NewsBytes Team
Author URI: https://example.com
Description: A fast, SEO-optimized news theme with Web Stories support. Inspired by modern Indian news portals.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newsbytes-pro
Tags: news, blog, custom-header, custom-menu, featured-images, threaded-comments, translation-ready, web-stories
*/


:root {
 --color-primary: #d62828;
 --color-primary-dark: #a31f1f;
 --color-secondary: #003049;
 --color-accent: #f77f00;
 --color-bg: #f4f4f4;
 --color-white: #ffffff;
 --color-text: #1a1a1a;
 --color-text-muted: #666666;
 --color-border: #e0e0e0;
 --color-card-bg: #ffffff;
 --color-breaking: #d62828;
 --font-heading: 'Noto Serif', Georgia, serif;
 --font-body: 'Noto Sans', Arial, sans-serif;
 --font-size-base: 16px;
 --line-height-base: 1.6;
 --container-width: 1240px;
 --container-padding: 16px;
 --radius-sm: 4px;
 --radius-md: 8px;
 --shadow-card: 0 1px 4px rgba(0,0,0,0.1);
 --shadow-hover: 0 4px 16px rgba(0,0,0,0.15);
 --transition: 0.2s ease;
 --header-height: 60px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
 font-size: var(--font-size-base);
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}

body {
 font-family: var(--font-body);
 font-size: 1rem;
 line-height: var(--line-height-base);
 color: var(--color-text);
 background: var(--color-bg);
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
}

a:hover { color: var(--color-primary); }

ul { list-style: none; }

.container {
 max-width: var(--container-width);
 margin: 0 auto;
 padding: 0 var(--container-padding);
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 border: 0;
}

.section-title {
 font-family: var(--font-heading);
 font-size: 1.2rem;
 font-weight: 700;
 color: var(--color-secondary);
 padding-bottom: 8px;
 border-bottom: 3px solid var(--color-primary);
 margin-bottom: 16px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.badge {
 display: inline-block;
 padding: 2px 8px;
 font-size: 0.7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 border-radius: var(--radius-sm);
 background: var(--color-primary);
 color: #ffffff !important;
 text-decoration: none;
}

/* Badge hover: keep background same, text always white — no red-on-red */
.badge:hover,
a.badge:hover,
a:hover .badge,
.article-card__category a:hover,
.article-card__category a:hover .badge,
.article-card__category .badge:hover {
 background: var(--color-primary) !important;
 color: #ffffff !important;
 text-decoration: none !important;
}

.badge--accent { background: var(--color-accent); }
.badge--secondary { background: var(--color-secondary); }

.top-bar {
 background: var(--color-secondary);
 color: var(--color-white);
 font-size: 0.78rem;
 padding: 5px 0;
}

.top-bar__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}

.top-bar__date { opacity: 0.8; }

.top-bar__links a {
 color: var(--color-white);
 opacity: 0.8;
 margin-left: 12px;
 transition: opacity var(--transition);
}

.top-bar__links a:hover { opacity: 1; }

.breaking-news {
 background: var(--color-breaking);
 color: var(--color-white);
 padding: 7px 0;
 overflow: hidden;
}

.breaking-news__inner {
 display: flex;
 align-items: center;
 gap: 0;
}

.breaking-news__label {
 flex-shrink: 0;
 background: var(--color-secondary);
 padding: 0 14px;
 font-weight: 700;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 height: 100%;
 display: flex;
 align-items: center;
 margin-right: 16px;
 white-space: nowrap;
}

.breaking-news__ticker {
 overflow: hidden;
 flex: 1;
 position: relative;
}

.breaking-news__track {
 display: flex;
 white-space: nowrap;
 animation: ticker 30s linear infinite;
 gap: 40px;
}

.breaking-news__track:hover { animation-play-state: paused; }

.breaking-news__item a {
 color: var(--color-white);
 font-size: 0.85rem;
 font-weight: 500;
}

@keyframes ticker {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

.site-header {
 background: var(--color-white);
 border-bottom: 1px solid var(--color-border);
 position: sticky;
 top: 0;
 z-index: 1000;
 box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.site-header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: var(--header-height);
 gap: 20px;
}

.site-branding { flex-shrink: 0; }

.site-logo {
 display: flex;
 align-items: center;
 gap: 8px;
}

.site-logo img {
 height: 44px;
 width: auto;
}

.site-title {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 800;
 color: var(--color-primary);
 line-height: 1;
}

.site-title span { color: var(--color-secondary); }

.site-tagline {
 font-size: 0.65rem;
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 1px;
 display: block;
}

.header-ad {
 flex: 1;
 text-align: center;
 max-width: 728px;
}

.header-search { position: relative; }

.header-search__form {
 display: flex;
 align-items: center;
 border: 1.5px solid var(--color-border);
 border-radius: 20px;
 overflow: hidden;
 background: var(--color-bg);
}

.header-search__input {
 border: none;
 background: transparent;
 padding: 6px 12px;
 font-size: 0.85rem;
 width: 180px;
 outline: none;
 color: var(--color-text);
}

.header-search__btn {
 background: var(--color-primary);
 border: none;
 padding: 7px 12px;
 cursor: pointer;
 color: var(--color-white);
 display: flex;
 align-items: center;
 transition: background var(--transition);
}

.header-search__btn:hover { background: var(--color-primary-dark); }

.menu-toggle {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 color: var(--color-text);
}

.main-navigation {
 background: var(--color-secondary);
}

.main-navigation__inner {
 display: flex;
 align-items: center;
}

.nav-menu {
 display: flex;
 align-items: center;
}

.nav-menu > li {
 position: relative;
}

.nav-menu > li > a {
 display: block;
 padding: 10px 14px;
 color: var(--color-white);
 font-size: 0.82rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.4px;
 transition: background var(--transition), color var(--transition);
 white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-parent > a {
 background: var(--color-primary);
 color: var(--color-white);
}

.nav-menu .sub-menu {
 position: absolute;
 top: 100%;
 left: 0;
 min-width: 200px;
 background: var(--color-white);
 box-shadow: var(--shadow-hover);
 border-top: 3px solid var(--color-primary);
 opacity: 0;
 visibility: hidden;
 transform: translateY(8px);
 transition: all var(--transition);
 z-index: 100;
}

.nav-menu li:hover > .sub-menu {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

.nav-menu .sub-menu li a {
 display: block;
 padding: 9px 16px;
 color: var(--color-text);
 font-size: 0.82rem;
 border-bottom: 1px solid var(--color-border);
 transition: background var(--transition);
}

.nav-menu .sub-menu li:last-child a { border-bottom: none; }
.nav-menu .sub-menu li a:hover { background: var(--color-bg); color: var(--color-primary); }

.nav-menu .web-stories-nav > a {
 color: var(--color-accent) !important;
}

.hero-section {
 padding: 20px 0 16px;
}

.hero-grid {
 display: grid;
 grid-template-columns: 1fr 340px;
 gap: 16px;
}

.hero-main {
 position: relative;
 border-radius: var(--radius-md);
 overflow: hidden;
 background: var(--color-card-bg);
 box-shadow: var(--shadow-card);
}

.hero-main__image {
 position: relative;
 aspect-ratio: 16/9;
 overflow: hidden;
}

.hero-main__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
}

.hero-main:hover .hero-main__image img { transform: scale(1.03); }

.hero-main__content {
 padding: 16px;
}

.hero-main__category {
 margin-bottom: 8px;
}

.hero-main__title {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1.3;
 margin-bottom: 8px;
 color: var(--color-secondary);
}

.hero-main__title a:hover { color: var(--color-primary); }

.hero-main__excerpt {
 font-size: 0.9rem;
 color: var(--color-text-muted);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.hero-main__meta {
 margin-top: 10px;
 font-size: 0.78rem;
 color: var(--color-text-muted);
 display: flex;
 align-items: center;
 gap: 12px;
}

.hero-side {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.hero-side-post {
 display: grid;
 grid-template-columns: 110px 1fr;
 gap: 10px;
 background: var(--color-card-bg);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-card);
 padding: 10px;
 transition: box-shadow var(--transition);
}

.hero-side-post:hover { box-shadow: var(--shadow-hover); }

.hero-side-post__image {
 border-radius: var(--radius-sm);
 overflow: hidden;
 aspect-ratio: 4/3;
}

.hero-side-post__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.hero-side-post__title {
 font-family: var(--font-heading);
 font-size: 0.88rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--color-secondary);
}

.hero-side-post__title a:hover { color: var(--color-primary); }

.hero-side-post__meta {
 margin-top: 6px;
 font-size: 0.72rem;
 color: var(--color-text-muted);
}

.web-stories-strip {
 background: var(--color-white);
 padding: 16px;
 border-radius: var(--radius-md);
 border-left: 4px solid var(--color-primary);
 border-top: none;
 border-bottom: none;
 margin-bottom: 28px;
 box-shadow: var(--shadow-card);
}

.web-stories-strip__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 14px;
}

.web-stories-strip__title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-heading);
 font-size: 1rem;
 font-weight: 700;
 color: var(--color-secondary);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.web-stories-strip__title::before {
 content: '';
 display: inline-block;
 width: 14px;
 height: 14px;
 background: var(--color-primary);
 border-radius: 50%;
}

.web-stories-strip__view-all {
 font-size: 0.78rem;
 color: var(--color-primary);
 font-weight: 600;
}

.web-stories-strip__view-all:hover { text-decoration: underline; }

.web-stories-scroll {
 display: flex;
 gap: 12px;
 overflow-x: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
 padding-bottom: 4px;
}

.web-stories-scroll::-webkit-scrollbar { display: none; }

.web-story-card {
 flex-shrink: 0;
 width: 100px;
 cursor: pointer;
 text-align: center;
}

.web-story-card__thumb {
 width: 90px;
 height: 140px;
 border-radius: 14px;
 overflow: hidden;
 border: 3px solid transparent;
 background:
 linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) padding-box,
 linear-gradient(135deg, var(--color-primary), var(--color-accent)) border-box;
 margin: 0 auto 6px;
 position: relative;
 transition: transform var(--transition);
}

.web-story-card:hover .web-story-card__thumb { transform: scale(1.04); }

.web-story-card__thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.web-story-card__thumb::after {
 content: '▶';
 position: absolute;
 bottom: 8px;
 right: 8px;
 width: 24px;
 height: 24px;
 background: rgba(0,0,0,0.6);
 color: white;
 font-size: 0.55rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.web-story-card__title {
 font-size: 0.72rem;
 font-weight: 600;
 color: var(--color-text);
 line-height: 1.3;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.content-area {
 padding: 0 0 32px;
}

.content-columns {
 display: grid;
 grid-template-columns: 1fr 300px;
 gap: 24px;
 align-items: start;
}

.news-section { margin-bottom: 28px; }

.news-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}

.news-grid--2col { grid-template-columns: repeat(2, 1fr); }
.news-grid--4col { grid-template-columns: repeat(4, 1fr); }

.article-card {
 background: var(--color-card-bg);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-card);
 transition: box-shadow var(--transition), transform var(--transition);
 display: flex;
 flex-direction: column;
}

.article-card:hover {
 box-shadow: var(--shadow-hover);
 transform: translateY(-2px);
}

.article-card__image {
 aspect-ratio: 16/9;
 overflow: hidden;
}

.article-card__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.35s ease;
}

.article-card:hover .article-card__image img { transform: scale(1.05); }

.article-card__body {
 padding: 12px;
 flex: 1;
 display: flex;
 flex-direction: column;
}

.article-card__category {
 margin-bottom: 6px;
}

.article-card__title {
 font-family: var(--font-heading);
 font-size: 0.95rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--color-secondary);
 flex: 1;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.article-card__title a:hover { color: var(--color-primary); }

.article-card__meta {
 margin-top: 8px;
 font-size: 0.72rem;
 color: var(--color-text-muted);
 display: flex;
 align-items: center;
 gap: 10px;
}

.article-list-item {
 display: grid;
 grid-template-columns: 90px 1fr;
 gap: 10px;
 padding: 10px 0;
 border-bottom: 1px solid var(--color-border);
}

.article-list-item:last-child { border-bottom: none; }

.article-list-item__image {
 border-radius: var(--radius-sm);
 overflow: hidden;
 aspect-ratio: 4/3;
}

.article-list-item__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.article-list-item__title {
 font-family: var(--font-heading);
 font-size: 0.88rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--color-secondary);
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.article-list-item__title a:hover { color: var(--color-primary); }

.article-list-item__meta {
 margin-top: 4px;
 font-size: 0.72rem;
 color: var(--color-text-muted);
}

.sidebar {
 position: sticky;
 top: calc(var(--header-height) + 16px);
}

.sidebar-widget {
 background: var(--color-card-bg);
 border-radius: var(--radius-md);
 padding: 16px;
 margin-bottom: 20px;
 box-shadow: var(--shadow-card);
}

.sidebar-widget__title {
 font-family: var(--font-heading);
 font-size: 1rem;
 font-weight: 700;
 color: var(--color-secondary);
 padding-bottom: 8px;
 border-bottom: 3px solid var(--color-primary);
 margin-bottom: 14px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.popular-post {
 display: grid;
 grid-template-columns: 70px 1fr;
 gap: 10px;
 padding: 8px 0;
 border-bottom: 1px solid var(--color-border);
 align-items: start;
}

.popular-post:last-child { border-bottom: none; }

.popular-post__num {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 900;
 color: var(--color-border);
 line-height: 1;
 text-align: center;
}

.popular-post__title {
 font-size: 0.82rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--color-secondary);
}

.popular-post__title a:hover { color: var(--color-primary); }

.popular-post__date {
 font-size: 0.7rem;
 color: var(--color-text-muted);
 margin-top: 3px;
}

.tag-cloud {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.tag-cloud a {
 display: inline-block;
 padding: 4px 10px;
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: 0.75rem;
 color: var(--color-text-muted);
 transition: all var(--transition);
}

.tag-cloud a:hover {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: var(--color-white);
}

.ad-widget {
 text-align: center;
}

.ad-widget img {
 width: 100%;
 border-radius: var(--radius-sm);
}

.widget_search .search-submit,
.widget_search input[type="submit"],
.search-form .search-submit,
.search-form input[type="submit"],
.sidebar-widget .search-submit,
.sidebar-widget input[type="submit"],
.wp-block-search__button {
 background: var(--color-primary);
 background-color: var(--color-primary);
 color: #ffffff;
 border: none;
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 padding: 8px 14px;
 cursor: pointer;
 font-size: 0.85rem;
 font-weight: 600;
 transition: background 0.2s;
 min-height: 36px;
 flex-shrink: 0;
}

.widget_search .search-submit:hover,
.search-form .search-submit:hover,
.wp-block-search__button:hover {
 background: var(--color-primary-dark);
}

.widget_search .search-field,
.search-form .search-field,
.wp-block-search__input {
 border: 1.5px solid var(--color-border);
 border-right: none;
 border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 padding: 8px 12px;
 font-size: 0.85rem;
 outline: none;
 background: #fff;
 flex: 1;
 min-width: 0;
}

.widget_search .search-field:focus,
.search-form .search-field:focus {
 border-color: var(--color-primary);
}

/* Force search form into single row — override WP's label+input stacking */
.widget_search form,
.widget_search .search-form,
.search-form,
.sidebar-widget .search-form {
 display: flex !important;
 flex-direction: row !important;
 align-items: stretch !important;
 flex-wrap: nowrap !important;
 gap: 0 !important;
}

/* Hide the visually-hidden label that can cause layout issues */
.widget_search label,
.search-form label {
 display: none !important;
}

/* WP block search layout fix */
.wp-block-search__inside-wrapper {
 display: flex !important;
 flex-direction: row !important;
 align-items: stretch !important;
}

.web-story-card__overlay-title {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 8px 6px;
 font-size: 0.68rem;
 font-weight: 700;
 color: #fff;
 text-align: center;
 line-height: 1.3;
 background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
 border-radius: 0 0 11px 11px;
}

.breadcrumbs {
 padding: 10px 0;
 margin-bottom: 12px;
}

.breadcrumbs__list {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 4px;
 list-style: none;
 padding: 0;
 margin: 0;
}

.breadcrumbs__item {
 font-size: 0.8rem;
 color: var(--color-text-muted);
 list-style: none;
}

.breadcrumbs__item a {
 color: var(--color-primary);
 text-decoration: none;
}

.breadcrumbs__item a:hover {
 text-decoration: underline;
}

.breadcrumbs__sep {
 font-size: 0.8rem;
 color: var(--color-text-muted);
 list-style: none;
 user-select: none;
}

.category-section {
 margin-bottom: 28px;
}

.single-article {
 background: var(--color-card-bg);
 border-radius: var(--radius-md);
 padding: 24px;
 box-shadow: var(--shadow-card);
}

.single-article__header { margin-bottom: 20px; }

.single-article__category { margin-bottom: 10px; }

.single-article__title {
 font-family: var(--font-heading);
 font-size: 1.8rem;
 font-weight: 800;
 line-height: 1.3;
 color: var(--color-secondary);
 margin-bottom: 12px;
}

.single-article__meta {
 display: flex;
 align-items: center;
 gap: 16px;
 font-size: 0.8rem;
 color: var(--color-text-muted);
 border-top: 1px solid var(--color-border);
 border-bottom: 1px solid var(--color-border);
 padding: 10px 0;
 flex-wrap: wrap;
}

.single-article__author {
 display: flex;
 align-items: center;
 gap: 6px;
 font-weight: 600;
 color: var(--color-text);
}

.single-article__author img {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 object-fit: cover;
}

.single-article__featured-image {
 margin-bottom: 20px;
 border-radius: var(--radius-md);
 overflow: hidden;
}

.single-article__featured-image img {
 width: 100%;
 height: auto;
 max-height: 480px;
 object-fit: cover;
}

.single-article__caption {
 font-size: 0.78rem;
 color: var(--color-text-muted);
 text-align: center;
 margin-top: 6px;
 font-style: italic;
}

.entry-content {
 font-size: 1rem;
 line-height: 1.75;
 color: var(--color-text);
}

.entry-content p { margin-bottom: 1.2em; }
.entry-content h2 {
 font-family: var(--font-heading);
 font-size: 1.4rem;
 font-weight: 700;
 color: var(--color-secondary);
 margin: 1.6em 0 0.6em;
 padding-left: 12px;
 border-left: 4px solid var(--color-primary);
}
.entry-content h3 {
 font-family: var(--font-heading);
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--color-secondary);
 margin: 1.4em 0 0.5em;
}
.entry-content ul, .entry-content ol {
 margin-bottom: 1.2em;
 padding-left: 1.5em;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content blockquote {
 border-left: 4px solid var(--color-primary);
 background: var(--color-bg);
 padding: 16px 20px;
 margin: 1.5em 0;
 font-style: italic;
 font-size: 1.05rem;
 color: var(--color-secondary);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content a { color: var(--color-primary); text-decoration: underline; }
.entry-content img {
 border-radius: var(--radius-sm);
 margin: 1em 0;
}
.entry-content table {
 width: 100%;
 border-collapse: collapse;
 margin: 1.2em 0;
 font-size: 0.9rem;
}
.entry-content table th, .entry-content table td {
 padding: 8px 12px;
 border: 1px solid var(--color-border);
 text-align: left;
}
.entry-content table th {
 background: var(--color-secondary);
 color: var(--color-white);
 font-weight: 700;
}
.entry-content table tr:nth-child(even) { background: var(--color-bg); }

.share-buttons {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 20px 0;
 flex-wrap: wrap;
}

.share-buttons__label {
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.share-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 14px;
 border-radius: 20px;
 font-size: 0.78rem;
 font-weight: 600;
 color: var(--color-white);
 cursor: pointer;
 border: none;
 transition: opacity var(--transition);
 text-decoration: none;
}

.share-btn:hover { opacity: 0.85; color: var(--color-white); }
.share-btn--facebook { background: #1877f2; }
.share-btn--twitter { background: #000000; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--telegram { background: #0088cc; }
.share-btn--copy { background: var(--color-text-muted); }

.post-tags {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-top: 16px;
}

.post-tags__label {
 font-size: 0.8rem;
 font-weight: 700;
 color: var(--color-text-muted);
}

.post-tags a {
 display: inline-block;
 padding: 4px 10px;
 background: var(--color-bg);
 border: 1px solid var(--color-border);
 border-radius: 20px;
 font-size: 0.75rem;
 color: var(--color-text-muted);
 transition: all var(--transition);
}

.post-tags a:hover {
 background: var(--color-primary);
 border-color: var(--color-primary);
 color: var(--color-white);
}

.author-box {
 display: flex;
 gap: 18px;
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-left: 4px solid var(--color-primary);
 border-radius: var(--radius-md);
 padding: 20px;
 margin-top: 24px;
 margin-bottom: 32px;
 align-items: flex-start;
 box-shadow: var(--shadow-card);
}

.author-box__avatar { flex-shrink: 0; }

.author-box__content { flex: 1; }

.author-box__label {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--color-primary);
 font-weight: 700;
 margin-bottom: 4px;
}

.author-box__name {
 font-family: var(--font-heading);
 font-size: 1.05rem;
 font-weight: 800;
 color: var(--color-secondary);
 display: block;
 margin-bottom: 6px;
 text-decoration: none;
}

.author-box__name:hover { color: var(--color-primary); }

.author-box__bio {
 font-size: 0.85rem;
 color: var(--color-text-muted);
 line-height: 1.65;
 margin-bottom: 10px;
}

.author-box__link {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--color-primary);
 text-decoration: none;
 transition: gap var(--transition);
}

.author-box__link:hover { gap: 8px; color: var(--color-primary); }

.related-posts {
 margin-top: 28px;
}

.web-stories-page { padding: 24px 0; }

.web-stories-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 20px;
}

.web-story-item {
 cursor: pointer;
}

.web-story-item__thumb {
 width: 100%;
 aspect-ratio: 9/16;
 border-radius: 16px;
 overflow: hidden;
 border: 3px solid transparent;
 background:
 linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) padding-box,
 linear-gradient(135deg, var(--color-primary), var(--color-accent)) border-box;
 position: relative;
 transition: transform var(--transition);
}

.web-story-item:hover .web-story-item__thumb { transform: scale(1.04); }

.web-story-item__thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.web-story-item__thumb::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0,0,0,0.5) 30%, transparent);
}

.web-story-item__title {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1;
 padding: 8px;
 font-size: 0.75rem;
 font-weight: 700;
 color: white;
 line-height: 1.3;
}

.web-story-item__label {
 text-align: center;
 margin-top: 8px;
 font-size: 0.78rem;
 font-weight: 600;
 color: var(--color-text);
 line-height: 1.3;
}

.pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 margin: 28px 0;
}

.pagination a,
.pagination span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: var(--radius-sm);
 font-size: 0.85rem;
 font-weight: 600;
 border: 1px solid var(--color-border);
 background: var(--color-white);
 color: var(--color-text);
 transition: all var(--transition);
}

.pagination a:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination .dots { border: none; background: none; }

.comments-section {
 background: var(--color-card-bg);
 border-radius: var(--radius-md);
 padding: 24px;
 box-shadow: var(--shadow-card);
 margin-top: 20px;
}

.comments-section .comment-reply-title,
.comments-section #reply-title {
 font-family: var(--font-heading);
 font-size: 1.2rem;
 font-weight: 700;
 color: var(--color-secondary);
 margin-bottom: 16px;
}

.comment-form input,
.comment-form textarea {
 width: 100%;
 padding: 10px 14px;
 border: 1.5px solid var(--color-border);
 border-radius: var(--radius-sm);
 font-size: 0.9rem;
 font-family: var(--font-body);
 outline: none;
 transition: border-color var(--transition);
 background: var(--color-bg);
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); }

.comment-form textarea { min-height: 120px; resize: vertical; }

.comment-form .submit {
 background: var(--color-primary);
 color: var(--color-white);
 border: none;
 padding: 10px 24px;
 border-radius: var(--radius-sm);
 font-size: 0.9rem;
 font-weight: 600;
 cursor: pointer;
 transition: background var(--transition);
}

.comment-form .submit:hover { background: var(--color-primary-dark); }

.comment-list li { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.comment-list .comment-author { font-weight: 700; margin-bottom: 4px; }
.comment-list .comment-date { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 8px; }
.comment-list .comment-content { font-size: 0.9rem; }
.comment-list .reply a { font-size: 0.78rem; color: var(--color-primary); margin-top: 6px; display: inline-block; }

.site-footer {
 background: var(--color-secondary) !important;
 color: #ffffff !important;
 padding: 36px 0 0;
}

.site-footer .widget,
.site-footer .sidebar-widget,
.site-footer aside,
.site-footer section,
.site-footer .wp-block-group,
.site-footer .wp-block {
 background: transparent !important;
 background-color: transparent !important;
 box-shadow: none !important;
 border: none !important;
 color: #ffffff !important;

 margin-bottom: 20px !important;
 padding: 0 !important;
}

.site-footer p,
.site-footer span,
.site-footer li,
.site-footer div,
.site-footer td,
.site-footer label,
.site-footer small,
.site-footer strong,
.site-footer em {
 color: rgba(255,255,255,0.85);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widgettitle,
.site-footer .widget-title,
.site-footer .footer-widget__title {
 color: #ffffff !important;
 background: transparent !important;
 font-family: var(--font-heading) !important;
 font-size: 1rem !important;
 font-weight: 700 !important;
 margin-bottom: 14px !important;
 padding-bottom: 8px !important;
 border-bottom: 2px solid var(--color-primary) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.5px !important;
 border-left: none !important;
 border-right: none !important;
 border-top: none !important;
}

.site-footer a,
.site-footer a:visited,
.site-footer a:link {
 color: rgba(255,255,255,0.85) !important;
 text-decoration: none;
 transition: color 0.2s;
}
.site-footer a:hover,
.site-footer a:focus {
 color: #ffffff !important;
}

.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 28px;
 margin-bottom: 28px;
}

.footer-widget__title {
 font-family: var(--font-heading);
 font-size: 1rem;
 font-weight: 700;
 margin-bottom: 14px;
 padding-bottom: 8px;
 border-bottom: 2px solid var(--color-primary);
 text-transform: uppercase;
 letter-spacing: 0.5px;
 color: #ffffff;
}

.footer-about p {
 font-size: 0.85rem;
 color: rgba(255,255,255,0.8) !important;
 line-height: 1.7;
}

.footer-logo { margin-bottom: 12px; }
.footer-logo .site-title { color: #ffffff !important; font-size: 1.3rem; }

.footer-links,
.site-footer ul.menu,
.site-footer ul {
 list-style: none !important;
 padding-left: 0 !important;
 margin-left: 0 !important;
 background: transparent !important;
}

.footer-links li,
.site-footer ul li {
 margin-bottom: 8px;
 list-style: none !important;
 background: transparent !important;
 color: rgba(255,255,255,0.85) !important;
}

.footer-links a,
.site-footer ul.menu li a,
.site-footer ul li a {
 font-size: 0.85rem !important;
 color: rgba(255,255,255,0.85) !important;
 display: flex !important;
 align-items: center;
 gap: 6px;
 text-decoration: none !important;
 background: transparent !important;
 padding: 0 !important;
}

.footer-links a::before,
.site-footer ul.menu li a::before,
.site-footer ul li a::before {
 content: '›';
 color: var(--color-primary) !important;
 font-weight: 700;
 flex-shrink: 0;
}

.footer-links a:hover,
.site-footer ul li a:hover { color: #ffffff !important; }

.footer-post {
 display: flex;
 gap: 10px;
 padding: 8px 0;
 border-bottom: 1px solid rgba(255,255,255,0.12);
 background: transparent !important;
}
.footer-post:last-child { border-bottom: none; }

.footer-post__image {
 flex-shrink: 0;
 width: 60px;
 height: 50px;
 border-radius: var(--radius-sm);
 overflow: hidden;
}
.footer-post__image img { width: 100%; height: 100%; object-fit: cover; }

.footer-post__title {
 font-size: 0.8rem;
 font-weight: 600;
 line-height: 1.35;
 color: rgba(255,255,255,0.85) !important;
}
.footer-post__title a { color: rgba(255,255,255,0.85) !important; }
.footer-post__title a:hover { color: #ffffff !important; }
.footer-post__date { font-size: 0.7rem; color: rgba(255,255,255,0.55) !important; margin-top: 3px; }

.site-footer input[type="email"],
.site-footer input[type="text"],
.site-footer input[type="search"],
.site-footer textarea {
 background: rgba(255,255,255,0.1) !important;
 border: 1px solid rgba(255,255,255,0.3) !important;
 color: #ffffff !important;
 border-radius: var(--radius-sm);
 padding: 9px 12px;
 width: 100%;
 font-size: 0.85rem;
 box-shadow: none !important;
}

.site-footer input::placeholder,
.site-footer textarea::placeholder {
 color: rgba(255,255,255,0.45) !important;
}

.site-footer input[type="submit"],
.site-footer button[type="submit"],
.site-footer .wp-block-button__link,
.site-footer .mc4wp-form-fields input[type="submit"] {
 background: var(--color-primary) !important;
 color: #ffffff !important;
 border: none !important;
 padding: 9px 18px;
 border-radius: var(--radius-sm);
 cursor: pointer;
 font-weight: 600;
 font-size: 0.85rem;
 margin-top: 8px;
 transition: background 0.2s;
}
.site-footer input[type="submit"]:hover { background: var(--color-primary-dark) !important; }

.social-icons {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: 8px;
 margin-top: 14px;
 padding: 0;
 list-style: none;
 align-items: center;
}

/* nb-social-btn: fully isolated icon button — no inheritance issues */
a.nb-social-btn {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 42px !important;
 height: 42px !important;
 min-width: 42px !important;
 min-height: 42px !important;
 padding: 0 !important;
 margin: 0 !important;
 background-color: rgba(255,255,255,0.15) !important;
 border-radius: 8px !important;
 text-decoration: none !important;
 flex-shrink: 0 !important;
 overflow: hidden !important;
 transition: background-color 0.2s, transform 0.15s !important;
}

a.nb-social-btn::before {
 content: none !important;
 display: none !important;
}

a.nb-social-btn svg {
 display: block !important;
 width: 20px !important;
 height: 20px !important;
 flex-shrink: 0 !important;
 stroke: #ffffff !important;
 fill: none !important;
}

a.nb-social-btn:hover {
 background-color: var(--color-primary) !important;
 transform: translateY(-2px) !important;
}

a.nb-social-btn:hover svg {
 stroke: #ffffff !important;
}

.footer-bottom {
 background: rgba(0,0,0,0.28) !important;
 padding: 14px 0;
}
.footer-bottom__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.78rem;
 color: rgba(255,255,255,0.7) !important;
 gap: 16px;
 flex-wrap: wrap;
}
.footer-bottom__inner span,
.footer-bottom__inner div { color: rgba(255,255,255,0.7) !important; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: rgba(255,255,255,0.7) !important; text-decoration: none; transition: color 0.2s; }
.footer-bottom-links a:hover { color: #ffffff !important; }

.nb-newsletter__desc {
 font-size: 0.82rem;
 color: rgba(255,255,255,0.75) !important;
 margin-bottom: 12px;
 line-height: 1.5;
}

.nb-newsletter__form {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.nb-newsletter__input {
 width: 100% !important;
 padding: 10px 14px !important;
 background: rgba(255,255,255,0.1) !important;
 border: 1.5px solid rgba(255,255,255,0.25) !important;
 border-radius: var(--radius-sm) !important;
 color: #ffffff !important;
 font-size: 0.85rem !important;
 font-family: var(--font-body);
 outline: none !important;
 box-shadow: none !important;
 transition: border-color 0.2s;
}

.nb-newsletter__input::placeholder {
 color: rgba(255,255,255,0.45) !important;
}

.nb-newsletter__input:focus {
 border-color: var(--color-primary) !important;
 background: rgba(255,255,255,0.15) !important;
}

.nb-newsletter__btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 width: 100%;
 padding: 10px 16px;
 background: var(--color-primary) !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: var(--radius-sm);
 font-size: 0.88rem;
 font-weight: 700;
 cursor: pointer;
 transition: background 0.2s, transform 0.15s;
 font-family: var(--font-body);
}

.nb-newsletter__btn:hover {
 background: var(--color-primary-dark) !important;
 transform: translateY(-1px);
}

.nb-newsletter__privacy {
 font-size: 0.72rem !important;
 color: rgba(255,255,255,0.45) !important;
 margin-top: 6px;
 text-align: center;
}

.nb-newsletter--success {
 background: rgba(39,174,96,0.15) !important;
 border: 1px solid rgba(39,174,96,0.4) !important;
 border-radius: var(--radius-sm);
 padding: 12px;
 color: #5af5a0 !important;
 font-size: 0.85rem;
 text-align: center;
}

#scroll-top {
 position: fixed;
 bottom: 24px;
 right: 24px;
 width: 40px;
 height: 40px;
 background: var(--color-primary);
 color: var(--color-white);
 border: none;
 border-radius: 50%;
 cursor: pointer;
 display: none;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
 z-index: 999;
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 transition: background var(--transition), transform var(--transition);
}

#scroll-top:hover { background: var(--color-primary-dark); transform: scale(1.1); }
#scroll-top.visible { display: flex; }

.load-more-wrap { text-align: center; margin-top: 20px; }

.btn-load-more {
 display: inline-block;
 padding: 10px 28px;
 background: var(--color-primary);
 color: var(--color-white);
 border-radius: var(--radius-sm);
 font-size: 0.88rem;
 font-weight: 600;
 cursor: pointer;
 border: none;
 transition: background var(--transition);
}

.btn-load-more:hover { background: var(--color-primary-dark); color: var(--color-white); }

@media (max-width: 1024px) {
 .hero-grid { grid-template-columns: 1fr 280px; }
 .news-grid { grid-template-columns: repeat(2, 1fr); }
 .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
 :root { --container-padding: 12px; }

 .top-bar { display: none; }
 .header-ad { display: none; }

 .site-header__inner { height: 52px; }

 .menu-toggle { display: block; }

 .main-navigation__inner { flex-direction: column; }

 .nav-menu {
 display: none;
 flex-direction: column;
 width: 100%;
 background: var(--color-secondary);
 }

 .nav-menu.is-open { display: flex; }

 .nav-menu > li > a { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }

 .nav-menu .sub-menu {
 position: static;
 opacity: 1;
 visibility: visible;
 transform: none;
 box-shadow: none;
 background: rgba(0,0,0,0.2);
 border-top: none;
 display: none;
 }

 .nav-menu li.is-open > .sub-menu { display: block; }
 .nav-menu .sub-menu li a { color: rgba(255,255,255,0.8); padding-left: 32px; }

 .hero-grid { grid-template-columns: 1fr; }
 .hero-main__title { font-size: 1.2rem; }

 .content-columns { grid-template-columns: 1fr; }
 .sidebar { position: static; }

 .news-grid { grid-template-columns: repeat(2, 1fr); }
 .news-grid--4col { grid-template-columns: repeat(2, 1fr); }

 .footer-grid { grid-template-columns: 1fr; }

 .web-stories-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

 .single-article__title { font-size: 1.4rem; }
}

@media (max-width: 480px) {
 .news-grid { grid-template-columns: 1fr; }
 .news-grid--2col { grid-template-columns: 1fr; }
 .hero-side-post { grid-template-columns: 90px 1fr; }
 .web-stories-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

@media print {
 .site-header, .main-navigation, .sidebar, .site-footer,
 .breaking-news, .web-stories-strip, .share-buttons,
 #scroll-top, .load-more-wrap { display: none !important; }

 .content-columns { grid-template-columns: 1fr; }
 .single-article { box-shadow: none; padding: 0; }
 .entry-content a::after { content: " (" attr(href) ")"; }
}