/* css/style.css */
/* Theme: off-white site with Kalpurush font (self-host or replace with another Bengali webfont) */
@font-face {
  font-family: 'Kalpurush';
  src: url('../fonts/Kalpurush.ttf') format('truetype'); /* Place Kalpurush.ttf in /fonts/ or adjust path */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#fbfaf8; /* off-white */
  --text:#1d1d1f;
  --muted:#5b5b5f;
  --card:#ffffffcc; /* slightly transparent white */
  --accent:#333;
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Kalpurush", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* container to add left/right spacing so only 3 cards show on desktop */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px; /* space left/right */
}

/* header */
.site-header{
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.5);
  border-bottom:1px solid rgba(0,0,0,0.04);
  z-index:40;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-weight:700;
  font-size:1.1rem;
  padding:12px 0;
}

/* nav */
.nav{ position:relative; }
.nav-list{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  align-items:center;
}
.nav-list a{
  text-decoration:none;
  color:var(--accent);
  padding:10px;
  display:block;
}

/* hamburger (mobile) */
.hamburger{
  display:none;
  background:transparent;
  border:0;
  font-size:1.4rem;
  cursor:pointer;
}

/* main */
.main{ padding:28px 0; }

/* grid for homepage */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* card */
.card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(20,20,20,0.04);
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:180px;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(20,20,20,0.08);
}
.card-title{ margin:0 0 8px 0; font-size:1.05rem; }
.meta{ color:var(--muted); font-size:0.9rem; margin:0 0 10px 0; }
.excerpt{ flex:1; margin-bottom:12px; color:var(--muted); }
.read-more{ text-decoration:none; font-weight:600; }

/* posts list */
.post-list{ display:flex; flex-direction:column; gap:22px; }
.post-excerpt{ background:var(--card); padding:18px; border-radius:10px; box-shadow:0 6px 12px rgba(0,0,0,0.03); }

/* single post */
.single-post article{ background:var(--card); padding:24px; border-radius:10px; box-shadow:0 6px 12px rgba(0,0,0,0.03); }

/* post nav */
.post-nav{ display:flex; gap:12px; margin-top:18px; }
.post-nav a{ text-decoration:none; padding:8px 12px; border-radius:8px; background:transparent; border:1px solid rgba(0,0,0,0.04); }

/* footer */
.site-footer{ padding:18px 0; margin-top:40px; border-top:1px solid rgba(0,0,0,0.04); }
.footer-inner{ text-align:center; color:var(--muted); }

/* responsive */
@media (max-width:980px){
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .container{ padding:16px; }
}
@media (max-width:700px){
  .post-grid{ grid-template-columns:1fr; }
  .nav-list{ position:absolute; right:12px; top:56px; background:rgba(255,255,255,0.95); padding:12px; border-radius:8px; flex-direction:column; display:none; box-shadow:0 12px 30px rgba(0,0,0,0.08); }
  .nav-list.show{ display:flex; }
  .hamburger{ display:inline-block; }
}