body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #fdfdfd;
    color: #333;
  }
  header {
    background: #800000;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  nav {
    display: flex;
    justify-content: center;
    background: #333;
  }
  nav a {
    color: white;
    padding: 1rem;
    text-decoration: none;
  }
  nav a:hover {
    background: #555;
  }
  section {
    padding: 2rem;
    display: none;
  }
  section.active {
    display: block;
  }
  footer {
    text-align: center;
    padding: 1rem;
    background: #800000;
    color: white;
  }




*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:var(--bg); color:var(--text)}
.wrap{max-width:1100px;margin:32px auto;padding:0 16px}
h1{font-size:clamp(24px,2.5vw,34px);margin:0 0 8px}
p.sub{opacity:.8;margin:.25rem 0 1.25rem}
.card{background:var(--card);border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
label{display:block;font-size:14px;margin-bottom:6px}
input,button{width:100%;padding:10px;border-radius:12px;border:1px solid #374151;background:#eceef0;color:var(--text)}
button{cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220;font-weight:700;border:none;box-shadow:0 8px 18px rgba(99,102,241,.25)}
button:hover{filter:brightness(1.05)}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:8px;border:1px solid #2a3343;text-align:left}
.note{font-size:12px;opacity:.7}
ol{padding-left:18px}
li{margin-bottom:6px}


.books-table {
width: 100%;
border-collapse: collapse;
margin: 1rem auto;
}

.books-table th, .books-table td {
border: 1px solid #ccc;
padding: 0.75rem;
text-align: center;
}

.books-table th {
background: #800000;
color: white;
}
#booksList {
text-align: center;
}

.book-category,
.book-child,
.chapter-btn {
display: inline-block;
margin: 0.25rem;
padding: 0.5rem 1rem;
background: #800000;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}

.book-category:hover,
.book-child:hover,
.chapter-btn:hover {
background: #a00000;
}



/* Liturgy Verse Layout */
.verse {
display: grid;
grid-template-columns: repeat(3, 1fr); /* just 3 equal columns */
gap: 8px;
padding: 4px 0;
border-bottom: 1px solid #ddd; /* optional subtle divider */
}

.verse:last-child {
border-bottom: none;
}

.lang {
font-size: 1rem;
line-height: 1.4;
}

.lang.en,
.lang.geez,
.lang.ti {
white-space: pre-wrap; /* keep line breaks if any */
}

/* Role label inside text */
.role-label {
font-weight: bold;
margin-right: 4px;
}