/*
Theme Name: Telugu News Portal
Theme URI: https://example.com/telugu-news-portal
Author: Custom Theme Developer
Author URI: https://example.com
Description: A professional, secure, SEO-optimized WordPress theme for Telugu news websites. Features category-based layouts with 3-4 news thumbnails per section, breaking news ticker, custom Telugu fonts (Ramabhadra, Ramaraja, Suranna), YouTube and podcast integration, Google Discover readiness, auto title translation support, custom color packs, and hardened security with comments disabled.
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: telugu-news-portal
Tags: news, magazine, telugu, custom-colors, custom-menu, featured-images, translation-ready, seo
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
*/

/* ==========================================================================
   CSS Variables - Custom Color Pack (Editable via Customizer)
   ========================================================================== */
:root {
  --primary-color: #c41e3a; /* Deep red for headlines/categories */
  --secondary-color: #1a1a2e;
  --header-bg: #1a1a2e;
  --footer-bg: #1a1a2e;
  --menu-text-color: #ffffff; /* Dark navy for headers */
  --accent-color: #e94560; /* Bright accent */
  --background-color: #f8f9fa;
  --card-bg: #ffffff;
  --text-color: #222222;
  --text-muted: #555555;
  --border-color: #e0e0e0;
  --ticker-bg: #c41e3a;
  --post-title-color: #1a1a2e;
  --ticker-text: #ffffff;
  --link-color: #0d47a1;
  --hover-color: #b71c1c;
  --success-color: #2e7d32;
  --font-primary: 'Ramabhadra', 'Noto Sans Telugu', sans-serif;
  --font-secondary: 'Ramaraja', 'Noto Serif Telugu', serif;
  --font-heading: 'Suranna', 'Ramabhadra', serif;
  --font-body: 'Noto Sans Telugu', 'Ramabhadra', sans-serif;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

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

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--post-title-color, var(--secondary-color));
}

/* ==========================================================================
   Typography - Telugu Fonts
   ========================================================================== */
.telugu-text {
  font-family: var(--font-primary);
}

.heading-telugu {
  font-family: var(--font-heading);
}

.body-telugu {
  font-family: var(--font-body);
}

/* ==========================================================================
   Layout Container
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
}

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--secondary-color);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.header-top {
  background: #0f0f1a;
  padding: 6px 0;
  font-size: 0.85rem;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

/* Logo - larger custom size */
.site-branding .custom-logo-link {
  display: inline-block;
  line-height: 0;
}

.site-branding .custom-logo {
  max-height: 90px;
  width: auto;
  height: auto;
  max-width: 320px;
  object-fit: contain;
}

.site-branding .site-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  color: #fff;
  margin: 0;
}

.site-branding .site-title a {
  color: #fff;
}

@media (max-width: 600px) {
  .site-branding .custom-logo {
    max-height: 60px;
    max-width: 220px;
  }
}

.main-navigation ul {
  display: flex;
  gap: 20px;
  align-items: center;
}

.main-navigation a {
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 4px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
  background: var(--primary-color);
  color: #fff;
}

/* ==========================================================================
   Breaking News Ticker
   ========================================================================== */
.breaking-news-ticker {
  background: var(--ticker-bg);
  color: var(--ticker-text);
  padding: 8px 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.ticker-label {
  background: #8b0000;
  color: #fff;
  padding: 8px 18px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  z-index: 2;
  flex-shrink: 0;
}

.ticker-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 28px;
}

