/**
 * Modern Override CSS
 * Modernizes existing pages without breaking functionality
 * Can be added to any existing page to instantly modernize it
 */

/* Import modern design tokens */
@import url('modern-design-system.css');

/* Override Bootstrap navbar with modern styling */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(var(--blur-lg)) !important;
  -webkit-backdrop-filter: blur(var(--blur-lg)) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  padding: var(--space-4) 0 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, 0.8) !important;
  border-bottom-color: var(--color-border) !important;
}

.navbar-brand {
  font-family: var(--font-family-serif) !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text) !important;
}

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-4) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-lg) !important;
  margin: 0 var(--space-1) !important;
}

.nav-link:hover {
  color: var(--color-text) !important;
  background: var(--color-bg-tertiary) !important;
}

.nav-link.active {
  color: var(--color-primary) !important;
  background: rgba(79, 70, 229, 0.1) !important;
}

/* Add spacing for fixed navbar */
body {
  padding-top: 70px;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  transition: background-color var(--transition-base), color var(--transition-base) !important;
}

/* Modernize headers */
.blog-header,
.book-header,
.notes-header,
.papers-header {
  background: var(--gradient-hero) !important;
  color: white !important;
  padding: var(--space-16) var(--space-6) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-12) !important;
  border-radius: 0 !important;
}

.blog-header h1,
.book-header h1,
.notes-header h1,
.papers-header h1,
.blog-header h2,
.book-header h2,
.notes-header h2,
.papers-header h2 {
  color: white !important;
  font-size: var(--font-size-5xl) !important;
}

.blog-header p,
.book-header p,
.notes-header p,
.papers-header p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Modernize cards - Better contrast and visibility */
.blog-item,
.featured-post,
.note-card,
.paper-card,
.book-card-item,
.note-item,
.paper-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

.blog-item:hover,
.featured-post:hover,
.note-card:hover,
.paper-card:hover,
.book-card-item:hover,
.note-item:hover,
.paper-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--color-primary) !important;
}

/* Card titles - ensure high contrast */
.blog-title,
.featured-post-title,
.note-title,
.paper-title,
.book-title {
  color: var(--color-text) !important;
  font-family: var(--font-family-serif) !important;
  font-weight: var(--font-weight-bold) !important;
}

.blog-title:hover,
.featured-post-title:hover,
.note-title:hover,
.paper-title:hover,
.book-title:hover {
  color: var(--color-primary) !important;
}

/* Card descriptions - readable contrast */
.blog-description,
.featured-post-description,
.note-description,
.paper-description,
.book-description {
  color: var(--color-text-secondary) !important;
}

/* Card content areas - ensure proper styling */
.featured-post-content,
.blog-item > div,
.note-item > div,
.paper-item > div {
  color: var(--color-text) !important;
  background: transparent !important;
}

/* If cards have nested content divs, ensure they don't have dark backgrounds */
.blog-item > *,
.featured-post > *,
.note-item > *,
.paper-item > *,
.featured-post-content > * {
  background: transparent !important;
}

/* Dates and metadata */
.blog-date,
.featured-post-date,
.note-date,
.paper-date {
  color: var(--color-text-tertiary) !important;
}

/* Modernize buttons */
.btn,
.filter-dropdown-btn,
.language-btn,
button:not(.theme-toggle-fixed):not(.navbar-toggler) {
  border-radius: var(--radius-lg) !important;
  font-weight: var(--font-weight-semibold) !important;
  transition: all var(--transition-fast) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 2px solid var(--color-border) !important;
}

.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

.btn-primary:hover,
.filter-dropdown-btn:hover,
.language-btn:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Filter button specific */
.filter-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-5) !important;
}

.btn-outline-primary {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

.btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: white !important;
}

/* Modernize search and filter */
.filter-container {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

.section-title {
  color: var(--color-text) !important;
}

.search-container input,
.search-container input[type="text"],
.form-control {
  background: var(--color-surface) !important;
  border: 2px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-lg) !important;
}

.search-container input::placeholder,
.form-control::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 0.6;
}

.search-container input:focus,
.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.search-container i {
  color: var(--color-text-tertiary) !important;
}

/* Modernize tags */
.blog-category,
.note-category,
.paper-category,
.book-category {
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-xs) !important;
}

