/* ============================================================
   country-redesign.css — applies new design language (homepage/
   reports/guide style) to country + blog pages.

   Loaded AFTER country-base.css. Overrides via specificity + !important.

   What changes vs country-base.css:
     - Body bg: warm cream (var(--cream))
     - Body font: Inter
     - H1/H2: Fraunces with clamp() sizing + italic em accent
     - Article header: bigger spacing, no border, italic em emphasis
     - Article body h2/h3: Fraunces, bigger, lighter weight
     - Snapshot card: cream tint, larger numbers, accent italic detail
     - Visa table / Col grid / Download grid: rounder corners, softer borders
     - FAQ accordions: cleaner lines, accent + sign

   Touches NO JS. Class names preserved.
   ============================================================ */

/* ---------- BODY / TYPOGRAPHY ---------- */
body {
  background: var(--cream, #F5F1E8) !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #0C2E2B) !important;
  line-height: 1.65 !important;
}

main h1,
.article-header h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "opsz" 80 !important;
  font-optical-sizing: auto !important;
  text-wrap: balance;
  max-width: none !important;
}
main h1 em,
.article-header h1 em {
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--accent, #B5521F) !important;
}

main h2,
.article-body h2,
.article-faq h2,
.explore-more h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 500 !important;
  color: var(--ink, #0C2E2B) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  margin: 56px 0 16px !important;
  text-align: left !important;
}
main h1,
.article-header h1 {
  text-align: left !important;
}
.article-header,
.article-body {
  text-align: left !important;
}
main h2 em,
.article-body h2 em {
  font-style: italic !important;
  color: var(--accent, #B5521F) !important;
}

main h3,
.article-body h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B) !important;
  margin: 32px 0 10px !important;
  letter-spacing: -0.01em !important;
}

p, .article-body p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
}

