/* =====================================================
 *  TTC UI/UX FIXES — Visual-Only Override Sheet
 *  
 *  PURPOSE: Fix visibility, contrast, spacing, and
 *  interaction states WITHOUT changing any HTML, JS, or PHP.
 *  Loaded as the last stylesheet to override safely.
 *  
 *  SCOPED: Uses high-specificity selectors to avoid
 *  breaking other plugins or WordPress admin defaults.
 * ===================================================== */


/* =====================================================
 *  §1  ADMIN PANEL — INPUT & FORM VISIBILITY FIXES
 *  Fixes: Dark input backgrounds in WP admin taxonomy pages,
 *  meta boxes, and custom admin templates.
 * ===================================================== */

/* ── 1a. WordPress admin form inputs (taxonomy pages, edit screens) ── */
body.wp-admin input[type="text"],
body.wp-admin input[type="email"],
body.wp-admin input[type="password"],
body.wp-admin input[type="number"],
body.wp-admin input[type="url"],
body.wp-admin input[type="tel"],
body.wp-admin input[type="search"],
body.wp-admin input[type="date"],
body.wp-admin textarea,
body.wp-admin select {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

body.wp-admin input[type="text"]:focus,
body.wp-admin input[type="email"]:focus,
body.wp-admin input[type="password"]:focus,
body.wp-admin input[type="number"]:focus,
body.wp-admin input[type="url"]:focus,
body.wp-admin input[type="tel"]:focus,
body.wp-admin input[type="search"]:focus,
body.wp-admin input[type="date"]:focus,
body.wp-admin textarea:focus,
body.wp-admin select:focus {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

body.wp-admin input[type="text"]:hover,
body.wp-admin input[type="email"]:hover,
body.wp-admin input[type="password"]:hover,
body.wp-admin input[type="number"]:hover,
body.wp-admin input[type="url"]:hover,
body.wp-admin input[type="tel"]:hover,
body.wp-admin textarea:hover,
body.wp-admin select:hover {
    border-color: #94a3b8 !important;
}

body.wp-admin input::placeholder,
body.wp-admin textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* ── 1b. Admin labels: bold and properly spaced ── */
body.wp-admin .form-field label,
body.wp-admin .form-wrap label,
body.wp-admin #ttc_meta_box label {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: block !important;
    font-size: 13px !important;
}

/* ── 1c. Admin description/help text visibility ── */
body.wp-admin .form-field p.description,
body.wp-admin .form-wrap p.description,
body.wp-admin #ttc_meta_box .description {
    color: #64748b !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    line-height: 1.5 !important;
}

/* ── 1d. Admin select dropdowns ── */
body.wp-admin select {
    min-height: 36px !important;
    appearance: auto !important;
}

/* ── 1e. Admin table text & headings ── */
body.wp-admin .wp-list-table th,
body.wp-admin .wp-list-table td {
    color: #1e293b !important;
}

body.wp-admin .wp-list-table th a {
    color: #1e293b !important;
}

body.wp-admin .wp-list-table th a:hover {
    color: #0073aa !important;
}

/* ── 1f. Row actions visibility ── */
body.wp-admin .wp-list-table .row-actions a {
    color: #0073aa !important;
}

body.wp-admin .wp-list-table .row-actions a:hover {
    color: #005177 !important;
}

body.wp-admin .wp-list-table .row-actions .delete a,
body.wp-admin .wp-list-table .row-actions .trash a {
    color: #dc2626 !important;
}

/* ── 1g. Admin button improvements ── */
body.wp-admin .button-primary {
    background: #0073aa !important;
    border-color: #006799 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 2px 4px rgba(0, 115, 170, 0.2) !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

body.wp-admin .button-primary:hover,
body.wp-admin .button-primary:focus {
    background: #005a87 !important;
    border-color: #004d77 !important;
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3) !important;
}

