/* ============================================================
   Opportunity theme — layout on top of OPDS (assets/opds/opds.css).
   Semantic tokens only; logical properties only (one file for LTR + RTL).
   Sections:
   1. Base + WordPress core classes
   2. Bridge: mu-plugin markup (.opp-*) → OPDS look
   3. Header (mobile full-screen panel)
   4. Page heads, eyebrows, sections
   5. Home: hero, rails, browse, verify
   6. Listing: filter bar, grid, empty state
   7. Single record
   8. Newsletter panel
   9. Footer
   10. Pages, search, 404
   11. Provider avatar + host-country flag
   12. Illustrative imagery (home hero, host-country banner, About)
   13. Editorial content: guides, FAQ, glossary, deadline calendar, closed record
   ============================================================ */

/* ---------- 1. Base + WordPress core classes ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.op-menu-open { overflow: hidden; }
body { min-block-size: 100vh; display: flex; flex-direction: column; }
.op-main { flex: 1 0 auto; }
.op-main:focus { outline: none; box-shadow: none; }

.screen-reader-text, .opp-sr {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto; clip-path: none; inline-size: auto; block-size: auto; margin: 0; padding: var(--space-3) var(--space-4);
  inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-tooltip);
  background: var(--surface-1); color: var(--text-1); border-radius: var(--radius-md); box-shadow: var(--shadow-3); white-space: normal;
}

.entry-content > .alignwide { max-inline-size: var(--container-max); }
.entry-content > .alignfull { max-inline-size: none; }
.aligncenter { margin-inline: auto; }
.entry-content figure { margin: var(--space-8) 0; }
.entry-content figcaption, .wp-element-caption { margin-block-start: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content table { inline-size: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: var(--space-2) var(--space-3); border-block-end: var(--border-w) solid var(--border-1); text-align: start; }
.wp-block-button__link { border-radius: var(--radius-md); background: var(--brand); color: var(--brand-fg); padding: var(--space-3) var(--space-5); text-decoration: none; font-weight: 600; }

/* ---------- 2. Bridge: mu-plugin markup → OPDS ---------- */
/* Apply button: a.opp-btn.opp-btn--primary.opp-apply */
.opp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--control-lg); padding-block: 0; padding-inline: var(--space-5);
  border: var(--border-w) solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard);
}
.opp-btn:focus-visible { border-radius: var(--radius-md); }
.opp-btn--primary { background: var(--brand); color: var(--brand-fg); }
.opp-btn--primary:hover { background: var(--brand-hover); color: var(--brand-fg); }
.opp-btn--primary:active { background: var(--brand-active); }
.opp-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.opp-apply__icon { font-size: 1.15em; line-height: 1; display: inline-block; }
[dir="rtl"] .opp-apply__icon { transform: scaleX(-1); }

/* Status chip: span.opp-chip.opp-chip--status.opp-chip--{upcoming|open|expiring|closed} (= .op-status) */
.opp-chip--status {
  --_fg: var(--status-open-fg); --_bg: var(--status-open-bg); --_dot: var(--status-open-dot);
  display: inline-flex; align-items: center; gap: var(--space-15);
  min-block-size: 24px; padding-inline: var(--space-2) var(--space-25);
  border-radius: var(--radius-full); background: var(--_bg); color: var(--_fg);
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.opp-chip--status::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--_dot); flex: none; }
.opp-chip--expiring { --_fg: var(--status-expiring-fg); --_bg: var(--status-expiring-bg); --_dot: var(--status-expiring-dot); }
.opp-chip--expiring::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-expiring-dot) 25%, transparent); }
.opp-chip--closed { --_fg: var(--status-closed-fg); --_bg: var(--status-closed-bg); --_dot: var(--status-closed-dot); }
/* Upcoming (opens_at in the future): informational blue, hollow dot = "not open yet". */
.opp-chip--upcoming { --_fg: var(--info-fg); --_bg: var(--info-bg); --_dot: transparent; }
.opp-chip--upcoming::before { box-shadow: inset 0 0 0 2px var(--info-solid); }

/* Deadline: span.opp-deadline.opp-deadline--{status} */
.opp-deadline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.opp-deadline time { font-weight: 600; color: inherit; }
.opp-deadline__label { color: var(--text-2); }
.opp-deadline__left {
  display: inline-flex; align-items: center; min-block-size: 22px; padding-inline: var(--space-2);
  border-radius: var(--radius-full); background: var(--status-open-bg); color: var(--status-open-fg);
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.opp-deadline--expiring .opp-deadline__left { background: var(--status-expiring-bg); color: var(--status-expiring-fg); }
.opp-deadline__note { unicode-bidi: plaintext; flex-basis: 100%; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-2); }
.opp-deadline--closed, .opp-deadline--unknown { color: var(--text-2); }
/* inline-block, not flex: the text + <time> + "· in 5 days" keep their spaces. */
.opp-deadline__opens {
  display: inline-block; padding: 3px var(--space-2);
  border-radius: var(--radius-full); background: var(--info-bg); color: var(--info-fg);
  font-size: 13px; font-weight: 600; line-height: 1.3;
}
.opp-deadline__opens time { font-weight: 600; }

/* Inputs rendered by the plugin (.opp-input) */
.opp-input {
  inline-size: 100%; min-block-size: var(--control-lg);
  padding-block: var(--space-2); padding-inline: var(--space-3);
  background: var(--surface-1); color: var(--text-1);
  border: var(--border-w) solid var(--border-3); border-radius: var(--radius-md);
  font-size: 16px; line-height: 1.4;
}
.opp-input::placeholder { color: var(--text-3); opacity: 1; }
.opp-input:hover { border-color: var(--text-2); }
.opp-input:focus-visible { border-color: var(--border-focus); border-radius: var(--radius-md); }

