/*
Theme Name: tnewsrajasthan custom
Theme URI: https://wa.me/+919351035439
Developer: prashant lakhara
Contact: +91 9351035439 , Email: prashantlakhara54@gmail.com
Description: News Theme With Custom UI
Version: 1.4.6
License: Full Access
Text Domain: tnewsrajasthan
*/

/* --- Base + font --- */
@font-face{
  font-family: 'InterVar';
  src: local('Inter'), local('Inter Regular');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root{
  --bg:#f5f6f7;
  --card:#ffffff;
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
  --brand:#ff6a00;
  --link:#0a66c2;
  --maxw:1280px;
  --left:240px;
  --center:600px;
  --right:380px;
  --gap:20px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:#ffffff;
  color:var(--text);
  font-family:InterVar,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5
}
img{max-width:100%;height:auto;border:0}

/* --- Layout shell --- */
.site-wrap{max-width:var(--maxw);margin:0 auto;padding:0 12px}

/* === Grid with named areas: left / center / right === */
.grid{
  display:grid;
  grid-template-columns:var(--left) var(--center) var(--right);
  grid-template-areas:"left center right";
  gap:var(--gap);
  align-items:start;
}
.leftmenu{grid-area:left}
.main-col{grid-area:center}
.rightbar{grid-area:right}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 1px 1px rgba(0,0,0,.03)
}
.sticky-aside{position:sticky;top:12px}

