/* =====================================================================
   public.css — Public site theme, ported from ProfAly.Static/style.css
   Palette: primary #0B5D3B · accent #C8A45D · warm surfaces · RTL-first.
   ===================================================================== */
:root {
  --primary: #0B5D3B; --primary-700: #084229; --primary-300: #2F8460; --primary-050: #E9F2ED;
  --accent: #C8A45D; --accent-600: #A8842F; --accent-050: #F7F0DF; --accent-ink: #7D5E16;
  --bg: #F8F8F8; --surface: #FFFFFF; --surface-2: #F1F0EC;
  --ink: #1F2937; --muted: #5B6472; --line: #E4E2DB; --line-strong: #D4D1C7;
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --leading: 1.7; --maxw: 1200px; --radius: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.12);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px -10px rgba(16,24,40,.10);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.05), 0 24px 56px -20px rgba(16,24,40,.18);
  --section-pad: clamp(3.5rem, 7vw, 6.5rem); --gutter: clamp(1.1rem, 4vw, 2rem); --nav-h: 76px;
  --radius-sm: 9px; --radius-lg: 20px; --radius-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1);
  /* Motion durations (doc 86) */
  --dur-fast: .18s; --dur: .22s; --dur-slow: .3s;
  /* Display font alias (Latin serif / Arabic serif swap via [data-lang]) */
  --font-display: var(--font-head);
  /* Fluid type scale (doc 86 — design system) */
  --fs-display: clamp(2.2rem, 5.5vw, 3.7rem);
  --fs-h1: clamp(1.8rem, 4vw, 2.7rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: 1.3rem;
  --fs-lead: 1.12rem;
  --fs-body: 1.0625rem;
  --fs-sm: .92rem;
  --fs-xs: .82rem;
}
[data-lang="ar"] {
  --font-head: "Amiri", "Times New Roman", serif;
  --font-body: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
  --leading: 1.95;
}
[data-theme="dark"] {
  --bg: #0E1512; --surface: #15201B; --surface-2: #111A16; --ink: #ECECE6; --muted: #A6B0AB;
  --line: #243029; --line-strong: #324034; --primary-050: #14241C; --accent-050: #241F12; --accent-ink: #E0C27A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 28px 64px -18px rgba(0,0,0,.62);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink);
  line-height: var(--leading); font-size: 1.0625rem; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; font-weight: 700; margin: 0 0 .5em; letter-spacing: -.01em; }
[data-lang="ar"] h1, [data-lang="ar"] h2, [data-lang="ar"] h3 { letter-spacing: 0; line-height: 1.4; }
p { margin: 0 0 1rem; }
a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-600); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body);
  font-weight: 600; padding: .75rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: all .22s var(--ease); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-050); color: var(--primary); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; transform: translateY(-2px); }
.btn-gold { background: var(--accent); color: #1f1605; border-color: var(--accent); }
.btn-gold:hover { background: var(--accent-600); color: #fff; }

/* Navbar */
.site-nav { position: sticky; inset-block-start: 0; z-index: 1030; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); }
/* Header spans a little wider than the 1200px content column so all nav items fit
   on a single line (the shared .container cap was squeezing them into 2 lines).
   Three balanced columns — 1fr | auto | 1fr — keep the two side columns equal, so the
   middle (nav) column is always centred in the header itself, not merely between the
   brand and the controls. This makes the nav dead-centre regardless of how wide the
   brand or controls are, and works identically in LTR and RTL (grid columns follow the
   inline direction; justify-self is flow-relative). max-width is a little wider so the
   longer French menu also fits on one centred line at common desktop widths. */
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 1rem; min-block-size: var(--nav-h); max-width: 1560px; }
.brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand-mark { inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--primary), var(--primary-300)); color: #fff;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.brand-text .sub { font-size: .72rem; color: var(--muted); font-weight: 500; }
/* The menu sits in the centre grid column and lays its items out in a single centred
   row. margin:0 clears the <ul>'s default block-end margin, which would otherwise make
   align-items:center centre the margin-box and float the links a few px above the rest.
   If the labels are too wide for the row (e.g. French on a narrow desktop), public.js
   collapses the header to the hamburger drawer (.nav-collapsed) instead of overflowing. */