/* Ad slot: aside.opp-ad-slot.opp-ad-slot--{slot} — height reserved (CLS 0), labelled, never first on mobile */
.opp-ad-slot {
  --_min: 280px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  margin-block: var(--space-10); padding-block: var(--space-2) var(--space-3);
  border-block: var(--border-w) solid var(--border-1);
  min-block-size: calc(var(--_min) + 36px);
  contain: layout;
}
.opp-ad-slot__label { font-size: 11px; font-weight: 500; letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--text-3); }
:lang(ar) .opp-ad-slot__label { letter-spacing: 0; font-size: 12px; }
.opp-ad-slot > ins { display: block; inline-size: 100%; min-block-size: var(--_min); }
@media (min-width: 768px) { .opp-ad-slot { --_min: 250px; } }
.op-grid > .opp-ad-slot { grid-column: 1 / -1; margin-block: 0; }
@media print { .opp-ad-slot { display: none !important; } }

/* ---------- 3. Header ---------- */
.op-header__inner { gap: var(--space-6); }
.op-logo__img { block-size: 34px; inline-size: auto; max-inline-size: 200px; object-fit: contain; }
.op-logo { min-block-size: var(--touch-min); }
.op-logo__text { white-space: nowrap; }
/* Brand-mark lockup (BRAND-MARK.md): soft tile, glyph 72% of the tile, gap ~0.35× tile.
   The symbol paints itself: S = currentColor, board = --logo-board, tassel = --logo-tassel (amber default, never recoloured). */
.op-logo:has(.op-logo__mark--brand) { gap: var(--space-3); }
.op-logo__mark--brand { --logo-board: var(--brand-soft-fg); background: var(--brand-soft); color: var(--brand); }
.op-logo__mark .op-logo__glyph { inline-size: 72%; block-size: 72%; fill: none; stroke: none; }
/* Solid tile on dark surfaces: the tenant's light-theme primary in both themes, white S, pale board. */
[data-theme="dark"] .op-logo__mark--brand, .op-footer .op-logo__mark--brand {
  --logo-board: var(--tenant-primary-soft, var(--indigo-3));
  background: var(--tenant-primary, var(--indigo-11)); color: #fff;
}
.op-breadcrumb a, .op-breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-block-size: var(--touch-min); }
.op-breadcrumb a { min-inline-size: var(--touch-min); }
.op-breadcrumb [aria-current="page"] { display: block; line-height: var(--touch-min); }
.op-verified { flex-wrap: nowrap; align-items: flex-start; }
.op-verified .icon { margin-block-start: 1px; flex: none; }
/* "Verified by … · date" links to the Editorial Policy: keep the line's colour, underline on hover. */
.op-verified a, .op-footer__trust a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.op-verified a:hover, .op-footer__trust a:hover { text-decoration-color: currentColor; }
.op-btn--link { min-block-size: var(--touch-min); }
.op-lang { white-space: nowrap; }
.op-lang:lang(ar) { font-size: 15px; }
.op-menu-toggle__close { display: none; }
.op-header[data-menu-open] .op-menu-toggle__open { display: none; }
.op-header[data-menu-open] .op-menu-toggle__close { display: block; }
.op-header__search { border-block-start: var(--border-w) solid var(--border-1); padding-block: var(--space-4); }
.op-header__search .op-search { max-inline-size: 720px; margin-inline: auto; }
.op-search > .op-btn { flex: none; }
.op-search__submit-icon { display: none; }
.op-nav__extra { display: none; }
.op-header[data-menu-open] .op-nav__extra { display: grid; gap: var(--space-4); margin-block-start: auto; padding-block-start: var(--space-8); }
.op-nav__extra .op-btn--block { inline-size: 100%; min-block-size: var(--control-xl); font-size: 16px; }
.op-header[data-menu-open] .op-nav__extra .op-btn { min-block-size: var(--control-xl); font-size: 16px; font-weight: 600; justify-content: center; border-radius: var(--radius-md); padding-inline: var(--space-5); }
.op-nav__trust { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin: 0; font-size: 14px; color: var(--text-2); }
.op-nav__trust .icon { inline-size: 18px; block-size: 18px; color: var(--status-open-fg); }
.op-filterbar__toggle[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-soft-fg); border-color: var(--brand); }
@media (max-width: 639.98px) {
  .op-single .op-breadcrumb li:last-child { display: none; }
}
@media (max-width: 479.98px) {
  .op-search__submit { inline-size: var(--control-lg); padding-inline: 0; }
  .op-search--lg .op-search__submit { inline-size: var(--control-xl); }
  .op-search__submit-icon { display: block; }
  .op-search__submit-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 1023.98px) {
  /* Full-screen panel under the header bar */
  .op-header[data-menu-open] { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .op-header[data-menu-open] .op-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-sticky);
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4) var(--gutter) calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1); border: 0; box-shadow: none;
    animation: op-panel-in var(--duration-base, 180ms) var(--ease-standard);
  }
  .op-header[data-menu-open] .op-nav ul { flex-direction: column; gap: 0; }
  .op-header[data-menu-open] .op-nav li + li { border-block-start: var(--border-w) solid var(--border-1); }
  .op-header[data-menu-open] .op-nav li > a {
    inline-size: 100%; min-block-size: 60px; padding-inline: 0; border-radius: 0;
    font-size: 21px; font-weight: 600; color: var(--text-1);
  }
  .op-header[data-menu-open] .op-nav li > a:hover { background: none; color: var(--brand); }
  .op-header[data-menu-open] .op-nav li > a[aria-current="page"] { color: var(--brand); }
}
@keyframes op-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
  .op-nav { margin-inline-start: var(--space-4); margin-inline-end: auto; }
  .op-header__tools { margin-inline-start: auto; }
}

/* ---------- 4. Page heads, eyebrows, sections ---------- */
.op-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--brand);
}
.op-eyebrow .icon { inline-size: 18px; block-size: 18px; }
.op-eyebrow--accent { color: var(--status-expiring-fg); }

