/* Custom styles for light/dark mode visibility */

/* Dark mode (default) */
:root {
    --background-color: #212529;
    --surface-color: #2a2f34;
    --text-color: #ffffff;
    --heading-color: #ffffff;
    --default-color: #ffffff;
    --nav-bg: rgba(33, 37, 41, 0.95);
    --nav-text: #ffffff;
}

[data-theme="light"] {
    --background-color: #ffffff;
    --surface-color: #f8f9fa;
    --text-color: #212529;
    --heading-color: #2b2b2b;
    --default-color: #2b2b2b;
    --nav-bg: rgba(33, 37, 41, 0.95);
    --nav-text: #ffffff;
    --section-bg: #f8f9fa;
    --card-bg: #ffffff;
    --card-text: #212529;
    --border-color: #dee2e6;
    --hover-color: #0d6efd;
}

/* Navbar styles - keep dark in both modes */
#header {
    background-color: var(--nav-bg) !important;
}

.navbar a,
.navbar .active,
.navbar .navbar-nav .nav-link {
    color: var(--nav-text) !important;
}

/* Light mode specific styles */
[data-theme="light"] .contact .contact-info-box,
[data-theme="light"] .about .about-content .feature-item,
[data-theme="light"] .services .service-card,
[data-theme="light"] .steps .step-info,
[data-theme="light"] .testimonials .testimonial-item,
[data-theme="light"] .portfolio .portfolio-entry,
[data-theme="light"] .team .team-member,
[data-theme="light"] .pricing .pricing-card,
[data-theme="light"] .faq .faq-container .faq-item {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Footer styles - keep dark in both modes */
footer,
.footer {
    background-color: #212529 !important;
    color: #ffffff !important;
}

footer *,
.footer *,
footer a,
.footer a,
footer h3,
.footer h3,
footer h4,
.footer h4,
footer p,
.footer p {
    color: #ffffff !important;
}

/* Text colors for sections in light mode */
[data-theme="light"] .section-title h2,
[data-theme="light"] .section-title p,
[data-theme="light"] .content h2,
[data-theme="light"] .content h3,
[data-theme="light"] .content p {
    color: var(--text-color) !important;
}

/* Keep navbar dark in light mode */
[data-theme="light"] #header {
    background-color: rgba(33, 37, 41, 0.95) !important;
}

[data-theme="light"] .navbar a,
[data-theme="light"] .navbar .active,
[data-theme="light"] .navbar .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* Footer styles for light mode */
[data-theme="light"] footer,
[data-theme="light"] .footer {
    background-color: #212529 !important;
}

[data-theme="light"] footer *,
[data-theme="light"] .footer *,
[data-theme="light"] footer a,
[data-theme="light"] .footer a,
[data-theme="light"] footer h3,
[data-theme="light"] .footer h3,
[data-theme="light"] footer h4,
[data-theme="light"] .footer h4,
[data-theme="light"] footer p,
[data-theme="light"] .footer p {
    color: #ffffff !important;
}

[data-theme="light"] .contact .contact-info-box,
[data-theme="light"] .about .about-content .feature-item,
[data-theme="light"] .services .service-card,
[data-theme="light"] .steps .step-info,
[data-theme="light"] .testimonials .testimonial-item,
[data-theme="light"] .portfolio .portfolio-entry,
[data-theme="light"] .team .team-member,
[data-theme="light"] .pricing .pricing-card,
[data-theme="light"] .faq .faq-container .faq-item {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

[data-theme="light"] .contact .contact-info-box p,
[data-theme="light"] .about .about-content .feature-item p,
[data-theme="light"] .steps .step-info p {
    color: var(--card-text) !important;
}

[data-theme="light"] .contact .contact-info-box h3,
[data-theme="light"] .about .about-content .feature-item h3,
[data-theme="light"] .steps .step-info h3 {
    color: var(--heading-color) !important;
}

[data-theme="light"] .about .about-content h2,
[data-theme="light"] .contact .contact-info-box .info-content h4,
[data-theme="light"] .services .service-card h3,
[data-theme="light"] .steps h3,
[data-theme="light"] .testimonials .testimonial-item h2,
[data-theme="light"] .portfolio .portfolio-entry .entry-title,
[data-theme="light"] .team .team-member .member-info h4,
[data-theme="light"] .pricing .plan-header h3,
[data-theme="light"] .faq .faq-title {
    color: var(--heading-color) !important;
}

[data-theme="light"] .about .about-content .feature-item i,
[data-theme="light"] .contact .contact-info-box .icon-box,
[data-theme="light"] .services .service-card .service-icon i,
[data-theme="light"] .steps .step-icon i {
    color: #e3a127 !important;
}

/* About Section */
#about .about-content,
#about .about-content h2,
#about .about-content p {
    background-color: #ffffff !important;
    color: #2b2b2b !important;
}

/* Steps/Services Section */
#steps .step-info,
#steps .step-info h3,
#steps .step-info p {
    background-color: #ffffff !important;
    color: #2b2b2b !important;
}

.steps .step-info {
    background-color: #ffffff !important;
}

.steps .step-info h3,
.steps .step-info p {
    color: #2b2b2b !important;
}

/* Contact Section */
.contact .contact-info-box {
    background-color: #ffffff !important;
}

.contact .contact-info-box .info-content h4,
.contact .contact-info-box .info-content p {
    color: #2b2b2b !important;
}

/* Fix general text visibility in light mode */
.section-title h2,
.section-title p,
.section-title div,
.section-title span {
    color: #2b2b2b !important;
}

/* Perbaiki jarak garis kuning di samping judul section pada light mode */
[data-theme="light"] .section-title h2::after {
    margin: 4px 4px !important;
}

/* Force light background on boxes */
.box,
.service-item,
.feature-item,
.contact-info-box,
.about-content,
.step-info {
    background-color: #ffffff !important;
    color: #2b2b2b !important;
}