/*
Theme Name: Shivika Jharokha Custom
Theme URI: https://shivikajharokha.com
Author: Shivika Jharokha
Description: Custom premium editorial design for Shivika Jharokha, built as a child theme of Raveen.
Version: 1.0
Template: raveen
Text Domain: shivika-jharokha-theme
*/

/* ==========================================================================
   Shivika Jharokha — Premium Editorial Redesign
   Design system + component styles
   ========================================================================== */

:root {
  /* Color */
  --ink-900: #16213A;
  --ink-800: #1B2A4A;
  --ink-700: #1F3157;
  --marigold-500: #E8A33D;
  --marigold-600: #C97F1E;
  --marigold-100: #FBEAD1;
  --terracotta-500: #C1666B;
  --terracotta-100: #F3DEDC;
  --paper-50: #FBF8F2;
  --paper-100: #F3ECDC;
  --stone-200: #E7DFCC;
  --stone-300: #D8CDB8;
  --charcoal-900: #221E1B;
  --charcoal-600: #6C6357;
  --white: #FFFFFF;

  /* Type */
  --font-display: 'Cormorant Garamond', 'Noto Serif Devanagari', Georgia, serif;
  --font-body: 'Work Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.6rem + 1.2vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.2rem + 0.4vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-meta: 0.8125rem;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgba(34,30,27,.06), 0 8px 24px rgba(34,30,27,.08);
  --shadow-2: 0 4px 10px rgba(34,30,27,.10), 0 20px 40px rgba(34,30,27,.14);

  --container: 1240px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper-50);
  color: var(--charcoal-900);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--ink-900); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marigold-600);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--marigold-500);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-5);
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2.5px solid var(--marigold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 26px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  min-height: 44px;
}
.btn-primary {
  background: var(--marigold-500);
  color: var(--ink-900);
}
.btn-primary:hover { background: var(--marigold-600); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn-outline {
  background: transparent;
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.btn-outline:hover { background: var(--ink-900); color: var(--white); }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-outline-light:hover { background: var(--white); color: var(--ink-900); }

/* ---------- Jharokha arch pattern strip (signature motif, decorative) ---------- */
.arch-divider {
  height: 22px;
  background-repeat: repeat-x;
  background-size: 40px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,22 L0,11 A10,10 0 0,1 20,11 A10,10 0 0,1 40,11 L40,22 Z' fill='%23E8A33D' fill-opacity='0.35'/%3E%3C/svg%3E");
}
.arch-divider.dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,22 L0,11 A10,10 0 0,1 20,11 A10,10 0 0,1 40,11 L40,22 Z' fill='%2316213A' fill-opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper-50);
  border-bottom: 1px solid var(--stone-200);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;   /* zaroori hai taaki flex item ke andar text sahi se truncate ho */
  flex: 1 1 auto; /* available space le, lekin header-actions ko push na kare */
}

/* WordPress custom logo (Customizer se) — natural aspect ratio, height-capped */
.brand .custom-logo-link { display: inline-flex; flex-shrink: 0; align-items: center; }
.brand img.custom-logo {
  width: auto;
  height: 44px;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (min-width: 960px) {
  .brand img.custom-logo { height: 50px; max-width: 220px; }
}

.brand__mark {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--ink-800), var(--ink-700));
  display: flex; align-items: center; justify-content: center;
  color: var(--marigold-500);
  flex-shrink: 0;
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

/* Title + tagline: ek hi line mein saaf dikhein, chahe WordPress Site Title
   lamba ho — overflow hone par "..." se katega, phailega/tootega nahi */
.brand__title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.brand__tagline {
  font-size: clamp(0.58rem, 2.2vw, 0.68rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--charcoal-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 960px) {
  .brand__title, .brand__tagline { white-space: normal; }
}

/* Primary nav */
.primary-nav { display: none; }
@media (min-width: 960px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}
.primary-nav > ul { display: flex; align-items: center; gap: var(--space-6); }
.primary-nav > ul > li { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) 0;
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink-900);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--marigold-600); border-color: var(--marigold-500); }
.nav-link .chev { width: 10px; height: 10px; transition: transform var(--transition); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Mega menu */
.mega-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-6);
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
li.has-mega:hover .mega-menu,
li.has-mega:focus-within .mega-menu,
li.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.mega-menu a {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--charcoal-900);
  transition: background var(--transition), color var(--transition);
}
.mega-menu a:hover { background: var(--paper-100); color: var(--marigold-600); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--stone-200);
  background: var(--white);
  color: var(--ink-900);
  transition: border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--marigold-500); color: var(--marigold-600); }
.icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  overflow: visible;
}
.header-actions .btn-primary { display: none; }
@media (min-width: 960px) { .header-actions .btn-primary { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--stone-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  flex-shrink: 0;
}
.nav-toggle svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  color: var(--ink-900);
  overflow: visible;
}
@media (min-width: 960px) { .nav-toggle { display: none; } }

/* Mobile nav backdrop */
.mobile-nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(22, 33, 58, .55) !important;
  z-index: 998 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.mobile-nav-backdrop.is-open { opacity: 1; visibility: visible; }
@media (min-width: 960px) { .mobile-nav-backdrop { display: none !important; } }

/* Mobile nav — fixed drawer, right side se slide hoti hai */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: min(86vw, 380px) !important;
  max-width: 380px;
  display: block !important;
  flex-direction: unset;
  background: var(--paper-50) !important;
  border-left: 1px solid var(--stone-200);
  border-bottom: none;
  box-shadow: -12px 0 32px rgba(22,33,58,.18);
  z-index: 999 !important;
  overflow: visible; /* zaroori: close button drawer ke bahar (left:-20px) render hota hai, isliye yahan clip nahi hona chahiye */
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.mobile-nav.is-open { transform: translateX(0); }
/* Scroll ab drawer par nahi, andar wale content par — isse head (aur floating close button) fixed rehta hai */
.mobile-nav > .container {
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 960px) { .mobile-nav { display: none !important; } }

.mobile-nav__head {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--stone-200);
  position: relative; /* close button ke absolute positioning ka reference point */
}
.mobile-nav__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink-900); }

/* Close button: drawer ke TOP-LEFT CORNER par ek floating "badge" — "Menu" label se
   kabhi overlap nahi karega kyunki ye head-row ki line se upar-bahar nikla hua hai */
.mobile-nav__close {
  position: absolute !important;
  top: -16px;
  left: -16px;               /* drawer ke corner se bahar nikla hua */
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--ink-900) !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--white) !important;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(22,33,58,.35);
  transition: background var(--transition), transform var(--transition), opacity var(--transition), visibility var(--transition);
  z-index: 5;
  cursor: pointer;
  padding: 0;
  /* Menu band hone par bilkul chhupa do — sirf "overflow:visible" + drawer ka
     translateX(100%) ke bharose mat raho, kyunki "left:-16px" offset ki wajah
     se yeh button drawer band hone par bhi screen ke right edge par thoda
     visible reh jaata tha. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.is-open .mobile-nav__close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
  background: var(--marigold-600) !important;
  transform: scale(1.08);
}
/* X icon — do rotated bars, pure CSS. Kisi SVG/icon-font par depend nahi karta,
   isliye kabhi "sirf circle dikhna, X gayab" wali problem nahi ho sakti. */
.mobile-nav__close-bar {
  position: absolute;
  width: 16px;
  height: 2.5px;
  background: var(--white) !important;
  border-radius: 2px;
  top: 50%;
  left: 50%;
}
.mobile-nav__close-bar:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-nav__close-bar:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 380px) {
  .mobile-nav__close { width: 36px; height: 36px; left: -14px; top: -14px; }
  .mobile-nav__close-bar { width: 14px; }
}


