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

/* Stacked Collection Covers */
.stacked-covers-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  padding: 1rem;
}

.stacked-cover {
  position: absolute;
  width: 85%;
  height: 85%;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stacked-cover:nth-child(1) {
  z-index: 3;
  transform: rotate(2deg) translate(0, 0);
  height: 80%;
  width: 80%;
}

.stacked-cover:nth-child(2) {
  z-index: 2;
  transform: rotate(-3deg) translate(0, 0);
  height: 90%;
  width: 90%;
}

.stacked-cover:nth-child(3) {
  z-index: 1;
  transform: rotate(-5deg) translate(0, 0);
}

.stacked-cover img {
  width: 100%;
  height: 100%;
}