@charset "UTF-8";

/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap");

/* Lokale fonts */
@font-face {
  font-family: "Museo300";
  src: url("https://www.hetsprekersburo.nl/fonts/Museo300-Regular.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Museo700";
  src: url("https://www.hetsprekersburo.nl/fonts/Museo700-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-blue: #103856;
  --brand-orange: #f56c20;
  --fg: #1a2a3a;
}

/* Basis */
html {
  font-size: 1.1rem;
  line-height: 1.6;
}

body {
  color: var(--fg);
  font-family: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Museo700", "PT Sans", sans-serif;
  font-weight: 700;
  color: var(--brand-blue);
}

/* Containers */
@media (min-width: 1900px) {
  .container { max-width: 1920px !important; }
}
@media (min-width: 1600px) {
  .container { max-width: 1620px; }
}
@media (max-width: 1599px) and (min-width: 600px) {
  .container { max-width: 98%; padding-left: 15px; padding-right: 15px; }
}

/* Buttons */
.btn-orange {
  background-color: var(--brand-orange);
  color: #fff;
  border: 2px solid var(--brand-orange);
  transition: background-color .3s, border-color .3s;
}
.btn-orange:hover {
  background-color: #e65f17;
  border-color: #e65f17;
}

.btn-blue {
  background-color: var(--brand-blue);
  color: #fff;
  border: 2px solid var(--brand-blue);
  transition: background-color .3s, border-color .3s;
}
.btn-blue:hover {
  background-color: #0d2f49;
  border-color: #0d2f49;
}

/* Links en kleuren */
.text-orange { color: var(--brand-orange); }
.bg-orange { background-color: var(--brand-orange); }
.bg-blue { background-color: #103856; }
.link-blue { color: var(--fg); }

.link-orange { text-decoration: none; }
.link-orange:hover { color: var(--brand-orange); text-decoration: none; }

/* Layout */
main { padding-top: 100px; }
.nav-item { margin-top: 9px !important; margin-bottom: 0; }

/* Rondingen */
.rounded-4-top {
  border-top-left-radius: var(--bs-border-radius-xl) !important;
  border-top-right-radius: var(--bs-border-radius-xl) !important;
}
.rounded-5-top {
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
}

/* Breadcrumb */
.border-breadcrumb { border-bottom: 1px solid #e0e0e0; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f231";
  font-family: "bootstrap-icons";
  color: #103856;
  font-size: 0.8rem;
}

/* Focus states */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
.btn:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  box-shadow: none;
}

/* Navbar link alignment */
.navbar-nav .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Search placeholder */
#navbarSearchOverlay input::placeholder {
  font-size: 0.9rem;
}

/* Wishlist button */
.wishlist-btn:focus,
.wishlist-btn:active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.wishlist-btn { -webkit-tap-highlight-color: transparent; }

/* Cards */
.card-hover {
  transition: box-shadow .25s ease, transform .25s ease;
  box-shadow: 2px 4px 12px #00000014;
}
.card-hover:hover {
  box-shadow: 4px 8px 20px #0000001f;
  transform: translateY(-2px);
}

/* Profile button */
.btn-profile {
  background-color: transparent;
  border: 1px solid var(--brand-blue);
  color: var(--brand-blue);
  transition: background-color .2s ease, color .2s ease;
}
.btn-profile:hover,
.btn-profile:focus {
  background-color: #f1f5f9;
  color: var(--brand-blue);
}

/* Filter UI */
.bi-check-square { color: var(--brand-orange) !important; }
.custom-filter-option { cursor: pointer; user-select: none; }
.custom-filter-option:hover .filter-icon { color: var(--brand-orange); }
.filters-list h5 { font-size: 16px; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.form-check { margin-bottom: 5px; }

.scrollable-filter-box { max-height: 200px; overflow-y: auto; padding-right: 5px; }
.scrollable-filter-box::-webkit-scrollbar { width: 6px; }
.scrollable-filter-box::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }

.filter-select {
  background: #fff;
  border: 1px solid #d6dee8;
  border-radius: 999px;
  padding: .6rem .9rem;
  color: var(--brand-blue);
  font-weight: 500;
}

.filter-dropdown { border-radius: 16px; box-shadow: 2px 4px 12px #00000014; }
.filter-dropdown-scroll { max-height: 320px; overflow-y: auto; padding-right: .25rem; }
.filter-dropdown .dropdown-item { white-space: normal; border-radius: 10px; padding: .45rem .5rem; }
.filter-dropdown .dropdown-item:hover { background: #f1f5f9; }

.text-darkgrey { color: #444; }

/* Sticky filters */
.filters-list {
  position: sticky;
  top: 110px;
  z-index: 200;
  overflow: visible;
}

.sticky {
  position: sticky;
  top: 88px;
  align-self: flex-start;
  z-index: 2;
}

.navbar-desktop-height {
  min-height: 80px;
}

.dropdown-mega {
  top: 100%;
}

.navbar-search-overlay {
  z-index: 1050;
  width: 320px;
  top: -10px;
}

.badge-fav {
  font-size: 0.75rem;
}

.navbar-phone-box {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  min-height: 80px;
}

.navbar-desktop-height {
  min-height: 80px;
}

.dropdown-mega {
  top: 100%;
}

.navbar-search-overlay {
  z-index: 1050;
  width: 320px;
  top: -10px;
}

.badge-fav {
  font-size: 0.75rem;
}

.navbar-phone-box {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  min-height: 80px;
}
	#navbarDesktop .dropdown-toggle::after {
  display: none;
}
	/* Desktop navbar hoogte */
#navbarDesktop {
  min-height: 80px;
}

/* Menu moet onderaan in de navbar hangen */
#navbarDesktop .navbar-desktop-menu {
  height: 80px;
  display: flex;
  align-items: flex-end;
  gap: .25rem;
}

/* Klik/hover zone van elk menu item tot onderaan laten lopen */
#navbarDesktop .navbar-desktop-menu > .nav-item {
  height: 80px;
  display: flex;
  align-items: flex-end;
}

/* Link vult de hoogte, zodat er geen gap is */
#navbarDesktop .navbar-desktop-menu > .nav-item > .nav-link {
  height: 80px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 18px; /* pas aan naar jouw look */
}

/* Mega dropdown strak aansluiten, geen margin gap */
#navbarDesktop .dropdown-menu[data-bs-popper] {
  margin-top: 0;
}
/* Caret van dropdown weer naast de tekst zetten */
#navbarDesktop .nav-item.dropdown > .nav-link.dropdown-toggle::after {
  margin-left: .4rem;
  position: relative;
  top: -8px;
}