/*
Theme Name: Supatips Blog
Theme URI: https://supatips.com
Author: Supatips
Description: Editorial blog theme matching the Supatips brand — ink-navy, pitch-green and amber, Fraunces + IBM Plex Sans.
Version: 1.0
Requires PHP: 7.4
Text Domain: supatips-blog
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ─── DESIGN TOKENS ─── */
:root,
[data-theme="dark"] {
  --bg:#10151c;
  --bg-2:#151b23;
  --bg-3:#1a2129;
  --bg-card:#1a2129;
  --bg-row:#141a21;
  --accent:#3d8f66;
  --accent-2:#2f6f4e;
  --accent-glow:rgba(61,143,102,.25);
  --amber:#332711;
  --amber-text:#e0a336;
  --text:#eef1ea;
  --muted:#8a9290;
  --dim:#4a5450;
  --border:#242c33;
  --border-2:#1d242a;
  --shadow: rgba(0,0,0,0.4);
  --toggle-bg:#242c33;
  --radius:3px;
  --font-head:'Fraunces',serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --transition:.2s ease;
}

[data-theme="light"] {
  --bg:#f4f2ec;
  --bg-2:#ece9e0;
  --bg-3:#e3e0d5;
  --bg-card:#ffffff;
  --bg-row:#f9f8f4;
  --accent:#2f6f4e;
  --accent-2:#255a3f;
  --accent-glow:rgba(47,111,78,.16);
  --amber:#fbf0dc;
  --amber-text:#8a5f10;
  --text:#1b201c;
  --muted:#5c6660;
  --dim:#9aa39c;
  --border:#dcd8cb;
  --border-2:#e6e3d8;
  --shadow: rgba(0,0,0,0.08);
  --toggle-bg:#dcd8cb;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.65;
  transition:background var(--transition), color var(--transition);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.site-wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ─── HEADER ─── */
.site-header{
  border-bottom:1px solid var(--border);
  padding:16px 0;
  position:sticky;top:0;z-index:50;
  background:var(--bg);
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.site-logo{
  font-family:var(--font-head);
  font-size:26px;font-weight:600;font-style:italic;
  letter-spacing:3px;
  display:flex;align-items:baseline;
}
.site-logo .logo-supa{color:var(--text);}
.site-logo .logo-tips{color:var(--accent);}

.main-nav ul{list-style:none;display:flex;gap:26px;}
.main-nav a{
  font-size:13.5px;font-weight:600;
  color:var(--muted);
  transition:color var(--transition);
  text-transform:uppercase;letter-spacing:.4px;
}
.main-nav a:hover{color:var(--accent);}

.theme-toggle{
  background:var(--toggle-bg);
  border:1px solid var(--border);
  border-radius:20px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);
}

.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;}

/* ─── PAGE HEADER (archive/blog index) ─── */
.page-header{
  padding:40px 0 24px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.page-header h1{
  font-family:var(--font-head);
  font-style:italic;font-weight:600;
  font-size:clamp(26px,4vw,38px);
  margin-bottom:8px;
}
.page-header p{color:var(--muted);font-size:14px;max-width:60ch;}

/* ─── POST CARD GRID ─── */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  margin-bottom:40px;
}
.post-card{
  background:var(--bg-card);
  border:1px solid var(--border-2);
  border-left:3px solid transparent;
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
  display:flex;flex-direction:column;
}
.post-card:hover{border-left-color:var(--accent); background:var(--bg-row); box-shadow:0 2px 10px var(--shadow);}
.post-card-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;}
.post-card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post-card-cat{
  align-self:flex-start;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--amber-text);background:var(--amber);
  border-radius:3px;padding:3px 8px;
}
.post-card-title{
  font-family:var(--font-head);
  font-size:18px;font-weight:600;font-style:italic;
  line-height:1.3;
}
.post-card-title a:hover{color:var(--accent);}
.post-card-excerpt{font-size:13px;color:var(--muted);line-height:1.55;}
.post-card-meta{
  margin-top:auto;padding-top:8px;
  font-size:11.5px;color:var(--dim);
  display:flex;gap:10px;align-items:center;
  border-top:1px solid var(--border-2);
}

