/* socialmed.ai dark/gold theme override for The Build article pages.
   Keeps original text and diagrams, restyles the feel to match the main site. */

:root { --gold: #d4a857; }

/* Base */
body.bg-white { background: #050505 !important; color: rgba(255,255,255,0.82) !important; }

/* Headings */
h1, h2, h3, h4 { color: #ffffff; }

/* Text tones */
.text-gray-900, .text-black { color: #ffffff !important; }
.text-gray-800 { color: rgba(255,255,255,0.85) !important; }
.text-gray-700 { color: rgba(255,255,255,0.75) !important; }
.text-gray-600 { color: rgba(255,255,255,0.65) !important; }
.text-gray-500 { color: rgba(255,255,255,0.5) !important; }
.text-gray-400 { color: rgba(255,255,255,0.45) !important; }

/* Accent text colors -> gold family (leave SVG internals alone) */
.text-blue-600, .text-blue-700, .text-blue-800,
.text-green-600, .text-green-700, .text-green-800,
.text-purple-600, .text-purple-700, .text-purple-800,
.text-orange-600, .text-orange-700, .text-red-600, .text-red-700,
.text-yellow-600, .text-yellow-700, .text-indigo-600, .text-teal-600 { color: var(--gold) !important; }

/* White content panels inside articles -> dark panels (body stays handled above) */
main .bg-white, article .bg-white, section .bg-white, div.bg-white {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(212,168,87,0.2);
}

/* Light panel backgrounds -> dark panels with faint gold edge */
.bg-gray-50, .bg-gray-100, .bg-gray-200,
.bg-blue-50, .bg-blue-100,
.bg-green-50, .bg-green-100,
.bg-purple-50, .bg-purple-100,
.bg-yellow-50, .bg-yellow-100,
.bg-orange-50, .bg-orange-100,
.bg-red-50, .bg-red-100,
.bg-indigo-50, .bg-teal-50, .bg-amber-50,
.bg-cyan-50, .bg-emerald-50, .bg-sky-50, .bg-slate-50 {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(212,168,87,0.2);
}

/* Gradient panels -> same dark panel */
[class*="bg-gradient-"] {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(212,168,87,0.2);
}

/* Colored left-border callouts -> gold */
.border-blue-500, .border-green-500, .border-purple-500, .border-red-500,
.border-yellow-500, .border-orange-500, .border-blue-400, .border-green-400,
.border-blue-600, .border-green-600, .border-teal-500, .border-cyan-500,
.border-indigo-500, .border-amber-500, .border-pink-500, .border-purple-400,
.border-gray-400, .border-gray-500, .border-gray-600 { border-color: var(--gold) !important; }

/* Neutral borders */
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: rgba(212,168,87,0.18) !important; }

/* Already-dark panels: keep dark, add gold edge */
.bg-gray-800, .bg-gray-900 { background: #0a0a0a !important; border: 1px solid rgba(212,168,87,0.25); }

/* Solid accent chips/bars used as small labels */
.bg-blue-500, .bg-blue-600, .bg-green-500, .bg-green-600,
.bg-purple-500, .bg-purple-600, .bg-red-500, .bg-yellow-500, .bg-orange-500 {
    background: var(--gold) !important;
    color: #000 !important;
}

/* Big CTA box at the bottom of articles */
.bg-black.text-white, section .bg-black {
    background: radial-gradient(ellipse at 50% 0%, rgba(212,168,87,0.14) 0%, #000 65%) !important;
    border: 1px solid rgba(212,168,87,0.45);
}
.bg-black .text-gray-300, .bg-black .text-gray-400 { color: rgba(255,255,255,0.7) !important; }
a.bg-white.text-black, .bg-black a.bg-white {
    background: var(--gold) !important;
    color: #000 !important;
    border: none;
    font-weight: 700;
}
a.bg-white.text-black:hover, .bg-black a.bg-white:hover { background: #c19a4b !important; }

/* Generic dark buttons -> gold */
a.bg-black.text-white, button.bg-black.text-white {
    background: var(--gold) !important;
    color: #000 !important;
    font-weight: 700;
}

/* Tables */
table { color: rgba(255,255,255,0.8); }
thead .bg-gray-50, th.bg-gray-50 { background: rgba(212,168,87,0.12) !important; }
tbody tr.bg-white { background: transparent !important; }

/* Footer */
footer.bg-gray-50 { background: #000 !important; border-top: 1px solid rgba(212,168,87,0.2) !important; }

/* Links inside article body */
article a:not([class]) { color: var(--gold); }

/* Category pill in the article header */
.bg-gray-100.text-gray-800 {
    background: rgba(212,168,87,0.12) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(212,168,87,0.35);
}

/* Keep SVG diagrams readable: give full-width diagrams a light card so their
   original light fills and dark labels still work on the dark page */
svg.w-full {
    background: #f5f2ea;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}
svg.w-full text:not([fill]) { fill: #1f2430; }

/* Horizontal rules */
hr { border-color: rgba(212,168,87,0.2); }

/* Extra light panel colors -> dark panels */
.bg-pink-50, .bg-pink-100, .bg-rose-50, .bg-rose-100,
.bg-violet-50, .bg-fuchsia-50, .bg-lime-50 {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(212,168,87,0.2);
}

/* Extra accent text colors -> gold */
.text-pink-600, .text-pink-700, .text-rose-600, .text-rose-700,
.text-amber-600, .text-amber-700, .text-cyan-600, .text-cyan-700,
.text-emerald-600, .text-emerald-700, .text-lime-600, .text-orange-500,
.text-indigo-700, .text-teal-700, .text-violet-600,
.text-pink-800, .text-rose-800, .text-amber-800, .text-cyan-800,
.text-emerald-800, .text-orange-800, .text-red-800, .text-teal-800 { color: var(--gold) !important; }

/* Gray/odd-colored headings -> gold like the rest */
h2[class*="text-gray-"], h3[class*="text-gray-"], h4[class*="text-gray-"],
h2[class*="text-slate-"], h3[class*="text-slate-"], h4[class*="text-slate-"],
h3[class*="text-zinc-"], h4[class*="text-zinc-"],
.text-yellow-800, .text-yellow-900 { color: var(--gold) !important; }

/* Bold stat numbers in gray/orange/etc -> gold */
.font-bold.text-gray-600, .font-bold.text-gray-700, .font-bold.text-gray-800,
.font-bold.text-orange-600, .font-bold.text-orange-700 { color: var(--gold) !important; }

/* Numbered step circles -> uniform gold */
.rounded-full.bg-blue-600, .rounded-full.bg-green-600, .rounded-full.bg-orange-600,
.rounded-full.bg-gray-600, .rounded-full.bg-purple-600, .rounded-full.bg-red-600,
.rounded-full.bg-teal-600, .rounded-full.bg-indigo-600 {
    background: var(--gold) !important;
    color: #000 !important;
}

/* Custom diagram/matrix containers defined in per-article <style> blocks:
   keep them as light cards so their colorful inner graphics stay readable,
   but make their titles/captions dark instead of white */
.resource-flow, .optimization-matrix, .material-matrix, .strategy-matrix,
.feature-matrix, .bim-diagram, .detection-diagram, .drone-diagram,
.infrastructure-diagram, .market-diagram, .ml-diagram, .quality-diagram,
.robot-diagram, .roi-diagram, .safety-diagram, .scaling-diagram,
.schedule-diagram, .supply-chain-diagram, .training-diagram, .waste-diagram,
.workflow-diagram, .roadmap-timeline {
    background: #f5f2ea !important;
    border: 1px solid rgba(212,168,87,0.35);
}
.resource-flow h3, .optimization-matrix h3, .material-matrix h3, .strategy-matrix h3,
.feature-matrix h3, .bim-diagram h3, .detection-diagram h3, .drone-diagram h3,
.infrastructure-diagram h3, .market-diagram h3, .ml-diagram h3, .quality-diagram h3,
.robot-diagram h3, .roi-diagram h3, .safety-diagram h3, .scaling-diagram h3,
.schedule-diagram h3, .supply-chain-diagram h3, .training-diagram h3, .waste-diagram h3,
.workflow-diagram h3, .roadmap-timeline h3,
.resource-flow h4, .optimization-matrix h4, .material-matrix h4, .strategy-matrix h4,
.feature-matrix h4, .bim-diagram h4, .waste-diagram h4, .workflow-diagram h4 { color: #1f2430 !important; }
.resource-flow > .text-center p, .optimization-matrix > .text-center p,
.material-matrix > .text-center p, .strategy-matrix > .text-center p,
.feature-matrix > .text-center p, .bim-diagram > .text-center p,
.detection-diagram > .text-center p, .drone-diagram > .text-center p,
.infrastructure-diagram > .text-center p, .market-diagram > .text-center p,
.ml-diagram > .text-center p, .quality-diagram > .text-center p,
.robot-diagram > .text-center p, .roi-diagram > .text-center p,
.safety-diagram > .text-center p, .scaling-diagram > .text-center p,
.schedule-diagram > .text-center p, .supply-chain-diagram > .text-center p,
.training-diagram > .text-center p, .waste-diagram > .text-center p,
.workflow-diagram > .text-center p, .roadmap-timeline > .text-center p { color: #4b5563 !important; }

/* Gradient stat numbers -> solid gold */
.stat-num, .gradient-text, .tax-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* Light tag chips -> gold chips */
[class*="tag-"] {
    background: rgba(212,168,87,0.12) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(212,168,87,0.35);
}