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

/* Fredoka One - Assuming Regular weight */
@font-face {
  font-family: 'Fredoka One'; /* Name used in your CSS rules */
  font-style: normal;
  font-weight: 400; /* Standard weight for Fredoka One */
  font-display: swap; /* Improves perceived performance */
  src: url('/fonts/FredokaOne-Regular.woff2') format('woff2'); /* Adjust path/filename if needed */
  /* Optional: Add WOFF fallback for older browsers if needed */
  /* src: url('/fonts/FredokaOne-Regular.woff2') format('woff2'),
         url('/fonts/FredokaOne-Regular.woff') format('woff'); */
}

/* Inter - Regular */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2'); /* Adjust path/filename */
}

/* Inter - Medium */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Inter-Medium.woff2') format('woff2'); /* Adjust path/filename */
}

/* Inter - Bold */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Inter-Bold.woff2') format('woff2'); /* Adjust path/filename */
}

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


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

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  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 Fredoka One to headings and brand */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
  font-family: 'Fredoka One', sans-serif; /* Fallback to sans-serif */
  font-weight: 400; /* Fredoka One only has regular weight */
  color: #6daecc;
}

/* 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 Inter font from body) */
.btn {
  /* Ensure consistent font weight if needed */
  /* font-weight: 500; */ /* Example: make buttons slightly bolder */
}

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

/* 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;
  font-weight: 700; /* Use bold Inter for labels */
  font-family: 'Inter', sans-serif; /* Explicitly set Inter 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 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-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* --- 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%;
    }
  
    /* Optional: Style the active link differently */
    .navbar-collapse.collapse.show .navbar-nav .nav-link.active {
      font-weight: bold;
      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 */
     }
  
  }