/* De zoekbalk (templates/partials/zoekbalk.html), op elke breedte.

   Eigen bestand omdat hij op pagina's staat met verschillende CSS: de
   scheepspagina erft niet van base.html en laadt desktop.css niet. Toen
   hier nog de widget van Captain Cruise stond, viel dat niet op, want het
   eigen formulier was daar altijd verborgen. */

/* Zoekbalk in de hero (templates/partials/zoekbalk.html) */
.dt-search-card {
  position: relative;
  margin-top: auto;      /* duwt de balk naar de onderkant van de hero */
  padding-bottom: 32px;
  z-index: 5;
}

/* Inline-variant — buiten een .dt-hero context (bv. blog body).
   Geen absolute positionering, compacter zodat de bar in een smalle
   article-kolom (~760px) niet lelijk wrapt. */
.dt-search-card--inline {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0 0 24px;
}
.dt-search-card--inline .dt-search-inner {
  max-width: 100%;  /* gebruik de volle beschikbare breedte */
  box-shadow: 0 10px 30px rgba(8, 21, 44, 0.10);
}
.dt-search-card--inline .dt-search-field {
  padding: 10px 16px;
}
.dt-search-card--inline .dt-search-field .lbl {
  font-size: 10px;
  white-space: nowrap;  /* "Vertrek vanaf" blijft op één regel */
}
.dt-search-card--inline .dt-search-field .val {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-search-card--inline .dt-search-btn {
  width: 52px;
}
/* Adembenemingsruimte tussen hero en eerstvolgende sibling-container.
   Search-card hangt nu BINNEN de hero (bottom: 32px), dus geen overhang
   meer te compenseren — alleen lichte breathing room. */
.dt-hero:has(.dt-search-card:not(.dt-search-card--inline)) + .dt-container {
  padding-top: 48px;
}
.dt-hero:has(.dt-search-card:not(.dt-search-card--inline)) + .dt-container.no-search-clear {
  padding-top: 0;  /* opt-out wanneer next-container al eigen padding heeft */
}
.dt-search-card .dt-container {
  display: flex;
  flex-direction: column;
  align-items: center;          /* horizontaal gecentreerd */
}
.dt-search-inner {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(8, 21, 44, 0.18);
  padding: 8px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  border: 1px solid var(--hairline);
}
.dt-search-field {
  padding: 14px 22px;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.dt-search-field:hover { background: var(--cream); border-radius: 999px;}
.dt-search-field:last-of-type { border-right: 0; }
.dt-search-field .lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.dt-search-field .val {
  font-size: 14px;
  color: var(--ink-soft);
}
.dt-search-btn {
  background: var(--ocean);
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4px;
}
.dt-search-btn:hover { background: var(--navy); }

/* De zoekbalk: een gewoon formulier met keuzelijsten, op de server
   opgebouwd (templates/partials/zoekbalk.html).

   Hier stonden de regels voor de widget van Captain Cruise: een banner
   voor als die niet laadde, en een gereserveerde hoogte van 600 px op
   mobiel om de CLS van 0,26 te dempen die hij veroorzaakte zodra React
   mountte. Het formulier staat nu meteen in de HTML en heeft zijn eigen
   hoogte, dus er valt niets meer te reserveren. */
.dt-search-field select.zk-keuze {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6270' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
  padding: 0 18px 0 0;
  margin: 0;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dt-search-field select.zk-keuze:focus { outline: none; }
.dt-search-field:focus-within {
  background: var(--paper);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--ocean);
}
/* Op een breed scherm is de knop een rond icoon; de tekst is er voor
   schermlezers. Op een telefoon staat hij er gewoon, zie hieronder. */
.dt-search-btn .zk-knoptekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dt-search-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Vanaf tabletbreedte staan de velden in twee kolommen (responsief.css)
   en op een telefoon onder elkaar. Een pil van 999px ziet er dan uit als
   een ei; een gewone afgeronde kaart met een brede knop eronder niet. */
@media (max-width: 1024px) {
  .dt-search-inner { border-radius: var(--r-xl); }
  .dt-search-field { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .dt-search-field:hover,
  .dt-search-field:focus-within { border-radius: var(--r-md); }
  .dt-search-btn {
    grid-column: 1 / -1;
    width: auto;
    height: 48px;
    border-radius: var(--r-md);
    gap: 8px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
  }
  .dt-search-btn .zk-knoptekst {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
}

/* Tablet: twee kolommen. Telefoon: onder elkaar. */
@media (max-width: 1024px) {
  .dt-search-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .dt-search-card { padding-bottom: 20px; }
  .dt-search-inner { grid-template-columns: 1fr; padding: 6px; }
  .dt-search-field { padding: 12px 16px; }
  .dt-search-btn { margin: 4px; }
}