.op-page-head { padding-block: var(--space-6) var(--space-10); max-inline-size: 60rem; }
.op-page-head h1 { margin-block-end: var(--space-4); }
.op-page-head__intro, .op-page-head__lede { font-size: 19px; line-height: 1.6; color: var(--text-2); max-inline-size: 62ch; }
:lang(ar) .op-page-head__intro, :lang(ar) .op-page-head__lede { line-height: 1.85; }
.op-page-head__intro p { margin: 0; }
.op-page-head__intro p + p { margin-block-start: var(--space-3); }
.op-page-head__meta { margin: 0; font-size: 16px; color: var(--text-2); }
.op-page-head__search { margin-block-start: var(--space-6); max-inline-size: 640px; }

.op-breadcrumb { padding-block-start: var(--space-5); }
.op-section--tight { padding-block: var(--space-12); }
.op-section-head { margin-block-end: var(--space-8); }
.op-section-head .op-btn--link { font-size: 16px; }
.op-section-head .op-btn--link .icon { inline-size: 18px; block-size: 18px; }
.op-empty { color: var(--text-2); font-size: 17px; }

@media (min-width: 1200px) {
  .op-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .op-grid--4 .op-opp { padding: var(--space-5); }
  .op-grid--4 .op-opp__title { font-size: 17px; }
  .op-grid--4 .op-opp__meta { font-size: 14px; }
}

/* ---------- 5. Home ---------- */
.op-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 8vw, 104px) clamp(48px, 7vw, 88px);
  background:
    radial-gradient(60% 70% at 50% -10%, var(--brand-soft) 0%, transparent 70%),
    var(--surface-1);
  border-block-end: var(--border-w) solid var(--border-1);
}
.op-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.op-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-6); padding: var(--space-15) var(--space-4) var(--space-15) var(--space-3);
  border: var(--border-w) solid var(--border-1); border-radius: var(--radius-full);
  background: var(--surface-1); box-shadow: var(--shadow-1);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-2);
}
.op-hero__eyebrow .icon { inline-size: 18px; block-size: 18px; color: var(--status-open-fg); }
.op-hero__title {
  max-inline-size: 21ch; margin: 0 0 var(--space-5);
  font-size: clamp(32px, 4.8vw, 54px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em;
}
:lang(ar) .op-hero__title { max-inline-size: 22ch; line-height: 1.35; letter-spacing: 0; font-size: clamp(30px, 4.6vw, 52px); }
.op-hero__intro { max-inline-size: 58ch; margin: 0 0 var(--space-8); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--text-2); }
:lang(ar) .op-hero__intro { line-height: 1.85; }
.op-hero__search { inline-size: 100%; max-inline-size: 640px; }
.op-hero__search .op-search { padding: var(--space-15); background: var(--surface-1); border: var(--border-w) solid var(--border-2); border-radius: calc(var(--radius-md) + var(--space-15)); box-shadow: var(--shadow-2); }
.op-hero__search .op-search > .icon { inset-inline-start: calc(var(--space-3) + var(--space-15)); }
.op-hero__search .op-input { border-color: transparent; background: transparent; }
.op-hero__search .op-input:hover { border-color: transparent; }
.op-hero__search .op-input:focus-visible { border-color: transparent; }
.op-hero__search .op-search:focus-within { border-color: var(--border-focus); }
.op-hero__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-8);
  margin: var(--space-8) 0 0; padding: 0; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--text-2);
}
.op-hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.op-hero__trust .icon { inline-size: 18px; block-size: 18px; color: var(--brand); }

.op-home__rail + .op-home__rail { padding-block-start: 0; }

.op-browse { background: var(--surface-1); border-block: var(--border-w) solid var(--border-1); }
.op-browse__groups { display: grid; gap: var(--space-8); }
.op-browse__group { display: grid; gap: var(--space-3); }
.op-browse__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
@media (min-width: 768px) {
  .op-browse__group { grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: baseline; }
  .op-browse__group + .op-browse__group { padding-block-start: var(--space-8); border-block-start: var(--border-w) solid var(--border-1); }
}
.op-chip-rail { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.op-chip-rail .op-chip { min-block-size: var(--touch-min); padding-inline: var(--space-4); }

.op-verify__steps {
  display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.op-verify__steps li { padding: var(--space-6); background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-lg); }
.op-verify__steps h3 { margin: var(--space-4) 0 var(--space-2); font-size: 18px; line-height: 1.4; }
.op-verify__steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
:lang(ar) .op-verify__steps p { line-height: 1.8; }
.op-verify__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-soft-fg); }
.op-verify__icon .icon { inline-size: 22px; block-size: 22px; }

/* ---------- 6. Listing ---------- */
.op-listing .op-page-head { padding-block-end: var(--space-8); }
.op-filterbar { padding: var(--space-5); box-shadow: var(--shadow-1); }
.op-filterbar__summary { padding-block-start: var(--space-4); }
@media (min-width: 1024px) {
  .op-filterbar__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .op-filterbar__fields .op-filterbar__actions { align-self: end; justify-content: flex-end; }
}
.op-filterbar__fields .op-filterbar__actions { grid-column: -2 / -1; }
@media (max-width: 1023.98px) { .op-filterbar__fields .op-filterbar__actions { grid-column: 1 / -1; } }
.op-filterbar__actions .op-btn .icon { inline-size: 16px; block-size: 16px; }
.op-filterbar__count {
  display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: var(--space-15);
  border-radius: var(--radius-full); background: var(--brand); color: var(--brand-fg); font-size: 12px; font-weight: 700;
}
.op-filterbar__active .op-chip .icon { inline-size: 14px; block-size: 14px; }
.op-listing__results { padding-block: var(--space-8) 0; }
.op-pagination { margin-block-start: var(--space-12); }

.op-empty-state {
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-12) var(--space-6); background: var(--surface-1);
  border: var(--border-w) dashed var(--border-2); border-radius: var(--radius-xl);
}
.op-empty-state h2 { margin: 0; font-size: 22px; }
.op-empty-state p { margin: 0 0 var(--space-2); max-inline-size: 48ch; color: var(--text-2); }
.op-empty-state__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); }
.op-empty-state__icon .icon { inline-size: 24px; block-size: 24px; }

