/* ============================================================
   JCI TARTUS 2026 — SHARED DESIGN SYSTEM
   Lead · Connect · Evolve
   ============================================================ */


:root {
  --navy:        #080B1F;
  --navy-1:      #0D1030;
  --navy-2:      #111438;
  --navy-3:      #161842;
  --blue-deep:   #0E2C6E;
  --blue:        #1255CC;
  --blue-mid:    #1A7FC4;
  --cyan:        #00C2FF;
  --cyan-dim:    #29ABE2;
  --teal:        #00D4B8;
  --white:       #FFFFFF;
  --off-white:   #EBF0FA;
  --gray-light:  #B8C6E0;
  --gray:        #7A8FB3;
  --gray-dark:   #3A4566;

  --g-page:    linear-gradient(160deg, #080B1F 0%, #0D1030 50%, #111438 100%);
  --g-cyan:    linear-gradient(135deg, #00C2FF 0%, #1A7FC4 100%);
  --g-blue:    linear-gradient(135deg, #1255CC 0%, #0E2C6E 100%);
  --g-accent:  linear-gradient(90deg, #00C2FF, #00D4B8);
  --g-card:    linear-gradient(135deg, rgba(18,85,204,0.10) 0%, rgba(0,194,255,0.05) 100%);
  --g-hero:    linear-gradient(160deg, #080B1F 0%, #0E2C6E 60%, #1255CC 100%);

  --glow-cyan: 0 0 30px rgba(0,194,255,0.20);
  --shadow-sm: 0 2px 14px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 36px rgba(0,0,0,0.38);
  --shadow-lg: 0 20px 64px rgba(0,0,0,0.52);

  --font-head: 'Lexend', sans-serif;
  --font-body: 'Lexend Deca', sans-serif;

  --nav-h:   72px;
  --max-w:   1160px;
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-xl:    36px;

  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.18s;
  --t-mid:   0.30s;
  --t-slow:  0.45s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { font-family:var(--font-body); cursor:pointer; }

/* ============================================================
   ISLAND NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 48px);
  max-width: 1060px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 6px;
  padding-inline: 8px 10px;
  min-height: 54px;
  overflow: visible;
  background: rgba(8,11,31,0.80);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0,194,255,0.16);
  border-radius: 999px;
  box-shadow:
    0 4px 32px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    var(--glow-cyan);
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.navbar.scrolled {
  background: rgba(8,11,31,0.96);
  border-color: rgba(0,194,255,0.22);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: opacity var(--t-fast);
}
.nav-logo:hover { opacity: 0.80; }
.nav-logo img {
  height: 64px;
  width: auto;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  justify-content: center;
}
.nav-links > li > a,
.nav-links > li > .dropbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-family: var(--font-head);
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--gray-light);
  border-radius: 50px;
  background: transparent;
  border: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li > .dropbtn:hover,
.nav-links > li > a.active {
  color: var(--cyan);
  background: rgba(0,194,255,0.09);
}

.caret { font-size: 0.58rem; opacity: 0.65; transition: transform var(--t-fast) var(--ease); }

/* Desktop: hover + open both rotate the caret */
.nav-dropdown:hover .caret,
.nav-dropdown.open .caret { transform: rotate(180deg); }

/* Mobile: disable hover-based rotation — only .open class controls the caret */
@media (max-width: 1020px) {
  .nav-dropdown:hover .caret { transform: rotate(0deg); }
  .nav-dropdown.open .caret  { transform: rotate(180deg); }
}

.nav-dropdown { position: relative; }

/* Invisible bridge that fills the gap between the button and the dropdown
   so the mouse doesn't lose hover while crossing the gap */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 12px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 232px;
  background: rgba(9,12,36,0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,194,255,0.14);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md), var(--glow-cyan);
  overflow: hidden;
  z-index: 200;
  animation: dropOpen 0.17s var(--ease) both;
}
@keyframes dropOpen {
  from { opacity:0; transform: translateX(-50%) translateY(-6px) scale(0.97); }
  to   { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open  .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 11px 20px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-light);
  border-bottom: 1px solid rgba(0,194,255,0.06);
  transition: color var(--t-fast), background var(--t-fast), padding-inline-start var(--t-fast);
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { color: var(--cyan); background: rgba(0,194,255,0.08); padding-inline-start: 26px; }

/* Right CTA */
.nav-right { display: flex; align-items: center; flex-shrink: 0; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--g-cyan);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 0.80rem;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 14px rgba(0,194,255,0.30);
  transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 22px rgba(0,194,255,0.46); }

/* ── Desktop: nudge the logo away from the edge, Join Us away from the other ── */
@media (min-width: 1021px) {
  .nav-logo  { margin-inline-start: 10px; }
  .nav-right { margin-inline-end: 10px; }
}

/* ── Mobile: lang toggle + hamburger grouped on the side opposite the logo ── */
@media (max-width: 1020px) {
  .navbar     { justify-content: flex-start; }
  .nav-right  { order: 2; margin-inline-start: auto; }
  .nav-toggle { order: 3; margin-inline-start: 4px; }
}

/* The mobile navbar mirrors with the language: in Arabic the logo sits on the
   right and the language button + hamburger on the left. */

/* Hamburger — always on top, above menu overlay */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 34px; height: 34px;
  gap: 5px;
  background: rgba(0,194,255,0.08);
  border: 1px solid rgba(0,194,255,0.16);
  border-radius: 50px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
  position: relative;
  z-index: 2001;
}
.nav-toggle:hover { background: rgba(0,194,255,0.15); }
.nav-toggle span {
  display: block; width: 16px; height: 1.5px;
  background: var(--cyan); border-radius: 2px;
  transition: var(--t-mid) var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   MOBILE NAV — SLIDE-IN PANEL
   (from the left in English, from the right in Arabic)
   ============================================================ */
@media (max-width: 1020px) {
  .nav-toggle { display: flex; }
  .nav-right  { display: flex; }
  .nav-cta    { display: none; }

  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8,11,31,0.92);
  }

  /* Disable CSS :hover on the dropdown on touch devices */
  .nav-dropdown:hover .dropdown-menu { display: none; }
  .nav-dropdown.open  .dropdown-menu { display: block; }

  .nav-links {
    position: fixed;
    top: -20px;
    left: 50%;
    width: 100vw;
    height: calc(100vh + 20px);
    height: calc(100dvh + 20px);
    z-index: 2000;
    background: #080B1F;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 116px 0 40px;
    margin: 0;
    transform: translateX(calc(-50% - 100vw));
    transition: transform var(--t-slow) var(--ease);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
  }

  .nav-links::after { display: none; }
  .nav-links.open { transform: translateX(-50%); }

  /* Arabic: the closed panel waits off-screen on the right instead */
  html[dir="rtl"] .nav-links      { transform: translateX(calc(-50% + 100vw)); }
  html[dir="rtl"] .nav-links.open { transform: translateX(-50%); }

  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid rgba(0,194,255,0.07);
  }
  .nav-links > li:last-child { border-bottom: none; }

  .nav-links > li > a,
  .nav-links > li > .dropbtn {
    width: 100%;
    justify-content: center;
    padding: 18px 28px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 0;
    border-bottom: none;
    letter-spacing: 0.03em;
    color: var(--gray-light);
    background: transparent;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .nav-links > li > a:hover,
  .nav-links > li > .dropbtn:hover,
  .nav-links > li > a.active {
    background: rgba(0,194,255,0.07);
    color: var(--cyan);
    border-radius: 0;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    width: 100%;
    border-radius: 0;
    animation: none;
    background: rgba(0,194,255,0.035);
    border: none;
    border-top: 1px solid rgba(0,194,255,0.07);
    box-shadow: none;
    backdrop-filter: none;
  }
  .dropdown-menu a {
    text-align: center;
    padding: 14px 28px;
    font-size: 0.92rem;
    color: var(--gray);
    border-bottom: 1px solid rgba(0,194,255,0.05);
  }
  .dropdown-menu a:last-child { border-bottom: none; }
  .dropdown-menu a:hover { padding-inline-start: 28px; color: var(--cyan); background: rgba(0,194,255,0.07); }
}

@media (max-width: 600px) {
  .navbar { top: 12px; width: calc(100% - 24px); padding: 5px 8px 5px 8px; }
  .nav-links { padding-top: 88px; }
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-1);
  border-top: 1px solid rgba(0,194,255,0.09);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--g-accent);
}
.footer-body {
  max-width: var(--max-w); margin: 0 auto; padding: 60px 40px 44px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand img { height: 64px; margin-bottom: 16px; object-fit: contain; }
.footer-brand p { font-size: 0.875rem; color: var(--gray); line-height: 1.78; max-width: 268px; margin-bottom: 22px; }

.footer-cast-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--g-cyan);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.83rem;
  border-radius: 50px;
  width: fit-content;
  line-height: 1;
  box-shadow: 0 4px 20px rgba(0,194,255,0.28);
  letter-spacing: 0.02em;
  transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.footer-cast-pill img {
  width: 22px; height: 22px;
  border-radius: 50%; object-fit: contain;
  filter: brightness(0); flex-shrink: 0;
  margin-bottom: 0;
}
.footer-cast-pill:hover { opacity: 0.88; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,194,255,0.42); }