.ticker-track {
  display: flex;
  gap: 40px;
  animation: ticker-scroll 40s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticker-item a {
  color: #fff;
}

.ticker-item a:hover {
  text-decoration: underline;
}

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

.ticker-track:hover {
  animation-play-state: paused;
}

/* ==========================================================================
   Main Content Grid - Inspired by provided layout
   ========================================================================== */
.main-content {
  flex: 1;
  padding: 25px 0 40px;
}

.home-layout {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 20px;
}

@media (max-width: 1100px) {
  .home-layout {
    grid-template-columns: 1fr 1fr;
  }
  .sidebar-left { grid-column: 1 / -1; }
}

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

/* Left Sidebar - Latest / Trending List */
.sidebar-left {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
}

.sidebar-header {
  background: var(--primary-color);
  color: #fff;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
}

.news-list-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

.news-list-item:hover {
  background: #f5f5f5;
}

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

.news-list-thumb {
  width: 70px;
  height: 55px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.news-list-title {
  font-family: var(--font-primary);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list-title a {
  color: inherit;
}

.news-list-title a:hover {
  color: var(--primary-color);
}

/* Category Sections */
.category-section {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  margin-bottom: 28px;
  overflow: hidden;
}

.category-header {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #fff;
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-header a {
  color: #fff;
  font-size: 0.85rem;
  font-family: var(--font-primary);
  opacity: 0.9;
}

.category-header a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ========== DESKTOP LAYOUT (matches 1st screenshot) ========== */
.category-desktop-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}

.cat-featured {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.cat-featured-link {
  display: block;
  height: 100%;
  position: relative;
}

.cat-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 320px;
  transition: transform 0.4s ease;
}

.cat-featured:hover img {
  transform: scale(1.04);
}

.cat-featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  padding: 50px 20px 18px;
  color: #fff;
}

.cat-featured-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right side list */
.cat-side-list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
}

.cat-side-item {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

.cat-side-item:last-child {
  border-bottom: none;
}

.cat-side-item:hover {
  background: #f8f8f8;
}

.cat-side-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: inherit;
}

.cat-side-content {
  flex: 1;
  min-width: 0;
}

.cat-side-title {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-color);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-side-item:hover .cat-side-title {
  color: var(--primary-color);
}

.cat-side-thumb {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ========== MOBILE LAYOUT (matches 2nd screenshot) ========== */
.category-mobile-layout {
  display: none; /* Hidden on desktop */
}

.cat-mobile-item {
  border-bottom: 1px solid var(--border-color);
}

.cat-mobile-item:last-child {
  border-bottom: none;
}

.cat-mobile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: inherit;
}

.cat-mobile-content {
  flex: 1;
  min-width: 0;
}

.cat-mobile-title {
  font-family: var(--font-primary);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-color);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-mobile-item:hover .cat-mobile-title {
  color: var(--primary-color);
}

.cat-mobile-thumb {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.cat-mobile-featured .cat-mobile-title {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Right Sidebar */
.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.widget {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
}

.widget-title {
  background: var(--secondary-color);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
}

.widget-content {
  padding: 14px;
}

/* Video / Podcast Embeds */
.video-embed,
.podcast-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 12px;
}

.video-embed iframe,
.podcast-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Single Post
   ========================================================================== */
.single-post {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.single-post .entry-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  margin-bottom: 12px;
  color: var(--post-title-color, var(--secondary-color));
}

.entry-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.entry-content {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
}

.entry-content p {
  margin-bottom: 1.2em;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}

/* English Translation Title */
.english-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 15px;
  border-left: 3px solid var(--primary-color);
  padding-left: 12px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--secondary-color);
  color: #ccc;
  padding: 20px 0 12px;
  margin-top: auto;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-widget-title {
  color: #fff;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
}

/* ==========================================================================
   Security & Accessibility Helpers
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* No comments styling - force hide if any leak */
.comments-area,
#comments,
.comment-respond {
  display: none !important;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet and below: switch to mobile stacked layout */
@media (max-width: 900px) {
  .category-desktop-layout {
    display: none;
  }
  .category-mobile-layout {
    display: block;
  }
}

@media (max-width: 600px) {
  .header-main {
    flex-direction: column;
    gap: 10px;
  }
  .main-navigation ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cat-mobile-thumb {
    width: 90px;
    height: 68px;
  }
  .cat-mobile-title {
    font-size: 0.92rem;
  }
}

/* Print styles for better SEO/print */
@media print {
  .site-header,
  .breaking-news-ticker,
  .sidebar-left,
  .sidebar-right,
  .site-footer {
    display: none;
  }
  .main-content {
    padding: 0;
  }
}