/* ══════════════════════════════════════════════════════════════
   EFHI Global CSS — v1 (2026-02-19)
   earnfromhomeindia.com
   Accent: #2563eb (blue) | Footer: #1e293b
   PHILOSOPHY: Work WITH the template, don't fight it.
   ══════════════════════════════════════════════════════════════ */

body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════
   QUICK ANSWER BOX
   ══════════════════════════════════════════════════ */

.quick-answer-box,
.quick-answer {
  display: block !important;
  margin: 16px 0 24px !important;
  padding: 16px 20px !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

.quick-answer-box *,
.quick-answer * {
  border-left: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.quick-answer-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
}

.quick-answer-icon { font-size: 18px !important; flex-shrink: 0 !important; }
.quick-answer-title { font-weight: 700 !important; color: #2563eb !important; }

.quick-answer-content,
.quick-answer-content p,
.quick-answer p {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.quick-answer a { color: #2563eb !important; text-decoration: underline !important; }

/* ══════════════════════════════════════════════════
   RELATED ARTICLES — 2-col grid
   ══════════════════════════════════════════════════ */

body .related-articles {
  margin: 48px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: 768px !important;
  box-sizing: border-box !important;
}

body .related-articles h2,
body .related-articles h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;
  color: #0f172a !important;
}

body .related-articles ul {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .related-articles li {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
}

body .related-articles li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
  border-color: #2563eb !important;
}

body .related-articles li a {
  display: block !important;
  padding: 14px 16px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

body .related-articles li a:hover { color: #2563eb !important; }

/* Related articles expanded variant */
body .related-articles-expanded {
  margin: 32px 0 !important;
  padding: 24px !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 12px !important;
}

body .related-articles-expanded .articles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 639px) {
  body .related-articles ul,
  body .related-articles-expanded .articles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════
   DISCLOSURE
   ══════════════════════════════════════════════════ */

.affiliate-disclosure,
aside.affiliate-disclosure {
  margin: 32px 0 0 !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
}

.affiliate-disclosure:has(> footer),
.affiliate-disclosure:has(> .footer) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════
   AUTHOR BOX
   ══════════════════════════════════════════════════ */

.author-box,
.author-card,
.author-info {
  margin: 48px 0 0 !important;
  padding: 24px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.author-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

@media (max-width: 639px) {
  .author-box, .author-card, .author-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */

.footer__grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 32px !important;
}

.footer__heading {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}

.footer__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer__links li { margin-bottom: 8px !important; }
.footer__links li a {
  font-size: 14px !important;
  opacity: 0.8 !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.footer__links li a:hover { opacity: 1 !important; }

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 639px) {
  .footer__grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════ */

.breadcrumb, .breadcrumbs, nav[aria-label="Breadcrumb"] {
  font-size: 13px !important;
  color: #64748b !important;
}
.breadcrumb a { color: #64748b !important; text-decoration: none !important; }
.breadcrumb a:hover { color: #2563eb !important; }

/* ══════════════════════════════════════════════════
   HERO & BUTTONS
   ══════════════════════════════════════════════════ */

.hero-title, .hero h1 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.025em !important;
}

.btn-accent, .btn-primary {
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   CARDS & COMPONENTS
   ══════════════════════════════════════════════════ */

.article-card, .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.article-card:hover, .card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Tables */
table { border-collapse: collapse !important; margin: 24px 0 !important; }
th, td { padding: 10px 14px !important; border: 1px solid #e2e8f0 !important; }
th { background: #f8fafc !important; font-weight: 600 !important; }

/* Pros/cons */
.pros-cons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.pros { background: #f0fdf4 !important; border-radius: 8px !important; padding: 16px !important; }
.cons { background: #fef2f2 !important; border-radius: 8px !important; padding: 16px !important; }

/* CTA bar */
#im-cta { cursor: pointer !important; }
#im-cta a { text-decoration: none !important; color: inherit !important; display: flex !important; align-items: center !important; gap: 12px !important; }
#im-cta .im-cta-content { pointer-events: auto !important; }

/* ══════════════════════════════════════════════════
   INLINE STYLE OVERRIDES
   ══════════════════════════════════════════════════ */

.quick-answer, [class*="quick-answer"] {
  max-width: none !important;
  width: auto !important;
}

/* ══════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .pros-cons { grid-template-columns: 1fr !important; }
}