/* ======================================
   दिनविशेष — Additional CSS (पोर्टलसाठी)  ======================================
 */
 
html { scroll-behavior: smooth; }
 
/* ======================================
१. मूळ रंग व फॉन्ट सेटिंग्ज — ग्लोबल डिझाईन टोकन्स (इथले रंग बदलल्यास संपूर्ण पेजवर परिणाम होतो; पण खाली प्रत्येक विभागातही स्वतंत्र रंग-व्हेरिएबल्स आहेत जे फक्त त्या एका विभागावर परिणाम करतात — गरजेनुसार वरचे किंवा खालचे बदला.)
====================================== */
 
.dv-root {
  --maroon: #5C1A1A;
  --maroon-deep: #3E1010;
  --gold: #B8893E;
  --gold-soft: #D9B978;
  --parchment: #FDFBF6;
  --parchment-deep: #FAF5EB;
  --ink: #2B221A;
  --ink-soft: #5A4F42;
  --sage: #7C8B6F;
  --sage-deep: #586349;
  --rule: rgba(92, 26, 26, 0.16);
 
  background: var(--parchment);
  color: #010101;
  font-family: 'Hind', sans-serif;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  padding: 0 0 40px 0;
  line-height: 1.7;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184,137,62,0.05), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(92,26,26,0.04), transparent 45%);
}
 
.dv-root * { box-sizing: border-box; }
 
.dv-root h1, .dv-root h2, .dv-root h3 {
  font-family: 'Tiro Devanagari Marathi', serif;
  margin: 0;
  color: var(--maroon);
}
 
 
/* ======================================
   २. कालरेखा — सिग्नेचर सोनेरी स्पाइन (पेजच्या डाव्या बाजूने जाणारी रेषा)
====================================== */
 
.dv-spine {
  position: absolute;
  top: 340px;
  bottom: 30px;
  left: 28px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold) 4%, var(--gold) 96%, transparent);
  z-index: 0;
}
@media (max-width: 600px) {
  .dv-spine { left: 18px; }
}
 
/* प्रत्येक विभागाच्या डाव्या बाजूचा छोटा सोनेरी ठिपका (नोड) */
.dv-node {
  position: absolute;
  left: 28px;
  top: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--parchment);
  border: 2.5px solid var(--gold);
  transform: translateX(-50%);
  z-index: 1;
}
@media (max-width: 600px) {
  .dv-node { left: 18px; }
}
 
 
/* ======================================
   ३. हेरो विभाग — वरची मरून पट्टी (दिनांक, वार)
====================================== */
 
.dv-hero {
  background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: var(--parchment);
  padding: 36px 32px 28px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.dv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(184,137,62,0.06) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.dv-hero-kicker {
  font-family: 'Hind', sans-serif;
  letter-spacing: 0.12em;
  font-size: 18px;
	font-weight: 600;
  color: var(--gold-soft);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dv-hero-kicker::before, .dv-hero-kicker::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(217,185,120,0.35);
}
.dv-hero-date {
  font-family: 'Tiro Devanagari Marathi', serif;
  font-size: 36px;
  margin: 14px 0 4px;
  line-height: 1.15;
}
.dv-hero-vaar {
  font-size: 16px;
  color: var(--gold-soft);
  font-weight: 500;
}
 
/* ======================================
   ४. आजचा विशेष कार्ड (सण/व्रत/एकादशी — हेरोच्या आतलं कार्ड)
====================================== */
 
.dv-hero-special {
  margin: 18px 0 22px;
  padding: 18px 20px;
  background: rgba(247,241,227,0.08);
  border: 1px solid rgba(247,241,227,0.22);
  border-radius: 10px;
  font-size: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.dv-hero-special:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  background: rgba(247,241,227,0.13);
}
.dv-hero-special b {
  color: var(--gold-soft);
  font-weight: 600;
}
  
/* ======================================
   ५. क्विक-स्टॅट्स — ६ क्लिक करण्यायोग्य रंगीत कार्ड्स (हेरोच्या आत)
   प्रत्येक कार्डाचा रंग स्वतंत्रपणे s1 ते s6 क्लासमध्ये दिला आहे.
====================================== */
 
.dv-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(247,241,227,0.18);
}
.dv-stat {
  display: block;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  padding: 14px 8px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-stat:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}
.dv-stat b {
  display: block;
  font-family: 'Hind', sans-serif;
  font-size: 19px;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .dv-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dv-stat { font-size: 11.5px; padding: 10px 4px; }
  .dv-stat b { font-size: 16px; }
}
 
