/* =================================
   TOP HEADER BAR + CHAPTER CARDS
================================= */
@font-face {
  font-family: "Poppins";
  src: url("/wp-content/themes/twentytwentyfive/assets/fonts/poppins-v24-devanagari-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}


* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

body {
  padding-top: 10px !important;
  background:
    linear-gradient(135deg, #fff7ed 0%, #f8fafc 45%, #e0f2fe 100%) !important;
  color: #172033;
 /* font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */

    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

}

body:has(.ancient-template-bg) {
  padding-top: 20px !important;
}

body:has(.ancient-template-bg) .wp-site-blocks,
body:has(.ancient-template-bg) .site,
body:has(.ancient-template-bg) .site-content,
body:has(.ancient-template-bg) .wp-block-post-content,
body:has(.ancient-template-bg) .entry-content,
body:has(.ancient-template-bg) .ancient-template-bg {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.ancient-template-bg) .wp-site-blocks > *:first-child,
body:has(.ancient-template-bg) .entry-content > *:first-child,
body:has(.ancient-template-bg) .wp-block-post-content > *:first-child,
body:has(.ancient-template-bg) .ancient-template-bg > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.ancient-template-bg) .poppins-protected-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.top-nav),
body:has(.home-wrapper) {
  background:
    linear-gradient(135deg, #fff7ed 0%, #f8fafc 45%, #e0f2fe 100%) !important;
}

.top-nav,
.top-nav *,
.home-wrapper,
.home-wrapper * {
  font-family: "Poppins", system-ui, sans-serif !important;
}

.wp-block-post-content,
.entry-content,
.wp-block-post-content *,
.entry-content * {
  font-family: inherit;
}

.wp-site-blocks,
.site,
.site-content,
.wp-block-post-content,
.entry-content {
  width: 100%;
  max-width: 100%;
  margin-top: 0 !important;
  overflow-x: hidden;
}

body:has(.top-nav) .wp-site-blocks,
body:has(.top-nav) .site,
body:has(.top-nav) .site-content,
body:has(.top-nav) .wp-block-post-content,
body:has(.top-nav) .entry-content,
body:has(.home-wrapper) .wp-site-blocks,
body:has(.home-wrapper) .site,
body:has(.home-wrapper) .site-content,
body:has(.home-wrapper) .wp-block-post-content,
body:has(.home-wrapper) .entry-content {
  background:
    linear-gradient(135deg, #fff7ed 0%, #f8fafc 45%, #e0f2fe 100%) !important;
}

body:has(.home-wrapper) .wp-site-blocks,
body:has(.home-wrapper) .site,
body:has(.home-wrapper) .site-content,
body:has(.home-wrapper) .wp-block-post-content,
body:has(.home-wrapper) .entry-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Top navigation */
.top-nav {
  position: fixed;
  top: 1%;
  left: 50%;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: min(1200px, calc(100vw - 20px)); */
  min-height: 62px;
  padding: 5px 14px;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 237, 0.9));
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-bottom-color: rgba(245, 158, 11, 0.34);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.top-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.16), transparent 34%, rgba(14, 116, 144, 0.13));
}

.nav-left {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fffbeb, #e0f2fe);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.nav-icon {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.nav-title,
.header-title {
  color: #172033;
  text-align: center;
  font-size: clamp(16px, 3.2vw, 22px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.header-title {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: none;
}

.header-title .icon {
  font-size: 28px;
  line-height: 1;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: none;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/*
.nav-search-btn{
    flex-shrink:0;
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.search-icon{
    width:22px;
    height:22px;
}
*/
/* Cards layout */
.home-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;


width: min(100%, 1120px);
  max-width: calc(100vw - 48px);

  margin: 18px auto 0 !important;
  padding: 30px 0 70px;
  background: transparent !important;
  box-sizing: border-box !important;
  justify-content: center;
}

.home-card {
  --card-accent: #6366f1;
  --card-soft: rgba(99, 102, 241, 0.12);

  position: relative;
  display: block;
  min-width: 0;
 min-height: 176px;
  padding: 26px 68px 22px 24px;

  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 248, 0.94));
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.home-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--card-accent), rgba(15, 23, 42, 0.2));
}

.home-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(135deg, transparent 10%, var(--card-soft) 100%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  transition: opacity 0.28s ease;
}

.home-card:hover,
.home-card:active,
.home-card:focus-visible {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--card-accent) 56%, #ffffff);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.14);
  outline: none;
}

