:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --ink:#23313f;
  --muted:#6b7a8b;
  --line:#e7e9ee;
  --accent:#1e6091;
  --accent-2:#2a9d8f;
}

html{scroll-behavior:smooth}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px; margin:0 auto; padding:18px 16px;}

/* Header */
.site-header{
  background: linear-gradient(180deg,#1e6091,#195581);
  color:#fff;
  text-align:center;
  padding:28px 16px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:flex;
  flex-direction:row;
}
.div-one{
	display: flex;
	flex-direction: row;
	padding: 10px;
	background: #a0cdde;
}
.site-header img{
	width: 20%;
	margin-right: 20px;
}
.site-title{
  margin:0;
  font-size:clamp(24px,4vw,38px);
  font-weight:800;
  letter-spacing:-.02em;
  margin-right: 20px;
}
.site-sub{
  margin:6px 0 0;
  color:blue;
}
.img-holder img{
	width: 25%;
}
/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  padding:20px;
  background: #8c99ad;
  
}
.tab{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background:rgba(255,255,255,.1);
  transition: transform .12s ease, background .2s ease;
}
.tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.18);}
.tab.active{background:#fff; color:#123; border-color:#fff;}

/* Layout */
.layout{
  display:grid;
  gap:18px;
  grid-template-columns: 340px minmax(0,1fr);
  align-items:start;
}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;}
  .sidebar{order:2;}
  .content{order:1;}
}

/* Sidebar */
.sidebar{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  position:sticky;
  top:12px;
  max-height: calc(100vh - 24px);
  overflow:auto;
}
.side-title{margin:4px 0 10px; font-size:16px; letter-spacing:.01em;}
.small{font-size:13px;color:var(--muted);}
.prayer-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0;
}
.prayer-title{margin:0 0 6px; font-size:17px;}
.prayer-text{
  font-family:"Merriweather", Georgia, serif;
  line-height:1.7;
}
.btn-sm{
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.btn-sm:hover{background:#f3f5f9;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.box-one  img{
	width:50%;
}
/* Main */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.date{color:var(--muted);}
.actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:#1b2b3b;
  font-weight:600;
  text-decoration:none;
}
.btn:hover{background:#f3f5f9;}

/* Cards lectures */
.section-title{
  font-size:22px;
  font-weight:800;
  margin:20px 0 12px;
  letter-spacing:-.01em;
}
.reading-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.reading-title{
  font-size:18px;
  margin:0 0 8px;
  color:#0f2538;
}
.reading-block{
  font-family:"Merriweather", Georgia, "Times New Roman", serif;
  line-height:1.68;
  font-size:16px;
  color:#1d2a36;
}
.reading-block p{margin:10px 0;}

/* Footer */
.site-footer{
  margin-top:26px;
  border-top:1px solid var(--line);
  background:#fff;
}
.site-footer .inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
  color:#5d6a78;
  font-size:14px;
  text-align:center;
}
.prayer-box{
	display: flex;
	flex-direction: row;
	padding-left: 25px;
}

/* Print */
@media print{
  .tabs, .actions, .site-footer, .sidebar { display:none !important; }
  .site-header{ box-shadow:none; }
  .reading-card{ box-shadow:none; border:0; padding:0; margin:0 0 12px; }
  .wrap{ padding:0 16px; }
}