/* =============================================================
   CONTENT STYLES — country pages + blog posts
   Scope: .country-desc (country pages) and .blog-content (blog)
   Add this file to country and blog page templates only.
   ============================================================= */

/* ---------- Shared base ---------- */
.country-desc,
.blog-content {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #1f2937;
  max-width: 760px;
  margin: 0 auto;
}

.country-desc p,
.blog-content p {
  margin: 0 0 1.25em 0;
}

/* ---------- Headings ---------- */
.country-desc h1,
.blog-content h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.5em 0 0.6em 0;
  color: #111827;
}

.country-desc h2,
.blog-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 0.6em 0;
  color: #111827;
  padding-bottom: 0.35em;
  border-bottom: 2px solid #f1f1f1;
}

.country-desc h3,
.blog-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.6em 0 0.5em 0;
  color: #111827;
}

.country-desc h4,
.blog-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.4em 0 0.4em 0;
  color: #111827;
}

/* ---------- Lists ---------- */
.country-desc ul,
.country-desc ol,
.blog-content ul,
.blog-content ol {
  margin: 0 0 1.25em 0;
  padding-left: 1.5em;
}

.country-desc li,
.blog-content li {
  margin-bottom: 0.5em;
}

.country-desc ul li::marker,
.blog-content ul li::marker {
  color: #6366f1;
}

/* ---------- Links ---------- */
.country-desc a,
.blog-content a {
  color: #4f46e5;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.country-desc a:hover,
.blog-content a:hover {
  color: #3730a3;
}

/* ---------- Strong / em ---------- */
.country-desc strong,
.blog-content strong {
  font-weight: 700;
  color: #111827;
}

.country-desc em,
.blog-content em {
  font-style: italic;
}

/* ---------- Body images ---------- */
.country-desc img,
.blog-content img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 2em auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.country-desc figure,
.blog-content figure {
  margin: 2em 0;
}

.country-desc figcaption,
.blog-content figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: 0.5em;
  font-style: italic;
}

/* ---------- Callout box (key facts / tips) ---------- */
.country-desc .callout,
.blog-content .callout {
  background: #f5f7ff;
  border-left: 4px solid #6366f1;
  padding: 1em 1.25em;
  margin: 1.75em 0;
  border-radius: 0 8px 8px 0;
}

.country-desc .callout p:last-child,
.blog-content .callout p:last-child {
  margin-bottom: 0;
}

.country-desc .callout-warning,
.blog-content .callout-warning {
  background: #fff7ed;
  border-left-color: #f97316;
}

.country-desc .callout-success,
.blog-content .callout-success {
  background: #ecfdf5;
  border-left-color: #10b981;
}

/* ---------- FAQ block (proper Q/A structure) ---------- */
.country-desc .faq,
.blog-content .faq {
  margin: 2em 0;
}

.country-desc .faq-item,
.blog-content .faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 1em 0;
}

.country-desc .faq-item:last-child,
.blog-content .faq-item:last-child {
  border-bottom: none;
}

.country-desc .faq-question,
.blog-content .faq-question {
  font-weight: 700;
  color: #111827;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

.country-desc .faq-answer,
.blog-content .faq-answer {
  color: #374151;
  margin-bottom: 0;
}

/* ---------- Inline CTA box (mid-content "Apply Now") ---------- */
.country-desc .cta-inline,
.blog-content .cta-inline {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  padding: 1.5em 1.75em;
  border-radius: 12px;
  margin: 2.5em 0;
  text-align: center;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
}

.country-desc .cta-inline h3,
.blog-content .cta-inline h3 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.country-desc .cta-inline p,
.blog-content .cta-inline p {
  color: #e0e7ff;
  margin-bottom: 1em;
}

.country-desc .cta-inline a.btn,
.blog-content .cta-inline a.btn {
  display: inline-block;
  background: #fff;
  color: #4f46e5;
  padding: 0.75em 1.75em;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.country-desc .cta-inline a.btn:hover {
  transform: translateY(-2px);
  color: #3730a3;
}

/* ---------- Quick facts table (no real <table> — uses divs) ---------- */
.country-desc .facts,
.blog-content .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em 1.5em;
  background: #f9fafb;
  padding: 1.25em 1.5em;
  border-radius: 12px;
  margin: 1.75em 0;
  border: 1px solid #e5e7eb;
}

.country-desc .facts .label,
.blog-content .facts .label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.9rem;
}

.country-desc .facts .value,
.blog-content .facts .value {
  color: #111827;
  font-size: 0.95rem;
}

/* ---------- Blockquote ---------- */
.country-desc blockquote,
.blog-content blockquote {
  border-left: 4px solid #6366f1;
  padding: 0.5em 1.25em;
  margin: 1.75em 0;
  font-style: italic;
  color: #4b5563;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .country-desc,
  .blog-content {
    font-size: 16px;
    padding: 0 1em;
  }
  .country-desc h2,
  .blog-content h2 { font-size: 1.4rem; }
  .country-desc h3,
  .blog-content h3 { font-size: 1.15rem; }
  .country-desc .facts,
  .blog-content .facts {
    grid-template-columns: 1fr;
  }
}