/* Balmoral Chippy - Utility Classes */

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Display Utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }

/* Flexbox Utilities */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

/* Color Utilities */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }
.text-white { color: var(--white); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-light { background-color: var(--light-bg); }
.bg-dark { background-color: var(--dark-bg); }
.bg-white { background-color: var(--white); }

/* Border Utilities */
.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Height Utilities */
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Z-index */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }

/* Skip Link (Accessibility) */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Image Utilities */
.img-full-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

/* Container Utilities */
.container-narrow {
  max-width: 800px;
  margin: 0 auto;
}

.container-medium {
  max-width: 1000px;
  margin: 0 auto;
}

.container-wide {
  max-width: 1200px;
  margin: 0 auto;
}

/* Spacing Utilities */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.mt-xxl { margin-top: 3rem; }

.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }

.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }

/* Iframe Utilities */
.iframe-borderless {
  border: 0;
}

/* Table Utilities */
.table-full {
  width: 100%;
  border-collapse: collapse;
}

.table-cell-padding {
  padding: 0.4rem 0;
}

/* Text Size Utilities */
.text-sm { font-size: 0.9rem; }
.text-md { font-size: 0.9375rem; }
.text-lg { font-size: 1.125rem; }