/* ============================================================
   Custom CSS — supplements Tailwind utility classes.
   Only for things Tailwind's CDN build cannot express directly:
   @font-face, native <progress> pseudo-elements, custom scrollbars.
   ============================================================ */

@font-face {
  font-family: 'Kruti Dev 010';
  src: url('fonts/Krutidev010.ttf') format('truetype');
  font-display: swap;
}

.font-krutidev {
  font-family: 'Kruti Dev 010', sans-serif;
}

/* Native progress bar styling (Tailwind can't reach ::-webkit-progress-*) */
progress.tt-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background-color: #e2e8f0;
}
.dark progress.tt-progress {
  background-color: #334155;
}
progress.tt-progress::-webkit-progress-bar {
  background-color: #e2e8f0;
  border-radius: 999px;
}
.dark progress.tt-progress::-webkit-progress-bar {
  background-color: #334155;
}
progress.tt-progress::-webkit-progress-value {
  background-color: #2563eb;
  border-radius: 999px;
  transition: width 0.3s ease;
}
progress.tt-progress::-moz-progress-bar {
  background-color: #2563eb;
  border-radius: 999px;
  transition: width 0.3s ease;
}
progress.tt-progress.warning-red::-webkit-progress-value {
  background-color: #dc2626 !important;
}
progress.tt-progress.warning-red::-moz-progress-bar {
  background-color: #dc2626 !important;
}

/* Custom slim scrollbar for sample text / dropdown */
.tt-scroll::-webkit-scrollbar {
  width: 8px;
}
.tt-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.tt-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
}
.dark .tt-scroll::-webkit-scrollbar-thumb {
  background-color: #475569;
}

/* Force Arial on B/+/- control buttons — parent .sample-text has font-krutidev which cascades down */
.control-btn {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Current word indicator (used by script.js via class toggling) */
.current-word {
  border-bottom: 2px dotted #ef4444;
}

/* Guarantee B/+/− control buttons render in a normal font, never inheriting
   Kruti Dev from the parent .sample-text container (Kruti Dev remaps Latin
   glyphs to Devanagari shapes, so "B"/"+"/"−" would otherwise look wrong). */
.text-controls,
.text-controls .control-btn {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Smooth color transition when toggling dark mode site-wide */
html.dark {
  color-scheme: dark;
}
* {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}

/* Fullscreen icon swap handled by CSS classes toggled in JS */
#fullscreen-toggle .icon-expand,
#fullscreen-toggle-mobile .icon-expand { display: block; }
#fullscreen-toggle .icon-collapse,
#fullscreen-toggle-mobile .icon-collapse { display: none; }
#fullscreen-toggle.is-fullscreen .icon-expand,
#fullscreen-toggle-mobile.is-fullscreen .icon-expand { display: none; }
#fullscreen-toggle.is-fullscreen .icon-collapse,
#fullscreen-toggle-mobile.is-fullscreen .icon-collapse { display: block; }

/* Hide scrollbar arrows look cleaner on the multi-line select */
select.tt-scroll[size] {
  scrollbar-width: thin;
}

/* ===== Header responsive: hide nav-links on mobile, show on desktop ===== */
@media (max-width: 767px) {
  .nav-links { display: none !important; }
  .nav-divider { display: none !important; }
  .dark-label { display: none !important; }
}
@media (min-width: 768px) {
  .nav-links { display: flex !important; }
  .nav-divider { display: block !important; }
  .dark-label { display: inline !important; }
}

/* Dark mode toggle knob position */
html.dark .toggle-knob { transform: translateX(20px); }