/* ==========================================================================
   LAYOUT SHIM — replaces Bootstrap 4.5.3
   --------------------------------------------------------------------------
   STACK RULE: vanilla HTML, CSS and JS. No frameworks, no build step.

   Bootstrap's CSS was ~160KB and its JS needed jQuery (~30KB more), all of it
   for: a 12-column grid, a collapsing navbar, and about a dozen spacing and
   text utilities. This file provides exactly the classes the templates
   actually use, in roughly 150 lines. The navbar toggle is now ~20 lines of
   vanilla JS in static/js/nav.js.

   WHAT THIS COVERS (audited from the templates, not guessed):
     container, row, col-{lg,md,sm}-{3,4,5,6,9,10,12}
     p-5, mt-2, mr-auto, ml-auto, top-buffer, space, space_b, space_c
     d-flex, justify-content-center, align-items-center, flex-nowrap
     text-center, text-muted, small
     list-inline, alert, alert-primary, border
     collapse / collapse.show

   NOTE ON col-lg-20 AND col-md-18: several templates use these. Bootstrap's
   grid only goes to 12, so those classes never existed and never did anything
   — the elements were just block-level. Reproduced here as full-width so the
   rendering is unchanged.
   ========================================================================== */

/* ---------------------------------------------------------------- container */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 15px;
}

/* --------------------------------------------------------------------- grid */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
}

.row > [class*="col-"] {
  padding-inline: 15px;
  width: 100%;
}

/* Mobile first: every column is full width until its breakpoint. */
[class*="col-"] { padding-inline: 15px; width: 100%; }

@media (min-width: 576px) {
  .col-sm-3  { width: 25%; }
  .col-sm-6  { width: 50%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-9  { width: 75%; }
  .col-md-12 { width: 100%; }
  /* Not real Bootstrap classes — see the note above. */
  .col-md-18 { width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-4  { width: 33.3333%; }
  .col-lg-6  { width: 50%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-12 { width: 100%; }
  .col-lg-20 { width: 100%; }   /* not real Bootstrap — see note */
}

/* --------------------------------------------------------------- flex utils */
.d-flex                  { display: flex; }
.flex-nowrap             { flex-wrap: nowrap; }
.justify-content-center  { justify-content: center; }
.justify-content-evenly  { justify-content: space-evenly; }
.align-items-center      { align-items: center; }
.mr-auto                 { margin-right: auto; }
.ml-auto                 { margin-left: auto; }

/* ------------------------------------------------------------ spacing utils */
.p-5   { padding: 3rem; }
.mt-2  { margin-top: 0.5rem; }

/* These three are zukApp's own, previously defined in styles.css. Kept there;
   listed here so the inventory is complete. */

/* --------------------------------------------------------------- text utils */
.text-center { text-align: center; }
.text-muted  { color: var(--ink-muted); }
.small       { font-size: 0.875em; }

/* ---------------------------------------------------------------- list-inline */
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
}

/* ---------------------------------------------------------------- alert */
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.alert-primary {
  color: var(--accent);
  background-color: rgba(108, 180, 164, 0.08);
  border-color: rgba(108, 180, 164, 0.25);
}
.border { border: 1px solid var(--hairline); }

/* ---------------------------------------------------------------- collapse
   Bootstrap's JS toggled `.show` on a `.collapse` element. static/js/nav.js
   does the same thing, so the markup contract is unchanged. */
.collapse { display: none; }
.collapse.show { display: block; }

/* The nav's own rules in partials/nav.html set display:flex on wide screens,
   where the panel should always be visible regardless of `.show`. */
@media (min-width: 861px) {
  .sitenav__links.collapse { display: flex; }
}

/* --------------------------------------------------------- responsive media */
img, video, iframe { max-width: 100%; }