/*
Theme Name: AI Skills Daily
Theme URI: https://lightsteelblue-gerbil-656902.hostingersite.com
Author: Victor Tutu-Biaw
Description: A monetization-ready blog theme for AI skills, daily automations, AI news and AI jobs. Includes AdSense ad slots, affiliate CTA boxes and category tabs.
Version: 1.0
Text Domain: ai-skills-daily
*/

:root{
  --bg:#faf9f6; --card:#fff; --ink:#1a1a1a; --muted:#6b6b6b;
  --accent:#5b4fe8; --accent-ink:#fff; --line:#e8e6e0; --tag:#eef0ff;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55;}
a{color:inherit;}
header.site-header{padding:20px 0 16px;border-bottom:1px solid var(--line);}
.wrap{max-width:820px;margin:0 auto;padding:0 20px;}
.brand{font-weight:800;font-size:1.4rem;display:flex;align-items:center;gap:8px;text-decoration:none;}
nav.main-nav ul{list-style:none;display:flex;gap:18px;margin:10px 0 0;padding:0;font-size:.9rem;color:var(--muted);flex-wrap:wrap;}
nav.main-nav a{text-decoration:none;color:inherit;}
.hero{padding:40px 0 20px;}
.hero h1{font-size:2rem;margin:0 0 10px;}
.hero p{color:var(--muted);max-width:60ch;}
.ad-slot{background:var(--tag);border:1px dashed var(--accent);border-radius:10px;padding:14px 16px;font-size:.8rem;color:var(--muted);text-align:center;margin:22px 0;overflow:hidden;}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px;}
.post-card .tag{display:inline-block;background:var(--tag);color:var(--accent);font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:99px;margin-bottom:10px;}
.post-card h2{margin:0 0 8px;font-size:1.25rem;}
.post-card h2 a{text-decoration:none;}
.post-card p{color:var(--muted);margin:0 0 14px;}
.affiliate-box{background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:14px 16px;font-size:.9rem;}
.affiliate-box a{color:var(--accent-ink);font-weight:600;}
.newsletter{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center;margin:30px 0;}
.newsletter input{padding:10px 12px;border-radius:8px;border:1px solid var(--line);width:60%;max-width:260px;}
.newsletter button{padding:10px 16px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:600;margin-left:6px;}
.site-footer{text-align:center;color:var(--muted);font-size:.8rem;padding:30px 0 40px;}
.single-post-content{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:20px;}
.single-post-content img{max-width:100%;height:auto;border-radius:8px;}
@media(max-width:480px){.newsletter input{width:100%;margin-bottom:8px;}.newsletter button{margin-left:0;width:100%;}}

.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;}
.cat-tabs a{background:var(--tag);color:var(--accent);font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:99px;text-decoration:none;}
.cat-tabs a:hover{background:var(--accent);color:var(--accent-ink);}
.archive-title{font-size:1.5rem;margin:30px 0 10px;}
.post-thumb{display:block;margin:-6px -6px 14px;}
.post-thumb img{display:block;width:100%;height:auto;border-radius:10px;}
.single-post-content h2{margin-top:1.6em;}
.single-post-content p,.single-post-content li{line-height:1.7;}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);}
.lang-switch button{background:none;border:1px solid transparent;border-radius:6px;padding:4px 8px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;}
.lang-switch button:hover{color:var(--accent);}
.lang-switch button.active{background:var(--tag);color:var(--accent);border-color:var(--accent);}
body{top:0 !important;position:static !important;min-height:0 !important;}
iframe.skiptranslate,.goog-te-banner-frame.skiptranslate{display:none !important;}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important;}
.goog-text-highlight{background:none !important;box-shadow:none !important;}

/* --- post layout --- */
.post-hero{display:block;width:100%;height:auto;border-radius:12px;margin:4px 0 22px;}
.single-post-content h1{font-size:1.9rem;line-height:1.2;margin:6px 0 16px;}
.single-post-content h2{font-size:1.25rem;margin:1.8em 0 .5em;}
.tldr{background:var(--tag);border-left:4px solid var(--accent);padding:14px 16px;border-radius:8px;margin:0 0 24px;}
.tldr strong{display:block;color:var(--accent);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:14px 0 8px;}
.card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.card .ic{display:block;font-size:1.5rem;line-height:1;margin-bottom:6px;}
.card b{display:block;margin-bottom:3px;}
.card span.d{display:block;color:var(--muted);font-size:.92rem;line-height:1.5;}
.card em{display:block;margin-top:8px;font-size:.82rem;font-style:normal;color:var(--accent);font-weight:600;}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;}
.compare>div{padding:14px 16px;border-radius:12px;font-size:.95rem;line-height:1.55;}
.compare .weak{background:#fef2f2;border:1px solid #fecaca;}
.compare .strong{background:#ecfdf5;border:1px solid #a7f3d0;}
.compare b{display:block;margin-bottom:4px;}
.tip{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin:20px 0;}
.prompt-box{background:#1e1b4b;color:#e0e7ff;border-radius:10px;padding:14px 16px;font-size:.92rem;line-height:1.55;margin:12px 0;}
.steps{list-style:none;counter-reset:s;padding:0;margin:14px 0;}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 56px;margin-bottom:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;text-align:center;line-height:30px;}
.steps li b{display:block;}
@media(max-width:560px){.compare{grid-template-columns:1fr;}}