body.wp-admin .button-secondary,
body.wp-admin .button {
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

body.wp-admin .button-secondary:hover,
body.wp-admin .button:hover {
    border-color: #94a3b8 !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ── 1h. Admin form field spacing ── */
body.wp-admin .form-field {
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
}

/* ── 1i. Admin notices improved visibility ── */
body.wp-admin .notice {
    border-left-width: 4px !important;
    padding: 12px 16px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* ── 1j. TTC Meta Box in admin ── */
body.wp-admin #ttc_meta_box {
    padding: 16px !important;
}

body.wp-admin #ttc_meta_box p {
    margin-bottom: 16px !important;
}

body.wp-admin #ttc_meta_box input[type="text"],
body.wp-admin #ttc_meta_box textarea {
    width: 100% !important;
}

/* ── 1k. Taxonomy term name links — better contrast ── */
body.wp-admin .wp-list-table td.column-name strong a {
    color: #0073aa !important;
    font-weight: 600 !important;
}

body.wp-admin .wp-list-table td.column-name strong a:hover {
    color: #005177 !important;
    text-decoration: underline !important;
}


/* =====================================================
 *  §2  FRONTEND — LOGIN & REGISTRATION FORM FIXES
 *  Fixes: Invisible input fields on the master-login page
 *  where text/bg colors blend together.
 * ===================================================== */

/* ── 2a. Auth form inputs — guaranteed visible borders ── */
.ttc-auth-container .ttc-input,
.ttc-auth-container input[type="text"],
.ttc-auth-container input[type="email"],
.ttc-auth-container input[type="password"],
.ttc-auth-container input[type="tel"],
.ttc-auth-container input[type="number"],
.ttc-auth-container textarea,
.ttc-auth-container select {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.ttc-auth-container .ttc-input:focus,
.ttc-auth-container input[type="text"]:focus,
.ttc-auth-container input[type="email"]:focus,
.ttc-auth-container input[type="password"]:focus,
.ttc-auth-container input[type="tel"]:focus,
.ttc-auth-container input[type="number"]:focus,
.ttc-auth-container textarea:focus,
.ttc-auth-container select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background: #ffffff !important;
    outline: none !important;
}

.ttc-auth-container .ttc-input:hover,
.ttc-auth-container input[type="text"]:hover,
.ttc-auth-container input[type="email"]:hover,
.ttc-auth-container input[type="password"]:hover,
.ttc-auth-container input[type="tel"]:hover {
    border-color: #94a3b8 !important;
}

