/* ===================================
   General Styling
   =================================== */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #fdfdff; /* A soft, warm off-white */
}

footer p {
    margin: 0;
}

#map_canvas {
    width: 100%;
    height: 450px;
    border-radius: 0 0 .25rem .25rem;
}

/* ===================================
   Navbar Styling
   =================================== */

.navbar-brand img {
    max-height: 50px;
}

/* Custom background for the logo */
.navbar-brand {
    background-color: #343a40;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Custom style for the text-based brand */
.navbar-brand {
    font-size: 1.5rem; /* Make the text a bit larger */
    font-weight: 700;   /* Make the font bold */
    padding: 8px 0;     /* Adjust padding for text */
}

/* Ensure the dark theme logo background is removed */
[data-bs-theme="dark"] .navbar-brand {
    background-color: transparent;
}

.navbar-brand:hover {
    background-color: #495057;
}

/* ===================================
   Light Theme Customization
   =================================== */

/* Style cards as "Info Callouts" with a colored top border */
[data-bs-theme="light"] .card {
  background-color: var(--bs-info-bg-subtle);   /* Light cyan background */
  border: 1px solid var(--bs-info-border-subtle); /* Subtle cyan border */
  border-top: 5px solid var(--bs-info);         /* Prominent dark cyan top border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Style the card headers to blend with the new callout style */
[data-bs-theme="light"] .card-header {
  background-color: transparent; /* Make header background see-through */
  color: var(--bs-info-text-emphasis);    /* Make header text slightly darker */
  border-bottom: 1px solid var(--bs-info-border-subtle);
}

/* Ensures icons in the header match the new text color */
[data-bs-theme="light"] .card-header .bi {
  color: var(--bs-info-text-emphasis);
}


/* ===================================
   Dark Theme Customization
   =================================== */
[data-bs-theme="dark"] body {
    background-color: #282c34; /* A modern, dark slate-grey */
}

[data-bs-theme="dark"] .card {
    background-color: #2c394b; /* A deep, dark slate blue */
    border-color: #44546c;     /* A slightly lighter blue for the border */
}

/* Note: Dark theme card header styles are handled automatically by Bootstrap */