.mobile-nav .container {
  padding: var(--space-4) var(--space-5) var(--space-6) !important;
  max-width: none !important;
  display: block !important;
}
.mobile-nav details {
  border-bottom: 1px solid var(--stone-200);
  display: block !important;
}
.mobile-nav summary {
  padding: var(--space-3) 0 !important;
  font-weight: 600;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  text-decoration: none !important;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav .sub-list { padding: 0 0 var(--space-3) var(--space-3); display: grid !important; gap: var(--space-2); }
.mobile-nav .sub-list a { color: var(--charcoal-600); font-size: .92rem; text-decoration: none !important; display: block !important; }
.mobile-nav > .container > a.nav-link {
  display: block !important;
  width: 100%;
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid var(--stone-200);
  text-decoration: none !important;
}
.mobile-nav .mobile-cta { margin-block: var(--space-4); width: 100%; }

/* Jab drawer khula ho, peeche page scroll na ho */
body.mobile-nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-7) var(--space-6);
  background: linear-gradient(180deg, var(--paper-100) 0%, var(--paper-50) 60%);
}
.hero .container {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
}
.hero-feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-900);
  color: var(--white);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
}
.hero-feature__frame {
  position: absolute; inset: 0;
  clip-path: url(#jharokhaArch);
}
.hero-feature__frame img {
  width: 100%; height: 100%; object-fit: contain; /* poori image dikhe, crop na ho */
  filter: saturate(1.05);
}
.hero-feature__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(22,33,58,.92) 5%, rgba(22,33,58,.35) 45%, rgba(22,33,58,0) 75%);
}
.hero-feature__body {
  position: relative;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tag-marigold { background: var(--marigold-500); color: var(--ink-900); }
.tag-terracotta { background: var(--terracotta-500); color: var(--white); }
.tag-outline { background: rgba(255,255,255,.12); color: var(--white); border: 1px solid rgba(255,255,255,.4); }
.tag-lang { background: rgba(255,255,255,.14); color: var(--white); border: 1px solid rgba(255,255,255,.35); }

.hero-feature__title {
  font-size: var(--fs-display);
  color: var(--white);
  max-width: 22ch;
}
.hero-feature__dek {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.85);
  max-width: 55ch;
}
.hero-feature__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-meta);
  color: rgba(255,255,255,.75);
}
.hero-feature__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.hero-side { display: flex; flex-direction: column; gap: var(--space-5); }
.hero-side-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero-side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hero-side-card img { width: 96px; height: 96px; object-fit: contain; background: var(--paper-100); border-radius: var(--radius-sm); }
.hero-side-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-side-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-side-card:hover .hero-side-card__title { color: var(--marigold-600); }
.hero-side-card__meta { font-size: .78rem; color: var(--charcoal-600); }

/* ---------- Search panel (toggled from header search icon) ---------- */
.search-panel {
  background: var(--white);
  border-bottom: 1px solid var(--stone-200);
  padding: var(--space-4) 0;
}
.search-panel[hidden] { display: none; }
.search-panel .search-form { display: flex; gap: var(--space-3); align-items: center; }
.search-panel .search-form label { flex: 1; margin: 0; }
.search-panel .search-field {
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--stone-200);
  font-size: 1rem;
  font-family: var(--font-body);
}
.search-panel .search-field:focus { outline: 2.5px solid var(--marigold-500); outline-offset: 2px; }
.search-panel .search-submit {
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--marigold-500);
  color: var(--ink-900);
  font-weight: 600;
  min-height: 44px;
}
.search-panel .search-submit:hover { background: var(--marigold-600); }

/* ---------- Category rail ---------- */
.category-rail {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--stone-200);
  background: var(--paper-50);
  position: sticky;
  top: 0;
  z-index: 40;
}
@media (min-width: 960px) { .category-rail { position: static; } }
.category-rail .container {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.chip {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--stone-200);
  background: var(--white);
  font-size: .85rem;
  font-weight: 600;
  color: var(--charcoal-900);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { border-color: var(--marigold-500); color: var(--marigold-600); }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }

/* ---------- Section headers ---------- */
.section { padding-block: var(--space-8); }
.section.alt { background: var(--paper-100); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head .see-all { font-weight: 600; font-size: .9rem; border-bottom: 1.5px solid var(--marigold-500); padding-bottom: 2px; }

/* ---------- Story cards / grid ---------- */
.latest-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .latest-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .latest-grid__list { grid-template-columns: repeat(3, 1fr); } }

