/*
 * RajasthanGovtJob.com — Devanagari Post CSS v1.0
 * AdSense Friendly + Hindi Typography Optimized
 * Covers: Single post layout, Quick Info Box, FAQ,
 *         Tables, Headings, Verified bar, Share bar,
 *         Sticky apply bar, Breadcrumb, Mobile
 */

/* ══════════════════════════════════════════════════
   1. DEVANAGARI FONT STACK + ROOT VARIABLES
   ══════════════════════════════════════════════════ */
:root {
  --hindi-font: 'Noto Sans Devanagari', 'Mangal', 'Kokila', 'Utsaah', Arial, sans-serif;
  --body-font:  'DM Sans', 'Noto Sans Devanagari', system-ui, sans-serif;
  --head-font:  'Noto Sans Devanagari', 'DM Sans', sans-serif; /* v6.9.172 — Playfair mein Hindi akshar nahi, heading do font mein toot-ti thi */

  /* Hindi-specific spacing (wider line-height for matras) */
  --hi-line-height: 1.85;
  --hi-para-gap:    22px;
  --hi-letter-sp:   0.01em;

  /* Content max-width (AdSense prefers defined content width) */
  --content-max: 780px;

  /* Colors */
  --saffron-post:  #b44400;
  --gold-post:     #d4891a;
  --cream-post:    #fdf6ee;
  --border-post:   #e8d5bf;
  --text-dark:     #1a0a00;
  --text-mid:      #4a2800;
  --text-muted:    #7a5535;
  --green-ok:      #1a7a3c;
  --red-imp:       #c0392b;
  --blue-info:     #1a5276;
}

/* ══════════════════════════════════════════════════
   2. SINGLE ARTICLE WRAPPER
   ══════════════════════════════════════════════════ */
/* v6.9.114 — DESKTOP PAR CONTENT SIKUDNE KI DIKKAT FIX.
   Pehle yahan max-width: 780px tha. Post page par layout column
   (1fr + 300px sidebar) usse kaafi chaudi hoti hai, isliye article
   column ke beech mein 780px ka patla card ban kar baith jaata tha
   aur baayin taraf badi khaali jagah dikhti thi — laptop par ye
   "mobile jaisa" lagta tha. Ab article apne column ki poori chaudai
   leta hai; padhne layak chaudai container se tay hoti hai. */
.ss-single-article {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(94,26,0,.08);
}

/* ══════════════════════════════════════════════════
   3. POST HEADER — Title, Meta, Verified Bar
   ══════════════════════════════════════════════════ */
.ss-post-header {
  padding: 28px 30px 20px;
  border-bottom: 2px solid var(--border-post);
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
}

