/* appearance.css */

body {
    /* Slightly brighter background and text */
    background-color: #181818;
    color: #f0f0f0;
}

header {
    /* More transparency */
    background-color: rgba(20, 20, 20, 0.9);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

header h1,
header nav a,
#theme-toggle {
    color: #fff;
}

#hero {
    /* Higher contrast for text */
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.4); /* Tint to ensure text is readable */
    /* Ken Burns effect */
    animation: kenBurns 15s linear infinite, fadeIn 2s ease-out;
}

#hero h2,
#hero p {
    color: #fff;
}

#about::before,
#services::before,
#home-studio::before,
#testimonials::before,
#contact::before {
    /* Slightly lighter overlay */
    background-color: rgba(34, 34, 34, 0.8);
}

#about h2,
#services h2,
#home-studio h2,
#testimonials h2,
#contact h2 {
    /* Slightly brighter */
    color: #ffe066;
}

body.light-mode {
    background-color: #f0f0f0; /* White background for light mode */
    color: #333; /* Dark text for light mode */
}

body.light-mode header {
    background-color: rgba(240, 240, 240, 0.9); /* Lighter header background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Softer shadow */
}

body.light-mode header h1,
body.light-mode header nav a,
body.light-mode #theme-toggle {
    color: #333;
}

body.light-mode #hero {
    background-blend-mode: lighten; /* Adjust blend mode for light mode */
    background-color: rgba(255, 255, 255, 0.2); /* Very light tint */
}

body.light-mode #hero h2,
body.light-mode #hero p {
    color: #333;
}

body.light-mode #about::before,
body.light-mode #services::before,
body.light-mode #home-studio::before,
body.light-mode #testimonials::before,
body.light-mode #contact::before {
    background-color: rgba(245, 245, 245, 0.7); /* Very light section overlay */
}

body.light-mode #about h2,
body.light-mode #services h2,
body.light-mode #home-studio h2,
body.light-mode #testimonials h2,
body.light-mode #contact h2 {
    color: #c6a700; /* Slightly darker gold for headings in light mode */
}

body.light-mode .service-item,
body.light-mode .testimonial-item,
body.light-mode #testimonial-submission,
body.light-mode #contact-form,
body.light-mode .home-studio-content,
body.light-mode .about-item,
body.light-mode .demos-container {
    background-color: rgba(250, 250, 250, 0.85); /* Lighter boxes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer box shadow */
}

body.light-mode .service-item:hover,
body.light-mode .service-item:focus,
body.light-mode .service-item.active,
body.light-mode .testimonial-item:hover,
body.light-mode .about-item:hover {
    background-color: rgba(230, 230, 230, 0.9); /* Slightly darker hover state in light mode */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly stronger hover shadow */
}

body.light-mode .service-item h3,
body.light-mode .testimonial-author,
body.light-mode #testimonial-submission h3,
body.light-mode #contact h2,
body.light-mode #home-studio h2,
body.light-mode #about h2,
body.light-mode .demos-container h3 {
    color: #3a3a3a; /* Darker text in light mode boxes */
}

body.light-mode .service-item p,
body.light-mode .testimonial-quote,
body.light-mode #testimonial-submission label,
body.light-mode #contact p,
body.light-mode .home-studio-content p,
body.light-mode .about-text p,
body.light-mode .demos-grid p {
    color: #555; /* Slightly darker paragraph text in light mode */
}

body.light-mode #testimonial-submission input[type="text"],
body.light-mode #testimonial-submission textarea,
body.light-mode .form-group input,
body.light-mode .form-group textarea {
    background-color: #fff; /* White input fields */
    color: #555; /* Dark input text */
    border: 1px solid #ccc; /* Light border */
}

body.light-mode #testimonial-submission input[type="text"]:focus,
body.light-mode #testimonial-submission textarea:focus,
body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
    border-color: #c6a700; /* Gold focus border */
    box-shadow: 0 0 5px rgba(198, 167, 0, 0.3); /* Gold focus shadow */
}

body.light-mode .cta-button,
body.light-mode #testimonial-submission button,
body.light-mode #contact-form button,
body.light-mode #theme-toggle {
    background-color: #fdd835; /* Gold buttons */
    color: #222; /* Dark button text */
}

body.light-mode .cta-button:hover,
body.light-mode #testimonial-submission button:hover,
body.light-mode #contact-form button:hover,
body.light-mode #theme-toggle:hover {
    background-color: #c6a700; /* Darker gold hover state */
    color: #fff; /* White hover text */
}

body.light-mode footer p {
    color: #777; /* Darker footer text */
}

body.light-mode .social-links a {
    color: #777; /* Dark social link icons */
}

body.light-mode .social-links a:hover {
    color: #c6a700; /* Gold social link hover color */
}