/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* OpenDyslexic font for dyslexia-friendly reading */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/otf/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/otf/OpenDyslexic-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* Syllable coloring for children's reading */
.syllable-color-1 {
  color: #10b981; /* Green */
  /*font-weight: 500;*/
}

.syllable-color-2 {
  color: #f59e0b; /* Orange */
  /*font-weight: 500;*/
}

.syllable-color-3 {
  color: #ef4444; /* Red */
  /*font-weight: 500;*/
}

.syllable-color-4 {
  color: #3b82f6; /* Blue */
  /*font-weight: 500;*/
}

.letter-silenced {
  color: #9ca3af; /* Gray */
  /*font-weight: 500;*/
}

/* OpenDyslexic font class for accessibility */
.font-opendyslexic {
  font-family: 'OpenDyslexic', serif !important;
}

/* Reading progress tracking */
.word {
  cursor: pointer;
}

.word-read {
  opacity: 0.4;
}

/* Safe area insets for iOS PWA - navbar positioning */
.navbar {
  padding-top: max(1rem, env(safe-area-inset-top));
}