/*
 * Journal posts: pastel layer for stored post HTML.
 *
 * Most of the posts in blog_posts/ were written for a black page: dark
 * boxes, gold and jewel-coloured text, gold buttons, page-wide body and
 * scrollbar rules. The stored HTML is never edited. blog.php loads this file
 * after each post's own <style>, and every rule is scoped to .kgma-post-body
 * (the wrapper around the stored body) except the page-wide resets at the top.
 * assets/js/kgma-contrast.js still runs afterwards as a safety net.
 *
 * Only palette colours (src/input.css --kgma-*):
 *   White #FFFFFF  Cream #FFF8F0  Blush #FCE8EF  Sky #E4F0FB  Mint #E2F4EA
 *   Ink #1F1B24  Ink-soft #4A4453  Rose #A8264F / #861B3E  Blue #1D5C9E / #16487D
 *   Green #1F6B45  Control #6E6676  Divider #E3DCE6
 */

/* ── Page: posts set body, html and scrollbar colours page-wide ── */
html,
body {
  background-color: #FFFFFF !important;
  color: #1F1B24 !important;
}
::-webkit-scrollbar-track { background: #FFF8F0 !important; }
::-webkit-scrollbar-thumb { background: #6E6676 !important; }
::-webkit-scrollbar-thumb:hover { background: #4A4453 !important; }
.noise-overlay { display: none !important; }

/* Template posts colour headings, icons, bullets and borders with these. */
.kgma-post-body,
.kgma-post-body .kgma-artifact {
  --kgma-accent: #A8264F;
  --kgma-accent-dark: #861B3E;
  --kgma-accent-ink: #A8264F;
  --kgma-accent-rgb: 110, 102, 118;
}

.kgma-post-body {
  color: #1F1B24;
}
.kgma-post-body * {
  text-shadow: none !important;
}
.kgma-post-body [class*="transparenttextures"] {
  background-image: none !important;
}

/* ── Boxes: dark, black-tinted and see-through-white boxes become Sky ── */
.kgma-post-body :is(
  [class*="bg-black"], [class*="bg-lux-black"], [class*="bg-luxury-black"], [class*="bg-luxury-dark"],
  [class*="bg-luxury-charcoal"], [class*="bg-lux-charcoal"], [class*="bg-lux-obsidian"], [class*="bg-obsidian"],
  [class*="bg-stone-6"], [class*="bg-stone-7"], [class*="bg-stone-8"], [class*="bg-stone-9"],
  [class*="bg-neutral-6"], [class*="bg-neutral-7"], [class*="bg-neutral-8"], [class*="bg-neutral-9"],
  [class*="bg-gray-6"], [class*="bg-gray-7"], [class*="bg-gray-8"], [class*="bg-gray-9"],
  [class*="bg-zinc-6"], [class*="bg-zinc-7"], [class*="bg-zinc-8"], [class*="bg-zinc-9"],
  [class*="bg-slate-6"], [class*="bg-slate-7"], [class*="bg-slate-8"], [class*="bg-slate-9"],
  [class*="bg-[#0"], [class*="bg-[#1"], [class*="bg-[#2"], [class*="bg-[#3"], [class*="bg-[#4"],
  [class*="bg-white/"], [class*="bg-gem"],
  [class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-sapphire"], [class*="bg-lux-sapphire"], [class*="bg-gem-dark"],
  [class*="bg-indigo-"], [class*="bg-cyan-"], [class*="bg-purple-"], [class*="bg-violet-"],
  .glass-card, .glass-panel, .glass
) {
  background-color: #E4F0FB !important;
  color: #1F1B24 !important;
}
.kgma-post-body :is(.glass-card, .glass-panel, .glass) {
  border-color: #E3DCE6 !important;
  box-shadow: none !important;
}

/* Gold, ruby and other warm boxes become Blush (callouts). */
.kgma-post-body :is(
  [class*="bg-lux-gold"], [class*="bg-luxury-gold"], [class*="bg-gold"], [class*="bg-gem-base"],
  [class*="bg-[#D4AF37]"], [class*="bg-[#d4af37]"],
  [class*="bg-lux-ruby"], [class*="bg-gem-ruby"], [class*="bg-gem-darkRuby"], [class*="bg-red-"], [class*="bg-rose-"],
  [class*="bg-pink-"], [class*="bg-orange-"], [class*="bg-amber-"], [class*="bg-yellow-"]
) {
  background-color: #FCE8EF !important;
  color: #1F1B24 !important;
}

/* Emerald and green boxes become Mint. */
.kgma-post-body :is(
  [class*="bg-gem-emerald"], [class*="bg-gem-main"], [class*="bg-gem-light"], [class*="bg-gem-deep"],
  [class*="bg-gem-darkEmerald"], [class*="bg-lux-emerald"], [class*="bg-[#34d399]"], [class*="bg-[#064e3b]"],
  [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"], [class*="bg-lime-"]
) {
  background-color: #E2F4EA !important;
  color: #1F1B24 !important;
}

/* Gradient fills and gold gradient headings: flat palette colour, no gradient. */
.kgma-post-body :is([class*="bg-gradient-"], [class*="bg-gold-gradient"], [class*="bg-luxury-gradient"], .gold-gradient, .emerald-gradient, .ruby-gradient, .sapphire-gradient) {
  background-image: none !important;
}
.kgma-post-body [class*="bg-gradient-"]:is(
  [class*="from-black"], [class*="from-lux-black"], [class*="from-luxury-black"], [class*="from-obsidian"],
  [class*="from-stone-6"], [class*="from-stone-7"], [class*="from-stone-8"], [class*="from-stone-9"],
  [class*="from-neutral-8"], [class*="from-neutral-9"], [class*="from-gray-8"], [class*="from-gray-9"],
  [class*="from-[#0"], [class*="from-[#1"], [class*="from-white/"],
  [class*="from-sky-"], [class*="from-blue-"], [class*="from-sapphire"], [class*="from-lux-sapphire"], [class*="from-indigo-"]
) {
  background-color: #E4F0FB !important;
  color: #1F1B24 !important;
}
.kgma-post-body [class*="bg-gradient-"]:is(
  [class*="from-lux-gold"], [class*="from-gold"], [class*="from-[#D4AF37]"], [class*="from-amber-"], [class*="from-yellow-"],
  [class*="from-lux-ruby"], [class*="from-red-"], [class*="from-rose-"], [class*="from-orange-"]
) {
  background-color: #FCE8EF !important;
  color: #1F1B24 !important;
}
.kgma-post-body [class*="bg-gradient-"]:is([class*="from-emerald-"], [class*="from-green-"], [class*="from-lux-emerald"], [class*="from-gem-"], [class*="from-teal-"]) {
  background-color: #E2F4EA !important;
  color: #1F1B24 !important;
}
.kgma-post-body :is([class*="bg-clip-text"], [class*="text-transparent"], [class*="text-gradient"]) {
  background-image: none !important;
  background-color: transparent !important;
  color: #1F1B24 !important;
  -webkit-text-fill-color: #1F1B24 !important;
}
.kgma-post-body [class*="bg-gradient-"][class*="via-"]:is([class*="h-px"], [class*="h-0.5"], [class*="h-[1px]"], [class*="w-px"]),
.kgma-post-body :is(.gold-divider, .ruby-divider, .emerald-divider, .divider-gold) {
  background: #E3DCE6 !important;
}
.kgma-post-body [class*="h-px"]:is([class*="bg-stone-"], [class*="bg-gray-"], [class*="bg-neutral-"], [class*="bg-zinc-"], [class*="bg-slate-"]) {
  background-color: #6E6676 !important;
}

/* Empty overlays over photos and cards: no tint at all. */
.kgma-post-body :is(
  [class*="absolute"][class*="inset-0"],
  [class*="absolute"][class*="w-full"][class*="h-full"],
  [class*="fixed"][class*="inset-0"],
  [class*="pointer-events-none"][class*="blur-"]
):empty {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Text: one ink for reading, palette accents for meaning ── */
.kgma-post-body :is(h1, h2, h3, h4, h5, h6) {
  color: #1F1B24 !important;
}
.kgma-post-body :is(
  [class*="text-white"], [class*="text-black"], [class*="text-lux-black"], [class*="text-luxury-black"],
  [class*="text-luxury-charcoal"], [class*="text-lux-white"], [class*="text-lux-silver"], [class*="text-lux-diamond"],
  [class*="text-stone-"], [class*="text-gray-"], [class*="text-neutral-"], [class*="text-zinc-"], [class*="text-slate-"],
  [class*="text-ink-body"], [class*="text-[#"],
  [class*="text-lux-gold"], [class*="text-luxury-gold"], [class*="text-gold"], [class*="text-gem-base"], [class*="text-champagne"],
  [class*="text-amber-"], [class*="text-yellow-"],
  [class*="text-sky-"], [class*="text-blue-"], [class*="text-sapphire"], [class*="text-lux-sapphire"], [class*="text-gem-dark"],
  [class*="text-indigo-"], [class*="text-cyan-"], [class*="text-purple-"], [class*="text-violet-"]
) {
  color: #1F1B24 !important;
}
.kgma-post-body :is(
  [class*="text-stone-5"], [class*="text-stone-6"], [class*="text-gray-5"], [class*="text-gray-6"],
  [class*="text-neutral-5"], [class*="text-neutral-6"], [class*="text-zinc-5"], [class*="text-zinc-6"],
  [class*="text-slate-5"], [class*="text-slate-6"], [class*="text-ink-meta"]
) {
  color: #4A4453 !important;
}
.kgma-post-body :is([class*="text-lux-ruby"], [class*="text-gem-ruby"], [class*="text-red-"], [class*="text-rose-"], [class*="text-pink-"], [class*="text-orange-"]) {
  color: #A8264F !important;
}
.kgma-post-body :is([class*="text-gem-emerald"], [class*="text-gem-main"], [class*="text-gem-light"], [class*="text-gem-deep"], [class*="text-lux-emerald"], [class*="text-emerald-"], [class*="text-green-"], [class*="text-teal-"], [class*="text-lime-"]) {
  color: #1F6B45 !important;
}
.kgma-post-body .title-highlight {
  color: #1F6B45 !important;
}
/* Icons that were gold or jewel-blue are rose; green ones stay green. */
.kgma-post-body :is(i, svg)[class*="fa-"]:is(
  [class*="text-lux-gold"], [class*="text-luxury-gold"], [class*="text-gold"], [class*="text-gem-base"], [class*="text-amber-"], [class*="text-yellow-"],
  [class*="text-sky-"], [class*="text-blue-"], [class*="text-sapphire"], [class*="text-lux-sapphire"], [class*="text-gem-dark"], [class*="text-indigo-"],
  [class*="text-cyan-"], [class*="text-purple-"], [class*="text-violet-"], [class*="text-white"], [class*="text-stone-"], [class*="text-[#"]
) {
  color: #A8264F !important;
}

/* ── Borders: decorative lines are Divider, accent bars are Control ── */
.kgma-post-body [class*="border-"] {
  border-color: #E3DCE6 !important;
}
.kgma-post-body :is([class*="border-l-2"], [class*="border-l-4"], [class*="border-l-8"]) {
  border-left-color: #6E6676 !important;
}
.kgma-post-body [class*="divide-"] > * + * {
  border-color: #E3DCE6 !important;
}
.kgma-post-body [class*="ring-"] {
  --tw-ring-color: #E3DCE6 !important;
}
.kgma-post-body [class*="decoration-"] {
  text-decoration-color: currentColor !important;
}
.kgma-post-body :is([class*="shadow-[0_0_"], [class*="shadow-gold"], [class*="shadow-ruby"], [class*="shadow-lux"], [class*="drop-shadow-"]) {
  box-shadow: none !important;
  filter: none !important;
}

/* Meter bars (thin rounded track with a fill): Divider track, solid palette fill. */
.kgma-post-body [class*="rounded-full"][class*="overflow-hidden"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]) {
  background-color: #E3DCE6 !important;
  background-image: none !important;
}
.kgma-post-body [class*="rounded-full"][class*="overflow-hidden"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]) > div {
  background-color: #1D5C9E !important;
  background-image: none !important;
}
.kgma-post-body [class*="rounded-full"][class*="overflow-hidden"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]) > div:is([class*="red-"], [class*="rose-"], [class*="ruby"], [class*="orange-"]) {
  background-color: #A8264F !important;
}
.kgma-post-body [class*="rounded-full"][class*="overflow-hidden"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]) > div:is([class*="emerald"], [class*="green-"], [class*="teal-"], [class*="gem-main"], [class*="gem-light"]) {
  background-color: #1F6B45 !important;
}

/* ── Links and buttons ── */
.kgma-post-body a:not([class*="bg-"]):not(.kgma-cta):not([class*="kgma-btn"]) {
  color: #1D5C9E !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kgma-post-body a:not([class*="bg-"]):not(.kgma-cta):not([class*="kgma-btn"]):hover {
  color: #16487D !important;
}
.kgma-post-body a:not([class*="bg-"]):not(.kgma-cta):not([class*="kgma-btn"]) :is(h2, h3, h4, p, span, i) {
  color: inherit !important;
}

/* Form controls inside posts (quizzes, calculators). */
.kgma-post-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: #FFFFFF !important;
  color: #1F1B24 !important;
  border: 1px solid #6E6676 !important;
}
.kgma-post-body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: #1D5C9E;
}

