/* JavaScript Tutorials - Concept Section Styling */

/* First concept section - Functions are First-Class Citizens */
#concept-js-fundamentals .code-card .card-body {
    padding: 1.5rem 2rem !important;
    color: #333 !important;
}

#concept-js-fundamentals .code-snippet {
    min-height: unset !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    margin-bottom: 0.2rem !important;
    font-size: 1rem;
}

/* Second concept section - Scoping - Comprehensive styling */
#concept-js-scoping {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    --bs-link-color: #0d6efd !important;
    --bs-link-hover-color: #0b5ed7 !important;
}

#concept-js-scoping * {
    visibility: visible !important;
    opacity: 1 !important;
}

#concept-js-scoping table {
    display: table !important;
    width: 100% !important;
}

#concept-js-scoping table thead {
    display: table-header-group !important;
}

#concept-js-scoping table tbody {
    display: table-row-group !important;
}

#concept-js-scoping table tr {
    display: table-row !important;
}

#concept-js-scoping table th,
#concept-js-scoping table td {
    display: table-cell !important;
    padding: 0.75rem !important;
}

#concept-js-scoping p,
#concept-js-scoping h3,
#concept-js-scoping h4,
#concept-js-scoping h5,
#concept-js-scoping h6,
#concept-js-scoping li,
#concept-js-scoping strong,
#concept-js-scoping .fw-bold,
#concept-js-scoping td,
#concept-js-scoping th {
    color: #000 !important;
}

#concept-js-scoping .text-muted {
    color: #6c757d !important;
}

#concept-js-scoping .code-snippet,
#concept-js-scoping .code-snippet code {
    color: #f3f4f6 !important;
    background: #1f2937 !important;
}

#concept-js-scoping .code-card .card-body {
    padding: 1.5rem 2rem !important;
    color: #333 !important;
}

#concept-js-scoping .code-snippet {
    min-height: unset !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    margin-bottom: 0.2rem !important;
    font-size: 1rem;
}

#concept-js-scoping .alert {
    color: #000 !important;
}

#concept-js-scoping .pull-quote {
    color: #000 !important;
}

/* Third concept section - Objects, Constructors, Prototypes */
#concept-js-objects {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

#concept-js-objects * {
    visibility: visible !important;
    opacity: 1 !important;
}

#concept-js-objects table {
    display: table !important;
    width: 100% !important;
}

#concept-js-objects table thead {
    display: table-header-group !important;
}

#concept-js-objects table tbody {
    display: table-row-group !important;
}

#concept-js-objects table tr {
    display: table-row !important;
}

#concept-js-objects table th,
#concept-js-objects table td {
    display: table-cell !important;
    padding: 0.75rem !important;
}

#concept-js-objects p,
#concept-js-objects h3,
#concept-js-objects h4,
#concept-js-objects h5,
#concept-js-objects h6,
#concept-js-objects li,
#concept-js-objects strong,
#concept-js-objects .fw-bold,
#concept-js-objects td,
#concept-js-objects th {
    color: #000 !important;
}

#concept-js-objects .text-muted {
    color: #6c757d !important;
}

#concept-js-objects .code-snippet,
#concept-js-objects .code-snippet code {
    color: #f3f4f6 !important;
    background: #1f2937 !important;
}

#concept-js-objects .code-card .card-body {
    padding: 1.5rem 2rem !important;
    color: #333 !important;
}

#concept-js-objects .code-snippet {
    min-height: unset !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    margin-bottom: 0.2rem !important;
    font-size: 1rem;
}

#concept-js-objects .alert {
    color: #000 !important;
}

#concept-js-objects .pull-quote {
    color: #000 !important;
}

/* Shared concept section styling */
.concept-section-card {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.concept-section-card .card-body {
    background-color: #fff;
}

.concept-section-code-block {
    background-color: #1f2937;
    color: #f3f4f6;
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 0;
}