@import "bootstrap/bootstrap";

:root {
  --bs-primary: #004a6f;
  --bs-secondary: #009ee3;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #00a194;
  --bs-light: #eff0f1;
  --bs-dark: #535455;
  
  //--bs-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-font-size: 1.1rem;
  --bs-body-line-height: 1.5;
}

// Keep the full-bleed `.banner` from adding a horizontal scrollbar
// (100vw is wider than the viewport when a vertical scrollbar is shown).
html {
  overflow-x: hidden;
}

body {
  font-family: var(--bs-font-sans-serif);
  line-height: var(--bs-body-line-height);
  color: var(--bs-dark);
}

h1, h2, h3, h4, h5 {
  color: var(--bs-primary);
}

// Navigation customization
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  &-brand {
    font-weight: 700;
    font-size: 1.25rem;
  }
}

// Card customization
.card {
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform 0.2s, box-shadow 0.2s;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
}

// Footer customization
.footer {
  background-color: var(--bs-dark);
  color: var(--bs-dark);
  padding: 40px 20px 20px;
  margin-top: 60px;
  border-top: 1px solid #dee2e6;

  a {
    color: inherit;
    text-decoration: none;
  }
}

// Full-bleed banner / hero image: spans the viewport width while the
// surrounding page content stays within `.container`. Works from inside
// any centred `.container` because the horizontal margins cancel out the
// container offset (50% of the parent - 50% of the viewport).
.banner {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 2rem;
}

// When the banner is the first thing in the page body, pull it flush
// against the navbar by cancelling the layout's top padding (`py-5`).
.content-body > .banner:first-child,
.content-body > p:first-child > .banner:only-child {
  margin-top: -3rem;
}