/* =============================
   GLOBAL
============================= */

body{
font-family:"Mukta Malar","Noto Sans Tamil",sans-serif;
background:#fafafa;
margin:0;
padding:20px;
line-height:1.8;
}

.hidden{
display:none;
}

header{
background:#2c3e50;
color:white;
padding:10px;
}

/* =============================
   LAYOUT
============================= */

.container{
max-width:800px;
margin:auto;
padding:20px;
background:white;
}

.reader-layout{
display:flex;
gap:40px;
align-items:flex-start;
}

.bible-text{
flex:3;
font-size:20px;
line-height:2;
}

/* =============================
   CROSS REF PANEL
============================= */

#cross-ref-panel{
flex:1;
max-width:320px;
border-left:1px solid #e0e0e0;
position:fixed;
right:0;
top:0;
height:100vh;
background:white;
box-shadow:-3px 0 10px rgba(0,0,0,0.1);

display:flex;
flex-direction:column;

/* start hidden off screen */
transform:translateX(100%);
transition:transform 0.25s ease;
}

#cross-ref-panel.open{
transform:translateX(0);
}

#ref-list{
flex:1;
overflow-y:auto;
padding:20px;
padding-bottom:60px;
}

#ref-list a{
display:inline-block;
margin-right:6px;
}

#cross-ref-panel button{
position:sticky;
top:0;
background:#2c3e50;
color:white;
border:none;
padding:8px;
cursor:pointer;
}

/* =============================
   VERSES
============================= */

.verse{
display:block;
margin-bottom:14px;
cursor:pointer;
padding:4px;
}

.verse:hover{
background:rgba(100,140,200,0.15);
border-radius:4px;
}

.verse.active{
background:#fff4c2;
border-radius:4px;
}

.verse sup{
font-size:14px;
color:#c0392b;
margin-right:6px;
font-weight:bold;
}

/* highlight when linked */

:target{
background:#fff4c2;
padding:4px;
border-radius:4px;
}

/* dark mode highlight fix */

body.dark :target{
background:#5a4a1a;
color:#ffffff;
}
/* =============================
   PREVIEW BOX
============================= */

#verse-preview{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:500px;
background:white;
border:1px solid #ddd;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
padding:15px;
z-index:2000;
}

.preview-header{
display:flex;
justify-content:space-between;
font-weight:bold;
margin-bottom:10px;
}

#preview-text{
white-space:pre-line;
line-height:1.8;
font-size:17px;
margin-bottom:15px;
}

.preview-go{
display:inline-block;
background:#2c3e50;
color:white;
padding:8px 14px;
text-decoration:none;
border-radius:4px;
}

/* =============================
   BOOK GRID
============================= */

.book-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:12px;
margin-top:20px;
}

.book-grid a{
background:white;
padding:10px;
border-radius:6px;
text-align:center;
text-decoration:none;
color:#333;
font-weight:500;
border:1px solid #ddd;
}

.book-grid a:hover{
background:#2c3e50;
color:white;
}

/* =============================
   CHAPTER GRID
============================= */

.chapter-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.chapter-grid a{
display:inline-block;
padding:10px 14px;
background:#f0f0f0;
border-radius:6px;
text-decoration:none;
font-size:18px;
font-weight:600;
color:#333;
min-width:32px;
text-align:center;
}

.chapter-grid a:hover{
background:#2c3e50;
color:white;
}

/* =============================
   TOOLBAR
============================= */

.reader-toolbar{
display:flex;
align-items:center;
gap:10px;
margin:10px 0 20px 0;
}

.reader-toolbar button{
padding:6px 12px;
border:none;
background:#2c3e50;
color:white;
border-radius:5px;
cursor:pointer;
font-size:14px;
}

.reader-toolbar button:hover{
background:#1a252f;
}

/* =============================
   SEARCH
============================= */

.search-box{
border:1px solid #ddd;
padding:10px;
margin-bottom:20px;
background:#fafafa;
}

.search-box input{
width:80%;
padding:8px;
font-size:16px;
}

.search-box button{
padding:6px 10px;
margin-left:6px;
}

#search-results{
margin-top:10px;
font-size:15px;
}

.search-result{
padding:6px;
border-bottom:1px solid #eee;
cursor:pointer;
}

.search-result:hover{
background:#f2f2f2;
}

/* =============================
   DARK MODE
============================= */

body.dark{
background:#121212;
color:#e0e0e0;
}

body.dark .container{
background:#1e1e1e;
}

body.dark a{
color:#9dc6ff;
}

body.dark #cross-ref-panel{
background:#1e1e1e;
color:#ffffff;
border-left:1px solid #444;
}

body.dark #cross-ref-panel a{
color:#7fb3ff;
}

body.dark #cross-ref-panel a:hover{
color:#ffffff;
text-decoration:underline;
}

body.dark #verse-preview{
background:#1e1e1e;
color:#ffffff;
border:1px solid #444;
}
body.dark .verse.active{
background:#5a4a1a;
color:#ffffff;
}

/* =============================
   TEXT SELECTION
============================= */

::selection{
background:#4a6fa5;
color:#ffffff;
}

body.dark ::selection{
background:#3a5a8a;
color:#ffffff;
}

/* =============================
   MOBILE
============================= */

@media (max-width:768px){

#cross-ref-panel{
position:fixed;
left:0;
right:0;
bottom:0;
height:55vh;
background:white;
border-top:3px solid #2c3e50;

display:flex;
flex-direction:column;

/* animation */
transform:translateY(100%);
transition:transform 0.25s ease;
}

#ref-list{
flex:1;
overflow-y:auto;
padding:15px;
padding-bottom:60px;
}

#cross-ref-panel.open{
transform:translateY(0);
}

}
.discovery-links{
margin:20px 0;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.discovery-links a{
background:#2c3e50;
color:white;
padding:10px 14px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

.discovery-links a:hover{
background:#1a252f;
}