/* Blog Shared CSS */
:root { --primary:#1e3a5f; --accent:#00b4d8; --gold:#f4a020; --light:#f0f6ff; --gray:#64748b; --white:#fff; --border:#e0eaf5; --radius:14px; --font-head:'Montserrat',sans-serif; --font-body:'Open Sans',sans-serif; }
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-body); color:#1a2340; background:var(--white); overflow-x:hidden; line-height:1.75; }
img { max-width:100%; height:auto; }
a { text-decoration:none; color:var(--accent); }
a:hover { text-decoration:underline; }
.container { max-width:860px; margin:0 auto; padding:0 20px; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:800; line-height:1.25; }
.navbar { background:var(--primary); padding:16px 0; position:sticky; top:0; z-index:100; box-shadow:0 2px 20px rgba(0,0,0,0.15); }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:var(--font-head); font-weight:800; font-size:22px; color:#fff; text-decoration:none; }
.logo span { color:var(--accent); }
.nav-cta { background:linear-gradient(135deg,var(--gold),#e8870a); color:#fff; font-family:var(--font-head); font-weight:700; padding:10px 24px; border-radius:50px; font-size:14px; }
.post-hero { background:linear-gradient(160deg,var(--primary) 0%,#2563a8 100%); color:#fff; padding:80px 0 60px; }
.post-hero .container { max-width:860px; }
.blog-cat { display:inline-block; background:rgba(255,255,255,0.15); color:#fff; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:2px; padding:5px 14px; border-radius:50px; margin-bottom:16px; text-transform:uppercase; }
.post-hero h1 { font-size:clamp(24px,4vw,42px); margin-bottom:14px; line-height:1.2; }
.post-meta { font-size:14px; opacity:0.75; }
.post-content { padding:60px 0 80px; }
.post-content h2 { font-size:clamp(20px,3vw,28px); margin:40px 0 16px; color:var(--primary); padding-top:10px; border-top:2px solid var(--border); }
.post-content h3 { font-size:clamp(17px,2.5vw,22px); margin:28px 0 12px; color:var(--primary); }
.post-content p { margin-bottom:18px; color:#374151; font-size:16px; }
.post-content ul, .post-content ol { padding-left:24px; margin-bottom:18px; }
.post-content li { margin-bottom:8px; color:#374151; font-size:16px; }
.toc { background:var(--light); border-radius:var(--radius); padding:24px 28px; margin-bottom:40px; border:1px solid var(--border); }
.toc h3 { font-size:16px; margin-bottom:12px; color:var(--primary); }
.toc ul { padding-left:20px; }
.toc li { margin-bottom:6px; }
.toc a { color:var(--accent); font-size:15px; }
.highlight-box { border-radius:var(--radius); padding:22px 24px; margin:28px 0; }
.highlight-box.green { background:#dcfce7; border-left:4px solid #16a34a; }
.highlight-box.blue { background:#dbeafe; border-left:4px solid var(--primary); }
.highlight-box strong { color:var(--primary); }
.cta-box { background:linear-gradient(135deg,var(--primary),#2563a8); border-radius:var(--radius); padding:36px 32px; text-align:center; margin:40px 0; }
.cta-box h3 { color:#fff; font-size:22px; margin-bottom:12px; }
.cta-box p { color:rgba(255,255,255,0.85); font-size:16px; margin-bottom:20px; }
.btn-cta { background:linear-gradient(135deg,var(--gold),#e8870a); color:#fff; font-family:var(--font-head); font-weight:700; padding:16px 40px; border-radius:50px; font-size:16px; display:inline-block; box-shadow:0 4px 20px rgba(244,160,32,0.4); text-decoration:none; }
.btn-cta:hover { transform:scale(1.05); text-decoration:none; }
.internal-links { background:var(--light); border-radius:var(--radius); padding:24px 28px; margin-top:40px; border:1px solid var(--border); }
.internal-links h3 { font-size:16px; margin-bottom:14px; color:var(--primary); }
.internal-links ul { padding-left:20px; }
.internal-links li { margin-bottom:8px; }
.internal-links a { color:var(--accent); font-size:15px; }
.footer { background:#0f2448; color:rgba(255,255,255,0.6); padding:30px 0; text-align:center; font-size:13px; }
.footer a { color:rgba(255,255,255,0.7); margin:0 6px; }
.footer a:hover { color:var(--accent); }
@media(max-width:767px) { .post-hero { padding:60px 0 40px; } .post-content { padding:40px 0 60px; } }