/* ---------- 7. Single record ---------- */
.op-single__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-6) var(--space-12); }
.op-single__head { max-inline-size: 72ch; }
.op-single__chips { margin-block-end: var(--space-4); }
.op-single__head h1 { margin-block-end: var(--space-4); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; }
:lang(ar) .op-single__head h1 { line-height: 1.45; letter-spacing: 0; }
.op-single__lede { margin: 0 0 var(--space-5); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--text-1); max-inline-size: 64ch; }
:lang(ar) .op-single__lede { line-height: 1.85; }
.op-single__body { min-inline-size: 0; }
.op-single__body > .op-alert { margin-block-end: var(--space-6); }

.op-single__section { margin-block-start: var(--space-12); max-inline-size: var(--type-reading-measure); }
.op-single__section > h2 { margin-block-end: var(--space-5); font-size: 24px; line-height: 1.3; }
:lang(ar) .op-single__section > h2 { line-height: 1.5; }
.op-single__section .op-prose h2 { font-size: 22px; }

.op-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.op-list > li { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.6; }
:lang(ar) .op-list > li { line-height: 1.8; }
.op-list:not(.op-list--check):not(.op-list--steps) > li { padding-inline-start: var(--space-5); }
.op-list:not(.op-list--check):not(.op-list--steps) > li::before {
  content: ""; position: absolute; inset-inline-start: var(--space-1); inset-block-start: 0.7em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--text-3);
}
.op-list--check .icon {
  inline-size: 22px; block-size: 22px; padding: 4px; margin-block-start: 2px; flex: none;
  border-radius: 50%; background: var(--status-open-bg); color: var(--status-open-fg); stroke-width: 2.5;
}
.op-list--steps { counter-reset: op-step; gap: var(--space-4); }
.op-list--steps > li { counter-increment: op-step; }
.op-list--steps > li::before {
  content: counter(op-step); flex: none; display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-soft-fg); font-size: 14px; font-weight: 700; line-height: 1;
}
.op-list--steps > li > span { padding-block-start: 1px; }

.op-facts .opp-deadline__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-facts__list { margin: 0; }
.op-facts dd a { color: inherit; text-decoration-color: var(--border-3); }
.op-facts dd a:hover { color: var(--brand); text-decoration-color: currentColor; }
.op-facts dd a.op-opp__tag { text-decoration: none; }
.op-facts dd a.op-opp__tag:hover { border-color: var(--border-3); color: var(--text-1); }
.op-facts__row--highlight .opp-deadline__note { color: inherit; opacity: 0.85; }

.op-source {
  margin-block-start: var(--space-12); padding: var(--space-6);
  background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-lg);
  max-inline-size: var(--type-reading-measure);
}
.op-source__title { margin: 0 0 var(--space-4); font-size: 18px; line-height: 1.4; }
.op-source__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.op-source__list > div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 15px; }
.op-source__list dt { min-inline-size: 9rem; color: var(--text-2); }
.op-source__list dd { margin: 0; font-weight: 500; }
.op-source__list a { display: inline-flex; align-items: center; gap: var(--space-1); }
.op-source .op-verified { margin: 0 0 var(--space-2); }
.op-source__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }

.op-apply-panel__deadline { font-size: 14px; }
.op-apply-panel .opp-deadline__note { display: none; }
.op-apply-panel .opp-apply { inline-size: 100%; }
.op-copy { align-self: center; color: var(--text-2); }
.op-copy .icon { inline-size: 16px; block-size: 16px; }

@media (max-width: 1023.98px) {
  .op-single__aside { display: contents; }
  .op-apply-panel__title, .op-apply-panel .op-sticky-cta__note, .op-copy { display: none; }
  .op-apply-panel .opp-apply { inline-size: auto; flex: none; }
  .op-apply-panel .opp-deadline__note { display: none; }
}
@media (max-width: 479.98px) {
  .op-apply-panel { flex-wrap: wrap; gap: var(--space-2); padding-block-start: var(--space-2); }
  .op-apply-panel .op-sticky-cta__info { flex-basis: 100%; }
  .op-apply-panel .opp-apply { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .op-single__layout {
    grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--space-16); row-gap: var(--space-8);
    grid-template-areas: "head aside" "body aside";
  }
  .op-single__head { grid-area: head; }
  .op-single__body { grid-area: body; }
  .op-single__aside { grid-area: aside; }
  .op-apply-panel { gap: var(--space-4); }
  .op-apply-panel__title { font-size: 16px; line-height: 1.45; }
}

.op-related { background: var(--surface-1); border-block: var(--border-w) solid var(--border-1); }
.op-related .op-opp { background: var(--surface-page); box-shadow: none; }
.op-related .op-opp:hover { background: var(--surface-1); box-shadow: var(--shadow-2); }

/* ---------- 8. Newsletter panel (wraps the plugin form) ---------- */
.op-nl {
  display: grid; gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  background: var(--brand-soft); color: var(--brand-soft-fg);
  border-radius: var(--radius-2xl);
}
.op-nl__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--radius-lg); background: var(--surface-1); color: var(--brand); box-shadow: var(--shadow-1); }
.op-nl__icon .icon { inline-size: 24px; block-size: 24px; }
.opp-newsletter { display: grid; gap: var(--space-3); align-items: start; }
.opp-newsletter__title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--brand-soft-fg); }
.opp-newsletter__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--brand-soft-fg); max-inline-size: 52ch; }
:lang(ar) .opp-newsletter__intro { line-height: 1.85; }
.opp-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
.opp-newsletter__label { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--brand-soft-fg); }
.opp-newsletter__input { flex: 1 1 220px; min-inline-size: 0; }
.opp-newsletter__submit { flex: 0 0 auto; }
@media (max-width: 479.98px) { .opp-newsletter__submit { flex-basis: 100%; } }
.opp-newsletter__status { margin: 0; font-size: 14px; font-weight: 600; color: var(--danger-fg); }
.opp-newsletter__status:empty { display: none; }
.opp-newsletter__status--ok { color: var(--success-fg); }
.opp-newsletter__privacy { margin: 0; font-size: 13px; }
.opp-newsletter__privacy a { color: inherit; }
@media (min-width: 900px) {
  .op-nl { grid-template-columns: auto 1fr; column-gap: var(--space-6); padding: var(--space-12); align-items: start; }
  .opp-newsletter { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); column-gap: var(--space-12); row-gap: var(--space-2); }
  .opp-newsletter__title { grid-column: 1; grid-row: 1; }
  .opp-newsletter__intro { grid-column: 1; grid-row: 2; }
  .opp-newsletter__row { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .opp-newsletter__status, .opp-newsletter__privacy { grid-column: 2; }
}
.op-nl--card { background: var(--surface-1); color: var(--text-1); border: var(--border-w) solid var(--border-1); }
.op-nl--card .opp-newsletter__title, .op-nl--card .opp-newsletter__label { color: var(--text-1); }
.op-nl--card .opp-newsletter__intro { color: var(--text-2); }