/* === Left sidebar look like Dainik Bhaskar === */
.leftmenu{
  padding:10px 0;
  background:#fff;
  border-radius:10px
}
.leftmenu .logo-wrap{display:flex;align-items:center;gap:8px;padding:8px 12px}
.leftmenu .logo-wrap img{height:28px}
.leftmenu .logo-wrap strong{font-size:16px}
.leftmenu ul{list-style:none;margin:6px 0;padding:0}
.leftmenu li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #eee;
  color:var(--text);
  font-size:18px;
  font-weight:700;
  text-decoration:none
}
.leftmenu li:hover{background:#f5f5f5;cursor:pointer}
.leftmenu li img{width:20px;height:20px}
.leftmenu a{color:inherit;text-decoration:none;font-weight:700}

/* === Content list === */
.post-list .post{
  display:grid;
  grid-template-columns:1fr 140px;
  gap:14px;
  padding:14px;
  border-bottom:1px solid var(--border)
}
.post-list .post:last-child{border-bottom:0}
.post .meta{font-size:12px;color:var(--muted)}

/* === Post title maximum 3 lines only === */
.post h2,
.post h2 a {
  font-size:20px;
  margin:6px 0 4px;
  line-height:1.5em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:4.5em;
}
.post h2 a{color:var(--text);text-decoration:none}
.post h2 a:hover{
  color:var(--text);
  text-decoration:none;
}

.post .excerpt{font-size:14px;color:#333}
.post .thumb img{width:140px;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}

/* === Bhaskar style category badge === */
.post .category,
.single .category {
  display:inline-block;
  background:#fff;
  color:#000;
  font-size:13px;
  font-weight:645;
  padding:3px 14px;
  border:1px solid #ddd;
  border-radius:999px;
  margin-top:17px;
  line-height:2.2;
  text-decoration:none;
}
.post .category a,
.single .category a {
  color:inherit;
  text-decoration:none;
}
.post .category a:hover,
.single .category a:hover {
  color:inherit;
  text-decoration:none;
}

/* === Share icons exactly under thumbnail center === */
.post .thumb .sharebar{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
.post .thumb .sharebar a{margin:0 4px}

/* === Compact share buttons === */
.sharebar{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.sharebar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  text-decoration:none
}
.sharebar svg{width:18px;height:18px;fill:#444}
.sharebar a:hover svg{fill:#0a66c2}

/* === Single post === */
.single .title{font-size:28px;margin:8px 0}
.single .byline{font-size:13px;color:var(--muted);margin-bottom:10px}
.single .content{font-size:17px}
.single .content p{margin-bottom:1.2em}
.single .featured{margin-bottom:15px}

/* === Suggestions section same look as homepage === */
.suggestions h3{font-size:18px;margin:8px 14px}
.suggestions .slist{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--border)
}
.suggestions .slist article.post{
  display:grid;
  grid-template-columns:1fr 140px;
  gap:14px;
  padding:14px;
  border-bottom:1px solid var(--border)
}
.suggestions .slist article.post:last-child{border-bottom:0}

/* === Right sidebar widgets === */
.rightbar .widget{padding:12px;border-bottom:1px solid var(--border)}
.rightbar .widget:last-child{border-bottom:0}
.rightbar img{max-width:100%;height:auto;display:block}

/* === Footer === */
.footer{margin-top:20px;padding:20px 0;color:#444}
.footer .inner{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--border);
  padding-top:12px;
  font-size:14px
}

/* === Responsive === */
@media (max-width:1100px){
  :root{--left:200px;--center:1fr;--right:300px;--maxw:1100px}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;grid-template-areas:"center"}
  .sticky-aside{position:static}
  .leftmenu,.rightbar{display:none!important}
  .main-col{width:100%!important;padding:0 10px}
}

/* === Final City dropdown exactly below parent === */
.leftmenu .has-dropdown {
  position: relative;
}
.leftmenu .has-dropdown .city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  list-style: none;
  padding: 10px 15px;
  margin: 0;
  background: #fff;
  border: 1px solid #eee;
  border-top: none;
  z-index: 999;
}
.leftmenu .has-dropdown.open .city-dropdown {
  display: block;
}
.leftmenu .city-dropdown li {
  padding: 6px 0;
}
.leftmenu .city-dropdown label {
  font-size: 15px;
  color: var(--text);
}
.leftmenu .city-dropdown input[type="checkbox"] {
  margin-right: 6px;
}
.leftmenu .city-dropdown .city-go {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}
.leftmenu .city-dropdown .city-go:hover {
  background: #e55b00;
}

/* === Sticky + Rounded Header (Final Mobile Fix) === */
.site-header {
  position: sticky;           /* ✅ सभी पेज पर fix */
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 auto;
  max-width: var(--maxw);     /* ✅ body/grid के साथ match */
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
}

/* === Mobile view === */
@media (max-width:900px){
  .mobile-header {
    position: sticky;
    top: 0;
    width: 90%;
    max-width: var(--maxw);       /* ✅ अब body के बराबर होगा */
    margin: 0 auto;
    border-radius: 12px;
    padding: 0 12px;
    background: #fff;
  }
  .mobile-header .logo img {
    max-height: 55px;             /* लोगो थोड़ा छोटा */
  }
  body {
    padding-top: 85px;            /* sticky header का gap */
  }

  /* Mobile content font adjustments */
  .main-col {
    font-size: 15px;
    line-height: 1.6;
  }
  .post h2,
  .post h2 a {
    font-size: 18px;
  }
}

/* === Custom: Header & Mobile Menu fixes (refreshed) === */

/* --- Fix: mobile menu should scroll and fit edge-to-edge --- */
@media (max-width: 900px){
  .mobile-scroll-menu{
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    background:#fff;
    border-bottom:1px solid var(--border);

    /* .card main-col के अंदर edge-to-edge लाने के लिए */
    margin:0 -12px 10px;     /* कार्ड की left/right padding negate */
    padding:8px 12px;
    box-sizing:border-box;
    max-width:100%;
  }
  .mobile-scroll-menu ul{
    display:flex;
    gap:20px;
    margin:0; padding:0;
    min-width:max-content;   /* ✅ अंदर का कंटेंट जितना होगा उतना चौड़ा, इसलिए scroll होगा */
  }
  .mobile-scroll-menu li{ flex:0 0 auto; }
}

/* ===== New Header ===== */
.site-header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--border);
  z-index: 999;
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 40px;     /* desktop padding थोड़ा कम */
}

.header-inner .logo img {
  max-height: 110px;     /* desktop logo height हल्की कम */
}

.header-ad {
  flex: 1;
  margin-left: 20px;
  text-align: right;
}

/* ===== Desktop vs Mobile ===== */
.desktop-header { display: block; }
.mobile-header  { display: none; }