.nav-menu { grid-column: 2; justify-self: center; display: flex; justify-content: center; gap: .1rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
/* Every item (link AND dropdown toggle) is the same full-height chip: the whole
   chip is the hover/click target (≥44px, accessible), all items share one baseline,
   and labels never wrap. Typography/colours unchanged. */
.nav-menu a { position: relative; display: inline-flex; align-items: center; min-block-size: 44px;
  white-space: nowrap; color: var(--ink); font-size: .9rem; font-weight: 500; padding-block: 0; padding-inline: .5rem; border-radius: 8px; line-height: 1; }
.nav-menu a::after { content: ""; position: absolute; inset-block-end: .6rem; inset-inline: .5rem;
  block-size: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease); }
.nav-menu a:hover { color: var(--primary); }
.nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a.active { color: var(--primary); font-weight: 600; }

/* Digital Resources dropdown (doc 76). Desktop: hover/focus-within reveals the menu;
   the toggle button is keyboard/click operable (JS sets aria-expanded + .open). */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; min-block-size: 44px; white-space: nowrap; gap: .2rem;
  border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500;
  padding-block: 0; padding-inline: .5rem; border-radius: 8px; line-height: 1; cursor: pointer; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--primary); }
.nav-dropdown-toggle .caret { font-size: .7rem; transition: transform .2s var(--ease); }
/* Bridge across the trigger→menu boundary so hovering never crosses a dead-zone. */
.nav-dropdown::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; block-size: .6rem; }
.nav-dropdown-menu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 1040;
  min-inline-size: 220px; list-style: none; margin: 0; padding: .4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown.open .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown-menu a { display: block; padding: .55rem .7rem; border-radius: 8px; font-size: .9rem; }
.nav-dropdown-menu a::after { content: none; }
.nav-dropdown-menu a:hover { background: var(--primary-050); color: var(--primary); }

/* Controls occupy the trailing grid column and align to the trailing edge (justify-self
   is flow-relative, so this is the right edge in LTR and the left edge in RTL). Explicit
   grid-column:3 keeps them pinned there even when the menu is out of flow (the mobile /
   collapsed drawer sets .nav-menu to position:absolute). */
.nav-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5rem; }
.icon-btn { inline-size: 38px; block-size: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent-600); }
/* Burger visibility tracks the menu breakpoint below (not Bootstrap's xl/xxl) so the
   two never desync: hidden on the desktop one-line nav, shown when it collapses. */
.nav-burger { display: none; }
/* Segmented language switch (doc 86): a surface-2 track holding three pills. */
.lang-switch { display: inline-flex; align-items: center; gap: .15rem; padding: .22rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.lang-link { display: inline-grid; place-items: center; min-inline-size: 34px; min-block-size: 34px;
  padding-inline: .5rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang-link:hover { color: var(--primary); }
.lang-link.active { color: var(--primary); background: var(--surface); box-shadow: var(--shadow-sm); }

/* Sections */
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--surface-2); }
.section-head { max-width: 760px; margin-block-end: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-block-end: .8rem; }
.eyebrow::before { content: ""; inline-size: 1.8rem; block-size: 2px; background: var(--accent); border-radius: 2px; }
.center .eyebrow { justify-content: center; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.section-lead { color: var(--muted); font-size: 1.1rem; }

/* Page hero + breadcrumb */
.page-hero { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--surface-2); border-block-end: 1px solid var(--line); }
.crumbs { font-size: .85rem; color: var(--muted); margin-block-end: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
/* Active (current-page) breadcrumb item — green + bold, matching the static design. */
.crumbs [aria-current] { color: var(--primary); font-weight: 600; }

/* Home hero (ported from the static design) */
.hero { position: relative; overflow: hidden;
  background: radial-gradient(1100px 500px at 85% -10%, var(--primary-050), transparent 60%), var(--bg);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 26px 26px; opacity: .35;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent); }
.hero .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 992px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--line);
  padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--primary); box-shadow: var(--shadow-sm); margin-block-end: 1.4rem; }
.hero-eyebrow .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
.hero-name { font-size: clamp(2.2rem, 5.5vw, 3.7rem); margin-block-end: .4rem; }
.hero-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--primary); margin-block-end: 1rem; }
.hero-positioning { font-size: 1.14rem; color: var(--muted); max-inline-size: 38ch; margin-block-end: 1.8rem; }
.hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; }
/* Hero portrait + badge (ported from the static design) */
.hero-portrait-wrap { position: relative; justify-self: center; max-inline-size: 420px; inline-size: 100%; }
.hero-portrait { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); aspect-ratio: 4 / 4.4; background: var(--surface-2); }
.hero-portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; }
.hero-portrait-fallback { display: grid; place-items: center; block-size: 100%; font-family: var(--font-head); font-size: 5rem; color: var(--primary); }
.hero-portrait-wrap::after { content: ""; position: absolute; inset-block-end: -16px; inset-inline-end: -16px; inline-size: 60%; block-size: 60%; z-index: -1; border-radius: 22px; background: linear-gradient(140deg, var(--accent), transparent 70%); opacity: .35; }
.hero-badge { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: .7rem; max-inline-size: 86%; }
.hero-badge .b-num { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--primary); line-height: 1; }
.hero-badge .b-txt { font-size: .8rem; color: var(--muted); line-height: 1.3; }