/* ---------- 9. Footer ---------- */
.op-footer { margin-block-start: 0; }
.op-page, .op-search-page, .op-404, .op-index { padding-block-end: var(--space-16); }
.op-footer__grid { padding-block: var(--space-16) var(--space-10); }
.op-footer .op-logo__mark:not(.op-logo__mark--brand) { background: var(--brand); color: var(--brand-fg); }
.op-footer .op-logo__accent { color: var(--brand-soft); }
[data-theme="dark"] .op-footer .op-logo__accent { color: var(--brand); }
.op-footer ul { gap: 0; }
.op-footer a { min-block-size: var(--touch-min); min-inline-size: var(--touch-min); }
.op-footer__widget h2, .op-footer__widget .wp-block-heading, .op-footer__widget .widget-title {
  margin: 0 0 var(--space-3); font-size: 13px; font-weight: 600; letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase; opacity: 0.8; color: inherit;
}
body.has-sticky-cta { padding-block-end: 0; }
.has-sticky-cta .op-footer { padding-block-end: calc(var(--sticky-cta-h) + var(--space-6) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 479.98px) { .has-sticky-cta .op-footer { padding-block-end: calc(var(--sticky-cta-h) + var(--control-lg) + var(--space-4) + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1024px) { .has-sticky-cta .op-footer { padding-block-end: 0; } }
.op-footer__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0; padding-block: var(--space-5); border-block-start: var(--border-w) solid var(--_rule);
  font-size: 15px; font-weight: 600;
}
.op-footer__trust .icon { inline-size: 20px; block-size: 20px; }
.op-footer__trust-note { font-weight: 400; opacity: 0.8; }
.op-footer__legal { font-size: 14px; }
/* Social profiles (footer brand column). Row follows dir; brand icons are fills. */
.op-footer .op-social { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block: var(--space-4) 0; margin-inline-start: calc(-1 * (var(--touch-min) - 20px) / 2); }
.op-footer .op-social a {
  justify-content: center; inline-size: var(--touch-min); block-size: var(--touch-min); min-block-size: var(--touch-min);
  border-radius: var(--radius-full); color: inherit; opacity: 0.75; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.op-footer .op-social a:hover { opacity: 1; color: var(--brand-soft); text-decoration: none; }
[data-theme="dark"] .op-footer .op-social a:hover { color: var(--brand); }
.op-footer .op-social a:focus-visible { opacity: 1; border-radius: var(--radius-full); }
.op-footer .op-social .icon { inline-size: 20px; block-size: 20px; fill: currentColor; stroke: none; vertical-align: 0; }
@media (prefers-reduced-motion: reduce) { .op-footer .op-social a { transition: none; } }
.op-footer__widget + .op-footer__widget { margin-block-start: var(--space-6); }
.op-footer__widget ul { margin: 0; }

/* ---------- 10. Pages, search, 404 ---------- */
.op-page .op-page-head { padding-block-end: var(--space-8); border-block-end: var(--border-w) solid var(--border-1); margin-block-end: var(--space-8); }
.op-page__updated { margin-block: var(--space-12) 0; font-size: 14px; color: var(--text-2); }
.op-page-links { margin-block-start: var(--space-8); }

.op-results { display: grid; gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.op-results li { padding: var(--space-5); background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-lg); }
.op-results__title { margin: 0 0 var(--space-2); font-size: 19px; line-height: 1.4; }
.op-results__title a { color: var(--text-1); text-decoration: none; }
.op-results__title a:hover { color: var(--brand); text-decoration: underline; }
.op-results p { margin: 0; color: var(--text-2); font-size: 15px; }

.op-404__head { padding-block: var(--space-16) var(--space-8); }
.op-404__head h1 { font-size: clamp(30px, 4vw, 44px); }
.op-404 .op-section--tight h2 { margin-block-end: var(--space-6); }
.op-404__head > p:last-child { margin-block-start: var(--space-5); }

/* ---------- 11. Provider avatar + host-country flag ----------
   Flag: rounded 4:3 tile (flag-icons, MIT), decorative (aria-hidden) — the
   country name is always text. RTL rule (founder, 2026-09-23): mirrored — the
   flag sits at the inline-start like every other chip icon, in both languages.
   Flags are never mirrored, recoloured, cropped or faded. */
.op-flag {
  --flag-h: 20px;
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  block-size: var(--flag-h); aspect-ratio: 4 / 3;
  border-radius: max(2px, calc(var(--flag-h) * 0.15)); overflow: hidden;
}
.op-flag > svg, .op-flag > img { display: block; inline-size: 100%; block-size: 100%; }
/* 1px inner hairline keeps white flags (JP, KR) visible on white */
.op-flag::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
[data-theme="dark"] .op-flag::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.op-flag--14 { --flag-h: 14px; }
.op-flag--16 { --flag-h: 16px; }
.op-flag--20 { --flag-h: 20px; }
.op-flag--24 { --flag-h: 24px; }

/* Provider avatar: monogram tile; a licensed logo (Record: url + licence + checked date) replaces it */
.op-avatar {
  --avatar: 48px;
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  inline-size: var(--avatar); block-size: var(--avatar); border-radius: calc(var(--avatar) * 0.22);
  background: var(--brand-soft); color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
  font-family: var(--font-latin); font-weight: 700; font-size: calc(var(--avatar) * 0.4);
  letter-spacing: 0.01em; line-height: 1; text-transform: uppercase; font-variant-numeric: lining-nums;
  direction: ltr; unicode-bidi: isolate; user-select: none;
}
.op-avatar--32 { --avatar: 32px; }
.op-avatar--48 { --avatar: 48px; }
/* Logos are shown as supplied: white tile, never recoloured, never on the brand colour */
.op-avatar--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--border-1); }
.op-avatar--logo img { inline-size: 76%; block-size: 76%; object-fit: contain; }

/* Record header: host-country chip + provider line under the H1 */
.op-tag--country { gap: var(--space-15); padding-inline: 3px var(--space-25); color: var(--text-1); text-decoration: none; }
a.op-tag--country:hover { border-color: var(--border-3); color: var(--text-1); }
.op-tag--country-noflag { padding-inline-start: var(--space-2); }
.op-tag--country-noflag .icon { inline-size: 14px; block-size: 14px; color: var(--text-3); }
.op-tag--country .op-flag { border-radius: 3px; }

.op-provider { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.op-provider__text { display: grid; gap: 2px; min-inline-size: 0; line-height: 1.35; }
.op-provider__k { font-size: 13px; font-weight: 500; color: var(--text-3); }
.op-provider__name { font-size: 16px; font-weight: 600; color: var(--text-1); text-decoration: none; }
a.op-provider__name:hover { color: var(--brand); text-decoration: underline; }

/* Facts "Study in", chips, country H1 */
.op-flagged { display: inline-flex; align-items: center; gap: var(--space-15); vertical-align: bottom; }
.op-h1-flag { display: flex; align-items: flex-start; gap: var(--space-3); }
.op-h1-flag > .op-flag { margin-block-start: max(0px, calc((1lh - var(--flag-h)) / 2)); }

/* Card: 32px avatar first; the funding badge moves to the inline-end; flag takes the map-pin's 18px box */
.op-opp__top--avatar { justify-content: flex-start; }
.op-opp__top--avatar > :last-child:not(:first-child):not(.opp-chip) { margin-inline-start: auto; }
.op-opp__meta .op-flag { margin-block-start: 4px; margin-inline: 2px; border-radius: 2px; }

/* ---------- 12. Illustrative imagery ----------
   Alt text always starts "Illustrative image:" / "صورة توضيحية:". Images fade
   with a mask on the image itself (no separate fade strip, no hard edge).
   RTL: the photo is mirrored so its subject stays on the outer edge and the
   fade stays against the text (scenes carry no text, signage or landmarks). */

/* Home hero: ≥1024px only — the <picture> fallback is a 1×1 data URI, so phones download nothing */
.op-hero__copy { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
.op-hero__media { display: none; }
@media (min-width: 1024px) {
  .op-hero--media .op-hero__media {
    display: block; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 48%;
    pointer-events: none;
  }
  .op-hero--media .op-hero__media img {
    display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 40%;
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.4) 25%, rgb(0 0 0 / 0.9) 50%, #000 70%);
            mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.4) 25%, rgb(0 0 0 / 0.9) 50%, #000 70%);
  }
  [dir="rtl"] .op-hero--media .op-hero__media img { transform: scaleX(-1); } /* mask flips with it */
  .op-hero--media .op-hero__inner { position: relative; align-items: flex-start; }
  .op-hero--media .op-hero__copy {
    align-items: flex-start; text-align: start;
    /* text column ends before the photo: 52% of the viewport minus the container's inline-start offset */
    max-inline-size: calc(52vw - max(0px, (100vw - var(--container-max)) / 2) - var(--gutter-lg) - var(--space-8));
  }
  .op-hero--media .op-hero__trust { justify-content: flex-start; }
}

/* Host-country page (≥3 records): 21:9 banner, max 220px, indigo scrim; phones: 72px circle beside the H1 */
.op-page-head--media { max-inline-size: none; }
.op-country-head { display: flex; align-items: center; gap: var(--space-4); }
.op-country-head__text { flex: 1 1 auto; min-inline-size: 0; }
.op-country-head__text h1 { margin-block-end: 0; }
.op-country-head__media { order: 1; flex: none; }
.op-country-head__media img {
  display: block; inline-size: 72px; block-size: 72px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px var(--border-1);
}
.op-page-head--media .op-page-head__intro { margin-block-start: var(--space-4); }
@media (max-width: 767.98px) {
  .op-page-head--media .op-country-head .op-eyebrow { margin-block-end: var(--space-1); }
}
@media (min-width: 768px) {
  .op-country-head {
    --scrim: var(--tenant-primary-soft-fg, var(--indigo-12));
    /* no overflow clipping here: a long H1 grows the banner instead of being cut */
    position: relative; isolation: isolate;
    aspect-ratio: 21 / 9; max-block-size: 220px; inline-size: 100%;
    padding: var(--space-8) var(--space-10); border-radius: var(--radius-lg);
    background: var(--scrim);
  }
  /* Layers use positive z-index only (photo 0, scrim 1, text 2): negative z-index children were painted under the parent background. */
  .op-country-head__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
  .op-country-head__media img {
    inline-size: 100%; block-size: 100%; border-radius: 0; box-shadow: none; object-position: 50% 45%;
  }
  [dir="rtl"] .op-country-head__media img { transform: scaleX(-1); }
  .op-country-head::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
      color-mix(in srgb, var(--scrim) 75%, transparent) 45%,
      color-mix(in srgb, var(--scrim) 25%, transparent) 100%);
  }
  [dir="rtl"] .op-country-head::before {
    background: linear-gradient(to left,
      color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
      color-mix(in srgb, var(--scrim) 75%, transparent) 45%,
      color-mix(in srgb, var(--scrim) 25%, transparent) 100%);
  }
  .op-country-head__text { position: relative; z-index: 2; max-inline-size: 60ch; color: var(--text-on-brand, #fff); }
  .op-country-head__text .op-eyebrow { color: inherit; opacity: 0.88; }
  .op-country-head__text h1 { color: inherit; }
}

/* About page: one image below the H1, lazy */
.op-page__figure { margin: 0 0 var(--space-8); }
.op-page__figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); }
.op-page__figure figcaption { margin-block-start: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* ---------- 13. Editorial content (CONTENT-SYSTEM §C) ----------
   Answer-first box, "Last reviewed" line, guides, FAQ (details/summary),
   sources, glossary A–Z, deadline calendar table (cards below 768px),
   closed-record cycle box. Tokens + logical properties only. */

/* Answer-first opening: the 2 sentences that answer the page's query */
.op-answer {
  margin-block: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-5);
  max-inline-size: 72ch; background: var(--brand-soft); color: var(--brand-soft-fg);
  border-inline-start: 4px solid var(--brand); border-radius: var(--radius-md);
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6;
}
:lang(ar) .op-answer { line-height: 1.85; }
.op-answer p { margin: 0; }
.op-answer a { color: inherit; font-weight: 600; }
.op-reviewed { margin: 0; }

