:root {
    --bs-body-bg: #fff;
    --bs-body-color: #212529;
    --bs-heading-color: #333;
    --bs-input-bg: #e9ecef;
    --bs-input-color: #212529;
    --bs-button-bg: #f0f0f0;
    --bs-button-color: #333;
    --bs-button-hover-bg: #e2e6ea;
    --bs-dots-color: #ced4da;
    --bs-footer-bg-start: #1b2d48; /* Not directly used in calendar, but kept for consistency */
    --bs-footer-bg-end: #1b2d48;   /* Not directly used in calendar, but kept for consistency */
    --bs-footer-color: #fff;      /* Not directly used in calendar, but kept for consistency */
    --bs-footer-link-hover: #ff6f61; /* Not directly used in calendar, but kept for consistency */
    --bs-header-bar-color: #000000; /* Not directly used in calendar, but kept for consistency */
    --bs-icon-color: #6c757d;      /* Not directly used in calendar, but kept for consistency */
    --bs-menu-bg: #ffffff;        /* Not directly used in calendar, but kept for consistency */

    /* Calendar Specific Colors (derived from Bootstrap variables or custom) */
    --calendar-bg: var(--bs-body-bg);
    --calendar-border-color: #e0e0e0;
    --calendar-header-bg: #f8f9fa; /* Lighter background for the header row */
    --calendar-day-bg-other-month: #f0f0f0;
    --calendar-day-bg-current-month: #ffffff;
    --calendar-day-bg-today: #e6f7ff;
    --calendar-day-border-today: #007bff;
    --event-item-bg: #d1ecf1;
    --event-item-border: #bee5eb;
    --event-item-hover-bg: #c0deed;
    --text-color: var(--bs-body-color);
    --other-month-text-color-mobile: #bbb; /* For very subtle filler days on mobile */
}

[data-bs-theme="dark"] {
    --bs-body-bg: #14171a; /* Dark background */
    --bs-body-color: #e2e6ea; /* Light text */
    --bs-heading-color: #f8f9fa; /* Lighter headings */
    --bs-input-bg: #343a40; /* Darker input background */
    --bs-input-color: #e2e6ea; /* Lighter input text */
    --bs-button-bg: #343a40; /* Darker button background */
    --bs-button-color: #e2e6ea; /* Lighter button text */
    --bs-button-hover-bg: #495057;
    --bs-dots-color: #495057; /* Darker dots */
    --bs-footer-bg-start: #1b2d48;
    --bs-footer-bg-end: #1b2d48;
    --bs-footer-color: #e2e6ea;
    --bs-footer-link-hover: #ff6f61;
    --bs-header-bar-color: #e2e6ea;
    --bs-icon-color: #adb5bd; /* Lighter icon color */
    --bs-menu-bg: rgb(14, 15, 15);

    /* Calendar Specific Colors for Dark Theme */
    --calendar-bg: var(--bs-body-bg);
    --calendar-border-color: #343a40; /* Darker border */
    --calendar-header-bg: #212529; /* Darker background for the header row */
    --calendar-day-bg-other-month: #1a1e21;
    --calendar-day-bg-current-month: #212529;
    --calendar-day-bg-today: #2c3540; /* A distinct dark blue for today */
    --calendar-day-border-today: #007bff; /* Keep primary blue border for today */
    --event-item-bg: #495057;
    --event-item-border: #6c757d;
    --event-item-hover-bg: #6c757d;
    --text-color: var(--bs-body-color);
    --other-month-text-color-mobile: #6c757d; /* Darker subtle text for filler days */
}

body {
    font-family: Rubik, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: 1px;
}

.header-bar {
    padding: 1.5rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--bs-header-bar-color); /* Use CSS variable */
    transition: color 0.3s ease;
    font-family: "Titan One", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0.25em 0em 0em 0em;
}

h2.h4{
    color: white;
}

.text-primary{
    color: #2e6dcc !important;
}

hr {
    color: var(--bs-body-color) !important;
}

.h1footer{
    color: var(--bs-bg-color); /* Use CSS variable */
}

a{
    font-weight: 700;
}

p{
    font-weight: 100;
}

h1, h2, h3, h4, h5, .fw-bold{
    font-family: Cal sans;
}

p{
    line-height: 1.8;
}

p.lead{
    line-height: 1.5;
}


/* NAV BAR STYLING */

/* Your custom CSS */

nav{
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-brand {
    font-weight: 700;
}
.nav-link {
    transition: color 0.3s ease-in-out;
}
.nav-link:hover {
    color: #2e6dcc; /* Light gray on hover for links */
}
/* Bootstrap usually handles the toggler styles, but you can override if needed */
.navbar-toggler {
    border: none;
    outline: none; /* Remove focus outline */
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Your custom CSS - ensure this is loaded AFTER Bootstrap's CSS */

/* Remove default button border if any */
button.menu-button,
.navbar-toggler {
    border: none;
}

/* Aggressively remove outline and box-shadow on focus */
button.menu-button:focus,
.navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
    /* --- THIS IS THE KEY FOR BOOTSTRAP 5 --- */
    --bs-focus-ring-shadow: none !important;
}

/* Also consider :active state if it appears briefly */
button.menu-button:active,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    --bs-focus-ring-shadow: none !important;
}