/* Chips / stats */
.cred-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); padding: .55rem 1.1rem; border-radius: 999px; font-size: .92rem; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.chip::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.chip:hover { border-color: var(--primary-300); transform: translateY(-2px); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-card { position: relative; overflow: hidden; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.2rem; min-block-size: 118px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; }
.stat-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.stat-num { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700; color: var(--primary); line-height: 1; }
.stat-label { color: var(--muted); font-size: .9rem; }

/* Cards / grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
/* Homepage featured books: 1 → 2 → 4 across breakpoints. */
.card-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 576px) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Search bar (Books) */
.search-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 1.6rem; }
.search-input { flex: 1 1 260px; min-inline-size: 0; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: .7rem 1.2rem; }
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }

/* Inline PDF / link actions on publication & research items */
.pub-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .7rem; }
.btn-sm { padding: .4rem 1rem; font-size: .85rem; }
.book-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%; }
.book-cover { aspect-ratio: 3/2; display: grid; place-items: center; position: relative; background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; }
.book-cover .initial { font-family: var(--font-head); font-size: 3rem; opacity: .9; }
.book-cover .year { position: absolute; inset-block-end: .5rem; inset-inline-end: .75rem; font-size: .8rem; opacity: .85; }
.book-flag { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; background: var(--accent); color: #1f1605; font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; }
.book-info { padding: 1rem; }
.book-title { font-size: 1.05rem; margin-block-end: .3rem; }
.book-pub, .book-role { color: var(--muted); font-size: .85rem; margin: 0; }

/* Publication / list items */
.pub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.pub-item { display: flex; gap: 1.3rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pub-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pub-year { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--primary); min-inline-size: 3.6rem; line-height: 1.4; flex: 0 0 auto; }
.pub-title { font-size: 1.1rem; line-height: 1.4; margin-block-end: .35rem; }
.pub-venue { color: var(--muted); font-size: .96rem; margin: 0; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-block: .6rem; inset-inline-start: 8px; inline-size: 2px; background: linear-gradient(var(--accent), var(--line)); border-radius: 2px; }
.tl-item { position: relative; padding-inline-start: 2.4rem; padding-block-end: 1.8rem; }
.tl-item:last-child { padding-block-end: 0; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .35rem; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-shadow: 0 0 0 4px var(--primary-050); }
.tl-period { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.tl-role { font-size: 1.18rem; margin: .25rem 0 .15rem; }
.tl-org { color: var(--muted); margin: 0 0 .25rem; font-weight: 500; }

/* Panels / lists */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); margin-block-end: 1.25rem; }
/* About aside: panels size to their own content, top-aligned (matches static). */
.about-aside { align-self: flex-start; }
.about-aside .panel { block-size: auto; }
.panel-title { font-size: 1.3rem; margin-block-end: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.panel-title::before { content: ""; inline-size: 4px; block-size: 1.2em; background: var(--accent); border-radius: 3px; flex: 0 0 auto; }
.meta-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-block-end: 1px solid var(--line); }
.meta-row dt { color: var(--muted); margin: 0; }
.meta-row dd { margin: 0; font-weight: 600; }
.chip-set { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.skill-chip { padding: .4rem .9rem; border-radius: 999px; background: var(--primary-050); color: var(--primary); font-size: .85rem; font-weight: 500; }

/* Theses table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.theses-table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.theses-table thead th { background: var(--primary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .9rem; padding: .9rem 1rem; text-align: start; white-space: nowrap; }
.theses-table tbody td { padding: .85rem 1rem; border-block-start: 1px solid var(--line); vertical-align: top; }
.theses-table tbody tr:nth-child(even) { background: var(--surface-2); }
.theses-table tbody tr:hover { background: var(--primary-050); }
.theses-table .th-year { font-weight: 600; color: var(--primary); }
.badge-deg, .badge-cat { display: inline-block; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.badge-PhD { background: var(--primary-050); color: var(--primary-700); }
.badge-MA { background: var(--accent-050); color: var(--accent-600); }
.badge-supervised { background: var(--primary); color: #fff; }
.badge-examined { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.badge-ongoing { background: var(--accent); color: #1f1605; }
.filter-tabs { display: inline-flex; gap: .4rem; flex-wrap: wrap; margin-block-end: 1.4rem; background: var(--surface-2); padding: .35rem; border-radius: 999px; border: 1px solid var(--line); }
.filter-tab { border: 0; background: transparent; color: var(--ink); padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 500; }
.filter-tab:hover { color: var(--primary); }
.filter-tab.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }

/* Activities accordion (ported from the static design) */
.activities-acc.accordion { --bs-accordion-border-color: var(--line); display: grid; gap: .9rem; }
.activities-acc .accordion-item { border: 1px solid var(--line); border-radius: var(--radius) !important; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.activities-acc .accordion-button { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--ink); background: var(--surface); padding: 1.1rem 1.4rem; gap: .8rem; box-shadow: none; }
[data-lang="ar"] .activities-acc .accordion-button { font-family: var(--font-body); }
.activities-acc .accordion-button:not(.collapsed) { background: var(--primary-050); color: var(--primary-700); }
.activities-acc .accordion-button:focus { box-shadow: 0 0 0 3px var(--primary-050); border: 0; }
.activities-acc .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D3B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
[dir="rtl"] .activities-acc .accordion-button::after { margin-inline-start: 0; margin-inline-end: auto; }
.acc-count { flex: 0 0 auto; min-inline-size: 2rem; block-size: 2rem; display: inline-grid; place-items: center;
  background: var(--primary); color: #fff; border-radius: 999px; font-family: var(--font-body); font-size: .85rem; font-weight: 700; }
.act-list { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .7rem; }
.act-list li { color: var(--ink); line-height: 1.65; }
.act-list li::marker { color: var(--accent); }

/* Course / membership rows (bordered list with a gold dot) */
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.course-item { display: flex; align-items: flex-start; gap: .8rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), border-color .18s var(--ease); }
[dir="ltr"] .course-item:hover { transform: translateX(4px); border-color: var(--primary-300); }
[dir="rtl"] .course-item:hover { transform: translateX(-4px); border-color: var(--primary-300); }
.course-item::before { content: ""; flex: 0 0 auto; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--accent); margin-block-start: .55rem; }
.course-item .course-name { font-size: 1rem; margin: 0; }
.course-item .course-inst { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; }

