/*
Theme Name: Safe Draws Blog
Theme URI: https://www.safedraws.com/blog/
Author: Safe Draws
Description: Editorial blog theme matching the Safe Draws main site — no sidebar, no comments, no author byline, minimal navigation.
Version: 1.0
Text Domain: safedraws-blog
*/

:root{
  --oxblood:#6B1423;
  --oxblood-dark:#4A0E19;
  --brass:#A67C3D;
  --brass-light:#C7A567;
  --bg:#EDE4D3;
  --surface:#F6F0E4;
  --ink:#171110;
  --text:#221A17;
  --text-soft:#6B615A;
  --line:#E0DAD0;
  --line-strong:#C9C0B2;
  --parchment-light:#F6F0E4;
  --shadow:0 4px 16px -6px rgba(0,0,0,0.10);
}

[data-theme="dark"]{
  --bg:#171110;
  --surface:#221A17;
  --ink:#0F0B0A;
  --text:#EDE4D3;
  --text-soft:#B8AA9E;
  --line:#3A2E29;
  --line-strong:#4A3B34;
  --brass:#C7A567;
  --shadow:0 4px 16px -6px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Source Serif 4', Georgia, serif; font-size:16px; line-height:1.65;
  transition:background .2s ease, color .2s ease;
}
a{color:var(--oxblood); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px;}

/* ---------- TOP BAR ---------- */
.blog-topbar{background:var(--ink); color:#B8AA9E; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.blog-topbar .wrap{padding:10px 24px; display:flex; justify-content:space-between;}

/* ---------- MASTHEAD ---------- */
.blog-masthead{background:var(--surface); border-bottom:1px solid var(--line-strong); padding:26px 0;}
.blog-masthead .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.blog-brand-lockup{display:flex; align-items:center; gap:10px; text-decoration:none;}
.blog-brand-mark{flex-shrink:0; line-height:0;}
.blog-brand-mark svg{width:clamp(32px,6vw,44px); height:clamp(32px,6vw,44px); display:block;}
.blog-brand-name{
  font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:clamp(24px,5vw,34px);
  letter-spacing:-0.01em; color:var(--oxblood); line-height:1;
}
.blog-brand-tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass); border-left:2px solid var(--brass); padding-left:14px;
}

/* ---------- MAIN NAV ---------- */
.blog-mainnav{background:var(--oxblood); border-bottom:3px solid var(--brass);}
.blog-mainnav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.blog-nav{display:flex; gap:26px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.blog-nav a{color:#EDE4D3;}
.blog-nav a:hover{color:var(--brass-light); text-decoration:none;}

.blog-nav-right{display:flex; align-items:center; gap:10px;}

.blog-theme-toggle{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(237,228,212,0.35); background:transparent;
  color:#EDE4D3; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.blog-theme-toggle:hover{border-color:var(--brass-light);}
.blog-theme-toggle svg{width:17px; height:17px;}
.blog-theme-toggle .sun{display:none;}
[data-theme="dark"] .blog-theme-toggle .moon{display:none;}
[data-theme="dark"] .blog-theme-toggle .sun{display:block;}

.blog-hamburger{
  display:none; width:36px; height:36px; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(237,228,212,0.35); color:#EDE4D3; cursor:pointer; padding:0;
}
.blog-hamburger svg{width:17px; height:17px;}

@media (max-width:640px){
  .blog-nav{display:none;}
  .blog-hamburger{display:flex;}
}

/* ---------- MOBILE DRAWER ---------- */
.blog-drawer-overlay{
  position:fixed; inset:0; background:rgba(10,7,6,0.55); opacity:0; pointer-events:none;
  transition:opacity .25s ease; z-index:80;
}
.blog-drawer-overlay.open{opacity:1; pointer-events:auto;}

.blog-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(300px, 84vw);
  background:var(--oxblood-dark); color:#EDE4D3;
  transform:translateX(100%); transition:transform .3s ease; z-index:90;
  display:flex; flex-direction:column; padding:20px 0;
  box-shadow:-20px 0 40px rgba(0,0,0,0.35);
}
.blog-drawer.open{transform:translateX(0);}
.blog-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:6px 22px 20px; border-bottom:1px solid rgba(255,255,255,0.14);}
.blog-drawer-head span{font-family:'Fraunces', serif; font-weight:700; font-size:20px;}
.blog-drawer-close{background:none; border:none; color:#EDE4D3; cursor:pointer; width:34px; height:34px;}
.blog-drawer-close svg{width:18px; height:18px;}
.blog-drawer a{
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 22px; border-bottom:1px solid rgba(255,255,255,0.08); color:#EDE4D3;
}
.blog-drawer a:active{background:rgba(255,255,255,0.08);}

/* ---------- POST LIST (HOME) ---------- */
.post-list{padding:48px 0 72px;}
.post-list-title{
  font-family:'Fraunces', serif; font-weight:700; font-size:36px; margin:0 0 40px; color:var(--text);
}

/* Featured card — the latest post, shown larger above the grid */
.post-featured{
  display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center;
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  margin-bottom:48px; overflow:hidden;
}
.post-featured .post-card-thumb{aspect-ratio:16/11; margin:0;}
.post-featured-body{padding:8px 36px 8px 0;}
.post-featured .post-card-title{font-size:30px; margin-bottom:14px;}
.post-featured .post-card-excerpt{font-size:16px; margin-bottom:18px;}

/* Grid of remaining posts */
.post-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;}
.post-card{display:flex; flex-direction:column;}
.post-card-thumb{background:var(--line); overflow:hidden; aspect-ratio:16/11; margin-bottom:18px;}
.post-card-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.post-card:hover .post-card-thumb img{transform:scale(1.04);}
.post-card-body{min-width:0;}
.post-card-meta{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brass); margin-bottom:10px;
}
.post-card-title{
  font-family:'Fraunces', serif; font-weight:600; font-size:21px; margin:0 0 10px; line-height:1.3;
}
.post-card-title a{color:var(--text);}
.post-card-title a:hover{color:var(--oxblood); text-decoration:none;}
.post-card-excerpt{color:var(--text-soft); font-size:14.5px; margin:0 0 12px; line-height:1.6;}
.post-card-readmore{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--oxblood);}