.home-card:hover::after,
.home-card:focus-visible::after {
  opacity: 0.78;
}

.c1 {
  --card-accent: #4f46e5;
  --card-soft: rgba(79, 70, 229, 0.13);
}

.c2 {
  --card-accent: #d97706;
  --card-soft: rgba(217, 119, 6, 0.14);
}

.c3 {
  --card-accent: #dc2626;
  --card-soft: rgba(220, 38, 38, 0.12);
}

.c4 {
  --card-accent: #0f766e;
  --card-soft: rgba(15, 118, 110, 0.13);
}

.c5 {
  --card-accent: #0284c7;
  --card-soft: rgba(2, 132, 199, 0.13);
}

.c6 {
  --card-accent: #7c3aed;
  --card-soft: rgba(124, 58, 237, 0.12);
}

.c7 {
  --card-accent: #be123c;
  --card-soft: rgba(190, 18, 60, 0.12);
}

.home-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffffff, var(--card-soft));
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 14px;
  font-size: 25px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.home-card:hover .home-icon,
.home-card:focus-visible .home-icon {
  border-color: color-mix(in srgb, var(--card-accent) 44%, #ffffff);
  transform: translateY(-2px) rotate(4deg);
}

.home-title {
  position: relative;
  z-index: 1;
  max-width: 92%;
  margin-bottom: 9px;
  color: #172033;
  font-size: clamp(16.5px, 1.45vw, 19px);
  font-weight: 900;
  line-height: 1.35;
}

.home-desc {
  position:relative;
  z-index: 1;
  max-width: 92%;
  margin-bottom: 14px;

  color: #64748b;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.home-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--card-accent);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12.5px;
  font-weight: 800;
  transition: transform 0.25s ease;
}

.home-card:hover .home-arrow,
.home-card:focus-visible .home-arrow {
  transform: translateX(6px);
}

/* Dark mode support */
body.dark-mode {
  background: linear-gradient(180deg, #111827, #0f172a);
  color: #e5e7eb;
}

body.dark-mode .top-nav {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(17, 24, 39, 0.9));
  border-color: rgba(71, 85, 105, 0.8);
}

body.dark-mode .nav-title,
body.dark-mode .header-title,
body.dark-mode .home-title {
  color: #f8fafc;
}

body.dark-mode .home-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
  border-color: rgba(71, 85, 105, 0.84);
  color: #e5e7eb;
}

body.dark-mode .home-desc {
  color: #cbd5e1;
}

@media (min-width: 1180px) {
  .home-wrapper {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 50px !important;
  }

  body:has(.ancient-template-bg) {
    padding-top: 0 !important;
  }

  body:has(.ancient-template-bg) .wp-site-blocks,
  body:has(.ancient-template-bg) .site,
  body:has(.ancient-template-bg) .site-content,
  body:has(.ancient-template-bg) .wp-block-post-content,
  body:has(.ancient-template-bg) .entry-content,
  body:has(.ancient-template-bg) .ancient-template-bg,
  body:has(.ancient-template-bg) .poppins-protected-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .wp-site-blocks,
  .site,
  .site-content,
  .wp-block-post-content,
  .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .top-nav {
    top: 0;
    width: calc(100vw - 16px);
    min-height: 46px;
    padding: 5px 10px;
    border-radius: 0 0 16px 16px;
  }

  .nav-left {
    width: 40px;
    height: 40px; 
    border-radius: 11px;
  }
    
  .nav-title {
        font-size: 21px !important;
    }

  .nav-icon {
    width: 40px;
    height: 40px;
  }

  .home-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 28px 0 54px !important; 
  }

  .home-card {
    min-height: 122px;
    padding: 17px 50px 16px 16px !important;
    transform: none !important; 
    margin-bottom:1px;
  }

  .home-card:hover {
    transform: none !important;
  }

  .home-icon {
    top: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    font-size: 23px;
  }
    .home-desc, .home-arrow {
        font-size:14px;
    }
    
  .home-title,
  .home-desc,
  .home-arrow {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
    
    .home-title{
        font-size:20px;
    }
}

