/* Research hub additions on top of the shared style.css.
   Division accent: research green (#1E6E63). Bilingual: RTL typography below. */
.portal-research {
  --division-accent: var(--div-research);
  /* Owner-requested per-portal page tint (2026-06-17): a calm, light green wash
     so a visitor feels at once they are in the research section, not the main
     site. We remap the page canvas and the two light-tint tokens to the green
     family in one place, so every soft surface (bands, notes, chips, cite box,
     hairlines) stays coherent. White card surfaces and the navy/red brand
     tokens are untouched. Deliberate, documented exception to the
     "only --division-accent per portal" rule in DESIGN_GUIDE 18.2. */
  --color-bg: #EEF4F1;
  --blue-050: #E7F1EC;
  --blue-100: #CFE2D9;
}

/* Division accent touches: a clear research identity (green top rule, green
   division label, green breadcrumb links) so a visitor sees at once this is the
   research hub and not the main institute site. */
.portal-research .site-header { border-block-end-color: var(--blue-100); }
.portal-research .site-header::before {
  block-size: 3px;
  background: linear-gradient(to right, var(--div-research) 0 40%, var(--brand) 40% 100%);
}
.portal-research .kicker { color: var(--div-research); }

/* Brand second line in the HEADER ONLY: a green division label (the hub shows the
   institute name here). Scoped to the header so the footer keeps its readable
   institute name. */
.portal-research .site-header .brand-full {
  color: var(--div-research);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  max-inline-size: none;
}

/* Header CTA: refined, single line, with an arrow. */
.portal-research .header-cta {
  white-space: nowrap;
  padding: .55rem 1.1rem;
  font-size: .9rem;
  box-shadow: 0 2px 10px rgba(36, 47, 95, .16);
}

/* Page head: a distinct tinted band, art contained, with a faint green wash. */
.portal-research .page-head {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(30, 110, 99, .06), transparent 46%),
    linear-gradient(118deg, var(--blue-050) 0%, var(--surface) 55%, var(--blue-050) 100%);
  border-block-end: 1px solid var(--blue-100);
}
.portal-research .page-head::after {
  inline-size: min(34%, 430px);
  opacity: .5;
}

/* Breadcrumbs: larger and clearer, with green links. */
.portal-research .breadcrumbs { font-size: .82rem; font-weight: 600; color: var(--n-700); }
.portal-research .breadcrumbs a { color: var(--div-research); }
.portal-research .breadcrumbs a:hover { color: #14524a; }

.portal-head { position: relative; overflow: hidden; }

/* Language toggle in the header */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--brand);
  border: 1px solid var(--n-300);
  border-radius: 99px;
  padding: .3rem .85rem;
  margin-inline-end: .6rem;
  min-block-size: 34px;
}
.lang-toggle:hover { border-color: var(--div-research); color: var(--div-research); }

/* Category / kind chip */
.cat-chip {
  display: inline-block;
  border: 1px solid var(--div-research);
  color: var(--div-research);
  border-radius: 99px;
  padding: .05rem .6rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-inline-end: .5rem;
}

/* Status badge: open (green), closed (muted), active/completed for projects */
.status-badge {
  display: inline-block;
  border-radius: 99px;
  padding: .05rem .6rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.status-open, .status-active {
  color: var(--ok);
  background: rgba(30, 122, 82, .08);
  border-color: rgba(30, 122, 82, .35);
}
.status-closed {
  color: var(--n-700);
  background: var(--n-100);
  border-color: var(--n-300);
}
.status-completed {
  color: var(--div-research);
  background: rgba(30, 110, 99, .08);
  border-color: rgba(30, 110, 99, .35);
}

/* Hero actions */
.rh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.rh-hero { padding-block: clamp(1.8rem, 4.5vw, 2.8rem); }
.rh-hero h1 { font-size: var(--fs-800); }
.rh-hero .lede { font-size: var(--fs-400); }

/* Section tint: a touch deeper than the page canvas so bands still read. */
.section-tint { background: #E0EDE6; }

/* "What the hub offers" value cards */
.rh-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 12px;
  color: var(--div-research);
  background: rgba(30, 110, 99, .08);
  border: 1px solid rgba(30, 110, 99, .25);
  margin-block-end: var(--space-3);
}
.value-card h3 { font-size: var(--fs-500); margin-block-end: .35rem; }
.value-card p { color: var(--n-700); margin: 0; font-size: .95rem; }

/* -------- Researchers -------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.person-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-block-start: 3px solid var(--div-research);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.person-top { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); }
.person-photo {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--blue-100);
  flex: none;
}
.person-initials {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--div-research);
  background: rgba(30, 110, 99, .08);
  border: 1px solid rgba(30, 110, 99, .25);
  flex: none;
}
.person-card h3 { font-size: var(--fs-500); margin: 0 0 .1rem; }
.person-role { font-size: .85rem; color: var(--n-700); margin: 0; }
.person-card .excerpt { color: var(--n-700); font-size: .92rem; margin-block: 0 var(--space-3); }

/* Field chips (knowsAbout) */
.field-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: auto; }
.field-chip {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--n-700);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: 99px;
  padding: .1rem .55rem;
}

/* Profile (single researcher) hero */
.profile-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.profile-photo {
  inline-size: 150px;
  block-size: 150px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 1px solid var(--blue-100);
  box-shadow: var(--shadow-2);
}
.profile-initials {
  inline-size: 150px;
  block-size: 150px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  color: var(--div-research);
  background: rgba(30, 110, 99, .08);
  border: 1px solid rgba(30, 110, 99, .25);
}
.profile-ids { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); align-items: center; }
.id-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  text-decoration: none;
  color: var(--div-research);
  border: 1px solid var(--n-300);
  border-radius: 99px;
  padding: .25rem .8rem;
}
.id-link:hover { border-color: var(--div-research); background: rgba(30, 110, 99, .06); }