/* Category label above title */
.ss-post-category-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--saffron-post);
  color: #fff;
  font-family: var(--body-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* Post Title — Hindi optimized */
.ss-post-title,
.ss-single-article h1.entry-title,
.ss-single-article .post-title {
  font-family: var(--hindi-font);
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.55;
  letter-spacing: var(--hi-letter-sp);
  margin: 0 0 16px;
}

/* Post meta row */
.ss-post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-family: var(--body-font);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.ss-post-meta-row span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.ss-post-meta-row .ss-reading-time {
  background: var(--cream-post);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  color: var(--saffron-post);
  border: 1px solid var(--border-post);
}

/* Verified bar */
.ss-verified-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #edfaf3;
  border: 1.5px solid #a3d9b5;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--hindi-font);
  font-size: 13px;
  color: var(--green-ok);
  line-height: 1.55;
  margin-top: 4px;
}
.ss-vb-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ss-vb-text { flex: 1; }
.ss-vb-link {
  color: var(--green-ok);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════
   4. QUICK INFO BOX (QIB) — AdSense Friendly
   ══════════════════════════════════════════════════ */
.ss-qib {
  margin: 24px 30px;
  background: linear-gradient(135deg, #fffbf2 0%, #fff9ee 100%);
  border: 2px solid var(--gold-post);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(212,137,26,.12);
}
.ss-qib-title {
  background: linear-gradient(135deg, var(--saffron-post), var(--gold-post));
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-qib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}
.ss-qib-item {
  padding: 14px 18px;
  border-right: 1px solid var(--border-post);
  border-bottom: 1px solid var(--border-post);
}
.ss-qib-item:nth-child(even) { background: rgba(255,246,232,.5); }
.ss-qib-label {
  font-family: var(--hindi-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ss-qib-val {
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
}
.ss-qib-val.gold  { color: var(--gold-post); }
.ss-qib-val.green { color: var(--green-ok); }
.ss-qib-val.red   { color: var(--red-imp); }

/* Apply button inside QIB */
.ss-qib-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1a7a3c, #27ae60);
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 700;
  padding: 14px 24px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all .2s;
}
.ss-qib-apply:hover {
  background: linear-gradient(135deg, #145e2e, #1a7a3c);
  color: #fff;
}

/* ══════════════════════════════════════════════════
   5. COUNTDOWN TIMER
   ══════════════════════════════════════════════════ */
.ss-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #2c0a00, #5c1a00);
  border-radius: 10px;
  padding: 16px 24px;
  margin: 0 30px 24px;
  flex-wrap: wrap;
}
.ss-cd-label {
  font-family: var(--hindi-font);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ss-cd-title {
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 700;
  color: #ffd580;
  letter-spacing: 0.02em;
}
.ss-cd-units {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-cd-unit { text-align: center; min-width: 54px; }
.ss-cd-num {
  display: block;
  font-family: 'DM Sans', monospace;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.ss-cd-word {
  font-family: var(--hindi-font);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.5px;
}
.ss-cd-colon {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════
   6. AD SLOTS — AdSense Friendly Placement
   ══════════════════════════════════════════════════ */
.ss-ad-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: transparent;
  margin: 20px 0;
  min-height: 0;
  /* Label for AdSense compliance */
  position: relative;
}
/* "Advertisement" label — AdSense requires disclosure */
.ss-ad-wrap::before {
  content: 'विज्ञापन / Advertisement';
  display: block;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--body-font);
  font-size: 9.5px;
  color: #aaa;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
}
.ss-ad-top    { margin: 20px 30px 28px; }
.ss-ad-bottom { margin: 28px 30px 20px; }
.ss-ad-mid    { margin: 20px 30px; }

/* ══════════════════════════════════════════════════
   7. POST CONTENT — Devanagari Typography
   ══════════════════════════════════════════════════ */
.ss-single-content {
  padding: 28px 30px;
  font-family: var(--hindi-font);
  font-size: 17px;
  line-height: var(--hi-line-height);
  color: var(--text-dark);
  letter-spacing: var(--hi-letter-sp);
  word-spacing: 0.05em;
}

/* Headings — Devanagari optimized */
.ss-single-content h2 {
  font-family: var(--hindi-font);
  font-size: 23px;
  font-weight: 700;
  color: var(--saffron-post);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--border-post);
  position: relative;
}
.ss-single-content h2::before {
  content: '';
  position: absolute;
  bottom: -2.5px;
  left: 0;
  width: 60px;
  height: 2.5px;
  background: var(--saffron-post);
  border-radius: 2px;
}
.ss-single-content h3 {
  font-family: var(--hindi-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.55;
  margin: 26px 0 12px;
  padding-left: 14px;
  border-left: 3.5px solid var(--gold-post);
}
.ss-single-content h4 {
  font-family: var(--hindi-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 20px 0 10px;
}

/* Paragraphs */
.ss-single-content p {
  margin-bottom: var(--hi-para-gap);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hanging-punctuation: first last;
}

/* Bold text */
.ss-single-content strong,
.ss-single-content b {
  color: var(--saffron-post);
  font-weight: 700;
}

/* Links */
.ss-single-content a {
  color: var(--saffron-post);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color .15s;
}
.ss-single-content a:hover { color: var(--gold-post); }

/* Lists */
.ss-single-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--hi-para-gap);
}
.ss-single-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: var(--hi-line-height);
}
.ss-single-content ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--saffron-post);
  font-size: 14px;
  top: 2px;
}
.ss-single-content ol {
  padding-left: 22px !important;
  margin-bottom: var(--hi-para-gap);
  counter-reset: hi-counter;
  list-style: none !important;
}
.ss-single-content ol li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
  line-height: var(--hi-line-height);
  counter-increment: hi-counter;
}
.ss-single-content ol li::before {
  content: counter(hi-counter) '.';
  position: absolute;
  left: -20px;
  color: var(--saffron-post);
  font-weight: 700;
  font-size: 13px;
}

