/* =============================================================
ssr.css -- content rendered at the edge (functions/).
1. BILINGUAL TEXT. Server-rendered database text carries BOTH
languages: …….
(set before first paint from the stored choice, and by
the language toggle) decides which one shows -- so the page is in
the right language with no script, and crawlers read both.
2. The plain course list that fills /courses before courses-public.js
replaces it, and the course list items reused by the edge pages.
============================================================= */
[data-l="en"] { display: none; }
html[lang="en"] [data-l="en"] { display: inline; }
html[lang="en"] [data-l="ar"] { display: none; }
/* ---------- /courses before JavaScript ---------- */
.ssr-courses {
max-width: 1100px;
margin: 0 auto;
padding: 24px 16px 56px;
font-family: "Tajawal", Tahoma, Arial, sans-serif;
}
.ssr-dept {
margin-block: 22px;
padding: 20px clamp(16px, 3vw, 28px);
background: #fff;
border: 1px solid var(--line, #e3e8e5);
border-inline-start: 6px solid var(--dept-accent, var(--green, #55b878));
border-radius: var(--radius-lg, 22px);
}
.ssr-dept h2 { margin: 0 0 6px; font-size: clamp(20px, 3.4vw, 26px); color: var(--dept-accent, var(--ink, #222)); }
.ssr-dept-desc { margin: 0 0 12px; color: var(--muted, #707070); line-height: 1.8; }
.ssr-cat { margin: 18px 0 8px; font-size: 16px; color: var(--ink, #222); }
/* ---------- course list items (edge pages + /courses fallback) ---------- */
.cp-course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cp-course {
padding: 14px 16px;
border: 1px solid var(--line, #e3e8e5);
border-radius: var(--radius, 14px);
background: var(--green-wash, #f7faf8);
}
.cp-course-title { font-weight: 800; font-size: 17px; color: var(--ink, #222); text-decoration: none; }
.cp-course-title:hover { color: var(--green, #55b878); text-decoration: underline; }
.cp-course p { margin: 6px 0; line-height: 1.75; color: #3d4a43; }
.cp-meta { font-size: 14px; color: var(--muted, #707070); }
.cp-meta a { color: inherit; font-weight: 700; }
.cp-pill {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 2px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
background: #f1f3f2;
color: #5c6b63;
border: 1px solid var(--line, #e3e8e5);
}
.cp-pill-open { background: #eafaf1; color: #2f7a4c; border-color: #cfe9da; }
/* Titles that link to the edge-rendered pages keep their card styling. */
.cc-title-link, .event-title-link { color: inherit; text-decoration: none; }
.cc-title-link:hover, .event-title-link:hover,
.cc-title-link:focus-visible, .event-title-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.tp-full-profile { display: inline-block; margin-top: 4px; font-size: 13.5px; font-weight: 800; color: #2f7a4c; text-decoration: none; }
.tp-full-profile:hover { text-decoration: underline; }
/* Homepage: link from the weekly pick to the full opportunities board. */
.weekly-board-link { text-align: center; margin: 18px 0 0; }
.weekly-board-link a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
background: #eafaf1; border: 1px solid #cfe9da; color: #2f7a4c; font-weight: 800; text-decoration: none;
}
.weekly-board-link a:hover { background: #dcf3e6; }