/* WorldIDP — country guide template
   Layered on top of styles.css + what-is-idp.css. Layout only; no design tokens
   are redefined so the page stays consistent with the rest of the site. */

/* ---------------------------------------------------------------------------
   FIXED-HEADER CLEARANCE

   .site-header is position:fixed at top:18px (10px once scrolled) and is about
   68px tall, so roughly 86px of the viewport is covered before any content
   starts. Pages built on this template need to reserve that space themselves —
   a fixed header is out of flow and reserves nothing.

   The value lives in a custom property so there is one number to change if the
   header height ever moves, and so scroll-margin-top can reuse it: without that,
   clicking an in-page anchor scrolls the target underneath the header instead
   of below it.

   It deliberately matches the existing site convention. .wi-hero in
   what-is-idp.css already reserves clamp(118px, 13vw, 168px), which is how the
   guides, comparison and convention pages clear the same header. Using the same
   clamp here keeps every template visually aligned instead of introducing a
   second, competing offset.
   --------------------------------------------------------------------------- */
:root {
  --wi-header-clearance: clamp(118px, 13vw, 168px);
}

.cg {
  max-width: 76ch;
  margin: 0 auto;
  /* top padding clears the fixed header; the rest is normal page rhythm */
  padding: var(--wi-header-clearance) 1.25rem 4rem;
}

/* Anchor targets must land below the header, not behind it. */
.cg [id],
.cg-section[id],
.cg-term[id] {
  scroll-margin-top: calc(var(--wi-header-clearance) - 24px);
}


.cg-crumbs {
  font-size: .8125rem;
  color: #5b6b7f;
  margin-bottom: 1.25rem;
}
.cg-crumbs a { color: #5b6b7f; text-decoration: none; }
.cg-crumbs a:hover { text-decoration: underline; }
.cg-crumbs span { margin: 0 .35rem; }

.cg h1 {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

/* research-pending banner */
.cg-status {
  display: block;
  border-left: 3px solid #c9922b;
  background: #fdf7ec;
  color: #6b4e12;
  padding: .7rem .9rem;
  border-radius: 0 6px 6px 0;
  font-size: .875rem;
  margin: 0 0 1.25rem;
}

/* the extractable answer */
.cg-answer {
  background: #f4f7fc;
  border-left: 3px solid #0758d8;
  border-radius: 0 8px 8px 0;
  padding: 1.05rem 1.2rem;
  margin: 0 0 2.25rem;
}
.cg-answer p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #16243a;
}

.cg-section { margin: 0 0 2.4rem; }
.cg-section h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.3;
  margin: 0 0 .85rem;
  letter-spacing: -.01em;
}
.cg-section h3 {
  font-size: 1rem;
  margin: 1.35rem 0 .4rem;
}
.cg-section p { line-height: 1.68; margin: 0 0 .9rem; }

.cg-list { margin: 0 0 1rem; padding-left: 1.15rem; }
.cg-list li { line-height: 1.62; margin-bottom: .45rem; }

/* facts table */
.cg-facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: .9375rem;
}
.cg-facts th,
.cg-facts td {
  text-align: left;
  padding: .62rem .75rem;
  border-bottom: 1px solid #e3e9f2;
  vertical-align: top;
}
.cg-facts th {
  font-weight: 600;
  color: #16243a;
  width: 45%;
  background: #fafbfd;
}

.cg-unknown {
  font-size: .875rem;
  color: #5b6b7f;
  background: #fafbfd;
  border: 1px dashed #d5deea;
  border-radius: 6px;
  padding: .7rem .85rem;
}

.cg-sources { margin: 0 0 .85rem; padding-left: 1.15rem; }
.cg-sources li { margin-bottom: .4rem; line-height: 1.5; }
.cg-sources a { color: #0758d8; }

.cg-verified {
  font-size: .8125rem;
  color: #5b6b7f;
  border-top: 1px solid #e3e9f2;
  padding-top: .7rem;
}

.cg-faq-item { border-bottom: 1px solid #eef2f7; padding-bottom: .9rem; margin-bottom: .9rem; }
.cg-faq-item:last-child { border-bottom: 0; }
.cg-faq-item h3 { margin-top: 0; font-size: 1rem; }
.cg-faq-item p { margin-bottom: 0; }

.cg-cta {
  background: #fafbfd;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  padding: 1.35rem;
}
.cg-btn {
  display: inline-block;
  background: #0758d8;
  color: #fff;
  text-decoration: none;
  padding: .72rem 1.35rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9375rem;
}
.cg-btn:hover { background: #0646ad; }
.cg-btn:focus-visible { outline: 3px solid #93b4f0; outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  /* The header stays roughly the same height on narrow viewports, so the
     clearance is unchanged — only horizontal padding and type scale move. */
  .cg { padding: var(--wi-header-clearance) 1rem 3rem; }
  .cg-facts { font-size: .875rem; }
  .cg-facts th { width: 52%; }
  .cg-facts th, .cg-facts td { padding: .55rem .5rem; }
}

/* glossary */
.cg-term { border-bottom: 1px solid #eef2f7; padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.cg-term:last-child { border-bottom: 0; }
.cg-term h2 { font-size: 1.08rem; margin: 0 0 .5rem; }
.cg-term p { margin: 0 0 .35rem; }
.cg-alt { font-size: .8125rem; color: #5b6b7f; }