/* Site-specific additions on top of the Bootswatch "Brite" theme (bootstrap.min.css).
   Keep this file small. Use Bootstrap utility classes in the HTML where possible. */

html { scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Inline SVG icons (see sprite at top of index.html) */
.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 2.25rem; height: 2.25rem; }
.icon-check { width: 1.5rem; height: 1.5rem; color: var(--bs-primary-text-emphasis); }

/* Hazard-stripe divider in the theme colours */
.hazard {
  height: 12px;
  background: repeating-linear-gradient(-45deg, #000 0 14px, var(--bs-primary) 14px 28px);
  border-bottom: 1px solid #000;
}

/* "What I work on" tiles: same black outline + offset shadow as Brite cards/buttons */
.asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 1.25rem .75rem;
  text-align: center;
  font-weight: 700;
  background: var(--bs-body-bg);
  border: 1px solid #000;
  border-radius: var(--bs-border-radius);
  box-shadow: 3px 3px 0 0 #000;
}

.card { box-shadow: 3px 3px 0 0 #000; }

/* Sticky call button on phones */
.call-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  padding: .75rem;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  body { padding-bottom: 5rem; }
}