body {
  /* keep global styles minimal here, Tailwind covers base */
  background: inherit;
}

/* Sticky share block: keep sticky on desktop, nicer visuals */
#share-sticky {
  transition: transform .15s ease, opacity .15s ease, top .12s ease;
}
@media (min-width: 1024px) {
  #share-sticky.sticky { position: sticky; }
}

/* Big boxed share buttons (row) */
.mt-8.border-t.pt-6 .inline-flex {
  background: #fff;
  border: 1px solid rgba(226,232,240,0.9); /* subtle light border */
  box-shadow: 0 4px 12px rgba(16,24,40,0.04);
  border-radius: 10px;
  padding: 10px 16px;
  gap: 10px;
  color: #111827;
  align-items: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
}
.mt-8.border-t.pt-6 .inline-flex i { width: 20px; font-size: 18px; display: inline-block; }
.mt-8.border-t.pt-6 .inline-flex span { font-weight: 600; }

/* Colored variants keep icon + text white */
.mt-8 .inline-flex.bg-blue-600, .mt-8 .inline-flex.bg-sky-500,
.mt-8 .inline-flex.bg-green-500, .mt-8 .inline-flex.bg-amber-500 {
  color: #fff;
  border: none;
}
.mt-8.border-t.pt-6 .inline-flex:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(16,24,40,0.08);
}

/* Ensure consistent width on desktop */
@media (min-width: 1024px) {
  .mt-8.border-t.pt-6 .inline-flex { min-width: 220px; }
}

/* Left sticky share small buttons */
#share-sticky .w-10.h-10 {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  border-radius: 10px;
  background: #fff;
}
#share-sticky .w-10.h-10:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
}

/* Dotted divider (article -> recommended) */
.article-dotted-divider, hr.article-divider {
  border: none;
  border-top: 4px dashed rgba(229,231,235,0.95);
  margin: 36px 0;
  opacity: 0.95;
}

/* Recommended header with purple accent */
.recommended-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.recommended-header .accent {
  width: 8px; height: 28px; background: #7c2ae8; border-radius: 2px;
}

/* Recommended cards grid */
.recommended-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
@media (min-width: 768px) { .recommended-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .recommended-grid { grid-template-columns: repeat(4,1fr); } }

.recommended-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
}
.recommended-card .thumb { width: 100%; height: 150px; object-fit: cover; display: block; }
.recommended-card .meta { padding: 12px; flex: 1 0 auto; }
.recommended-card .meta .title { font-weight: 700; color: #111827; font-size: 15px; line-height: 1.25; }

/* Article typography refinements */
.article-prose { line-height: 1.8; font-size: 1rem; color: #374151; }
.article-prose h2 { color: #111827; margin-top: 26px; margin-bottom: 12px; }
.article-prose h3 { margin-top: 16px; margin-bottom: 8px; }
/* Scroll-to-top button transitions (Tailwind classes used in markup) */
#scrollTop {
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1);
}
#scrollTop.show { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

/* Editor contact link highlight */
.editor-contact a, .editor-contact a:visited { color: #e11d48; font-weight: 600; }

/* Small responsive tweaks */
@media (max-width: 1023px) {
  .mt-8.border-t.pt-6 .inline-flex { min-width: auto; width: auto; }
}

/* Share buttons: improved colors, contrast, hover & focus (append/replace existing share styles) */

/* Small sticky buttons base */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(226,232,240,0.9);
  box-shadow: 0 4px 10px rgba(16,24,40,0.04);
  font-size: 16px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
  color: inherit; /* icon color controlled by id-specific rules */
}

/* icon sizing inside small buttons */
.share-btn i { font-size: 18px; line-height: 0; }

/* Hover/focus for small buttons */
.share-btn:hover,
.share-btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16,24,40,0.08);
  outline: none;
}
.share-btn:focus { box-shadow: 0 0 0 4px rgba(124,58,232,0.12); }

/* Small button colors (use IDs used in markup) */
#share-x { background: #1DA1F2; color: #fff; border-color: rgba(0,0,0,0.06); }
#share-x:hover { background: #0d95e8; }

#share-whatsapp { background: #128C7E; color: #fff; border-color: rgba(0,0,0,0.06); }
#share-whatsapp:hover { background: #0f7a6d; }

#share-email { background: #ffffff; color: #111827; border-color: rgba(226,232,240,0.95); }
#share-email:hover { background: #fbfbfd; }

/* Big share buttons (top and bottom) base: keep readable text + icon */
#big-share-x, #big-share-x-bottom {
  background: #1DA1F2 !important;
  color: #fff !important;
  border: none;
}
#big-share-x i, #big-share-x-bottom i { color: #ffffff; }

#big-share-whatsapp, #big-share-whatsapp-bottom {
  background: #128C7E !important;
  color: #fff !important;
  border: none;
}
#big-share-whatsapp i, #big-share-whatsapp-bottom i { color: #ffffff; }

/* Keep Email big button light with dark text */
#big-share-email, #big-share-email-bottom {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
}
#big-share-email i, #big-share-email-bottom i { color: #111827; }

/* Big buttons: consistent shape and shadow */
#big-share-x,
#big-share-whatsapp,
#big-share-email,
#big-share-x-bottom,
#big-share-whatsapp-bottom,
#big-share-email-bottom {
  border-radius: 10px;
  padding-left: 16px;
  padding-right: 16px;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Hover states for big buttons */
#big-share-x:hover, #big-share-x-bottom:hover { transform: translateY(-3px); background: #0d95e8 !important; }
#big-share-whatsapp:hover, #big-share-whatsapp-bottom:hover { transform: translateY(-3px); background: #0f7a6d !important; }
#big-share-email:hover, #big-share-email-bottom:hover { transform: translateY(-3px); background: #f8fafc !important; }

/* Make the icon slightly larger and aligned */
#big-share-x i, #big-share-whatsapp i, #big-share-email i,
#big-share-x-bottom i, #big-share-whatsapp-bottom i, #big-share-email-bottom i {
  font-size: 18px;
  display: inline-block;
}

/* Ensure text inside big buttons is readable */
#big-share-x span, #big-share-whatsapp span, #big-share-email span,
#big-share-x-bottom span, #big-share-whatsapp-bottom span, #big-share-email-bottom span {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

/* If Tailwind utilities also apply, ensure our color rules win */
#share-x, #share-whatsapp, #share-email,
#big-share-x, #big-share-whatsapp, #big-share-email,
#big-share-x-bottom, #big-share-whatsapp-bottom, #big-share-email-bottom {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility: ensure sufficient contrast on small screens too */
@media (max-width: 640px) {
  .share-btn { width: 44px; height: 44px; }
  #big-share-x, #big-share-whatsapp, #big-share-email { padding-left: 14px; padding-right: 14px; }
}