:root {
  --font-family: sans-serif, "Times New Roman";
  --font-size: 16px;
  --font-size-reduced: 12px;
  --font-size-english: 16px;
  --lightest-tan: #ccc;
  --hover-highlight: #ccc;
  --darker-tan: #ccc;
  --even-darker-tan: #555;
  --brown: #4B2E1D;
  --word-padding: 0.2em;
  --line-height: 0.2em;
  --word-border: 1px solid var(--brown);
  
  --reddish: rgb(124, 0, 0);
  --greenish: rgb(0, 75, 0);
}

@font-face {
	font-family: RomanSD;
	src: url(RomanSD.ttf);
}






body { 
	font-family: sans-serif;
	background-image: url("old_paper.jpg");
	font-family: var(--font-family);
}

#output {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-size);
  line-height: 1.5em;
  padding: 1em;
}







label {
	color: #ccc;
	display: inline-block;
}

.normal-paragraph>li {
	line-height: 2em;
}

h3 {
	margin-top: 2em;
}



.centered {
	display: flex;
	justify-content: center;
}

.bordered {
	border: 2px solid lightgray;
	border-radius: 5px;
}




.search-box {
	max-width: 215px;
}




.pure-g {
	margin: 1em;
}

.pure-menu {
	display: inline-block;
	
	border-radius: 8px;
	height: 100%;
	background-color: #333;
	padding: 14px;
	
	max-width: 280px;
}

.pure-menu-link:hover, .pure-menu-link:active {
	color: #333;
	background-color: #ccc;
}

.pure-menu-heading {
	color: #ccc;
	font-size: 18px;
	font-family: RomanSD;
	margin-bottom: 1.4em;
	cursor: default;
}

.pure-menu-link {
	color: #ccc;
	cursor: pointer;
	margin: .4em 0 .4em 0;
}






.menu-pref-header {
	margin-top: 1em;
	color: #555;
	background: #333;
}

.menu-pref-header:hover, .menu-pref-header:active, .menu-pref-header:visited {
	background: #333;
	color: #555;
	background: #333;
	cursor: default;
}







.menu-button {
	font-size: 70%;
	background: #ccc;
	margin: 0 0 .4em .4em;
}

.sub-menu-form {
	margin-left: 1em;
}

.menu-greek-keyboard {
	color: #ccc;
	display: inline;
	line-height: 2.4em;
	padding: 2px;
}

.menu-greek-keyboard:hover {
	background: #ccc;
	color: #333;
}

.menu-child {
	border-radius: 8px;
	background-color: #555;
	padding: 1em;
	color: #ccc;
}







.pure-button-group {
	margin-bottom: 2em;
}

.nav-button {
	font-size: 70%;
	background: #333;
}

.nav-button:hover {
	background: #ccc;
	color: #333;
}







.verse-range {
	margin-bottom: .8em;
	font-size: 14px;
	color: #333;
}








.popup {
  position: absolute;
  background: #333;
  padding: 1em;
  --margin: 1em;
  color: #ccc;
  
  border-radius: 6px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
  
  max-width: 300px;
  z-index: 10000;
  pointer-events: auto;
  display: none;
  user-select: none; /* prevent accidental text selection on hover */
  
  font-family: RomanSD, sans-serif;
  font-size: var(--font-size);
}

.popup-clickable {
  cursor: pointer;
  margin: 2px;
  padding: 2px;
  line-height: 2em;
  color: #888;
  font-family: sans-serif;
}

.popup-clickable:hover {
  --background-color: var(--hover-highlight); /* light tan, less red */
  background-color: #ccc;
  color: #777;
}





.popup.help-popup {
  background: var(--lightest-tan);
  border: 1px solid black;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  box-sizing: border-box;
  user-select: text;
}

.popup.help-popup .help-content {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.popup.help-popup .close-btn {
  display: block;
  margin: 0 auto;
  padding: 5px 10px;
  cursor: pointer;
}





.word {
  display: inline-flex;
  flex-direction: column;
  padding: var(--word-padding);
  text-align: center;
  border: var(--word-border);
  margin: .2em;
}

.word > span {
  display: inline;
  width: 100%;
  padding: .1em;
}

.word-list-grid .english {
  color: rgb(0, 75, 0);
}

.word-list-grid .greek {
  color: rgb(124, 0, 0);
}

.word-list-grid {
  display: table;
  table-layout: auto;
  width: auto;
  border-collapse: collapse; /* Optional: removes spacing between cells */
}

.word-row {
  display: table-row;
  white-space: normal;
}

.word-row span {
  display: table-cell;
  padding: 0.1em 0.3em; /* Optional spacing */
}

.word-header span {
  font-weight: bold;
}








.verse {
  display: flex;
  align-items: center; /* vertically centers child elements */
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.verse-label {
  margin-right: 0.5em;
  align-self: center;
  font-size: var(--font-size-reduced);
  cursor: pointer;
  
  font-weight: bold;
  font-family: RomanSD;
}





#greekHelpPopup {
  position: fixed;
  
  background: var(--lightest-tan);
  border: 1px solid #ccc;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#greekHelpPopup img {
  max-width: 400px; /* or whatever fits nicely */
  display: block;
}








.grk { 
  color: rgb(124, 0, 0); 
  cursor: pointer;
}

.eng { 
  font-size: var(--font-size-english);
  color: rgb(0, 75, 0); 
  cursor: pointer;
}

.formatted-chunk {
  display: inline-block;
  line-height: 1.3;         /* or 1.3, but consistent */
  vertical-align: baseline; /* pin to baseline, not middle */
}

.formatted-chunk.subtext,
.formatted-chunk.subscript,
.formatted-chunk.bracket {
  font-size: var(--font-size-reduced);
  color: rgb(60, 70, 60);
}

.formatted-chunk.bracket {
  display:inline-block; 
  transform:scaleX(0.8);
}

.formatted-chunk.subscript {
  vertical-align: sub;      /* push it down relative to baseline */
  line-height: 1;           /* shrink internal line-box so it doesn’t re-center */
}

.pcode {
  font-size: var(--font-size-reduced);
  color: #4B2E1D;
  cursor: pointer;
}

.roots {
  font-size: var(--font-size-reduced);
  color: navy;
  cursor: pointer;
}

/* Default hover */
.roots:hover, .pcode:hover, .eng:hover, .grk:hover, .col:hover, .verse-label:hover, #toggleGreekHelp:hover {
  background-color: var(--hover-highlight);
}

/* Highlighted default background */
.highlightSearch {
  background-color: var(--hover-highlight);
}

/* Override hover when inside .highlightSearch */
.highlightSearch .roots:hover,
.highlightSearch .pcode:hover,
.highlightSearch .eng:hover,
.highlightSearch .grk:hover,
.highlightSearch .col:hover,
.highlightSearch .verse-label:hover,
.highlightSearch #toggleGreekHelp:hover {
	background-color: var(--darker-tan);
}

.hi {
  background: var(--hover-highlight);
  padding: 0 .15em;
  font-weight: bold;
}

.grk, .eng, .pcode, .roots {
  display: inline; /* stack vertically inside the word */
  text-align: center;
}























.search-separator {
  border: none;
  border-top: 1px solid black;
  width: 100%;
  margin-top: 0;
}




.term-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap; /* ✅ prevents row content from running off-screen */
}

.term-row select,
.term-row input {
  padding: 4px;
  min-width: 70px;
}

.term-row input {
  flex: 1;
}

.term-row button {
  background: var(--hover-highlight);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.term-row button:hover {
  background: #ddd6c4;
}