/* ==========================================================================
   Single post — theme: single-{post_type}.php
   Shared across all five sections; only --accent and the fact rows differ.
   ========================================================================== */

.post-layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1000px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-10); }
}

/* --- Header -------------------------------------------------------------- */
.post-header { margin-bottom: var(--s-6); }
.post-header__meta {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.post-header h1 {
  font-size: var(--fs-2xl); text-wrap: balance;
}
@media (min-width: 768px) { .post-header h1 { font-size: var(--fs-3xl); } }
.post-header__sub {
  display: flex; align-items: center; gap: var(--s-2) var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-4);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.post-header__sub span { display: inline-flex; align-items: center; gap: var(--s-2); }
.post-header__sub svg { width: 13px; height: 13px; opacity: .7; }

/* --- Urdu toggle. Spec 4.1 ----------------------------------------------
   Deliberately the most tactile control on the page: a reader who wants Urdu
   should spot it without hunting. It is a link to /ur/<slug>/, not a script
   toggle, and it renders only when Urdu fields exist.
   The label needs an Arabic-script face; the heavy Nastaliq webfont is loaded
   only on /ur/ views, so this stack falls back to a system face here.
   ------------------------------------------------------------------------ */
.urdu-toggle {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-family: "Gulzar", "Noto Nastaliq Urdu", "Geeza Pro", "Urdu Typesetting", serif;
  font-size: var(--fs-lg); line-height: 2;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-500) 88%, #fff),
    var(--brand-600));
  border: 0; border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 3px 0 var(--brand-700),
    0 6px 14px color-mix(in srgb, var(--brand-700) 40%, transparent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.urdu-toggle:hover { transform: translateY(-1px); }
.urdu-toggle:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 var(--brand-700);
}
.urdu-toggle__latin {
  font-family: var(--font-en); font-size: var(--fs-xs);
  opacity: .8; letter-spacing: .04em; text-transform: uppercase;
}

/* --- Action bar ---------------------------------------------------------
   One primary action, the rest quiet. Ad units never sit in this band. */
.post-actions {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding-block: var(--s-4);
  border-block: 1px solid var(--border);
  margin-bottom: var(--s-6);
}
.post-actions__spacer { margin-inline-start: auto; }

/* --- Hero image ---------------------------------------------------------- */
.post-hero {
  position: relative; aspect-ratio: 16/7; overflow: hidden;
  border-radius: var(--r-lg); margin-bottom: var(--s-6);
  background: var(--bg-sunken);
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-hero figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  font-size: 11px; color: rgba(255,255,255,.8);
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
}

/* --- At a glance --------------------------------------------------------- */
.facts {
  display: grid; gap: var(--s-1);
  grid-template-columns: 1fr;
  padding: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--s-8);
}
@media (min-width: 620px) { .facts { grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-8); } }
/* Two columns need real width. In a narrow work column (the moderation
   review pane) they crush the values, so stack there. */