/* Snapshot (homepage About — ported from the static design) */
.snapshot-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 992px) { .snapshot-grid { grid-template-columns: .9fr 1.1fr; } }
.snapshot-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
.snapshot-photo img { inline-size: 100%; aspect-ratio: 5/4; object-fit: cover; object-position: top center; display: block; }
.snapshot-photo-fallback { aspect-ratio: 5/4; display: grid; place-items: center; background: linear-gradient(150deg, var(--primary-700), var(--primary) 55%, var(--primary-300)); color: rgba(255,255,255,.92); font-family: var(--font-head); font-size: 4rem; }
.snapshot-text p { font-size: 1.12rem; color: var(--ink); }

/* Contact (ported from the static design) */
.contact-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 992px) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.contact-aside { align-self: flex-start; }
.contact-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); margin-block-end: 1.5rem; }
.contact-photo img { inline-size: 100%; aspect-ratio: 4/3.6; object-fit: cover; object-position: top center; }
.contact-photo-fallback { aspect-ratio: 4/3.6; display: grid; place-items: center; background: linear-gradient(150deg, var(--primary-700), var(--primary) 55%, var(--primary-300)); color: rgba(255,255,255,.92); font-family: var(--font-head); font-size: 4rem; font-weight: 700; }
.contact-row { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1rem; border-block-end: 1px solid var(--line); }
.contact-row:last-child { border-block-end: 0; }
.contact-ic { flex: 0 0 auto; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--primary-050); display: grid; place-items: center; }
.contact-ic::before { content: ""; inline-size: 20px; block-size: 20px; background: var(--primary); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.contact-ic-phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.contact-ic-email::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); }
.contact-ic-loc::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.contact-label { display: block; font-size: .82rem; color: var(--muted); margin-block-end: .15rem; }
.contact-row a, .contact-row span:not(.contact-label) { font-weight: 600; color: var(--ink); }
.contact-row a:hover { color: var(--primary); }
.contact-social { display: flex; flex-wrap: wrap; gap: .6rem; padding-block-start: 1rem; }
.contact-social .btn { padding: .5rem 1.1rem; }

