/* ============================================================
   Van Sonsbeek Koerierservice — huisstijl
   Tokens: --vsred #8F0B00 | --vsblue #080052
   ============================================================ */

:root {
  --vsred:      #8F0B00;
  --vsred-dark: #6b0800;
  --vsblue:     #080052;
  --vslgray:    #F5F5F5;
  --vsmgray:    #777777;
  --vsdgray:    #222222;
}

/* ---- Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-behavior wordt via JS geregeld om conflicten te voorkomen */

body {
  font-family: 'Inter', sans-serif;
  color: var(--vsdgray);
  -webkit-font-smoothing: antialiased;
}

/* ---- Section heading -------------------------------------- */
.section-heading {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--vsblue);
  line-height: 1.2;
}

/* ---- Buttons ---------------------------------------------- */
.btn-primary {
  display: inline-block;
  background: var(--vsred);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--vsred);
  transition: background 0.18s, border-color 0.18s;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--vsred-dark);
  border-color: var(--vsred-dark);
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--vsred) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--vsred);
  transition: background 0.18s;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: rgba(143, 11, 0, 0.07);
}

.btn-secondary-white {
  display: inline-block;
  background: transparent;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid #fff;
  transition: background 0.18s;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.btn-secondary-white:hover,
.btn-secondary-white:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

/* ---- Hero overlay ----------------------------------------- */
/* Mobiel: donker onderaan (tekst leesbaar), transparant bovenaan (bus zichtbaar) */
.hero-overlay {
  background: linear-gradient(to top, rgba(8,0,82,0.95) 0%, rgba(8,0,82,0.75) 45%, rgba(8,0,82,0.1) 100%);
}
/* Desktop: donker links (tekst), transparant rechts (bus) */
@media (min-width: 768px) {
  .hero-overlay {
    background: linear-gradient(to right, rgba(8,0,82,0.88) 0%, rgba(8,0,82,0.7) 28%, rgba(8,0,82,0.2) 50%, rgba(8,0,82,0.0) 68%);
  }
}

/* ---- Service cards ---------------------------------------- */
.service-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(8, 0, 82, 0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(8, 0, 82, 0.13);
}
.service-icon {
  color: var(--vsred);
  margin-bottom: 0.75rem;
}

/* ---- Review card ------------------------------------------ */
.review-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(8, 0, 82, 0.07);
}

/* ---- Routeplanner inputs ---------------------------------- */
.address-input {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 2px solid #d8d8d8;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--vsdgray);
  background: #fff;
  transition: border-color 0.18s;
  outline: none;
}
.address-input:focus {
  border-color: var(--vsblue);
}

/* Suggestions dropdown */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #d0d0d0;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  list-style: none;
  padding: 0;
  margin: 0;
}
.suggestions-item {
  padding: 0.6rem 0.875rem;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  color: var(--vsdgray);
  line-height: 1.4;
}
.suggestions-item:last-child { border-bottom: none; }
.suggestions-item:hover,
.suggestions-item:focus {
  background: var(--vslgray);
  color: var(--vsblue);
}

/* ---- Form fields ------------------------------------------ */
.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vsblue);
  margin-bottom: 0.3rem;
}

.form-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #d0d0d0;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: var(--vsdgray);
  background: #fff;
  transition: border-color 0.18s;
  outline: none;
}
.form-input:focus {
  border-color: var(--vsblue);
}
.form-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--vsred);
}

/* ---- Hamburger animation ---------------------------------- */
#hamburger span {
  transition: transform 0.22s ease, opacity 0.22s ease;
  display: block;
}

/* ---- Accessibility: focus ring ---------------------------- */
:focus-visible {
  outline: 2px solid var(--vsblue);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--vsred);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Reviews carousel ------------------------------------- */
.rc-outer {
  overflow: hidden;
  padding-bottom: 6px; /* voorkomt afsnijden van card-shadow */
}
.rc-track {
  display: flex;
  gap: 20px;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
/* Breedte per kaart wordt door JS ingesteld; default=100% werkt ook zonder JS */
.rc-card {
  flex-shrink: 0;
  width: 100%;
}
/* Pijlknoppen */
.rc-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--vsblue);
  background: #fff;
  color: var(--vsblue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.rc-btn:hover  { background: var(--vsblue); color: #fff; }
.rc-btn:disabled { opacity: 0.3; cursor: default; }
/* Dot-indicatoren */
.rc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8c8c8;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.rc-dot.active { background: var(--vsred); transform: scale(1.35); }

/* ---- Leaflet map styling ---------------------------------- */
.leaflet-container {
  font-family: 'Inter', sans-serif;
  /* Sluit de hoge Leaflet-z-indices (200-700) op binnen de kaart,
     zodat ze nooit boven de sticky header uitkomen. */
  isolation: isolate;
}