.facts--stack { grid-template-columns: 1fr !important; }
.facts--stack .facts__row dt { width: 96px; }
.facts--stack .facts__row:last-child { border-bottom: 0; }
.facts__row {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.facts__row dt { flex: none; width: 116px; color: var(--text-muted); }
.facts__row dd { font-weight: var(--fw-medium); margin: 0; }
.facts__tel { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.facts__tel:hover { text-decoration-thickness: 2px; }
.facts__verify {
  display: block; margin-top: var(--s-1);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.facts__verify:hover { text-decoration-thickness: 2px; }
.prose a[href^="tel:"] { color: var(--accent); font-weight: var(--fw-semi); white-space: nowrap; }
@media (min-width: 620px) {
  /* Two columns, so the bottom edge is the last one or two rows depending on
     whether the fact count is odd. This covers both. */
  .facts__row:last-child,
  .facts__row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* --- Requirements checklist — the signature widget. Spec 6.1 ------------- */
.checklist {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: var(--s-8);
}
.checklist__head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.checklist__head svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.checklist__head b { font-size: var(--fs-md); color: var(--accent); }
.checklist__progress {
  margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--accent); font-variant-numeric: tabular-nums;
}
.checklist__bar {
  width: 68px; height: 5px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  overflow: hidden;
}
.checklist__bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: inherit;
  transition: width var(--dur-slow) var(--ease);
}
.checklist__body { background: var(--surface); padding: var(--s-2) var(--s-3); }
.checklist__group {
  font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: var(--s-4) var(--s-2) var(--s-2);
}
.checkitem {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.checkitem:hover { background: var(--surface-alt); }
.checkitem input { position: absolute; opacity: 0; pointer-events: none; }
.checkitem__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: 6px;
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.checkitem__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.5); transition: all var(--dur-fast) var(--ease); }
.checkitem input:checked + .checkitem__box { background: var(--accent); border-color: var(--accent); }
.checkitem input:checked + .checkitem__box svg { opacity: 1; transform: scale(1); }
.checkitem input:focus-visible + .checkitem__box { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.checkitem__text { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.checkitem__text small { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }
.checkitem input:checked ~ .checkitem__text { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.checkitem input:checked ~ .checkitem__text small { text-decoration: none; }
.checklist__foot {
  padding: var(--s-3) var(--s-5); background: var(--surface-alt);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* --- Prose --------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: var(--fs-xl); margin-top: var(--s-10); margin-bottom: var(--s-3);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.prose h3 { font-size: var(--fs-md); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose p { margin-bottom: var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { font-weight: var(--fw-semi); }

/* Numbered application steps — a real sequence, so numbering means something */
.steps { list-style: none; padding: 0; counter-reset: step; margin-bottom: var(--s-6); }
.steps li {
  position: relative; counter-increment: step;
  padding-inline-start: var(--s-10); padding-bottom: var(--s-5);
  font-size: var(--fs-sm);
}
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: -2px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 4px;
  width: 1.5px; background: var(--border);
}
.steps b { display: block; margin-bottom: 2px; font-weight: var(--fw-semi); }

/* --- Original advertisement ---------------------------------------------
   Evidence, not content. The post already carries every fact; this is here
   so a reader can satisfy themselves the listing is faithful to the notice.
   Small by design, with a caption that explains itself in one line.
   ------------------------------------------------------------------------ */
.ad-proof {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-alt);
  margin: var(--s-6) 0 var(--s-8);
  max-width: 68ch;
}
.ad-proof__thumb {
  flex: none; width: 92px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border-strong); background: #fff;
  cursor: zoom-in; padding: 0; display: block;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ad-proof__thumb:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
.ad-proof__thumb img { width: 100%; display: block; }
.ad-proof__text { min-width: 0; }
.ad-proof__text b { display: block; font-size: var(--fs-sm); }
.ad-proof__text p { font-size: 11px; color: var(--text-muted); line-height: 1.55; margin: var(--s-1) 0 0; }
.ad-proof__text button {
  margin-top: var(--s-2); padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; color: var(--accent); font-weight: var(--fw-medium); text-decoration: underline;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: var(--s-6);
  background: rgba(0,0,0,.82);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(92vw, 680px); max-height: 88vh; width: auto;
  border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute; top: var(--s-4); inset-inline-end: var(--s-4);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* --- Source block + disclaimer. Spec 2.3 -------------------------------- */
.source-block {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-subtle);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--s-4);
  max-width: 68ch;
}
.source-block svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.source-block__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-base); }
.source-block__text b { color: var(--text); font-size: var(--fs-sm); display: block; margin-bottom: 2px; }
.source-block a { color: var(--accent); text-decoration: underline; }

/* --- Writer credit ------------------------------------------------------- */
/* Quieter than the source block on purpose: the source is the authority a
   reader may need to check, the writer is only who to thank. A rule above it
   closes the piece, so the credit reads as a sign-off and not as one more
   fact in the listing. */
.writer {
  display: flex; gap: var(--s-3); align-items: center;
  max-width: 68ch;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.writer svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.writer__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-base); }
.writer__text b { font-weight: 500; color: var(--text-faint); }
.writer__name { font-weight: 600; color: var(--text); }
.writer__date::before { content: "\00b7"; margin: 0 .45em; color: var(--text-faint); }

.disclaimer {
  font-size: 11px; color: var(--text-faint); line-height: var(--lh-base);
  max-width: 68ch; margin-bottom: var(--s-10);
}

/* --- Sidebar ------------------------------------------------------------- */
.post-aside { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) {
  .post-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
.apply-card {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.apply-card__top {
  padding: var(--s-5);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent) 92%, #000),
    var(--accent));
  color: #fff;
}
.apply-card__top .countdown {
  background: rgba(255,255,255,.18); color: #fff; margin-bottom: var(--s-3);
}
.apply-card__top b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.apply-card__top span { font-size: var(--fs-xs); opacity: .85; }
.apply-card__body { padding: var(--s-5); background: var(--surface); display: grid; gap: var(--s-3); }
.apply-card__note { font-size: 11px; color: var(--text-faint); text-align: center; }

/* --- Similar posts ------------------------------------------------------- */
.similar { margin-top: var(--s-12); }

/* ==========================================================================
   Print — this is what "Save as PDF" produces. English views only. Spec 6.5
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  .ticker, .site-header, .site-footer, .post-actions, .post-aside,
  .ad-slot, .similar, .install-prompt, .toast, .breadcrumbs,
  .urdu-toggle, .lightbox, .skip-link { display: none !important; }

  html { font-size: 10.5pt; }
  body { background: #fff !important; color: #000 !important; }
  .container { max-width: none; padding: 0; }
  .post-layout { display: block; }
  .prose, .facts, .checklist, .source-block, .writer, .disclaimer, .ad-proof { max-width: none; }

  /* Keep the checklist — it is the reason people save these */
  .checklist { border: 1pt solid #666; break-inside: avoid; }
  .checklist__head { background: #f0f0f0 !important; }
  .checklist__head b, .checklist__progress { color: #000 !important; }
  .checkitem__box { border-color: #666 !important; }
  .checkitem input:checked + .checkitem__box { background: #000 !important; }

  .post-hero { max-height: 55mm; break-inside: avoid; }
  .facts { border: 1pt solid #999; break-inside: avoid; }
  .steps li, .ad-proof { break-inside: avoid; }
  .prose h2 { break-after: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }

  /* Provenance has to survive the print — a saved page gets forwarded */
  .print-footer { display: block !important; }
}
.print-footer { display: none; margin-top: 10mm; padding-top: 3mm; border-top: 1pt solid #999; font-size: 8.5pt; color: #444; }

/* ==========================================================================
   FAQ and refusal-reasons — visa guides. Reads .faq entries with native
   <details> so an FAQPage's visible content actually matches what the
   FAQPage structured data claims, rather than sitting in the page unseen.
   ========================================================================== */
.faq { margin-block: var(--s-8); }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-block-end: var(--s-2); overflow: hidden;
}
.faq__item[open] { border-color: var(--border-strong); }
.faq__q {
  padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-weight: var(--fw-semi); font-size: var(--fs-base);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-inline-end: 2px solid var(--text-faint); border-block-end: 2px solid var(--text-faint);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 var(--s-4) var(--s-4); color: var(--text-muted); font-size: var(--fs-base); line-height: var(--lh-base); }

.refusal-list {
  margin-block: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--warn-soft); border-radius: var(--r-md);
  border-inline-start: 3px solid var(--warn);
}
.refusal-list b { display: block; margin-block-end: var(--s-2); color: var(--warn); }
.refusal-list ul { margin: 0; padding-inline-start: var(--s-5); }
.refusal-list li { font-size: var(--fs-base); line-height: var(--lh-base); margin-block-end: var(--s-1); }

/* Sidebar panel for evergreen reference content — visa guides have no
   deadline to put here, so this replaces the countdown box with a trust
   signal instead. */
.verified-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); background: var(--surface);
}
.verified-card__head { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-2); color: var(--ok); }
.verified-card__head svg { width: 18px; height: 18px; flex: none; }
.verified-card__head b { color: var(--text); font-size: var(--fs-base); }
.verified-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-base); margin: 0 0 var(--s-4); }