@media (max-width:900px){
  .desktop-header { display: none; }
  .mobile-header  {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--border);
  }

  /* mobile header inner adjustments */
  .mobile-header .header-inner {
    padding: 6px 12px;        /* ✅ बहुत compact padding */
    height: 60px;             /* ✅ height छोटा */
  }

  .mobile-header .logo img {
    max-height: 80px;         /* ✅ logo छोटा */
    margin-left: 4px;         /* ✅ logo को left के पास लाना */
  }

  /* body top padding भी छोटा करें ताकि content gap न दिखे */
  body { padding-top: 65px; }
}

/* ===== Mobile menu toggle ===== */
.mobile-menu-toggle {
  font-size: 35px;
  cursor: pointer;
  user-select: none;
}

/* ===== Mobile menu panel (off-canvas) ===== */
.mobile-menu-panel {
  position: fixed;
  top: 60px;                 /* ✅ header की नई height के बराबर */
  left: -260px;
  width: 240px;
  height: calc(100% - 60px);
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,0,0,.2);
  overflow-y: auto;
  transition: left 0.3s ease;
  padding: 12px;
  z-index: 9999;
}
body.mobile-menu-open .mobile-menu-panel {
  left: 0;
}

/* off-canvas menu content को साफ़ और visible रखें */
.mobile-menu-panel .leftmenu {
  background: none;
  border: none;
  padding: 0;
}
.mobile-menu-panel .leftmenu ul {
  margin: 0;
  padding: 0;
}
.mobile-menu-panel .leftmenu li {
  background: #fff;
  border-bottom: 1px solid #eee;
}
.mobile-menu-panel .leftmenu a {
  color: var(--text);
  text-decoration: none;
}

/* === Force show leftmenu inside mobile menu panel === */
.mobile-menu-panel .leftmenu {
  display: block !important;
  position: relative;
  top: 0;
  box-shadow: none;
  border-radius: 0;
}

/* === Desktop header height increase only === */
@media (min-width:901px){
  .site-header .header-inner {
    padding-top: 10px;    /* पहले 8px था, अब height थोड़ी बढ़ गई */
    padding-bottom: 10px;
  }
  .site-header .logo img {
    max-height: 200px;    /* logo को भी थोड़ा बड़ा कर सकते हैं */
  }
}

/* === Improve mobile dropdown tap === */
.leftmenu .toggle-city { cursor: pointer; }
.leftmenu .has-dropdown.open > .toggle-city { font-weight: 600; }


/* === Custom Merged from Additional CSS === */

/* === Page title styling === */
.page .entry-title {
  font-size: 2rem;
  text-transform: none;
  font-weight: bold;
  margin-bottom: 20px;
}

/* === Desktop-only sticky sidebars === */
@media (min-width: 901px) {
  .leftmenu {
    position: sticky;
    top: 80px;
  }
  .sidebar,
  .sidebar-right {
    position: sticky;
    top: 80px;
  }
}

/* === Ensure no sidebars show on mobile === */
@media (max-width: 900px) {
  .leftmenu,
  .sidebar,
  .sidebar-right {
    display: none !important;
  }
}

/* === Responsive Blue Header Ad === */
.header-ad-banner {
  text-align: center;
  margin: 10px auto;
}

.header-ad-banner .ad-box {
  background: #007BFF;        /* नीला बैकग्राउंड */
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 70px;
  border-radius: 8px;
  text-align: center;
  max-width: 728px;           /* Desktop default width */
  margin: 0 auto;
  transition: background 0.3s ease;
}

.header-ad-banner .ad-box:hover {
  background: #0056b3;        /* Hover पर गहरा नीला */
}

.header-ad-banner a {
  text-decoration: none;
  color: inherit;
}

/* Mobile responsive size */
@media (max-width: 900px) {
  .header-ad-banner .ad-box {
    max-width: 320px;
    font-size: 16px;
    padding: 18px;
  }
}

/* === Compact Desktop Header Only === */
@media (min-width:901px) {
  .site-header.desktop-header .header-inner {
    padding-top: 4px;      /* ऊपर का padding कम करें */
    padding-bottom: 4px;   /* नीचे का padding कम करें */
    min-height: 70px;      /* default ~90-110px है, अब compact */
  }

  .site-header.desktop-header .logo img {
    max-height: 180px;     /* लोगो height कम करके header में fit करें */
  }

  /* Header ad area को बेहतर फिट करें */
  .site-header.desktop-header .header-ad {
    margin-left: 10px;
  }
}

