/* ==========================================================================
   Average IQ by Country — page-scoped layer.
   Loads AFTER jiq-home.css, which supplies every design token and the shared
   .hero / .strip / .blk / .final / .rv scaffolding. Nothing here redefines a
   token, so the two pages cannot drift apart.
   Scope: body.jiq-home-active.jiq-cw-active
   ========================================================================== */

body.jiq-cw-active{
  /* diverging IQ scale, centred on the dataset's own mean (~90).
     Blue vs orange is the safest pair for dichromatic vision. */
  --cw-b1:#0A2C50;  /* 100+   */
  --cw-b2:#1A4C82;  /* 95-100 */
  --cw-b3:#3D7AB8;  /* 90-95  */
  --cw-b4:#93BADF;  /* 85-90  */
  --cw-b5:#F7D9A6;  /* 80-85  */
  --cw-b6:#F0A45A;  /* 75-80  */
  --cw-b7:#D4602A;  /* <75    */
  --cw-b0:#E3EAF3;  /* no data */
}

/* ---------- breadcrumb + eyebrow are inherited from jiq-about.css ---------- */

/* visually hidden but still announced — used on <caption> */
body.jiq-cw-active .sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ================= hero: the map IS the hero visual ================= */
body.jiq-cw-active .cw-hero-visual{position:relative}
body.jiq-cw-active .cw-hero-map{
  position:relative;border-radius:26px;padding:26px 22px 20px;
  background:linear-gradient(155deg,rgba(20,60,105,.72),rgba(7,30,54,.86));
  border:1px solid rgba(139,175,214,.3);
  box-shadow:0 50px 100px -40px rgba(3,14,26,.9),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.jiq-cw-active .cw-hero-map .cw-worldsvg{filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
body.jiq-cw-active .cw-hero-map .cw-worldsvg path{stroke:rgba(7,30,54,.85);stroke-width:.6}
body.jiq-cw-active .cw-hero-caption{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(139,175,214,.22);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8FA9C6;
}

/* ================= colour scale legend ================= */
body.jiq-cw-active .cw-legend{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
body.jiq-cw-active .cw-legend .sw{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
body.jiq-cw-active .cw-legend .sw i{
  display:block;width:12px;height:12px;border-radius:3px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
body.jiq-cw-active .cw-legend-dark .sw{color:#A9C3DE}
body.jiq-cw-active .cw-legend-dark .sw i{box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* ================= key takeaways ================= */
body.jiq-cw-active .cw-key{
  margin-top:44px;background:#fff;border-radius:24px;padding:34px 38px 30px;
  border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(12,49,88,.28);
  position:relative;overflow:hidden;
}
body.jiq-cw-active .cw-key::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold-grad);
}
body.jiq-cw-active .cw-key h2{font-size:22px !important;margin-bottom:18px;max-width:none}
body.jiq-cw-active .cw-key ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 34px}
/* NOT display:flex — these <li>s hold mixed inline content (<b>, <em>, text),
   and flex promotes every text run and element to its own flex item, which
   shreds the sentence into narrow columns once the track is constrained.
   Absolute-positioned bullet keeps the content in normal inline flow. */
body.jiq-cw-active .cw-key li{
  position:relative;padding-left:22px;font-size:15.5px;line-height:1.65;color:var(--ink);
  min-width:0;
}
body.jiq-cw-active .cw-key li b{color:var(--navy);font-variant-numeric:tabular-nums}
body.jiq-cw-active .cw-key li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--gold-grad);box-shadow:0 0 0 4px rgba(245,166,35,.16);
}

/* ================= the big map figure ================= */
body.jiq-cw-active .cw-mapfig{
  margin-top:46px;background:#fff;border-radius:26px;padding:30px 34px 24px;
  border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(12,49,88,.3);
}
body.jiq-cw-active .cw-mapfig-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px;
}
body.jiq-cw-active .cw-mapfig-head h3{font-size:20px;margin-bottom:4px}
body.jiq-cw-active .cw-mapfig-head p{font-size:13.5px;color:var(--muted)}
body.jiq-cw-active .cw-mapstage{position:relative;background:var(--cool);border-radius:18px;padding:14px 12px;overflow:hidden}
body.jiq-cw-active .cw-worldsvg{width:100%;height:auto;display:block}
body.jiq-cw-active .cw-worldsvg path,
body.jiq-cw-active .cw-worldsvg circle{fill:var(--cw-b0);stroke:#fff;stroke-width:.5;transition:fill .18s,opacity .18s}
body.jiq-cw-active .cw-worldsvg .b1{fill:var(--cw-b1)}
body.jiq-cw-active .cw-worldsvg .b2{fill:var(--cw-b2)}
body.jiq-cw-active .cw-worldsvg .b3{fill:var(--cw-b3)}
body.jiq-cw-active .cw-worldsvg .b4{fill:var(--cw-b4)}
body.jiq-cw-active .cw-worldsvg .b5{fill:var(--cw-b5)}
body.jiq-cw-active .cw-worldsvg .b6{fill:var(--cw-b6)}
body.jiq-cw-active .cw-worldsvg .b7{fill:var(--cw-b7)}
body.jiq-cw-active .cw-worldsvg .mk{stroke:#fff;stroke-width:1.1}
@media(hover:hover){
  body.jiq-cw-active .cw-mapstage:hover .cw-worldsvg path[data-iq],
  body.jiq-cw-active .cw-mapstage:hover .cw-worldsvg circle[data-iq]{opacity:.55}
  body.jiq-cw-active .cw-worldsvg path[data-iq]:hover,
  body.jiq-cw-active .cw-worldsvg circle[data-iq]:hover{opacity:1;stroke:var(--navy);stroke-width:1.1;cursor:pointer}
}
body.jiq-cw-active .cw-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-125%);
  background:var(--navy);color:#fff;border-radius:12px;padding:9px 14px;white-space:nowrap;z-index:5;
  box-shadow:0 18px 34px -14px rgba(5,22,39,.6);transition:opacity .14s;
}
body.jiq-cw-active .cw-tip.on{opacity:1}
body.jiq-cw-active .cw-tip b{display:block;font-family:var(--serif);font-size:15px;line-height:1.25}
body.jiq-cw-active .cw-tip span{font-size:12px;color:#A9C3DE;font-variant-numeric:tabular-nums}
body.jiq-cw-active .cw-maplegend{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
body.jiq-cw-active .cw-maplegend .note{font-size:12.5px;color:var(--faint);max-width:34em;line-height:1.6}

/* ================= podium (top 3) ================= */
body.jiq-cw-active .cw-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px;align-items:end}
body.jiq-cw-active .cw-pod{
  position:relative;border-radius:22px;padding:30px 24px 26px;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,#fff,#FBF7F1);border:1px solid var(--line);
  box-shadow:0 26px 54px -30px rgba(12,49,88,.3);
}
body.jiq-cw-active .cw-pod-1{
  background:linear-gradient(158deg,#123F6E,#071E36);border-color:rgba(139,175,214,.3);color:#fff;
  padding:40px 24px 34px;box-shadow:0 44px 84px -34px rgba(5,22,39,.7);
}
body.jiq-cw-active .cw-pod-1::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.8),transparent);
}
body.jiq-cw-active .cw-pod .rankno{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:16px;
  font-weight:800;font-size:14px;background:var(--cool);color:var(--navy);
}
body.jiq-cw-active .cw-pod-1 .rankno{background:var(--gold-grad);color:#fff;box-shadow:0 10px 22px -8px rgba(228,85,31,.6)}
body.jiq-cw-active .cw-pod img.flag{
  width:64px;height:43px;margin:0 auto 14px;border-radius:5px;
  box-shadow:0 8px 18px -6px rgba(5,22,39,.45),0 0 0 1px rgba(0,0,0,.08);
}
body.jiq-cw-active .cw-pod h3{font-size:19px;margin-bottom:2px}
body.jiq-cw-active .cw-pod-1 h3{color:#fff;font-size:22px}
body.jiq-cw-active .cw-pod .score{
  font-family:var(--serif);font-size:36px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;margin-top:10px;letter-spacing:-.01em;
}
body.jiq-cw-active .cw-pod-1 .score{
  font-size:43px;background:linear-gradient(120deg,#FFF 20%,#CFE0F2 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.jiq-cw-active .cw-pod .lab{
  display:block;margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
body.jiq-cw-active .cw-pod-1 .lab{color:#8FA9C6}

/* ================= ranked bar list ================= */
body.jiq-cw-active .cw-bars{margin-top:40px;display:grid;gap:9px}
body.jiq-cw-active .cw-bar{
  display:grid;grid-template-columns:38px 30px minmax(0,1fr) 74px;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 18px 10px 14px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
@media(hover:hover){
  body.jiq-cw-active .cw-bar:hover{transform:translateX(4px);border-color:#DCD3C6;box-shadow:0 16px 30px -18px rgba(12,49,88,.4)}
}
body.jiq-cw-active .cw-bar .no{font-size:13px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
body.jiq-cw-active .cw-bar img{width:30px;height:20px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
body.jiq-cw-active .cw-bar .nm{display:flex;align-items:center;gap:12px;min-width:0}
body.jiq-cw-active .cw-bar .nm b{font-size:15px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.jiq-cw-active .cw-bar .track{display:block;flex:1;height:9px;border-radius:5px;background:var(--cool);overflow:hidden;min-width:40px}
body.jiq-cw-active .cw-bar .fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1A4C82,#3D7AB8)}
body.jiq-cw-active .cw-bar.hi .fill{background:var(--gold-grad)}
body.jiq-cw-active .cw-bar .val{
  text-align:right;font-family:var(--serif);font-size:19px;color:var(--navy);font-variant-numeric:tabular-nums;
}

/* ================= searchable full table ================= */
body.jiq-cw-active .cw-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  box-shadow:0 20px 44px -30px rgba(12,49,88,.32);
}
body.jiq-cw-active .cw-search{
  flex:1 1 260px;display:flex;align-items:center;gap:11px;min-width:0;
  background:var(--cool);border:1px solid var(--line-cool);border-radius:999px;padding:11px 18px;
}
body.jiq-cw-active .cw-search svg{flex:0 0 auto;stroke:var(--faint)}
body.jiq-cw-active .cw-search input{
  border:0;outline:0;background:transparent;font-family:var(--sans);font-size:16px;
  color:var(--ink);width:100%;min-width:0;min-height:24px;
}
body.jiq-cw-active .cw-chips{display:flex;gap:8px;flex-wrap:wrap}
body.jiq-cw-active .cw-chip{
  border:1px solid var(--line-cool);background:#fff;color:var(--muted);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:var(--sans);transition:all .18s;white-space:nowrap;min-height:40px;
}
@media(hover:hover){body.jiq-cw-active .cw-chip:hover{border-color:var(--gold-2);color:var(--gold-3)}}
body.jiq-cw-active .cw-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
body.jiq-cw-active .cw-tablewrap{
  margin-top:18px;background:#fff;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 64px -36px rgba(12,49,88,.32);
}
body.jiq-cw-active .cw-tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:760px;overflow-y:auto}
body.jiq-cw-active table.cw-table{width:100%;border-collapse:collapse;font-size:15px}
body.jiq-cw-active table.cw-table thead th{
  position:sticky;top:0;z-index:2;background:var(--navy);color:#fff;text-align:left;
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 18px;white-space:nowrap;cursor:pointer;user-select:none;
}
body.jiq-cw-active table.cw-table thead th .ar{opacity:.35;margin-left:6px;font-size:9px}
body.jiq-cw-active table.cw-table thead th.sorted .ar{opacity:1;color:var(--gold)}
body.jiq-cw-active table.cw-table tbody td{padding:12px 18px;border-top:1px solid var(--line);vertical-align:middle}
body.jiq-cw-active table.cw-table tbody tr:nth-child(even){background:#FCFAF7}
@media(hover:hover){body.jiq-cw-active table.cw-table tbody tr:hover{background:var(--warm)}}
body.jiq-cw-active table.cw-table .c-rank{width:64px;color:var(--faint);font-weight:800;font-variant-numeric:tabular-nums}
body.jiq-cw-active table.cw-table .c-country{font-weight:700;color:var(--navy)}
body.jiq-cw-active table.cw-table .c-country span{display:inline-flex;align-items:center;gap:12px}
body.jiq-cw-active table.cw-table .c-country .cw-cn{font-weight:700;min-width:0}
/* second line only exists on phones, where the Sample column is dropped */
body.jiq-cw-active .cw-samp-m{display:none}
body.jiq-cw-active table.cw-table .c-country img{width:28px;height:19px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.1);flex:0 0 auto}
body.jiq-cw-active table.cw-table .c-iq{
  font-family:var(--serif);font-size:18px;color:var(--navy);font-variant-numeric:tabular-nums;width:110px;
}
body.jiq-cw-active table.cw-table .c-region{color:var(--muted);font-size:14px;white-space:nowrap}
/* Flags: real flags range from 1:1 (Switzerland) to 2:1 (UK), so a hardcoded
   width/height renders rows at ragged heights. Fix the box and letterbox
   inside it with object-fit:contain — uniform rows, no distortion, no CLS. */
body.jiq-cw-active img[src*="flagcdn"]{object-fit:contain;background:#F3F7FC}
body.jiq-cw-active img[data-flag-missing]{background:#E3EAF3;border-radius:3px}

/* provenance markers + sample column */
body.jiq-cw-active .cw-imp{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-decoration:none;
  border:0;cursor:help;vertical-align:1px;white-space:nowrap;
}
body.jiq-cw-active .cw-imp-estimated{background:#FBE3D6;color:#B4491D}
body.jiq-cw-active .cw-imp-assessment{background:#E3EAF3;color:#3A5A7C}
body.jiq-cw-active .c-samp{
  font-size:13.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}
body.jiq-cw-active .c-samp .cw-sub{color:var(--faint);font-size:12.5px}
body.jiq-cw-active .c-samp .cw-none{color:var(--faint);font-style:italic}
body.jiq-cw-active .cw-chip-alt{border-color:#E3D2BE;color:var(--gold-3);background:#FFF8EE}
body.jiq-cw-active .cw-chip-alt[aria-pressed="true"]{background:var(--gold-grad);border-color:transparent;color:#fff}
body.jiq-cw-active .cw-band{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;
}
body.jiq-cw-active .cw-band i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
body.jiq-cw-active .cw-tablefoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 22px;border-top:1px solid var(--line);background:#FCFAF7;
  font-size:13px;color:var(--muted);
}
body.jiq-cw-active .cw-empty{padding:46px 22px;text-align:center;color:var(--muted);font-size:15px}

/* ================= region cards ================= */
body.jiq-cw-active .cw-regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
body.jiq-cw-active .cw-reg{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 26px 24px;
  box-shadow:0 22px 48px -32px rgba(12,49,88,.3);
}
body.jiq-cw-active .cw-reg-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
body.jiq-cw-active .cw-reg h3{font-size:17px}
body.jiq-cw-active .cw-reg .avg{font-family:var(--serif);font-size:28px;color:var(--navy);font-variant-numeric:tabular-nums}
body.jiq-cw-active .cw-reg .track{display:block;height:8px;border-radius:4px;background:var(--cool);overflow:hidden;margin:12px 0 14px}
body.jiq-cw-active .cw-reg .fill{display:block;height:100%;border-radius:4px}
body.jiq-cw-active .cw-reg p{font-size:14.5px;color:var(--muted);line-height:1.7}
body.jiq-cw-active .cw-reg .meta{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}

/* ================= drivers ================= */
body.jiq-cw-active .cw-drivers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
body.jiq-cw-active .cw-driver{
  display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 26px 24px;
  box-shadow:0 22px 48px -32px rgba(12,49,88,.28);
}
body.jiq-cw-active .cw-driver .ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--gold-grad);color:#fff;
  box-shadow:0 12px 24px -9px rgba(228,85,31,.55),inset 0 1.5px 0 rgba(255,255,255,.4);
}
body.jiq-cw-active .cw-driver > div{min-width:0}
body.jiq-cw-active .cw-driver h3{font-size:17.5px;margin-bottom:8px;overflow-wrap:anywhere}
body.jiq-cw-active .cw-driver p{font-size:15px;color:var(--muted);line-height:1.7}
body.jiq-cw-active .cw-driver .fig{
  display:inline-block;margin-top:12px;font-family:var(--serif);font-size:15px;color:var(--gold-3);
}

/* ================= inline CTA band ================= */
body.jiq-cw-active .cw-cta{
  position:relative;overflow:hidden;margin-top:48px;border-radius:26px;padding:38px 42px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(150deg,#123F6E 0%,#0C3158 52%,#071E36 100%);color:#fff;
  box-shadow:0 44px 88px -40px rgba(5,22,39,.7);
}
body.jiq-cw-active .cw-cta::before{
  content:"";position:absolute;width:420px;height:260px;right:-6%;top:-70%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,166,35,.32),transparent);filter:blur(40px);pointer-events:none;
}
body.jiq-cw-active .cw-cta-tx{position:relative;z-index:2;max-width:38em}
body.jiq-cw-active .cw-cta h3{color:#fff;font-size:24px;margin-bottom:8px}
body.jiq-cw-active .cw-cta p{color:#AFC4DC;font-size:15.5px;line-height:1.68}
body.jiq-cw-active .cw-cta .btn{position:relative;z-index:2;flex:0 0 auto}

/* ================= callout ================= */
body.jiq-cw-active .cw-callout{
  margin-top:40px;background:linear-gradient(150deg,#FFF8EE,#FFF3E2);
  border:1px solid #F3DDBC;border-radius:22px;padding:30px 34px;display:flex;gap:20px;
}
body.jiq-cw-active .cw-callout .ic{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--gold-grad);color:#fff;box-shadow:0 10px 22px -9px rgba(228,85,31,.55);
}
body.jiq-cw-active .cw-callout h3{font-size:18.5px;margin-bottom:8px}
body.jiq-cw-active .cw-callout p{font-size:15.5px;color:#6B5A44;line-height:1.72}
body.jiq-cw-active .cw-callout p + p{margin-top:10px}

/* ================= FAQ accordion ================= */
body.jiq-cw-active .cw-faq{margin-top:40px;display:grid;gap:12px}
body.jiq-cw-active details.cw-q{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(12,49,88,.3);
}
body.jiq-cw-active details.cw-q summary{
  cursor:pointer;list-style:none;padding:22px 60px 22px 26px;position:relative;
  font-family:var(--serif);font-size:17.5px;font-weight:700;color:var(--navy);line-height:1.45;
}
body.jiq-cw-active details.cw-q summary::-webkit-details-marker{display:none}
body.jiq-cw-active details.cw-q summary::after{
  content:"";position:absolute;right:26px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--gold-2);border-bottom:2.4px solid var(--gold-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
body.jiq-cw-active details.cw-q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
body.jiq-cw-active details.cw-q .a{padding:0 26px 24px;color:var(--muted);font-size:15.5px;line-height:1.75}
body.jiq-cw-active details.cw-q .a p + p{margin-top:12px}
body.jiq-cw-active details.cw-q .a a{color:var(--gold-3);font-weight:700;border-bottom:1px solid rgba(228,85,31,.3)}

/* ================= sources ================= */
body.jiq-cw-active .cw-src{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 34px}
body.jiq-cw-active .cw-src h3{font-size:17px;margin-bottom:16px}
body.jiq-cw-active .cw-src ol{margin-left:20px;color:var(--muted);font-size:14.5px;line-height:1.85}
body.jiq-cw-active .cw-src li{padding-left:4px}
body.jiq-cw-active .cw-src li b{color:var(--navy)}
body.jiq-cw-active a.cw-cite{
  display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 9px;
  border-radius:999px;background:var(--cool);border:1px solid var(--line-cool);
  color:var(--gold-3);font-size:12px;font-weight:800;white-space:nowrap;text-decoration:none;
  min-height:30px;
}
@media(hover:hover){body.jiq-cw-active a.cw-cite:hover{background:var(--warm);border-color:#E8CFA8}}
body.jiq-cw-active .cw-updated{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:12.5px;
  font-weight:700;color:var(--faint);
}

/* ================= prose ================= */
body.jiq-cw-active .cw-p{color:var(--muted);font-size:16.5px;line-height:1.8;max-width:44em;margin-top:20px}
body.jiq-cw-active .cw-p b{color:var(--navy)}
body.jiq-cw-active .cw-p a{color:var(--gold-3);font-weight:700;border-bottom:1px solid rgba(228,85,31,.28)}
@media(hover:hover){body.jiq-cw-active .cw-p a:hover{border-bottom-color:var(--gold-2)}}
body.jiq-cw-active .cw-h3{margin-top:38px;font-size:22px}

/* ================= responsive ================= */
/* jiq-home.css keeps the desktop menu down to 760px, but logo + 6 links + CTA
   need ~860px: between 761 and ~860 the "Start IQ Test" button is squeezed to
   48px and overflows the pill by 4px. Collapse to the approved mobile sheet
   earlier here — same links, same styling, just switched sooner. */
@media (min-width:761px) and (max-width:900px){
  body.jiq-cw-active .menu{display:none}
  body.jiq-cw-active .burger{display:grid}
}

/* ================= responsive (page components) ================= */
@media (max-width:1040px){
  body.jiq-cw-active .cw-key ul{grid-template-columns:minmax(0,1fr)}
  body.jiq-cw-active .cw-regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.jiq-cw-active .cw-drivers{grid-template-columns:minmax(0,1fr)}
  body.jiq-cw-active .cw-podium{gap:14px}
}
@media (max-width:760px){
  body.jiq-cw-active .cw-key{padding:24px 22px;border-radius:20px;margin-top:30px}
  body.jiq-cw-active .cw-key h2{font-size:19px !important}
  body.jiq-cw-active .cw-key li{font-size:14.5px}
  body.jiq-cw-active .cw-mapfig{padding:20px 16px 16px;border-radius:20px;margin-top:30px}
  body.jiq-cw-active .cw-mapstage{padding:8px 4px;border-radius:14px}
  body.jiq-cw-active .cw-hero-map{padding:16px 12px 12px;border-radius:20px}
  body.jiq-cw-active .cw-legend{gap:5px 9px}
  body.jiq-cw-active .cw-legend .sw{font-size:10.5px;gap:5px}
  body.jiq-cw-active .cw-legend .sw i{width:10px;height:10px}
  body.jiq-cw-active .cw-podium{grid-template-columns:1fr;gap:14px;align-items:stretch}
  body.jiq-cw-active .cw-pod{padding:22px 20px 20px;border-radius:18px}
  body.jiq-cw-active .cw-pod-1{padding:26px 20px 24px}
  body.jiq-cw-active .cw-pod .score{font-size:32px}
  body.jiq-cw-active .cw-pod-1 .score{font-size:36px}
  body.jiq-cw-active .cw-bar{grid-template-columns:28px 24px minmax(0,1fr) 56px;gap:9px;padding:9px 12px 9px 10px;border-radius:12px}
  body.jiq-cw-active .cw-bar .nm b{font-size:13.5px}
  body.jiq-cw-active .cw-bar .val{font-size:16px}
  body.jiq-cw-active .cw-bar img{width:24px;height:16px}
  body.jiq-cw-active .cw-bar .track{display:none}
  body.jiq-cw-active .cw-controls{padding:12px;border-radius:16px;margin-top:28px;gap:10px}
  body.jiq-cw-active .cw-chips{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  body.jiq-cw-active .cw-chip{padding:8px 13px;font-size:12px;min-height:40px}
  body.jiq-cw-active table.cw-table{font-size:13.5px}
  body.jiq-cw-active table.cw-table thead th{padding:12px 12px;font-size:10px;letter-spacing:.1em}
  body.jiq-cw-active table.cw-table tbody td{padding:10px 12px}
  body.jiq-cw-active table.cw-table .c-rank{width:44px}
  body.jiq-cw-active table.cw-table .c-iq{font-size:16px;width:76px}
  body.jiq-cw-active table.cw-table .c-country img{width:22px;height:15px}
  body.jiq-cw-active .cw-regions{grid-template-columns:minmax(0,1fr);gap:14px}
  body.jiq-cw-active .cw-reg{padding:22px 20px 20px;border-radius:16px}
  body.jiq-cw-active .cw-driver{padding:22px 20px;gap:14px;border-radius:16px;flex-direction:column}
  body.jiq-cw-active .cw-driver .ic{width:44px;height:44px;border-radius:13px}
  body.jiq-cw-active .cw-cta{padding:28px 22px;border-radius:20px;margin-top:32px;text-align:left}
  body.jiq-cw-active .cw-cta h3{font-size:20px}
  body.jiq-cw-active .cw-cta .btn{width:100%}
  body.jiq-cw-active .cw-callout{padding:22px 20px;border-radius:18px;flex-direction:column;gap:14px}
  body.jiq-cw-active details.cw-q summary{padding:18px 48px 18px 20px;font-size:15.5px}
  body.jiq-cw-active details.cw-q summary::after{right:20px}
  body.jiq-cw-active details.cw-q .a{padding:0 20px 20px;font-size:14.5px}
  body.jiq-cw-active .cw-src{padding:22px 20px;border-radius:18px}
  body.jiq-cw-active .cw-src ol{font-size:13.5px}
  body.jiq-cw-active .cw-p{font-size:15.5px}
  body.jiq-cw-active .cw-h3{font-size:19px;margin-top:30px}
  body.jiq-cw-active .cw-tablescroll{max-height:560px}
}

@media (max-width:560px){
  /* Rank + Country + IQ only: four columns cannot fit 375px without clipping
     the score. Region and Sample are folded into the country cell instead. */
  body.jiq-cw-active table.cw-table th:nth-child(4),
  body.jiq-cw-active table.cw-table td:nth-child(4),
  body.jiq-cw-active table.cw-table th:nth-child(5),
  body.jiq-cw-active table.cw-table td:nth-child(5){display:none}
  body.jiq-cw-active table.cw-table .c-country span{align-items:flex-start;gap:9px}
  body.jiq-cw-active table.cw-table .c-country img{margin-top:2px}
  body.jiq-cw-active .cw-samp-m{
    display:block;font-style:normal;font-weight:600;font-size:11.5px;color:var(--faint);
    margin-top:2px;line-height:1.3;
  }
  body.jiq-cw-active .cw-samp-m .cw-sub{color:var(--faint)}
  body.jiq-cw-active .cw-samp-m .cw-none{font-style:italic}
  body.jiq-cw-active .cw-imp{margin-left:6px;padding:2px 6px;font-size:10.5px}
  body.jiq-cw-active table.cw-table thead th{padding:11px 9px}
  body.jiq-cw-active table.cw-table tbody td{padding:9px}
  body.jiq-cw-active table.cw-table .c-rank{width:34px}
  body.jiq-cw-active table.cw-table .c-iq{width:60px;font-size:15.5px}
  body.jiq-cw-active table.cw-table .c-region{white-space:normal;font-size:12.5px;line-height:1.35}
  body.jiq-cw-active table.cw-table .c-country span{gap:9px}
  body.jiq-cw-active table.cw-table .c-iq{width:66px}
}

/* ================= chart type at small widths =================
   Charts use a ~900-unit viewBox. On a 375px phone that scales to about 0.36,
   so a 14-unit label renders at 5px. font-size on SVG <text> is in user units,
   so scaling the labels up here restores legibility without touching desktop. */
@media (max-width:760px){
  body.jiq-cw-active .ab-figure svg .t-share{font-size:25px}
  body.jiq-cw-active .ab-figure svg .t-axis{font-size:21px}
  body.jiq-cw-active .ab-figure svg .t-cap{font-size:17px;letter-spacing:.4px}
  body.jiq-cw-active .ab-figure svg .t-pct{display:none}   /* second scale is clutter at this size */
}
@media (max-width:420px){
  body.jiq-cw-active .ab-figure svg .t-share{font-size:28px}
  body.jiq-cw-active .ab-figure svg .t-axis{font-size:23px}
  body.jiq-cw-active .ab-figure svg .t-cap{font-size:18px;letter-spacing:0}
}

/* ================= compact CTA blocks on phones =================
   jiq-home.css sizes the final card for a desktop hero: 64px of vertical
   padding, an 18px lede and a 30px-gap meta row that stacks into three tall
   lines. On a 375px screen that renders as a very stretched full-screen slab. */
@media (max-width:760px){
  body.jiq-cw-active .final{padding-top:70px}
  body.jiq-cw-active .final-card{padding:40px 20px 34px;border-radius:24px}
  body.jiq-cw-active .final-card h2{font-size:clamp(26px,7.4vw,32px);line-height:1.16;margin-bottom:12px}
  body.jiq-cw-active .final-card p{font-size:15px;line-height:1.6;margin:0 auto 24px;max-width:30em}
  body.jiq-cw-active .final-card .btn-lg{width:100%;font-size:15.5px;padding:15px 22px}
  body.jiq-cw-active .final-meta{
    gap:9px 16px;margin-top:22px;font-size:12.5px;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
  }
  body.jiq-cw-active .final-meta span{gap:6px}
  body.jiq-cw-active .final-meta svg{width:14px;height:14px}

  /* the inline CTA bands get the same treatment */
  body.jiq-cw-active .cw-cta{padding:26px 20px 24px;gap:18px}
  body.jiq-cw-active .cw-cta h3{font-size:19px;line-height:1.24;margin-bottom:6px}
  body.jiq-cw-active .cw-cta p{font-size:14.5px;line-height:1.6}
}
@media (max-width:420px){
  body.jiq-cw-active .final-card h2{font-size:25px}
  body.jiq-cw-active .final-card p{font-size:14.5px;margin-bottom:20px}
  body.jiq-cw-active .final-meta{font-size:11.5px;gap:8px 12px}
}

/* ================= compact contents + FAQ on phones =================
   jiq-about.css drops the table of contents to a single column below 560px,
   which turns 15 links into 849px of scrolling. Two columns with tighter rows
   brings it back to roughly a third of that. */
@media (max-width:760px){
  body.jiq-cw-active .ab-toc{padding:20px 18px}
  body.jiq-cw-active .ab-toc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  body.jiq-cw-active .ab-toc-list a{
    font-size:13.5px;padding:9px 0;gap:8px;line-height:1.3;align-items:flex-start;
  }
  body.jiq-cw-active .ab-toc-list a::before{font-size:10.5px;padding-top:1px}
  body.jiq-cw-active .ab-toc-list a::after{display:none}  /* arrow costs a column of width */

  body.jiq-cw-active details.cw-q summary{padding:15px 42px 15px 18px;font-size:15px;line-height:1.35}
  body.jiq-cw-active details.cw-q summary::after{right:17px;width:9px;height:9px}
  body.jiq-cw-active details.cw-q .a{padding:0 18px 17px;font-size:14.5px}
  body.jiq-cw-active .cw-faq{gap:9px}
}

@media (max-width:760px){
  body.jiq-cw-active .fcol a{white-space:normal;line-height:1.35}
}

/* ---- tap targets: both measured just under 40px on a 375px viewport ---- */
@media (max-width:760px){
  body.jiq-cw-active .ab-toc-list a{padding:14px 0}
  body.jiq-cw-active a.cw-cite{padding:9px 12px;min-height:40px}
}


/* ==========================================================================
   Theme integration — verified live on iqmetrics.org, not defensive guesses.
   ========================================================================== */

/* The theme prints an empty <footer class="entry-footer"> stub after the
   content: 27px of dead space between our footer and the page end. */
body.jiq-cw-active .entry-footer{display:none !important}

/* Something in the theme/font stack sets Enriqueta on <body> with enough
   weight to beat body.jiq-home-active's font-family, so the whole page
   rendered in the serif face. --sans resolves correctly; only the cascade is
   the problem, hence !important rather than a new variable. */
body.jiq-cw-active,
body.jiq-cw-active p,
body.jiq-cw-active a,
body.jiq-cw-active span,
body.jiq-cw-active li,
body.jiq-cw-active td,
body.jiq-cw-active th,
body.jiq-cw-active button,
body.jiq-cw-active input,
body.jiq-cw-active abbr,
body.jiq-cw-active label{font-family:var(--sans) !important}
body.jiq-cw-active h1,
body.jiq-cw-active h2,
body.jiq-cw-active h3,
body.jiq-cw-active h4,
body.jiq-cw-active .cw-pod .score,
body.jiq-cw-active .cw-reg .avg,
body.jiq-cw-active .cw-bar .val,
body.jiq-cw-active table.cw-table .c-iq,
body.jiq-cw-active .cw-tip b,
body.jiq-cw-active .strip-item .tx b,
body.jiq-cw-active details.cw-q summary{font-family:var(--serif) !important}