/* Tabs, quiz answers and toggles that were see-through on black: white with the Control border. */
.kgma-post-body button:not(.kgma-cta),
.kgma-post-body :is(a, button):is([class*="bg-white"], [class*="bg-transparent"], [class*="bg-stone-"], [class*="bg-black"], [class*="/"]):not(.kgma-cta) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #1F1B24 !important;
  border-color: #6E6676 !important;
  text-decoration: none !important;
}
.kgma-post-body button:not([class*="bg-"]):not([class*="border"]):not(.kgma-cta) {
  background-color: transparent !important;
}

/* Gold, jewel and gradient buttons and the old .kgma-cta become the rose primary button. */
.kgma-post-body :is(a, button).kgma-cta,
.kgma-post-body :is(a, button):is(
  [class*="bg-lux-gold"], [class*="bg-gold"], [class*="bg-[#D4AF37]"], [class*="bg-[#d4af37]"], [class*="bg-[#34d399]"],
  [class*="bg-lux-ruby"], [class*="bg-gem-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-amber-"], [class*="bg-yellow-"],
  [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-sapphire"], [class*="bg-lux-sapphire"], [class*="bg-sky-"], [class*="bg-blue-"],
  [class*="bg-lux-black"], [class*="bg-gradient-"]
):not([class*="/"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background-color: #A8264F !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #A8264F !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.kgma-post-body :is(a, button).kgma-cta:hover,
.kgma-post-body :is(a, button):is(
  [class*="bg-lux-gold"], [class*="bg-gold"], [class*="bg-[#D4AF37]"], [class*="bg-[#d4af37]"], [class*="bg-[#34d399]"],
  [class*="bg-lux-ruby"], [class*="bg-gem-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-amber-"], [class*="bg-yellow-"],
  [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-sapphire"], [class*="bg-lux-sapphire"], [class*="bg-sky-"], [class*="bg-blue-"],
  [class*="bg-lux-black"], [class*="bg-gradient-"]
):not([class*="/"]):hover {
  background-color: #861B3E !important;
  color: #FFFFFF !important;
  border-color: #861B3E !important;
}
.kgma-post-body :is(a, button).kgma-cta *,
.kgma-post-body :is(a, button):is(
  [class*="bg-lux-gold"], [class*="bg-gold"], [class*="bg-[#D4AF37]"], [class*="bg-[#d4af37]"], [class*="bg-[#34d399]"],
  [class*="bg-lux-ruby"], [class*="bg-gem-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-amber-"], [class*="bg-yellow-"],
  [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-sapphire"], [class*="bg-lux-sapphire"], [class*="bg-sky-"], [class*="bg-blue-"],
  [class*="bg-lux-black"], [class*="bg-gradient-"]
):not([class*="/"]) * {
  color: #FFFFFF !important;
}

/* Infographic / article switch in template posts: white track, blue when on. */
.kgma-post-body .toggle-label {
  background-color: #FFFFFF !important;
  border: 1px solid #6E6676 !important;
}
.kgma-post-body .toggle-checkbox:checked + .toggle-label {
  background-color: #1D5C9E !important;
  border-color: #1D5C9E !important;
}
.kgma-post-body .toggle-label + .dot {
  box-shadow: 0 0 0 1px #6E6676;
}