/* Form card */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow); }
.form-card .panel-title { margin-block-end: 1.5rem; }
.form-grid { display: grid; gap: 1.4rem; }
@media (min-width: 576px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .field-full { grid-column: 1 / -1; } }
.field label { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); margin-block-end: .55rem; }
.field input, .field textarea { inline-size: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: .8rem 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field textarea { resize: vertical; min-block-size: 200px; padding-block: 1rem; }
.field input:hover, .field textarea:hover { border-color: var(--primary-300); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); }
.form-card .btn-primary { margin-block-start: 1rem; min-block-size: 54px; padding-inline: 2rem; }
@media (max-width: 575.98px) { .form-card .btn-primary { inline-size: 100%; } }

/* CTA band */
.cta-band { text-align: center; background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; border-radius: 20px; padding: clamp(2rem, 5vw, 3.5rem); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }

/* Footer */
/* Footer (ported from the static design) */
.site-footer { background: var(--surface-2); border-block-start: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; margin-block-start: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-block-end: 1rem; }
.footer-brand .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.footer-tagline { color: var(--muted); max-inline-size: 40ch; margin-block-end: .6rem; }
.footer-built { color: var(--muted); font-size: .88rem; }
.footer-h { font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-600); font-weight: 700; margin-block-end: 1rem; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-links a, .footer-contact a { color: var(--ink); font-size: .96rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--primary); }
@media (min-width: 576px) {
  .footer-links { grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: clamp(1.25rem, 4vw, 2.5rem); }
}
.footer-loc { color: var(--muted); font-size: .96rem; }
.footer-base { border-block-start: 1px solid var(--line); margin-block-start: 2.2rem; padding-block-start: 1.4rem; color: var(--muted); font-size: .88rem; text-align: center; }