/* स्टॅट कार्ड १ — महाराष्ट्र घटना (गोल्ड) */
.dv-stat.s1 { background: #eaffff; color: #00838f; }
.dv-stat.s1 b { color: #00838f; }
 
/* स्टॅट कार्ड २ — भारत घटना (स्लेट-ब्लू) */
.dv-stat.s2 { background: #fff0f7; color: #c9005a; }
.dv-stat.s2 b { color: #c9005a; }
 
/* स्टॅट कार्ड ३ — जग घटना (सेज-ग्रीन) */
.dv-stat.s3 { background: linear-gradient(90deg,#fff,#fff6e6); color: #8f0007; }
.dv-stat.s3 b { color: #8f0007; }
 
/* स्टॅट कार्ड ४ — जयंती (टेराकोटा) */
.dv-stat.s4 { background: #ecfff4; color: #0b8f4b; }
.dv-stat.s4 b { color: #0b8f4b; }
 
/* स्टॅट कार्ड ५ — स्मृतिदिन (म्यूट-पर्पल) */
.dv-stat.s5 { background: linear-gradient(90deg,#fff,#fff6e6); color: #8f0007; }
.dv-stat.s5 b { color: #8f0007; }
 
/* स्टॅट कार्ड ६ — शोध/तंत्रज्ञान (कॉपर-ब्राऊन) */
.dv-stat.s6 { background: #f3efff; color: #5b2bc2; }
.dv-stat.s6 b { color: #5b2bc2; }
 
 
/* ======================================
   ६. विभाग-कार्ड सामायिक रचना — सर्व <section class="dv-section">
   साठी कॉमन आकार/स्पेसिंग (हे सर्व विभागांना लागू होते)
====================================== */
 
.dv-section:first-of-type {
  margin-top: 0;
}
.dv-section {
  position: relative;
  padding: 30px 28px 30px 64px;
  scroll-margin-top: 20px;
}
@media (max-width: 600px) {
  .dv-section { padding: 26px 16px 26px 50px; }
}
.dv-section h2 {
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.dv-section + .dv-section {
  border-top: 1px solid var(--rule);
}
 
/* ======================================
   ७. आजचे विशेष दिन — जागतिक / राष्ट्रीय / महाराष्ट्र टॅग कार्ड्स
====================================== */
 
.dv-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dv-tag {
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1 1 220px;
  border: 1px solid rgba(43,34,26,0.08);
  border-left: 4px solid var(--gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-tag:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 18px rgba(92,26,26,0.13);
}
.dv-tag b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.dv-tag p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
 
/* टॅग कार्ड — जागतिक दिन (स्लेट-ब्लू) */
.dv-tag.t-world { background: #eef6ff; border-left-color: #0b3f91; }
.dv-tag.t-world b { color: #0b3f91; }
 
/* टॅग कार्ड — राष्ट्रीय दिन (टेराकोटा-ब्राऊन) */
.dv-tag.t-nation { background: #ecfff4; border-left-color: #0b8f4b; }
.dv-tag.t-nation b { color: #0b8f4b; }
 
/* टॅग कार्ड — महाराष्ट्र दिन (सेज-ग्रीन) */
.dv-tag.t-maha { background: #fff0f7; border-left-color: #c9005a; }
.dv-tag.t-maha b { color: #c9005a; }
 
/* ======================================
   ८. महाराष्ट्रातील घटना कार्ड (सेज-ग्रीन थीम)
======================================*/
 
.dv-eventgrid {
  display: grid;
  gap: 14px;
}
.dv-event {
  border-radius: 8px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  gap: 16px;
}
.dv-event:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 10px 20px rgba(43,34,26,0.1);
}
.dv-event-year {
  font-family: 'Hind', sans-serif;
  font-size: 19px;
  font-weight: 700;
  flex: 0 0 60px;
}
.dv-event-body b {
  display: block;
  font-size: 15.5px;
  margin-bottom: 3px;
  color: var(--ink);
}
.dv-event-body p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
 
/* महाराष्ट्र घटना कार्ड रंग */
.dv-event.t-maharashtra { background: #eaffff; border-color: #00838f; }
.dv-event.t-maharashtra .dv-event-year { color: #00838f; }
 
/* ======================================
   ९. भारतातील घटना कार्ड (गोल्ड थीम)
====================================== */
 
/* भारत घटना कार्ड रंग (आकार/रचना वरील #8 मधील .dv-event याच क्लासेसवर आधारित आहे) */
.dv-event.t-india { background: #fff0f7; border-color: #c9005a; }
.dv-event.t-india .dv-event-year { color: #c9005a; }
 
/* ======================================
   १०. जगातील घटना कार्ड (स्लेट-ब्लू थीम)
======================================*/
 
.dv-event.t-world { background: linear-gradient(90deg,#fff,#fff6e6)
; border-color: #8f0007; }
.dv-event.t-world .dv-event-year { color: #8f0007; }
 
/* ======================================
   ११. आजचा शोध / तंत्रज्ञान कार्ड (कॉपर-ब्राऊन थीम)
   हे कार्ड घटना-कार्डांपेक्षा थोडे वेगळे आहे — यात संशोधकाचे नाव आणि
   "परिणाम" साठी स्वतंत्र ओळी आहेत.
======================================*/
 
.dv-shodhgrid {
  display: grid;
  gap: 14px;
}
.dv-shodh {
  background: #f3efff;
  border: 1px solid rgba(140,90,60,0.3);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-shodh:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 10px 20px rgba(43,34,26,0.1);
}
.dv-shodh-year {
  font-family: 'Hind', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #5b2bc2;
  flex: 0 0 60px;
}
.dv-shodh-body b {
  display: block;
  font-size: 15.5px;
  margin-bottom: 3px;
  color: var(--ink);
}
.dv-shodh-body .dv-shodh-by {
  font-size: 14px;
  color: #5b2bc2;
  font-weight: 600;
  margin-bottom: 6px;
}
.dv-shodh-body p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-soft); }
.dv-shodh-body p:last-child { margin-bottom: 0; }
.dv-shodh-body .dv-shodh-impact {
  background: rgba(255,255,255,0.5);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.dv-shodh-body .dv-shodh-impact b {
  display: inline;
  font-size: 15px;
  color: #5b2bc2;
}
 
/* ======================================
व्यक्ती-कार्ड सामायिक रचना (जयंती / स्मृतिदिन / वाढदिवस — तिघांचा पाया एकच आहे; रंग मात्र विभाग १२, १३, १४ मध्ये स्वतंत्र दिले आहेत)
====================================== */
 
.dv-persongrid {
  display: grid;
  gap: 16px;
}
.dv-person {
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--rule);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-person:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 12px 24px rgba(43,34,26,0.12);
}
.dv-person-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(43,34,26,0.1);
}
.dv-person-name {
  font-family: 'Tiro Devanagari Marathi', serif;
  font-size: 20px;
	font-weight: 700px;
}
.dv-person-years {
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  white-space: nowrap;
}
.dv-person-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .dv-person-grid { grid-template-columns: 1fr; }
}
.dv-pg-item b {
  display: block;
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 2px;
}
.dv-pg-item span { font-size: 15px; color: var(--ink); }
.dv-person-row {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink);
}
.dv-person-row b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}
.dv-person-row.dv-trivia {
  background: rgba(255,255,255,0.55);
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 12px;
}
  
/* ======================================
   १२. जयंती कार्ड रंग (टेराकोटा थीम)
====================================== */
 
.dv-person.t-jayanti { background: #ecfff4; border-color: #0b8f4b; }
.dv-person.t-jayanti .dv-person-name { color: #0b8f4b; }
.dv-person.t-jayanti .dv-person-years { color: #0b8f4b; }
 
/* ======================================
   १३. स्मृतिदिन कार्ड रंग (म्यूट-पर्पल थीम)
====================================== */
 
.dv-person.t-smruti { background: linear-gradient(90deg,#fff,#fff6e6); border-color: #ffb300; }
.dv-person.t-smruti .dv-person-name { color: #8f0007; }
.dv-person.t-smruti .dv-person-years { color: #8f0007; }
 
/* ======================================
   १४. आज वाढदिवस कार्ड रंग (मस्टर्ड-गोल्ड थीम)
====================================== */
 
.dv-person.t-vaddiwas { background: linear-gradient(180deg,
#ffe4f1,#fff); border-color: #8f0007; }
.dv-person.t-vaddiwas .dv-person-name { color: #8f0007; }
.dv-person.t-vaddiwas .dv-person-years { color: #8f0007; }
 
/* ======================================
   १५. विशेष उल्लेख — निबंध कार्ड (मरून-टिंट थीम)
======================================*/
 
.dv-essay {
  font-size: 15.5px;
  color: var(--ink-soft);
  background: #F3E9DF;
  border-radius: 10px;
  padding: 22px 24px;
  border: 1px solid rgba(92,26,26,0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-essay:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 14px 26px rgba(92,26,26,0.14);
}
.dv-essay p { margin: 0 0 12px; }
.dv-essay p:last-child { margin-bottom: 0; }
.dv-essay p:first-of-type::first-letter {
  font-family: 'Tiro Devanagari Marathi', serif;
  font-size: 46px;
  color: var(--maroon);
  float: left;
  line-height: 0.8;
  padding: 4px 8px 0 0;
}
 
/* ======================================
   १६. आणखी थोडं — माहिती / प्रश्न / मत कार्ड्स (तीन वेगळे रंग)
======================================*/
 
.dv-closergrid {
  display: grid;
  gap: 14px;
}
.dv-closer {
  border-left: 4px solid var(--gold);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dv-closer:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 8px 18px rgba(92,26,26,0.1);
}
.dv-closer b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.dv-closer p { margin: 0; font-size: 15px; }
 
/* क्लोझर कार्ड १ — तुम्हाला माहिती आहे का? (गोल्ड) */
.dv-closer.c1 { background: #eef6ff; border-left-color: #0b3f91; }
.dv-closer.c1 b { color: #0b3f91; }
 
/* क्लोझर कार्ड २ — आजचा प्रश्न (स्लेट-ब्लू) */
.dv-closer.c2 { background: #ecfff4; border-left-color: #0b8f4b; }
.dv-closer.c2 b { color: #0b8f4b; }
 
/* क्लोझर कार्ड ३ — तुमचे मत (टेराकोटा) */
.dv-closer.c3 { background: #f3efff; border-left-color: #5b2bc2; }
.dv-closer.c3 b { color: #5b2bc2; }