/* 
 * Geeks Theme Patch for Single Lesson Content Layout
 * Fixes excessive card layout on paragraphs and improves typography.
 */

/* =========================================
   1. Reset Layout & Structure
   ========================================= */

/* Remove card styling from individual paragraphs */
.card-content p {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    background-color: transparent !important;
    display: block !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Apply card styling to the main content container instead */
.card-content {
    background-color: #fff;
    border: 1px solid #eae7f5;
    border-radius: 0.5rem;
    padding: 2rem !important; /* Unified padding */
    box-shadow: 0 1px 3px rgba(3, 0, 71, 0.09);
    margin-bottom: 2rem !important;
    overflow-wrap: break-word; /* Prevent horizontal overflow */
}

/* Ensure images don't overflow */
.card-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

/* =========================================
   2. Typography & Readability
   ========================================= */

/* Increase base font size for better readability on desktop */
.card-content {
    font-size: 1rem; /* 16px base */
    line-height: 1.8;
    color: #18113C; /* Darker text for better contrast */
}

/* Headings Hierarchy */
.card-content h1, 
.card-content h2, 
.card-content h3, 
.card-content h4, 
.card-content h5, 
.card-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #18113C;
}

.card-content h1 { font-size: 2.25rem; }
.card-content h2 { font-size: 1.75rem; border-bottom: 1px solid #eae7f5; padding-bottom: 0.5rem; }
.card-content h3 { font-size: 1.5rem; }
.card-content h4 { font-size: 1.25rem; }

/* Lists */
.card-content ul, 
.card-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.card-content li {
    margin-bottom: 0.5rem;
}

/* Links */
.card-content a {
    color: #754FFE;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.card-content a:hover {
    color: #5e3fcb;
    border-bottom-color: #5e3fcb;
}

/* =========================================
   3. Mobile Responsiveness
   ========================================= */

@media (max-width: 768px) {
    .card-content {
        padding: 1.25rem !important; /* Smaller padding on mobile */
    }

    .card-content h1 { font-size: 1.75rem; }
    .card-content h2 { font-size: 1.5rem; }
    .card-content h3 { font-size: 1.25rem; }
    
    /* Ensure no horizontal scroll */
    .tutor-course-single-content-wrapper {
        overflow-x: hidden;
    }
}

/* =========================================
   4. Specific Content Fixes ("Green Box Area")
   ========================================= */

/* If the user wants specific sections to look like cards, they should use a class like .highlight-box */
/* Here we provide a utility class if they want to use it manually in HTML */
.highlight-box {
    background-color: #f5f4f8;
    border: 1px solid #eae7f5;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Code blocks */
.card-content pre, 
.card-content code {
    background-color: #f5f4f8;
    color: #d63384;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    border-radius: 0.25rem;
}

.card-content pre {
    padding: 1rem;
    overflow-x: auto;
}