/*
Theme Name: TD88 Developer
Theme URI: https://blog.tothdanieldeveloper.com
Author: Daniel Toth
Author URI: https://tothdanieldeveloper.com
Description: Clean, macOS-inspired dark theme for 4x4Angel Blog.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: td88-developer
*/

/* ═══ RESET & BASE ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;
  --surface:#141414;
  --surface-hover:#1e1e1e;
  --border:rgba(255,255,255,0.06);
  --border-light:rgba(255,255,255,0.1);
  --text:#f0f0f0;
  --text-secondary:#9ca3af;
  --text-tertiary:#6b7280;
  --accent:#F59E0B;
  --accent-hover:#D97706;
  --accent-light:rgba(245,158,11,0.12);
  --accent-glow:rgba(245,158,11,0.25);
  --green:#34c759;
  --yellow:#F59E0B;
  --red:#EF4444;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 12px rgba(0,0,0,0.4),0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:0 8px 30px rgba(0,0,0,0.5),0 4px 8px rgba(0,0,0,0.3);
  --font:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-mono:"SF Mono","Fira Code","JetBrains Mono",Menlo,monospace;
  --max-width:780px;
  --header-height:56px;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.65}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:#000}

/* ═══ HEADER — frosted dark glass ═══ */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-height);
  background:rgba(10,10,10,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1080px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.site-title{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.site-title a{color:inherit}
.site-title a:hover{color:var(--accent)}
.site-nav{display:flex;gap:24px;align-items:center}
.site-nav a{font-size:13px;color:var(--text-secondary);font-weight:500;transition:color .15s}
.site-nav a:hover{color:var(--accent)}

/* ═══ LAYOUT ═══ */
.site-main{max-width:var(--max-width);margin:0 auto;padding:40px 24px 80px}

/* ═══ HERO H1 ═══ */
.page-heading{
  font-size:clamp(28px,5vw,40px);font-weight:700;letter-spacing:-0.03em;
  color:var(--text);margin:0 0 8px;line-height:1.15;
}
.page-subtitle{font-size:15px;color:var(--text-tertiary);margin:0 0 40px;font-weight:400}

/* ═══ POST CARD — dark surface ═══ */
.post-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .25s,transform .25s,border-color .25s;
  margin-bottom:24px;
}
.post-card:hover{
  box-shadow:0 8px 30px var(--accent-glow);
  transform:translateY(-2px);
  border-color:rgba(245,158,11,0.2);
}
.post-card-image{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-bottom:1px solid var(--border);
}
.post-card-body{padding:20px 24px 24px}
.post-card-meta{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;font-size:12px;color:var(--text-tertiary);
}
.post-card-category{
  background:var(--accent-light);color:var(--accent);
  padding:2px 10px;border-radius:20px;font-weight:600;font-size:11px;
}
.post-card-title{
  font-size:20px;font-weight:600;letter-spacing:-0.02em;
  line-height:1.3;margin-bottom:10px;
}
.post-card-title a{color:var(--text)}
.post-card-title a:hover{color:var(--accent)}
.post-card-excerpt{
  font-size:14px;color:var(--text-secondary);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;border-top:1px solid var(--border);
}
.post-card-readmore{
  font-size:13px;font-weight:500;color:var(--accent);
  display:flex;align-items:center;gap:4px;
}
.post-card-readmore:hover{gap:8px}
.post-card-readtime{font-size:12px;color:var(--text-tertiary)}

/* ═══ TAGS on cards ═══ */
.post-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.post-card-tags a{
  font-size:11px;color:var(--text-secondary);background:var(--surface-hover);
  padding:2px 10px;border-radius:20px;border:1px solid var(--border);
  transition:all .15s;
}
.post-card-tags a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}