/* And :focus-visible might be triggered by some browsers */
button.menu-button:focus-visible,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --bs-focus-ring-shadow: none !important;
}

/* If the .btn class also applies it, target it */
.btn:focus,
.btn:active,
.btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --bs-focus-ring-shadow: none !important;
}

.bg-dark{
    background-color: var(--bs-menu-bg) !important;
}

/* Adjusting the fixed position for the mobile menu content itself.
Instead of positioning the <nav>, we'll let Bootstrap handle the
collapse transition, and ensure its content (the ul) looks good. */
#navbarNav {
    /* Bootstrap's .collapsing/.collapse.show handle the visibility and height transition */
    background-color: var(--bs-menu-bg); /* Use Bootstrap var */
    color: var(--bs-body-color);         /* Use Bootstrap var */
    width: 100vw;                        /* Full viewport width */
    /* Remove height: 100vh; directly here, let collapse manage it. */
    text-align: center;                  /* Center text within the menu */
    left: 0;
    z-index: 999;                        /* Ensure it's above page content */
    /* You may need to adjust this z-index relative to your main header's z-index */
}

/* Styling for the list within the mobile menu */
#navbarNav ul {
    list-style: none;
    line-height: 2;
    font-size: 1rem;
    padding: 0; /* Reset default ul padding */
    margin: 0;  /* Reset default ul margin */
}
#navbarNav ul li {
    padding: 0.5rem 0; /* Add some vertical padding to list items */
    font-family: Cal Sans;
}
#navbarNav a {
    color: var(--bs-body-color); /* Inherit body color or set specifically */
    text-decoration: none;
    display: block; /* Make links fill the list item space for easier tapping */
    padding: 0.25rem 1rem; /* Add padding for touch targets */
    border-radius: 0.25rem; /* Match Bootstrap's typical rounded corners */
}
#navbarNav a:hover {
    background-color: var(--bs-dark); /* Example: a dark hover background */
    color: var(--bs-white);          /* Example: white text on hover */
}

/* Dark Mode Toggle styling (basic) */
#darkModeToggle {
    cursor: pointer;
    font-size: .8rem;
    color: var(--bs-body-color);
    transition: color 0.3s ease;
}
#darkModeToggle:hover {
    color: var(--bs-primary); /* Example: highlight on hover */
}


/* NAV BAR STYLING END */


.search-input-group .form-control {
    border: none;
    background-color: var(--bs-input-bg);
    color: var(--bs-input-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    height: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.search-input-group .form-control::placeholder { /* For placeholder text */
    color: var(--bs-body-color);
    opacity: 0.7;
}
.search-input-group .btn {
    background-color: var(--bs-input-bg);
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--bs-icon-color); /* Use CSS variable */
    height: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.category-button {
    background-color: var(--bs-button-bg);
    border: none;
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    color: var(--bs-button-color);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.category-button:hover {
    background-color: var(--bs-button-hover-bg);
    color: var(--bs-button-color);
}
.category-button .fa-star, .category-button .fa-hamburger {
    color: #ffc107; /* Star and burger icon color remains constant */
    margin-right: 0.5rem;
}

.category-button img{
    margin-right: 0.5rem;
    width: 2em;
}

.event-card {
    min-width: 280px;
    max-width: 300px;
    height: 350px;
    background-color: var(--bs-body-bg); /* Use body background for card base */
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
    color: white; /* Text on card background should remain white */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease; /* Add transition for background */
}

/* Gradient overlay for readability */
.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

.event-card > * {
    position: relative;
    z-index: 2;
}

.event-card-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: white;
}
.event-card-info {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.book-button {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.75rem;
}
.book-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    color: white;
}
.section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--bs-heading-color); /* Use CSS variable */
    transition: color 0.3s ease;
}
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    overflow-y: hidden !important;
}
.horizontal-scroll-container > *:not(:last-child) {
    margin-right: 1.5rem;
}
.dots-separator {
    text-align: center;
    margin: 3rem 0;
    font-size: 2rem;
    color: var(--bs-dots-color); /* Use CSS variable */
    letter-spacing: 0.5rem;
    transition: color 0.3s ease;
}
.description-text {
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgb(212, 212, 212); /* Use body color for consistency */
    transition: color 0.3s ease;
    max-width: 400px;
}

.navbar-toggler-icon{
    color: red !important;
}

