/* Custom styles for Song Fill-in-the-Blanks app */

/* Noto Sans - Regular (400) */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-regular.woff2') format('woff2'),
       url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-regular.woff') format('woff');
}

/* Noto Sans - Medium (500) */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-500.woff2') format('woff2'),
       url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-500.woff') format('woff');
}

/* Noto Sans - Semi-bold (600) */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-600.woff2') format('woff2'),
       url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-600.woff') format('woff');
}

/* Noto Sans - Bold (700) */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-700.woff2') format('woff2'),
       url('fonts/noto-sans/noto-sans-v42-latin_latin-ext-700.woff') format('woff');
}

/* Noto Sans Mono - Regular (400) */
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-regular.woff2') format('woff2'),
       url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-regular.woff') format('woff');
}

/* Noto Sans Mono - Medium (500) */
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-500.woff2') format('woff2'),
       url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-500.woff') format('woff');
}

/* Noto Sans Mono - Semi-bold (600) */
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-600.woff2') format('woff2'),
       url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-600.woff') format('woff');
}

/* Noto Sans Mono - Bold (700) */
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-700.woff2') format('woff2'),
       url('fonts/noto-sans-mono/noto-sans-mono-v37-latin_latin-ext-700.woff') format('woff');
}

/* Any additional custom styles can be added here */
/* Most styling is handled by Tailwind utility classes */

/* Keyboard button class - kept for JavaScript targeting */
/* All styling now handled by Tailwind component classes (btn-key-*) */

/* Ensure result is hidden when hidden class is present */
#result.hidden {
  display: none !important;
}

/* Cursor color now handled by Tailwind caret-gray-800 in .input-blank component */
/* Hide header on lyrics page (the old header element, not the sticky header) */
[data-page="lyrics"] header:not(#sticky-nav-header) {
  display: none;
}