/*
  styles.css

  This stylesheet defines the appearance of the Sanskrit Devanagari
  keyboard.  The palette is inspired by the Lexilogos site: light
  greys for backgrounds, muted reds and blues for text, and clear
  borders to delineate keys.  Flexbox is used to arrange the rows
  of keys so that the layout remains fluid on different screen
  sizes.
*/

html, body {
  margin: 0;
  padding: 0;
  font-family: "Nirmala UI", "Segoe UI", sans-serif;
  color: #003399;
  background-color: #ffffff;
  line-height: 1.4;
}

.site-header {
  text-align: center;
  padding: 1em 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
}

.site-title {
  margin: 0;
  font-size: 2em;
  color: #CC0033;
}

.site-subtitle {
  margin: 0.1em 0 0;
  font-size: 1.5em;
  color: #003399;
}

.top-nav {
  margin-top: 0.5em;
}

.top-nav .nav-link {
  margin-right: 1em;
  color: #003399;
  text-decoration: none;
  font-size: 0.95em;
}

.top-nav .nav-link:last-child {
  margin-right: 0;
}

.top-nav .nav-link:hover {
  text-decoration: underline;
}

.language-select {
  text-align: center;
  margin: 1em 0;
}

.language-select select {
  font-size: 1em;
  padding: 0.2em;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #fff;
  color: #003399;
}

.text-area-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.controls {
  margin-bottom: 0.5em;
}

.controls button {
  margin: 0.2em;
  padding: 0.35em 0.8em;
  font-size: 1em;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #E9E9E9;
  color: #CC0033;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.controls button:hover {
  background-color: #FFFF7D;
  color: #0000FF;
}

.output {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 1.5em;
  font-family: "Nirmala UI", "Chandas", sans-serif;
  color: #003399;
  background-color: #FAFAFA;
}

/* Keyboard container splits the keys into left (consonants) and right (vowels/marks) columns */
.keyboard-container {
  width: 80%;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
}

/* Left column holds consonants and the virama */
.keyboard-left {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
}

/* Right column holds vowels, tone marks, punctuation and digits */
.keyboard-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.key-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.key-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.2em;
}

.key-group .label {
  font-size: 0.7em;
  color: #666;
  margin-bottom: 0.1em;
  user-select: none;
}

.key-group .key {
  font-size: 1.4em;
  min-width: 1.7em;
  min-height: 1.7em;
  padding: 0.3em;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #E9E9E9;
  color: #CC0033;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.key-group .key.small {
  font-size: 1.2em;
  min-width: 1.3em;
  min-height: 1.3em;
}

.key-group .key:hover {
  background-color: #FFFF7D;
  color: #0000FF;
}

/* Tone and punctuation rows use a slightly different background */
.tone-row .key,
.punctuation-row .key {
  background-color: #F0F0F0;
}

.digit-row .key {
  background-color: #E9E9E9;
}

/* Conversion area styles */
.conversion-area {
  width: 80%;
  margin: 2em auto;
  text-align: center;
}

.conversion-controls {
  margin-bottom: 0.5em;
}

.conversion-controls button {
  margin: 0.2em;
  padding: 0.35em 0.8em;
  font-size: 1em;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #E9E9E9;
  color: #CC0033;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.conversion-controls button:hover {
  background-color: #FFFF7D;
  color: #0000FF;
}

/* Converted output textarea should match the main output styling */
#convertedOutput {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 1.5em;
  font-family: "Nirmala UI", "Chandas", sans-serif;
  color: #003399;
  background-color: #FAFAFA;
  margin-top: 0.5em;
}

.notes,
.instructions {
  width: 80%;
  margin: 2em auto;
}

.notes h2,
.instructions h2 {
  color: #CC0033;
  font-size: 1.5em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
}

.notes p,
.instructions li {
  font-size: 1em;
  color: #003399;
}

.instructions ul {
  padding-left: 1.2em;
}

.instructions li {
  margin-bottom: 0.3em;
}

.sample {
  font-family: "Nirmala UI", "Chandas", sans-serif;
  color: #CC0033;
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.deva {
  font-family: "Nirmala UI", "Chandas", sans-serif;
  color: #003399;
}

kbd {
  background-color: #eee;
  padding: 0.1em 0.2em;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 0.9em;
  font-family: "Consolas", monospace;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}