/* CVEasy AI blog shared stylesheet.
   Replaces the per-post Tailwind CDN runtime + embedded theme blocks.
   Posts link this after the Google Fonts <link>. Custom per-post styles
   (layer-chip, stage-card, toc, ...) stay embedded in their own posts.
   Design system: Newsreader display / Manrope body / JetBrains Mono,
   paper-rust palette. See blog/_base.html for the authoring rules. */

:root {
  --display: 'Newsreader', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --ink: #171412; --ink-75: #4A4740; --ink-50: #7C7870; --ink-25: #B8B4AB;
  --paper: #FAF9F5; --surface: #F0EDE6; --border: #E5E1D8;
  --rust: #C74B28; --rust-hover: #A83D1E; --rust-soft: #FCF0EB;
  --teal: #1B7D5E; --gold: #C48E08; --dark: #1A1815; --dark-mid: #242220; --dark-border: #3A3632;
  --nav-h: 64px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
}

/* ── Preflight (replaces Tailwind's reset, only what posts rely on) ── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border); margin: 0; padding: 0; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
html { line-height: 1.5; }
body { background: var(--paper) !important; color: var(--ink) !important; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; }
table { border-collapse: collapse; }
code, pre { font-family: var(--mono); }
.mono { font-family: var(--mono); }

/* ── Theme components ── */
.glass { background: rgba(23,20,18,0.03) !important; backdrop-filter: blur(16px); border: 1px solid var(--border) !important; }
.gradient-text { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--rust) !important; background-clip: unset !important; font-weight: 800; }

h1 { font-family: var(--display) !important; font-weight: 600 !important; color: var(--ink) !important; font-size: clamp(1.9rem, 3.8vw, 2.7rem) !important; line-height: 1.22 !important; letter-spacing: -0.01em; }

