@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

:root {
    --brw-chocolate: #4B3621;
    --brw-cream: #F5F1E3;
    --brw-gold: #C3A35D;
    --brw-racing-green: #1D3C34;
    --brw-prussian-blue: #003153;
}

/* Backgrounds */
.bg-chocolate {
    background-color: var(--brw-chocolate);
}

.bg-cream {
    background-color: var(--brw-cream);
}

/* Text Colors */
.text-chocolate {
    color: var(--brw-chocolate);
}

.text-cream {
    color: var(--brw-cream);
}

.text-gold {
    color: var(--brw-gold);
}

/* Button Styling */
.btn.btn-chocolate {
    background-color: var(--brw-chocolate);
    color: var(--brw-cream);
    border: 2px solid var(--brw-gold);
}

.btn.btn-chocolate:hover {
    background-color: var(--brw-gold);
    color: var(--brw-chocolate);
}

/* Button with Lighter Background */
.btn.btn-chocolate-light {
    background-color: var(--brw-cream);
    color: var(--brw-chocolate);
    border: 2px solid var(--brw-gold);
}

.btn.btn-chocolate-light:hover {
    background-color: var(--brw-gold);
    color: var(--brw-cream);
}

/* Ensure .btn gets overridden by custom styles */
.btn.btn-chocolate, .btn.btn-chocolate-light {
    transition: all 0.3s ease; /* Smooth hover transition */
}

/* Additional Improvements for Text and Background */
.text-chocolate, .text-cream, .text-gold {
    transition: color 0.3s ease; /* Smooth color transitions */
}

/* Hero Section: Full-Width Image */
.hero {
    width: 100%;
    /* Changed from 100vh to a more flexible approach */
    height: calc(100vh - 60px); /* Subtract navbar height (adjust 60px if needed) */
    background-size: cover;
    background-position: center;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: filter 0.8s ease; /* Transition for the filter effect */
    filter: none;
    z-index: 0; /* Image at the bottom */
}

.page-section {
    display: none; /* Initially hidden */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0; /* Initially hidden */
    transition: opacity 2s ease; /* Add transition for fade-in */
}

.page-section.active {
    display: block;
    z-index: 1;
}

.page-section.faded {
    display: block;
    z-index: 1;
    opacity: 1; /* Fade in when active */
}

/* Tagline Styles */
.hero h1, .hero h2 {
    position: absolute;  /* Position them absolutely within the hero section */
    left: 50%;           /* Center the text horizontally */
    transform: translateX(-50%);  /* Ensure exact centering */
    margin: 0;
    line-height: 1.2;
    text-align: center;  /* Ensure the text itself is centered */
}

.page-section h1 {
    color: var(--brw-racing-green); /* First line in chocolate */
    font-size: 2rem;
    top: 8%; /* Position 20% from the top */
    font-family: 'Noto Sans', sans-serif;
    -webkit-text-stroke: 1.5px var(--brw-prussian-blue);
    text-stroke: 1.5px var(--brw-prussian-blue);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-section p {
    color: var(--brw-chocolate); /* First line in chocolate */
    font-size: 1rem;
    font-family: 'Noto Sans', sans-serif;
 }

.hero h1 {
    color: var(--brw-chocolate); /* First line in chocolate */
    font-size: 7rem;
    left: 33%;
    top: 8%; /* Position 20% from the top */
    font-family: 'Noto Sans', sans-serif;
    -webkit-text-stroke: 1.5px black;
    text-stroke: 1.5px black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero h2 {
    color: var(--brw-cream); /* Second line in cream */
    font-size: 3rem;
    left: 33%;
    top: 23%; /* Position 30% from the top */
    margin-top: 0.5rem; /* Space between the lines */
    font-family: 'Noto Sans', sans-serif;
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.accordion {
    background: var(--brw-cream);
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion-header-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--brw-chocolate);
    margin-bottom: 10px;
}

.accordion-button {
    background-color: var(--brw-gold);
    color: white;
    font-weight: bold;
}

.accordion-button:not(.collapsed) {
    background-color: var(--brw-chocolate);
    color: var(--brw-cream);
}

    .timetable {
        width: 100%;
        max-width: 90%;
        margin: auto;
        background-color: #f5f1e6; /* Cream */
        border-color: #5a3825; /* Chocolate */
    }

    .timetable th {
        background-color: #5a3825 !important; /* Chocolate */
        color: white;
        text-align: center;
    }

    .timetable td {
        border-color: #5a3825; /* Chocolate */
        background-color: #c9b682 !important;
    }

    .timetable-container {
        padding: 0;
        margin: 0 auto;
    }

    .time-col {
        width: 20%;
        font-weight: bold;
        text-align: center;
    }

    h2 {
        color: #5a3825; /* Chocolate */
        text-align: center;
        margin-bottom: 15px;
    }

    h3 {
        color: #5a3825; /* Chocolate */
        text-align: center;
        margin-bottom: 15px;
        font-size: 1rem !important;
    }

    table {
        width: 100%;
    }

/* Default (Desktop and above) */
.hero {
    background-image: url('desktop-banner.jpg');
}

/* Tablet Version */
@media (max-width: 768px) {
    .hero {
        background-image: url('tablet-banner.jpg');
    }

    .hero h1 {
        font-size: 4.5rem;
    }

    .hero h2 {
        font-size: 2.5rem;
    }
}

/* Mobile Version */
@media (max-width: 480px) {
    .hero {
        background-image: url('phone-banner.jpg');
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero h2 {
        font-size: 1.8rem;
    }
}

/* Menu Styles - Fixed at Bottom */
.navbar {
    background-color: var(--brw-chocolate); /* Background color of the menu */
    padding: 1rem 2rem; /* Add some padding for better spacing */
    position: fixed; /* Fixed positioning */
    bottom: 0; /* Position at the bottom */
    width: 100%; /* Full width */
    z-index: 100; /* Ensure it's above other content */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the links */
}

.navbar a {
    color: var(--brw-cream); /* Text color in cream */
    font-size: 1.2rem; /* Set text size for the menu */
    text-decoration: none; /* Remove underline from links */
    margin: 0 10px; /* Space between menu items, adjust as needed */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    padding: 0.5rem 1rem; /* Add padding for a button-like effect */
    border-radius: 5px; /* Rounded corners */
}

.navbar a:hover {
    color: var(--brw-chocolate); /* Chocolate text on hover */
    background-color: var(--brw-gold); /* Gold background on hover */
}

/* Responsive Navbar for Smaller Screens */
@media (max-width: 768px) {
    .navbar {
        padding: 1rem; /* Reduce padding for smaller screens */
    }

    .navbar a {
        font-size: 1.5rem; /* Larger font size for readability on mobile */
        margin-right: 10px; /* Less space between items */
    }
}