/* ========================================================================== TUTOR LMS AND ULTIMATE MEMBER — style overrides Requirements V3.0 Section 9 (courses), Section 6/7 (accounts). Enqueued only on their own screens — see soi_enqueue_plugin_style_overrides() in functions.php for why this is a second file. Reads style.css's design tokens (:root custom properties), so it must load after soi-style. Every selector here is anchored to #soi-main, the id every template wraps its content in (page.php, archive.php, and Tutor's/UM's own output all render inside it). That is not decoration: an ID selector outranks any number of stacked classes in CSS specificity, so `#soi-main .um-button` beats `.um-account a:focus` or anything else either plugin ships, without having to win a stylesheet-load-order race. That race turned out to be unwinnable in practice — verified 2026-09-04/05: Ultimate Member enqueues its own CSS from inside its shortcode handlers rather than from a `wp_enqueue_scripts` callback, so it prints in AFTER this file regardless of hook priority, and `.um-account a:focus{outline:0!important}` (specificity 0,2,1) beats an unanchored `.um :where(a,...):focus-visible` (0,2,0) even with !important on both sides — specificity is compared before the !important same-specificity tie-break, which source order alone cannot win. The soi-plugin-overrides handle is still enqueued at priority 20 in functions.php, because it costs nothing and is the more legible fix *when* it works — the ID anchor is what makes correctness not depend on it. ========================================================================== */ /* -------------------------------------------------------------------------- FOCUS VISIBILITY — the one non-negotiable rule in this file. Both plugins strip the focus outline on their own form controls, links and buttons (`outline:none!important` / `outline:0!important`, verified in tutor-front.min.css and um-account.min.css). For most sites that is a minor sin; for this client it directly contradicts the commitment style.css's own accessibility-primitives block states as specification: "Visible focus on every interactive element. Never remove without an equally visible replacement." A keyboard or switch-device user filling in the register form or stepping through a course's lesson list must see where they are. -------------------------------------------------------------------------- */ #soi-main .tutor-wrap a:focus-visible, #soi-main .tutor-wrap button:focus-visible, #soi-main .tutor-wrap input:focus-visible, #soi-main .tutor-wrap select:focus-visible, #soi-main .tutor-wrap textarea:focus-visible, #soi-main .tutor-wrap [tabindex]:focus-visible, #soi-main .um a:focus-visible, #soi-main .um button:focus-visible, #soi-main .um input:focus-visible, #soi-main .um select:focus-visible, #soi-main .um textarea:focus-visible, #soi-main .um [tabindex]:focus-visible { outline: 3px solid var(--soi-accent) !important; outline-offset: 2px !important; border-radius: 2px; } /* Older engines that do not support :focus-visible fall back to plain :focus. Kept separate rather than combined into one selector list, so a browser that understands :focus-visible ignores this block entirely instead of double-applying the outline. */ #soi-main .um a:focus, #soi-main .um button:focus, #soi-main .um input:focus, #soi-main .um select:focus, #soi-main .um textarea:focus { outline: 3px solid var(--soi-accent) !important; outline-offset: 2px !important; } /* -------------------------------------------------------------------------- ULTIMATE MEMBER — colour, targets, border contrast. Tutor needs none of this: config/plugin-setup.json sets its own `--tutor-color-primary` custom property (inc/plugin-setup.php), which retints every Tutor screen through Tutor's own rules — a real theming hook, unlike anything below. Ultimate Member's stylesheets carry no custom-property layer, so its interactive colour is overridden directly. -------------------------------------------------------------------------- */ #soi-main .um-button, #soi-main .um a, #soi-main .um-link-alt, #soi-main .um-account-link.current, #soi-main .um-account-tab.current { color: var(--soi-primary); } #soi-main .um-button { background: var(--soi-primary) !important; color: #fff !important; border-radius: var(--soi-radius) !important; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } #soi-main .um-button:hover, #soi-main .um-button:focus-visible { background: var(--soi-primary-dark) !important; } #soi-main .um-button.um-alt { background: transparent !important; color: var(--soi-primary) !important; border: 2px solid var(--soi-primary) !important; } #soi-main .um-button.um-alt:hover, #soi-main .um-button.um-alt:focus-visible { background: var(--soi-primary-light) !important; } /* Section 4: "Any border that identifies a control ... must use --soi-line-strong" — WCAG 1.4.11 needs 3:1 against the background, and Ultimate Member's default field border does not clear it. */ #soi-main .um-form-field input[type="text"], #soi-main .um-form-field input[type="email"], #soi-main .um-form-field input[type="password"], #soi-main .um-form-field input[type="tel"], #soi-main .um-form-field input[type="url"], #soi-main .um-form-field select, #soi-main .um-form-field textarea { border-color: var(--soi-line-strong) !important; border-radius: var(--soi-radius); } /* Targets: Section 4 asks 44x44 minimum. Ultimate Member's own checkbox and radio glyphs run smaller than that. */ #soi-main .um-field-checkbox-state, #soi-main .um-field-radio-state { min-width: 24px; min-height: 24px; } #soi-main .um-field-checkbox-option, #soi-main .um-field-radio-option { min-height: 44px; display: flex; align-items: center; } /* Never signal meaning by colour alone (Section 4) — Ultimate Member's own in-body links carry no underline by default. */ #soi-main .um-field-label a, #soi-main .um p a { text-decoration: underline; text-underline-offset: 3px; }