.footer-col h4 {
  font-family: var(--font-head); font-size: 0.70rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a {
  font-size: 0.875rem; color: var(--gray); display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.footer-col ul li a:hover { color: var(--cyan); padding-inline-start: 4px; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,194,255,0.07); border: 1px solid rgba(0,194,255,0.14);
  color: var(--gray); font-size: 0.88rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.footer-socials a:hover {
  background: var(--cyan); color: var(--navy); border-color: var(--cyan);
  transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,194,255,0.35);
}
.footer-bottom {
  max-width: var(--max-w); margin: 0 auto; padding: 18px 40px;
  border-top: 1px solid rgba(0,194,255,0.07);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer-bottom p { font-size: 0.79rem; color: var(--gray-dark); }
.footer-bottom .f-tag {
  font-family: var(--font-head); font-size: 0.77rem; font-weight: 600;
  letter-spacing: 0.08em; color: rgba(0,194,255,0.30);
}
@media (max-width: 900px) {
  .footer-body { grid-template-columns: 1fr 1fr; gap:32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-body { grid-template-columns:1fr; padding:44px 22px 32px; gap:26px; }
  .footer-bottom { padding:14px 22px; flex-direction:column; text-align:center; }
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 40px; }
@media (max-width:640px) { .wrap { padding:0 20px; } }
.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.tag-label {
  display: inline-block; font-family: var(--font-head); font-size: 0.69rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
  padding: 5px 13px; background: rgba(0,194,255,0.09); border: 1px solid rgba(0,194,255,0.20);
  border-radius: 50px; margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-head); font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 800; color: var(--white); line-height: 1.14; letter-spacing: -0.02em;
}
.section-title span {
  background: var(--g-accent);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-sub { font-size: 0.975rem; color: var(--gray-light); line-height: 1.77; max-width: 540px; }
/* Centred section header: tag label + title + sub */
.section-head { text-align: center; max-width: 560px; margin: 0 auto; }
.accent-bar { width: 44px; height: 3px; background: var(--g-accent); border-radius: 3px; margin: 13px 0 0; }

.card {
  background: var(--g-card); border: 1px solid rgba(0,194,255,0.10); border-radius: var(--r-lg);
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
.card:hover {
  border-color: rgba(0,194,255,0.28); transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,194,255,0.08);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head);
  font-weight: 700; border-radius: 50px; border: none; cursor: pointer; text-decoration: none;
  transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); white-space: nowrap;
}
.btn:hover { opacity: 0.88; transform: translateY(-2px); }
.btn-primary { padding: 13px 30px; background: var(--g-cyan); color: var(--navy); font-size: 0.9rem; box-shadow: 0 4px 22px rgba(0,194,255,0.32); }
.btn-primary:hover { box-shadow: 0 8px 32px rgba(0,194,255,0.48); }
.btn-ghost { padding: 12px 28px; background: transparent; color: var(--white); font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.22); }
.btn-ghost:hover { background:rgba(255,255,255,0.06); border-color:var(--cyan); color:var(--cyan); }
.btn-outline { padding: 9px 22px; background: transparent; color: var(--cyan); font-size: 0.84rem; border: 1px solid rgba(0,194,255,0.28); }
.btn-outline:hover { background:var(--cyan); color:var(--navy); border-color:var(--cyan); }

