/**
 * 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):not(.filter-btn):not(.category-btn):not(.theme-toggle) {
  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 - HIDDEN (not working) */
.theme-toggle-fixed {
  display: none !important;
}

/* Also hide toc-toggle-btn */
.toc-toggle-btn {
  display: none !important;
}

/* Hide floating-actions if any exist */
.floating-actions {
  display: none !important;
}

/* Book Detail Page Color Palette */
:root {
    --book-primary: #FAB95B;        /* Golden Yellow - Primary CTAs */
    --book-secondary: #547792;      /* Blue-Gray - Secondary actions */
    --book-accent: #1A3263;         /* Dark Navy - Headers & accents */
    --book-neutral: #E8E2DB;        /* Light Beige - Backgrounds */
}

/* Primary Button - Golden Yellow (Main CTA) */
.btn-primary-book {
  background: var(--book-primary) !important;
  color: var(--book-accent) !important;
  border: 2px solid var(--book-primary) !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(250, 185, 91, 0.3) !important;
}

.btn-primary-book:hover {
  background: #f9ae3d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(250, 185, 91, 0.4) !important;
}

.btn-primary-book:active {
  transform: translateY(0) !important;
}

/* Secondary Button - Blue Gray (Secondary Actions) */
.btn-secondary-book {
  background: var(--book-secondary) !important;
  color: white !important;
  border: 2px solid var(--book-secondary) !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
}

.btn-secondary-book:hover {
  background: #466a85 !important;
  border-color: #466a85 !important;
  transform: translateY(-2px) !important;
}

/* Button-74 Style - Isolated with high specificity */
button.button-74 {
  background-color: #fbeee0 !important;
  border: 2px solid #422800 !important;
  border-radius: 30px !important;
  box-shadow: #422800 4px 4px 0 0 !important;
  color: #1a0f00 !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 0 18px !important;
  line-height: 50px !important;
  text-align: center !important;
  text-decoration: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  transition: all 0.2s ease !important;
}

button.button-74 i {
  color: #1a0f00 !important;
}

button.button-74:hover {
  background-color: #fff !important;
}

button.button-74:active {
  box-shadow: #422800 2px 2px 0 0 !important;
  transform: translate(2px, 2px) !important;
}

@media (min-width: 768px) {
  button.button-74 {
    min-width: 120px !important;
    padding: 0 25px !important;
  }
}

/* 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);
  }
}