/* New Dental Center Al Ain — Blog supplementary styles.
   The site's own theme CSS (bootstrap/style/responsive) is loaded from
   newdentalclinicllc.ae and provides the header, footer, navbar, page-title
   and services-details-area look. This file only adds the small set of
   article-specific components (callouts, FAQ, CTA box) that the base theme
   does not already style, using the theme's colour palette. */

.callout {
  background: #eaf7f6;
  border-left: 4px solid #16a5a0;
  padding: 14px 18px;
  border-radius: 6px;
  margin: 22px 0;
}

.faq-item {
  border-bottom: 1px solid #e1ebee;
  padding: 14px 0;
}

.faq-item h3 { margin: 0 0 6px; font-size: 1.05rem; }
.faq-item p { margin: 0; }

.cta-box {
  background: #f6fafb;
  border: 1px solid #e1ebee;
  border-radius: 10px;
  padding: 22px;
  margin-top: 36px;
  text-align: center;
}

.cta-box h2, .cta-box h3 { margin-top: 0; }

.cta-box .btn {
  display: inline-block;
  background: #16a5a0;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  margin: 6px 8px;
  text-decoration: none;
  border: none;
}

.cta-box .btn.secondary { background: #0b5f8a; }
.cta-box .btn:hover { opacity: 0.9; text-decoration: none; }

.related-articles {
  margin-top: 40px;
  border-top: 1px solid #e1ebee;
  padding-top: 18px;
}
.related-articles ul { padding-left: 18px; }
.related-articles li { margin-bottom: 6px; }

.article-meta { color: #5b6b74; font-size: 0.9rem; margin-bottom: 18px; }

.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 10px; }
.service-card { background: #fff; border: 1px solid #e1ebee; border-radius: 10px; padding: 20px; }
.service-card h2, .service-card h3 { margin-top: 0; font-size: 1.15rem; }
.service-card p { color: #5b6b74; font-size: 0.92rem; }

.article-index-list, .article-list, ul.article-list {
  padding-left: 0;
  list-style: none;
}
.article-index-list li, .article-list li {
  border-bottom: 1px solid #e1ebee;
  padding: 14px 0;
}
.article-index-list a, .article-list a { font-size: 1.05rem; font-weight: 600; }
.article-index-list h2, .article-list h2 { font-size: 1.05rem; margin: 0; }
.article-index-list p, .article-list p { margin: 4px 0 0; color: #5b6b74; }