.state-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; text-align: center; gap: 12px; grid-column: 1 / -1;
}
.spinner { width: 42px; height: 42px; border: 3px solid rgba(0,194,255,0.14); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-center .sl { font-size: 0.94rem; color: var(--gray); }
.state-center .si { font-size: 2.2rem; color: rgba(0,194,255,0.22); }
.state-center .st { font-family:var(--font-head); font-size:1.08rem; font-weight:700; color:var(--gray-light); }
.state-center .sm { font-size: 0.9rem; color: var(--gray); }

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 48px 0 8px; flex-wrap: wrap;
}
.pg-btn, .pg-num {
  display: inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px;
  border-radius: 50px; font-family: var(--font-head); font-size: 0.84rem; font-weight: 600;
  border: 1px solid rgba(0,194,255,0.13); background: rgba(0,194,255,0.05); color: var(--gray-light); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.pg-btn:hover, .pg-num:hover { background: rgba(0,194,255,0.12); color: var(--cyan); border-color: rgba(0,194,255,0.30); }
.pg-num.active { background: var(--cyan); color: var(--navy); border-color: var(--cyan); font-weight: 800; box-shadow: 0 4px 16px rgba(0,194,255,0.38); }
.pg-btn:disabled { opacity: 0.28; pointer-events:none; }
.pg-dots { color:var(--gray-dark); font-size:0.9rem; padding:0 4px; pointer-events:none; }

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(8,11,31,0.88); backdrop-filter: blur(10px); overflow-y: auto; padding: 40px 20px;
}
.modal-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
.modal-box {
  position: relative; width: 100%; max-width: 880px; background: var(--navy-2);
  border: 1px solid rgba(0,194,255,0.15); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: modalIn 0.28s var(--ease) both; margin: auto;
}
@keyframes modalIn { from { opacity:0; transform:translateY(28px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.modal-close-btn {
  position: absolute; top:14px; inset-inline-end:14px; width:40px; height:40px; border-radius: 50%;
  background: rgba(255,255,255,0.13); border: 1.5px solid rgba(255,255,255,0.42);
  color: var(--white); font-size:1.25rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close-btn:hover { background:rgba(220,50,50,0.35); border-color:rgba(220,50,50,0.60); color:#ff6b6b; }
.modal-media { width:100%; height:360px; background: rgba(0,0,0,0.25); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.modal-media img { max-width:100%; max-height:100%; object-fit:contain; }
.m-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.28s var(--ease); }
.m-slide.active { opacity:1; }
.m-slide img { max-width:100%; max-height:100%; object-fit:contain; }
.modal-car-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:12px; background:rgba(0,0,0,0.18); border-top:1px solid rgba(0,194,255,0.07); }
.m-arrow { width:34px; height:34px; border-radius:50%; background:rgba(0,194,255,0.09); border:1px solid rgba(0,194,255,0.18); color:var(--cyan); font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background var(--t-fast), color var(--t-fast); }
.m-arrow:hover { background:var(--cyan); color:var(--navy); }
.m-counter { font-family:var(--font-head); font-size:0.82rem; font-weight:600; color:var(--gray-light); background:rgba(0,0,0,0.28); padding:4px 14px; border-radius:50px; min-width:54px; text-align:center; }
.modal-body { padding:28px 32px 36px; }
.modal-badge { display:inline-block; padding:4px 12px; border-radius:50px; font-family:var(--font-head); font-size:0.73rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:12px; }
.modal-body h2 { font-family:var(--font-head); font-size:1.52rem; font-weight:800; color:var(--white); line-height:1.24; margin-bottom:10px; }
.modal-date-line { display:flex; align-items:center; gap:7px; font-size:0.86rem; color:var(--cyan); font-weight:600; margin-bottom:18px; font-family:var(--font-head); }
.modal-desc { font-size:0.93rem; color:var(--gray-light); line-height:1.86; }
.badge-meeting { background:rgba(41,171,226,0.13); color:#29ABE2; }
.badge-conference { background:rgba(150,80,220,0.13); color:#b87de8; }
.badge-initiative { background:rgba(0,212,184,0.13); color:#00D4B8; }
.badge-gala { background:rgba(0,194,255,0.13); color:var(--cyan); }
.badge-competition { background:rgba(18,85,204,0.18); color:#5B9EFF; }
.badge-individual { background:rgba(242,201,76,0.13); color:#F2C94C; }
.badge-business { background:rgba(0,212,184,0.13); color:#00D4B8; }
.badge-community { background:rgba(41,171,226,0.13); color:#29ABE2; }
.badge-intl { background:rgba(0,194,255,0.13); color:var(--cyan); }
@media (max-width:640px) { .modal-media { height:230px; } .modal-body { padding:20px 18px 26px; } .modal-body h2 { font-size:1.22rem; } }

.filter-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 20px; background:rgba(18,85,204,0.07); border:1px solid rgba(0,194,255,0.10); border-radius:var(--r-md); margin-bottom:32px; }
.filter-bar input, .filter-bar select { flex:1; min-width:130px; padding:9px 14px; background:rgba(8,11,31,0.80); border:1px solid rgba(0,194,255,0.15); border-radius:50px; color:var(--white); font-family:var(--font-body); font-size:0.87rem; outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.filter-bar input::placeholder { color:var(--gray); }
.filter-bar input:focus, .filter-bar select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,194,255,0.11); }
.filter-bar select option { background:var(--navy-1); }
.pill-group { display:flex; gap:6px; flex-wrap:wrap; }
.pill { padding:8px 16px; border-radius:50px; font-family:var(--font-head); font-size:0.79rem; font-weight:600; border:1px solid rgba(0,194,255,0.13); background:transparent; color:var(--gray-light); cursor:pointer; white-space:nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pill:hover { background:rgba(0,194,255,0.09); color:var(--cyan); }
.pill.active { background:var(--cyan); color:var(--navy); border-color:var(--cyan); font-weight:700; }

.page-hero { padding: calc(var(--nav-h) + 90px) 40px 80px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:var(--g-hero); z-index:0; }
.deco-star { position:absolute; pointer-events:none; background:var(--cyan); clip-path:polygon(50% 0%,60% 38%,98% 38%,70% 58%,80% 95%,50% 73%,20% 95%,30% 58%,2% 38%,40% 38%); opacity:0.06; animation:rotateStar linear infinite; }
@keyframes rotateStar { to { transform:rotate(360deg); } }
.page-hero-content { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.page-hero-content h1 { font-family:var(--font-head); font-size:clamp(2.1rem,5vw,3.5rem); font-weight:900; line-height:1.1; letter-spacing:-0.03em; margin-bottom:18px; background:linear-gradient(135deg,#fff 40%,var(--cyan) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-hero-content p { font-size:clamp(0.94rem,1.5vw,1.08rem); color:var(--gray-light); line-height:1.76; }
@media (max-width:640px) { .page-hero { padding:calc(var(--nav-h) + 58px) 20px 58px; } }

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--cyan);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden { display:none !important; }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.44s var(--ease) both; }

/* ============================================================
   BILINGUAL — Language hide/show, Arabic font, RTL overrides
   ============================================================ */

/* Hide inactive language */
html[lang="en"] .lang-ar { display: none !important; }
html[lang="ar"] .lang-en { display: none !important; }

/* Arabic typeface — Cairo carries the whole page, headings included.
   Lexend has no Arabic glyphs, so a title left on var(--font-head) fell back
   to whatever Arabic font the device happened to have and the headings no
   longer matched the text under them.  Overriding the two font variables
   points every rule that uses them at Cairo, exactly the way English uses
   Lexend throughout. */
html[lang="ar"] {
  --font-head: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

/* Language toggle button */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  background: rgba(0,194,255,0.10);
  border: 1px solid rgba(0,194,255,0.25);
  border-radius: 50px;
  color: var(--cyan);
  font-family: var(--font-head);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-inline-end: 8px;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lang-toggle:hover {
  background: rgba(0,194,255,0.20);
  border-color: rgba(0,194,255,0.50);
  transform: translateY(-1px);
}
.nav-right { gap: 0; }

/* ═══════════════════════════════════════════════════════════
   ARABIC = MIRRORED LAYOUT
   Switching to Arabic flips the whole page: the navbar, hero,
   sections, cards, filters and footer all read right-to-left.
   English reads left-to-right as before.

   How it works:
   · The document carries  dir="rtl"  in Arabic and  dir="ltr"
     in English (set by the inline script in <head> and kept in
     sync by js/i18n.js), so every box mirrors on its own.
   · Nothing pins text-align: blocks use the initial  start
     value, which resolves to left in English and right in
     Arabic.  Blocks that explicitly centre stay centred.
   · Sides are expressed with logical properties
     (margin-inline-start, inset-inline-end, …) so they follow
     the direction instead of being nailed to left or right.
   ═══════════════════════════════════════════════════════════ */

/* 1 — Correct Arabic rendering of individual runs */
html[lang="ar"] .lang-ar,
html[lang="ar"] [lang="ar"] {
  direction: rtl;
  unicode-bidi: isolate;
}

/* 2 — Content coming from the database (event titles, partner names,
       descriptions, board roles…) is not wrapped in .lang-ar, so each
       block is laid out by its own first strong character: Arabic reads
       right-to-left, an English name stays left-to-right. */
html[lang="ar"] .ev-body,      html[lang="ar"] .g-body,
html[lang="ar"] .partner-body, html[lang="ar"] .m-info,
html[lang="ar"] .modal-body,   html[lang="ar"] .modal-desc,
html[lang="ar"] .faq-answer-body,
html[lang="ar"] .no-events-box, html[lang="ar"] .no-results-box,
html[lang="ar"] .faq-no-results, html[lang="ar"] .state-center {
  unicode-bidi: plaintext;
}

/* 3 — A title and the text that follows it are composed the same way in both
       languages.  Arabic used to push those paragraphs to the right edge over
       the full width of the section while the title stayed centred, so the
       very same block looked like a different design depending on the
       language.  Now only the direction of the words changes: the tag label,
       the title and the paragraph under it share one centred column, in
       Arabic exactly as in English. */
.section-head,
.page-hero-content,
.prog-hero-inner,
.contact-inner {
  text-align: center;
}
/* (.page-header, .board-page-hdr, .cast-header, .faq-header and
   .page-hero-content are centred by the PAGE TITLES block further down.) */

.section-head > .section-sub,
.section-head > p,
.page-hero-content > p,
.prog-hero-inner > p,
.contact-inner > p,
.page-header > p,
.board-page-hdr > p,
.cast-header > p,
.faq-header > p,
.faq-cta p,
.nf-wrap p {
  text-align: center;
  margin-inline: auto;
}

/* The heading and its paragraph keep their own centred column in both
   directions — nothing stretches to the edges when the page turns RTL. */
.section-head > h2       { max-width: 560px; margin-inline: auto; }
.page-hero-content > h1  { max-width: 680px; margin-inline: auto; }
.prog-hero-inner > h1    { max-width: 700px; margin-inline: auto; }
.contact-inner > h2      { max-width: 680px; margin-inline: auto; }

/* 4 — Arabic letterforms join, so the tracking the Latin headings use to look
       tight (negative on titles, wide on the little uppercase tag labels)
       pulls Cairo apart or squashes it.  Arabic sets its tracking to zero and
       takes a little more leading, which is what makes the two languages read
       at the same weight and rhythm rather than one looking cramped. */
/* Tracking is a Latin device — it never applies to a joined script, so it is
   switched off for the whole Arabic page rather than rule by rule (several
   headings and badges carry their own tracking deep in the page stylesheets). */
html[lang="ar"],
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after {
  letter-spacing: 0 !important;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .section-title,
html[lang="ar"] .hero-content h1 {
  line-height: 1.35;   /* Cairo hangs dots below the baseline — 1.1 clips them */
}

/* ═══════════════════════════════════════════════════════════
   SMALL SCREENS — ONE WRITING STYLE IN BOTH LANGUAGES
   A phone shows a single column, so a section is written the
   same way whichever language is on: centred tag label, centred
   title, centred paragraph beneath it, on the same measure.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .section-head,
  .page-hero-content,
  .prog-hero-inner,
  .contact-inner,
  .page-header,
  .board-page-hdr,
  .cast-header,
  .faq-header,
  .hero-content {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .hero-actions,
  .contact-links,
  .nf-links { justify-content: center; }

  /* Titles break into balanced lines instead of dropping one lonely word */
  .section-head > h2,
  .page-hero-content > h1,
  .prog-hero-inner > h1,
  .contact-inner > h2,
  .page-header h1,
  .board-page-hdr h1,
  .cast-header h1,
  .faq-header h1,
  .hero-content h1 {
    max-width: 100%;
    margin-inline: auto;
    text-wrap: balance;
  }

  /* The paragraph under a title: one measure, one rhythm, both languages */
  html .section-head > .section-sub,
  html .page-hero-content > p,
  html .prog-hero-inner > p,
  html .contact-inner > p,
  html .page-header > p,
  html .board-page-hdr > p,
  html .cast-header > p,
  html .faq-header > p,
  html .faq-cta p,
  html .hero-sub {
    max-width: 42ch;
    margin-inline: auto;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.8;
  }
  html[lang="ar"] .section-head > .section-sub,
  html[lang="ar"] .page-hero-content > p,
  html[lang="ar"] .prog-hero-inner > p,
  html[lang="ar"] .contact-inner > p,
  html[lang="ar"] .page-header > p,
  html[lang="ar"] .board-page-hdr > p,
  html[lang="ar"] .cast-header > p,
  html[lang="ar"] .faq-header > p,
  html[lang="ar"] .faq-cta p,
  html[lang="ar"] .hero-sub {
    font-size: 0.97rem;   /* Cairo runs a shade smaller than Lexend at equal size */
    line-height: 1.95;
  }
}

/* ============================================================
   REDUCED MOTION — respect OS-level accessibility preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}


/* The elements that used to need explicit [dir="rtl"] overrides — skip link,
   navbar side margins, modal close button, dropdown and footer hover indents —
   are written with logical properties instead, so they mirror on their own when
   the document turns to dir="rtl". */


/* ═══════════════════════════════════════════════════════════
   PAGE TITLES — always centred, every page, every width,
   both languages.  (Board · Partnerships · Gallery · Events ·
   FAQ · Cast · program pages)
   ═══════════════════════════════════════════════════════════ */
.page-header,
.board-page-hdr,
.cast-header,
.faq-header,
.page-hero-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.page-header h1,
.board-page-hdr h1,
.cast-header h1,
.faq-header h1,
.page-hero-content h1,
.page-header > p,
.board-page-hdr > p,
.cast-header > p,
.faq-header > p,
.page-hero-content > p,
.page-header .tag-label,
.board-page-hdr .tag-label,
.cast-header .tag-label,
.faq-header .tag-label,
.page-hero-content .tag-label {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  overflow-wrap: break-word;   /* a very long word can never push the title off-centre */
}

/* The two language spans inside a heading must not become block-level
   islands that could align differently — they stay inline and centred. */
.page-header h1 .lang-en,  .page-header h1 .lang-ar,
.board-page-hdr h1 .lang-en, .board-page-hdr h1 .lang-ar,
.cast-header h1 .lang-en,  .cast-header h1 .lang-ar,
.faq-header h1 .lang-en,   .faq-header h1 .lang-ar,
.page-hero-content h1 .lang-en, .page-hero-content h1 .lang-ar {
  display: inline;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   ARABIC ⇄ ENGLISH — STABILITY WHEN SWITCHING
   The page mirrors when the language changes, but it must not
   jump, scroll sideways or mangle mixed-script text.
   ═══════════════════════════════════════════════════════════ */

/* 1 — Reserve the scrollbar space at all times so switching language
       (or a short page) never shifts the layout horizontally. */
html { scrollbar-gutter: stable; }

/* 2 — Mixed Arabic/Latin content (partner names, event titles, member names,
       descriptions coming from the database) is laid out by its own first
       strong character, so brackets, numbers and Latin names stay attached
       to the right words instead of jumping to the other end of the line. */
.ev-title, .g-title, .partner-name, .m-name, .m-role,
.modal-body h2, .modal-desc, .modal-date-line,
.ev-date, .g-date, .partner-since,
.cast-name, .cast-role, .cast-back-hint,
.faq-question span, .faq-answer-body {
  unicode-bidi: plaintext;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — small phones → large desktops
   ═══════════════════════════════════════════════════════════ */

/* Nothing may push the page sideways, in any language */
html, body { max-width: 100%; }
h1, h2, h3, h4, h5, p, li, dd, dt, blockquote { overflow-wrap: break-word; }

/* Media never overflows its column */
img, svg, video { max-width: 100%; }

/* ── Filter bars: stack on narrow screens so the search field is usable ── */
@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px;
  }
  .filter-bar input,
  .filter-bar select { width: 100%; min-width: 0; flex: none; }
  .pill-group { justify-content: center; }
  .filter-meta { text-align: center; }
}

/* ── Very small phones (≤ 380px) ── */
@media (max-width: 380px) {
  .wrap        { padding: 0 16px; }
  .page-header h1,
  .board-page-hdr h1 { font-size: 1.75rem; }
  .pill        { padding: 8px 13px; font-size: 0.75rem; }
  .btn-primary { padding: 12px 22px; font-size: 0.85rem; }
  .btn-ghost   { padding: 11px 20px; font-size: 0.85rem; }
  .pg-btn, .pg-num { min-width: 34px; height: 34px; padding: 0 9px; font-size: 0.8rem; }
  .modal-overlay { padding: 20px 10px; }
  .footer-body   { padding: 40px 16px 28px; }
  .footer-bottom { padding: 14px 16px; }
}

/* ── Comfortable touch targets on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  .footer-col ul li a,
  .footer-bottom a { min-height: 38px; align-items: center; }
  .m-linkedin,
  .btn-current,
  .contact-link  { min-height: 36px; align-items: center; }
  .lang-toggle   { min-height: 36px; min-width: 42px; }
  .footer-socials a { width: 40px; height: 40px; }
  .nav-links > li > a,
  .nav-links > li > .dropbtn { min-height: 48px; }
  .pill, .pg-btn, .pg-num { min-height: 38px; }
}

/* ── Short landscape screens: keep the mobile menu scrollable ── */
@media (max-width: 1020px) and (max-height: 520px) {
  .nav-links { padding-top: 84px; padding-bottom: 24px; }
  .nav-links > li > a,
  .nav-links > li > .dropbtn { padding: 13px 24px; font-size: 0.95rem; }
}