/* P2.22 accessibility (everchristy audit): contrast (WCAG AA, 4.5:1 for normal text), touch targets of at least
   24 px, keyboard focus and the "Skip to content" link. Loaded on public, learner and instructor pages.
   html[data-p222=...] is set at the top of <head>, so these rules win over the page's own colours. */

/* ---------- every area ---------- */
.p222-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 6px;
  background: #111827; color: #fff !important; font-weight: 600; text-decoration: none;
}
.p222-skip:focus { top: 8px; outline: 3px solid #fbbf24; }
html[data-p222] :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html[data-p222] [tabindex="-1"]:focus { outline: none; }
/* carousel dots: the dot stays as drawn, the area you can tap grows to 24 px */
html[data-p222] button[data-bs-slide-to][style*="border-radius"] {
  box-sizing: content-box !important; padding: 8px !important; background-clip: content-box !important;
  border: 0 !important; margin: 0 !important;
}
html[data-p222] .carousel-indicators [data-bs-target] { border-top-width: 11px; border-bottom-width: 11px; }

/* ---------- public site: the main colour from the settings, darkened only as much as needed ---------- */
html[data-p222="public"] {
  --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298;
}
html[data-p222="public"] body .btn-primary,
html[data-p222="public"] body .btn-next,
html[data-p222="public"] body .btn-submit,
html[data-p222="public"] body #submitBtn,
html[data-p222="public"] body .category-pill.active,
html[data-p222="public"] body .tab-btn.active,
html[data-p222="public"] body .page-item.active .page-link,
html[data-p222="public"] body .nav-pills .nav-link.active {
  background-color: var(--p222-primary) !important; border-color: var(--p222-primary) !important; color: #fff !important;
}
html[data-p222="public"] body .btn-outline-primary,
html[data-p222="public"] body .clear-filters,
html[data-p222="public"] body .page-link,
html[data-p222="public"] body .nav-tabs .nav-link.active,
html[data-p222="public"] body .category-pill:not(.active),
html[data-p222="public"] body .category-pill:not(.active) .count,
html[data-p222="public"] body a[style*="3498db"] {
  color: var(--p222-primary) !important; border-color: var(--p222-primary);
}
html[data-p222="public"] body .page-item.active .page-link { color: #fff !important; }
html[data-p222="public"] body .btn-outline-primary:hover,
html[data-p222="public"] body .btn-outline-primary:focus { background-color: var(--p222-primary) !important; color: #fff !important; }
html[data-p222="public"] body .category-pill.active .count { color: var(--p222-primary) !important; background: #fff !important; }
html[data-p222="public"] body .tab-btn:not(.active) { color: #4b5563 !important; }
html[data-p222="public"] body .badge.bg-info { background-color: #0b7285 !important; color: #fff !important; }
html[data-p222="public"] body .project-status.status-completed { background-color: #1e7e34 !important; color: #fff !important; }
html[data-p222="public"] body .project-status.status-ongoing { color: #3d2e00 !important; }
html[data-p222="public"] body .section-subtitle { color: #565e64 !important; }
html[data-p222="public"] body .text-muted { color: #5c636a !important; }
html[data-p222="public"] body .info-text { color: #4b5563 !important; }

/* ---------- learner portal (light theme; the dark theme keeps its own colours) ---------- */
html[data-p222="students"]:not([data-theme="dark"]) {
  --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-text-muted: #64748b;
}
html[data-p222="students"]:not([data-theme="dark"]) body .payment-badge.badge-partial,
html[data-p222="students"]:not([data-theme="dark"]) body .progress-text.partial,
html[data-p222="students"]:not([data-theme="dark"]) body .amount-main.partial { color: #b45309 !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .stat-card-change.positive,
html[data-p222="students"]:not([data-theme="dark"]) body .stat-card-change.positive span,
html[data-p222="students"]:not([data-theme="dark"]) body .coupon-discount,
html[data-p222="students"]:not([data-theme="dark"]) body .assignment-status.status-graded { color: #047857 !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .course-badge.badge-enrolled { background: #15803d !important; color: #fff !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .alert-info,
html[data-p222="students"]:not([data-theme="dark"]) body .alert-info * { color: #1e40af !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .filter-btn.active { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .stat-label,
html[data-p222="students"]:not([data-theme="dark"]) body .footer-right,
html[data-p222="students"]:not([data-theme="dark"]) body .footer-right span { color: #5f6672 !important; }

/* ---------- instructor portal ---------- */
html[data-p222="instructor"] { --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; }
html[data-p222="instructor"] body .bg-success .text-white-50,
html[data-p222="instructor"] body .bg-secondary .text-white-50,
html[data-p222="instructor"] body .bg-info .text-white-50,
html[data-p222="instructor"] body .bg-warning .text-white-50 { color: #fff !important; }
html[data-p222="instructor"] body .bg-success { background-color: #146c43 !important; }
html[data-p222="instructor"] body .btn-outline-secondary { color: #565e64; border-color: #565e64; }
html[data-p222="instructor"] body .nav-pills .nav-link.active,
html[data-p222="instructor"] body .nav-link.active[href^="?status"] { background-color: #2e59d9 !important; color: #fff !important; }
html[data-p222="instructor"] body .text-muted { color: #5c636a !important; }

/* ---------- smaller details found in the re-check ---------- */
html[data-p222="public"] body .category-pill:not(.active) .count { color: #1f4e70 !important; }
html[data-p222] body .page-item.disabled .page-link { color: #495057 !important; }
html[data-p222="students"]:not([data-theme="dark"]) body .footer-right, html[data-p222="students"]:not([data-theme="dark"]) body .footer-right span { opacity: 1 !important; }
html[data-p222="instructor"] body .text-info { color: #087990 !important; }
html[data-p222="instructor"] body .text-warning { color: #8a6a00 !important; }
html[data-p222="instructor"] body footer a.text-decoration-none { text-decoration: underline !important; }