/* ─── PAGINATION ─── */
.pagination{display:flex;justify-content:center;gap:8px;margin:20px 0 50px;}
.pagination a,.pagination span{
  padding:7px 13px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:13px;font-weight:600;color:var(--muted);
}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent);}
.pagination a:hover{border-color:var(--accent);color:var(--accent);}

/* ─── SINGLE POST ─── */
.single-post{max-width:760px;margin:0 auto;padding:36px 0 60px;}
.single-post .post-card-cat{margin-bottom:14px;}
.single-post h1{
  font-family:var(--font-head);font-style:italic;font-weight:600;
  font-size:clamp(28px,4.5vw,42px);line-height:1.2;margin-bottom:14px;
}
.single-meta{
  display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--muted);
  padding-bottom:20px;margin-bottom:28px;
  border-bottom:1px solid var(--border);
}
.single-meta img{width:34px;height:34px;border-radius:50%;}
.post-content{font-size:16px;line-height:1.8;}
.post-content p{margin-bottom:20px;}
.post-content h2{
  font-family:var(--font-head);font-style:italic;font-weight:600;
  font-size:26px;margin:34px 0 14px;
}
.post-content h3{font-family:var(--font-head);font-style:italic;font-weight:600;font-size:20px;margin:26px 0 12px;}
.post-content img{border-radius:var(--radius);margin:20px 0;}
.post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.post-content blockquote{
  border-left:3px solid var(--accent);
  padding:4px 0 4px 18px;margin:24px 0;
  color:var(--muted);font-style:italic;
}
.post-content ul,.post-content ol{margin:0 0 20px 22px;}

.author-box{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border-2);
  border-radius:var(--radius);padding:18px;margin-top:40px;
}
.author-box img{width:52px;height:52px;border-radius:50%;flex-shrink:0;}
.author-box h4{font-family:var(--font-head);font-style:italic;font-size:16px;margin-bottom:4px;}
.author-box p{font-size:13px;color:var(--muted);}

/* ─── COMMENTS ─── */
.comments-area{margin-top:44px;}
.comments-title{font-family:var(--font-head);font-style:italic;font-size:22px;margin-bottom:18px;}
.comment-list{list-style:none;}
.comment-body{
  border:1px solid var(--border-2);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;background:var(--bg-card);
}
.comment-author{font-weight:700;font-size:13.5px;}
.comment-meta{font-size:11.5px;color:var(--dim);margin-bottom:6px;}
.comment-form input,.comment-form textarea{
  width:100%;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;color:var(--text);
  font-family:var(--font-body);margin-bottom:12px;
}
.comment-form button{
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);padding:10px 20px;font-weight:600;cursor:pointer;
}

/* ─── SIDEBAR (optional widget area) ─── */
.content-layout{display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:start;}
.content-layout.full-width{grid-template-columns:1fr;}
.widget-area .widget{
  background:var(--bg-card);border:1px solid var(--border-2);
  border-radius:var(--radius);padding:16px;margin-bottom:18px;
}
.widget-title{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin-bottom:12px;
}

/* ─── FOOTER ─── */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:28px 0 20px;}
.footer-clean{display:flex;flex-direction:column;gap:16px;}
.footer-brand p{font-size:12.5px;color:var(--muted);margin-top:4px;}
.footer-links{display:flex;gap:20px;}
.footer-links a{font-size:13.5px;color:var(--text);transition:color var(--transition);}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{
  border-top:1px solid var(--border-2);padding-top:14px;
  font-size:12px;color:var(--dim);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ─── RESPONSIVE ─── */
@media(max-width:780px){
  .content-layout{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:14px 20px;
  }
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column;gap:14px;}
  .nav-toggle{display:block;}
  .post-grid{grid-template-columns:1fr;}
}