/* ---------------------------------------------------------------
   blog-styles.css

   Lifted from src/pages/blog/[slug].astro lines 219-543, with all
   Tailwind @apply directives converted to plain CSS using the project
   palette (see tailwind.config.mjs).

   Palette references:
     citroen-50  #fdf9ef
     citroen-100 #faf0d5
     citroen-200 #f5e0aa
     citroen-300 #eecb75
     citroen-400 #e5b44a
     citroen-500 #d4a843
     citroen-600 #b8893a
     citroen-700 #996a30
     citroen-800 #7a5427
     citroen-900 #63441f
     navy-50  #f0f4fa
     navy-100 #dce4f3
     navy-500 #1b3c6e
     navy-700 #132b51

   Tailwind grays used as standard Tailwind values:
     gray-50  #f9fafb
     gray-100 #f3f4f6
     gray-200 #e5e7eb
     gray-300 #d1d5db
     gray-400 #9ca3af
     gray-500 #6b7280
     gray-700 #374151
     gray-800 #1f2937
     gray-900 #111827
--------------------------------------------------------------- */

.prose {
  max-width: none;
  color: #374151;
  line-height: 1.75;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
}
@media (min-width: 768px) {
  .prose h2 { font-size: 1.875rem; }
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}
@media (min-width: 768px) {
  .prose h3 { font-size: 1.5rem; }
}

.prose h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #1f2937;
}
@media (min-width: 768px) {
  .prose h4 { font-size: 1.25rem; }
}

.prose p {
  line-height: 1.75;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #374151;
}
@media (min-width: 768px) {
  .prose p { font-size: 1.125rem; }
}

.prose ul {
  margin: 1.5rem 0;
  margin-left: 1.5rem;
  list-style-type: disc;
}
.prose ul > * + * { margin-top: 0.5rem; }

.prose ol {
  margin: 1.5rem 0;
  margin-left: 1.5rem;
  list-style-type: decimal;
}
.prose ol > * + * { margin-top: 0.5rem; }

.prose li {
  padding-left: 0.5rem;
  font-size: 1rem;
  display: list-item;
}
@media (min-width: 768px) {
  .prose li { font-size: 1.125rem; }
}

.prose a {
  color: #b8893a; /* citroen-600 */
  transition: color 0.15s ease;
  text-decoration: none;
}
.prose a:hover {
  color: #996a30; /* citroen-700 */
  text-decoration: underline;
}

.prose blockquote {
  font-style: italic;
  margin: 2rem 0;
  padding: 0.75rem 1.5rem;
  border-left: 4px solid #d4a843; /* citroen-500 */
  background: #fdf9ef; /* citroen-50 */
  border-radius: 0 0.5rem 0.5rem 0;
}

.prose img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  margin: 2.5rem auto;
}

.prose iframe {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  margin: 2.5rem 0;
}

.prose pre {
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 0.75rem;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 2rem 0;
}

.prose code {
  font-size: 0.875rem;
  background: #f3f4f6;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  color: #996a30; /* citroen-700 */
}

/* Tip / Warning / Info callout boxes */
.prose .tip {
  background: linear-gradient(to right, #ecfdf5, #d1fae5);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin: 2rem 0;
  border: 1px solid #a7f3d0;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
}
.prose .tip p:first-child {
  font-weight: 600;
  color: #065f46;
  display: flex;
  align-items: center;
  margin-top: 0;
}
.prose .tip p:first-child::before {
  content: "💡";
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

.prose .warning {
  background: linear-gradient(to right, #fffbeb, #fdf9ef);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin: 2rem 0;
  border: 1px solid #fde68a;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
}
.prose .warning p:first-child {
  font-weight: 600;
  color: #92400e;
  display: flex;
  align-items: center;
  margin-top: 0;
}
.prose .warning p:first-child::before {
  content: "⚠️";
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

.prose .info {
  background: linear-gradient(to right, #f0f4fa, #eef2ff);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin: 2rem 0;
  border: 1px solid #dce4f3;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
}
.prose .info p:first-child {
  font-weight: 600;
  color: #132b51; /* navy-700 */
  display: flex;
  align-items: center;
  margin-top: 0;
}
.prose .info p:first-child::before {
  content: "ℹ️";
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

/* Tables (body content) */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

.prose thead {
  background: #1f2937;
  color: #fff;
}

.prose th {
  padding: 0.75rem 1rem;
  text-align: left;
  border-color: #374151;
  font-weight: 600;
}

.prose td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e7eb;
}

.prose tbody tr {
  background: #fff;
  transition: background-color 0.15s ease;
}
.prose tbody tr:nth-child(even) {
  background: #f9fafb;
}
.prose tbody tr:hover {
  background: #f3f4f6;
}

/* Key Takeaways table (lifted out of body) */
#key-takeaways table,
#key-takeaways-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
  table-layout: fixed;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

#key-takeaways th,
#key-takeaways-container th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  background: #1f2937;
  color: #fff;
  word-wrap: break-word;
}
@media (min-width: 768px) {
  #key-takeaways th, #key-takeaways-container th { font-size: 1rem; }
}

#key-takeaways td,
#key-takeaways-container td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  background: #fff;
  word-wrap: break-word;
  vertical-align: top;
}
@media (min-width: 768px) {
  #key-takeaways td, #key-takeaways-container td { font-size: 1rem; }
}

#key-takeaways-container {
  padding: 1.5rem;
  box-shadow: none;
}

#key-takeaways-container h2 {
  margin-bottom: 1rem;
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  border-bottom: none;
  padding-bottom: 0;
}

#key-takeaways-container a,
#key-takeaways a {
  color: #1b3c6e; /* navy-500 */
  font-weight: 500;
}
#key-takeaways-container a:hover,
#key-takeaways a:hover {
  color: #132b51; /* navy-700 */
}

