/* --- Self-Hosted Font Definitions --- */

/* Urbanist - Light (Mapped from Inter-Regular) */
@font-face {
  font-family: 'Urbanist'; /* Consistent family name */
  font-style: normal;
  font-weight: 300; /* Light weight */
  font-display: swap; /* Improves perceived performance */
  src: url('/fonts/Urbanist-Light.ttf') format('truetype'); /* Path to TTF file */
}

/* Urbanist - Regular (Mapped from Inter-Medium) */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400; /* Regular weight */
  font-display: swap;
  src: url('/fonts/Urbanist-Regular.ttf') format('truetype'); /* Path to TTF file */
}

/* Urbanist - Medium (Mapped from Fredoka One) */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 500; /* Medium weight */
  font-display: swap;
  src: url('/fonts/Urbanist-Medium.ttf') format('truetype'); /* Path to TTF file */
}

/* Urbanist - SemiBold (Mapped from Inter-Bold) */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 600; /* SemiBold weight */
  font-display: swap;
  src: url('/fonts/Urbanist-SemiBold.ttf') format('truetype'); /* Path to TTF file */
}

/* --- End Self-Hosted Font Definitions --- */


/* --- Global Styles & Typography --- */

html {
  height: 100%; /* Needed for sticky footer */
}

body {
  /* Use Urbanist Light (300) as the base weight, mapped from Inter-Regular (400) */
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300; /* Default to Light weight */
  line-height: 1.6;
  color: #333;
  /* Ensure body takes full height for sticky footer */
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Fallback for older browsers */
}

/* Apply Urbanist Medium (500) to headings and brand, mapped from Fredoka One (400) */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
  font-family: 'Urbanist', sans-serif; /* Fallback to sans-serif */
  font-weight: 500; /* Use Medium weight */
  color: #051b25;
}

/* Links */
a {
  color: #0d6efd; /* Bootstrap primary color */
  text-decoration: none; /* Remove default underline */
}
a:hover {
  color: #0a58ca;
  text-decoration: underline;
}

/* --- Layout & Components --- */

/* Ensure main content area can grow */
main.flex-shrink-0 {
  flex-shrink: 0; /* Prevent shrinking */
}

/* Footer basic styling (complements Bootstrap) */
.footer {
  font-size: 0.9rem;
}

/* Navbar tweaks (optional) */
.navbar {
  /* Add custom styles if needed */
}
.navbar-brand {
  /* font applied above */
}

/* Button styling (inherits Urbanist font from body) */
.btn {
  /* Ensure consistent font weight if needed */
  /* font-weight: 400; */ /* Example: make buttons use Urbanist Regular */
}

/* Card styling (headings use Urbanist Medium, text uses Urbanist Light/Regular) */
.card {
  /* Add custom styles if needed */
}
.card-title {
 /* font applied via h1-h6 rule */
}
.card-text {
  /* font applied via body rule (Urbanist Light) */
}

/* List group tweaks */
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: #f8f9fa; /* Subtle hover effect */
}

/* --- Map Specific Styles --- */

/* Map container */
#map {
  height: calc(100vh - 56px - 56px); /* Adjust based on actual header/footer height */
  width: 100%;
  background-color: #e9e9e9; /* Light background while tiles load */
}

/* Placeholder for map */
.map-placeholder {
  border: 2px dashed #ccc;
  padding: 2rem;
  text-align: center;
  color: #777;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 56px - 56px); /* Match map height */
  width: 100%;
}
.map-placeholder p {
    max-width: 300px;
}

/* Leaflet marker label styling */
.my-marker-label {
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  /* Use Urbanist SemiBold (600), mapped from Inter-Bold (700) */
  font-weight: 600;
  font-family: 'Urbanist', sans-serif; /* Explicitly set Urbanist for labels */
  color: #cf5a54;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  /* Ensure labels appear above markers */
  z-index: 650 !important; /* Leaflet markers are around 400-600 */
}

/* --- Impressum/Datenschutz Specific Styles --- */
#datenschutz-content h3 {
  font-size: 1.1rem;
  /* font-family and weight applied via h1-h6 rule */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
#datenschutz-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
#datenschutz-content li {
  margin-bottom: 0.25rem;
}

/* --- Placeholder Styles (Optional - Standardize) --- */
.instagram-placeholder-hidden {
    /* Styles applied inline in HTML or via JS */
}
.instagram-consent-placeholder {
    /* Styles applied inline in HTML or via JS */
}


/* --- Utility Classes (Examples if not using Tailwind/Bootstrap extensively) --- */
/* Example: Define font weights if not using utility classes */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; } /* Renamed from font-bold for clarity */

/* --- Responsive Adjustments (Add as needed) --- */
/* Example: Reduce heading size on smaller screens */
@media (max-width: 768px) {
  h1, .display-4 {
    font-size: 2rem; /* Adjust as needed */
  }
  /* Adjust map height if header/footer changes */
  /* #map { height: calc(100vh - new-header-height - new-footer-height); } */
}

/* ================================== */
/* Mobile Navbar Menu Visibility Fix  */
/* ================================== */

/* Target the navbar collapse element ONLY when it's open (.show)
   and below the large breakpoint (when the toggler is visible) */
   @media (max-width: 991.98px) { /* Bootstrap 5's lg breakpoint */

    .navbar-collapse.collapse.show {
      /* Ensure a visible background color */
      background-color: #4478ac; /* Example: Light gray background (Bootstrap's bg-light) */
      /* Add some padding inside the menu */
      padding: 1rem;
      /* Optional: Add rounded corners and margin */
      border-radius: 0.375rem; /* Bootstrap's rounded-lg */
      margin-top: 0.5rem; /* Space below the toggler */
      border: 1px solid rgba(0, 0, 0, 0.1); /* Optional subtle border */
      /* Ensure it appears above other content if needed */
      /* z-index: 1050; */ /* Adjust if necessary */
    }

    /* Style the links inside the opened mobile menu */
    .navbar-collapse.collapse.show .navbar-nav .nav-link {
      color: #212529 !important; /* Example: Dark text color (Bootstrap's default text) */
                                /* Use !important only if necessary to override other styles */
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      /* Ensure links are block level for easier tapping */
      display: block;
      width: 100%;
      /* Ensure mobile nav links use appropriate weight, e.g., Regular */
      font-weight: 400;
    }

    /* Optional: Style the active link differently */
    .navbar-collapse.collapse.show .navbar-nav .nav-link.active {
      font-weight: 600; /* Use SemiBold for active link */
      color: #0d6efd !important; /* Example: Bootstrap primary color */
    }

     /* Optional: Ensure toggler icon is visible against navbar background */
     .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Darker icon color */
     }
     .navbar-toggler {
         border-color: rgba(0,0,0,.1); /* Ensure border is visible */
     }

   }