/* BoatDossier gedeelde basisstijlen
   Laad per pagina: <link rel="preconnect" href="https://fonts.googleapis.com">
                    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
*/

:root {
  --background:      #e8f0f5;
  --foreground:      #173a52;
  --card:            #f4f8fa;
  --card-foreground: #173a52;
  --navy:            #0b263f;
  --white:           #ffffff;
  --hub:             #55b6dd;
  --emergency:       #b84a43;
  --border:          #7a9cb2;
  --banner-border:   #456479;
  --accent:          #25a9e0;
  /* compat: boordgegevens.js injects CSS that references these */
  --horizon:         #25a9e0;
  --muted:           #7a9cb2;
  --panel-width:     460px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
}

.page {
  max-width: 540px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

/* ── Banner ── */
.banner {
  border: 1.5px solid var(--banner-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 210;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.banner-accent-line {
  height: 4px;
  background: var(--hub);
}

.banner-name-bar {
  background: var(--navy);
  padding: 15px 20px 20px;
}

.banner-label {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hub);
  margin-bottom: 5px;
}

.banner-boat-name {
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}

/* ── Content ── */
.content {
  width: min(100%, var(--panel-width));
  max-width: var(--panel-width);
  margin: 0 auto;
}

/* ── MAYDAY / NOOD ── */
.nood-btn {
  display: inline-block;
  background: var(--emergency);
  color: var(--white);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
}

/* ── Desktop: brede banner, compacte inhoud ── */
@media (min-width: 1100px) {
  .page {
    max-width: 1000px;
  }
}