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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f5f7;--surface:#fff;--surface-hover:#fafafa;
  --border:#d2d2d7;--border-light:#e8e8ed;
  --text:#1d1d1f;--text-secondary:#6e6e73;--text-tertiary:#86868b;
  --accent:#0071e3;--accent-hover:#0077ed;--accent-light:#e8f0fe;
  --green:#34c759;--yellow:#ff9f0a;--red:#ff3b30;
  --radius:12px;--radius-sm:8px;--radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 30px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono","Fira Code","JetBrains Mono",Menlo,monospace;
  --max-width:780px;--header-height:52px;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
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:#fff}

/* ═══ HEADER TOP BAR ═══ */
.header-top-bar{background:var(--text);color:#fff;font-size:13px;text-align:center;padding:8px 24px}
.header-top-bar a{color:var(--green);font-weight:500}
.header-top-bar .widget{margin:0}
.header-top-bar .widget p{margin:0}
.header-top-inner{max-width:1080px;margin:0 auto}

/* ═══ HEADER ═══ */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-height);background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--border)}
.site-header:not(.sticky-header){position:relative}
.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:15px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.site-title a{color:inherit}
.site-title a:hover{color:var(--accent)}
.site-title .custom-logo{height:32px;width:auto}
.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(--text)}

/* ═══ HEADER BELOW BAR ═══ */
.header-below-bar{background:var(--accent-light);border-bottom:.5px solid var(--border);padding:16px 24px}
.header-below-inner{max-width:1080px;margin:0 auto}
.header-below-bar .widget{margin:0}

/* ═══ HEADER SEARCH ═══ */
.header-search{display:flex;align-items:center}
.header-search input{width:160px;padding:6px 12px;font-size:12px;border:.5px solid var(--border);border-radius:20px;background:var(--bg);color:var(--text);font-family:var(--font);transition:all .2s}
.header-search input:focus{outline:none;width:220px;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,.1)}

/* ═══ LAYOUT ═══ */
.site-main{max-width:var(--max-width);margin:0 auto;padding:40px 24px 80px}
.content-area{max-width:1080px;margin:0 auto;padding:40px 24px 80px}
.content-area.has-sidebar{display:grid;gap:32px}
.content-area.has-sidebar.sidebar-right{grid-template-columns:1fr 280px}
.content-area.has-sidebar.sidebar-left{grid-template-columns:280px 1fr}
.content-area.has-sidebar.sidebar-left .sidebar{order:-1}
.content-area:not(.has-sidebar) .primary-content{max-width:var(--max-width);margin:0 auto}

/* ═══ HERO ═══ */
.page-heading{font-size:clamp(28px,5vw,40px);font-weight:700;letter-spacing:-.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}

/* ═══ POST CARD ═══ */
.post-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .25s,transform .25s;margin-bottom:24px}
.post-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.post-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:.5px solid var(--border-light)}
.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:500;font-size:11px}
.post-card-title{font-size:20px;font-weight:600;letter-spacing:-.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:.5px solid var(--border-light)}
.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 ═══ */
.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(--bg);padding:2px 10px;border-radius:20px;border:.5px solid var(--border-light);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:-.03em;line-height:1.2;margin-bottom:12px}
.single-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:24px 0 32px;border:.5px solid var(--border)}

/* ═══ ENTRY CONTENT ═══ */
.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:-.02em;margin:2.5em 0 .8em}
.entry-content h3{font-size:20px;font-weight:600;margin:2em 0 .6em}
.entry-content h4{font-size:17px;font-weight:600;margin:1.5em 0 .5em}
.entry-content ul,.entry-content ol{padding-left:1.5em;margin:0 0 1.5em}
.entry-content li{margin-bottom:.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:#1d1d1f;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:.5px solid #333}
.entry-content code{font-family:var(--font-mono);font-size:.88em;background:var(--bg);padding:2px 6px;border-radius:4px;color:#e8453c}
.entry-content pre code{background:none;padding:0;color:inherit;font-size:inherit}
.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:.5px solid var(--border-light)}
.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:.5px solid var(--border-light)}
.entry-content th{font-weight:600;background:var(--bg);font-size:13px;color:var(--text-secondary)}
.entry-content hr{border:none;border-top:.5px solid var(--border);margin:2.5em 0}

/* ═══ POST NAV ═══ */
.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:.5px solid var(--border);border-radius:var(--radius);transition:all .2s}
.post-nav a:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.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 ═══ */
.sidebar{position:sticky;top:calc(var(--header-height) + 24px);align-self:start}
.sidebar .widget{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.sidebar .widget-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-weight:600;margin-bottom:12px}
.sidebar .widget ul{list-style:none;padding:0;margin:0}
.sidebar .widget li{padding:6px 0;border-bottom:.5px solid var(--border-light);font-size:14px}
.sidebar .widget li:last-child{border-bottom:none}
.sidebar .widget li a{color:var(--text-secondary)}
.sidebar .widget li a:hover{color:var(--accent)}
.sidebar .widget select,.sidebar .widget input[type="search"]{width:100%;padding:8px 12px;border:.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--bg);color:var(--text)}

/* ═══ CONTENT TOP/BOTTOM ═══ */
.content-top-area,.content-bottom-area{max-width:1080px;margin:0 auto 24px;padding:0}
.content-top-area .widget,.content-bottom-area .widget{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}

/* ═══ FOOTER WIDGETS ═══ */
.footer-widgets{border-top:.5px solid var(--border);background:var(--bg);padding:40px 24px}
.footer-widgets-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-col .widget{margin-bottom:20px}
.footer-col .widget-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);font-weight:600;margin-bottom:12px}
.footer-col .widget ul{list-style:none;padding:0;margin:0}
.footer-col .widget li{padding:4px 0;font-size:14px}
.footer-col .widget li a{color:var(--text-secondary)}
.footer-col .widget li a:hover{color:var(--accent)}
.footer-col .widget p{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ═══ FOOTER ═══ */
.site-footer{border-top:.5px 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)}
.footer-inner{max-width:1080px;margin:0 auto}
.footer-nav{margin-bottom:12px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.footer-nav a{font-size:13px;color:var(--text-secondary);font-weight:500}
.footer-nav a:hover{color:var(--accent)}
.footer-text{margin:0}

/* ═══ PAGE ═══ */
.page-single .entry-header{margin-bottom:24px}
.page-single .entry-title{font-size:clamp(26px,4.5vw,36px);font-weight:700;letter-spacing:-.03em}

/* ═══ 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:.5px 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:#fff;border-color:var(--accent)}

/* ═══ SEARCH ═══ */
.search-form{display:flex;gap:8px}
.search-field{flex:1;padding:8px 14px;font-size:14px;border:.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:var(--font)}
.search-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
.search-submit{padding:8px 16px;font-size:13px;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer}
.search-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(--border);margin-bottom:16px}
.error-404 p{font-size:17px;color:var(--text-secondary);margin-bottom:24px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .content-area.has-sidebar{grid-template-columns:1fr}
  .content-area.has-sidebar.sidebar-left .sidebar{order:0}
  .sidebar{position:static}
  .footer-widgets-inner{grid-template-columns:1fr}
  .header-search input{width:120px}
  .header-search input:focus{width:160px}
}
@media(max-width:640px){
  .header-inner{padding:0 16px}
  .site-main,.content-area{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}
}