/* WSSD Session Styles (AR/EN) */
/* Fonts: EN = Roboto / Roboto Condensed. AR = Cairo (titles), Rubik (paragraphs). */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Condensed:wght@400;500;800&family=Cairo:wght@400;600;700;800&family=Rubik:wght@400;500;600&display=swap');

.wssd-session {
  /* Palette */
  --wssd-yellow:#FEDA48; --wssd-orange:#F99D21; --wssd-cyan:#0EB2DE;
  --wssd-blue:#009EDB; --wssd-coral:#F26752; --wssd-plum:#78224D; --wssd-black:#000;
  --ink:#111; --ink-soft:#333; --paper:#fff; --muted:#6b7280;

  /* Font sizes (editable) */
  --header-main-size: clamp(22px,3.6vw,34px);
  --header-supra-size: clamp(16px,2vw,20px);
  --header-date-size: clamp(14px,1.8vw,18px);

  /* Language-specific section title sizes */
  --section-title-size-en: clamp(20px, 2.6vw, 28px);
  --section-title-size-ar: clamp(22px, 3vw, 23px);
  /* Default to EN */
  --section-title-size: var(--section-title-size-en);

  --kicker-size: 12px;
  --paragraph-size-en: 13px;
  --paragraph-size-ar: 15px;
  --contact-size: 16px;
  --button-size: 14px;
  --speaker-name-size: 16px;
  --speaker-title-size: 14px;

  direction:ltr;
  text-align:left;
  color:var(--ink);
  background:var(--paper);
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; /* EN body: Roboto Regular */
  line-height:1.6;
  width:100%;
  margin:0 auto;
  padding:0;
  transition: all 0.3s ease;
}

/* Switch section title size by language attribute */
.wssd-session[data-lang="en"] {
  --section-title-size: var(--section-title-size-en);
}
.wssd-session[data-lang="ar"] {
  --section-title-size: var(--section-title-size-ar);
}

/* Arabic RTL */
.wssd-session[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family:"Rubik", Arial, sans-serif !important;
}

/* Arabic justification across body, lists, objectives/outcomes */
.wssd-session[dir="rtl"] p,
.wssd-session[dir="rtl"] li,
.wssd-session[dir="rtl"] .wssd-body,
.wssd-session[dir="rtl"] .wssd-card ul {
  text-align: justify;
  text-justify: inter-word;
}

.wssd-session * {
  box-sizing:border-box;
}
.wssd-container {
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

/* Language Switcher */
.wssd-lang-switcher {
  position:absolute;
  top:20px;
  right:20px;
  z-index:1000;
  display:flex;
  gap:5px;
}
.wssd-session[dir="rtl"] .wssd-lang-switcher {
  right:auto;
  left:20px;
}
.lang-btn {
  padding:8px 16px;
  border:2px solid var(--wssd-plum);
  background:#fff;
  color:var(--wssd-plum);
  border-radius:20px;
  cursor:pointer;
  font-weight:600;
  transition:.3s ease;
  font-size:var(--button-size);
}
.lang-btn:hover,
.lang-btn.active {
  background:var(--wssd-plum);
  color:#fff;
}

/* Color Bar - fixed order (no flip in RTL) */
.wssd-color-bar {
  height:8px;
  width:100vw;
  display:flex;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  margin-bottom:0;
  direction:ltr;
}
.wssd-color-bar .segment {
  flex:1 1 0;
}
.wssd-color-bar .s1 { background-color:var(--wssd-yellow); }
.wssd-color-bar .s2 { background-color:var(--wssd-orange); }
.wssd-color-bar .s3 { background-color:var(--wssd-cyan); }
.wssd-color-bar .s5 { background-color:var(--wssd-plum); }
.wssd-color-bar .s6 { background-color:var(--wssd-black); }

.wssd-headerbar {
  background:#fff;
  border:0;
  padding:18px 8px;
}
.wssd-header-grid {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
}

.wssd-header-logos {
  width:320px;
  height:84px;
}
.wssd-header-logos img {
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:optimize-contrast;
  image-rendering:crisp-edges;
}

.wssd-head-text {
  text-align:left;
}
.wssd-session[dir="rtl"] .wssd-head-text {
  text-align:right;
}

/* EN Typography per spec */
.wssd-supra {
  margin:0;
  font-family:"Roboto Condensed", Arial, sans-serif !important;
  font-weight:400; /* Regular */
  font-size:var(--header-supra-size);
  color:#4b5563;
  line-height:1.15;
  font-kerning:normal;
  letter-spacing:0; /* metrics kerning */
}
.wssd-main {
  margin:2px 0 4px 0;
  font-family:"Roboto Condensed", Arial, sans-serif !important;
  font-weight:800; /* ExtraBold */
  font-size:var(--header-main-size);
  color:#0f172a;
  line-height:1.1;
  font-kerning:normal;
  letter-spacing:0; /* metrics kerning */
}

/* Base (English default) */
.wssd-date {
  font-weight:400;
  color:#374151;
  font-size:var(--header-date-size);
  font-family:"Roboto", Arial, sans-serif !important;
  font-kerning:normal;
  letter-spacing:0;
}
/* Arabic override via dir (RTL) */
.wssd-session[dir="rtl"] .wssd-date {
  font-family:"Cairo", Arial, sans-serif !important;
}
/* Arabic override via data-lang */
.wssd-session[data-lang="ar"] .wssd-date {
  font-family:"Cairo", Arial, sans-serif !important;
}

/* AR headings/titles use Cairo; labels use Roboto Condensed Medium with slight tracking */
.wssd-session[dir="rtl"] .wssd-supra,
.wssd-session[dir="rtl"] .wssd-main,
.wssd-session[dir="rtl"] .wssd-title {
  font-family:"Cairo", Arial, sans-serif !important;
}

.wssd-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:var(--muted);
  font-weight:500;
  text-transform:uppercase;
  font-size:var(--kicker-size);
  font-family:"Roboto Condensed", Arial, sans-serif !important;
  letter-spacing:0.04em; /* simulate optical 40 */
}
/* Remove row-reverse so icon then label order persists */
.wssd-session[dir="rtl"] .wssd-kicker {
  flex-direction: row;
  font-family:"Rubik", Arial, sans-serif !important;
}