/* Guide */
.op-guide__article { padding-block-end: var(--space-12); }
.op-guide__head { max-inline-size: none; }
.op-guide__head h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; max-inline-size: 28ch; }
:lang(ar) .op-guide__head h1 { line-height: 1.45; letter-spacing: 0; }
.op-guide__head .op-country-head { margin-block-end: var(--space-5); }
/* Guide titles are longer than country names: the banner grows with the H1 instead of clipping it */
@media (min-width: 768px) {
  .op-guide__head .op-country-head { aspect-ratio: auto; max-block-size: none; min-block-size: 220px; padding-block: var(--space-6); }
  .op-guide__head .op-country-head__text h1 { font-size: clamp(26px, 2.8vw, 36px); }
}
.op-guide__body { max-inline-size: var(--type-reading-measure); }
.op-guide__body table { margin-block: var(--space-6); }
.op-guide__body caption { caption-side: top; padding-block-end: var(--space-2); text-align: start; font-weight: 600; color: var(--text-2); }
.op-guide__body th[scope="row"] { font-weight: 600; }
.op-guide__body .wp-block-table { overflow-x: auto; }
.op-guide__section { margin-block-start: var(--space-12); }
.op-guide__section > h2 { margin-block-end: var(--space-5); font-size: 24px; line-height: 1.3; }
:lang(ar) .op-guide__section > h2 { line-height: 1.5; }
.op-guide__live .op-section-head h2 { margin: 0; font-size: 24px; }