/* Back to top (ported from the static design) */
.back-to-top { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 1000;
  inline-size: 48px; block-size: 48px; border-radius: 50%; border: 0; background: var(--primary); color: #fff;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: all .28s var(--ease); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--primary-700); transform: translateY(-3px) scale(1.05); }

/* Videos */
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
/* Click-to-play facade: a thumbnail + play button that swaps to the iframe on activate
   (reuses the embed box + the book-card play button; doc 90). */
.video-facade { cursor: pointer; padding: 0; }
.video-embed > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { background: var(--primary); }
.book-cover .video-play, .video-embed .video-play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  inline-size: 54px; block-size: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11,93,59,.85); color: #fff; font-size: 1.2rem; padding-inline-start: .15rem;
}
.related-video { display: flex; gap: .75rem; align-items: center; color: var(--ink); }
.related-video img { inline-size: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.related-video span { font-size: .9rem; font-weight: 500; }
.related-video:hover span { color: var(--primary); }

/* Event gallery (doc 76). Responsive grid of thumbnails linking to the full image. */
.event-meta li { margin-block-end: .35rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
.gallery-item { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.gallery-item img { inline-size: 100%; block-size: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }

.empty-state { color: var(--muted); text-align: center; padding: 2rem; }
.mt-section { margin-block-start: clamp(2rem, 4vw, 3rem); }
.text-center { text-align: center; }

/* Below the desktop breakpoint the hero/snapshot stack to one column (the portrait
   keeps its 420px cap and centers via .hero-portrait-wrap justify-self) — matching
   the static, which keeps the copy start-aligned rather than centered. */
@media (max-width: 991.98px) {
  .snapshot-grid { grid-template-columns: 1fr; }
}

/* Brand subtitle (tagline): shown only in the tablet range where the menu is
   collapsed and there is room under the name — matches the static design. */
.brand-text .sub { display: none; }
@media (min-width: 768px) and (max-width: 1439.98px) { .brand-text .sub { display: block; } }

/* Desktop horizontal menu appears at xl (≥1200px); below that the hamburger
   drawer is used (matches the static breakpoint). No width range loses the nav. */
@media (max-width: 1439.98px) {
  .nav-burger { display: inline-grid; }   /* show the menu trigger when the one-line nav collapses */
  .nav-menu {
    display: none; position: absolute; inset-block-start: var(--nav-h); inset-inline: 0;
    flex-direction: column; gap: .15rem; margin-inline: 0; background: var(--surface);
    border-block-end: 1px solid var(--line); box-shadow: var(--shadow);
    padding: .6rem 1rem 1rem; max-block-size: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: .8rem .75rem; font-size: 1rem; border-radius: 10px; }

  /* In the mobile drawer the dropdown is shown inline (static, always expanded). */
  .nav-dropdown { position: static; }
  .nav-dropdown::after { content: none; }   /* no hover-bridge in the drawer */
  .nav-dropdown-toggle { inline-size: 100%; justify-content: space-between; padding: .8rem .75rem; font-size: 1rem; }
  .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 .6rem; min-inline-size: 0; background: none; }
  .nav-dropdown-menu a { padding: .65rem .75rem; font-size: .95rem; }
  .nav-dropdown-toggle .caret { display: none; }
}

/* Content-driven collapse (above the breakpoint). public.js adds .nav-collapsed to
   the header when the horizontal menu's items would not fit its region on one line —
   e.g. the longer French labels — so the header falls back to the same hamburger
   drawer instead of ever overlapping the brand or language switcher. This mirrors the
   drawer rules above but is keyed to the class so it also applies at ≥1440px. Without
   JS, the bounded .nav-menu flex region still prevents any overlap. */
.site-nav.nav-collapsed .nav-burger { display: inline-grid; }
.site-nav.nav-collapsed .nav-menu {
  display: none; position: absolute; inset-block-start: var(--nav-h); inset-inline: 0;
  flex-direction: column; gap: .15rem; background: var(--surface);
  border-block-end: 1px solid var(--line); box-shadow: var(--shadow);
  padding: .6rem 1rem 1rem; max-block-size: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.site-nav.nav-collapsed .nav-menu.open { display: flex; }
.site-nav.nav-collapsed .nav-menu a { padding: .8rem .75rem; font-size: 1rem; border-radius: 10px; }
.site-nav.nav-collapsed .nav-dropdown { position: static; }
.site-nav.nav-collapsed .nav-dropdown::after { content: none; }
.site-nav.nav-collapsed .nav-dropdown-toggle { inline-size: 100%; justify-content: space-between; padding: .8rem .75rem; font-size: 1rem; }
.site-nav.nav-collapsed .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 .6rem; min-inline-size: 0; background: none; }
.site-nav.nav-collapsed .nav-dropdown-menu a { padding: .65rem .75rem; font-size: .95rem; }
.site-nav.nav-collapsed .nav-dropdown-toggle .caret { display: none; }

/* =====================================================================
   UI/UX audit fixes (Critical + High) — report 47/48
   ===================================================================== */

/* Accessibility: visible keyboard focus (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
.lang-link:focus-visible, .filter-tab:focus-visible, .accordion-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible, [data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible { outline-color: var(--accent); }

/* Accessibility: skip-to-content link (WCAG 2.4.1) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 2000;
  background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  font-weight: 600; transform: translateY(-150%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Header: elevation on scroll (set by public.js) */
.site-nav { transition: box-shadow .25s var(--ease); }
.site-nav.scrolled { box-shadow: 0 4px 18px -10px rgba(16,24,40,.25); }

/* Larger, AA-contrast language switcher targets */
.lang-link { min-block-size: 38px; display: inline-flex; align-items: center; }
.lang-link.active { color: var(--primary); background: var(--primary-050); }
.nav-actions .icon-btn { min-block-size: 38px; }

/* Improved empty state */
.empty-state {
  color: var(--muted); text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.empty-state .empty-title { font-family: var(--font-head); color: var(--ink); font-size: 1.3rem; margin-block-end: .5rem; }
.empty-state .btn { margin-block-start: 1.25rem; }

/* Responsive theses table → stacked cards on small screens */
.theses-table caption { caption-side: top; text-align: start; color: var(--muted); font-size: .85rem; padding: .25rem .9rem .6rem; }
@media (max-width: 640px) {
  .table-wrap { border: 0; background: transparent; overflow: visible; }
  .theses-table, .theses-table tbody, .theses-table tr, .theses-table td { display: block; width: 100%; }
  .theses-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .theses-table tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: .35rem .25rem; margin-block-end: .85rem;
  }
  .theses-table td {
    border: 0; border-block-end: 1px solid var(--line); padding: .5rem .9rem;
    display: flex; justify-content: space-between; gap: 1rem; text-align: end;
  }
  .theses-table td:last-child { border-block-end: 0; }
  .theses-table td::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    text-align: start; flex: 0 0 40%;
  }
  .theses-table td[data-label=""]::before { content: none; }
}