/* =====================================================
   Base — modern reset + lightweight grid
   Replaces Bootstrap 3's grid/reset (2,500+ lines -> ~120)
   Breakpoints match the original theme: 768px / 992px
===================================================== */

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

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

ul, ol { list-style: none; }

button { font: inherit; cursor: pointer; }

.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;
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---- Row / Column float grid ----
   Deliberately float-based (not flex): the original markup has several
   ".row" containers with plain, non-columned block children mixed in
   alongside "col-*" items, which only works with a clearfix grid — a
   flex container would wrongly force every child into a flex item. */
.row::after {
  content: "";
  display: table;
  clear: both;
}

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

/* Extra-small (default / mobile-first): full width */
.col-xs-12 { width: 100%; }
.col-xs-6  { width: 50%; float: left; }

/* Small: >= 768px */
@media (min-width: 768px) {
  .col-sm-6  { width: 50%; float: left; }
  .col-sm-12 { width: 100%; }
}

/* Medium: >= 992px */
@media (min-width: 992px) {
  .col-md-4  { width: 33.3333%; float: left; }
  .col-md-6  { width: 50%; float: left; }
  .col-md-12 { width: 100%; }
  .col-md-offset-4 { margin-left: 33.3333%; }
}

/* Below md, offset/columns stack full width (matches Bootstrap default behaviour) */
@media (max-width: 991px) {
  .col-md-4,
  .col-md-6,
  .col-md-12,
  .col-md-offset-4 {
    width: 100%;
    margin-left: 0;
    float: none;
  }
}

/* ---- Navbar shell (visual rules for these already live in style.css;
   this only supplies the structural/behavioural pieces Bootstrap's JS+CSS used to) ---- */
.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-toggle {
  display: none;
  order: 2;
  width: 40px;
  padding: 8px 10px;
  border: none;
  cursor: pointer;
}

.navbar-brand { order: 1; }

.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

.navbar-collapse {
  display: flex;
}

.navbar-nav {
  display: flex;
  margin: 0;
  padding: 0;
}

/* Below 992px, show/hide of .navbar-collapse is driven by the .collapse/.in
   classes toggled in js/main.js — display rules for that live in style.css. */
@media (max-width: 991px) {
  .navbar-nav { flex-direction: column; }
}