/* ---------- Theming (edit as needed) ---------- */
    .sshhs-ceo {
      --sshhs-primary: #0b6aa2;    /* change to your brand primary */
      --sshhs-accent:  #0fb7a9;    /* accent/secondary */
      --sshhs-bg:      #f7fafc;    /* section background */
      --sshhs-card:    #ffffff;    /* card background */
      --sshhs-text:    #243b53;    /* primary text */
      --sshhs-muted:   #50658e;    /* secondary text */
      --sshhs-border:  #e2e8f0;    /* borders */
      --sshhs-radius:  16px;
      --sshhs-shadow:  0 8px 24px rgba(15, 23, 42, 0.08);
      --sshhs-maxw:    1100px;
    }

    /* ---------- Layout ---------- */
    .sshhs-ceo {
      background: var(--sshhs-bg);
      padding: clamp(32px, 5vw, 72px) 20px;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color: var(--sshhs-text);
    }
    .sshhs-ceo__wrap {
      max-width: var(--sshhs-maxw);
      margin-inline: auto;
    }
    .sshhs-ceo__header {
      text-align: center;
      margin-bottom: clamp(20px, 3vw, 36px);
    }
    .sshhs-ceo__eyebrow {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--sshhs-primary), var(--sshhs-accent));
      color: #fff;
      font-size: 12px;
      letter-spacing: .5px;
    }
    .sshhs-ceo__title {
      margin: 12px 0 0;
      font-size: clamp(22px, 2.6vw, 34px);
      line-height: 1.2;
      font-weight: 800;
    }
    .sshhs-ceo__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    @media (min-width: 900px) {
      .sshhs-ceo__grid {
        grid-template-columns: 340px 1fr;
        align-items: stretch;
      }
    }

    /* ---------- Card: Profile ---------- */
    .sshhs-card {
      background: var(--sshhs-card);
      border: 1px solid var(--sshhs-border);
      border-radius: var(--sshhs-radius);
      box-shadow: var(--sshhs-shadow);
      overflow: clip;
    }
    .sshhs-card__media {
      aspect-ratio: 4/3;
      background: linear-gradient(145deg, #d9e8f6, #eaf5ff);
      display: grid;
      place-items: center;
    }
    .sshhs-card__avatar {
      width: 56%;
      max-width: 220px;
      border-radius: 50%;
      border: 6px solid #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,.08);
      object-fit: cover;
    }
    .sshhs-card__body {
      padding: 18px 18px 22px;
    }
    .sshhs-name {
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 800;
      margin: 0 0 4px;
    }
    .sshhs-role {
      color: var(--sshhs-muted);
      margin: 0 0 12px;
      font-weight: 600;
    }
    .sshhs-meta {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      font-size: 14px;
      color: var(--sshhs-muted);
    }

    /* ---------- Card: Bio & Contacts ---------- */
    .sshhs-bio {
      padding: 22px clamp(18px, 3vw, 28px) 26px;
    }
    .sshhs-bio p {
      margin: 0 0 12px;
      line-height: 1.7;
    }
    .sshhs-divider {
      height: 1px; background: var(--sshhs-border);
      margin: 18px 0;
    }

    /* ---------- Contact List ---------- */
    .sshhs-contacts {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }
    .sshhs-contact {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--sshhs-border);
      border-radius: 12px;
      text-decoration: none;
      color: var(--sshhs-text);
      transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .sshhs-contact:hover {
      transform: translateY(-1px);
      border-color: var(--sshhs-primary);
      box-shadow: 0 8px 20px rgba(2, 80, 132, 0.08);
    }
    .sshhs-icon {
      width: 22px; height: 22px; flex: 0 0 22px;
    }
    .sshhs-contact__label {
      font-weight: 700;
    }
    .sshhs-contact__value {
      direction: ltr; unicode-bidi: plaintext; /* keep numbers/emails readable in RTL */
      color: var(--sshhs-muted);
      font-size: 14px;
    }

    /* ---------- Language helpers ---------- */
    /* Show EN content when section has lang="en" (set on <section>) */
    [lang="en"] .only-ar { display: none !important; }
    [lang="ar"] .only-en { display: none !important; }

    /* ---------- Fine details ---------- */
    .sshhs-badges {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 10px;
    }
    .sshhs-badge {
      font-size: 12px; padding: 6px 10px; border-radius: 999px;
      background: #f1f5f9; border: 1px solid var(--sshhs-border);
    }
    
   
   /* ---- Theme variables ---- */
    .sshhs-gov{
      --primary:#0b6aa2;
      --accent:#0fb7a9;
      --bg:#f7fafc;
      --card:#ffffff;
      --text:#243b53;
      --muted:#50658e;
      --border:#e2e8f0;
      --radius:16px;
      --shadow:0 8px 24px rgba(15,23,42,.08);
      background:var(--bg);
      color:var(--text);
      padding:clamp(32px,5vw,72px) 20px;
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    }
    .sshhs-gov__wrap{max-width:1100px;margin:auto;}
    .sshhs-gov h2{text-align:center;font-weight:800;font-size:clamp(22px,2.6vw,34px);}
    .sshhs-gov__eyebrow{
      display:inline-block;padding:6px 12px;border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      color:#fff;font-size:12px;letter-spacing:.5px;
      margin-bottom:8px;
    }

    /* ---- Tab system (pure CSS using radio buttons) ---- */
    .gov-tabs{margin-top:2rem;}
    .gov-tab{
      display:none;
    }
    .gov-labels{
      display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;
    }
    .gov-label{
      cursor:pointer;
      background:#fff;
      color:var(--muted);
      padding:0.7rem 1.2rem;
      border-radius:999px;
      font-weight:700;
      border:2px solid transparent;
      transition:.25s;
      user-select:none;
    }
    .gov-label:hover{border-color:var(--primary);}
    .gov-tab:checked + .gov-label{
      background:linear-gradient(90deg,var(--primary),var(--accent));
      color:#fff;
    }

    .gov-content{
      margin-top:1.5rem;
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1.8rem;
    }
    .gov-panel{display:none;}
    #tab1:checked ~ .gov-panels #panel1,
    #tab2:checked ~ .gov-panels #panel2,
    #tab3:checked ~ .gov-panels #panel3,
    #tab4:checked ~ .gov-panels #panel4{display:block;}

    /* ---- Cards ---- */
    .gov-card{
      border:1px solid var(--border);
      border-radius:14px;
      background:#fff;
      padding:1rem 1.25rem;
      margin-bottom:1rem;
    }
    .gov-card h4{margin:0 0 4px;font-weight:800;font-size:18px;}
    .gov-card small{color:var(--muted);}
    .gov-card p{margin:0.25rem 0 0;line-height:1.6;}

    .gov-grid{display:grid;gap:1rem;}
    @media(min-width:768px){.gov-grid{grid-template-columns:repeat(2,1fr);}}

    [lang="en"] .only-ar{display:none!important;}
    [lang="ar"] .only-en{display:none!important;}


    .sshhs-directory{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 640px){
  .sshhs-directory{ gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 1024px){
  .sshhs-directory{ gap:20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* 2) Equal-height cards with consistent inner spacing */
.sshhs-person{
  display:flex;
  flex-direction:column;
  background: var(--sshhs-card, #fff);
  border:1px solid var(--sshhs-border, #e2e8f0);
  border-radius: var(--sshhs-radius, 16px);
  box-shadow: var(--sshhs-shadow, 0 8px 24px rgba(15,23,42,.08));
}
.sshhs-person__body{ padding:18px 18px 20px; display:flex; flex:1; flex-direction:column; }

/* 3) Typography + trimming vertical rhythm */
.sshhs-person__name{
  margin:0 0 4px;
  font-weight:800;
  font-size: clamp(18px, 2vw, 22px);
}
.sshhs-person__role{
  margin:0 0 10px;
  color: var(--sshhs-muted, #50658e);
  font-weight:600;
  line-height:1.4;
}

/* 4) Contact list: wrap nicely, align cleanly */
.sshhs-person__contacts{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.sshhs-contact{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--sshhs-border, #e2e8f0);
  border-radius:12px;
  text-decoration:none; color:var(--sshhs-text, #243b53);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.sshhs-contact:hover,
.sshhs-contact:focus{
  transform: translateY(-1px);
  border-color: var(--sshhs-primary, #0b6aa2);
  box-shadow: 0 8px 20px rgba(2,80,132,.08);
  outline: none;
}
.sshhs-contact:focus-visible{
  box-shadow: 0 0 0 3px rgba(15,183,169,.25);
}

/* 5) Icon sizing/baseline alignment */
.sshhs-icon{ width:20px; height:20px; flex:0 0 20px; display:block; }

/* 6) Labels/values with robust wrapping (esp. emails in RTL) */
.sshhs-contact__label{ font-weight:700; line-height:1.2; }
.sshhs-contact__value{
  display:block;
  direction:ltr; unicode-bidi: plaintext;         /* keep numbers/emails readable in RTL */
  color: var(--sshhs-muted, #50658e);
  font-size: 14px;
  overflow-wrap:anywhere; word-break:break-word;  /* prevent overflow */
}