.prose h2 { color: var(--ink) !important; font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border) !important; }
.prose h3 { color: var(--ink) !important; font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 1.75rem 0 0.75rem; }
.prose p { color: var(--ink-75) !important; line-height: 1.85; margin-bottom: 1.25rem; }
.prose strong { color: var(--ink) !important; font-weight: 600; }
.prose em { color: var(--rust) !important; font-style: italic; }
.prose ul, .prose ol { color: var(--ink-75) !important; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul li, .prose ol li { margin-bottom: 0.5rem; line-height: 1.75; }
.prose code { background: var(--rust-soft) !important; color: var(--rust) !important; padding: 0.15em 0.45em; border-radius: 4px; font-family: var(--mono); font-size: 0.875em; }
.prose pre { background: var(--dark) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 12px; padding: 1.25rem 1.5rem; overflow-x: auto; margin: 1.5rem 0; }
.prose pre code { background: none !important; color: #e2e8f0 !important; padding: 0; font-size: 0.8rem; line-height: 1.6; }
.prose blockquote { border-left: 3px solid var(--rust) !important; padding: 0.5rem 0 0.5rem 1.25rem; color: var(--ink-50) !important; font-style: italic; margin: 1.75rem 0; background: var(--rust-soft) !important; border-radius: 0 8px 8px 0; }
.prose a { color: var(--rust) !important; text-decoration: underline; text-decoration-color: rgba(199,75,40,0.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--rust); }
.prose table { width: 100%; margin: 1.5rem 0; font-size: 0.9rem; }
.prose th { text-align: left; color: var(--ink); border-bottom: 2px solid var(--border); padding: 0.5rem 0.75rem; }
.prose td { color: var(--ink-75); border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem; }

.callout { background: rgba(199,75,40,0.06) !important; border: 1px solid rgba(199,75,40,0.15) !important; border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.callout strong { color: var(--rust) !important; }
.callout span, .callout p { color: var(--ink-75) !important; }
.callout-warning { background: rgba(196,142,8,0.06) !important; border-color: rgba(196,142,8,0.15) !important; }
.callout-warning strong { color: var(--gold) !important; }
.callout-success { background: rgba(27,125,94,0.06) !important; border-color: rgba(27,125,94,0.15) !important; }
.callout-success strong { color: var(--teal) !important; }
.callout-success a { color: var(--rust) !important; }

.tag-blue, .tag-purple, .tag-green, .tag-orange, .tag-red { border: 1px solid var(--border) !important; }
.tag-blue { background: var(--rust-soft) !important; color: var(--rust) !important; border-color: rgba(199,75,40,0.2) !important; }
.tag-purple { background: rgba(139,92,246,0.06) !important; color: #7C3AED !important; border-color: rgba(139,92,246,0.15) !important; }
.tag-green { background: rgba(27,125,94,0.06) !important; color: var(--teal) !important; border-color: rgba(27,125,94,0.15) !important; }
.tag-orange { background: rgba(196,142,8,0.06) !important; color: var(--gold) !important; border-color: rgba(196,142,8,0.15) !important; }
.tag-red { background: rgba(239,68,68,0.06) !important; color: #DC2626 !important; border-color: rgba(239,68,68,0.15) !important; }

/* ── Nav / footer / container (shared chrome) ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:rgba(250,249,245,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}.nav.scrolled{border-bottom-color:var(--border);background:rgba(250,249,245,0.96)}.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}.nav-logo{font-family:var(--sans);font-weight:800;font-size:1.125rem;color:var(--ink);letter-spacing:-0.02em}.nav-logo span{color:var(--rust)}.nav-links{display:flex;align-items:center;gap:32px}.nav-link{font-size:0.875rem;font-weight:500;color:var(--ink-75);position:relative;transition:color .2s}.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--rust);transition:width .3s ease}.nav-link:hover{color:var(--ink)}.nav-link:hover::after{width:100%}.nav-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:var(--rust);color:#fff;font-size:0.8125rem;font-weight:600;border-radius:var(--radius-md);transition:background .2s,transform .15s}.nav-cta:hover{background:var(--rust-hover);transform:translateY(-1px)}.nav-toggle{display:none;flex-direction:column;gap:5px;width:24px;padding:0}.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem)}
.footer{background:var(--dark);color:rgba(255,255,255,0.5);padding:64px 0 40px;border-top:1px solid var(--dark-border)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;margin-bottom:48px}.footer-brand{font-family:var(--sans);font-weight:800;font-size:1rem;color:#fff;margin-bottom:12px}.footer-brand span{color:var(--rust)}.footer-tagline{font-size:0.8125rem;color:rgba(255,255,255,0.35);line-height:1.6}.footer-heading{font-family:var(--mono);font-size:0.625rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:16px}.footer-links{list-style:none}.footer-links li{margin-bottom:8px}.footer-links a{font-size:0.8125rem;color:rgba(255,255,255,0.45);transition:color .2s}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--dark-border);font-size:0.75rem;color:rgba(255,255,255,0.25)}

/* ── Legacy dark-theme inline styles, remapped to the light theme ── */
[style*="background:#0a0e1a"], [style*="background: #0a0e1a"],
[style*="background:#0d1220"], [style*="background: #0d1220"],
[style*="background:#080c16"], [style*="background: #080c16"],
[style*="background:#0b0b14"], [style*="background: #0b0b14"] { background: var(--paper) !important; }
[style*="background: linear-gradient(180deg, #0a0e1a"],
[style*="background:linear-gradient(180deg,#0a0e1a"],
[style*="background: linear-gradient(180deg, #0d1220"] { background: var(--paper) !important; }
[style*="background: linear-gradient(135deg,#1a0a0a"],
[style*="background:linear-gradient(135deg,#1a0a0a"] { background: var(--surface) !important; }

/* ── Legacy Tailwind color classes, light-theme values ── */
.text-white, .text-gray-100 { color: var(--ink) !important; }
.text-gray-200, .text-gray-300, .text-gray-700 { color: var(--ink-75) !important; }
.text-gray-400, .text-gray-500 { color: var(--ink-50) !important; }
.text-gray-600 { color: var(--ink-25) !important; }
.text-red-400 { color: #DC2626 !important; }
.text-purple-400 { color: #7C3AED !important; }
.text-blue-400, .text-blue-300 { color: var(--rust) !important; }
.text-green-400, .text-green-300, .text-teal { color: var(--teal) !important; }
.text-yellow-400, .text-yellow-300, .text-orange-400, .text-orange-300 { color: var(--gold) !important; }
.text-rust { color: var(--rust) !important; }
.text-ink { color: var(--ink) !important; }
.hover\:text-ink:hover { color: var(--ink) !important; }
.bg-white { background: var(--paper) !important; }
.bg-blue-600, .bg-rust, .bg-gradient-to-r { background: var(--rust) !important; color: #fff !important; }
.bg-blue-700, .hover\:bg-blue-700:hover, .hover\:bg-rust\/90:hover { background: var(--rust-hover) !important; }
.bg-gradient-to-r:hover { background: var(--rust-hover) !important; }
.bg-gradient-to-r *, .bg-blue-600 * { color: inherit !important; }
.bg-rust\/5 { background: rgba(199,75,40,0.05) !important; }
.hover\:bg-white\/10:hover, .hover\:bg-white\/8:hover { background: rgba(23,20,18,0.04) !important; }
.border-white\/5, .border-white\/7, .border-white\/8, .border-white\/10, .border-gray-200 { border-color: var(--border) !important; }
.border-rust\/15 { border-color: rgba(199,75,40,0.15) !important; }
.glass.rounded-xl { background: var(--paper) !important; border: 1px solid var(--border) !important; }
.glass.rounded-xl:hover { background: var(--surface) !important; }
.glass.rounded-xl .text-white, .glass.rounded-xl .font-semibold { color: var(--ink) !important; }
nav[id="site-nav"].scrolled { border-bottom-color: var(--border) !important; background: rgba(250,249,245,0.96) !important; }

/* ── Utility classes (the Tailwind subset blog posts actually use) ── */
.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}
.flex{display:flex}.grid{display:grid}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.space-y-2>*+*{margin-top:0.5rem}
.divide-x>*+*{border-left-width:1px}.divide-white\/8>*+*{border-color:var(--border)}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}
.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-28{padding-top:7rem}.pb-12{padding-bottom:3rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}
.w-8{width:2rem}.w-full{width:100%}
.h-8{height:2rem}.h-16{height:4rem}.h-72{height:18rem}.h-full{height:100%}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.object-cover{object-fit:cover}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}
.border{border-width:1px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}
.opacity-60{opacity:0.6}
.text-left{text-align:left}.text-center{text-align:center}
.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.font-mono{font-family:var(--mono)}.font-display{font-family:var(--display)}
.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.line-through{text-decoration:line-through}
.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
.transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s}

@media (min-width: 640px) {
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width: 768px) {
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:h-96{height:24rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
}

/* ── Mobile nav ── */
@media (max-width: 640px) {
  .nav-links-desktop { display: none !important; }
  .nav-links{display:none!important}
  .nav-links.open{display:flex!important;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:9999;background:#1A1714;box-shadow:0 8px 40px rgba(0,0,0,0.5);flex-direction:column;align-items:center;justify-content:center;gap:32px}
  .nav-links.open .nav-link{color:rgba(255,255,255,0.9)!important;font-size:1.125rem}
  .nav-links.open .nav-link:hover{color:#fff!important}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}