#toggleMenu{
    color: var(--bs-header-bar-color) !important;
}

.fa-map-marker-alt, .fa-bars, #darkModeToggle, .fa-close { /* Apply color to these icons */
    color: var(--bs-header-bar-color) !important;
    font-size: 1.5rem;
    cursor: pointer; /* Indicate interactivity */
    transition: color 0.3s ease;
}
.logo{
    width: 1.5rem; /* This `width` doesn't apply to the h1 text 'BarQuiz' */
    margin-right: 0.5rem;
}

img.d-block{
    border-radius: 1.5rem;
}

.footer {
    background: linear-gradient(135deg, var(--bs-footer-bg-start), var(--bs-footer-bg-end));
    color: var(--bs-footer-color);
    padding: 2rem 1rem;
    transition: background 0.3s ease, color 0.3s ease;
    color: white;
}
.footer .social-icons {
    margin: 1rem 0;
}
.footer .social-icons a {
    color: var(--bs-footer-color);
    margin: 0 0.5rem;
    font-size: 1.5rem;
    transition: color 0.3s;
}
.footer .social-icons a:hover {
    color: var(--bs-footer-link-hover);
}
.footer .footer-links {
    margin: 1rem 0;
}
.footer .footer-links a {
    color: var(--bs-footer-color);
    text-decoration: none;
    transition: color 0.3s;
}
.footer .footer-links a:hover {
    color: var(--bs-footer-link-hover);
}


.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: var(--bs-input-color);
}
.autocomplete-items {
  position: absolute;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  color: var(--bs-input-color) !important;
  border: 1px solid var(--bs-input-bg) !important;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: var(--bs-body-bg);
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: var(--bs-input-color);
}

/* animation for loading data */
/* Remove or comment out .loading-spinner if you're not using it elsewhere */
/*
.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
*/

/* Styles for the event cards */
.event-card {
    /* Your existing styles for event-card */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    min-height: 250px; /* Example height */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    /* --- NEW CSS for Fade-in --- */
    opacity: 0; /* Start invisible */
    transform: translateY(20px); /* Optional: slight slide-up effect */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Animate opacity and transform */
}

/* Class added by JavaScript to trigger the fade-in */
.event-card.is-loaded {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Return to original position */
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transform: translateY(100%); /* Start off-screen */
    transition: transform 0.5s ease-out; /* Smooth slide-up animation */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    border-top: 1px solid var(--bs-body-color);
}

.font-semibold{
    color: var(--bs-body-color);
}

.text-sm{
    color: var(--bs-body-color);
    font-size: 0.75rem;
}

.cookie-btn{
    font-size: 0.75rem;
}

.cookie-banner.show {
    transform: translateY(0); /* Slide into view */
}

/* Optional: Styles to make the main content scrollable if it's short */
.main-content {
    padding: 2rem;
    flex-grow: 1; /* Allows content to push banner to bottom */
}

.top div:nth-child(1), .bottom div:nth-child(1) {
    background-color: #3D348B;
}

.top div:nth-child(2), .bottom div:nth-child(2) {
    background-color: #7678ED;
}

.top div:nth-child(3), .bottom div:nth-child(3) {
    background-color: #F7B801;
}

.top div:nth-child(4), .bottom div:nth-child(4) {
    background-color: #F18701;
}

.top div:nth-child(5), .bottom div:nth-child(5) {
    background-color: #F35B04;
}

.top {
    display: flex;
    width: 100%; /* Make sure the container has a width */
    position: fixed;
    top: 0px;
    z-index: 9999;
}

.top div, .bottom div {
    height: 3px;
    flex-grow: 1; /* This is the key! */
}

.bottom {
    display: flex;
    width: 100%; /* Make sure the container has a width */
    z-index: 9999;
}

footer ul{
    list-style-type: none;
}

.menu-button{
    display: block;
}


/* Calendar styling /*

/* General Calendar Styling */
.calendar-day {
    border: 1px solid var(--calendar-border-color);
    min-height: 100px; /* Adjust as needed for desktop */
    padding: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: -1px; /* To prevent double borders */
    margin-right: -1px; /* To prevent double borders */
    background-color: var(--calendar-bg); /* Default background for all days */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    color: var(--text-color);
}

.calendar-day.current-month {
    background-color: var(--calendar-day-bg-current-month);
}

.calendar-day.today {
    background-color: var(--calendar-day-bg-today);
    border: 2px solid var(--calendar-day-border-today);
}

/* Style for days of other months */
.calendar-day.other-month {
    background-color: var(--calendar-day-bg-other-month);
    color: var(--other-month-text-color-mobile); /* Make text subtle */
}


/* Day Number Positioning */
.day-number {
    font-size: 1.2em;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 10px;
}

/* Event List Styling */
.event-list {
    margin-top: 25px; /* To leave space for the day number */
    list-style: none;
    padding: 0;
    max-height: calc(100% - 30px); /* Adjust based on day-number height */
    overflow-y: auto;
}