/* ---------- ARTICLE HEADER ---------- */
.article-header {
  border-bottom: none !important;
  padding: 56px 0 24px !important;
  margin-bottom: 32px !important;
}
.article-header__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--paper, #FFFFFF) !important;
  color: var(--accent, #B5521F) !important;
  border: 1px solid rgba(12, 46, 43, 0.1) !important;
  font: 600 11px/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
}
.article-header__meta {
  font-family: var(--font-body, 'Inter') !important;
  font-size: 13px !important;
  color: var(--grey-500, #6B7280) !important;
}

/* ---------- KEY-TAKEAWAY (intro callout) ---------- */
.key-takeaway {
  background: var(--paper, #FFFFFF) !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 32px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04) !important;
}
.key-takeaway strong {
  color: var(--accent, #B5521F) !important;
  font: 600 11px/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.key-takeaway p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ink, #0C2E2B) !important;
  margin-top: 8px !important;
}

/* ---------- COUNTRY SUB-NAV (chip row) ---------- */
.country-subnav {
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
  padding-bottom: 16px !important;
  margin: 24px 0 32px !important;
}
.country-subnav a {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.1) !important;
  color: var(--ink, #0C2E2B) !important;
  padding: 8px 14px !important;
  font: 500 13px/1 var(--font-body, 'Inter') !important;
}
.country-subnav a:hover {
  border-color: var(--accent, #B5521F) !important;
  color: var(--accent, #B5521F) !important;
}

/* ---------- SNAPSHOT GRID ---------- */
.snapshot {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin: 32px 0 40px !important;
}
.snapshot__item {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
}
.snapshot__label {
  color: var(--grey-500, #6B7280) !important;
  font: 500 11px/1.2 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
}
.snapshot__value {
  font: 600 22px/1.2 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.02em !important;
}

/* ---------- VISA / SALARY TABLES ---------- */
/* Wrap any visa-table/salary-table in a scrollable container so columns can
   breathe on narrow viewports without clipping. The table itself uses
   table-layout: auto so columns size to content, with a min-width that
   triggers horizontal scroll on small screens. */
.visa-table,
.salary-table {
  width: 100% !important;
  min-width: 720px !important;
  border-collapse: collapse !important;
  background: var(--paper, #FFFFFF) !important;
  font-size: 14px !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.05) !important;
  table-layout: auto !important;
  /* DO NOT add overflow:hidden here — clips horizontal scroll on the wrapping div */
}
/* Wrap with horizontal scroll container if not already wrapped */
.article-body > .visa-table,
.article-body > .salary-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.visa-table th,
.salary-table th {
  background: var(--cream, #F5F1E8) !important;
  font: 600 11px/1.3 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--grey-700, #3D4451) !important;
  padding: 14px 14px !important;
  border-bottom: 2px solid rgba(12, 46, 43, 0.1) !important;
  text-align: left !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
.visa-table td,
.salary-table td {
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
  color: var(--ink, #0C2E2B) !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
}
.visa-table tr:last-child td,
.salary-table tr:last-child td {
  border-bottom: none !important;
}
.visa-table tr:hover td,
.salary-table tr:hover td {
  background: rgba(181, 82, 31, 0.03) !important;
}
/* De-emphasize placeholder/empty cells (—, N/A, 0) — classified by td-classifier.js */
.visa-table td.td--empty,
.salary-table td.td--empty {
  color: var(--grey-300, #C8CCD2) !important;
  font-style: italic !important;
}
.visa-table .prog-name {
  font-weight: 600 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}
.visa-table .prog-name a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.3) !important;
  padding-bottom: 1px !important;
}
.visa-table .prog-name a:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}
/* The pre-existing wrapping div with overflow-x:auto inline — make sure it works */
div[style*="overflow-x:auto"] {
  margin: 24px 0 !important;
  border-radius: 12px !important;
}
div[style*="overflow-x:auto"] .visa-table,
div[style*="overflow-x:auto"] .salary-table {
  margin: 0 !important;
}

/* ---------- COL GRID (cost-of-living cards) ---------- */
.col-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin: 24px 0 32px !important;
}
.col-card {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
}
.col-card__city {
  font: 600 18px/1.2 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
}
.col-card__row {
  font-size: 13px !important;
  border-bottom: none !important;
  padding: 4px 0 !important;
  color: var(--grey-700, #3D4451) !important;
}
.col-card__row span:last-child {
  color: var(--ink, #0C2E2B) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---------- INFO-BOX (financial requirements etc) ---------- */
.info-box {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
  margin: 24px 0 !important;
}
.info-box__title {
  font: 600 14px/1 var(--font-body, 'Inter') !important;
  color: var(--accent, #B5521F) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.info-box p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 6px !important;
}

/* ---------- DOWNLOAD GRID ---------- */
.download-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin: 24px 0 !important;
}
.download-card {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  transition: all 0.2s !important;
}
.download-card:hover {
  border-color: var(--accent, #B5521F) !important;
  background: rgba(181, 82, 31, 0.02) !important;
  transform: translateY(-1px) !important;
}
.download-card__title {
  font: 600 13px/1.3 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.download-card__format {
  font-size: 11px !important;
  color: var(--grey-500, #6B7280) !important;
}

/* ---------- EXPLORE MORE ---------- */
.explore-more {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 14px !important;
  padding: 36px 32px !important;
  margin: 56px 0 !important;
}
.explore-more h2 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.explore-more ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.explore-more a {
  background: var(--cream, #F5F1E8) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font: 500 13px/1.4 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.explore-more a:hover {
  border-color: var(--accent, #B5521F) !important;
  background: var(--paper, #FFFFFF) !important;
  color: var(--accent, #B5521F) !important;
}

/* ---------- FAQ ACCORDIONS ---------- */
.article-faq {
  margin: 56px 0 !important;
}
.faq-item {
  border: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.faq-item:first-of-type {
  border-top: 1px solid rgba(12, 46, 43, 0.08) !important;
}
.faq-item summary {
  padding: 22px 0 !important;
  font: 500 17px/1.3 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
}
.faq-item summary:hover {
  background: transparent !important;
  color: var(--accent, #B5521F) !important;
}
.faq-item summary::after {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--accent, #B5521F) !important;
}
.faq-item p {
  padding: 0 0 22px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
  max-width: 720px !important;
}

/* ---------- ARTICLE-CTA (legacy green box) — soften ---------- */
.article-cta {
  background: var(--ink, #0C2E2B) !important;
  border-radius: 14px !important;
  padding: 40px 36px !important;
  margin: 48px 0 !important;
}
.article-cta h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.article-cta .btn {
  background: var(--accent, #B5521F) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.article-cta .btn:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ---------- AI SUMMARY (visually hidden) — preserve ---------- */
.ai-summary {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- BREADCRUMB ---------- */
nav[aria-label="Breadcrumb"],
.breadcrumb {
  font: 400 12px/1.4 var(--font-body, 'Inter') !important;
  color: var(--grey-500, #6B7280) !important;
  padding: 12px 0 !important;
}
nav[aria-label="Breadcrumb"] a,
.breadcrumb a {
  color: var(--grey-500, #6B7280) !important;
}
nav[aria-label="Breadcrumb"] a:hover,
.breadcrumb a:hover {
  color: var(--accent, #B5521F) !important;
}

/* ---------- LINKS in body content ---------- */
.article-body a:not(.btn):not(.download-card):not(.tier__cta) {
  color: var(--accent, #B5521F) !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25) !important;
  text-decoration: none !important;
  padding-bottom: 1px !important;
  transition: border-color 0.15s !important;
}
.article-body a:not(.btn):not(.download-card):not(.tier__cta):hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}

/* ---------- Mobile tweaks ---------- */
@media(max-width: 640px) {
  .article-header {
    padding: 32px 0 16px !important;
  }
  main h1, .article-header h1 {
    font-size: 30px !important;
  }
  main h2, .article-body h2 {
    font-size: 22px !important;
    margin: 40px 0 12px !important;
  }
  .snapshot__item {
    padding: 14px 16px !important;
  }
  .snapshot__value {
    font-size: 18px !important;
  }
}