/* =====================================================
   UTILITIES.CSS — Replaces Tailwind CDN dependency
   All layout utility classes used across PHP pages
   ===================================================== */

/* ===== CONTAINER ===== */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-7xl { max-width: 80rem; }   /* 1280px */
.max-w-3xl { max-width: 48rem; }   /* 768px */

/* ===== HORIZONTAL PADDING (page gutter) ===== */
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }

/* ===== VERTICAL PADDING ===== */
.py-4  { padding-top: 1rem;    padding-bottom: 1rem; }

/* ===== MARGIN TOP ===== */
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }

/* ===== GAP ===== */
.gap-3  { gap: 0.75rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-48 { gap: 12rem; }

/* ===== FLEX ===== */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ===== GRID ===== */
.grid { display: grid; }

/* ===== WIDTH / HEIGHT ===== */
.w-full { width: 100%; }

/* ===== POSITION ===== */
.relative { position: relative; }
.z-10 { z-index: 10; }

/* ===== TEXT ===== */
.text-center { text-align: center; }

/* ===== MISC ===== */
.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;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

  /* lg: grid-template-columns with arbitrary values used in PHP */
  /* These are written inline via style="" instead */
}

@media (min-width: 1280px) {
  .xl\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ===== NARROW CONTAINER (FAQ, blog etc) ===== */
.narrow { max-width: 48rem; }

/* ===== INLINE MARGIN TOP HELPERS (used on elements within pages) ===== */
.mt-4  { margin-top: 1rem !important; }
.mt-6  { margin-top: 1.5rem !important; }
.mt-8  { margin-top: 2rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-14 { margin-top: 3.5rem !important; }

/* ===== INLINE GRID HELPERS ===== */
.grid { display: grid; }

.gap-6 { gap: 1.5rem; }

/* lg:grid-cols-3 */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Spacing utilities (generated from master.css tokens) ── */
.mt-0   { margin-top: 0 !important; }
.mt-xs  { margin-top: var(--space-xs) !important; }
.mt-sm  { margin-top: var(--space-sm) !important; }
.mt-md  { margin-top: var(--space-md) !important; }
.mt-lg  { margin-top: var(--space-lg) !important; }
.mt-xl  { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }
.mt-4xl { margin-top: var(--space-4xl) !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-sm  { margin-bottom: var(--space-sm) !important; }
.mb-md  { margin-bottom: var(--space-md) !important; }
.mb-lg  { margin-bottom: var(--space-lg) !important; }
.mb-xl  { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }

.pt-xl  { padding-top: var(--space-xl) !important; }
.pb-xl  { padding-bottom: var(--space-xl) !important; }

.gap-sm { gap: var(--grid-gap-sm) !important; }
.gap-md { gap: var(--grid-gap) !important; }
.gap-lg { gap: var(--grid-gap-lg) !important; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.max-w-prose { max-width: 68ch; }
.max-w-sm    { max-width: 480px; }
.w-full      { width: 100%; }