/* Fonts */

@font-face {
    font-family: 'DuuemarjPrint';
    src: url('https://www.zyrkthraanchronicles.com/custom/duuemarjPrint/DuuemarjPrint-Regular.woff2') format('woff2'),
         url('https://www.zyrkthraanchronicles.com/custom/duuemarjPrint/DuuemarjPrint-Regular.woff') format('woff'),
         url('https://www.zyrkthraanchronicles.com/custom/duuemarjPrint/DuuemarjPrint-Regular.ttf') format('truetype'),
         url('https://www.zyrkthraanchronicles.com/custom/duuemarjPrint/DuuemarjPrint-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#sidebar {
    width: 30%;
	max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
	background-color: rgba(31,0,14,0.85);
	border-right: 2px solid #d70040;
	float: left;
}
#content {
	/* width: 70%; */
    padding: 20px;
	flex-grow: 1;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

/* Specifics */

.entry {
    background-color: #3e0019;
    margin-bottom: 10px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    color: #ffffff;
}
.entry:hover {
    background-color: #d70040;
    color: #020202;
}
.entry-title {
   font-weight: bold;
    color: #e18c41;
}

/* Entry Detail Styling */

#entry-detail {
    border: 1px solid #e18c41;
    padding: 15px;
    border-radius: 5px;
    background-color: #3e0019;
    color: #ffffff;
}
.field-label {
    font-weight: bold;
    margin-top: 10px;
	color: #e18c41
}

/* Header Styling */

h2 {
    color: #e18c41;
}

/* Dropdown Filter */

#pos-filter {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #d70040;
    color: #020202;
    border: none;
    border-radius: 5px;
	float: left;
}

#pos-filter option {
    background-color: #ffffff;
    color: #000000;
}

/* Search Button and Modal */
#search-button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #e18c41;
    color: #020202;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

#search-modal {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    background-color: #3e0019;
    color: #ffffff;
    padding: 20px;
    border: 2px solid #d70040;
    border-radius: 8px;
    z-index: 9999;
    width: 80%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
}

#search-modal input,
#search-modal select {
    margin: 5px;
    padding: 5px;
    font-size: 1rem;
}

#search-modal button {
    margin: 10px 5px;
    padding: 5px 10px;
    background-color: #d70040;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.search-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}


/* Box Styling */

/* Headword and POS */
.entry-headword {
    font-size: 2em;
    font-weight: bold;
    color: #e18c41;
    margin-bottom: 5px;
}

.entry-pos {
    font-style: italic;
    color: #cccccc;
    margin-bottom: 10px;
}

.entry-definition {
    margin-bottom: 20px;
}

/* Translation Box */
.translation-box {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.transcription {
  font-family: 'Noto Serif', serif; /* fallback ensures IPA renders correctly */
  font-style: italic;
}

.lang-card {
    background-color: #ffffff10;
    border-radius: 10px;
    padding: 10px 15px;
    color: #ffffff;
    border: 1px solid #e18c41;
    flex: 1;
}

.lang-label {
    text-transform: uppercase;
    font-size: 0.75em;
    color: #e18c41;
    display: block;
    margin-bottom: 5px;
}

.lang-word {
    font-size: 1.3em;
    font-weight: bold;
}

.lang-original,
.translation-original {
	font-family: 'DuuemarjPrint', sans-serif;
    font-size: 1.8em;
    line-height: 1.4;
    margin-bottom: 0.3em;
    display: block;	
}

.lang-ipa {
    font-style: italic;
    font-size: 0.9em;
    color: #ccc;
}

.lang-align {
    margin-top: 5px;
    font-weight: bold;
    color: #d70040;
}

/* Example Section */

.example-tag {
	background-color: #3e0019;
    color: #e18c41;
    border-radius: 6px;
    font-size: 1.4em;
	display: block;
	font-style: italic;
}

.example-sentence {
    font-style: italic;
    color: #84b2ff;
    margin-bottom: 10px;
	font-size: 1.4em;
}

.example-translation-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.translation-tag {
    background-color: #3e0019;
    color: #e18c41;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9em;
	display: block;
}

.translation-text {
    background-color: #ffffff10;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
	display: block;
	word-wrap: break-word;
    white-space: normal;
}

.translation-pair {
    flex: 1 1 45%;
    background-color: #3e0019;
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
    box-sizing: border-box;
}

/* Notes */
.entry-notes {
    background-color: #96969633;
    padding: 10px;
    border-radius: 5px;
    font-style: italic;
    color: #ffffff;
}