/* =============================================================
   content.css -- the edge-rendered content pages:
   /courses/<slug>, /teachers/<slug>, /events/<slug>, /about.
   Built on assets/css/tokens.css; logical properties throughout so
   the same rules serve Arabic (rtl) and English (ltr).
   ============================================================= */

* { box-sizing: border-box; }
.cp-body {
    margin: 0;
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
    color: var(--ink, #222);
    background: linear-gradient(180deg, #f2fbf5 0, #ffffff 340px);
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}
.cp-body a { color: #2f7a4c; }
.cp-skip {
    position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
    background: var(--ink, #222); color: #fff; padding: 10px 14px; border-radius: 10px;
}
.cp-skip:focus { top: 12px; }

/* ---------- header ---------- */
.cp-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--green-border, #e4f1e8);
}
.cp-bar {
    max-width: 1060px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px;
}
.cp-brand img { display: block; height: 34px; width: auto; }
.cp-nav { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.cp-nav a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
    border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--ink, #222);
}
.cp-nav a:hover, .cp-nav a[aria-current="page"] { background: #eafaf1; color: #2f7a4c; }
@media (max-width: 560px) {
    .cp-bar { flex-wrap: wrap; gap: 8px; }
    .cp-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
    .cp-lang { margin-inline-start: auto; }
}

/* ---------- layout ---------- */
.cp-main { max-width: 1060px; margin: 0 auto; padding: 16px 16px 56px; outline: none; }
.cp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; padding: 0; font-size: 14px; color: var(--muted, #707070); }
.cp-crumbs li:not(:last-child)::after { content: "›"; margin-inline-start: 6px; opacity: .6; }
html[dir="rtl"] .cp-crumbs li:not(:last-child)::after { content: "‹"; }
.cp-crumbs a { color: inherit; text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }

.cp-hero, .cp-card {
    background: #fff;
    border: 1px solid var(--line, #e3e8e5);
    border-radius: var(--radius-lg, 22px);
    padding: clamp(18px, 3.5vw, 32px);
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.05);
}
.cp-hero { border-top: 6px solid var(--accent, var(--green, #55b878)); }
.cp-hero-person { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
@media (max-width: 560px) { .cp-hero-person { grid-template-columns: 1fr; } }
.cp-kicker { margin: 0 0 6px; font-weight: 800; color: var(--accent, #2f7a4c); font-size: 14.5px; }
.cp-kicker a { color: inherit; text-decoration: none; }
.cp-h1 { margin: 0 0 10px; font-size: clamp(24px, 5vw, 36px); line-height: 1.35; font-weight: 800; }
.cp-h2 { margin: 0 0 12px; font-size: clamp(18px, 3.4vw, 22px); font-weight: 800; }
.cp-lead { margin: 0 0 14px; font-size: clamp(15.5px, 2.6vw, 17.5px); color: #3d4a43; line-height: 1.9; }
.cp-card p { line-height: 1.9; }

/* facts */
.cp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.cp-facts div { background: var(--green-wash, #f7faf8); border: 1px solid var(--green-border, #e4f1e8); border-radius: 14px; padding: 10px 14px; }
.cp-facts dt { font-size: 13px; color: var(--muted, #707070); font-weight: 700; }
.cp-facts dd { margin: 2px 0 0; font-weight: 800; }

/* buttons */
.cp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.cp-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
    border-radius: 999px; background: var(--green, #55b878); color: #fff !important; font-weight: 800;
    text-decoration: none; box-shadow: 0 8px 20px rgba(85, 184, 120, .3); border: 1px solid transparent;
}
.cp-btn:hover { background: #47a468; }
.cp-btn-ghost { background: #fff; color: #2f7a4c !important; border-color: #cfe9da; box-shadow: none; }
.cp-btn-ghost:hover { background: #eafaf1; }

/* share */
.cp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted, #707070); }
.cp-share a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line, #e3e8e5); text-decoration: none; font-weight: 700; color: var(--ink, #222); }
.cp-share a:hover { background: #f4f7f5; }

/* people */
.cp-person { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.cp-person strong { display: block; font-size: 17px; }
.cp-person-bio { display: block; color: var(--muted, #707070); font-size: 14.5px; }
.cp-avatar { border-radius: 50%; object-fit: cover; flex: none; background: #eafaf1; }
.cp-avatar-initial { display: inline-flex; align-items: center; justify-content: center; color: #2f7a4c; font-weight: 800; font-size: 26px; }
.cp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }

/* steps, lists */
.cp-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.cp-links { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.cp-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cp-sections a { display: block; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line, #e3e8e5); text-decoration: none; color: inherit; background: var(--green-wash, #f7faf8); }
.cp-sections strong { display: block; font-size: 17px; color: var(--ink, #222); }
.cp-sections span { color: var(--muted, #707070); font-size: 14.5px; }
.cp-statrow { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-statrow li { flex: 1 1 120px; text-align: center; padding: 12px; border-radius: 14px; background: var(--green-wash, #f7faf8); border: 1px solid var(--green-border, #e4f1e8); }
.cp-statrow strong { display: block; font-size: 24px; color: var(--green, #55b878); }
.cp-statrow span { font-size: 14px; color: var(--muted, #707070); }

/* medals & certificates */
.cp-medals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cp-medals li { text-align: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line, #e3e8e5); background: #fffdf7; }
.cp-medals img { display: block; margin: 0 auto 8px; }
.cp-medals strong { display: block; }
.cp-medals span { font-size: 13.5px; color: var(--muted, #707070); }
.cp-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cp-certs a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line, #e3e8e5); border-radius: 14px; padding: 8px; background: #fff; }
.cp-certs img { width: 100%; aspect-ratio: 1.414; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.cp-certs span { display: block; font-weight: 800; margin-top: 6px; }
.cp-certs small { color: var(--muted, #707070); }

.cp-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; margin: 10px 0 14px; background: #f1f5f9; }

/* FAQ */
.cp-faq { display: grid; gap: 10px; }
.cp-faq details { border: 1px solid var(--line, #e3e8e5); border-radius: 14px; background: var(--green-wash, #f7faf8); }
.cp-faq summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 800; min-height: 48px; display: flex; align-items: center; gap: 10px; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::before { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #cfe9da; color: #2f7a4c; font-weight: 800; }
.cp-faq details[open] summary::before { content: "–"; }
.cp-faq p { margin: 0; padding: 0 16px 14px; }

.cp-empty { text-align: center; }

/* ---------- footer ---------- */
.cp-footer { border-top: 1px solid var(--green-border, #e4f1e8); background: #fff; }
.cp-footer-inner { max-width: 1060px; margin: 0 auto; padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--muted, #707070); font-size: 14px; }
.cp-footer-brand { font-weight: 800; color: var(--ink, #222); margin: 0 0 8px; }
.cp-social { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.cp-social a { display: inline-flex; min-height: 36px; align-items: center; color: #2f7a4c; font-weight: 700; text-decoration: none; }
.cp-footer-copy { margin: 0; }

/* Touch: give breadcrumb and list links a comfortable tap height. */
@media (hover: none) and (pointer: coarse) {
    .cp-crumbs a, .cp-links a { display: inline-block; padding-block: 8px; }
    .cp-course-title { display: inline-block; padding-block: 6px; }
}

/* ---------- opportunities board ---------- */
.cp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-search { display: flex; gap: 8px; margin: 14px 0 10px; }
.cp-search input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line, #e3e8e5); font: inherit; font-size: 16px; background: #fff;
}
.cp-search input:focus { outline: 3px solid rgba(85, 184, 120, .35); border-color: var(--green, #55b878); }
.cp-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.cp-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--line, #e3e8e5); background: #fff;
    color: var(--ink, #222) !important; text-decoration: none; font-weight: 700; font-size: 14.5px;
}
.cp-chip small { color: var(--muted, #707070); font-weight: 700; }
.cp-chip[aria-current="true"] { background: #eafaf1; border-color: #cfe9da; color: #2f7a4c !important; }
.cp-count { font-size: 14px; color: var(--muted, #707070); font-weight: 700; }
.cp-opp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cp-opp {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
    border: 1px solid var(--line, #e3e8e5); border-radius: var(--radius, 14px); background: var(--green-wash, #f7faf8);
}
.cp-opp.is-featured { border-color: #f0d98a; background: #fffcf0; }
.cp-opp.is-closed { opacity: .72; }
.cp-opp-top { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-opp .cp-meta { margin: 0; }
.cp-opp-deadline { margin: auto 0 0; font-size: 14px; color: #3d4a43; }
.cp-opp-deadline.is-closing strong { color: #b54708; }
.cp-pill-cat { background: #fff; }
.cp-pill-star { background: #fff4d6; color: #8a6100; border-color: #f0d98a; }
.cp-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #f5d7a8; color: #7a4a00; }
.cp-prose p { white-space: pre-line; line-height: 1.9; }
.cp-faq details > ul { margin: 0 16px 14px; }