.story-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.story-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-100); }
.story-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms ease; }
.story-card:hover .story-card__media img { transform: scale(1.05); }
.story-card__tags { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: 6px; }
.story-card__body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.story-card__title { font-size: var(--fs-h3); }
.story-card__title a::after { content: ""; position: absolute; inset: 0; }
.story-card { position: relative; }
.story-card__excerpt { color: var(--charcoal-600); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-card__meta { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-meta); color: var(--charcoal-600); border-top: 1px solid var(--stone-200); }
.story-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.load-more-wrap { text-align: center; margin-top: var(--space-7); }

/* ---------- Top stories (numbered) ---------- */
.top-stories__list {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 760px) { .top-stories__list { grid-template-columns: repeat(5, 1fr); } }
.top-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.top-story__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--marigold-500);
  -webkit-text-stroke: 1.5px var(--ink-900);
  line-height: 1;
}
.top-story__media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-100); }
.top-story__media img { width: 100%; height: 100%; object-fit: contain; }
.top-story__title { font-size: 1rem; font-weight: 700; font-family: var(--font-display); font-size: 1.2rem; }
.top-story a:hover .top-story__title { color: var(--marigold-600); }
.top-story__meta { font-size: .78rem; color: var(--charcoal-600); }

/* ---------- Spotlight (guest stories) ---------- */
.spotlight {
  background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
  color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow-2);
}
@media (min-width: 800px) { .spotlight { grid-template-columns: 1fr 1fr; } }
.spotlight__media { position: relative; min-height: 260px; background: var(--ink-800); }
.spotlight__media img { width: 100%; height: 100%; object-fit: contain; opacity: .92; }
.spotlight__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; }
.spotlight__body h2 { color: var(--white); font-size: var(--fs-h2); }
.spotlight__body p { color: rgba(255,255,255,.82); }

/* ---------- Video spotlight ---------- */
.video-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 800px) { .video-card { grid-template-columns: 1fr 1fr; } }
.video-card__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--shadow-2); background: var(--paper-100); }
.video-card__media img { width: 100%; height: 100%; object-fit: contain; }
.play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(251,248,242,.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-900);
  box-shadow: var(--shadow-2);
  transition: transform var(--transition);
}
.video-card__media:hover .play-btn { transform: scale(1.08); }
.play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card__body h3 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.video-card__body p { color: var(--charcoal-600); margin-bottom: var(--space-4); }

/* ---------- Author card ---------- */
.author-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-1);
}
@media (min-width: 760px) { .author-card { grid-template-columns: 200px 1fr; } }
.author-card__portrait {
  width: 160px; height: 190px;
  margin-inline: auto;
  clip-path: url(#jharokhaArch);
  background: var(--paper-100);
}
.author-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.author-card__body { text-align: center; }
@media (min-width: 760px) { .author-card__body { text-align: left; } }
.author-card__name { font-size: var(--fs-h2); }
.author-card__role { color: var(--marigold-600); font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-block: var(--space-2) var(--space-3); }
.author-card__bio { color: var(--charcoal-600); max-width: 60ch; }
.author-card__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); justify-content: center; }
@media (min-width: 760px) { .author-card__social { justify-content: flex-start; } }

/* ---------- Newsletter band ---------- */
.newsletter {
  background: var(--ink-900);
  color: var(--white);
  padding-block: var(--space-8);
  position: relative;
}
.newsletter .container { display: flex; flex-direction: column; gap: var(--space-5); align-items: center; text-align: center; }
.newsletter h2 { color: var(--white); font-size: var(--fs-h2); }
.newsletter p { color: rgba(255,255,255,.75); max-width: 50ch; }
.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 460px;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input[type="email"] {
  flex: 1 1 240px;
  padding: 13px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-size: .95rem;
  min-height: 44px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-form input:focus { outline: 2.5px solid var(--marigold-500); outline-offset: 2px; }
.newsletter small { color: rgba(255,255,255,.5); font-size: .78rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,.78); }
.footer-main { padding-block: var(--space-8); }

/* Mobile: About full-width on top, Hindi + English side-by-side below it */
.footer-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "about  about"
    "hindi  english";
}
.footer-brand   { grid-area: about; }
.footer-hindi   { grid-area: hindi; }
.footer-english { grid-area: english; }

/* Desktop: About | Hindi | English as three columns, side by side */
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-areas: "about hindi english";
  }
}

