/* ============================================================
   UTILITIES — Helper classes
   ============================================================ */

/* ---- Display ---- */
.hidden          { display: none !important; }
.block           { display: block; }
.flex            { display: flex; }
.inline-flex     { display: inline-flex; }
.grid            { display: grid; }

/* ---- Flex helpers ---- */
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.gap-2           { gap: var(--space-2); }
.gap-4           { gap: var(--space-4); }
.gap-6           { gap: var(--space-6); }
.gap-8           { gap: var(--space-8); }

/* ---- Text alignment ---- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* ---- Text colors ---- */
.text-primary     { color: var(--color-primary); }
.text-primary-dk  { color: var(--color-primary-dark); }
.text-muted       { color: var(--color-text-muted); }
.text-light       { color: var(--color-text-light); }
.text-white       { color: var(--color-white); }
.text-accent      { color: var(--color-accent); }

/* ---- Background colors ---- */
.bg-white    { background-color: var(--color-bg); }
.bg-off      { background-color: var(--color-bg-off); }
.bg-sage     { background-color: var(--color-bg-sage); }
.bg-warm     { background-color: var(--color-bg-warm); }
.bg-dark     { background-color: var(--color-bg-dark); }

/* ---- Font helpers ---- */
.font-serif  { font-family: var(--font-serif); }
.font-sans   { font-family: var(--font-sans); }
.font-bold   { font-weight: 700; }
.font-normal { font-weight: 400; }

/* ---- Spacing utilities ---- */
.mt-0        { margin-top: 0; }
.mt-4        { margin-top: var(--space-4); }
.mt-6        { margin-top: var(--space-6); }
.mt-8        { margin-top: var(--space-8); }
.mt-12       { margin-top: var(--space-12); }
.mb-0        { margin-bottom: 0; }
.mb-4        { margin-bottom: var(--space-4); }
.mb-6        { margin-bottom: var(--space-6); }
.mb-8        { margin-bottom: var(--space-8); }
.mb-12       { margin-bottom: var(--space-12); }
.pt-0        { padding-top: 0; }
.pt-4        { padding-top: var(--space-4); }
.pt-8        { padding-top: var(--space-8); }

/* ---- Max widths ---- */
.max-w-content { max-width: var(--container-content); }
.max-w-narrow  { max-width: var(--container-narrow); }
.max-w-lg      { max-width: var(--container-lg); }
.max-w-xl      { max-width: var(--container-xl); }
.mx-auto       { margin-inline: auto; }

/* ---- Borders ---- */
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* ---- Responsive visibility ---- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .site-footer,
  .main-navigation,
  .menu-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}