/* Base Styles */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #222;
  --muted: #666;
  --primary: #0066ff;
  --shadow: 0 4px 12px rgba(0,0,0,0.06);
}
body.dark {
  --bg: #0f1115;
  --surface: #151922;
  --text: #e9eef7;
  --muted: #9aa4b2;
  --primary: #66aaff;
  --shadow: 0 6px 16px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  margin: 0;
  color: var(--text);
  line-height: 1.65;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1rem 2rem;
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
}
header h1 { margin: 0; font-size: 1.35rem; }
header nav a { margin: 0 12px; font-weight: 600; color: var(--text); }
header nav .btn { margin-left: 10px; }

.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-6px); }
.card-body { padding: 1.2rem 1.3rem; }
.card h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
.meta { font-size: .85rem; color: var(--muted); }
.excerpt { margin: .5rem 0 1rem; }
.tags { font-size: .85rem; color: var(--muted); display: block; margin-bottom: .5rem; }

.btn { display: inline-block; background: var(--primary); color: #fff; padding: .55rem .95rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.btn:hover { filter: brightness(.95); }

.post-layout {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 2rem;
  align-items: start;
}

.single-post { background: var(--surface); padding: 2rem; border-radius: 14px; box-shadow: var(--shadow); }
.single-post h1 { margin-top: 0; font-size: 2rem; }
.single-post .meta { color: var(--muted); margin-bottom: 1rem; }
.tag { display:inline-block; background:#e8eef9; color:#3b4b66; padding:.22rem .6rem; border-radius:999px; margin:0 6px 6px 0; font-size:.8rem; }
body.dark .tag { background:#24314a; color:#c2d6ff; }

.breadcrumb { font-size: .9rem; margin-bottom: 1rem; color: var(--muted); }
.breadcrumb a { color: var(--primary); }
.author-box { display:flex; align-items:center; gap:1rem; margin-top:2rem; padding:1rem; background:rgba(127,127,127,.06); border-radius:10px; }
.author-box img { width:50px; height:50px; border-radius:50%; }
.post-nav { display:flex; justify-content:space-between; margin-top:1.5rem; }
.related-posts { margin-top:2rem; }
.related-posts ul { list-style:none; padding:0; }
.related-posts li { margin:.4rem 0; }

.sidebar { background: var(--surface); padding:1.5rem; border-radius:14px; box-shadow: var(--shadow); height: fit-content; }
.sidebar h3 { margin-top:0; font-size:1.15rem; }
.sidebar ul { list-style:none; padding:0; }
.sidebar li { margin-bottom:.55rem; }
.sidebar input[type="text"]{ width:100%; padding:.6rem .9rem; border-radius:8px; border:1px solid #d7dbe3; background:var(--surface); color:var(--text); outline:none; margin-bottom:1rem; }
.sidebar input[type="text"]:focus{ border-color: var(--primary); }

.pagination { display:flex; align-items:center; justify-content:center; gap:1rem; margin:2rem 0 0; }
.page-indicator { color: var(--muted); }

footer { text-align:center; padding:1rem; background:var(--surface); margin-top:3rem; font-size:.95rem; color: var(--muted); }

@media (max-width: 900px){ .post-layout {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 2rem;
  align-items: start;
} }


/* Ensure sticky sidebar ad doesn't overlap on smaller screens */
@media (max-width: 1023px) {
  #sas_26324 { 
    position: static !important; 
    margin: 1rem 0; 
  }
}
@media (min-width: 1024px) {
  .post-layout {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 2rem;
  align-items: start;
}
  .sidebar { 
    padding-left: 1rem; 
  }
}


@media (max-width: 900px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    margin-top: 2rem;
  }
}

.sidebar {
  margin-right: 1.5rem;
}


/* Reserve space for fixed sidebar ad and add right margin */
@media (min-width: 1024px) {
  .sidebar { padding-right: 1.5rem; }
}
@media (max-width: 1023px) {
  #sas_26324 { position: static !important; margin: 1rem 0; }
}