.wssd-kicker i {
  width:22px;
  height:3px;
  display:inline-block;
  background:var(--wssd-plum);
  border-radius:2px;
}

.wssd-title {
  margin:0 0 14px 0;
  font-family:"Roboto Condensed", Arial, sans-serif !important;
  font-weight:800;
  font-size:var(--section-title-size);
  letter-spacing:0;
  font-kerning:normal;
}
.wssd-title.background-title { color:var(--wssd-coral); }
.wssd-title.objectives-title  { color:var(--wssd-orange); }
.accent-cyan .wssd-title       { color:var(--wssd-cyan); }
.accent-blue .wssd-title       { color:var(--wssd-blue); }

.wssd-lead { font-size:var(--paragraph-size-en); color:#1f2937; }

/* Paragraph sizes and fonts */
p, li {
  font-size: var(--paragraph-size-en);
  font-family:"Roboto", Arial, sans-serif !important;
}
.wssd-session[dir="rtl"] p,
.wssd-session[dir="rtl"] li {
  font-size: var(--paragraph-size-ar);
  font-family:"Rubik", Arial, sans-serif !important;
}

.wssd-section {
  margin-top:36px;
}
.wssd-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
}

/* Grid keeps big-left, small-right on both languages */
.wssd-grid-2 {
  display:grid;
  gap:28px;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:900px) {
  .wssd-grid-2 { grid-template-columns:2fr 1fr; }
}
.wssd-grid-2 > .right-column {
  display:flex;
  flex-direction:column;
  gap:28px;
}
.wssd-grid-2 > .right-column > .wssd-card {
  flex-grow:1;
}

/* Speakers / Partners */
.wssd-speakers {
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
}
.speaker {
  border:1px solid #e6e6e6;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.speaker .photo {
  width:100%;
  aspect-ratio:1/1;
  background:#f3f4f6;
  display:block;
  overflow:hidden;
}
.speaker .photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.speaker .info { padding:12px; }
.speaker .name {
  font-weight:700;
  font-family:"Roboto Condensed", Arial, sans-serif !important;
  font-size:var(--speaker-name-size);
}
.wssd-session[dir="rtl"] .speaker .name {
  font-family:"Cairo", Arial, sans-serif !important;
}
.speaker .title {
  color:#6b7280;
  font-size:var(--speaker-title-size);
}

.wssd-partners {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(186px,1fr));
  gap:14px;
  justify-content:center;
}
.partner {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:186px;
}
.partner img {
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:166px;
  max-height:166px;
}

.wssd-grid-2-equal {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  margin-top:36px;
  align-items:stretch;
}
@media (min-width:900px) {
  .wssd-grid-2-equal { grid-template-columns:1fr 1fr; }
}
.wssd-grid-2-equal > .wssd-card { height:100%; }
.wssd-form { flex-grow:1; }

/* Contact list spacing */
.wssd-contact-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  color:var(--ink-soft);
  gap:10px;
}
.wssd-contact-list .contact-group {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-block:8px;
}
.wssd-contact-list li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--contact-size);
}
.wssd-contact-list hr {
  border:0;
  height:1px;
  background-color:#e5e7eb;
  margin:6px 0;
}
.wssd-contact-list a {
  color:var(--wssd-blue);
  text-decoration:none;
}
.wssd-contact-list a:hover {
  text-decoration:underline;
}
.wssd-contact-icon {
  flex-shrink:0;
  width:24px;
  height:24px;
  fill:var(--wssd-cyan);
}

/* Extra bottom spacing */
.wssd-session .wssd-container { padding-bottom:48px; }

/* Mobile */
@media (max-width:720px) {
  .wssd-session {
    --header-main-size: clamp(18px,5vw,28px);
    --header-supra-size: clamp(14px,3vw,18px);
    --header-date-size: clamp(12px,2.5vw,16px);
    --section-title-size-en: clamp(18px, 4vw, 24px);
    --section-title-size-ar: clamp(19px, 4.5vw, 26px);
    --section-title-size: var(--section-title-size-en);
    --paragraph-size-en: 14px;
    --paragraph-size-ar: 14px;
    --contact-size:14px;
    --button-size:12px;
  }
  .wssd-header-grid {
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:16px;
  }
  .wssd-header-logos {
    margin:0 auto;
    width:280px;
    height:70px;
  }
  .wssd-head-text {
    text-align:center;
    margin-top:8px;
  }
  .wssd-lang-switcher {
    top:10px;
    right:10px;
  }
  .wssd-session[dir="rtl"] .wssd-lang-switcher {
    right:auto;
    left:10px;
  }
  .lang-btn { padding:6px 12px; }
  .wssd-container { padding:0 12px 56px 12px; }
  .wssd-card { padding:18px; }
  .wssd-section { margin-top:24px; }
  .wssd-grid-2 { gap:20px; }
  .wssd-grid-2-equal { gap:20px; margin-top:24px; }
  .wssd-partners { grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
  .partner { height:140px; }
}

/* Language content visibility */
.lang-content { display:none; }
.wssd-session[data-lang="en"] .lang-en { display:block; }
.wssd-session[data-lang="ar"] .lang-ar { display:block; }