/* FAQ (guides + FAQ hub): native disclosure, no script */
.op-faq { max-inline-size: var(--type-reading-measure); }
.op-faq__item { border-block-end: var(--border-w) solid var(--border-1); }
.op-faq__item:first-of-type { border-block-start: var(--border-w) solid var(--border-1); }
.op-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-block-size: var(--touch-min); padding-block: var(--space-4); cursor: pointer; list-style: none;
}
.op-faq__item > summary::-webkit-details-marker { display: none; }
.op-faq__item > summary:focus-visible { border-radius: var(--radius-md); }
.op-faq__q { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--text-1); }
:lang(ar) .op-faq__q { line-height: 1.7; }
.op-faq__chev { flex: none; inline-size: 20px; block-size: 20px; color: var(--text-2); transition: transform var(--duration-fast) var(--ease-standard); }
.op-faq__item[open] .op-faq__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .op-faq__chev { transition: none; } }
.op-faq__a { padding-block-end: var(--space-5); color: var(--text-1); line-height: 1.7; }
:lang(ar) .op-faq__a { line-height: 1.9; }
.op-faq__a > p { margin: 0 0 var(--space-3); }
.op-faq-page .op-faq { margin-block-end: var(--space-12); }

/* Sources + inline source lines */
.op-sources { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); font-size: 15px; line-height: 1.6; }
.op-sources a { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 500; }
.op-sources__host, .op-sources__checked { color: var(--text-2); font-size: 14px; }
.op-source-line { margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.op-source-line__k { font-weight: 600; color: var(--text-1); }
.op-source-line a { display: inline-flex; align-items: center; gap: var(--space-1); }
.op-guide__sources { margin-block-start: var(--space-12); }

/* Guide archive */
.op-guides__group { margin-block-end: var(--space-12); }
.op-guides__group > h2 { margin-block-end: var(--space-5); font-size: 22px; }
.op-guide-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.op-guide-card { display: grid; gap: var(--space-3); align-content: start; }
.op-guide-card__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 19px; line-height: 1.4; }
.op-guide-card__title a { color: var(--text-1); text-decoration: none; }
.op-guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.op-guide-card { position: relative; }
.op-guide-card__title a:hover { color: var(--brand); }
.op-guide-card__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
:lang(ar) .op-guide-card__excerpt { line-height: 1.8; }
.op-guide-card__meta { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; color: var(--text-2); }
.op-guide-card__meta .icon { inline-size: 16px; block-size: 16px; color: var(--status-open-fg); }