/* Modernize footer */
footer {
  background: var(--color-bg-secondary) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

.footer-text {
  color: var(--color-text-tertiary) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background: var(--color-surface-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.dropdown-item {
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
}

.dropdown-item:hover {
  background: var(--color-bg-tertiary) !important;
}

.dropdown-item.active {
  background: rgba(79, 70, 229, 0.1) !important;
  color: var(--color-primary) !important;
}

/* Container improvements */
.container {
  max-width: 1280px !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: var(--color-primary);
  color: white;
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Add dark mode theme toggle button  */
.theme-toggle-fixed {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  border: none;
  box-shadow: var(--shadow-xl);
  cursor: pointer;
  z-index: var(--z-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  transition: all var(--transition-fast);
}

.theme-toggle-fixed:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-2xl);
}

/* Book card specific fixes */
.book-item {
  background: var(--color-surface) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}

.book-cover {
  position: relative !important;
}

.book-cover-overlay {
  background: var(--gradient-hero) !important;
  color: white !important;
}

.book-cover-title {
  color: white !important;
  font-size: 2.5rem !important;
  font-weight: var(--font-weight-extrabold) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.book-content {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  padding: var(--space-5) !important;
}

.book-title {
  color: var(--color-text) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: var(--font-weight-bold) !important;
  display: block !important;
  margin: var(--space-3) 0 !important;
}

.book-title:hover {
  color: var(--color-primary) !important;
}

.book-description {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
  margin: var(--space-3) 0 !important;
}

.book-author,
.author-name {
  color: var(--color-text) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.book-meta-top,
.book-meta-bottom {
  color: var(--color-text-tertiary) !important;
}

.book-stats {
  color: var(--color-text-tertiary) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}

.book-stats span {
  color: var(--color-text-tertiary) !important;
  font-size: var(--font-size-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}

.book-stats i {
  color: var(--color-text-tertiary) !important;
  opacity: 0.8 !important;
}

.book-date {
  color: var(--color-text-tertiary) !important;
}

.book-category {
  opacity: 1 !important;
  font-weight: var(--font-weight-semibold) !important;
}

.book-category.tamil {
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: var(--color-secondary) !important;
}

.book-category.english {
  background-color: rgba(79, 70, 229, 0.15) !important;
  color: var(--color-primary) !important;
}

/* Book action buttons */
.book-actions .btn {
  font-weight: var(--font-weight-semibold) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: all var(--transition-fast) !important;
}

.book-actions .btn-primary {
  background: var(--gradient-primary) !important;
  border: none !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
}

.book-actions .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.book-actions .btn-outline-secondary {
  background: transparent !important;
  border: 2px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.book-actions .btn-outline-secondary:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: rgba(79, 70, 229, 0.05) !important;
}

/* Download button in book cards */
.download-btn {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: var(--space-2) var(--space-4) !important;
  box-shadow: var(--shadow-sm) !important;
}

.download-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  color: white !important;
}

/* Additional text visibility fixes */
.blog-item h3,
.blog-item h4,
.blog-item h5,
.featured-post h3,
.featured-post h4,
.note-item h3,
.note-item h4,
.paper-item h3,
.paper-item h4 {
  color: var(--color-text) !important;
}

.blog-item p,
.featured-post p,
.note-item p,
.paper-item p {
  color: var(--color-text-secondary) !important;
}

.blog-item a,
.featured-post a,
.note-item a,
.paper-item a {
  color: var(--color-primary) !important;
}

.blog-item a:hover,
.featured-post a:hover,
.note-item a:hover,
.paper-item a:hover {
  color: var(--color-primary-light) !important;
}

/* Meta text visibility */
.blog-meta,
.featured-post-meta,
.note-meta,
.paper-meta {
  color: var(--color-text-tertiary) !important;
}

.blog-meta *,
.featured-post-meta *,
.note-meta *,
.paper-meta * {
  color: inherit !important;
}

/* Language/category badges */
.blog-category,
.note-category,
.paper-category,
.featured-indicator {
  opacity: 1 !important;
}

.blog-category.english,
.note-category.english {
  background-color: rgba(79, 70, 229, 0.15) !important;
  color: var(--color-primary) !important;
}

.blog-category.tamil,
.note-category.tamil {
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: var(--color-secondary) !important;
}

/* Read more links */
.read-more {
  color: var(--color-primary) !important;
}

.read-more:hover {
  color: var(--color-primary-light) !important;
}

/* Ensure all card images have proper rendering */
.featured-post-img,
.blog-item-img,
.note-img,
.paper-img {
  opacity: 1 !important;
}

/* Fix for list containers */
.blog-list,
.note-list,
.paper-list {
  gap: 20px !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }
  
  .blog-header,
  .book-header,
  .notes-header {
    padding: var(--space-12) var(--space-4) !important;
  }
  
  .blog-header h1,
  .book-header h1,
  .notes-header h1 {
    font-size: var(--font-size-3xl) !important;
  }
}

/* Animation improvements */
@media (prefers-reduced-motion: no-preference) {
  .blog-item,
  .featured-post,
  .note-card,
  .paper-card,
  .book-card-item {
    animation: fadeIn 0.6s ease-out;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}