/* ===== VARIABLES ===== */
:root {
  /* Light theme (default) */
  --bg: #f4efe6;
  --text: #2b2b2b;
  --muted: #6b6b6b;
  --accent: #7a5c3e;
  --border: #d8d1c4;
  --container-bg: white;
  --footer-bg: rgba(255, 255, 255, 0.95);
  --footer-border: #e5e2db;
  --footer-text: #444;
  --footer-text-hover: #000;
  --progress-bg: #e0ddd6;
  --progress-fill: #6c6254;
  --popup-bg: #fffdf8;
  --popup-border: #e3ded4;
  --popup-shadow: rgba(0, 0, 0, 0.15);
  --scrollbar-track: #f2f2f2;
  --scrollbar-thumb: #555;
  --scrollbar-thumb-hover: #333;
  --a-color: #0d3b7a;     /* Darker - better contrast on white */
  --a-hover-color:  #1a5fb4; /* Deeper blue for hover */
  --box-shadow-color: rgba(0, 0, 0, 0.08);
  --fs-p1: 18px;  
  --fs-p2: 16px;  
  --fs-p3: 14px;
  --fs-p4: 12px;
  }

:root body.dark, :root[data-theme='dark'] {
  --bg: #2b2b2b;
  --text: #f4efe6;
  --muted: #a5a5a5;
  --accent: #897057;
  --border: #3a342d;
  --container-bg: hsl(33, 12%, 15%);
  --footer-bg: rgba(42, 38, 33, 0.95);
  --footer-border: #3a342d;
  --footer-text: #a19a8c;
  --footer-text-hover: #fff;
  --progress-bg: #3a342d;
  --progress-fill: #a19a8c;
  --popup-bg: #2c2822;
  --popup-border: #3a342d;
  --popup-shadow: rgba(255, 255, 255, 0.088); /*rgba(0, 0, 0, 0.4);*/
  --scrollbar-track: #3a342d;
  --scrollbar-thumb: #a19a8c;
  --scrollbar-thumb-hover: #fff;

  --a-color: #a9d3ff; /* Lighter   - stands out on dark bg */
  --a-hover-color: #7cb9ff;      /* Brighter for hover */
  --box-shadow-color:  #ffffff11;
}

/* FONT */
/* @font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
} */
/* lexend-latin-wght-normal */
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ===== BASE STYLES ===== */
body {
  background: var(--bg);
  color: var(--text);
  /*font-family: Consolas, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
  font-family:'Lexend Variable', "Roboto", "Arial", "ui-sans-serif","-apple-system","system-ui","Segoe UI","Helvetica","Apple Color Emoji","Arial","sans-serif","Segoe UI Emoji","Segoe UI Symbol";
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

/* ===== LAYOUT COMPONENTS ===== */
.reader-container {
  max-width: 760px;
  margin: 60px auto;
  padding: 40px;
  
  background: var(--container-bg);
  box-shadow: 0 4px 20px var(--box-shadow-color);
  font-size: var(--fs-p1);
  min-height: 100vh;
  transition: opacity 0.15s ease;
  color: var(--text);
}
.reader-container .pgheader * ,
.reader-container .pgfooter * ,
.reader-container #pg-header * {
  color: var(--text);
}
.reader-container a {
	color: var(--a-color);
}
.reader-container a:hover {
	color: var(--a-hover-color);
}
.reader-container {
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

/* Optional: Add swipe animation class */
.reader-container.swiping {
    transition: transform 0.2s ease;
}

.reader-nav {
  max-width: 760px;
  margin: 20px auto 0;
  text-align: left;
}

.reader-nav a {
  text-decoration: none;
  font-size: 14px;
}

.cover-photo {
  max-width: 100%;
}

/* ===== FIXED FOOTER ===== */
.reader-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: var(--fs-p4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9;
}

.reader-footer button {
  background: none;
  border: none;
  font-size: var(--fs-p3);
  cursor: pointer;
  color: var(--footer-text);
  padding: 4px 8px;
  transition: color 0.15s ease;
}

.reader-footer button:hover {
  color: var(--footer-text-hover);
}

.progress-wrapper {
  width: 200px;
  height: 3px;
  background: var(--progress-bg);
  position: relative;
}

#progressBar {
  height: 100%;
  width: 0%;
  background: var(--progress-fill);
}
.absolute-right {
  position: absolute;
  right: 20px;
}
.absolute-left {
  position: absolute;
  left: 20px;
}
#theme-toggle {
  font-size:var(--fs-p2);
  font-weight: 600;
  border: 1px solid var(--footer-border);
  padding: 4px 8px;
  border-radius: 50%;
  margin-left: 8px;
}
/* ===== DICTIONARY POPUP ===== */
.dict-popup {
  position: absolute;
  max-width: 300px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  padding: 18px;
  font-size: var(--fs-p3);
  line-height: 1.6;
  box-shadow: 0 10px 25px var(--popup-shadow);
  border-radius: 6px;
  z-index: 9;
  /*font-family: Cambria, Georgia, serif;*/
  color: var(--text);
}

.dict-header {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--popup-border);
  padding-bottom: 6px;
}

.dict-header strong {
  font-size: var(--fs-p2);
}

.dict-header .ipa {
  color: var(--muted);
  margin-left: 8px;
  font-size: var(--fs-p4);
}

.dict-header .pos {
  margin-left: 6px;
  font-size: var(--fs-p4);
  color: var(--muted);
}

.sense {
  margin-bottom: 10px;
}

.meaning {
  font-size: var(--fs-p2);
}

.example {
  font-size: var(--fs-p3);
  color: var(--muted);
  margin-left: 12px;
  margin-top: 2px;
  font-style: italic;
}

.pos-block {
  margin-top: 10px;
  padding-top: 8px;
}

.pos-block:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ===== CUSTOM SCROLLBAR ===== */

.hwofd-default {
  overflow: auto;
}

.hwofd-default::-webkit-scrollbar {
  width: 5px;
}

.hwofd-default::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 0;
}

.hwofd-default::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: inherit;
  transition: background-color 0.2s;
}

.hwofd-default::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.hwofd-default::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}














/********************MEDIA******************/
/****************Not GODI Media*************/

@media (max-width:800px) {
	.progress-wrapper {
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		right:0;

	}
	#chapterName { display:none; }
	:root {
	  --fs-p1: 16px;  
	  --fs-p2: 14px;  
	  --fs-p3: 12px;
	  --fs-p4: 10px;
	}
	.reader-container {
		margin-top:0;
		margin-bottom: 40px;
		padding: 22px;
		padding-bottom:150px;
		/* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
	}
}