/*
Theme Name: FastBlogLite
Theme URI: https://youngtoppreneurs.com/fastbloglite
Author: You
Author URI: https://youngtoppreneurs.com
Description: Theme blog cepat, SEO-friendly, mobile-first. Grid 2 kolom + sidebar kanan.
Version: 1.0.2
License: GNU General Public License v2 or later
Text Domain: fastbloglite
*/

:root{
  --container:1200px;
  --gap:1.25rem;           /* gutter global */
  --text:#111;
  --muted:#666;
  --bg:#fff;
  --accent:#0059ff;
  --border:#e6e6e6;
  --radius:12px;
  --line:1.7;

  /* konsistensi padding blok konten agar judul kartu/entry tampak sejajar */
  --block-pad-x:1.25rem;
  --block-pad-y:1.25rem;
}

/* Base */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font:16px/var(--line) system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Container utama: simetris kiri–kanan */
.site{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gap);
  padding-right:var(--gap);
}

/* Header: branding kiri, menu rata kanan */
.site-header{padding:1.25rem 0;border-bottom:1px solid var(--border)}
.site-header .site{display:flex;align-items:center;gap:1rem}
.branding{display:flex;align-items:center;gap:.75rem;flex:1 1 auto}
.site-title{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2}
.site-description{margin:0;color:var(--muted);font-size:.95rem}

/* Navigasi di kanan (rata kanan) */
.primary-nav{margin-top:0;margin-left:auto}
.primary-nav ul{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  justify-content:flex-end;
  text-align:right;
}
.primary-nav a{padding:.25rem .5rem;border-radius:8px}
.primary-nav a:focus,.primary-nav a:hover{background:#f5f7ff;text-decoration:none}

/* Layout konten: konten + sidebar 320px */
.content-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px; /* ← sidebar fix 320px */
  gap:var(--gap);
  margin:1.25rem 0 2rem;
}
.site-main{min-width:0}

/* Posts grid (archive/home) – 2 kolom */
.posts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}

/* Kartu posting: padding konsisten agar judul “segaris” secara optik */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.card-thumb img{width:100%;height:auto;display:block}
.card-body{
  padding:var(--block-pad-y) var(--block-pad-x);
}
.card-title{margin:.1rem 0 .5rem;font-size:1.12rem;line-height:1.35}
.card-title a{display:inline-block;text-decoration:none}
.card-meta{font-size:.86rem;color:var(--muted);margin-bottom:.5rem}
.card-excerpt{color:#333}

/* Single/Page – padding konsisten dengan kartu */
.entry{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--block-pad-y) var(--block-pad-x);
}
.entry header{margin-bottom:.5rem}
.entry-title{margin:.1rem 0 0;line-height:1.25}
.entry-meta{color:var(--muted);font-size:.9rem;margin:.25rem 0 1rem}

/* Sidebar */
.sidebar .widget{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:var(--gap);
}
.widget-title{margin:.2rem 0 1rem;font-size:1rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1.25rem 0;color:var(--muted);font-size:.95rem}

/* Pagination */
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.pagination a,.pagination span{border:1px solid var(--border);padding:.4rem .7rem;border-radius:8px}
.pagination .current{background:#f5f7ff;font-weight:600}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:999}

/* Responsif header + nav */
@media (max-width:720px){
  .site-header .site{flex-direction:column;align-items:flex-start}
  .primary-nav{width:100%;margin-left:0}
  .primary-nav ul{justify-content:flex-start;text-align:left}
}

/* Responsif layout konten */
@media (max-width:980px){
  .content-wrap{grid-template-columns:1fr}
  .posts-grid{grid-template-columns:1fr}
  .sidebar{order:2}
}

/* Layar besar: tetap 320px agar proporsi konsisten */
@media (min-width:1280px){
  .content-wrap{grid-template-columns:minmax(0,1fr) 320px}
}

/* --- Opsional: haluskan tepi visual align judul vs kartu --- */
/* Hilangkan margin top berlebihan di heading dalam card/entry */
.card .card-body > h2:first-child,
.entry > header > h1:first-child{margin-top:.1rem}

/* Pastikan gambar featured tidak “melebihi” radius pada single */
.entry-thumb img{border-radius:10px}