/* ═══ SINGLE POST ═══ */
.single-header{margin-bottom:32px}
.single-title{
  font-size:clamp(26px,4.5vw,36px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.2;margin-bottom:12px;
}
.single-meta{font-size:13px;color:var(--text-tertiary);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.single-meta .sep{color:var(--border)}
.single-cover{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);margin:24px 0 32px;
  border:1px solid var(--border);
}

/* ═══ POST CONTENT — typography ═══ */
.entry-content{font-size:16px;line-height:1.75;color:var(--text)}
.entry-content p{margin:0 0 1.5em}
.entry-content h2{font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:2.5em 0 0.8em;color:var(--text)}
.entry-content h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin:2em 0 0.6em}
.entry-content h4{font-size:17px;font-weight:600;margin:1.5em 0 0.5em}
.entry-content ul,.entry-content ol{padding-left:1.5em;margin:0 0 1.5em}
.entry-content li{margin-bottom:0.4em}
.entry-content blockquote{
  border-left:3px solid var(--accent);margin:1.5em 0;padding:12px 20px;
  background:var(--accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;color:var(--text-secondary);
}
.entry-content pre{
  background:#111;color:#f5f5f7;
  padding:20px 24px;border-radius:var(--radius);
  overflow-x:auto;font-family:var(--font-mono);font-size:13.5px;
  line-height:1.6;margin:1.5em 0;
  border:1px solid var(--border-light);
}
.entry-content code{
  font-family:var(--font-mono);font-size:0.88em;
  background:var(--surface-hover);padding:2px 6px;border-radius:4px;
  color:var(--accent);
}
.entry-content pre code{background:none;padding:0;color:inherit;font-size:inherit;border-radius:0}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover{text-decoration:none}
.entry-content img{border-radius:var(--radius-sm);margin:1.5em 0;border:1px solid var(--border)}
.entry-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px}
.entry-content th,.entry-content td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.entry-content th{font-weight:600;background:var(--surface);font-size:13px;color:var(--text-secondary)}
.entry-content hr{border:none;border-top:1px solid var(--border);margin:2.5em 0}

/* ═══ POST NAVIGATION ═══ */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;
}
.post-nav a{
  display:block;padding:16px 20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);transition:all .2s;
}
.post-nav a:hover{box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px);border-color:rgba(245,158,11,0.2)}
.post-nav-label{font-size:12px;color:var(--text-tertiary);margin-bottom:4px;font-weight:500}
.post-nav-title{font-size:14px;font-weight:600;color:var(--text)}

/* ═══ SIDEBAR WIDGETS ═══ */
.sidebar-widget{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 24px;margin-bottom:20px;
  box-shadow:var(--shadow);
}
.sidebar-widget-title{
  font-size:11px;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-tertiary);font-weight:600;margin-bottom:12px;
}

/* ═══ FOOTER ═══ */
.site-footer{
  border-top:1px solid var(--border);
  padding:24px;text-align:center;
  font-size:12px;color:var(--text-tertiary);
  background:var(--surface);
}
.site-footer a{color:var(--text-secondary)}
.site-footer a:hover{color:var(--accent)}

/* ═══ PAGINATION ═══ */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 12px;
  font-size:13px;font-weight:500;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);transition:all .15s;
}
.pagination a:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}
.pagination .current{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}

/* ═══ SEARCH ═══ */
.search-form{display:flex;gap:8px}
.search-field{
  flex:1;padding:8px 14px;font-size:14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);
  transition:border-color .15s;
}
.search-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.search-submit{
  padding:8px 16px;font-size:13px;font-weight:600;
  background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--font);transition:background .15s;
}
.search-submit:hover{background:var(--accent-hover)}

/* ═══ COMMENTS ═══ */
.comments-area{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.comments-area .comment{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px}
.comments-area .comment-author{font-weight:600;color:var(--text)}
.comments-area .comment-meta{font-size:12px;color:var(--text-tertiary)}
.comments-area .comment-content{margin-top:8px;font-size:14px;color:var(--text-secondary)}
.comments-area input[type="text"],.comments-area input[type="email"],.comments-area input[type="url"],.comments-area textarea{
  width:100%;padding:10px 14px;font-size:14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);margin-bottom:12px;
}
.comments-area input:focus,.comments-area textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.comments-area .submit{
  padding:10px 24px;font-size:14px;font-weight:600;
  background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;
}
.comments-area .submit:hover{background:var(--accent-hover)}

/* ═══ 404 ═══ */
.error-404{text-align:center;padding:80px 24px}
.error-404 h1{font-size:72px;font-weight:700;color:var(--text-tertiary);margin-bottom:16px}
.error-404 p{font-size:17px;color:var(--text-secondary);margin-bottom:24px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:640px){
  .header-inner{padding:0 16px}
  .site-main{padding:24px 16px 60px}
  .post-card-body{padding:16px}
  .post-card-footer{padding:10px 16px}
  .post-nav{grid-template-columns:1fr}
  .site-nav{gap:16px}
}