/* ================================================================================
   BLOG - LIGHT THEME (blog list and articles)
   The blog stylesheets are written for the dark theme; this file only recolors them
   when managers/core/ThemeCore.js sets `blog-theme-light` on <body>.
   Header, language toggle and liquid glass button follow html[data-theme] on their own.
================================================================================ */

/* Page background: plain white, no glows, no vignette */
body.blog-page.blog-theme-light,
body.blog-article-page.blog-theme-light {
  background: #ffffff !important;
  color: #111827;
}

body.blog-theme-light #blog-shared-background {
  background: #ffffff;
}

body.blog-theme-light #blog-vignette-overlay,
body.blog-theme-light .blog-bg-glow {
  display: none;
}

/* Interactive grid of the heroes */
body.blog-theme-light .interactive-grid-container::before {
  background-image:
    linear-gradient(rgba(109, 40, 217, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 40, 217, 0.07) 1px, transparent 1px);
}

body.blog-theme-light .grid-tile {
  border-color: rgba(109, 40, 217, 0.08);
  background: rgba(109, 40, 217, 0.02);
}

body.blog-theme-light .grid-tile.active {
  border-color: rgba(109, 40, 217, 0.18);
  background: rgba(109, 40, 217, 0.07);
}

/* Shared text utilities used in the blog markup (Tailwind classes made for dark) */
body.blog-theme-light #blog-listing .text-white {
  color: #0f172a;
}

body.blog-theme-light :is(#blog-hero, #blog-listing) :is(.text-gray-200, .text-gray-300) {
  color: #475569;
}

body.blog-theme-light #blog-listing .text-gray-400 {
  color: #64748b;
}

body.blog-theme-light #blog-listing .text-indigo-400 {
  color: #6d28d9;
}

/* Secondary button: white pill on white needs an outline */
body.blog-theme-light .btn--hero-pricing {
  border: 1px solid rgba(99, 102, 241, 0.28);
  background: #ffffff;
  color: #4f46e5;
}

body.blog-theme-light .btn--hero-pricing:hover {
  background: #f5f3ff;
}

/* --------------------------------------------------------------------------
   Blog list
   -------------------------------------------------------------------------- */

body.blog-theme-light #blog-hero {
  color: #0f172a;
}

body.blog-theme-light #blog-hero h1,
body.blog-theme-light #blog-hero p {
  text-shadow: none;
}

body.blog-theme-light .search-bar {
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

body.blog-theme-light .search-bar:focus-within {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

body.blog-theme-light .search-bar input {
  color: #0f172a;
}

body.blog-theme-light .search-bar input::placeholder {
  color: #94a3b8;
}

body.blog-theme-light #blog-category-chips {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

body.blog-theme-light .category-chip {
  color: #64748b;
}

body.blog-theme-light .category-chip:hover,
body.blog-theme-light .category-chip.active {
  color: #0f172a;
}

body.blog-theme-light .category-chip.active {
  border-bottom-color: #6d28d9;
}

body.blog-theme-light .featured-card {
  border-color: rgba(15, 23, 42, 0.08);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

body.blog-theme-light .featured-card:hover {
  border-color: rgba(99, 102, 241, 0.32);
  box-shadow: 0 24px 48px rgba(79, 70, 229, 0.14);
}

body.blog-theme-light .featured-eyebrow {
  background: rgba(109, 40, 217, 0.08);
  color: #6d28d9;
}

body.blog-theme-light .featured-title,
body.blog-theme-light .blog-card-title {
  color: #0f172a;
}

body.blog-theme-light .featured-excerpt {
  color: #475569;
}

body.blog-theme-light .featured-meta {
  color: #64748b;
}

body.blog-theme-light .featured-primary,
body.blog-theme-light .blog-card:hover .blog-card-title {
  color: #4f46e5;
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

body.blog-theme-light .article-hero {
  color: #0f172a;
}

body.blog-theme-light #article-title {
  color: #0f172a;
  text-shadow: none;
}

body.blog-theme-light #article-excerpt {
  color: #475569;
  text-shadow: none;
}

body.blog-theme-light .article-category {
  border-color: rgba(109, 40, 217, 0.22);
  background: rgba(109, 40, 217, 0.08);
  color: #6d28d9;
}

body.blog-theme-light .article-meta {
  color: #64748b;
}

body.blog-theme-light .article-meta > span {
  border-color: rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

body.blog-theme-light .article-meta > span:hover {
  border-color: rgba(109, 40, 217, 0.22);
  background: rgba(109, 40, 217, 0.06);
}

body.blog-theme-light .article-meta > span i {
  color: #7c3aed;
}

body.blog-theme-light .article-content,
body.blog-theme-light .article-content p,
body.blog-theme-light .article-content li,
body.blog-theme-light .article-content :is(em, i) {
  color: #334155;
}

body.blog-theme-light .article-content > p:first-of-type::first-letter {
  color: #4f46e5;
}

body.blog-theme-light .article-content h2 {
  background: linear-gradient(90deg, #0f172a 0%, #4338ca 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

body.blog-theme-light .article-content h3,
body.blog-theme-light .article-content :is(strong, b) {
  color: #0f172a;
}

body.blog-theme-light .article-content h4 {
  color: #1f2937;
}

body.blog-theme-light .article-content ul li::before {
  color: #6d28d9;
}

body.blog-theme-light .article-content blockquote {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.07), transparent);
  color: #1e1b4b;
}

body.blog-theme-light .article-content blockquote::before {
  color: rgba(99, 102, 241, 0.16);
}

body.blog-theme-light .article-content a {
  color: #4f46e5;
}

body.blog-theme-light .article-content a:hover {
  color: #312e81;
}

body.blog-theme-light .article-content img {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

body.blog-theme-light .article-content hr {
  border-top-color: rgba(15, 23, 42, 0.1);
}

/* The article CTA uses !important colors in ArticleSection.css */
body.blog-theme-light .article-cta {
  border-color: rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

body.blog-theme-light .article-cta h3 {
  color: #0f172a !important;
}

body.blog-theme-light .article-cta p {
  color: #475569 !important;
}

body.blog-theme-light .article-cta .text-indigo-600 {
  color: #4f46e5 !important;
}

body.blog-theme-light .related-section {
  border-color: rgba(109, 40, 217, 0.14);
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.07) 0%,
    rgba(139, 92, 246, 0.04) 50%,
    #ffffff 100%
  );
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.14);
}

body.blog-theme-light .related-section::before {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}

body.blog-theme-light .related-kicker {
  background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

body.blog-theme-light .related-title,
body.blog-theme-light .related-body h4 {
  color: #0f172a;
}

body.blog-theme-light .related-card {
  border-color: rgba(15, 23, 42, 0.08);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body.blog-theme-light .related-card:hover {
  border-color: rgba(109, 40, 217, 0.28);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

body.blog-theme-light .related-image::after {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.22) 0%, transparent 50%);
}