/* ===================== Khalsa Library — main stylesheet ===================== */

.gurmukhi{font-family:'Noto Sans Gurmukhi', sans-serif;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-deep); color:var(--ivory-deep); font-size:13px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 28px; flex-wrap:wrap; gap:6px;}
.topbar a{opacity:.85;}
.topbar a:hover{opacity:1; text-decoration:underline;}

/* ---------- Header / nav ---------- */
header.site-header{background:var(--navy); color:var(--ivory); position:sticky; top:0; z-index:50; box-shadow:0 2px 18px rgba(0,0,0,.15);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:12px; font-family:'Fraunces', serif; font-weight:700; font-size:22px; color:var(--ivory);}
.logo .mark{width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg, var(--saffron), var(--maroon)); display:flex; align-items:center; justify-content:center; font-family:'Noto Sans Gurmukhi', sans-serif; font-size:20px; color:var(--ivory); font-weight:700; flex-shrink:0;}
.logo-img{display:flex; align-items:center; flex-shrink:0;}
.logo-img img, .logo-img .custom-logo{width:38px; height:38px; object-fit:cover; border-radius:50%; display:block;}
.logo-img-sm img, .logo-img-sm .custom-logo{width:30px; height:30px;}
.logo small{display:block; font-family:'Work Sans',sans-serif; font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--saffron-light);}
.navlinks{display:flex; gap:26px; align-items:center; font-size:15px; font-weight:500; list-style:none; margin:0; padding:0;}
.navlinks a{opacity:.88; padding:6px 2px; border-bottom:2px solid transparent; transition:.15s;}
.navlinks a:hover, .navlinks .current-menu-item a{opacity:1; border-color:var(--saffron);}
.navbtns{display:flex; gap:10px; align-items:center;}
.btn{padding:10px 20px; border-radius:30px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:.15s; white-space:nowrap; border:none;}
.btn-primary{background:var(--saffron); color:var(--navy-deep);}
.btn-primary:hover{background:var(--saffron-light); color:var(--navy-deep);}
.btn-outline{border:1.5px solid rgba(250,243,231,.5); color:var(--ivory); background:transparent;}
.btn-outline:hover{border-color:var(--ivory); background:rgba(255,255,255,.06);}
.btn-dark-outline{border:1.5px solid #E4D8C2; color:var(--charcoal); background:transparent;}
.user-chip{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); padding:6px 14px 6px 6px; border-radius:30px; font-size:14px; color:var(--ivory);}
.user-chip .av{width:26px; height:26px; border-radius:50%; background:var(--saffron); color:var(--navy-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.burger{display:none; background:none; border:none; color:var(--ivory); font-size:24px;}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(ellipse 900px 500px at 15% -10%, rgba(217,142,43,.25), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 0%, rgba(122,35,49,.35), transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:var(--ivory); padding:76px 0 90px;}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.eyebrow{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron-light); font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.eyebrow::before{content:''; width:26px; height:1.5px; background:var(--saffron-light);}
.hero h1{font-size:50px; line-height:1.08; margin-bottom:20px; color:var(--ivory);}
.hero h1 em{font-style:italic; color:var(--saffron-light); font-weight:500;}
.hero p.lede{font-size:17px; color:rgba(250,243,231,.82); max-width:520px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.hero-stats{display:flex; gap:36px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--saffron-light);}
.hero-stats div span{font-size:12.5px; color:rgba(250,243,231,.65); text-transform:uppercase; letter-spacing:.08em;}

/* ---------- Today's Hukamnama banner ---------- */
.hukam-banner{background:linear-gradient(160deg, var(--maroon), #4a1420); color:var(--ivory); border-radius:16px; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:-46px; position:relative; z-index:5; box-shadow:0 20px 40px rgba(0,0,0,.25);}
.hukam-banner .label{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--saffron-light); font-weight:700; margin-bottom:6px;}
.hukam-banner h3{font-size:20px; margin-bottom:4px;}
.hukam-banner .date{font-size:13px; opacity:.8;}

/* ---------- Sections ---------- */
section.block{padding:76px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:38px; gap:20px; flex-wrap:wrap;}
.section-head h2{font-size:32px;}
.section-head p{color:#6b5f52; font-size:15px; max-width:460px; margin-top:8px;}
.see-all{font-weight:600; font-size:14px; color:var(--maroon); border-bottom:1.5px solid var(--maroon); padding-bottom:2px;}
.categories-block{background:var(--ivory-deep);}
.chip-row{display:flex; flex-wrap:wrap; gap:12px;}
.chip{background:var(--paper); border:1px solid #E4D8C2; padding:10px 20px; border-radius:30px; font-size:14px; font-weight:600; color:var(--charcoal); transition:.15s;}
.chip:hover, .chip.active{background:var(--navy); color:var(--ivory); border-color:var(--navy);}

/* ---------- Book / content grid ---------- */
.book-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;}
.book-card{background:var(--paper); border-radius:14px 14px 8px 8px; overflow:hidden; box-shadow:0 6px 18px rgba(28,43,71,.08); border:1px solid #EEE3D0; display:flex; flex-direction:column; transition:.2s;}
.book-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(28,43,71,.15);}
.cover{height:190px; position:relative; display:flex; align-items:flex-end; padding:16px; color:#fff; background-size:cover; background-position:center;}
.cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);}
.cover h4{position:relative; z-index:1; font-family:'Fraunces',serif; font-size:16.5px; line-height:1.25; color:#fff;}
.cover .tag{position:absolute; top:12px; left:12px; z-index:1; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); padding:3px 10px; border-radius:20px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#fff;}
.lock-badge{position:absolute; top:12px; right:12px; z-index:1; width:28px; height:28px; background:rgba(18,30,51,.65); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px;}
.book-info{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.book-info .author{font-size:12.5px; color:#8a7c6a;}
.book-meta{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:#a89a86; margin-top:auto; padding-top:8px;}
.read-btn{margin-top:10px; width:100%; padding:10px; border-radius:8px; font-size:13.5px; font-weight:700; background:var(--navy); color:var(--ivory); text-align:center; display:block;}
.read-btn:hover{background:var(--maroon); color:var(--ivory);}
.read-btn.locked{background:var(--ivory-deep); color:var(--charcoal); border:1px solid #E4D8C2;}

/* ---------- Video channels ---------- */
.channel-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.channel-card{background:var(--navy-deep); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.2); color:var(--ivory);}
.channel-thumb{height:160px; background:linear-gradient(160deg, var(--navy), #0a121f); position:relative; display:flex; align-items:center; justify-content:center;}
.channel-thumb .live-dot{position:absolute; top:12px; left:12px; background:#D93B3B; color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.05em;}
.channel-thumb .live-dot::before{content:''; width:6px; height:6px; border-radius:50%; background:#fff;}
.channel-thumb .play-ico{font-size:38px; opacity:.85;}
.channel-body{padding:16px 18px 20px;}
.channel-body h4{font-size:16px; margin-bottom:6px;}
.channel-body p{font-size:12.5px; color:rgba(250,243,231,.6); margin-bottom:14px;}
.player-shell{background:#000; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.4);}
.player-shell video{width:100%; display:block; background:#000;}

/* ---------- Hukamnama archive ---------- */
.hukam-list{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.hukam-item{background:var(--paper); border:1px solid #EEE3D0; border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px;}
.hukam-item .date-badge{font-family:'Fraunces',serif; font-size:20px; color:var(--maroon);}
.hukam-item a.btn{align-self:flex-start;}

/* ---------- Mission / About ---------- */
.mission{background:var(--navy); color:var(--ivory);}
.mission .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.mission h2{font-size:32px; margin-bottom:18px; color:var(--ivory);}
.mission p{color:rgba(250,243,231,.78); margin-bottom:16px; font-size:15px;}
.mission-figures{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.fig-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:22px;}
.fig-card strong{font-family:'Fraunces',serif; font-size:28px; display:block; color:var(--saffron-light);}
.fig-card span{font-size:12.5px; color:rgba(250,243,231,.65);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-deep); color:rgba(250,243,231,.7); padding:56px 0 26px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08); max-width:1180px; margin:0 auto; padding-left:28px; padding-right:28px;}
.foot-grid h5{color:var(--ivory); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;}
.foot-grid ul{list-style:none; margin:0; padding:0;}
.foot-grid li{margin-bottom:9px;}
.foot-grid a:hover{color:var(--saffron-light);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px; max-width:1180px; margin:0 auto; padding-left:28px; padding-right:28px;}

/* ---------- Auth forms (login/register page) ---------- */
.auth-shell{max-width:420px; margin:70px auto; background:var(--paper); border-radius:16px; padding:38px 34px; box-shadow:0 20px 50px rgba(28,43,71,.12); border:1px solid #EEE3D0;}
.auth-shell h2{font-size:26px; margin-bottom:6px;}
.auth-shell p.sub{font-size:13.5px; color:#8a7c6a; margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--charcoal);}
.field input{width:100%; padding:11px 14px; border-radius:8px; border:1.5px solid #E4D8C2; font-size:14px; font-family:inherit; background:var(--ivory);}
.field input:focus{outline:none; border-color:var(--saffron);}
.auth-shell .btn-primary{width:100%; justify-content:center; padding:12px; font-size:15px; margin-top:6px;}
.auth-switch{text-align:center; font-size:13.5px; margin-top:18px; color:#8a7c6a;}
.auth-switch a{color:var(--maroon); font-weight:700;}
.form-msg{font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:14px;}
.form-msg.err{background:#F7E4E4; color:#8B2E2E;}
.form-msg.ok{background:#E7F0E1; color:#33622E;}

/* ---------- Locked notice (books/reader) ---------- */
.locked-notice{max-width:640px; margin:60px auto; background:var(--paper); border-radius:14px; padding:60px 40px; text-align:center; box-shadow:0 20px 50px rgba(28,43,71,.12); border:1px solid #EEE3D0;}
.locked-notice .icon{font-size:34px; margin-bottom:16px;}
.locked-notice h3{font-size:24px; margin-bottom:10px;}
.locked-notice p{color:#8a7c6a; margin-bottom:24px; font-size:14.5px;}

/* ---------- Reader page ---------- */
.reader-shell{background:var(--navy-deep); padding:50px 0;}
.reader-inner{max-width:900px; margin:0 auto; background:var(--paper); border-radius:10px 10px 4px 4px; box-shadow:0 30px 70px rgba(0,0,0,.4); overflow:hidden;}
.reader-top{background:var(--navy); color:var(--ivory); padding:16px 26px; display:flex; justify-content:space-between; align-items:center;}
.reader-top h4{font-family:'Fraunces',serif; font-size:16px; margin:0; color:var(--ivory);}
.reader-top a.back-link{font-size:13px; opacity:.8;}
.reader-top a.back-link:hover{opacity:1;}
.pdf-frame{width:100%; height:80vh; border:none; display:block; background:#525659;}

/* ---------- Search / filter bar ---------- */
.search-row{display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap;}
.search-row input[type="text"]{flex:1; min-width:220px; padding:13px 18px; border-radius:30px; border:1.5px solid #E4D8C2; font-size:14px; font-family:inherit; background:var(--paper);}
.search-row input:focus{outline:none; border-color:var(--saffron);}
.empty-state{text-align:center; padding:60px 20px; color:#8a7c6a;}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .book-grid{grid-template-columns:repeat(2,1fr);}
  .channel-grid{grid-template-columns:repeat(2,1fr);}
  .hukam-list{grid-template-columns:1fr 1fr;}
  .mission .wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:36px;}
}
@media (max-width:560px){
  .book-grid, .channel-grid, .hukam-list{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .navbtns .btn-outline{display:none;}
  .hukam-banner{margin-top:0;}
}