/*
 * Utility classes. Only the ones in use are kept: theme templates plus
 * Beaver Builder content in the DB, per the audit in MEMORY.md.
 * Before adding a new one, check the existing scale in tokens.css.
 * Removing one? Search the DB first; BB layouts reference these by name.
 *
 * Loaded last (see boostie_stylesheets()), so a utility on an element wins
 * over a component's base spacing, e.g. `.form-group.mb-40`.
 * Order within this file mirrors the old Sass @each output, so two
 * utilities on one element still resolve the way they did before.
 */

/* containers */
.container-md,
.container-xl {
  width: 100%;
  padding-inline: 48px;
  margin-inline: auto;

  @media (width <= 720px) {
    padding-inline: 12px;
  }
}

.container-md { max-width: 720px; }
.container-xl { max-width: 1200px; }

/* display */
.d-block { display: block; }
.d-none { display: none; }
.d-flex { display: flex; }

/* flex */
.flex-row { flex-direction: row !important; }
.flex-align-center { align-items: center; }
.flex-justify-center { justify-content: center; }
.flex-justify-between { justify-content: space-between; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink-0 { flex-shrink: 0; }

/* position */
.p-absolute { position: absolute; }
.p-relative { position: relative; }

/* type */
.font-mono { font-family: var(--font-family-mono); }
.text-meta { color: var(--text-meta-color); }
.text--medium { font-weight: var(--font-weight-medium); }

/* font sizes */
.text-8 { font-size: 8px; }
.text-10 { font-size: 10px; }
.text-12, .font-size-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.font-size-20 { font-size: 20px; }
.font-size-56 { font-size: 56px; }

/* spacing */
.mb-0 { margin-bottom: 0px; }
.mb-4 { margin-bottom: 4px; }
.mx-8 { margin-inline: 8px; }
.mt-8 { margin-top: 8px; }
.mr-8 { margin-right: 8px; }
.mb-8 { margin-bottom: 8px; }
.ml-8 { margin-left: 8px; }
.pt-8 { padding-top: 8px; }
.mb-12 { margin-bottom: 12px; }
.ml-12 { margin-left: 12px; }
.py-12 { padding-block: 12px; }
.pl-12 { padding-left: 12px; }
.mb-16 { margin-bottom: 16px; }
.my-20 { margin-block: 20px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.pt-24 { padding-top: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.pt-48 { padding-top: 48px; }
.pb-48 { padding-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }
.py-64 { padding-block: 64px; }
.pt-64 { padding-top: 64px; }
.pb-64 { padding-bottom: 64px; }
.mb-80 { margin-bottom: 80px; }
.pt-160 { padding-top: 160px; }