/* --- Actions card --------------------------------------------------------
   Share, PDF, save and track, as one card in the sidebar. A fixed two-by-two
   grid rather than a wrapping flex row: the pairing carries meaning (top row
   is what you do with the listing, bottom row is what you record about it)
   and wrapping would reshuffle that at every width. */
.actions-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-4);
}
.actions-card__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
}
/* Every child is one cell, whatever element it is, so the grid stays a
   grid when the PDF button is absent on Urdu views. */
.actions-card__grid > * { min-width: 0; }
.actions-card__grid .btn,
.actions-card__grid summary { width: 100%; justify-content: center; }
.actions-card__blank { display: block; }

/* The tracker carries its own styling rather than reusing `.select`.
   `.select` is defined in section.css, which is loaded on archives and
   search but never on a single post, so on this card it resolved to no
   styling at all: a bare native control next to three bordered buttons,
   which read as an empty box. */
.actions-card__grid .tracker { display: block; width: 100%; }
.actions-card__grid .tracker select {
  width: 100%;
  min-height: 36px;
  padding: var(--s-2) var(--s-6) var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  /* The native arrow is dropped for one drawn here, so the control keeps
     the same height and border as the buttons beside it on every
     platform. Inline SVG rather than a sprite reference: a background
     image cannot use <use>. */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}