@media (max-width: 420px) {
  body {
    padding-top: 48px !important;
  }

  body:has(.ancient-template-bg) {
    padding-top: 0 !important;
  }

  body:has(.ancient-template-bg) .wp-site-blocks,
  body:has(.ancient-template-bg) .site,
  body:has(.ancient-template-bg) .site-content,
  body:has(.ancient-template-bg) .wp-block-post-content,
  body:has(.ancient-template-bg) .entry-content,
  body:has(.ancient-template-bg) .ancient-template-bg,
  body:has(.ancient-template-bg) .poppins-protected-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .top-nav {
    gap: 7px;
    min-height: 44px;
  }

  .nav-title,
  .header-title {
   font-size: clamp(20px, 4.2vw, 18px);

  }

  .home-card {
    border-radius: 16px;
  }
}


/* =================================
   DARK MODE — TOPnavbar
   Add karein existing TOPnavbar.css ke baad
================================= */

body.dark-mode {
  background:
    linear-gradient(135deg, #0f172a 0%, #111827 45%, #0c1a2e 100%) !important;
  color: #e2e8f0;
}

/* ── WordPress wrappers ── */
body.dark-mode .wp-site-blocks,
body.dark-mode .site,
body.dark-mode .site-content,
body.dark-mode .wp-block-post-content,
body.dark-mode .entry-content {
  background:
    linear-gradient(135deg, #0f172a 0%, #111827 45%, #0c1a2e 100%) !important;
}

body.dark-mode:has(.top-nav) .wp-site-blocks,
body.dark-mode:has(.top-nav) .site,
body.dark-mode:has(.top-nav) .site-content,
body.dark-mode:has(.top-nav) .wp-block-post-content,
body.dark-mode:has(.top-nav) .entry-content,
body.dark-mode:has(.home-wrapper) .wp-site-blocks,
body.dark-mode:has(.home-wrapper) .site,
body.dark-mode:has(.home-wrapper) .site-content,
body.dark-mode:has(.home-wrapper) .wp-block-post-content,
body.dark-mode:has(.home-wrapper) .entry-content {
  background:
    linear-gradient(135deg, #0f172a 0%, #111827 45%, #0c1a2e 100%) !important;
}

/* ── Top Nav Bar ── */
body.dark-mode .top-nav {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.93));
  border-color: rgba(71, 85, 105, 0.6);
  border-bottom-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

body.dark-mode .top-nav::before {
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent 34%, rgba(14, 116, 144, 0.1));
}

/* ── Nav Left Icon Box ── */
body.dark-mode .nav-left {
  background: linear-gradient(135deg, #1e293b, #0c2a3d);
  border-color: rgba(245, 158, 11, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Nav & Header Titles ── */
body.dark-mode .nav-title,
body.dark-mode .header-title {
  color: #f1f5f9;
}

/* ── Overlay ── */
body.dark-mode .overlay {
  background: rgba(0, 0, 0, 0.55);
}

/* ── Home Wrapper background ── */
body.dark-mode .home-wrapper {
  background: transparent !important;
}

/* ── Home Cards ── */
body.dark-mode .home-card {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
  border-color: rgba(71, 85, 105, 0.55);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
  color: #e2e8f0;
}

body.dark-mode .home-card:hover,
body.dark-mode .home-card:active,
body.dark-mode .home-card:focus-visible {
  border-color: color-mix(in srgb, var(--card-accent) 56%, #334155);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
}

/* ── Card Left Accent Strip ── */
body.dark-mode .home-card::before {
  background: linear-gradient(180deg, var(--card-accent), rgba(255, 255, 255, 0.08));
}

/* ── Card Corner Wash ── */
body.dark-mode .home-card::after {
  background: linear-gradient(135deg, transparent 10%, var(--card-soft) 100%);
  opacity: 0.55;
}

body.dark-mode .home-card:hover::after,
body.dark-mode .home-card:focus-visible::after {
  opacity: 0.75;
}

/* ── Home Icon Box ── */
body.dark-mode .home-icon {
  background: linear-gradient(135deg, #1e293b, var(--card-soft));
  border-color: rgba(71, 85, 105, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .home-card:hover .home-icon,
body.dark-mode .home-card:focus-visible .home-icon {
  border-color: color-mix(in srgb, var(--card-accent) 44%, #475569);
}

/* ── Home Title ── */
body.dark-mode .home-title {
  color: #f1f5f9;
}

/* ── Home Description ── */
body.dark-mode .home-desc {
  color: #94a3b8;
}

/* ── Home Arrow ── */
body.dark-mode .home-arrow {
  color: color-mix(in srgb, var(--card-accent) 85%, #e2e8f0);
}

/* ── Scrollbar (optional, Chromium only) ── */
body.dark-mode ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #0f172a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 99px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}