.ttc-auth-container input::placeholder,
.ttc-auth-container textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* ── 2b. Auth form labels — high contrast ── */
.ttc-auth-container .ttc-form-group label,
.ttc-auth-container label {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ── 2c. Auth card background guarantee ── */
.ttc-auth-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* ── 2d. Auth container background ── */
.ttc-auth-container {
    background: #f8fafc !important;
}


/* =====================================================
 *  §3  FRONTEND DASHBOARD — INPUT & FORM VISIBILITY
 *  Fixes: Dark mode dashboard inputs blending with bg,
 *  modal form fields not visible.
 * ===================================================== */

/* ── 3a. Dashboard modal inputs (Mock Test, Practice Set, etc.) ── */
.ttc-dashboard-v3 input[type="text"],
.ttc-dashboard-v3 input[type="email"],
.ttc-dashboard-v3 input[type="password"],
.ttc-dashboard-v3 input[type="number"],
.ttc-dashboard-v3 input[type="tel"],
.ttc-dashboard-v3 textarea,
.ttc-dashboard-v3 select {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--ttc-text-main, #f8fafc) !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.ttc-dashboard-v3 input[type="text"]:focus,
.ttc-dashboard-v3 input[type="email"]:focus,
.ttc-dashboard-v3 input[type="password"]:focus,
.ttc-dashboard-v3 input[type="number"]:focus,
.ttc-dashboard-v3 input[type="tel"]:focus,
.ttc-dashboard-v3 textarea:focus,
.ttc-dashboard-v3 select:focus {
    border-color: var(--ttc-primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

.ttc-dashboard-v3 input::placeholder,
.ttc-dashboard-v3 textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

/* ── 3b. Light mode overrides for dashboard ── */
.ttc-mode-light .ttc-dashboard-v3 input[type="text"],
.ttc-mode-light .ttc-dashboard-v3 input[type="email"],
.ttc-mode-light .ttc-dashboard-v3 input[type="password"],
.ttc-mode-light .ttc-dashboard-v3 input[type="number"],
.ttc-mode-light .ttc-dashboard-v3 input[type="tel"],
.ttc-mode-light .ttc-dashboard-v3 textarea,
.ttc-mode-light .ttc-dashboard-v3 select {
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    background: #f9fafb !important;
}

.ttc-mode-light .ttc-dashboard-v3 input::placeholder,
.ttc-mode-light .ttc-dashboard-v3 textarea::placeholder {
    color: #94a3b8 !important;
}

/* ── 3c. Modal overlay inputs (dark bg context) ── */
div[style*="z-index: 10000"] input[type="text"],
div[style*="z-index: 10000"] input[type="email"],
div[style*="z-index: 10000"] input[type="password"],
div[style*="z-index: 10000"] input[type="number"],
div[style*="z-index: 10000"] input[type="tel"],
div[style*="z-index: 10000"] textarea,
div[style*="z-index: 10000"] select,
div[style*="z-index:10000"] input[type="text"],
div[style*="z-index:10000"] input[type="email"],
div[style*="z-index:10000"] input[type="password"],
div[style*="z-index:10000"] input[type="number"],
div[style*="z-index:10000"] input[type="tel"],
div[style*="z-index:10000"] textarea,
div[style*="z-index:10000"] select {
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

div[style*="z-index: 10000"] input:focus,
div[style*="z-index: 10000"] textarea:focus,
div[style*="z-index: 10000"] select:focus,
div[style*="z-index:10000"] input:focus,
div[style*="z-index:10000"] textarea:focus,
div[style*="z-index:10000"] select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

div[style*="z-index: 10000"] input::placeholder,
div[style*="z-index: 10000"] textarea::placeholder,
div[style*="z-index:10000"] input::placeholder,
div[style*="z-index:10000"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
}

/* ── 3d. Dashboard modal labels ── */
div[style*="z-index: 10000"] h4,
div[style*="z-index:10000"] h4 {
    color: var(--ttc-text-main, #f8fafc) !important;
    font-weight: 700 !important;
}


/* =====================================================
 *  §4  QUESTION BROWSER — INPUT FIX
 *  Fixes: Question browser search/filter inputs
 * ===================================================== */

.ttc-qa-browser input[type="text"],
.ttc-qa-browser input[type="search"],
.ttc-qa-browser input[type="number"],
.ttc-qa-browser textarea,
.ttc-qa-browser select {
    border: 1px solid var(--ql-border, rgba(255, 255, 255, 0.15)) !important;
    color: var(--ql-text, #f1f5f9) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ttc-qa-browser input:focus,
.ttc-qa-browser textarea:focus,
.ttc-qa-browser select:focus {
    border-color: var(--ql-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}


/* =====================================================
 *  §5  GLOBAL TEXT CONTRAST FIXES
 *  Ensures minimum WCAG AA contrast across all contexts
 * ===================================================== */

/* ── 5a. Muted text must be visible ── */
.ttc-text-muted,
.ttc-muted,
[style*="color:var(--ttc-text-muted)"] {
    opacity: 1 !important;
}

/* ── 5b. Inline-styled text contrast for dark backgrounds ── */
.ttc-dashboard-v3 [style*="color:#475569"],
.ttc-dashboard-v3 [style*="color: #475569"] {
    color: var(--ttc-text-muted, #cbd5e1) !important;
}

/* ── 5c. Light mode: ensure dark text on light bg ── */
.ttc-mode-light h1,
.ttc-mode-light h2,
.ttc-mode-light h3,
.ttc-mode-light h4,
.ttc-mode-light h5,
.ttc-mode-light h6 {
    color: #0f172a !important;
}

.ttc-mode-light p,
.ttc-mode-light span,
.ttc-mode-light div {
    /* Only applied to direct text, not override everything */
}


/* =====================================================
 *  §6  HOVER & FOCUS STATE IMPROVEMENTS
 *  Makes interactive elements clearly respond to user input
 * ===================================================== */

/* ── 6a. Generic button hover ── */
.ttc-btn-wow:hover,
.ttc-btn-primary:hover,
.ttc-btn-secondary:hover,
.ttc-btn--primary:hover,
.ttc-btn--secondary:hover {
    cursor: pointer !important;
}

/* ── 6b. Card hover lift (subtle) ── */
.ttc-premium-card:hover,
.ttc-stat-premium:hover {
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.15) !important;
}

/* ── 6c. Tab hover states ── */
.ttc-db-tab:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* ── 6d. Focus ring for all interactive elements ── */
.ttc-auth-container button:focus-visible,
.ttc-dashboard-v3 button:focus-visible,
.ttc-qa-browser button:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px !important;
}

/* ── 6e. Link hover underline ── */
.ttc-auth-container a:hover,
.ttc-link-sm:hover {
    text-decoration: underline !important;
}


/* =====================================================
 *  §7  SPACING & PADDING CORRECTIONS
 *  Ensures proper visual breathing room
 * ===================================================== */

/* ── 7a. Form groups in auth pages ── */
.ttc-auth-container .ttc-form-group {
    margin-bottom: 20px !important;
}

/* ── 7b. Grid gap for name fields ── */
.ttc-auth-container .ttc-grid-2 {
    gap: 16px !important;
}

/* ── 7c. Dashboard section spacing ── */
.ttc-premium-card {
    margin-bottom: 24px !important;
}

/* ── 7d. Admin form field bottom margin ── */
body.wp-admin .form-field {
    margin-bottom: 16px !important;
}


/* =====================================================
 *  §8  RESPONSIVE FIXES
 *  Ensures UI works well on small screens
 * ===================================================== */

@media (max-width: 768px) {
    /* ── 8a. Auth card padding ── */
    .ttc-auth-card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    /* ── 8b. Grid-2 stacks on mobile ── */
    .ttc-auth-container .ttc-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── 8c. Role grid 1 column on very small ── */
    .ttc-auth-container .role-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ── 8d. Modal responsiveness ── */
    div[style*="z-index: 10000"] > div,
    div[style*="z-index:10000"] > div {
        max-width: 95vw !important;
        padding: 16px !important;
    }

    /* ── 8e. Admin inputs full width ── */
    body.wp-admin input[type="text"],
    body.wp-admin textarea {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .ttc-auth-card {
        padding: 20px 16px !important;
        margin: 10px !important;
    }

    .ttc-auth-container .role-grid {
        grid-template-columns: 1fr !important;
    }

    .ttc-auth-container .role-card:last-child {
        grid-column: span 1 !important;
    }
}


/* =====================================================
 *  §9  DARK MODE ADMIN COMPATIBILITY
 *  Handles WordPress admin dark mode plugins gracefully
 * ===================================================== */

@media (prefers-color-scheme: dark) {
    body.wp-admin input[type="text"],
    body.wp-admin input[type="email"],
    body.wp-admin input[type="password"],
    body.wp-admin input[type="number"],
    body.wp-admin input[type="url"],
    body.wp-admin input[type="tel"],
    body.wp-admin input[type="search"],
    body.wp-admin textarea,
    body.wp-admin select {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
        border-color: #475569 !important;
    }

    body.wp-admin input:focus,
    body.wp-admin textarea:focus,
    body.wp-admin select:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    }

    body.wp-admin input::placeholder,
    body.wp-admin textarea::placeholder {
        color: #94a3b8 !important;
    }

    body.wp-admin .form-field label,
    body.wp-admin .form-wrap label {
        color: #e2e8f0 !important;
    }

    body.wp-admin .form-field p.description,
    body.wp-admin .form-wrap p.description {
        color: #94a3b8 !important;
    }

    body.wp-admin .wp-list-table th,
    body.wp-admin .wp-list-table td {
        color: #e2e8f0 !important;
    }
}


/* =====================================================
 *  §10  FONT INHERITANCE — Ensure WP Admin Theme Fonts
 * ===================================================== */

body.wp-admin input,
body.wp-admin textarea,
body.wp-admin select,
body.wp-admin button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}


/* =====================================================
 *  §11  VISUAL HIERARCHY IMPROVEMENTS
 *  Better structure for scanning and readability
 * ===================================================== */

/* ── 11a. Section titles in admin ── */
body.wp-admin h2,
body.wp-admin .wrap h1 {
    color: #1e293b !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* ── 11b. Inline form section headers (meta box dividers) ── */
#ttc_meta_box div[style*="font-weight:600"],
#ttc_meta_box div[style*="font-weight: 600"] {
    color: #0f172a !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}

/* ── 11c. Checkbox and radio visibility ── */
body.wp-admin input[type="checkbox"],
body.wp-admin input[type="radio"],
.ttc-auth-container input[type="checkbox"],
.ttc-auth-container input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0073aa !important;
    cursor: pointer !important;
}

.ttc-auth-container input[type="checkbox"] {
    accent-color: #2563eb !important;
}

/* ── 11d. Table row striping for readability ── */
body.wp-admin .wp-list-table .alternate td {
    background-color: #f8fafc !important;
}

@media (prefers-color-scheme: dark) {
    body.wp-admin .wp-list-table .alternate td {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }
}


/* =====================================================
 *  §12  COURSE PURCHASE & REGISTRATION PAGES
 *  Fixes for other frontend templates with form inputs
 * ===================================================== */

/* ── 12a. Course purchase page inputs ── */
.ttc-purchase-form input,
.ttc-purchase-form select,
.ttc-purchase-form textarea {
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ttc-purchase-form input:focus,
.ttc-purchase-form select:focus,
.ttc-purchase-form textarea:focus {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12) !important;
    outline: none !important;
}

/* ── 12b. Onboarding page inputs ── */
.ttc-onboarding input,
.ttc-onboarding select,
.ttc-onboarding textarea {
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ttc-onboarding input:focus,
.ttc-onboarding select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}


/* =====================================================
 *  §13  EXAM PLAYER & MOCK TEST PAGE FIXES
 * ===================================================== */

/* ── 13a. Exam player inputs ── */
.ttc-exam-container input,
.ttc-exam-container textarea {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f1f5f9 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
}

.ttc-exam-container input:focus,
.ttc-exam-container textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}


/* =====================================================
 *  §14  SCROLLBAR STYLING (consistent across contexts)
 * ===================================================== */

/* Admin scrollbar */
body.wp-admin ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.wp-admin ::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

body.wp-admin ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

body.wp-admin ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =====================================================
 *  §15  ACCESSIBILITY — Skip to Content & Focus
 * ===================================================== */

/* ── 15a. Skip link ── */
.screen-reader-shortcut:focus {
    z-index: 100000 !important;
    background: #0073aa !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ── 15b. Reduced motion — ensure animations don't distract ── */
@media (prefers-reduced-motion: reduce) {
    .ttc-premium-card:hover,
    .ttc-stat-premium:hover,
    .ttc-btn-wow:hover,
    .ttc-student-profile:hover {
        transform: none !important;
    }
}