/* About-the-site column: logo + naam ko center mein le aao (.brand normally
   header ke liye left-aligned row hoti hai — yahan sirf footer ke andar
   override kar rahe hain, header par koi asar nahi) */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand .brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand .brand .custom-logo-link { margin-inline: auto; }
.footer-brand .brand__name { align-items: center; }
.footer-brand .brand__title { color: var(--white); }
.footer-brand .brand__tagline { color: rgba(255,255,255,.6); }
.footer-brand p { margin-top: var(--space-3); color: rgba(255,255,255,.65); max-width: 32ch; }
.footer-col h4 { color: var(--white); font-family: var(--font-body); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a { font-size: .92rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--marigold-500); }

/* Follow Us — full-width band between the columns and the copyright bar */
.footer-social-band {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--space-6);
}
.footer-social-band .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
@media (min-width: 700px) {
  .footer-social-band .container { flex-direction: row; justify-content: center; }
}
.footer-social-label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), background var(--transition); }
.footer-social a:hover { border-color: var(--marigold-500); background: rgba(232,163,61,.12); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }


.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.footer-bottom-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-bottom-links a { color: rgba(255,255,255,.7); }
.footer-bottom-links a:hover { color: var(--marigold-500); }

/* ---------- Cookie notice ---------- */
.cookie-bar {
  position: fixed;
  left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 200;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  max-width: 640px;
  margin-inline: auto;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { font-size: .85rem; color: var(--charcoal-600); }
.cookie-bar a { text-decoration: underline; color: var(--ink-900); }

/* ==========================================================================
   Raveen theme override — force the scroll-triggered "sticky offcanvas"
   menu to open from the RIGHT instead of the LEFT (default theme behavior).
   Pure CSS, no plugin/Theme-Settings panel needed. Scoped to
   #site-sticky-offcanvas only, so it does not affect any other offcanvas
   (e.g. search or main mobile menu) elsewhere in the theme.
   ========================================================================== */

/* Small round button that appears on scroll-up: move it to the right edge */
#site-sticky-offcanvas.opener-left .offcanvas-opener-wrapper {
  left: auto !important;
  right: -120px !important;
}
#site-sticky-offcanvas.show.opener-left .offcanvas-opener-wrapper {
  left: auto !important;
  right: 30px !important;
}

/* The sliding panel itself: slide in from the right edge, not the left */
#site-sticky-offcanvas .offcanvas-wrapper.position-left .offcanvas-container {
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%) !important;
}
#site-sticky-offcanvas .offcanvas-wrapper.position-left.open .offcanvas-container {
  transform: translateX(0) !important;
}

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Footer: halki border line — About se Hindi/English section ko alag karti hai
   ========================================================================== */
@media (max-width: 699px) {
  .footer-hindi, .footer-english {
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: var(--space-5);
  }
}
.footer-hindi { border-right: 1px solid rgba(255,255,255,.12); padding-right: var(--space-5); }
@media (min-width: 700px) {
  .footer-brand { border-right: 1px solid rgba(255,255,255,.12); padding-right: var(--space-6); }
}

/* ==========================================================================
   Single post fixes — sirf yeh 3 cheezein, baaki design nahi chheda
   ========================================================================== */

/* 1) Breadcrumbs ke neeche wala duplicate category-badge hataya */
.single-hero-title .category { display: none; }

/* 2) Byline: author avatar + naam + date (+ reading time) — ek line mein, tight spacing, koi horizontal-scroll nahi */
.single-hero-title .meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex-wrap: wrap !important;   /* scroll ke bajaye — agar jagah kam pade to agli line par wrap ho jaayega */
  overflow: visible;
}
.single-hero-title .meta .author-avatar {
  display: flex; align-items: center; flex-shrink: 0;
}
.single-hero-title .meta .author-avatar img {
  display: block;
  border-radius: 50%;
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  margin: 0;
}
.single-hero-title .meta .meta-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  white-space: nowrap;
}
/* ROOT-CAUSE FIX: parent (Raveen) theme ki apni CSS
   (assets/css/single-post.css) mein ".single-hero-title .author-name"
   par "width:100%" set hai — isi wajah se avatar ke baad Author Name
   apni poori line le leta tha aur baaki sab (date/views/reading-time/
   comments) ek naye row mein chala jaata tha, jisse avatar "upar"
   aur baaki meta "neeche" dikhta tha. Yahan wahi width:100% hata rahe hain. */
