/*
Theme Name: IkramRauhi Blog
Theme URI: https://www.ikramrauhi.com/blog
Author: Dr. Ikram Rauhi & ChatGPT
Author URI: https://www.ikramrauhi.com
Description: Clean, modern blog theme matching ikramrauhi.com brand — Poppins + cyan, sticky header, card-based posts like makesum.my/blog.
Version: 1.0.0
Text Domain: ikramrauhi-blog
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== Design tokens */
:root{
  --bg:#ffffff;
  --bg-elevated:#ffffff;
  --text:#0f172a;          /* slate-900 */
  --muted:#475569;         /* slate-600 */
  --line:#e2e8f0;          /* slate-200 */
  --primary:#0ea5e9;       /* sky-500 */
  --primary-600:#0284c7;   /* sky-600 */
  --soft-primary: rgba(14,165,233,.10);
  --radius: 14px;
  --radius-pill: 999px;
  --container: 1200px;
  --shadow: 0 10px 30px rgba(2,8,23,.06);
  --shadow-lg: 0 20px 50px rgba(2,8,23,.12);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(100%, var(--container)); margin-inline:auto; padding-inline: clamp(16px, 2vw, 28px); }

/* ===== Header (sticky) */
.site-header{
  position: sticky; top: 0; z-index: 999;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 18px rgba(2,8,23,.04);
}
.site-header .inner{
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand{
  font-weight: 700; letter-spacing:.2px; white-space: nowrap;
}
.primary-nav{ display: none; align-items: center; gap: clamp(12px, 2vw, 24px); }
.primary-nav a{
  padding: .55rem .6rem; border-radius: 10px; font-weight: 500; opacity:.95;
  transition: color .2s, background .2s, opacity .2s;
}
.primary-nav a:hover{ color: var(--primary); background: var(--soft-primary); }
.primary-nav .btn-blog{
  background: var(--primary); color: #fff; padding:.6rem 1rem; border-radius: var(--radius-pill); font-weight: 600;
  box-shadow: 0 8px 26px rgba(14,165,233,.25); border:1px solid rgba(14,165,233,.35);
}
.primary-nav .btn-blog:hover{ background: var(--primary-600); }

.menu-toggle{
  width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; border-radius:10px; cursor:pointer;
}
.menu-toggle .bar{ width:22px; height:2px; background:var(--text); display:block; border-radius:2px; margin:3px 0; }
.mobile-panel{ display:grid; gap:6px; padding:.75rem clamp(16px,2vw,28px) 1rem; border-top:1px solid var(--line); background:var(--bg-elevated); }
.mobile-panel a{ padding:.8rem .5rem; border-radius:10px; font-weight:500; }
.mobile-panel a:hover{ background: var(--soft-primary); }
.mobile-panel[hidden]{ display:none; }

@media (min-width: 900px){
  .primary-nav{ display:flex; }
  .menu-toggle, .mobile-panel{ display:none !important; }
}
/* Center brand in mobile header */
@media (max-width: 899px){
  .site-header .inner{ position: relative; }
  .brand{ position: absolute; left:50%; transform: translateX(-50%); }
}

/* ===== Post Grid */
.main{ padding: clamp(24px, 6vw, 64px) 0; }
.posts-grid{
  display:grid; gap:clamp(12px, 2.5vw, 22px);
  grid-template-columns: 1fr;
}
@media (min-width:720px){ .posts-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction: column;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(14,165,233,.35); }

.card-media{ position: relative; aspect-ratio: 16/9; background: #f8fafc; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit: cover; }

.card-body{ padding: 14px 16px 16px; display:grid; gap:8px; }
.cat-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-badges a{ font-size: .78rem; padding: .22rem .6rem; border-radius: var(--radius-pill); border:1px solid rgba(14,165,233,.35); color: var(--primary-600); background: var(--soft-primary); font-weight:600; }
.card-title{ margin:0; font-weight: 700; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.2; }
.card-meta{ color: var(--muted); font-size: .92rem; }
.card-excerpt{ color: var(--muted); }
.read-more{
  align-self:start; margin-top: 2px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .9rem; border-radius: var(--radius-pill); background: var(--primary); color:#fff; font-weight:600;
  box-shadow: 0 8px 20px rgba(14,165,233,.25); border:1px solid rgba(14,165,233,.35);
}
.read-more:hover{ background:var(--primary-600); }

/* ===== Pagination */
.pagination{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top: clamp(16px, 4vw, 28px); }
.pagination .page-numbers{ padding:.5rem .8rem; border-radius:10px; border:1px solid var(--line); }
.pagination .current{ background: var(--soft-primary); border-color: rgba(14,165,233,.35); color: var(--primary-600); font-weight:700; }

/* ===== Single */
.single-hero{ padding: clamp(24px, 5vw, 40px) 0 0; }
.single-hero .title{ margin: .2rem 0 .4rem; font-size: clamp(24px, 3vw, 36px); line-height:1.2; font-weight:800; letter-spacing:.2px; }
.single-hero .meta{ color: var(--muted); margin-bottom: .8rem; }
.single-hero .thumb{ border-radius: 18px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow); aspect-ratio:16/9; background:#f8fafc; }
.single-content{ padding: clamp(14px, 3vw, 22px) 0 clamp(24px, 6vw, 56px); }
.single-content .post{ font-size: 1.05rem; line-height: 1.75; color:#0f172a; }
.single-content .post p{ margin: 0 0 1.15em; color:#1f2937; }
.single-content .post h2, .single-content .post h3{ margin-top:1.5em; }

/* ===== Footer */
.site-footer{
  border-top: 1px solid var(--line);
  background:
    radial-gradient(1200px 520px at 50% -20%, rgba(14,165,233,.06), transparent 65%),
    radial-gradient(900px 420px at 100% 100%, rgba(2,132,199,.05), transparent 60%),
    #fff;
  padding: clamp(32px, 7vw, 80px) 0 clamp(18px, 4vw, 36px);
}
.footer-grid{ display:grid; gap: clamp(12px, 2.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 900px){ .footer-grid{ grid-template-columns: 1.2fr .8fr; align-items:start; } }
.footer-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding: clamp(16px, 2.6vw, 24px);
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .2s, border-color .2s; min-width:0;
}
.footer-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(14,165,233,.35); }
.footer-title{ margin:0 0 .5rem 0; font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; }
.footer-lead{ margin:0 0 .8rem 0; color: var(--muted); }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.contact-link{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--text); font-weight:600; transition:background .2s, box-shadow .2s, transform .15s, border-color .2s; }
.contact-link:hover{ background:var(--soft-primary); border-color:rgba(14,165,233,.35); box-shadow:0 8px 24px rgba(14,165,233,.15); transform:translateY(-1px); }
.contact-icon{ width:20px; height:20px; fill:var(--primary-600); }
.footer-cta{ background:linear-gradient(180deg, rgba(14,165,233,.06), transparent 55%), #fff; }
.cta-title{ margin:0 0 .4rem 0; font-weight:700; }
.cta-text{ margin:0 0 .75rem 0; color: var(--muted); }
.footer-bottom{ margin-top: clamp(12px, 2.8vw, 24px); padding-top: clamp(10px, 2vw, 16px); border-top: 1px solid var(--line); text-align:center; color:var(--muted); }
.footer-bottom small{ font-size: .9rem; }