/* Glossary */
.op-az { position: sticky; inset-block-start: var(--header-h); z-index: 1; margin-block-end: var(--space-6); padding-block: var(--space-2); background: var(--surface-page); border-block-end: var(--border-w) solid var(--border-1); }
.op-az ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.op-az a, .op-az span {
  display: inline-grid; place-items: center; min-inline-size: 36px; min-block-size: 36px;
  border-radius: var(--radius-md); font-weight: 600; font-size: 15px; text-decoration: none;
}
.op-az a { color: var(--brand); background: var(--brand-soft); }
.op-az a:hover { background: var(--brand); color: var(--brand-fg); }
.op-az span { color: var(--text-3); }
.op-glossary__letter { scroll-margin-block-start: calc(var(--header-h) + 64px); }
.op-glossary__letter-title { margin: var(--space-8) 0 var(--space-3); font-size: 28px; color: var(--brand); }
.op-glossary { margin: 0; }
.op-term { padding-block: var(--space-5); border-block-end: var(--border-w) solid var(--border-1); scroll-margin-block-start: calc(var(--header-h) + 64px); }
.op-term:target { background: var(--brand-soft); border-radius: var(--radius-md); padding-inline: var(--space-3); }
.op-term__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.op-term__name { font-style: normal; font-size: 19px; font-weight: 700; color: var(--text-1); }
.op-term__other { font-size: 17px; font-weight: 500; color: var(--text-2); }
.op-term__anchor { margin-inline-start: auto; color: var(--text-3); text-decoration: none; font-weight: 600; }
.op-term__anchor:hover { color: var(--brand); }
.op-term__body { margin: 0; line-height: 1.7; }
:lang(ar) .op-term__body { line-height: 1.9; }
.op-term__body > p:first-child { margin: 0; }

/* Deadline calendar */
.op-deadlines .op-page-head { max-inline-size: 72rem; }
.op-deadlines__updated { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; max-inline-size: 72ch; }
.op-deadlines__updated .icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
.op-deadlines__months { margin-block-end: var(--space-8); }
.op-deadlines__months .op-chip { min-block-size: var(--touch-min); padding-inline: var(--space-4); text-decoration: none; }
.op-deadlines__month { margin-block-end: var(--space-12); scroll-margin-block-start: var(--space-6); }
.op-deadlines__month > h2 { margin-block-end: var(--space-4); font-size: 24px; }
.op-deadlines__note { max-inline-size: 72ch; color: var(--text-2); }
.op-deadlines__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.op-deadlines__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-md); }

.op-table-wrap { overflow-x: auto; background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-lg); }
.op-deadline-table { inline-size: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.op-deadline-table th, .op-deadline-table td { padding: var(--space-3); text-align: start; vertical-align: middle; border-block-end: var(--border-w) solid var(--border-1); }
.op-deadline-table thead th { font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface-3); white-space: nowrap; }
.op-deadline-table tbody tr:last-child > * { border-block-end: 0; }
.op-deadline-table tbody th { font-weight: 600; white-space: nowrap; }
.op-deadline-table__title { min-inline-size: 15rem; }
.op-deadline-table__title a { font-weight: 600; color: var(--text-1); }
.op-deadline-table__title a:hover { color: var(--brand); }
.op-deadline-table__row--closed { color: var(--text-2); }
.op-deadline-table__row--closed .op-deadline-table__title a { color: var(--text-2); }
.op-deadline-table__official, .op-deadline-table__ast, .op-deadline-table__cairo, .op-deadline-table__left { white-space: nowrap; }
.op-muted { color: var(--text-3); }
a.op-muted { color: var(--text-2); }
.op-ics { white-space: nowrap; }
.op-ics .icon { inline-size: 16px; block-size: 16px; }
@media (min-width: 768px) {
  /* Icon-only button in the table (the aria-label names the record) */
  .op-ics { position: relative; inline-size: var(--touch-min); padding-inline: 0; }
  .op-ics > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 767.98px) {
  .op-table-wrap { overflow: visible; background: none; border: 0; }
  .op-deadline-table, .op-deadline-table tbody, .op-deadline-table tr, .op-deadline-table th, .op-deadline-table td { display: block; }
  .op-deadline-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .op-deadline-table tr { margin-block-end: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-1); border: var(--border-w) solid var(--border-1); border-radius: var(--radius-lg); }
  .op-deadline-table th, .op-deadline-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-15) 0; border: 0; white-space: normal; }
  .op-deadline-table [data-label]::before { content: attr(data-label); flex: none; font-size: 13px; font-weight: 500; color: var(--text-2); }
  .op-deadline-table__title { flex-direction: column; align-items: flex-start !important; min-inline-size: 0; }
  .op-deadline-table__title::before { display: none; }
  .op-deadline-table__title a { font-size: 16px; }
  .op-deadline-table tbody th { order: -1; font-size: 15px; }
  .op-deadline-table__status { flex-wrap: wrap; }
  .op-deadline-table__status .op-deadline-table__opens { flex-basis: 100%; margin: 0; text-align: end; }
}

/* Upcoming record: card foot + deadline-calendar status cell */
.op-daysleft--upcoming { color: var(--info-fg); }
.op-deadline-table__opens { display: block; margin-block-start: var(--space-1); font-size: 13px; font-weight: 500; color: var(--info-fg); }
.op-deadline-table__row--upcoming .op-deadline-table__left { color: var(--text-2); }

/* Closed record (C10) */
.op-cycle__list { display: grid; gap: var(--space-1); margin: var(--space-2) 0; }
.op-cycle__list > div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.op-cycle__list dt { min-inline-size: 11rem; }
.op-cycle__list dd { margin: 0; font-weight: 600; }
.op-single__body > .op-nl { margin-block-end: var(--space-8); }

/* ---------- Niche-profile additions (jobs niche first; all logical properties) ---------- */
/* Footer trust link: .op-footer a is inline-flex (OPDS), which drops the spaces around the <bdi> brand
   ("Verified byBrandEditorial Team"). Inline-block keeps them; padding keeps the 44px target. */
.op-footer__trust a { display: inline-block; min-block-size: 0; padding-block: calc((var(--touch-min) - 1.5em) / 2); line-height: 1.5; }
/* Nationality chip ("open to nationals of"): globe icon + names. */
.op-tag--nationality { display: inline-flex; align-items: center; gap: var(--space-1); }
.op-tag--nationality .icon { inline-size: 14px; block-size: 14px; flex: none; }
/* Salary note under the figure in key facts. */
.op-facts__note { display: block; margin-block-start: var(--space-1); color: var(--text-2); font-weight: 400; font-size: 0.93em; }
/* Salary line on cards. */
.op-opp__salary bdi { font-weight: 600; }