.single-hero-title .meta .author-name {
  width: auto !important;
  flex-shrink: 0;
}
/* Parent theme ka ek aur rule (".col-12 > .single-hero-title .meta { display:block; }")
   kuch hero-layouts (jaise layout-1) mein poori .meta row ko block bana deta hai —
   humari upar wali display:flex !important rule (line ~1022) isko already override
   karti hai, bas confirm ke liye yahan bhi explicit rakha hai. */
.col-12 > .single-hero-title .meta { display: flex !important; }

/* Best-effort: agar "reading time" / "min read" isi .meta block ke andar hi output
   ho raha ho (parent Raveen theme se), to usko bhi isi line mein le aao aur separator
   dot lagao. Agar merge na ho to iska matlab reading-time kisi ALAG container/template
   se aa raha hai — us case mein exact class name chahiye hoga (single.php ya
   template-parts/post/content-single.php Raveen parent theme se share karein). */
.single-hero-title .meta .reading-time,
.single-hero-title .meta .rivax-reading-time,
.single-hero-title .meta .post-reading-time,
.single-hero-title .meta [class*="reading-time"] {
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.single-hero-title .meta .reading-time::before,
.single-hero-title .meta .rivax-reading-time::before,
.single-hero-title .meta .post-reading-time::before,
.single-hero-title .meta [class*="reading-time"]::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--stone-300);
  flex-shrink: 0;
}
/* views count ke liye bhi wahi treatment (icon-dot separator, no-wrap) */
.single-hero-title .meta .meta-item.views {
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.single-hero-title .meta .meta-item.views::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--stone-300);
  flex-shrink: 0;
}


/* 3) Author box (comments ke upar wala): avatar aur text center mein */
.single-author-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-3);
}
.single-author-box-avatar img {
  display: block;
  margin-inline: auto;
  border-radius: 50%;
}

/* 4) Single post ke featured image (hero) ka koi crop nahi — poori image dikhe.
   Yeh Raveen ke saare hero layouts (single-hero-layout-1 se 6 tak) cover karta hai. */
[class*="single-hero-layout-"] .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-100);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
[class*="single-hero-layout-"] .image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Layout 5 & 6 image ko <img> ki jagah CSS background-image se dikhate hain —
   inme bhi "cover" ki jagah "contain" taaki koi hissa crop na ho. */
.single-hero-layout-5-container,
.single-hero-layout-6 {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: var(--ink-900);
}


/* ==========================================================================
   News ticker — header ke neeche, latest headlines auto-scroll karti hain
   ========================================================================== */
.news-ticker {
  background: var(--paper-100);
  border-bottom: 1px solid var(--stone-200);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-5);
  height: 42px;
  overflow: hidden;
}
.news-ticker__label {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marigold-600);
  background: var(--marigold-100);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}
.news-ticker__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.news-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  position: absolute;
  white-space: nowrap;
  animation: sj-ticker-scroll 38s linear infinite;
  height: 100%;
}
.news-ticker:hover .news-ticker__track { animation-play-state: paused; }
.news-ticker__item {
  font-size: .88rem;
  font-weight: 500;
  color: var(--charcoal-900);
  transition: color var(--transition);
}
.news-ticker__item:hover { color: var(--marigold-600); }
.news-ticker__sep { color: var(--stone-300); margin-inline: var(--space-2); }
@keyframes sj-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .news-ticker__track { animation: none; overflow-x: auto; position: static; }
}

/* ==========================================================================
   Reading progress bar — sirf single post par, scroll % ke saath color badalta hai
   ========================================================================== */
