/* Base styles for the body and smooth scrolling */
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}
body {
    background-color: #0D121C; /* Very dark blue-black */
    font-family: 'Inter', sans-serif; /* Default font for English text */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #E2E8F0; /* Light gray text for contrast */
}

/* สไตล์สำหรับ div ที่เป็น background highlight */
/* This div will hold the radial gradient and be fixed below the header */
.highlight-overlay {
    position: fixed; /* Fix this div to the viewport */
    top: 5rem; /* Start below the header (assuming header height is 5rem or 80px) */
    left: 0;
    right: 0;
    bottom: 0;
    /* Radial gradient for the bottom glow effect, layered on top of the base color */
    background-image: radial-gradient(ellipse at 50% 50%, rgba(1, 76, 252, 0.638) 0%, transparent 70%);
    background-position: center center; /* Center the gradient within this div */
    background-repeat: no-repeat; /* Prevent the gradient from repeating */
    z-index: -1; /* Place this div behind other content */
}

/* Apply Sarabun font to specific Thai content sections */
main h1,
main p,
#course-schedule-list,
#course-schedule-list *,
.daily-nav a,
#mobile-menu a { /* Also apply Sarabun to daily navigation links and mobile menu links */
    font-family: 'Sarabun', sans-serif;
}

/* Padding to prevent content from being hidden by the fixed header */
/* Adjusted to match the top value of .highlight-overlay */
body > div.container.mx-auto {
    padding-top: 5rem; /* Adjust based on header height */
}

/* --- Animation Styles --- */
/* Hidden state for elements before they appear */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Visible state for elements after they appear */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay for sequential animations */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }
.animate-on-scroll.delay-7 { transition-delay: 0.7s; }
.animate-on-scroll.delay-8 { transition-delay: 0.8s; }


/* Animation for the explore courses button border on hover */
.explore-courses-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.explore-courses-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4F46E5, #3B82F6, #60A5FA); /* Gradient for the border */
    z-index: -1;
    filter: blur(8px); /* Optional: blur the gradient border */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px; /* Match button border-radius */
}
.explore-courses-button:hover::before {
    opacity: 1;
}
.explore-courses-button-inner {
    background-color: #2563EB; /* Solid blue for the inner button */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 8px; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    transition: background-color 0.3s ease-in-out;
}
.explore-courses-button:hover .explore-courses-button-inner {
    background-color: #1D4ED8; /* Slightly darker blue on hover */
}

/* Custom styles for logo hover effect */
.logo-link .logo-main-text {
    transition: fill 0.3s ease-in-out;
}
.logo-link .logo-tagline-text {
    transition: fill 0.3s ease-in-out;
}
/* Using fill="currentColor" inside SVG and changing color on parent link hover */
.logo-link:hover .logo-main-text {
    fill: #2563EB; /* blue-600 */
}
.logo-link:hover .logo-tagline-text {
    fill: #FFFFFF; /* white */
}

/* Specific styles for the new schedule layout */
.day-section {
    background-color: #1A202C; /* Darker background for each day */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 1.5rem; /* mb-6 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    /* Adjusted scroll-margin-top to add an extra offset from the fixed header */
    scroll-margin-top: calc(5rem + 15px); /* Offset for fixed header + 15px */
    border: 1px solid transparent; /* Default transparent border */
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Style for the current day section highlight */
.day-section.current-day-section {
    border-color: #60A5FA; /* Blue-400 border for highlight */
    background-color: #1E293B; /* Slightly lighter background for current day */
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.4); /* Glow effect */
}


.day-title {
    color: #60A5FA; /* Blue-400 for day titles */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
    border-bottom: 1px solid #2D3748; /* border-b border-gray-700 */
    padding-bottom: 0.5rem; /* pb-2 */
}

/* Time slot section styling including hover effect */
.time-slot-section {
    background-color: #2D3748; /* Slightly lighter dark background for time slots */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    margin-bottom: 1rem; /* mb-4 */
    display: block; /* Make <a> behave like a block for padding/margin */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.2s ease-in-out; /* Smooth transition for hover */
    color: inherit; /* Inherit text color from parent for default */
}
.time-slot-section.clickable:hover { /* Only apply hover to clickable slots */
    background-color: #4A5568; /* Even lighter dark background on hover */
    cursor: pointer; /* Indicate it's clickable */
}
.time-slot-section:last-child { /* Remove margin for the last time slot in a day */
    margin-bottom: 0;
}


.time-slot-title {
    color: #E2E8F0; /* Light gray for time slot titles */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.75rem; /* mb-3 */
}

.course-entry {
    background-color: #1A202C; /* Even darker for individual courses */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    margin-bottom: 0.5rem; /* mb-2 */
    border: 1px solid #4A5568; /* border border-gray-600 */
}
.course-entry:last-child { /* Remove margin for the last course entry in a time slot */
    margin-bottom: 0;
}

.course-code-name {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #60A5FA; /* text-blue-400 */
}

.course-details {
    font-size: 0.875rem; /* text-sm */
    color: #A0AEC0; /* text-gray-400 */
    line-height: 1.5; /* leading-relaxed */
}

/* Back to top button styles */
#backToTopBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #2563EB; /* blue-600 */
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 9999px; /* full rounded */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none; /* Make it unclickable when hidden */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#backToTopBtn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#backToTopBtn:hover {
    background-color: #1D4ED8; /* blue-700 */
    transform: translateY(-2px);
}

/* Mobile Menu Specific Styles */
#mobile-menu {
    transition: transform 0.3s ease-out; /* Slide-in/out transition */
    transform: translateX(100%); /* Start off-screen to the right */
}
#mobile-menu.active {
    transform: translateX(0); /* Slide in */
}