/* BeLibre look for the LibreChecker pages: the colours, fonts and header of belibre.be */

@font-face {
  font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('playfair-display-800.woff2') format('woff2');
}

:root {
  --primary-yellow: #f5c400;
  --accent-red: #d11d1d;
  --link: #b40000;
  --dark: #212529;
  --border: #ced4da;
  --bg-light: #f9f9f9;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-titles: 'Playfair Display', Georgia, serif;
}

body { font-family: var(--font-body); color: var(--dark); }
.leaflet-container { font-family: var(--font-body); }

/* Header: white, with the yellow rule of the site's cookie banner */
#header {
  background: #fff; color: var(--dark); border-bottom: 3px solid var(--primary-yellow);
  min-height: 52px; padding: 6px 16px; gap: 12px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-link { display: flex; flex-shrink: 0; border-radius: 50%; }
.logo-link img { width: 34px; height: 34px; display: block; }
.logo-link:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.brand {
  font-family: var(--font-titles); font-weight: 800; font-size: 20px; line-height: 1.1;
  color: var(--dark); text-decoration: none; white-space: nowrap;
}

/* Controls: white with a grey border, dark when active, as the buttons on the site */
#header select, #header .switch button, #header .back, #timebar select {
  background: #fff; border: 1px solid var(--border); color: var(--dark);
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 6px; cursor: pointer; text-decoration: none;
}
#header select:hover, #header .switch button:not(:disabled):not(.active):hover,
#header .back:hover, #timebar select:hover { background: var(--bg-light); border-color: #adb5bd; }
#header .switch button.active { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 700; }
#header .info-button {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 50%; color: var(--dark); cursor: pointer;
}
#header .info-button:hover, #header .info-button:focus-visible { background: var(--dark); border-color: var(--dark); color: #fff; }