/* Tables — AdSense friendly, Hindi optimized */
.ss-single-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-family: var(--hindi-font);
  font-size: 14.5px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(94,26,0,.08);
  border: 1px solid var(--border-post);
}
.ss-single-content table thead th {
  background: linear-gradient(135deg, var(--saffron-post), var(--gold-post));
  color: #fff;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border: none;
}
.ss-single-content table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-post);
  color: var(--text-dark);
  line-height: 1.6;
  vertical-align: top;
}
.ss-single-content table tbody tr:nth-child(even) td {
  background: var(--cream-post);
}
.ss-single-content table tbody tr:hover td {
  background: #fff3e0;
}
.ss-single-content table strong {
  color: var(--saffron-post);
}

/* Blockquote — important info box */
.ss-single-content blockquote {
  background: #fff9ee;
  border-left: 4px solid var(--gold-post);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 22px 0;
  font-family: var(--hindi-font);
  font-size: 16.5px;
  color: var(--text-mid);
  line-height: 1.75;
  font-style: normal;
}
.ss-single-content blockquote p { margin-bottom: 0; }

/* Important/Notice boxes */
.ss-single-content .important-box,
.ss-single-content .notice-box,
.ss-single-content .highlight-box {
  background: linear-gradient(135deg, #fff9ee, #fffdf8);
  border: 1.5px solid var(--gold-post);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0;
  font-family: var(--hindi-font);
  font-size: 16.5px;
  line-height: var(--hi-line-height);
}
.ss-single-content .important-box::before {
  content: '⚠️ महत्वपूर्ण जानकारी';
  display: block;
  font-weight: 700;
  color: var(--saffron-post);
  font-size: 13px;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* Images */
.ss-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(94,26,0,.1);
  display: block;
}

/* Apply links inside content */
.ss-single-content a[href*="apply"],
.ss-single-content a[href*="Apply"],
.ss-single-content .apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #1a7a3c, #27ae60);
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  margin: 8px 4px;
  transition: all .2s;
  box-shadow: 0 4px 14px rgba(26,122,60,.3);
}
.ss-single-content a[href*="apply"]:hover,
.ss-single-content a[href*="Apply"]:hover {
  background: linear-gradient(135deg, #145e2e, #1a7a3c);
  color: #fff !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════
   8. CATEGORY BANNERS
   ══════════════════════════════════════════════════ */
.ss-cat-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #fffaf4, #fff5e6);
  border: 1.5px solid var(--border-post);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 30px 20px;
  flex-wrap: wrap;
}
.ss-cat-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.ss-cat-banner-ic {
  font-size: 28px;
  flex-shrink: 0;
}
.ss-cat-banner-title {
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 3px;
}
.ss-cat-banner-sub {
  font-family: var(--hindi-font);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ss-cat-banner-btn {
  background: linear-gradient(135deg, var(--saffron-post), var(--gold-post));
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
  box-shadow: 0 3px 10px rgba(180,68,0,.25);
}
.ss-cat-banner-alt {
  background: linear-gradient(135deg, #f0f7ff, #e8f2ff);
  border-color: #b0cce8;
}

/* ══════════════════════════════════════════════════
   9. FAQ ACCORDION — Devanagari Styled
   ══════════════════════════════════════════════════ */
.ss-faq-section {
  margin: 0 30px 24px;
  border: 1.5px solid var(--border-post);
  border-radius: 12px;
  overflow: hidden;
}
.ss-faq-title {
  background: linear-gradient(135deg, var(--saffron-post), var(--gold-post));
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 700;
  padding: 14px 20px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-faq-item {
  border-bottom: 1px solid var(--border-post);
  background: #fff;
}
.ss-faq-item:last-child { border-bottom: none; }
.ss-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--hindi-font);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.55;
  letter-spacing: 0.01em;
  transition: background .15s;
  user-select: none;
}
.ss-faq-q:hover { background: var(--cream-post); }
.ss-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--cream-post);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--saffron-post);
  transition: all .2s;
  margin-top: 2px;
}
.ss-faq-item.open .ss-faq-icon {
  background: var(--saffron-post);
  color: #fff;
  transform: rotate(45deg);
}
.ss-faq-a {
  display: none;
  padding: 0 20px 18px 20px;
  font-family: var(--hindi-font);
  font-size: 14.5px;
  line-height: var(--hi-line-height);
  color: var(--text-mid);
  letter-spacing: 0.01em;
  border-top: 1px solid var(--border-post);
  padding-top: 14px;
}
.ss-faq-item.open .ss-faq-a { display: block; }

/* ══════════════════════════════════════════════════
   10. SHARE BAR
   ══════════════════════════════════════════════════ */