.event-item {
    background-color: var(--event-item-bg);
    border: 1px solid var(--event-item-border);
    border-radius: .25rem;
    padding: 2px 4px; /* Smaller padding for mobile compact view */
    margin-bottom: 3px; /* Smaller margin for mobile compact view */
    font-size: 0.7em; /* Smaller font for mobile compact view */
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2; /* Adjust line height for smaller text */
    color: var(--text-color); /* Ensure event text uses body color */
}

.event-item:hover {
    background-color: var(--event-item-hover-bg);
}

/* Modal styling for event details */
.event-modal .modal-body img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

/* --- Responsive adjustments to maintain grid layout on all screen sizes --- */

.calendar {
    background-color: var(--calendar-bg); /* Apply theme background to the card */
    color: var(--text-color);
}

.card {
    background-color: var(--calendar-bg); /* Also apply to the month navigation card */
    color: var(--text-color);
}

.card-header { /* If you decide to use card-header for the month navigation */
    background-color: var(--bs-footer-bg-end) !important;
    border-bottom-color: var(--calendar-border-color);
}

/* Calendar Header (Weekdays) - Always display as flex row, 7 columns */
.calendar-header {
    display: flex; /* Ensure it's always a flex container */
    flex-wrap: nowrap; /* Prevent wrapping in header */
    background-color: var(--bs-footer-bg-end); /* Apply header background */
    padding-top: 10px; /* Add some padding for visual spacing */
    padding-bottom: 10px; /* Add some padding for visual spacing */
    border-bottom: 1px solid var(--calendar-border-color); /* Separator */
    color: white;
    border-radius: 5px 5px 0px 0px;
}

.calendar-header .col {
    flex: 0 0 calc(100% / 7); /* Each header column takes 1/7th of the width */
    max-width: calc(100% / 7);
    text-align: center;
    padding: 5px 0;
    color: #fff; /* Ensure header text uses theme color */
}

/* Calendar Body - Always display as flex row, 7 columns */
.calendar-body .row {
    display: flex;
    flex-wrap: wrap; /* Allow rows to wrap to the next line */
}

.calendar-body .col {
    flex: 0 0 calc(100% / 7); /* Each day column takes 1/7th of the width */
    max-width: calc(100% / 7);
    padding: 2px; /* Smaller padding for a more compact mobile look */
    min-height: 60px; /* Adjust min-height for mobile grid cells */
}

/* Bootstrap Button overrides for theme */
.btn-primary {
    background-color: var(--bs-button-bg);
    color: var(--bs-button-color);
    border-color: var(--bs-button-color); /* Or a specific border color */
}

.btn-primary:hover {
    background-color: var(--bs-button-hover-bg);
    color: var(--bs-button-color);
    border-color: var(--bs-button-color);
}

/* Mobile specific styling adjustments */
@media (max-width: 767.98px) {
    .calendar-day {
        min-height: 60px; /* Further reduce height for mobile to keep grid compact */
        padding: 2px; /* Very small padding */
        border: 1px solid var(--calendar-border-color); /* Lighter border for a cleaner look */
    }

    .day-number {
        font-size: 0.9em; /* Smaller day number */
        top: 2px;
        right: 4px;
    }

    .event-list {
        margin-top: 15px; /* Adjust top margin for events */
        max-height: calc(100% - 20px); /* More space for events within smaller cell */
        overflow: hidden; /* Hide overflow to keep cells clean */
    }

    .event-item {
        font-size: 0.65em; /* Even smaller font for event text */
        padding: 1px 2px;
        margin-bottom: 1px;
    }

    /* Hide the mobile day label as the main header now shows weekdays */
    .calendar-day .day-label-mobile {
        display: none;
    }

    /* Make filler days (other-month) even more subtle or hide their content */
    .calendar-day.other-month {
        background-color: var(--calendar-day-bg-other-month); /* Use themed color */
        color: var(--other-month-text-color-mobile); /* Use themed color for subtle text */
        /* Optionally, hide events in other-month days on mobile */
        .event-list {
            display: none;
        }
    }

    /* Adjust month/year header font size */
    #currentMonthYear {
        font-size: 1.2em;
    }

    /* Adjust button sizes if desired */
    .btn-primary {
        padding: .25rem .5rem;
        font-size: .875rem;
    }
}




/* display the site not in mobile */

@media only screen and (min-width: 600px) {
    .container-fluid{
        width: 60vw;
    }

    .menu-button{
        display: none;
    }

    #navbarNav ul {
        list-style: none;
        line-height: 2;
        font-size: 1rem;
        padding: 0; /* Reset default ul padding */
        margin: 0;  /* Reset default ul margin */
    }

    footer .container{
        width: 60vw;
    }
}