/* ============================================================
   UTILITIES.CSS — rukayatrauf.com
   Single-purpose utility classes.
   Loaded last so utilities win specificity over components.

   Convention: use these to avoid inline style="" in HTML.
   Do not put visual design here — that belongs in components.
   ============================================================ */

/* ── Margin bottom ───────────────────────────────────────────── */
.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: var(--space-1); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-5   { margin-bottom: var(--space-5); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-10  { margin-bottom: var(--space-10); }
.mb-12  { margin-bottom: var(--space-12); }

/* ── Margin top ──────────────────────────────────────────────── */
.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-10  { margin-top: var(--space-10); }
.mt-12  { margin-top: var(--space-12); }

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

/* ── Text colour ─────────────────────────────────────────────── */
.text-navy   { color: var(--color-navy); }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-white  { color: #fff; }
.text-gold   { color: var(--color-gold); }

/* ── Text size ───────────────────────────────────────────────── */
.text-body-l  { font-size: var(--text-body-l); line-height: var(--leading-loose); }
.text-body    { font-size: var(--text-body);   line-height: var(--leading-relaxed); }
.text-body-s  { font-size: var(--text-body-s); line-height: var(--leading-relaxed); }
.text-caption { font-size: var(--text-caption); line-height: var(--leading-normal); }

/* ── Font family ─────────────────────────────────────────────── */
.font-display  { font-family: var(--font-display); }
.font-heading  { font-family: var(--font-heading); }
.font-body     { font-family: var(--font-body); }
.italic        { font-style: italic; }
.not-italic    { font-style: normal; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* ── Section backgrounds ─────────────────────────────────────── */
.bg-cream  { background: var(--color-bg); }
.bg-sand   { background: var(--color-bg-alt); }
.bg-navy   { background: var(--color-navy); }
.bg-white  { background: var(--color-white); }

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

/* ── Display ─────────────────────────────────────────────────── */
.hidden         { display: none; }
.block          { display: block; }
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.flex-1 { flex: 1; }

/* ── Width / max-width ───────────────────────────────────────── */
.w-full      { width: 100%; }
.max-w-prose { max-width: var(--max-width-prose); }
.max-w-site  { max-width: var(--max-width); }
.mx-auto     { margin-left: auto; margin-right: auto; }

/* ── Position ────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* ── Overflow ────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Pointer events ──────────────────────────────────────────── */
.pointer-none    { pointer-events: none; }
.select-none     { user-select: none; }

/* ── Visibility / screen reader ──────────────────────────────── */
.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;
}

/* ── Section heading helpers ─────────────────────────────────── */
/* Colour helpers for h2 inside sections */
.h2-navy  { color: var(--color-navy); }
.h2-white { color: #fff; }

/* ── Overline colour helpers ─────────────────────────────────── */
.overline-muted  { color: var(--color-text-muted); }
.overline-accent { color: var(--color-accent); }
.overline-light  { color: rgba(255, 255, 255, 0.4); }
.overline-gold   { color: var(--color-gold); }

/* ── Miscellaneous ───────────────────────────────────────────── */
.list-none      { list-style: none; }
.cursor-default { cursor: default; }
.fit-content    { width: fit-content; }
.line-clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }