/*
 * Marketingbright — Shared Utility Classes
 *
 * Only patterns used 3+ times across the codebase are promoted here.
 * Do not add one-off classes — keep those in the relevant block or template CSS.
 *
 * All classes use the mb- prefix.
 */

/* =========================================================================
   Container
   ========================================================================= */

.mb-container {
  width: 100%;
  max-width: var(--mb-container-max);
  margin-inline: auto;
  padding-inline: var(--mb-space-4);
}

.mb-container--wide {
  max-width: var(--mb-container-wide);
}

.mb-container--text {
  max-width: var(--mb-container-text);
}

.mb-container--narrow {
  max-width: var(--mb-container-narrow);
}

/* =========================================================================
   Section spacing
   ========================================================================= */

.mb-section {
  padding-block: var(--mb-space-16);
}

.mb-section--sm {
  padding-block: var(--mb-space-8);
}

.mb-section--lg {
  padding-block: var(--mb-space-24);
}

/* =========================================================================
   Typography
   ========================================================================= */

.mb-text-sm   { font-size: var(--mb-text-sm); }
.mb-text-base { font-size: var(--mb-text-base); }
.mb-text-lg   { font-size: var(--mb-text-lg); }
.mb-text-xl   { font-size: var(--mb-text-xl); }
.mb-text-2xl  { font-size: var(--mb-text-2xl); }
.mb-text-3xl  { font-size: var(--mb-text-3xl); }
.mb-text-4xl  { font-size: var(--mb-text-4xl); }

.mb-text-muted  { color: var(--mb-color-text-muted); }
.mb-text-center { text-align: center; }

/* =========================================================================
   Flex utilities
   ========================================================================= */

.mb-flex         { display: flex; }
.mb-flex-col     { flex-direction: column; }
.mb-items-center { align-items: center; }
.mb-justify-center { justify-content: center; }
.mb-gap-4        { gap: var(--mb-space-4); }
.mb-gap-6        { gap: var(--mb-space-6); }
.mb-gap-8        { gap: var(--mb-space-8); }

/* =========================================================================
   Visually hidden (accessible, not display:none)
   ========================================================================= */

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

/* =========================================================================
   Admin bar offset for fixed headers
   ========================================================================= */

.mb-header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.admin-bar .mb-header--fixed {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .mb-header--fixed {
    top: 46px;
  }
}