/**
 * TamilOri Theme Custom Styles & UI Enhancements
 * Matches DESIGN.md and code.html specifications
 */

/* Material Symbols sizing */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* Reading Progress Bar for Single News */
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #fd761a, #dc2626);
  z-index: 100;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Line Clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Search Modal backdrop */
.search-modal-backdrop {
  background-color: rgba(45, 49, 51, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Dark mode overrides for cards & elements */
html.dark .bg-surface-container-lowest {
  background-color: #111827 !important;
}
html.dark .bg-surface-container-low {
  background-color: #1a2234 !important;
}
html.dark .bg-surface-container {
  background-color: #1f293d !important;
}
html.dark .bg-surface-container-high {
  background-color: #28354d !important;
}
html.dark .bg-surface-container-highest {
  background-color: #334155 !important;
}
html.dark .bg-surface {
  background-color: #0b0f19 !important;
}
html.dark .bg-background {
  background-color: #0b0f19 !important;
}
html.dark .text-on-surface {
  color: #f1f5f9 !important;
}
html.dark .text-on-surface-variant {
  color: #94a3b8 !important;
}

/* WordPress Custom Logo (Doubled Size) */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.custom-logo {
  max-height: 96px;
  width: auto;
  max-width: 560px;
  object-fit: contain;
  display: block;
  transition: max-height 0.2s ease;
}
@media (max-width: 640px) {
  .custom-logo {
    max-height: 64px;
    max-width: 320px;
  }
}