/*
Theme Name: SmartDailyTips Tech
Description: Clean blue/slate technology blog theme for smartdailytips.com — hero featured story, category pills, latest posts grid, how-to spotlight and newsletter sections. Homepage fills automatically from real posts; while there are no posts it shows sample layout content.
Version: 1.0.7
Author: SmartDailyTips
Text Domain: smartdailytips-tech
*/

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:#f8fafc; color:#0f172a; }
a { color:#2563eb; }
.ticker { background:#2563eb; color:#dbeafe; font-size:13.5px; padding:8px 16px; text-align:center; }
.ticker b { color:#fff; }
header.site { background:#fff; border-bottom:1px solid #e2e8f0; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.logo { font-size:26px; font-weight:800; letter-spacing:-.5px; color:#0f172a; text-decoration:none; }
.logo span { color:#2563eb; }
.logo small { display:block; font-size:11.5px; font-weight:700; color:#64748b; letter-spacing:1.4px; text-transform:uppercase; margin-top:2px; }
nav.main ul { list-style:none; display:flex; flex-wrap:wrap; }
nav.main a { color:#1e293b; text-decoration:none; font-weight:600; font-size:15px; margin-left:20px; }
nav.main a:hover { color:#2563eb; }
.catsbar { background:#fff; border-bottom:1px solid #e2e8f0; padding:10px 22px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.catsbar a { text-decoration:none; font-size:13.5px; font-weight:700; padding:7px 14px; border-radius:20px; border:1.5px solid #bfdbfe; color:#2563eb; background:#eff6ff; }
.catsbar a.ai { border-color:#ddd6fe; color:#7c3aed; background:#f5f3ff; }
.catsbar a.howto { border-color:#a7f3d0; color:#059669; background:#ecfdf5; }
.wrap { max-width:1080px; margin:0 auto; padding:26px 16px 6px; }
.hero { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:28px; }
.feature { border-radius:18px; overflow:hidden; background:#0f172a; color:#fff; position:relative; min-height:340px; display:flex; align-items:flex-end; text-decoration:none; }
.feature .bg { position:absolute; inset:0; background:linear-gradient(120deg,#1e3a8a 0%,#2563eb 45%,#7c3aed 100%); background-size:cover; background-position:center; opacity:.92; }
.feature .in { position:relative; padding:28px; }
.feature h1, .feature h2 { font-size:30px; line-height:1.22; margin:12px 0 9px; max-width:560px; color:#fff; }
.feature p { color:#dbeafe; line-height:1.6; font-size:15.5px; max-width:560px; }
.chip { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.5px; padding:5px 11px; border-radius:20px; color:#fff; background:#2563eb; text-transform:uppercase; }
.chip.ai { background:#7c3aed; } .chip.howto { background:#059669; } .chip.light { background:#fff; color:#1d4ed8; }
.side { display:grid; gap:16px; }
.mini { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:20px; }
.mini h3 { font-size:17.5px; line-height:1.35; margin:10px 0 7px; }
.mini h3 a { color:#0f172a; text-decoration:none; }
.mini p { color:#64748b; font-size:14px; line-height:1.55; }
.meta { color:#64748b; font-size:12.5px; margin-top:10px; font-weight:600; }
h2.sec { font-size:22px; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
h2.sec::after { content:""; flex:1; height:2px; background:#e2e8f0; border-radius:2px; }
.secsub { color:#64748b; margin-bottom:16px; font-size:15px; }
.posts { display:grid; grid-template-columns:repeat(auto-fill,minmax(315px,1fr)); gap:16px; margin-bottom:30px; }
.post { background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; }
.post .thumb { height:140px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#1e40af,#3b82f6); background-size:cover; background-position:center; }
.post .thumb.ai { background:linear-gradient(135deg,#5b21b6,#a78bfa); }
.post .thumb.howto { background:linear-gradient(135deg,#065f46,#34d399); }
.post .in { padding:17px 19px 19px; }
.post h3 { font-size:17px; line-height:1.4; margin:10px 0 7px; }
.post h3 a { color:#0f172a; text-decoration:none; }
.post p { color:#64748b; font-size:14px; line-height:1.55; }
.spot { background:#0f172a; border-radius:18px; padding:28px; color:#e2e8f0; display:grid; grid-template-columns:1fr 1.3fr; gap:26px; margin-bottom:30px; }
.spot h2 { color:#fff; font-size:23px; line-height:1.3; margin:12px 0 10px; }
.spot p { color:#94a3b8; line-height:1.65; font-size:15px; }
.spot ol { margin-left:19px; line-height:2; font-size:15.5px; }
.spot .btn { display:inline-block; margin-top:16px; background:#2563eb; color:#fff; text-decoration:none; font-weight:700; padding:11px 18px; border-radius:9px; }
.news { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:28px; text-align:center; margin-bottom:30px; }
.news h2 { font-size:22px; margin-bottom:7px; }
.news p { color:#64748b; font-size:15px; }
.news .row { margin-top:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.news input { padding:12px 14px; border:1.5px solid #cbd5e1; border-radius:10px; font-size:15px; min-width:260px; }
.news .btn { background:#2563eb; color:#fff; border:0; font-weight:700; padding:12px 20px; border-radius:10px; font-size:15px; cursor:pointer; }
footer.sitef { background:#0f172a; color:#94a3b8; padding:32px 20px 38px; text-align:center; font-size:14px; line-height:2.1; margin-top:10px; }
footer.sitef .flogo { color:#fff; font-size:21px; font-weight:800; }
footer.sitef .flogo span { color:#60a5fa; }
footer.sitef a { color:#cbd5e1; text-decoration:none; font-weight:600; margin:0 9px; }
.article { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:34px; margin-bottom:30px; }
.article h1 { font-size:32px; line-height:1.25; margin:12px 0 10px; }
.article .feat { width:100%; border-radius:12px; margin:18px 0; }
.article .content { line-height:1.8; font-size:17px; color:#1e293b; }
.article .content p { margin-bottom:16px; }
.article .content h2, .article .content h3 { margin:24px 0 10px; line-height:1.35; }
.article .content img { max-width:100%; height:auto; border-radius:10px; }
.postnav { display:flex; justify-content:space-between; gap:12px; margin-bottom:30px; font-weight:600; }
@media (max-width:820px){ .hero, .spot { grid-template-columns:1fr; } .feature { min-height:280px; } .article { padding:22px; } }