/**
 * timeslot.ie Marketing Site — Utility Classes
 *
 * Lightweight utility classes for common layout, typography, and spacing needs.
 * All utilities use the --ts-* design tokens from site-tokens.css.
 *
 * Naming convention: ts-{property}-{value}
 * Responsive variants: ts-{breakpoint}:{property}-{value}
 */

/* ======================================================================
   TEXT ALIGNMENT
   ====================================================================== */
.ts-text-center { text-align: center; }
.ts-text-left { text-align: start; }
.ts-text-right { text-align: end; }

/* ======================================================================
   FONT WEIGHT
   ====================================================================== */
.ts-font-bold { font-weight: var(--ts-font-weight-bold); }
.ts-font-semibold { font-weight: var(--ts-font-weight-semibold); }
.ts-font-medium { font-weight: var(--ts-font-weight-medium); }
.ts-font-normal { font-weight: var(--ts-font-weight-normal); }

/* ======================================================================
   TEXT COLOR
   ====================================================================== */
.ts-text-primary { color: var(--ts-text-primary); }
.ts-text-secondary { color: var(--ts-text-secondary); }
.ts-text-muted { color: var(--ts-text-muted); }
.ts-text-brand { color: var(--ts-primary); }
.ts-text-success { color: var(--ts-success-text); }
.ts-text-danger { color: var(--ts-danger-text); }

/* ======================================================================
   FONT SIZE
   ====================================================================== */
.ts-text-xs { font-size: var(--ts-font-size-xs); }
.ts-text-sm { font-size: var(--ts-font-size-sm); }
.ts-text-base { font-size: var(--ts-font-size-base); }
.ts-text-lg { font-size: var(--ts-font-size-lg); }
.ts-text-xl { font-size: var(--ts-font-size-xl); }
.ts-text-2xl { font-size: var(--ts-font-size-2xl); }

/* ======================================================================
   SPACING -- MARGIN
   Using design token scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16
   ====================================================================== */

/* Margin top */
.ts-mt-0 { margin-top: 0; }
.ts-mt-1 { margin-top: var(--ts-space-1); }
.ts-mt-2 { margin-top: var(--ts-space-2); }
.ts-mt-3 { margin-top: var(--ts-space-3); }
.ts-mt-4 { margin-top: var(--ts-space-4); }
.ts-mt-5 { margin-top: var(--ts-space-5); }
.ts-mt-6 { margin-top: var(--ts-space-6); }
.ts-mt-8 { margin-top: var(--ts-space-8); }
.ts-mt-10 { margin-top: var(--ts-space-10); }
.ts-mt-12 { margin-top: var(--ts-space-12); }
.ts-mt-16 { margin-top: var(--ts-space-16); }

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

/* Margin inline (horizontal) */
.ts-mx-auto { margin-inline: auto; }

/* Padding */
.ts-p-0 { padding: 0; }
.ts-p-4 { padding: var(--ts-space-4); }
.ts-p-6 { padding: var(--ts-space-6); }
.ts-p-8 { padding: var(--ts-space-8); }

.ts-px-4 { padding-inline: var(--ts-space-4); }
.ts-px-6 { padding-inline: var(--ts-space-6); }
.ts-py-4 { padding-block: var(--ts-space-4); }
.ts-py-8 { padding-block: var(--ts-space-8); }
.ts-py-12 { padding-block: var(--ts-space-12); }

/* ======================================================================
   DISPLAY
   ====================================================================== */
.ts-hidden { display: none; }
.ts-block { display: block; }
.ts-flex { display: flex; }
.ts-inline-flex { display: inline-flex; }
.ts-inline { display: inline; }

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

.ts-gap-1 { gap: var(--ts-space-1); }
.ts-gap-2 { gap: var(--ts-space-2); }
.ts-gap-3 { gap: var(--ts-space-3); }
.ts-gap-4 { gap: var(--ts-space-4); }
.ts-gap-6 { gap: var(--ts-space-6); }
.ts-gap-8 { gap: var(--ts-space-8); }

/* ======================================================================
   WIDTH
   ====================================================================== */
.ts-w-full { width: 100%; }
.ts-max-w-prose { max-width: 65ch; }

/* ======================================================================
   BORDERS
   ====================================================================== */
.ts-border { border: 1px solid var(--ts-border); }
.ts-border-t { border-top: 1px solid var(--ts-border); }
.ts-border-b { border-bottom: 1px solid var(--ts-border); }
.ts-rounded { border-radius: var(--ts-radius-md); }
.ts-rounded-lg { border-radius: var(--ts-radius-lg); }

/* ======================================================================
   BACKGROUND
   ====================================================================== */
.ts-bg-alt { background-color: var(--ts-bg-alt); }
.ts-bg-surface { background-color: var(--ts-surface); }
.ts-bg-elevated { background-color: var(--ts-bg-elevated); }

/* ======================================================================
   VISUALLY HIDDEN (screen-reader only)
   Accessible content that is not visually rendered.
   ====================================================================== */
.ts-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;
}

/* Make element visible again if focused (for skip-link pattern) */
.ts-sr-only--focusable:focus,
.ts-sr-only--focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: var(--ts-space-2) var(--ts-space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ======================================================================
   FOCUS RING (keyboard users)
   Apply to any element that needs a focus ring.
   ====================================================================== */
.ts-focus-ring:focus-visible {
  outline: var(--ts-focus-ring-width) solid var(--ts-focus-ring-color);
  outline-offset: var(--ts-focus-ring-offset);
}

/* ======================================================================
   RESPONSIVE VISIBILITY
   Show/hide elements at different breakpoints.
   ====================================================================== */

/* Hidden on mobile, visible at md (768px+) */
.ts-hidden-mobile {
  display: none;
}

/* Visible on mobile only, hidden at md (768px+) */
.ts-hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .ts-hidden-mobile {
    display: block;
  }

  .ts-hidden-desktop {
    display: none;
  }

  /* Responsive text alignment */
  .ts-md\:text-left { text-align: start; }
  .ts-md\:text-center { text-align: center; }

  /* Responsive flex direction */
  .ts-md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .ts-lg\:text-left { text-align: start; }
}

/* ======================================================================
   TRUNCATION
   ====================================================================== */
.ts-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}