[dir="rtl"] .actions-card__grid .tracker select,
.actions-card__grid .tracker select:dir(rtl) {
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-6);
  background-position: left var(--s-3) center;
}
.actions-card__grid .tracker select:focus-visible {
  border-color: var(--accent);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(6, 122, 71, .15);
}
:root[data-theme="dark"] .actions-card__grid .tracker select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA4B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* The language toggle, full width under the grid, as its own bordered
   button rather than a link on a rule.

   Brand green explicitly, not var(--accent). --accent is set per section
   (base.css), so an accent-coloured control here came out purple on
   scholarships, teal on local jobs and blue on overseas jobs: three
   colours for one control that is identical on all three pages. Using
   --brand-500 keeps it one colour and still resolves correctly in dark
   mode, where the token lightens to #2FA36B for contrast. */
.actions-card__lang {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 42px; margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--brand-500);
  border-radius: var(--r-md);
  color: var(--brand-500); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  text-decoration: none;
}
.actions-card__lang:hover,
.actions-card__lang:focus-visible {
  background: var(--brand-100);
  color: var(--brand-600);
  border-color: var(--brand-600);
  text-decoration: none;
}
.actions-card__lang svg { color: var(--brand-500); }
/* Urdu sets its own face and wants a little more size to read at the same
   optical weight as the Latin label it replaces. */
.actions-card__lang[lang="ur"] { font-family: var(--font-ur, inherit); font-size: var(--fs-md); }

/* --- Share menu ----------------------------------------------------------
   A <details>, so it opens, closes and answers the keyboard with no script.
   Script only adds the copy button's behaviour. */
.share { position: relative; }
.share > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  cursor: pointer; list-style: none;
}
.share > summary::-webkit-details-marker { display: none; }
.share__menu {
  position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 6px);
  min-width: 200px; padding: var(--s-2);
  display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(18, 22, 28, .12);
}
.share__item {
  display: flex; align-items: center; gap: var(--s-3);
  /* 40px: a real tap target, which most of this audience is using. */
  min-height: 40px; padding: var(--s-2) var(--s-3);
  width: 100%; box-sizing: border-box;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: start;
  text-decoration: none; cursor: pointer;
}
.share__item:hover, .share__item:focus-visible { background: var(--bg-subtle); color: var(--text); }
.share__item svg { flex: none; }

/* Near the right edge of a narrow sidebar the menu would otherwise be cut
   off by the viewport rather than by any container. */
@media (max-width: 640px) {
  .share__menu { inset-inline-start: auto; inset-inline-end: 0; }
}

/* --- Editorial layout with a sidebar -------------------------------------
   Scholarships and local jobs were a single centred column with their
   controls pinned to a bar at the bottom of the window. This gives them the
   same sidebar overseas jobs already had, so the actions card sits in one
   place across all three sections. */
.ed-layout { display: block; }
/* On a phone the sidebar is not a sidebar, it is a card that follows the
   article. It still renders: hiding it would take the four controls away
   from the readers most likely to want the WhatsApp share. */
.ed-layout > .ed-aside { display: block; margin-block: var(--s-6); }

@media (min-width: 1024px) {
  .ed-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s-10); align-items: start;
    max-width: 1180px; margin-inline: auto;
    padding-inline: var(--s-5);
  }
  .ed-layout > .ed-body { max-width: none; margin-inline: 0; padding-inline: 0; }
  .ed-layout > .ed-aside {
    display: grid; gap: var(--s-5);
    position: sticky; top: calc(var(--header-h) + var(--s-4));
  }
}

@media print {
  .actions-card, .ed-aside { display: none; }
}

/* --- Line lists ----------------------------------------------------------
   What a scholarship covers, who can apply, what an employer provides.
   A tick rather than a bullet: every one of these is something the reader
   gets or something they already have, so the mark should read as a
   confirmation rather than as punctuation. */
.line-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.line-list li {
  position: relative;
  padding-inline-start: var(--s-6);
  line-height: var(--lh-base);
}
.line-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .45em;
  width: 14px; height: 8px;
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.line-list small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}