header {
  background: #00b7c8;
  color: #fff;
  /*padding: 20px 0;*/
}

footer {
    color: #fff;
    background-color: #105076;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    color: #73ddff;
    text-decoration: underline;
}

h1 {
	font-family: 'Streetvertising Public';
	color: #2cb4c8; 
    font-size: 32px !important;
}

h2 {
	font-family: 'Streetvertising Public';
	color: #2cb4c8;
    font-size: 24px !important;
}

h3 {
    font-family: 'Streetvertising Public';
	color: #73ddff;
    font-size: 20px !important;
}

h4 { 
	font-family: 'Streetvertising Public';
	color: #005375; 
    font-size: 16px !important;
}

h5 { 
	font-family: 'Streetvertising Public';
	color: #2cb4c8;
    font-size: 12px !important;
}

.navbar {
    background: #00b7c8 !important;
}

.nav-item {
    background: #00b7c8;
    padding: 0px 10px;
}

.nav-link {
    color: #fff;
    font-family: 'Streetvertising Public';
    font-size: 18px;
    font-weight: 500;
}

.nav-link:hover {
    color: #105076;
    font-weight: 500;
    text-decoration: none !important;
}

.navbar .dropdown-menu {
    border: none;
    border-radius: 0px;
}

li.nav-item {
    list-style-type: none;
}

.dropdown-item > .nav-link {
    color: #105076;
}

.dropdown-item > .nav-link:hover {
    color: #fff;
}

.dropdown-item:hover {
    background: #00b7c8;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* spacing between inputs */
  width: 100%;
}

/*.form-control,
.form-select {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}*/

li {
	list-style-type: square;
}

.form-check {
	
}
.form-check-input {
	border-color: #105076;
}
.form-check-label {
	
}

/*.form-control {
    color: #000 !important;
}

.form-select {
    color: #000 !important;
}	*/									


/* Desktop and tablet: make them inline */
@media (min-width: 600px) {
  .search-group {
    flex-direction: row;
    align-items: center;
  }

  .form-control:first-child {
    flex: 2; /* bedrijfsnaam gets more width */
  }

  .form-control:nth-child(2),
  .form-select {
    flex: 1;
  }
}




/* Show dropdown on hover for desktop */
@media (min-width: 992px) {

    /* Offset and shadow for dropdowns */
    .navbar .dropdown-menu {
        top: calc(100% + 3px); /* always 10px lower */
        left: 0; /* lock horizontal alignment */
        transform: none !important; /* prevent Bootstrap JS from shifting */
        margin-top: 0; /* already handled by top offset */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        border: none;
        border-radius: 5px;
        display: block; /* occupy space without shifting */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.15s ease, top 0.15s ease;
        pointer-events: none;
        position: absolute;
    }

    /* Show dropdown smoothly */
    .navbar .dropdown.show > .dropdown-menu,
    .navbar .dropdown:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        top: calc(100% + 3px); /* same top offset */
        pointer-events: auto;
    }

    /* --- Fix hover gap by extending hit area --- */
    .navbar .dropdown::after {
        content: "";
        position: absolute;
        bottom: -10px; /* matches dropdown offset */
        left: 0;
        width: 100%;
        height: 10px; /* invisible hover bridge */
        background: transparent;
    }

    /* Submenu handling */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .25rem;
    }

    .navbar .dropdown:hover > .nav-link,
      .navbar .dropdown.show > .nav-link {
        color: #fff;
      }


    .nav-item:hover {
        background: #fff;
        border-radius: 30px;
    }

    /* Highlight parent link on hover or when dropdown open */
    .navbar .dropdown:hover > .nav-link,
    .navbar .dropdown.show > .nav-link {
        color: #105076;
    }
}