/**
 * Mobile Text Readability Optimizations
 * Ensures all text is clear, readable, and not cut off on mobile devices
 * 
 * Breakpoints:
 * - 768px: Mobile & small tablets
 * - 480px: Small phones
 * - 320px: Very small phones
 */

/* ============================================
   GLOBAL TEXT READABILITY - PREVENT CUT-OFF
   ============================================ */

@media (max-width: 768px) {
    /* Force text wrapping for all elements */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
    }
    
    /* Prevent text cut-off - allow wrapping instead of ellipsis */
    p, span, div, h1, h2, h3, h4, h5, h6, 
    .text, .content, .description, .title, 
    .card-title, .card-text, .btn, .nav-link,
    label, .form-label, .alert, .badge {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
    }
    
    /* Override white-space: nowrap on mobile - allow wrapping */
    .btn:not(.btn-icon-only):not(.navbar-toggler),
    .nav-link:not(.dropdown-toggle),
    .card-title,
    .course-title,
    .post-title,
    .news-title,
    label,
    .form-label,
    .badge:not(.filter-chip):not(.tab-btn):not(.tab-pill):not(.course-level-chip),
    .tag,
    .meta-tag {
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }
    
    /* Ensure proper line heights for readability */
    body, p, .text, .content {
        line-height: 1.6 !important;
        font-size: 1rem !important;
    }
    
    /* Headings with proper spacing */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.875rem !important;
        word-wrap: break-word !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
    }
    
    h5 {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
        word-wrap: break-word !important;
    }
    
    h6 {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   BUTTONS - READABLE TEXT, NO CUT-OFF
   ============================================ */

@media (max-width: 768px) {
    /* Buttons - allow text wrapping */
    .btn,
    button:not(.btn-icon-only):not(.navbar-toggler),
    input[type="button"],
    input[type="submit"],
    a.btn {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-overflow: clip !important;
        overflow: visible !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
        font-size: 1rem !important;
        text-align: center !important;
    }
    
    /* Homepage buttons - keep nowrap for proper display */
    .home-page .btn-primary-home,
    .home-page .btn-secondary-home,
    .home-page .btn-white,
    .home-page .btn-outline-white {
        white-space: nowrap !important;
    }
    
    .home-page .btn-primary-home .btn-text,
    .home-page .btn-secondary-home .btn-text,
    .home-page .btn-white .btn-text,
    .home-page .btn-outline-white .btn-text {
        white-space: nowrap !important;
    }
    
    /* Small buttons - still readable */
    .btn-sm,
    .btn-group-sm .btn {
        font-size: 0.9375rem !important;
        padding: 0.625rem 0.875rem !important;
        min-height: 40px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    
    /* Large buttons */
    .btn-lg {
        font-size: 1.125rem !important;
        padding: 1rem 1.5rem !important;
        min-height: 52px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    
    /* Icon-only buttons keep nowrap */
    .btn-icon-only,
    .navbar-toggler {
        white-space: nowrap !important;
    }
}

/* ============================================
   CARDS - READABLE CONTENT
   ============================================ */

@media (max-width: 768px) {
    /* Card titles - wrap instead of ellipsis */
    .card-title,
    .card-header h5,
    .card-header h4,
    .card-header h3,
    .course-title,
    .post-title,
    .news-title {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-overflow: clip !important;
        overflow: visible !important;
        line-height: 1.4 !important;
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Card text - readable */
    .card-text,
    .card-body p,
    .card-body .text,
    .course-description,
    .post-content,
    .news-summary {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: 1rem !important;
    }
    
    /* Card meta information */
    .card-meta,
    .post-meta,
    .course-meta {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }
    
    /* Meta tags - wrap if needed */
    .meta-tag,
    .badge,
    .tag {
        white-space: normal !important;
        word-wrap: break-word !important;
        display: inline-block !important;
        max-width: 100% !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}

/* ============================================
   NAVIGATION - READABLE LINKS
   ============================================ */

@media (max-width: 768px) {
    /* Navbar brand - wrap if needed */
    .navbar-brand {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 70% !important;
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    /* Nav links - wrap text and prevent letter cut-off */
    .nav-link:not(.dropdown-toggle),
    .navbar-nav .nav-link {
        white-space: normal !important;
        word-wrap: break-word !important;
        text-overflow: clip !important;
        overflow: visible !important;
        padding: 0.75rem 1.2rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        letter-spacing: 0.01em !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Dropdown items */
    .dropdown-item {
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        min-height: 44px !important;
    }
    
    /* Breadcrumbs */
    .breadcrumb,
    .breadcrumb-item {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }
    
    .breadcrumb-item a {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   FORMS - READABLE LABELS AND INPUTS
   ============================================ */

@media (max-width: 768px) {
    /* Form labels - clear and readable */
    label,
    .form-label,
    .form-check-label {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        font-weight: 500 !important;
    }
    
    /* Form help text */
    .form-text,
    .form-help,
    .help-text {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        margin-top: 0.25rem !important;
    }
    
    /* Form errors */
    .invalid-feedback,
    .form-error {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Input placeholders */
    ::placeholder,
    ::-webkit-input-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   TABLES - READABLE CELL CONTENT
   ============================================ */

@media (max-width: 768px) {
    /* Table cells - wrap text */
    table td,
    table th,
    .table td,
    .table th {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Table headers */
    table thead th,
    .table thead th {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        font-weight: 600 !important;
    }
}

/* ============================================
   ALERTS AND NOTIFICATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Alert messages - readable */
    .alert,
    .alert-dismissible {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .alert-heading {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        word-wrap: break-word !important;
    }
    
    /* Toast notifications */
    .toast,
    .toast-body {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        padding: 0.75rem !important;
    }
}

/* ============================================
   MODALS - READABLE CONTENT
   ============================================ */

@media (max-width: 768px) {
    /* Modal titles */
    .modal-title,
    .modal-header h5,
    .modal-header h4 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Modal body text */
    .modal-body {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
    }
    
    /* Modal buttons */
    .modal-footer .btn {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   NEWSFEED - READABLE POSTS
   ============================================ */

@media (max-width: 768px) {
    /* Post titles */
    .post-title,
    .post-header .post-author,
    .post-info .post-author {
        white-space: normal !important;
        word-wrap: break-word !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Post content */
    .post-content,
    .post-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Post actions */
    .post-actions .action-btn {
        white-space: normal !important;
        word-wrap: break-word !important;
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Comments */
    .comment-content,
    .comment-text {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   DASHBOARD - READABLE STATS AND CARDS
   ============================================ */

@media (max-width: 768px) {
    /* Stat card labels */
    .stat-label,
    .stat-card .stat-label {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Stat values */
    .stat-value,
    .stat-card .stat-value {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }
    
    /* Action card titles */
    .action-title,
    .action-card .action-title {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Action card descriptions */
    .action-description,
    .action-card .action-description {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   SMALL PHONES (480px and below)
   ============================================ */

@media (max-width: 480px) {
    /* Even more readable on small phones */
    body, p, .text {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    /* Buttons still readable */
    .btn {
        font-size: 0.9375rem !important;
        padding: 0.625rem 0.875rem !important;
        min-height: 44px !important;
    }
    
    /* Card titles */
    .card-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Card text */
    .card-text {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   VERY SMALL PHONES (320px)
   ============================================ */

@media (max-width: 320px) {
    /* Minimum readable sizes */
    body, p, .text {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
    
    h1 {
        font-size: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.125rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    .btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .card-title {
        font-size: 0.9375rem !important;
    }
    
    .card-text {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   LONG WORDS AND URLS - PREVENT OVERFLOW
   ============================================ */

@media (max-width: 768px) {
    /* Break long words and URLs */
    a,
    .link,
    .url {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Code blocks and pre-formatted text */
    code,
    pre {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Email addresses */
    a[href^="mailto:"] {
        word-break: break-all !important;
    }
}

/* ============================================
   FOOTER - READABLE LINKS
   ============================================ */

@media (max-width: 768px) {
    footer,
    .footer {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
    
    footer a,
    .footer a {
        word-wrap: break-word !important;
        white-space: normal !important;
        display: inline-block !important;
        margin-bottom: 0.5rem !important;
    }
    
    footer h5,
    footer h6,
    .footer h5,
    .footer h6 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   UTILITY - FORCE READABLE TEXT
   ============================================ */

@media (max-width: 768px) {
    /* Utility class to force readable text */
    .readable-text,
    .mobile-readable {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        line-height: 1.6 !important;
    }
    
    /* Prevent text cut-off utility */
    .no-text-cut {
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        word-wrap: break-word !important;
    }
}