/* Zebra striping for key takeaways */
#key-takeaways tr:nth-child(even) td,
#key-takeaways-container tr:nth-child(even) td {
  background: #f9fafb;
}

/* Hover effect on key-takeaways rows */
#key-takeaways tr:hover td,
#key-takeaways-container tr:hover td {
  background: #fdf9ef; /* citroen-50 */
  transition: background-color 0.15s ease;
}

/* Responsive table */
@media (max-width: 640px) {
  .prose table {
    display: block;
    overflow-x: auto;
  }
  #key-takeaways table,
  #key-takeaways-container table {
    display: table;
    font-size: 0.75rem;
    table-layout: fixed;
  }
  #key-takeaways th, #key-takeaways-container th,
  #key-takeaways td, #key-takeaways-container td {
    padding: 0.5rem;
  }
}

/* Blog CTA card */
.blog-cta {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid #ffd200;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #0a2b5c 0%, #123f80 100%);
}
@media (min-width: 768px) {
  .blog-cta { padding: 2rem; }
}
.blog-cta p {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .blog-cta p { font-size: 1.125rem; }
}
.blog-cta .blog-cta-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .blog-cta .blog-cta-title { font-size: 1.875rem; }
}
.blog-cta .blog-cta-title .accent { color: #ffd200; }

.blog-cta .blog-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .blog-cta .blog-cta-buttons { flex-direction: row; }
}

.blog-cta a.blog-cta-btn-gold,
.blog-cta a.blog-cta-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
  text-align: center;
  text-decoration: none !important;
}

.blog-cta a.blog-cta-btn-gold {
  background: #ffd200;
  color: #0a2b5c;
}
.blog-cta a.blog-cta-btn-gold:hover { background: #ffdd33; }

.blog-cta a.blog-cta-btn-whatsapp {
  background: #25d366;
  color: #ffffff;
}
.blog-cta a.blog-cta-btn-whatsapp:hover { background: #1ebe57; }

/* Inline blog images */
.prose figure.blog-inline-image {
  margin: 2.5rem auto;
  max-width: 800px;
}
.prose figure.blog-inline-image img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  margin: 0;
  width: 100%;
}
.prose figure.blog-inline-image figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Responsive YouTube embed wrapper */
.prose figure.blog-video {
  margin: 2.5rem auto;
  max-width: 900px;
}
.prose figure.blog-video .blog-video__frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.prose figure.blog-video .blog-video__frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.prose figure.blog-video figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.prose figure.blog-video .blog-video__credit {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

/* Data-viz infographic */
.prose figure.blog-infographic {
  margin: 2.5rem auto;
  max-width: 900px;
}
.prose figure.blog-infographic img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  margin-bottom: 0;
}
.prose figure.blog-infographic figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Inline part card */
.prose .blog-inline-card {
  margin: 2rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}
@media (min-width: 768px) {
  .prose .blog-inline-card { padding: 1.25rem; }
}
.prose .blog-inline-card img { margin-bottom: 0.75rem; }
@media (min-width: 768px) {
  .prose .blog-inline-card img { margin-bottom: 0; }
}
.prose .blog-inline-card h4 { margin-top: 0; }
.prose .blog-inline-card a { text-decoration: none; }

/* Citations (sup linking to sources) */
.prose sup.citation {
  font-size: 0.75rem;
  vertical-align: super;
  display: inline-block;
  margin-left: 0.125rem;
  line-height: 1;
}
.prose sup.citation a {
  font-weight: 600;
  text-decoration: none !important;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
  background: #fff4bf;
  color: #0a2b5c;
  font-size: 0.7em;
}
.prose sup.citation a:hover { background: #ffd200; }

.prose ol.sources-list,
.sources-list {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
  counter-reset: sources-counter;
}
.prose ol.sources-list > * + *,
.sources-list > * + * { margin-top: 0.5rem; }

.prose ol.sources-list li,
.sources-list li {
  padding-left: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  border-left: 2px solid #ffd200;
  position: relative;
  counter-increment: sources-counter;
}
@media (min-width: 768px) {
  .prose ol.sources-list li, .sources-list li { font-size: 1rem; }
}

.prose ol.sources-list li::before,
.sources-list li::before {
  content: counter(sources-counter);
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  background: #fff4bf;
  color: #0a2b5c;
  min-width: 1.5rem;
  text-align: center;
}

.prose ol.sources-list li:target,
.sources-list li:target {
  background: #fff4bf;
}