/**
 * Bootstrap-Like Shareable Utility Classes
 * Provides flexible, reusable helper classes for all templates
 *
 * @package Koladiya_Theme
 */

/* ============================================
   1. CONTAINERS
============================================ */
.container {
  width: 100%;
  max-width: var(--ki-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ki-section-px);
  padding-right: var(--ki-section-px);
}

.container-narrow {
  width: 100%;
  max-width: var(--ki-container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ki-section-px);
  padding-right: var(--ki-section-px);
}

.container-prose {
  width: 100%;
  max-width: var(--ki-container-prose);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ki-section-px);
  padding-right: var(--ki-section-px);
}

.container-fluid {
  width: 100%;
  padding-left: var(--ki-section-px);
  padding-right: var(--ki-section-px);
}

/* ============================================
   2. DISPLAY & FLEXBOX
============================================ */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }

.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }

.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* ============================================
   3. GRID SYSTEMS & LAYOUTS
============================================ */
.grid-1 { display: grid; grid-template-columns: 1fr; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ki-gap-lg); align-items: center; }
.grid-2-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ki-gap-lg); align-items: center; }
.grid-2-asym { display: grid; grid-template-columns: 5fr 4fr; gap: var(--ki-gap-lg); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ki-gap-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ki-gap-md); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-2-split, .grid-2-asym { grid-template-columns: 1fr; gap: var(--ki-gap-md); }
}

@media (max-width: 640px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
}

/* ============================================
   4. SPACING (Bootstrap Scale)
============================================ */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }
.gap-5 { gap: 32px !important; }
.gap-6 { gap: 48px !important; }

.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 32px !important; }
.mt-6 { margin-top: 48px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 32px !important; }
.mb-6 { margin-bottom: 48px !important; }

.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 24px !important; }
.p-5 { padding: 32px !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 { padding-top: 32px !important; padding-bottom: 32px !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.px-4 { padding-left: 24px !important; padding-right: 24px !important; }
.px-5 { padding-left: 32px !important; padding-right: 32px !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ============================================
   5. TYPOGRAPHY & WEIGHT HELPERS
============================================ */
.font-heading { font-family: var(--ki-font-heading); }
.font-body { font-family: var(--ki-font-body); }
.font-mono { font-family: var(--ki-font-mono); }

.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-extrabold { font-weight: 800 !important; }
.fw-black { font-weight: 900 !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Colors */
.text-ink { color: var(--ki-ink) !important; }
.text-white { color: #FFFFFF !important; }
.text-muted { color: var(--ki-g500) !important; }
.text-muted-light { color: var(--ki-g400) !important; }
.text-blue { color: var(--ki-blue-bright) !important; }
.text-emerald { color: var(--ki-emerald) !important; }

/* Shared Text Gradients */
.hero-gradient-text {
  background: var(--ki-gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-blue {
  background: var(--ki-gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-purple {
  background: var(--ki-gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-emerald {
  background: var(--ki-gradient-emerald);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   6. BACKGROUNDS & SURFACES
============================================ */
.bg-white { background: #FFFFFF !important; }
.bg-alt { background: var(--ki-g50) !important; }
.bg-dark { background: var(--ki-ink-card) !important; }
.bg-black { background: var(--ki-black) !important; }

/* ============================================
   7. BORDERS & RADII
============================================ */
.border { border: 1px solid var(--ki-border-light) !important; }
.border-dark { border: 1px solid var(--ki-border-dark) !important; }
.border-0 { border: 0 !important; }

.rounded-sm { border-radius: var(--ki-radius-sm) !important; }
.rounded-md { border-radius: var(--ki-radius-md) !important; }
.rounded-lg { border-radius: var(--ki-radius-lg) !important; }
.rounded-xl { border-radius: var(--ki-radius-xl) !important; }
.rounded-pill { border-radius: var(--ki-radius-pill) !important; }

.shadow-sm { box-shadow: var(--ki-shadow-sm) !important; }
.shadow-md { box-shadow: var(--ki-shadow-md) !important; }
.shadow-lg { box-shadow: var(--ki-shadow-lg) !important; }

/* Used by front-page markup; previously undefined. */
.border-top { border-top: 1px solid var(--ki-border-light); }
.fs-sm      { font-size: 13px; }
.pt-3       { padding-top: 16px; }

/* WordPress standard visually-hidden helper; the markup used it unstyled. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  white-space: normal;
}