.ss-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 30px;
  border-top: 1px solid var(--border-post);
  border-bottom: 1px solid var(--border-post);
  background: var(--cream-post);
}
.ss-share-label {
  font-family: var(--hindi-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}
.ss-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--hindi-font);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ss-share-wa  { background: #15803d; color: #fff; }
.ss-share-tg  { background: #00689c; color: #fff; }
.ss-share-tw  { background: #14171a; color: #fff; }
.ss-share-copy{ background: var(--cream-post); color: var(--saffron-post); border: 1.5px solid var(--border-post); }
.ss-share-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   11. DISCLAIMER — AdSense Compliance
   ══════════════════════════════════════════════════ */
.ss-post-disclaimer {
  margin: 20px 30px;
  background: #f8f9fa;
  border: 1px solid #dde;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--hindi-font);
  font-size: 12.5px;
  color: #666;
  line-height: 1.7;
}
.ss-post-disclaimer strong {
  color: #444 !important;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════
   12. BREADCRUMB — SEO + AdSense
   ══════════════════════════════════════════════════ */
.ss-breadcrumb {
  font-family: var(--hindi-font);
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 10px 30px;
  border-bottom: 1px solid var(--border-post);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--cream-post);
}
.ss-breadcrumb a {
  color: var(--saffron-post);
  text-decoration: none;
  font-weight: 600;
}
.ss-breadcrumb a:hover { text-decoration: underline; }
.ss-breadcrumb .sep { color: var(--text-muted); opacity: .5; }

/* ══════════════════════════════════════════════════
   13. RELATED POSTS + PREV/NEXT
   ══════════════════════════════════════════════════ */
.ss-sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 30px;
}
.ss-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 30px;
  border-top: 1px solid var(--border-post);
}
.ss-pnav-btn {
  background: var(--cream-post);
  border: 1.5px solid var(--border-post);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ss-pnav-btn:hover {
  background: #fff9ee;
  border-color: var(--gold-post);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(94,26,0,.08);
}
.ss-pnav-label {
  font-family: var(--body-font);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ss-pnav-title {
  font-family: var(--hindi-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-pnav-next { text-align: right; }

/* ══════════════════════════════════════════════════
   14. STICKY APPLY BAR — Mobile Optimized
   ══════════════════════════════════════════════════ */
.ss-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1a0a00, #3c1200);
  padding: 10px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.25);
  border-top: 2px solid var(--gold-post);
}
.ss-sticky-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ss-sticky-title {
  font-family: var(--hindi-font);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ss-sticky-date {
  font-family: var(--hindi-font);
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}
.ss-sticky-tg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0088cc;
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.ss-sticky-apply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1a7a3c, #27ae60);
  color: #fff;
  font-family: var(--hindi-font);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(26,122,60,.4);
  transition: all .15s;
}
.ss-sticky-apply:hover { transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   15. MOBILE RESPONSIVE — Post
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ss-post-header,
  .ss-single-content,
  .ss-share,
  .ss-post-disclaimer,
  .ss-breadcrumb,
  .ss-sec-label { padding-left: 16px; padding-right: 16px; }

  .ss-qib       { margin: 16px; }
  .ss-countdown { margin: 0 16px 16px; padding: 14px 16px; }
  .ss-cat-banner{ margin: 0 16px 14px; padding: 12px 14px; }
  .ss-faq-section{ margin: 0 16px 16px; }
  .ss-post-nav  { padding: 16px; gap: 8px; }
  .ss-ad-top,
  .ss-ad-bottom,
  .ss-ad-mid    { margin-left: 0; margin-right: 0; }

  /* Post title smaller on mobile */
  .ss-post-title,
  .ss-single-article h1.entry-title { font-size: 19px; }

  /* QIB grid — 2 col on mobile */
  .ss-qib-grid { grid-template-columns: repeat(2, 1fr); }

  /* Countdown compact */
  .ss-countdown { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ss-cd-num    { font-size: 22px; padding: 4px 8px; min-width: 44px; }

  /* ══════════════════════════════════════════════════════════
     v6.9.81 — MOBILE TABLE: PEHLA COLUMN CHIPKA RAHE
     ══════════════════════════════════════════════════════════
     Pehle sirf `overflow-x: auto` tha. Table scroll to hoti thi,
     par do dikkatein thin:

     1. Scroll karte hi PEHLA COLUMN gaayab ho jaata tha. Yaani
        "योजना / नोडल विभाग / सत्र" wale labels chale jaate the aur
        screen par sirf "7" aur "वार्षिक" bachta tha — reader ko
        pata hi nahi chalta kis cheez ki baat ho rahi hai. Ye padhne
        layak hi nahi tha.

     2. Koi ishara nahi tha ki table scroll hoti hai. Reader ko
        lagta tha content kat gaya hai.

     Ab: pehla column chipka rehta hai (position:sticky), aur dayein
     kinare par ek halka fade dikhta hai jo batata hai ki aur content
     hai. Jaise hi table apne aakhir tak scroll hoti hai, fade khud
     hat jaata hai (background-attachment:local ka istemal).
     ══════════════════════════════════════════════════════════ */
  .ss-single-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 0;

    /* Dayein kinare par fade — sirf tab tak jab tak scroll baaki hai */
    background:
      linear-gradient(to right, var(--white, #fff) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--white, #fff) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(94,26,0,.18), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(94,26,0,.18), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Har cell ka text WRAP ho — warna column chaudi hoti jaati hai
   *
   * v6.9.82 — sticky column lagane ke baad ek nayi dikkat aayi:
   * jin tables mein pehla column KHUD lamba text hota hai (parikshaon
   * ke naam jaise "आरपीएससी — आरएएस एवं अधीनस्थ सेवा संयुक्त"), wahan
   * wo column poori screen kha jaata tha aur doosra column ("राशि")
   * sirf "परि…" dikhata tha. Yaani label to chipka raha, par jis
   * value ke liye chipkaya tha wahi gayab.
   *
   * Wajah: text wrap nahi ho raha tha, isliye cell apni poori lambai
   * maang raha tha. Ab wrap hota hai aur width par hard cap hai. */
  .ss-single-content table th,
  .ss-single-content table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 10px 12px;
  }

  /* Pehla column chipka — labels hamesha saamne rahein.
   * 38vw ka cap: itna ki label padha ja sake, par itna nahi ki
   * doosre column ke liye jagah hi na bache. */
  .ss-single-content table th:first-child,
  .ss-single-content table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cream2, #f5ede4);
    box-shadow: 1px 0 0 var(--border-post, #e6d9cc);
    /* v6.9.83 — teenon ek hi value.
     *
     * Pehle `width:38vw; min-width:88px` tha. Table layout algorithm
     * `width` ko sirf SUJHAV maanta hai — asli chaudai content se tay
     * hoti hai. Naapne par nikla ki sticky column 88px ka bana jabki
     * scroll-padding 148px (38vw) maan kar chal raha tha. Us farq se
     * snap galat jagah rukta.
     *
     * Ab teeno barabar — chaudai pakki, aur scroll-padding usse match
     * karta hai. Chhote label ("रीट") par cell thodi chaudi lagegi,
     * par saari rows ka label column ek seedh mein aata hai, jo
     * padhne mein behtar hai. */
    width: 34vw;
    min-width: 34vw;
    max-width: 34vw;
  }

  /* Baaki columns ko itni jagah zaroor mile ki kuch padha ja sake */
  .ss-single-content table th:not(:first-child),
  .ss-single-content table td:not(:first-child) {
    min-width: 46vw;
  }

  /* v6.9.83 — SCROLL COLUMN PAR RUKE, BEECH MEIN NAHI
   *
   * 3-4 column wali tables mein pehle do column to poore dikhne lage,
   * par teesra AADHA dikhta tha — "4,3", "1 व", "2 व". Wo padha nahi
   * ja sakta, aur dekhne mein "scroll karo" jaisa nahi lagta —
   * "content kat gaya" jaisa lagta hai. Reader ko lagta hai site
   * tooti hui hai.
   *
   * scroll-snap se ab scroll hamesha kisi column ke SHURU par rukta
   * hai. Aadha column dikhega hi nahi — ya poora, ya bilkul nahi. */
  .ss-single-content table {
    /* v6.9.83 — 'proximity' se kaam nahi bana: browser tabhi snap karta
     * hai jab scroll snap-point ke bahut paas ruke. Naapne par 250px par
     * snap laga hi nahi aur column aadha kata rah gaya — yaani wahi
     * problem jo theek karni thi. 'mandatory' hamesha kisi column ke
     * shuru par rokta hai. Cells (~179px) screen se chhoti hain, isliye
     * koi cell chhupne ka khatra nahi. */
    scroll-snap-type: x mandatory;
    /* Sticky pehla column 38vw chaudi hai. Iske bina snap column ko
     * screen ke kinare par lagata, jahan wo sticky column ke NEECHE
     * chhup jaata — yaani snap karne ke baad bhi wo column dikhta hi
     * nahi. scroll-padding usse sticky column ke turant baad rokta hai. */
    scroll-padding-left: 34vw;
  }
  .ss-single-content table th,
  .ss-single-content table td {
    scroll-snap-align: start;
  }
  .ss-single-content table thead th:first-child {
    background: var(--deep, #5c1a00);
    z-index: 3;
  }
  /* Zebra rows ka rang sticky column par bhi lage, warna wo alag dikhega */
  .ss-single-content table tbody tr:nth-child(even) td:first-child {
    background: var(--cream3, #efe3d6);
  }

  /* Prev/Next — stack on very small */
  .ss-post-nav { grid-template-columns: 1fr; }
  .ss-pnav-next { text-align: left; }

  /* Sticky bar compact */
  .ss-sticky-bar { padding: 8px 12px; gap: 7px; }

  /* v6.9.82 — Mobile par post ka title bar mein mat dikhao.
   *
   * .ss-sticky-info mein post ka title hota hai. Desktop par uske liye
   * jagah hoti hai, par 390px par do buttons ke baad usme itni jagah
   * bachti hai ki poora title EK AKSHAR mein sikud jaata hai —
   * "CM अनुप्रति योजना…" screen par sirf "C" ban kar reh jaata tha.
   * Dikhne mein wo toota hua lagta hai, aur kaam ka bhi kuch nahi:
   * title to page par upar pehle se likha hai.
   *
   * Hata dene se dono buttons ko poori jagah mil jaati hai. */
  .ss-sticky-info { display: none; }
  .ss-sticky-bar .ss-sticky-tg,
  .ss-sticky-bar .ss-sticky-apply { flex: 1 1 auto; text-align: center; }
  .ss-sticky-tg  { padding: 8px 10px; font-size: 11.5px; }
  .ss-sticky-apply{ padding: 8px 12px; font-size: 12px; }

  /* FAQ text */
  .ss-faq-q { font-size: 14px; padding: 14px 16px; }
  .ss-faq-a { font-size: 13.5px; }

  /* Share bar */
  .ss-share { padding: 14px 16px; gap: 6px; }
  .ss-share-btn { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 420px) {
  .ss-qib-grid { grid-template-columns: 1fr 1fr; }
  .ss-post-title,
  .ss-single-article h1.entry-title { font-size: 17px; line-height: 1.5; }
  .ss-single-content { font-size: 15px; }
  .ss-cd-num { font-size: 20px; }
}

/* ══════════════════════════════════════════════════
   16. ADSENSE COMPLIANCE — Content Policy Helpers
   ══════════════════════════════════════════════════ */
/* Ensure content is clearly separated from ads */
.ss-ad-wrap + .ss-single-content,
.ss-single-content + .ss-ad-wrap {
  margin-top: 0;
}
/* Prevent layout shift from ad loading */
.ss-ad-wrap[data-size="336x280"] { min-height: 280px; }
.ss-ad-wrap[data-size="728x90"]  { min-height: 90px; }
.ss-ad-wrap[data-size="320x50"]  { min-height: 50px; }
/* Responsive ad container */
.ss-ad-responsive {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   v6.9.117 — MOBILE VIEW FIX (table + floating buttons)

   Live post par dikkat: chaudi table mein "पद" wala column screen se
   bahar tha aur reader ko pata hi nahi chalta tha ki table scroll hoti
   hai — use lagta tha content kat gaya. Saath hi WhatsApp/Telegram ke
   floating button aur neeche wali sticky patti table ke upar aa rahe the.

   Ab: har chaudi table ke upar ek saaf ishaara ("← स्क्रॉल करें →"),
   jo table ke aakhir tak pahunchte hi khud gayab ho jaata hai; aur
   table ke aas-paas floating button halke pad jaate hain taaki wo
   content na dhakein.
   ══════════════════════════════════════════════════════════════ */
.ss-table-wrap { position: relative; margin: 18px 0; }
.ss-table-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a4b12;
  background: #fff5e6;
  border: 1px solid #f0d9b8;
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 8px;
  width: fit-content;
}
.ss-table-wrap.is-scrollable .ss-table-hint { display: flex; }
.ss-table-wrap.scrolled-end .ss-table-hint { display: none; }
.ss-table-wrap > table { margin-top: 0 !important; }

@media (max-width: 900px) {
  /* table ke paas aate hi floating button halke — content dikhta rahe */
  .ss-fab.is-dimmed { opacity: .35; }
  .ss-fab { transition: opacity .25s; }
}

/* Aakhri content sticky patti ke neeche na chhupe */
@media (max-width: 768px) {
  body.single .ss-single-foot,
  body.single .ss-post-nav { margin-bottom: 78px; }
}

/* ══════════════════════════════════════════════════
   QIB TITLE + APPLY BUTTON — mobile par toote shabd (v6.9.121)
   ══════════════════════════════════════════════════

   SSC CPO post ke screenshot mein mobile par ye dikha:

     "त्वरित  / Quick Info — SSC CPO 2026..."
      जान
      कारी

     "अभी    / Apply Now —   आधि   / Offici"
      आवेद                    कारिक    al
      न करें                   लिंक     Link

   Yaani "जानकारी" ke beech mein hi line toot rahi thi, aur
   "Official" → "Offici / al".

   ── Wajah (do cheezein milkar) ──

   1. .ss-qib-title aur .ss-qib-apply dono `display: flex` hain.
      Markup aisa hai:
          &#128203; <span lang="hi">त्वरित जानकारी</span> / Quick Info — TITLE
      Flex mein har text-run apna alag item ban jaata hai — emoji ek,
      Hindi span doosra, baaki text teesra. Mobile par teeno ek hi
      line mein ghusne ki koshish karte hain, to har item apni column
      mein simat kar andar se wrap hone lagta hai.

   2. .ss-single-article par `word-break: break-word` hai (lambi URL
      ke liye daala tha). Wo inherit hokar yahan tak aata hai, isliye
      simte hue item ke andar shabd BEECH se toot jaata hai.

   Alag-alag dono theek thhe — saath mein ye nateeja nikla.

   ── Hal ──

   Ye headings hain, layout nahi — inhein flex hone ki zaroorat hi
   nahi thi. Block karte hain, taaki text normal line ki tarah bahe,
   aur word-break wapas normal — shabd poora rahega, agli line mein
   jaayega par tootega nahi. */

.ss-qib-title,
.ss-qib-apply {
  display: block;
  word-break: normal;
  overflow-wrap: break-word;   /* bahut lambi URL phir bhi na chhalke */
  line-height: 1.5;
}
.ss-qib-apply {
  text-align: center;
}

/* Bahut chhoti screen par angrezi-hindi dono rakhne se line teen
   tak chali jaati hai. Font thoda chhota, taaki do line mein aa jaaye. */
@media (max-width: 420px) {
  .ss-qib-title { font-size: 13px; padding: 11px 14px; }
  .ss-qib-apply { font-size: 15px; padding: 13px 16px; }
}

/* ══ v6.9.149 — RANK MATH FAQ BLOCK ko FAQ jaisa dikhana ══════════════
   Post mein FAQ Rank Math block se lagti hai. Theme ne uske liye koi style
   nahi di thi, isliye har sawaal normal article heading (baayein peeli
   patti wala h3) jaisa dikhta tha — padhne wale ko pata hi nahi chalta tha
   ki ye FAQ section hai. Ab theme ke apne FAQ box jaisa card: upar
   "अक्सर पूछे जाने वाले सवाल" title, har sawaal "Q" badge ke saath, jawab
   uske neeche. Sab khula rehta hai (accordion nahi) — padhna aasaan, aur
   Google ko bhi pura jawab dikhta hai. */
.ss-single-content .wp-block-rank-math-faq-block,
.ss-single-content #rank-math-faq {
  background: #fff;
  border: 1.5px solid var(--border2, #eadfce);
  border-radius: 14px;
  overflow: hidden;
  margin: 28px 0 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.ss-single-content .wp-block-rank-math-faq-block::before,
.ss-single-content #rank-math-faq::before {
  content: '\2753  अक्सर पूछे जाने वाले सवाल';
  display: block;
  font-family: var(--hindi-font, inherit);
  font-weight: 700;
  font-size: 18px;
  color: var(--deep, #3b1f0e);
  padding: 16px 20px 13px;
  border-bottom: 1.5px solid var(--border2, #eadfce);
  background: var(--cream2, #fdf6ec);
}
.ss-single-content .rank-math-faq-item,
.ss-single-content .rank-math-list-item {
  padding: 14px 20px 6px;
  border-bottom: 1px solid var(--border2, #eadfce);
}
.ss-single-content .rank-math-faq-item:last-child,
.ss-single-content .rank-math-list-item:last-child { border-bottom: 0; }
.ss-single-content h3.rank-math-question,
.ss-single-content .rank-math-question {
  border-left: 0 !important;
  padding-left: 34px !important;
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--deep, #3b1f0e);
  position: relative;
}
.ss-single-content .rank-math-question::before {
  content: 'Q';
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--saffron, #e25b00); color: #fff;
  font: 700 13px/24px system-ui, sans-serif; text-align: center;
}
.ss-single-content .rank-math-question::after { display: none !important; }
.ss-single-content .rank-math-answer,
.ss-single-content .rank-math-answer p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-mid, #444);
  text-align: left !important;
  margin: 0 0 8px;
}
.ss-single-content .rank-math-answer { padding-left: 34px; }
#ss2.dark .ss-single-content .wp-block-rank-math-faq-block,
#ss2.dark .ss-single-content #rank-math-faq { background: #1a1f2e; border-color: #2a3040; }
#ss2.dark .ss-single-content .wp-block-rank-math-faq-block::before,
#ss2.dark .ss-single-content #rank-math-faq::before { background: #222838; color: #f0ece8; border-color: #2a3040; }
#ss2.dark .ss-single-content .rank-math-question { color: #f0ece8; }
@media (max-width: 600px) {
  .ss-single-content .rank-math-faq-item,
  .ss-single-content .rank-math-list-item { padding: 12px 14px 4px; }
  .ss-single-content .wp-block-rank-math-faq-block::before,
  .ss-single-content #rank-math-faq::before { padding: 13px 14px 11px; font-size: 16px; }
}

/* v6.9.149 — mobile par justify band. Hindi ke lambe shabdon ke saath
   patli screen par justify beech mein bade-bade khaali gap bana deta tha
   ("परिणाम   पूर्णतः   अनन्तिम"). Chhoti screen par seedha left-align. */
@media (max-width: 600px) {
  .ss-single-content p { text-align: left; }
}
/* v6.9.150 — FAQ jawab ka rang dark mode mein */
#ss2.dark .ss-single-content .rank-math-answer, #ss2.dark .ss-single-content .rank-math-answer p,
html.rjgj-dark-pre #ss2 .ss-single-content .rank-math-answer,
html.rjgj-dark-pre #ss2 .ss-single-content .rank-math-answer p { color: #c9d1dc; }

/* v6.9.166 — Rank Math FAQ accordion (JS .rjgj-acc lagata hai).
   Sirf sawaal dikhte hain, daayein + / − ka nishaan; click par jawab. */
.ss-single-content .rjgj-acc .rank-math-faq-item,
.ss-single-content .rjgj-acc .rank-math-list-item { padding: 0; }
.ss-single-content .rjgj-acc .rank-math-question {
  cursor: pointer;
  margin: 0 !important;
  padding: 14px 48px 14px 54px !important;
  -webkit-user-select: none; user-select: none;
  transition: background .15s;
}
.ss-single-content .rjgj-acc .rank-math-question::before { left: 20px; top: 15px; }
.ss-single-content .rjgj-acc .rank-math-question:hover { background: var(--cream2, #fdf6ec); }
.ss-single-content .rjgj-acc .rank-math-question:focus-visible { outline: 2px solid var(--saffron, #e25b00); outline-offset: -2px; }
.ss-single-content .rjgj-acc .rank-math-question::after {
  content: '+' !important;
  display: block !important;
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; line-height: 22px;
  text-align: center; border-radius: 50%;
  border: 1.5px solid var(--border2, #eadfce);
  font: 700 17px/22px system-ui, sans-serif;
  color: var(--saffron, #e25b00);
  background: none !important;
}
.ss-single-content .rjgj-acc .open > .rank-math-question::after { content: '\2212' !important; }
.ss-single-content .rjgj-acc .rank-math-answer { display: none; padding: 0 20px 12px 54px; }
.ss-single-content .rjgj-acc .open > .rank-math-answer { display: block; }
#ss2.dark .ss-single-content .rjgj-acc .rank-math-question:hover { background: #222838; }
#ss2.dark .ss-single-content .rjgj-acc .rank-math-question::after { border-color: #2a3040; }
@media (max-width: 600px) {
  .ss-single-content .rjgj-acc .rank-math-question { padding: 12px 44px 12px 46px !important; font-size: 15px !important; }
  .ss-single-content .rjgj-acc .rank-math-question::before { left: 14px; top: 13px; }
  .ss-single-content .rjgj-acc .rank-math-question::after { right: 12px; }
  .ss-single-content .rjgj-acc .rank-math-answer { padding: 0 14px 10px 46px; }
}

/* v6.9.171 — load-check nishan */
:root{--rjgj-ok-hindi:1}