/*
Theme Name: Astrosyndicate
Template: newsium
Version: 7.0.0.20260524
*/

@import url('../newsium/style.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Telugu:wght@400;500;600;700&display=swap');

/* ============================================================
   ASTROSYNDICATES v7 - MINIMAL SURGICAL FIXES
   Only touch what's visibly broken. Preserve all layout.
   ============================================================ */

/* ---------- 1. MODERN FONT (safe, won't break layout) ---------- */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", "Noto Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.post-title,
.widget-title,
.site-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Telugu", "Noto Sans", sans-serif;
  letter-spacing: -0.01em;
}

:lang(te), [lang="te"] {
  font-family: "Noto Sans Telugu", "Noto Sans", sans-serif;
}

/* ---------- 2. CATEGORY BADGE FIX ----------
   Problem: Orange text on orange background = invisible
   Fix: Light background, dark text, visible border */

.cat-links a,
.post-categories a,
.entry-categories a,
.af-cat-links a {
  background: #fff5e6;
  color: #c45f00;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  display: inline-block;
  margin: 0 4px 6px 0;
  border: 1.5px solid #f59200;
  transition: all 0.2s ease;
}

.cat-links a:hover,
.post-categories a:hover {
  background: #f59200;
  color: #fff;
  border-color: #f59200;
}

/* ---------- 3. READ TIME FIX ----------
   Problem: Grey blob on left edge, unreadable
   Fix: Position on image bottom-right with dark background */

.read-time,
.min-read,
.post-time,
.af-read-time,
.entry-meta .min-read {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  z-index: 2;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* Ensure thumbnail has position for absolute child */
.post-thumbnail,
.entry-thumbnail,
.af-post-thumbnail {
  position: relative;
}

/* ---------- 4. REMOVE CIRCULAR OVERLAY IMAGES ----------
   Problem: Small circle image over main thumbnail
   Fix: Hide any image that isn't the first/main one */

.post-thumbnail a img:not(:first-child),
.entry-thumbnail a img:not(:first-child) {
  display: none;
}

/* ---------- 5. POST CARD SUBTLE ENHANCEMENT ----------
   Problem: Flat, no depth
   Fix: Very subtle shadow and hover lift */

article.post,
.type-post,
.post {
  transition: all 0.25s ease;
}

article.post:hover,
.type-post:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ---------- 6. POST TITLE ---------- */
.entry-title a,
.post-title a {
  color: #1f1f1f;
  text-decoration: none;
  transition: color 0.2s ease;
}

.entry-title a:hover,
.post-title a:hover {
  color: #f59200;
}

/* ---------- 7. POST META ---------- */
.entry-meta,
.post-meta,
.af-entry-meta {
  color: #888888;
  font-size: 0.82rem;
}

.entry-meta a,
.post-meta a {
  color: #d97d00;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.entry-meta a:hover,
.post-meta a:hover {
  color: #f59200;
}

/* ---------- 8. READ MORE BUTTON ---------- */
.read-more,
.more-link,
.af-read-more {
  display: inline-block;
  background: #f59200;
  color: #fff;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.read-more:hover,
.more-link:hover {
  background: #d97d00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,146,0,0.25);
}

/* ---------- 9. SIDEBAR WIDGETS ---------- */
.widget-area .widget,
.sidebar .widget,
aside .widget {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid #e6e4e1;
}

/* Fix orange-on-orange text in right sidebar bio boxes */
.widget p,
.textwidget p,
.custom-html-widget p {
  color: #1f1f1f;
}

.widget a,
.textwidget a {
  color: #d97d00;
  font-weight: 600;
  text-decoration: none;
}

.widget a:hover {
  color: #f59200;
}

/* Widget title */
.widget-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1f1f1f;
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f59200;
}

/* Profile images in widgets */
.widget img,
.textwidget img {
  border-radius: 50%;
  border: 3px solid #e6e4e1;
  padding: 3px;
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  transition: all 0.2s ease;
}

.widget img:hover {
  border-color: #f59200;
  transform: scale(1.03);
}

/* ---------- 10. LEFT PANEL IMAGES - SAFE PRESERVATION ---------- */
/* Do NOT force grid or max-width that breaks existing layout */
.left-sidebar .widget img,
aside .widget img,
.widget-area .widget img {
  height: auto;
  display: block;
}

/* Only add subtle rounding if not already styled */
.left-sidebar img:not([style*="border-radius"]),
aside img:not([style*="border-radius"]) {
  border-radius: 8px;
}

/* ---------- 11. HEADER ---------- */
.top-header,
.header-top {
  background: #f59200;
  color: #fff;
}

.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e6e4e1;
}

.site-title a {
  color: #f59200;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.main-navigation {
  background: #f5f4f2;
  border-top: 1px solid #e6e4e1;
  border-bottom: 1px solid #e6e4e1;
}

.main-navigation ul li a {
  color: #1f1f1f;
  font-weight: 600;
  transition: all 0.2s ease;
}

.main-navigation ul li a:hover {
  color: #f59200;
  background: rgba(245,146,0,0.05);
}

.main-navigation .home-icon a,
.menu-item-home a {
  background: #f59200;
  color: #fff;
}

/* CTA buttons */
.quick-consultation,
.consult-btn {
  background: #f59200;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.quick-consultation:hover,
.consult-btn:hover {
  background: #d97d00;
  transform: translateY(-1px);
}

.watch-online,
.watch-btn {
  background: transparent;
  color: #f59200;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #f59200;
  transition: all 0.2s ease;
}

.watch-online:hover,
.watch-btn:hover {
  background: #f59200;
  color: #fff;
}

/* ---------- 12. FOOTER ---------- */
.site-footer,
.footer-area,
#colophon {
  background: #1a1a1a;
  color: rgba(255,255,255,0.7);
  border-top: 3px solid #f59200;
}

.site-footer .widget,
.footer-area .widget {
  background: #2d2d2d;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.08);
}

.site-footer .widget-title {
  color: #f59200;
}

.site-footer a,
.footer-area a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover,
.footer-area a:hover {
  color: #f59200;
}

.site-footer .widget ul li {
  border-bottom-color: rgba(255,255,255,0.08);
  padding: 7px 0;
}

.site-info,
.copyright,
.footer-bottom {
  text-align: center;
  padding: 16px 0;
  background: #f59200;
  color: #fff;
  font-size: 0.85rem;
}

/* ---------- 13. PAGINATION ---------- */
.page-numbers a,
.pagination a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6e4e1;
  color: #1f1f1f;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.page-numbers a:hover,
.pagination a:hover {
  background: #f59200;
  color: #fff;
  border-color: #f59200;
  transform: translateY(-2px);
}

.page-numbers .current,
.pagination .current {
  background: #f59200;
  color: #fff;
  border-color: #f59200;
}

/* ---------- 14. SINGLE POST ---------- */
body.single-post .entry-title {
  font-size: 2em;
  line-height: 1.25;
  color: #1f1f1f;
  font-weight: 800;
}

body.single-post .entry-meta {
  color: #888888;
  font-size: 0.88rem;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e4e1;
}

body.single-post .entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ---------- 15. SCROLL TO TOP ---------- */
.scrollup,
#scrollUp,
.to-top {
  background: #f59200;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.2s ease;
  border: none;
}

.scrollup:hover,
#scrollUp:hover {
  background: #d97d00;
  transform: translateY(-2px);
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 768px) {
  .widget-area .widget,
  .sidebar .widget {
    border-radius: 0;
    margin-left: -10px;
    margin-right: -10px;
  }
}