/*
* CITS WP E-Learning Pro — frontend accessibility baseline (Phase 11.4).
*
* Loaded on every page containing one of our portal shortcodes. Themes
* sometimes suppress the WP-default focus ring; this file guarantees a
* visible focus indicator inside any element we render.
*
* Honours prefers-reduced-motion: disables our own transitions/animations
* for users who request reduced motion (a11y best practice + WCAG 2.3.3).
*
* Targets only DOM that lives inside our portal containers
* (`.cits-wpel-student-dashboard`, `.cits-wpel-exam-runner`,
* `.cits-wpel-student-history`, `.cits-wpel-exam-result`) so we don't
* fight the host theme on its own pages.
*/
/* --- Focus indicator --------------------------------------------- */
.cits-wpel-student-dashboard :focus-visible,
.cits-wpel-exam-runner :focus-visible,
.cits-wpel-student-history :focus-visible,
.cits-wpel-exam-result :focus-visible {
outline: 2px solid #2271b1; /* WP admin primary blue */
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.25);
}
/* Higher-contrast variant for forced-colors mode (Windows high
contrast, etc.) — the system handles colour, we just keep the
outline at all. */
@media (forced-colors: active) {
.cits-wpel-student-dashboard :focus-visible,
.cits-wpel-exam-runner :focus-visible,
.cits-wpel-student-history :focus-visible,
.cits-wpel-exam-result :focus-visible {
outline: 3px solid CanvasText;
box-shadow: none;
}
}
/* --- Screen-reader-only utility ---------------------------------- */
/*
* Two class names exposed:
* .cits-wpel-sr-only — namespaced; safe across all themes
* .screen-reader-text — WP core's standard name; most themes define
* it but not all (some block themes don't). We define it here so
* our caption / sr-only labels never silently become visible on
* themes that omit it.
*/
.cits-wpel-sr-only,
.cits-wpel-portal .screen-reader-text,
.cits-wpel-portal-exam-purchases .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* When the SR-only element receives focus (e.g. a keyboard-only
"skip to questions" link inside the runner), reveal it. */
.cits-wpel-sr-only:focus,
.cits-wpel-sr-only:focus-visible,
.cits-wpel-portal .screen-reader-text:focus,
.cits-wpel-portal .screen-reader-text:focus-visible {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
/* --- Disabled-state semantics ----------------------------------- */
.cits-wpel-student-dashboard [aria-disabled="true"],
.cits-wpel-exam-runner [aria-disabled="true"],
.cits-wpel-student-history [aria-disabled="true"],
.cits-wpel-exam-result [aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
}
/* --- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cits-wpel-student-dashboard *,
.cits-wpel-exam-runner *,
.cits-wpel-student-history *,
.cits-wpel-exam-result * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- Theme-compat baseline (Phase 11.9) -------------------------- */
/*
* Most themes have normal-flow page headers that push content below
* themselves. But landing-page themes (Floreo, OceanWP "transparent
* header" mode, many Tailwind/Elementor templates) position the header
* absolutely/fixed over a hero. On non-hero pages the header overlaps
* the first ~100px of content. This baseline shoves content down so
* headings aren't cut off by the chrome.
*
* Operators can tune by setting a different `--cits-wpel-content-offset`
* value on `body.cits-wpel-portal`, or override the padding-top rule
* directly via theme CSS.
*/
body.cits-wpel-portal {
/* Hot-fix 11.9.1: dropped from 2.5rem to 1rem (2026-05-24). On themes
that already pad their own content wrapper (Floreo, most modern
block themes), the original 2.5rem stacked on top of the theme's
padding and left an oversized gap above the first heading / table.
1rem is a small, safe baseline — operators who need more can still
override --cits-wpel-content-offset. */
--cits-wpel-content-offset: 1rem;
}
/* Target the theme's content wrapper. Most themes use one of these
selectors; the cascade picks the first one the theme actually emits. */
body.cits-wpel-portal main,
body.cits-wpel-portal .site-content,
body.cits-wpel-portal .site-main,
body.cits-wpel-portal #content,
body.cits-wpel-portal #primary,
body.cits-wpel-portal .entry-content {
padding-top: var(--cits-wpel-content-offset);
}
/* WC My Account → Exam Purchases tab: same offset on that page too.
See `MyAccountTab::addBodyClass` for the body-class wiring that makes
this selector match. */
body.cits-wpel-portal-exam-purchases main,
body.cits-wpel-portal-exam-purchases .site-content,
body.cits-wpel-portal-exam-purchases .site-main,
body.cits-wpel-portal-exam-purchases #content {
padding-top: var(--cits-wpel-content-offset);
}
/* --- Skip-to-questions link (runner only) ----------------------- */
.cits-wpel-exam-runner .cits-wpel-skip-link {
/* Visually hidden until focused — same pattern as WP core's
Skip to Content link. */
position: absolute;
left: -9999px;
top: 0;
background: #2271b1;
color: #fff;
padding: 8px 12px;
text-decoration: none;
border-radius: 0 0 4px 4px;
z-index: 100;
}
.cits-wpel-exam-runner .cits-wpel-skip-link:focus,
.cits-wpel-exam-runner .cits-wpel-skip-link:focus-visible {
left: 0;
}
/* E9.1 — Exam Purchases hub. Stat strip + 3 navigation cards instead
of a paragraph + lone CTA. Reads as a proper "section landing page"
inside WC My Account. */
.cits-wpel-exam-purchases-hub {
margin: 0;
}
.cits-wpel-exam-purchases-hub__header {
margin: 0 0 1.25rem;
}
.cits-wpel-exam-purchases-hub__title {
margin: 0 0 0.4rem;
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
}
.cits-wpel-exam-purchases-hub__intro {
margin: 0;
color: #6b7280;
line-height: 1.55;
}
/* Stat strip — Total / Active / Expired tiles. */
.cits-wpel-exam-purchases-hub__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin: 0 0 1.25rem;
padding: 0;
}
.cits-wpel-exam-purchases-hub__stat {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
text-align: center;
border-top: 3px solid #e5e7eb;
margin: 0;
}
.cits-wpel-exam-purchases-hub__stat dt {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}
.cits-wpel-exam-purchases-hub__stat dd {
margin: 0;
font-size: 1.85rem;
font-weight: 700;
line-height: 1;
color: #1f2937;
font-variant-numeric: tabular-nums;
}
.cits-wpel-exam-purchases-hub__stat.is-total {
border-top-color: var(--cits-wpel-primary-color, #0f766e);
}
.cits-wpel-exam-purchases-hub__stat.is-total dd {
color: var(--cits-wpel-primary-color, #0f766e);
}
.cits-wpel-exam-purchases-hub__stat.is-active {
border-top-color: #16a34a;
}
.cits-wpel-exam-purchases-hub__stat.is-active dd {
color: #047857;
}
.cits-wpel-exam-purchases-hub__stat.is-expired {
border-top-color: #9ca3af;
}
.cits-wpel-exam-purchases-hub__stat.is-expired dd {
color: #6b7280;
}
/* E9.1 (revised) — Navigation as a CLEAN VERTICAL LIST of rows.
Previous auto-fit grid fought with the narrow WC My Account column
and produced squished, badly-wrapping cards. List rows are robust
at every column width: each row stacks full-width, content reads
left-to-right (icon · title+subtitle · arrow), no awkward wraps. */
.cits-wpel-exam-purchases-hub__nav {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.6rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cits-wpel-exam-purchases-hub__card {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.15rem;
background: #fff;
color: #1f2937;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.15s ease;
position: relative;
}
.cits-wpel-exam-purchases-hub__nav > .cits-wpel-exam-purchases-hub__card:last-child {
border-bottom: 0;
}
.cits-wpel-exam-purchases-hub__card:hover,
.cits-wpel-exam-purchases-hub__card:focus {
background: color-mix(in srgb, var(--cits-wpel-primary-color, #0f766e) 4%, #fff);
outline: none;
}
.cits-wpel-exam-purchases-hub__card.is-primary {
border-left: 3px solid var(--cits-wpel-primary-color, #0f766e);
padding-left: calc(1.15rem - 3px);
}
.cits-wpel-exam-purchases-hub__card-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--cits-wpel-primary-color, #0f766e) 10%, #fff);
color: var(--cits-wpel-primary-color, #0f766e);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
}
.cits-wpel-exam-purchases-hub__card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
line-height: 1.4;
}
.cits-wpel-exam-purchases-hub__card-body strong {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
}
.cits-wpel-exam-purchases-hub__card-body small {
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
}
.cits-wpel-exam-purchases-hub__card-arrow {
flex-shrink: 0;
color: #9ca3af;
font-size: 1.25rem;
transition: transform 0.15s ease, color 0.15s ease;
}
.cits-wpel-exam-purchases-hub__card:hover .cits-wpel-exam-purchases-hub__card-arrow,
.cits-wpel-exam-purchases-hub__card:focus .cits-wpel-exam-purchases-hub__card-arrow {
color: var(--cits-wpel-primary-color, #0f766e);
transform: translateX(3px);
}
/* E9.1 + E19.0.2 — WC My Account left-nav: indent sub-items under both
"Exam Purchases" (E9.1) and "Instructor" (E18+E19) so they read as
children of their section header. Selectors target WC's stable ``
markup; the indent classes are appended via each registrar's
`addMenuItemClasses` filter callback. */
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-item,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-item {
position: relative;
padding-left: 1.5rem;
}
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-item a,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-item a {
font-size: 0.95em;
color: #4b5563;
}
/* Vertical connector line + branch tick — gives a clear "this is a
sub-item" visual without requiring custom WC core changes. */
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-item::before,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-item::before {
content: '';
position: absolute;
left: 0.4rem;
top: 0;
bottom: 50%;
width: 1px;
background: #d1d5db;
}
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-item::after,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-item::after {
content: '';
position: absolute;
left: 0.4rem;
top: 50%;
width: 0.7rem;
height: 1px;
background: #d1d5db;
}
/* The LAST sub-item in each family shouldn't extend its vertical line
past its own branch tick — stops the line right at the elbow. */
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-item:not(:has(+ li.cits-wpel-submenu-item))::before,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-item:not(:has(+ li.cits-wpel-instructor-submenu-item))::before {
bottom: 50%;
}
/* E9.1 (revised) — collapsible-submenu styling. The chevron toggle
button is injected by my-account-menu.js. Click → expands/collapses
the child s. State persists in localStorage per menu. */
.woocommerce-MyAccount-navigation li.cits-wpel-submenu-parent,
.woocommerce-MyAccount-navigation li.cits-wpel-instructor-submenu-parent {
position: relative;
}
.cits-wpel-submenu-toggle {
position: absolute;
/* Was 0.5rem / 1.75rem. User reported the active "Instructor" item
was getting its right edge clipped — themes that add right-side
padding or negative margin to the active menu item combined with
a 28px-wide chevron pushed past the visible sidebar boundary.
Tighten the chevron + position it closer to the right edge. */
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 1.4rem;
height: 1.4rem;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.cits-wpel-submenu-toggle:hover,
.cits-wpel-submenu-toggle:focus {
opacity: 1;
background: rgba(0, 0, 0, 0.06);
outline: none;
}
.cits-wpel-submenu-toggle__chevron {
display: inline-block;
font-size: 0.9rem;
line-height: 1;
transition: transform 0.2s ease;
}
/* Chevron orientation: rotated when collapsed (pointing right),
default ▾ orientation when expanded (pointing down). E19.0.2 extends
the chevron rules to also cover the Instructor parent class. */
.cits-wpel-submenu-parent.is-collapsed .cits-wpel-submenu-toggle__chevron,
.cits-wpel-instructor-submenu-parent.is-collapsed .cits-wpel-submenu-toggle__chevron {
transform: rotate(-90deg);
}
.cits-wpel-submenu-parent.is-expanded .cits-wpel-submenu-toggle__chevron,
.cits-wpel-instructor-submenu-parent.is-expanded .cits-wpel-submenu-toggle__chevron {
transform: rotate(0deg);
}
/* When collapsed, children are display:none via inline style set by JS;
no extra CSS needed. The inline `display: none` overrides our
indent/connector styles correctly because those styles only apply
to visible elements. */
/* ---------------------------------------------------------------------
E19.0.3 — Per-item dashicons for the WC My Account menu.
Each carries a `cits-wpel-icon-*` class (injected by
PortalEndpoints / InstructorPortalEndpoints) telling us which glyph
to render. We emit the glyph via the `::before` pseudo-element
using WP's dashicons font (enqueued by Assets::maybeEnqueue on every
My Account page). High specificity + `!important` on `content` /
`font-family` to defeat theme defaults that often paint a generic
icon in the same slot.
Glyph mapping (dashicon → unicode):
cart f174 · exam purchases (parent)
welcome-learn-more f330 · My Exams (dashboard)
backup f321 · Exam History
awards f313 · Overall Leaderboard
businessperson f338 · Instructor (parent)
clipboard f481 · Assigned Exams
groups f307 · My Students
chart-bar f185 · Class Performance
megaphone f488 · Announcements
editor-help f223 · Authored Questions
welcome-write-blog f119 · Authored Exams
--------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation li[class*="cits-wpel-icon-"] > a {
/* Reserve horizontal room for the glyph + a small gap.
BLOCK-LEVEL flex (not inline-flex) so the still fills the
full menu-item width — otherwise themes that paint the active
background on the render only behind the shrunk content,
producing a "half-coloured" highlight (reported 2026-05-25). */
display: flex;
align-items: center;
gap: 0.6rem;
}
.woocommerce-MyAccount-navigation li[class*="cits-wpel-icon-"] > a::before {
font-family: dashicons !important;
font-weight: 400;
font-style: normal;
font-size: 1.15rem;
line-height: 1;
width: 1.25rem;
height: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
opacity: 0.85;
flex-shrink: 0;
/* Replace any existing theme icon background. */
background: transparent !important;
}
/* Per-item glyphs. `content` is `!important` so themes that paint
their own ::before content lose the cascade. */
.woocommerce-MyAccount-navigation li.cits-wpel-icon-purchases > a::before { content: "\f174" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-my-exams > a::before { content: "\f330" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-history > a::before { content: "\f321" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-leaderboard > a::before { content: "\f313" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-instructor > a::before { content: "\f338" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-assigned > a::before { content: "\f481" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-students > a::before { content: "\f307" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-analytics > a::before { content: "\f185" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-megaphone > a::before { content: "\f488" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-q > a::before { content: "\f223" !important; }
.woocommerce-MyAccount-navigation li.cits-wpel-icon-authored > a::before { content: "\f119" !important; }
/* E25.4 — Courses menu icon (dashicons "book-alt"). */
.woocommerce-MyAccount-navigation li.cits-wpel-icon-book > a::before { content: "\f331" !important; }
/* E25.5b — Student "My Courses" icon (dashicons "welcome-learn-more"). */
.woocommerce-MyAccount-navigation li.cits-wpel-icon-graduation > a::before { content: "\f118" !important; }
/* Active item gets a slightly stronger icon (matches the WC active
menu styling that bolds the link). */
.woocommerce-MyAccount-navigation li.is-active[class*="cits-wpel-icon-"] > a::before {
opacity: 1;
}