/* === Force Hard Sticky Sidebars without UI change === */
@media (min-width:901px) {

  /* Left sidebar */
  .leftmenu {
    position: sticky;                 /* grid alignment intact */
    top: 80px;                        /* match header height */
    max-height: calc(100vh - 80px);   /* viewport minus header */
    overflow: hidden;                 /* disable internal scrolling */
  }

  /* Right sidebar */
  .sidebar,
  .sidebar-right,
  .rightbar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 80px);
    overflow: hidden;
  }
}

/* === Footer Styling (Bigger + Bold) === */
.footer {
  margin-top: 30px;
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-nav {
  margin-bottom: 10px;
}

.footer-nav a {
  color: var(--text);           /* main text color */
  font-size: 16px;              /* bigger */
  font-weight: 600;             /* bold */
  text-decoration: none;
  margin: 0 12px;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-nav a:hover {
  color: var(--brand);          /* orange hover */
  text-decoration: underline;
}

.footer-copy {
  color: var(--muted);
  font-size: 15px;              /* bigger */
  font-weight: 500;             /* medium-bold */
}


/* === Rotating Header Ad Banner === */
.header-ad-banner.rotating-ad {
  text-align: center;
  margin: 10px auto;
}
.header-ad-banner.rotating-ad img {
  max-width: 728px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: opacity 1s ease-in-out;
}
@media (max-width: 900px) {
  .header-ad-banner.rotating-ad img {
    max-width: 320px;
  }
}

/* === Menu Home Icon === */
.menu-home-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 6px;
}
.menu-icon:hover .menu-home-icon path:first-child {
  filter: brightness(1.2);
}

/* === Sidebar smooth sticky === */
@media (min-width:901px){
  .leftmenu,
  .sidebar,
  .sidebar-right,
  .rightbar {
    position: sticky;
    top: 80px;
  }
  .leftmenu ul,
  .rightbar {
    transition: all 0.3s ease;
  }
}

/* === Common Sidebar Ad Widget Styling === */
.sidebar-ad-widget {
  width: 100%;
  min-height: 300px;              /* base height */
  padding: 25px 15px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertically center */
  transition: transform 0.2s ease;
}

.sidebar-ad-widget:hover {
  transform: translateY(-4px);    /* हल्का hover effect */
}

/* Heading & Text */
.sidebar-ad-widget h3 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
.sidebar-ad-widget p {
  margin: 12px 0 0;
  font-size: 18px;
}

/* === Color Variants === */
.sidebar-ad-widget.orange {
  background: linear-gradient(135deg, #ff6a00, #ffcc00);
}
.sidebar-ad-widget.blue {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.sidebar-ad-widget.green {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

/* === Responsive === */
@media (max-width: 1200px) {
  .sidebar-ad-widget {
    min-height: 250px;
    padding: 20px 12px;
  }
}
@media (max-width: 900px) {
  .sidebar-ad-widget {
    min-height: 200px;
    padding: 16px 10px;
    font-size: 16px;
  }
  .sidebar-ad-widget h3 {
    font-size: 20px;
  }
  .sidebar-ad-widget p {
    font-size: 15px;
  }
}
/* === Sidebar Ad Widget Image Responsive === */
.sidebar-ad-widget img {
  max-width: 100%;     /* container से बाहर न जाए */
  height: auto;        /* proportion maintain */
  border-radius: 10px; /* rounded look (optional) */
  display: block;      /* proper alignment */
  margin: 0 auto;      /* center align */
}


/* === Sidebar Scroll Fix === */
@media (min-width:901px){
  .leftmenu,
  .sidebar,
  .sidebar-right,
  .rightbar {
    position: sticky;
    top: 80px; /* header height के हिसाब से adjust */
    max-height: calc(100vh - 80px); /* full viewport minus header */
    overflow-y: auto; /* अब scroll enable */
    overflow-x: hidden;
    scrollbar-width: thin;          /* Firefox */
    scrollbar-color: #ccc transparent;
  }

  /* Chrome/Edge scrollbar */
  .leftmenu::-webkit-scrollbar,
  .rightbar::-webkit-scrollbar {
    width: 6px;
  }
  .leftmenu::-webkit-scrollbar-thumb,
  .rightbar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
}