/* CSS Variables for Color Scheme */
:root {
    --primary-color: #ff69b4; /* Hot Pink */
    --secondary-color: #ffb6c1; /* Light Pink */
    --background-color: #fff0f5; /* Lavender Blush */
    --text-color: #333;
    --light-text: #666;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Comic Neue', cursive;
}

[data-theme="dark"] {
    --primary-color: #ff1493; /* Deep Pink */
    --secondary-color: #ff69b4; /* Hot Pink */
    --background-color: #1e1e1e; /* Dark Background */
    --text-color: #f0f0f0; /* Light Text */
    --light-text: #ccc; /* Lighter Text */
}

/* Reset some basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: var(--font-body);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Layout: keep footer at bottom even before content finishes loading */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navigation Bar */
nav {
    background-color: var(--secondary-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Adjusts spacing between logo, nav-links, and theme toggle */
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

nav .logo {
    font-family: var(--font-heading);
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    margin-right: 20px; /* Add space between logo and nav-links */
}

nav .nav-links {
    list-style: none;
    display: flex;
    justify-content: center; /* Center the nav links */
    flex: none; /* do not flex-grow; we'll center absolutely */
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

nav .nav-links li {
    margin-left: 8px;
}

nav .nav-links a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 5px 5px;
    border-radius: 5px;
}

nav .nav-links a:hover,
.nav-links a.active {
    background-color: rgba(255, 255, 255, 0.2); /* Highlight the active link */
    color: var(--text-color);
    border-radius: 5px;
}

nav .theme-switch-wrapper {
    margin-left: auto; /* Push the theme toggle and hamburger to the far right */
    display: flex;
    align-items: center;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.theme-switch .slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.theme-switch input:checked + .slider {
    background-color: var(--primary-color);
}

.theme-switch input:checked + .slider::before {
    transform: translateX(26px);
}

/* Icons within the toggle */
.theme-switch .moon-icon,
.theme-switch .sun-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #fff;
    pointer-events: none; /* Prevent icons from blocking the toggle */
}

.theme-switch .moon-icon {
    left: 8px;
}

.theme-switch .sun-icon {
    right: 8px;
}

/* Reflect theme state immediately in the toggle visuals to avoid flicker on load */
[data-theme="dark"] .theme-switch .slider {
    background-color: var(--primary-color);
}

[data-theme="dark"] .theme-switch .slider::before {
    transform: translateX(26px);
}

/* While theme-init class is present (early init), disable toggle animations to prevent visible transition */
.theme-init .theme-switch .slider,
.theme-init .theme-switch .slider::before {
    transition: none !important;
}

/* Hamburger Menu */
nav .hamburger {
    display: none;
    font-size: 1.5em;
    color: #fff;
    cursor: pointer;
}

/* Header Section */
.hero {
    /* background-image is provided by JS via the --hero-bg custom property to avoid flashes */
    background-image: var(--hero-bg, none);
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    padding: 0 20px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 3em;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2em;
    max-width: 600px;
}

/* Featured Section */
.featured {
    padding: 40px 20px;
    text-align: center;
}

.featured h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-family: var(--font-heading);
}

.slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* For the slide container */
.slide {
    background-color: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    padding: 10px;
    min-width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* For dark mode */
[data-theme="dark"] .slide {
    background-color: #2e2e2e;
    border-color: var(--primary-color);
}

/* Hover effect for slide */
.slide:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Image inside the slide */
.slide img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

/* Reserve image space to avoid layout shifts when images load on navigation */
.slide {
    min-height: 220px; /* reserve vertical space for images and captions */
}

.slide img {
    height: auto;
    display: block;
    object-fit: cover;
}

/* Scale image on hover */
.slide:hover img {
    transform: scale(1.05);
}

.slide p {
    margin-top: 10px;
    color: var(--text-color);
}

.slide .character-name {
    font-weight: 600;
}

.slide .anime-title {
    font-size: 0.9em;
    color: var(--light-text);
}

/* About, Favorites & Contact Sections */
.about, .favorites, .contact {
    padding: 40px 20px;
    width: 100%;
    max-width: 1000px; /* allow wider content on large screens */
    margin: 0 auto;
    text-align: center;
}

.about h2, .favorites h2, .contact h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-family: var(--font-heading);
}

.about p, .favorites p, .contact p {
    margin-bottom: 15px;
    color: var(--text-color);
}

.favorites-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.favorite-item {
    background-color: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .favorite-item {
    background-color: #2e2e2e;
    border-color: var(--primary-color);
}

.favorite-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.favorite-item img {
    width: 100%;
    height: auto;
}

.favorite-item .info {
    padding: 10px;
}

.favorite-item .info h3 {
    margin-bottom: 5px;
    color: var(--primary-color);
    font-family: var(--font-heading);
}

.favorite-item .info p {
    font-size: 0.9em;
    color: var(--light-text);
}

/* Contact Form */
.contact form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .contact form {
    background-color: #3e3e3e;
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.2);
}

.contact label {
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
}

.contact input, .contact textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 1em;
    background-color: #f9f9f9;
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .contact input,
[data-theme="dark"] .contact textarea {
    background-color: #4e4e4e;
    color: var(--text-color);
    border: 1px solid #555;
}

.contact input:focus, .contact textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

.contact button {
    padding: 10px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.contact button:hover {
    background-color: #ff1493;
}

/* Footer */
footer {
    background-color: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    /* allow footer to be pushed to page bottom by flexible content */
    margin-top: auto;
    position: relative;
    transition: background-color 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav .nav-links {
        position: fixed;
        /* anchor from right edge - clear any left centering used on desktop */
        left: auto;
        right: 0;
        top: 0;
        height: 100vh;
        background-color: var(--secondary-color);
        flex-direction: column;
        align-items: center;
        width: 220px; /* slightly wider for touch targets */
        box-sizing: border-box;
        transform: translateX(100%); /* slide out of view to the right */
        transition: transform 0.25s ease-in-out;
        padding-top: 60px; /* leave space for top controls */
    }

    nav .nav-links li {
        margin: 50px 0;
    }

    nav .nav-links a {
        font-size: 1.2em;
    }

    nav .hamburger {
        display: block;
    }

    /* Keep the hamburger visible and vertically centered within the sticky nav */
    nav .hamburger {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        padding: 8px 10px;
        background: rgba(0,0,0,0.15);
        border-radius: 8px;
        z-index: 1200; /* above the sliding nav */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure the sliding nav appears below the hamburger */
    nav .nav-links {
        z-index: 1100;
    }

    /* Fix toggle placement: position it fixed to the left of the hamburger so they never overlap */
    nav .theme-switch-wrapper {
        position: absolute;
        top: 50%;
        right: 56px; /* leaves room for the hamburger at right:12px plus padding */
        transform: translateY(-50%);
        z-index: 1102; /* above the hamburger */
        margin-left: 0;
    }

    nav .nav-links.active {
        transform: translateX(0);
    }

    .hero {
        height: 300px;
    }

    .hero h1 {
        font-size: 2em;
    }

    .featured .slider {
        flex-direction: column;
        align-items: center;
    }

    .gallery-container, .favorites-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .hero {
        height: 250px;
    }

    .hero h1 {
        font-size: 1.5em;
    }

    .featured .slide {
        min-width: 250px;
    }

    .gallery-container, .favorites-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    /* Extra offset for very narrow screens */
    nav .theme-switch-wrapper {
        right: 80px;
    }
}

/* Smooth Transitions for Theme Change */
body, nav, .hero, .featured, .gallery, .about, .favorites, .contact, footer, .slide, .gallery-item, .favorite-item, .contact form {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Review section styling */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.review-item {
    text-align: center;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.review-thumbnail {
    width: 100%;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.reviews {
    padding: 40px 20px;
    text-align: center;
}

.reviews h1 {
    /*margin-bottom: 20px;*/
    color: var(--primary-color);
    font-family: var(--font-heading);
}

.reviews h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-family: var(--font-heading);
}

.review-item h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.review-item a {
    text-decoration: none;
    color: var(--text-color);
}

.review-meta {
    margin-top: 20px;
    font-size: 1em;
    color: var(--light-text);
}

.review-author,
.review-date {
    margin-bottom: 10px;
    color: var(--text-color); /* Use site theme color */
    font-size: 1em;
    font-style: italic; /* Optional styling */
}


/* Filter Controls */
.filter-controls {
    display: flex;
    justify-content: center; /* Center the filter controls */
    align-items: center;
    gap: 15px; /* Add spacing between elements */
    margin-bottom: 20px;
    padding: 20px;
}

.filter-controls input, .filter-controls select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    background-color: #fff; /* Light mode background */
    color: #333; /* Light mode text */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Dark Mode Styles */
[data-theme="dark"] .filter-controls input,
[data-theme="dark"] .filter-controls select {
    background-color: #333; /* Dark mode background */
    color: #f0f0f0; /* Dark mode text */
    border: 1px solid #555; /* Dark mode border */
}

.filter-controls input::placeholder {
    color: #999; /* Placeholder text color in light mode */
}

[data-theme="dark"] .filter-controls input::placeholder {
    color: #ccc; /* Placeholder text color in dark mode */
}

/* Responsive Styling for Small Screens */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column; /* Stack the filters vertically on smaller screens */
        gap: 10px; /* Adjust spacing */
        padding: 10px;
    }

    .filter-controls input, .filter-controls select {
        width: 100%; /* Full width for mobile */
        max-width: 300px; /* Limit the width on mobile */
    }
}

#reviewsContainer .review-item {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    gap: 10px;
}

#reviewsContainer img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

/* Review Layout */
.review-layout {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for small screens */
    gap: 20px; /* Space between sections */
}

.left-section {
    flex: 1; /* Take up one portion of the available space */
    max-width: 300px; /* Limit width for character and score section */
    margin-left: 20px; /* Add 20px of margin to the left */
}

.right-section {
    flex: 2; /* Take up more space than the left section */
    display: flex;
    flex-direction: column; /* Stack gallery and review text */
    gap: 20px;
    margin-right: 20px; /* Add 20px of margin to the right */
}

/* Character Info Section Styling */
.character-info {
    text-align: center;
    margin: 20px 0; /* Adjust spacing around the section */
}

.character-info img {
    width: 300px;  /* Set width to 300px */
    height: 300px; /* Set height to 300px */
    object-fit: cover; /* Ensure the image maintains its aspect ratio */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.character-info img:hover {
    transform: scale(1.05); /* Add a subtle hover effect */
}

.character-info .character-name {
    font-weight: 600;
    margin-top: 10px;
    font-size: 1.2em; /* Adjust size to match other text */
    color: var(--primary-color); /* Use the primary color for consistency */
}

.character-info .anime-title {
    font-size: 1em;
    color: var(--light-text); /* Use the light-text color for secondary info */
}

/* Overall Score */
.overall-score {
    text-align: center;
    margin: 20px 0;
    font-size: 1.5em;
    color: var(--primary-color);
}

.score-value {
    font-weight: bold;
}

/* Scoring Criteria */
.scoring-criteria {
    display: flex;
    flex-direction: column; /* Stack meters vertically */
    gap: 10px;
    text-align: center;
}

.criteria label {
    font-size: 1.3em;
    margin-bottom: 5px;
}

/* Style for the meter elements */
meter {
    width: 300px;
    height: 30px;
    border-radius: 5px;
}

meter::-webkit-meter-optimum-value {
    background: #4caf50; /* Color for the filled part (Cute) */
}

meter::-webkit-meter-suboptimum-value {
    background: #ff9800; /* Color for the middle part (Funny) */
}

meter::-webkit-meter-even-odd {
    background: #ff0000; /* Color for the empty part */
}

/* Image Gallery */
.image-gallery {
    text-align: center;
    margin: 20px 0;
}

.gallery-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.gallery-image {
    max-width: 200px;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.1);
}

/* Review Text Section */
.review-text {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    text-align: left;
}
.review-text p {
    font-size: 1.1em; /* Adjust font size for paragraphs */
    margin-bottom: 15px; /* Add space between paragraphs */
    color: var(--text-color); /* Ensure text is consistent with site theme */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .review-layout {
        flex-direction: column; /* Stack sections vertically on small screens */
        gap: 10px; /* Reduce gap for better fit */
    }

    .left-section, .right-section {
        max-width: 100%; /* Ensure sections use full width */
        margin: 0; /* Remove side margins for full width */
        padding: 0 20px; /* Add padding instead */
    }

    /* Adjust character info and scoring */
    .character-info {
        text-align: center;
        margin: 10px 0; /* Adjust spacing for mobile */
    }

    .scoring-criteria {
        display: flex;
        flex-direction: column; /* Stack criteria vertically */
        align-items: center; /* Center items */
        gap: 10px; /* Space between criteria */
    }

    .scoring-criteria .criteria {
        width: 100%; /* Ensure criteria take full width */
        text-align: center; /* Center text */
    }

    meter {
        width: 100%; /* Make meters responsive */
    }

    .gallery-container {
        flex-direction: column; /* Stack gallery images vertically on small screens */
        align-items: center; /* Center images */
        width: 100%; /* Ensure the container takes full width */
    }

    .gallery-image {
        max-width: 90%; /* Adjust size for smaller screens */
        margin-bottom: 10px; /* Add space between stacked images */
    }
}

/* Dark Mode Styles */
[data-theme="dark"] .review-text {
    background-color: rgba(30, 30, 30, 0.9);
    color: #f0f0f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .review-text h3 {
    color: #ffcc00;
}

[data-theme="dark"] .review-text p {
    color: #d1d1d1;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Close button for modal */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

/* Prev/Next buttons for modal gallery */
.modal-prev, .modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 10px 14px;
    font-size: 28px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1001;
}

.modal-prev { left: 20px; }
.modal-next { right: 20px; }

@media (max-width: 480px) {
    .modal-prev, .modal-next {
        padding: 8px 10px;
        font-size: 22px;
        left: 10px; right: 10px;
    }
    .modal-prev { left: 10px; }
    .modal-next { right: 10px; }
}

/* Responsive design for modal */
@media (max-width: 768px) {
    .modal-content {
        max-width: 95%;
        max-height: 80%;
    }

    .close {
        top: 5px;
        right: 5px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        max-width: 100%;
        max-height: 75%;
    }

    .close {
        top: 3px;
        right: 3px;
        font-size: 20px;
    }
}

/* Staff Members Section */
.staff-members {
    padding: 40px 20px;
    max-width: 800px; /* Limit width for better presentation */
    margin: 0 auto; /* Center the section */
    text-align: center; /* Center the heading */
}

.staff-member {
    display: flex; /* Use flexbox for horizontal layout */
    align-items: center; /* Center the image and text vertically */
    gap: 20px; /* Space between image and text */
    margin-bottom: 20px; /* Space between staff member entries */
}

.staff-image {
    width: 150px; /* Set fixed width for images */
    height: 150px; /* Set fixed height for images */
    border-radius: 50%; /* Make images circular */
    object-fit: cover; /* Ensure image covers the area */
}

.staff-info {
    text-align: left; /* Align text to the left */
}

.staff-name {
    font-weight: 600; /* Make name bold */
    font-size: 1.2em; /* Slightly larger font size for names */
}

.staff-title {
    color: var(--light-text); /* Use lighter color for titles */
    margin: 5px 0; /* Add margin for spacing */
}

.staff-blurb {
    color: var(--text-color); /* Ensure text is consistent with site theme */
    font-size: 0.9em; /* Smaller font size for blurbs */
}

@media (max-width: 768px) {
    .staff-member {
        flex-direction: column; /* Stack image above text */
        align-items: center; /* Center align for smaller screens */
    }

    .staff-image {
        width: 150px; /* Adjust size for smaller screens */
        height: 150px; /* Adjust size for smaller screens */
    }
}