/* -------- Project / call cards reuse .news-grid + .news-card from style.css -------- */
.card-byline { font-size: .85rem; color: var(--n-700); margin-block-start: auto; }
.card-deadline { font-family: var(--font-mono); font-size: .78rem; color: var(--n-700); margin-block: .2rem 0; }
.amount-line { font-weight: 600; color: var(--div-research); }

/* Single project / call body reuses .article-body + .content-sheet + .prose */
.detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  max-inline-size: 56rem;
}
.detail-list > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: .55rem;
  border-block-end: 1px solid var(--n-100);
}
.detail-list dt { font-weight: 600; color: var(--n-700); margin: 0; }
.detail-list dd { margin: 0; word-break: break-word; }

/* Resource index cards (policy pages) */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.policy-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-inline-start: 3px solid var(--div-research);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.policy-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.policy-card h2 { font-size: var(--fs-500); margin-block-end: .35rem; }
.policy-card p { color: var(--n-700); font-size: .92rem; margin-block: 0 var(--space-3); }
.policy-more {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--div-research);
  font-weight: 600;
  font-size: .85rem;
}

/* Type / kind filter row */
.type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-block-end: 1px solid var(--n-100);
  padding-block-end: var(--space-3);
}
.type-filter a {
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  color: var(--n-700);
  border: 1px solid var(--n-300);
  border-radius: 99px;
  padding: .35rem 1rem;
  min-block-size: 24px;
}
.type-filter a:hover { border-color: var(--div-research); color: var(--div-research); }
.type-filter a.current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Note card (home + submit aside) */
.card-note {
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* Cross-portal "connect" band on the home page */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.connect-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.connect-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.connect-card h3 { font-size: var(--fs-500); margin-block: .2rem .3rem; }
.connect-card p { color: var(--n-700); font-size: .9rem; margin: 0; }
.connect-icon { color: var(--div-research); }

/* Citation box (APA / MLA / Chicago / Harvard) */
.cite-box {
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-start: var(--space-5);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-inline-start: 3px solid var(--div-research);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.cite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: .8rem;
}
.cite-copy { padding: .4rem .9rem; font-size: .85rem; background: var(--surface); }
.cite-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .8rem; }
.cite-tabs button {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .3rem .8rem;
  border: 1px solid var(--n-300);
  border-radius: 99px;
  background: var(--surface);
  color: var(--n-700);
  cursor: pointer;
  min-block-size: 28px;
}
.cite-tabs button:hover { border-color: var(--div-research); color: var(--div-research); }
.cite-tabs button[aria-selected="true"] { background: var(--div-research); border-color: var(--div-research); color: #fff; }
.cite-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--n-100);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  word-break: break-word;
}

/* -------- Responsive -------- */
@media (max-width: 60rem) {
  .rh-values { grid-template-columns: 1fr 1fr; }
  .people-grid { grid-template-columns: 1fr 1fr; }
  .connect-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .rh-values { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .detail-list > div { grid-template-columns: 1fr; gap: .1rem; }
}
.footer-writers { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
@media (max-width: 60rem) {
  .footer-writers { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 36rem) {
  .footer-writers { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Mobile header: the portals add a language toggle next to the menu button. Keep
   the toggle compact in the hamburger zone, and on phones let the brand shrink so
   the menu button is never pushed off a narrow screen. */
@media (max-width: 72rem) {
  .lang-toggle { margin-inline-end: .3rem; padding: .28rem .62rem; font-size: .74rem; min-block-size: 38px; }
}
@media (max-width: 30rem) {
  .site-header .brand { min-inline-size: 0; }
  .site-header .brand-name { min-inline-size: 0; }
  .site-header .brand-abbr { font-size: 1.06rem; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   Arabic / RTL typography. IBM Plex Sans Arabic (self-hosted) is the brand
   Arabic face; it also drives Arabic text on an English page (the language
   toggle) via [lang="ar"]. Arabic is cursive, so the latin letter-spacing must
   be removed wherever it is applied, or the glyphs disconnect and look broken.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

[dir="rtl"] {
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', serif;
  --font-mono: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, monospace;
  line-height: 1.7;
}
[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; }
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .kicker, [dir="rtl"] .brand-abbr, [dir="rtl"] .brand-full,
[dir="rtl"] .breadcrumbs, [dir="rtl"] .cat-chip, [dir="rtl"] .status-badge,
[dir="rtl"] .type-filter a, [dir="rtl"] .footer-title, [dir="rtl"] .cite-tabs button,
[dir="rtl"] .field-chip, [dir="rtl"] .id-link { letter-spacing: 0; }
[dir="rtl"] .site-header .brand-full { font-size: .74rem; text-transform: none; letter-spacing: 0; }
[dir="rtl"] .portal-research .site-header::before {
  background: linear-gradient(to left, var(--div-research) 0 40%, var(--brand) 40% 100%);
}
[dir="rtl"] .portal-research .page-head {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(30, 110, 99, .06), transparent 46%),
    linear-gradient(242deg, var(--blue-050) 0%, var(--surface) 55%, var(--blue-050) 100%);
}
/* Keep citations and identifiers readable left-to-right inside an RTL page */
[dir="rtl"] .cite-text,
[dir="rtl"] .id-link,
[dir="rtl"] .detail-list dd { direction: ltr; text-align: start; }