/* ==========================================================================
   Navjagran Core — Design System
   Converted 1:1 from the original Replit (React + Tailwind v4) source.
   All CSS custom properties, color tokens, radii, shadows, fonts and the
   "elevate" hover/active system below are copied line-for-line from the
   original src/index.css so the visual output matches exactly.
   ========================================================================== */

:root {
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);
  --opaque-button-border-intensity: -8;

  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);

  --background: 36 40% 97%;
  --foreground: 222 47% 11%;

  --border: 30 20% 88%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --card-border: 30 15% 90%;

  --sidebar: 0 0% 100%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-border: 30 15% 90%;
  --sidebar-primary: 28 80% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 36 40% 96%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-ring: 28 80% 52%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --popover-border: 30 15% 90%;

  --primary: 28 80% 52%;
  --primary-foreground: 0 0% 100%;

  --secondary: 222 47% 18%;
  --secondary-foreground: 0 0% 100%;

  --muted: 36 30% 94%;
  --muted-foreground: 222 20% 40%;

  --accent: 32 95% 88%;
  --accent-foreground: 28 80% 30%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --input: 30 20% 88%;
  --ring: 28 80% 52%;

  --chart-1: 28 80% 52%;
  --chart-2: 222 47% 18%;
  --chart-3: 32 95% 60%;
  --chart-4: 200 60% 50%;
  --chart-5: 160 50% 45%;

  --app-font-sans: 'DM Sans', system-ui, sans-serif;
  --app-font-serif: 'Playfair Display', Georgia, serif;
  --app-font-mono: Menlo, monospace;
  --radius: 0.375rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.05), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.05), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.font-display {
  font-family: var(--app-font-serif);
}

/* Hide default WordPress admin-bar spacing issues on sticky header */
.admin-bar header.site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar header.site-header { top: 46px; }
}

/* Search cancel button */
input[type='search']::-webkit-search-cancel-button { display: none; }

/* ── Elevate system (hover / active brightness) ───────────────────────── */
.toggle-elevate::before,
.toggle-elevate-2::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: -1;
}
.toggle-elevate.toggle-elevated::before { background-color: var(--elevate-2); }
.border.toggle-elevate::before { inset: -1px; }

.hover-elevate:not(.no-default-hover-elevate),
.active-elevate:not(.no-default-active-elevate),
.hover-elevate-2:not(.no-default-hover-elevate),
.active-elevate-2:not(.no-default-active-elevate) {
  position: relative;
  z-index: 0;
}
.hover-elevate:not(.no-default-hover-elevate)::after,
.active-elevate:not(.no-default-active-elevate)::after,
.hover-elevate-2:not(.no-default-hover-elevate)::after,
.active-elevate-2:not(.no-default-active-elevate)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: 999;
}
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
.active-elevate:active:not(.no-default-active-elevate)::after { background-color: var(--elevate-1); }
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
.active-elevate-2:active:not(.no-default-active-elevate)::after { background-color: var(--elevate-2); }
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
.border.active-elevate:not(.no-active-interaction-elevate)::after,
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
.border.active-elevate-2:not(.no-active-interaction-elevate)::after { inset: -1px; }

/* ── Breaking-news ticker ─────────────────────────────────────────────── */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-ticker { animation: ticker 30s linear infinite; }

/* ── Scroll-reveal (fadeInUp) replacement for framer-motion whileInView ─ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-init {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-init.is-visible { opacity: 1; transform: translateY(0); }

/* ── Accordion ─────────────────────────────────────────────────────────── */
.njg-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}
.njg-accordion-item.is-open .njg-accordion-content { grid-template-rows: 1fr; }
.njg-accordion-content > div { min-height: 0; overflow: hidden; }
.njg-accordion-trigger .njg-chevron { transition: transform 0.25s ease; }
.njg-accordion-item.is-open .njg-chevron { transform: rotate(180deg); }

/* ── Search dropdown ──────────────────────────────────────────────────── */
.njg-search-box { width: 0; opacity: 0; overflow: hidden; transition: width 0.25s ease, opacity 0.25s ease; }
.njg-search-box.is-open { width: 280px; opacity: 1; }
@media (max-width: 767px) {
  .njg-search-mobile { height: 0; opacity: 0; overflow: hidden; transition: height 0.25s ease, opacity 0.25s ease; }
  .njg-search-mobile.is-open { height: auto; opacity: 1; }
}

/* ── Mobile menu ──────────────────────────────────────────────────────── */
.njg-mobile-menu { height: 0; opacity: 0; overflow: hidden; transition: height 0.25s ease, opacity 0.25s ease; }
.njg-mobile-menu.is-open { height: auto; opacity: 1; }

/* ── Prose fallback (article body / legal pages) ─────────────────────── */
.njg-prose { color: hsl(var(--foreground)); line-height: 1.75; }
.njg-prose p { margin-bottom: 1.25em; color: hsl(var(--muted-foreground)); }
.njg-prose h2 { font-family: var(--app-font-serif); font-size: 1.875rem; font-weight: 700; margin: 1.5em 0 0.75em; color: hsl(var(--foreground)); }
.njg-prose h3 { font-family: var(--app-font-serif); font-size: 1.5rem; font-weight: 700; margin: 1.4em 0 0.6em; color: hsl(var(--foreground)); }
.njg-prose ul, .njg-prose ol { margin: 1em 0 1.25em 1.5em; color: hsl(var(--muted-foreground)); }
.njg-prose ul { list-style: disc; }
.njg-prose ol { list-style: decimal; }
.njg-prose li { margin-bottom: 0.5em; }
.njg-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.njg-prose blockquote { border-left: 4px solid hsl(var(--primary)); padding: 0.5em 0 0.5em 1.25em; margin: 1.5em 0; font-style: italic; color: hsl(var(--foreground) / 0.85); }
.njg-prose table { width: 100%; }
.njg-prose strong { color: hsl(var(--foreground)); }

/* ── Line clamp fallback (in case Tailwind CDN version differs) ───────── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Shorts full-screen viewer ────────────────────────────────────────── */
.njg-shorts-app { background: linear-gradient(135deg, #fce7f3 0%, #e0e7ff 50%, #fef3c7 100%); }
.njg-shorts-card { transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
.njg-shorts-card.dir-up { transform: translateY(-20px); opacity: 0; }
.njg-shorts-card.dir-down { transform: translateY(20px); opacity: 0; }

/* ── Misc utility niceties used across pages ─────────────────────────── */
.scroll-mt-28 { scroll-margin-top: 7rem; }