.reading-progress-bar {
  position: fixed;
  top: 0;             /* hamesha viewport ke bilkul top par — kabhi move nahi hota,
                          isliye scroll-direction badalne par "jump" nahi hoga */
  left: 0; right: 0;
  height: 5px;
  background: rgba(0,0,0,.06);
  z-index: 90; /* header (z-index:100, opaque background) ke NEECHE — jab tak
                  header dikh raha hai bar uske peeche chhupa rehta hai; header
                  scroll-down par upar slide hote hi bar khud-ba-khud dikhne lagta hai. */
}
.reading-progress-bar__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #FCA5A5; /* JS ismein smooth color transition karta hai */
  transition: width 80ms linear, background-color 200ms linear;
}
.reading-progress-bar__pct {
  position: fixed;
  top: 8px;            /* yeh bhi ab fix hai — header slide hone par hi dikhega */
  right: 14px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--white);
  background: var(--ink-900);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  opacity: 0;
  z-index: 90;
  transition: opacity var(--transition);
  pointer-events: none;
}
.reading-progress-bar.is-active .reading-progress-bar__pct { opacity: 1; }

/* ==========================================================================
   Sticky header: neeche scroll par chhupe, upar scroll par smoothly wapas aaye
   ========================================================================== */
.site-header {
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.site-header.header-hidden {
  transform: translateY(-100%);
}

/* ==========================================================================
   Category archive page — card reorder support (Title/Meta already in new
   order via PHP; yahan sirf image crop aur author-meta alignment theek kiya)
   ========================================================================== */
.sj-card-reordered .image-container {
  order: initial; /* PHP order already sets Title->Meta->Image->Excerpt */
  /* Fixed aspect-ratio box: (a) poori image bina crop ke dikhti hai (object-fit:contain
     neeche), (b) card-grid ki height consistent rehti hai, aur (c) image load hone se
     PEHLE bhi box ko geometry milti hai — isi wajah se pehle kabhi kabhi neeche wale
     posts ki thumbnail "blank/white space" jaisi dikhti thi (container ka koi reserved
     height na hone se lazy-loaded image apni jagah sahi se nahi le pa rahi thi). */
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-100);
  border-radius: var(--radius-sm);
}
.sj-card-reordered .image-container a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.sj-card-reordered .image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto;
  display: block;
}
.sj-card-reordered .meta.author {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2);
}
.sj-card-reordered .meta.author .author-image {
  display: flex; align-items: center; flex-shrink: 0;
}
.sj-card-reordered .meta.author .author-image img {
  display: block;
  border-radius: 50%;
  width: 26px !important;
  height: 26px !important;
  object-fit: cover !important;
}
.sj-card-reordered .meta-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* scroll ke bajaye — jagah kam pade to wrap ho jaayega */
  gap: 6px;
}
.sj-card-reordered .meta.date {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sj-card-reordered .meta.date::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--stone-300);
  flex-shrink: 0;
}

/* Image aur excerpt ke beech ekdum exact 12px gap */
.sj-card-reordered .image-container {
  margin-bottom: 12px !important;
}
.sj-card-reordered .excerpt {
  margin-top: 0 !important;
}

/* Pagination ke baad footer se pehle saans lene layak jagah */
.sj-pagination--spaced {
  margin-bottom: var(--space-8);
}

/* Pagination — Prev | 1 2 3 4 5 | Next */
.sj-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.sj-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--stone-200);
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sj-pagination .page-numbers:hover { border-color: var(--marigold-500); color: var(--marigold-600); }
.sj-pagination .page-numbers.current { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.sj-pagination .page-numbers.dots { border: none; background: none; }



/* ==========================================================================
   Raveen (parent theme) ka apna built-in "Post Reading Progress Bar" —
   ye feature Raveen mein hi hai (Theme Settings se hi disable karna sahi
   tareeka hai — neeche chat mein exact steps diye hain). Ye sirf ek SAFETY
   NET hai agar wahan se disable na ho paaye — common candidate class names
   hide kar di hain. Humara (child theme ka) apna #sjReadingProgress bar
   isse touch nahi hota, wo alag rehta hai.
   ========================================================================== */
.rivax-reading-progress,
.post-progress-bar,
.rvx-progress-bar,
.progress-reading-bar,
[class*="reading-progress"]:not(#sjReadingProgress):not(.reading-progress-bar):not(.reading-progress-bar__fill):not(.reading-progress-bar__pct) {
  display: none !important;
}