/* blog-shared.css — shared styles for MakeMyCVNow blog/guide pages */
/* Matches the existing cv-builder-guide.html style for visual consistency */

.lang-switcher{display:inline-flex;width:64px;height:42px;align-items:center;position:relative}
#nav-auth-area{display:inline-flex;width:auto;min-width:64px;height:42px;align-items:center;justify-content:flex-end;position:relative}
.nav-actions{display:flex;align-items:center;gap:10px;position:relative;overflow:visible}
html{scrollbar-gutter:stable}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:linear-gradient(180deg,#f7f9fd,#eef3f9);color:#0f172a;min-height:100vh}
a{text-decoration:none;color:inherit}

.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

/* Hero */
.guide-hero{padding:60px 0 48px;text-align:center;max-width:780px;margin:0 auto}
.guide-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(99,91,255,.08);border:1px solid rgba(99,91,255,.16);font-size:12px;font-weight:700;color:#4f46e5;margin-bottom:20px}
.guide-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(30px,4.5vw,48px);font-weight:900;letter-spacing:-.04em;color:#081a4b;margin-bottom:14px;line-height:1.1}
.guide-hero h1 span{background:linear-gradient(135deg,#635bff,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.guide-hero p{font-size:17px;color:#667085;line-height:1.75;margin:0 auto 32px}

/* TOC */
.toc{max-width:800px;margin:0 auto 56px;background:rgba(255,255,255,.85);border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:28px 32px}
.toc-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:#081a4b;margin-bottom:14px}
.toc-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;list-style:none;padding:0}
.toc-list a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#526071;padding:8px 0;transition:.16s}
.toc-list a:hover{color:#635bff}
.toc-num{width:24px;height:24px;border-radius:6px;background:rgba(99,91,255,.08);color:#635bff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Sections */
.guide-content{max-width:800px;margin:0 auto;padding-bottom:80px}
.guide-section{margin-bottom:48px}
.guide-section h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:900;color:#081a4b;margin-bottom:16px;letter-spacing:-.03em;padding-top:24px;border-top:1px solid rgba(148,163,184,.14)}
.guide-section h3{font-size:18px;font-weight:700;color:#334155;margin:20px 0 10px}
.guide-section h4{font-size:16px;font-weight:700;color:#334155;margin:16px 0 8px}
.guide-section p{font-size:15px;line-height:1.85;color:#475569;margin-bottom:14px}
.guide-section ul,.guide-section ol{padding-left:24px;margin-bottom:16px}
.guide-section li{font-size:15px;line-height:1.8;color:#475569;margin-bottom:8px}
.guide-section strong{color:#334155}
.guide-section em{color:#526071}
.guide-section a{color:#635bff;font-weight:600}
.guide-section a:hover{text-decoration:underline}

/* Tables */
.guide-section table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.guide-section th{background:rgba(99,91,255,.06);color:#081a4b;font-weight:700;padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid rgba(148,163,184,.18)}
.guide-section td{padding:11px 14px;border-bottom:1px solid rgba(148,163,184,.10);color:#475569;font-size:13px}
.guide-section tr:last-child td{border-bottom:none}
.guide-section tr:nth-child(even) td{background:rgba(248,250,252,.5)}

/* Tip / Warning / Example boxes */
.tip-box{background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2);border-radius:14px;padding:18px 22px;margin:18px 0}
.tip-box p{color:#065f46;margin-bottom:0;font-size:14px;line-height:1.7}
.tip-box strong{color:#047857}

.warn-box{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.22);border-radius:14px;padding:18px 22px;margin:18px 0}
.warn-box p{color:#92400e;margin-bottom:0;font-size:14px;line-height:1.7}
.warn-box strong{color:#b45309}

.example-box{background:rgba(99,91,255,.04);border:1px solid rgba(99,91,255,.14);border-radius:14px;padding:18px 22px;margin:18px 0}
.example-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#635bff;margin-bottom:10px}
.example-bad{color:#dc2626;font-size:14px;line-height:1.7;margin-bottom:6px}
.example-good{color:#059669;font-size:14px;line-height:1.7;margin-bottom:6px}

.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;overflow-x:auto;margin:14px 0}

/* CTA card */
.cta-card{background:linear-gradient(135deg,rgba(99,91,255,.06),rgba(168,85,247,.06));border:1px solid rgba(99,91,255,.18);border-radius:18px;padding:28px 32px;margin:32px 0;text-align:center}
.cta-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:900;color:#081a4b;margin-bottom:10px}
.cta-card p{font-size:15px;color:#526071;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 24px;border-radius:12px;border:none;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:.2s;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#635bff,#8b5cf6);color:#fff;box-shadow:0 12px 30px rgba(99,91,255,.24)}
.btn-outline{color:#1e293b;background:rgba(255,255,255,.7);border:1px solid #d7dfeb}
.btn-outline:hover{background:#fff}

/* Mobile */
@media (max-width:720px){
  .toc-list{grid-template-columns:1fr}
  .guide-hero{padding:36px 0 28px}
  .guide-section h2{font-size:22px}
  .guide-section h3{font-size:16px}
}