@media (max-width:900px){
  .post-grid{grid-template-columns:repeat(2, 1fr);}
  .post-featured{grid-template-columns:1fr;}
  .post-featured-body{padding:0 28px 28px;}
}
@media (max-width:560px){
  .post-grid{grid-template-columns:1fr;}
}

/* ---------- PAGINATION ---------- */
.blog-pagination{display:flex; justify-content:center; gap:8px; padding:20px 0 60px; flex-wrap:wrap;}
.blog-pagination a, .blog-pagination span{
  font-family:'IBM Plex Mono', monospace; font-size:12px; padding:8px 14px; border:1px solid var(--line-strong);
  color:var(--text);
}
.blog-pagination a:hover{border-color:var(--oxblood); color:var(--oxblood); text-decoration:none;}
.blog-pagination .current{background:var(--oxblood); color:#fff; border-color:var(--oxblood);}

/* ---------- SINGLE POST ---------- */
.single-post{padding:56px 0 72px; max-width:760px; margin:0 auto;}
.single-post-meta{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brass); margin-bottom:14px;
}
.single-post-title{
  font-family:'Fraunces', serif; font-weight:700; font-size:38px; line-height:1.15; margin:0 0 28px; color:var(--text);
}
.single-post-content{font-size:17px; line-height:1.75; color:var(--text);}
.single-post-content p{margin:0 0 22px;}
.single-post-content h2{font-family:'Fraunces', serif; font-weight:600; font-size:26px; margin:36px 0 16px;}
.single-post-content h3{font-family:'Fraunces', serif; font-weight:600; font-size:21px; margin:28px 0 14px;}
.single-post-content img{margin:24px 0;}
.single-post-content a{color:var(--oxblood); text-decoration:underline;}
.single-post-content blockquote{
  border-left:3px solid var(--brass); margin:24px 0; padding:4px 0 4px 20px; color:var(--text-soft); font-style:italic;
}
.single-post-back{
  display:inline-block; margin-top:40px; font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--oxblood); border:1px solid var(--oxblood); padding:10px 18px;
}
.single-post-back:hover{background:var(--oxblood); color:#fff; text-decoration:none;}

/* ---------- FOOTER ---------- */
.blog-footer{background:var(--ink); color:#B8AA9E; padding:32px 0; margin-top:40px;}
.blog-footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.blog-footer-brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:700; color:var(--brass-light); font-size:15px;}
.blog-footer-mark svg{width:22px; height:22px; display:block;}
.blog-footer-nav{display:flex; gap:20px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;}
.blog-footer-nav a{color:#B8AA9E;}
.blog-footer-nav a:hover{color:var(--brass-light); text-decoration:none;}

@media (max-width:520px){
  .blog-brand-tag{display:none;}
  .blog-topbar .wrap{font-size:10px;}
}

/* ---------- NO RESULTS ---------- */
.no-posts{padding:60px 0; text-align:center; color:var(--text-soft); font-family:'IBM Plex Mono', monospace; font-size:13px;}