/* GRID + UTILITIES
   Minimal replacement for Bootstrap 3's grid, navbar mechanics, and a
   handful of utility classes — scoped to exactly what the Roadside
   templates use. Everything else visual (colors, typography, buttons)
   lives in site.css and is untouched from the original theme.
   ================================================== */

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

/* .container's base rule (centering + gutter) was Bootstrap's — site.css
   only overrides its width at specific breakpoints, assuming this base
   rule was still present underneath. */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class^="col-"], [class*=" col-"] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* xs: always active (mobile-first stacking) */
.col-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-offset-1 { margin-left: 8.3333%; }
.col-xs-offset-4 { margin-left: 33.3333%; }

/* sm: >= 768px */
@media (min-width: 768px) {
  .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
  .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .col-sm-offset-2 { margin-left: 16.6667%; }
}

/* md: >= 992px */
@media (min-width: 992px) {
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6  { flex: 0 0 50%; max-width: 50%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .col-md-offset-0 { margin-left: 0; }
  .col-md-offset-2 { margin-left: 16.6667%; }
}

/* general utilities */
.text-center { text-align: center; }
.pull-right { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* header: was Bootstrap's .navbar-fixed-top utility, applied in the
   original Lektor markup but dropped during the port. Always fixed to
   the top per explicit request, rather than the old scroll-triggered
   JS toggle this theme originally used. */
#mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
}

/* navbar mechanics (collapse/toggle + header/nav split), matching
   Bootstrap 3's default breakpoint at 768px, driven by
   static/js/site.js toggling .is-open */
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar-nav li {
  display: block;
}
.navbar-nav > li > a {
  padding-left: 15px;
  padding-right: 15px;
  /* was Bootstrap's .navbar-default .navbar-nav > li > a base color;
     without it the generic `a { color: #d40d9a }` rule in site.css
     wins and every nav link renders pink instead of only on
     hover/active. */
  color: #444;
}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.icon-bar {
  display: block;
  background-color: #333;
  border-radius: 1px;
}
.icon-bar + .icon-bar {
  margin-top: 4px;
}
.navbar-collapse {
  display: none;
}
.navbar-collapse.is-open {
  display: block;
}
@media (min-width: 768px) {
  /* was Bootstrap's .navbar-header { float: left } + collapse-flows-
     beside-it mechanics — replaced with a straightforward flex split
     instead of reproducing the old float-based layout. */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navbar-header {
    display: flex;
    align-items: center;
  }
  .navbar-toggle { display: none; }
  .navbar-collapse { display: block !important; }
  .navbar-nav { display: flex; }
  .navbar-nav li { display: inline-block; }
}