*/
.read-chapter-indicator {
background-color: theme('colors.accent-teal');
color: white;
padding: 8px 16px;
border-radius: 20px; /* Pill shape */
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap; /* Prevent wrapping */
transition: background-color 0.2s ease, transform 0.2s ease;
margin-left: 20px; /* Space from title on larger screens */
display: inline-flex; /* For alignment */
align-items: center;
}
/* Hover effect for the indicator when the parent index-item is hovered */
.index-item:hover .read-chapter-indicator {
background-color: theme('colors.hover-teal');
transform: translateY(-1px);
}
/* --- NEW MEDIA QUERY FOR MOBILE STYLES (applies below 640px viewport width) --- */
@media (max-width: 639px) {
.index-item {
flex-direction: column; /* Stack items vertically on mobile */
align-items: flex-start; /* Align all content to the left */
padding: 10px 15px; /* Adjust padding for smaller screens */
}
.index-item > div:first-child { /* This targets the containing Hindi and English titles */
width: 100%; /* Make the text content take full width */
padding-right: 0; /* Remove right padding to allow full width usage */
margin-bottom: 10px; /* Add some space below the text before the button */
}
.read-chapter-indicator {
width: 100%; /* Make the button take full width */
text-align: center; /* Center the "Read" text inside the button */
margin-left: 0; /* Remove left margin on mobile */
margin-top: 5px; /* Small gap from the text above */
padding: 10px; /* Adjust button padding for better tap target */
}
}
/* --- END MODIFICATION FOR INDEX ITEMS & MOBILE RESPONSIVENESS --- */
/* Style for the actual Aarti text area */
.aarti-text {
white-space: pre-wrap; /* Ensures line breaks in the text data are respected */
word-break: break-word; /* NEW: Forces long words to wrap to the next line */
font-size: 1.15rem;
line-height: 2.0; /* Increased line height for better readability of Hindi/Sanskrit text */
text-align: center;
padding: 24px;
background-color: #fff;
border: 1px solid #e0e0e0;
}
/* Style for the actual Stotra/Aarti text area - IMPROVED CONTRAST */
.aarti-text {
white-space: pre-wrap;
word-break: break-word;
font-size: 1.15rem;
line-height: 2.0;
text-align: left;
padding: 24px 20px; /* <-- मोबाइल के लिए डिफ़ॉल्ट पैडिंग (ऊपर-नीचे 24px, दाएं-बाएं 20px) */
/* --- NEW COLORS WITH BETTER CONTRAST --- */
background-color: #FEF9E7; /* A very light, pleasant cream background like the image */
color: #BF360C; /* A deeper, richer, and less bright Saffron/Brown color */
border: 1px solid #FAD7A0; /* A soft, matching border */
}
/* --- Style for Deity Info in Index List --- */
.deity-info {
font-size: 0.85rem; /* 14px */
color: #555;
display: flex;
align-items: center;
font-weight: 500;
}
/* --- डेस्कटॉप स्क्रीन के लिए पैडिंग (640px और उससे ज़्यादा चौड़ी) --- */
@media (min-width: 640px) {
.aarti-text {
padding: 24px 60px; /* <-- डेस्कटॉप के लिए ज़्यादा पैडिंग */
}
}
/* --- लंबे शब्दों को स्क्रीन से बाहर जाने से रोकने के लिए --- */
#content-title {
overflow-wrap: break-word;
word-break: break-word;
}