/* ==========================================================================
   UTILITIES — Global Reusable Classes
   Class naming: .{property}-{value} or .{property}-{breakpoint}-{value}
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-full {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}


/* ── Display ───────────────────────────────────────────────────────────── */
.d-none        { display: none; }
.d-block       { display: block; }
.d-inline      { display: inline; }
.d-inline-block{ display: inline-block; }
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid        { display: grid; }

@media (min-width: 768px) {
  .d-md-none        { display: none; }
  .d-md-block       { display: block; }
  .d-md-flex        { display: flex; }
  .d-md-grid        { display: grid; }
}
@media (min-width: 1024px) {
  .d-lg-none        { display: none; }
  .d-lg-block       { display: block; }
  .d-lg-flex        { display: flex; }
  .d-lg-grid        { display: grid; }
}


/* ── Flexbox ───────────────────────────────────────────────────────────── */
.flex              { display: flex; }
.flex-wrap         { flex-wrap: wrap; }
.flex-nowrap       { flex-wrap: nowrap; }
.flex-col          { flex-direction: column; }
.flex-row          { flex-direction: row; }
.flex-center       { display: flex; align-items: center; justify-content: center; }
.flex-between      { display: flex; align-items: center; justify-content: space-between; }
.flex-start        { display: flex; align-items: flex-start; }
.flex-end          { display: flex; align-items: flex-end; }

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

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

.flex-1            { flex: 1; }
.flex-auto         { flex: auto; }
.flex-shrink-0     { flex-shrink: 0; }

@media (min-width: 768px) {
  .flex-md-row     { flex-direction: row; }
  .flex-md-col     { flex-direction: column; }
}
@media (min-width: 1024px) {
  .flex-lg-row     { flex-direction: row; }
}


/* ── Grid ──────────────────────────────────────────────────────────────── */
.grid              { display: grid; }
.grid-1            { display: grid; grid-template-columns: 1fr; }
.grid-2            { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3            { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4            { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-5            { display: grid; grid-template-columns: repeat(5, 1fr); }
.grid-6            { display: grid; grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1023px) {
  .grid-3          { grid-template-columns: repeat(2, 1fr); }
  .grid-4          { grid-template-columns: repeat(2, 1fr); }
  .grid-5          { grid-template-columns: repeat(2, 1fr); }
  .grid-6          { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .grid-2          { grid-template-columns: 1fr; }
  .grid-3          { grid-template-columns: 1fr; }
  .grid-4          { grid-template-columns: repeat(2, 1fr); }
  .grid-5          { grid-template-columns: repeat(2, 1fr); }
  .grid-6          { grid-template-columns: repeat(2, 1fr); }
}

/* Named grid layouts */
.grid-2-1          { display: grid; grid-template-columns: 2fr 1fr; }
.grid-1-2          { display: grid; grid-template-columns: 1fr 2fr; }
.grid-1-1          { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3-2          { display: grid; grid-template-columns: 3fr 2fr; }
.grid-2-3          { display: grid; grid-template-columns: 2fr 3fr; }

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

.grid-center       { place-items: center; }


/* ── Gap ───────────────────────────────────────────────────────────────── */
.gap-0             { gap: 0; }
.gap-1             { gap: var(--space-1); }
.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); }
.gap-10            { gap: var(--space-10); }
.gap-12            { gap: var(--space-12); }
.gap-16            { gap: var(--space-16); }

.gap-x-4           { column-gap: var(--space-4); }
.gap-x-6           { column-gap: var(--space-6); }
.gap-x-8           { column-gap: var(--space-8); }
.gap-y-4           { row-gap: var(--space-4); }
.gap-y-6           { row-gap: var(--space-6); }
.gap-y-8           { row-gap: var(--space-8); }
.gap-y-10          { row-gap: var(--space-10); }


/* ── Margin ────────────────────────────────────────────────────────────── */
.m-0               { margin: 0; }
.m-auto            { margin: auto; }
.mx-auto           { margin-left: auto; margin-right: auto; }
.my-auto           { margin-top: auto; margin-bottom: auto; }

.mt-0              { margin-top: 0; }
.mt-1              { margin-top: var(--space-1); }
.mt-2              { margin-top: var(--space-2); }
.mt-3              { margin-top: var(--space-3); }
.mt-4              { margin-top: var(--space-4); }
.mt-5              { margin-top: var(--space-5); }
.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); }
.mt-16             { margin-top: var(--space-16); }

.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); }
.mb-16             { margin-bottom: var(--space-16); }

.ml-auto           { margin-left: auto; }
.mr-auto           { margin-right: auto; }


/* ── Padding ───────────────────────────────────────────────────────────── */
.p-0               { padding: 0; }
.p-2               { padding: var(--space-2); }
.p-3               { padding: var(--space-3); }
.p-4               { padding: var(--space-4); }
.p-5               { padding: var(--space-5); }
.p-6               { padding: var(--space-6); }
.p-8               { padding: var(--space-8); }
.p-10              { padding: var(--space-10); }
.p-12              { padding: var(--space-12); }

.px-0              { padding-left: 0; padding-right: 0; }
.px-4              { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6              { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8              { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-0              { padding-top: 0; padding-bottom: 0; }
.py-4              { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6              { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8              { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10             { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12             { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16             { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20             { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24             { padding-top: var(--space-24); padding-bottom: var(--space-24); }

.pt-0              { padding-top: 0; }
.pt-4              { padding-top: var(--space-4); }
.pt-6              { padding-top: var(--space-6); }
.pt-8              { padding-top: var(--space-8); }
.pt-10             { padding-top: var(--space-10); }
.pt-12             { padding-top: var(--space-12); }
.pt-16             { padding-top: var(--space-16); }
.pt-20             { padding-top: var(--space-20); }

.pb-0              { padding-bottom: 0; }
.pb-4              { padding-bottom: var(--space-4); }
.pb-6              { padding-bottom: var(--space-6); }
.pb-8              { padding-bottom: var(--space-8); }
.pb-10             { padding-bottom: var(--space-10); }
.pb-12             { padding-bottom: var(--space-12); }
.pb-16             { padding-bottom: var(--space-16); }
.pb-20             { padding-bottom: var(--space-20); }


/* ── Typography Utilities ──────────────────────────────────────────────── */
.font-heading      { font-family: var(--font-heading); }
.font-body         { font-family: var(--font-body); }
.font-mono         { font-family: var(--font-mono); }

.fs-display        { font-size: var(--fs-display); }
.fs-h1             { font-size: var(--fs-h1); }
.fs-h2             { font-size: var(--fs-h2); }
.fs-h3             { font-size: var(--fs-h3); }
.fs-h4             { font-size: var(--fs-h4); }
.fs-h5             { font-size: var(--fs-h5); }
.fs-h6             { font-size: var(--fs-h6); }
.fs-lg             { font-size: var(--fs-body-lg); }
.fs-base           { font-size: var(--fs-body); }
.fs-sm             { font-size: var(--fs-body-sm); }
.fs-caption        { font-size: var(--fs-caption); }
.fs-badge          { font-size: var(--fs-badge); }

.fw-regular        { font-weight: var(--fw-regular); }
.fw-medium         { font-weight: var(--fw-medium); }
.fw-semibold       { font-weight: var(--fw-semibold); }
.fw-bold           { font-weight: var(--fw-bold); }

.lh-tight          { line-height: var(--lh-tight); }
.lh-heading        { line-height: var(--lh-heading); }
.lh-body           { line-height: var(--lh-body); }

.ls-tight          { letter-spacing: var(--ls-tight); }
.ls-wide           { letter-spacing: var(--ls-wide); }
.ls-caps           { letter-spacing: var(--ls-caps); text-transform: uppercase; }

.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; }
.text-decoration-none { text-decoration: none; }
.text-underline    { text-decoration: underline; }
.text-italic       { font-style: italic; }
.text-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-balance      { text-wrap: balance; }

/* Multi-line truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── Text Colors ───────────────────────────────────────────────────────── */
.text-heading      { color: var(--text-heading); }
.text-body         { color: var(--text-body); }
.text-muted        { color: var(--text-muted); }
.text-white        { color: var(--text-light); }
.text-primary      { color: var(--color-primary); }
.text-accent       { color: var(--color-accent); }
.text-green        { color: var(--color-green); }
.text-gold         { color: var(--color-gold); }
.text-sky          { color: var(--color-sky); }


/* ── Background Colors ─────────────────────────────────────────────────── */
.bg-white          { background-color: var(--color-white); }
.bg-cream          { background-color: var(--color-cream); }
.bg-gray-50        { background-color: var(--color-gray-50); }
.bg-gray-100       { background-color: var(--color-gray-100); }
.bg-primary        { background-color: var(--color-primary); }
.bg-primary-dark   { background-color: var(--color-primary-dark); }
.bg-primary-50     { background-color: var(--color-primary-50); }
.bg-accent         { background-color: var(--color-accent); }
.bg-accent-50      { background-color: var(--color-accent-50); }
.bg-green          { background-color: var(--color-green); }
.bg-green-50       { background-color: var(--color-green-50); }
.bg-gold-50        { background-color: var(--color-gold-50); }
.bg-transparent    { background-color: transparent; }


/* ── Width & Height ────────────────────────────────────────────────────── */
.w-full            { width: 100%; }
.w-auto            { width: auto; }
.h-full            { height: 100%; }
.h-auto            { height: auto; }
.min-h-screen      { min-height: 100vh; }
.max-w-none        { max-width: none; }


/* ── Position ──────────────────────────────────────────────────────────── */
.relative          { position: relative; }
.absolute          { position: absolute; }
.fixed             { position: fixed; }
.sticky            { position: sticky; }
.inset-0           { top: 0; right: 0; bottom: 0; left: 0; }
.top-0             { top: 0; }
.right-0           { right: 0; }
.bottom-0          { bottom: 0; }
.left-0            { left: 0; }


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


/* ── Border Radius ─────────────────────────────────────────────────────── */
.rounded-none      { border-radius: 0; }
.rounded-sm        { border-radius: var(--radius-sm); }
.rounded           { border-radius: var(--radius-md); }
.rounded-lg        { border-radius: var(--radius-lg); }
.rounded-xl        { border-radius: var(--radius-xl); }
.rounded-2xl       { border-radius: var(--radius-2xl); }
.rounded-full      { border-radius: var(--radius-full); }


/* ── Shadows ───────────────────────────────────────────────────────────── */
.shadow-none       { box-shadow: none; }
.shadow-xs         { box-shadow: var(--shadow-xs); }
.shadow-sm         { box-shadow: var(--shadow-sm); }
.shadow-md         { box-shadow: var(--shadow-md); }
.shadow-lg         { box-shadow: var(--shadow-lg); }
.shadow-xl         { box-shadow: var(--shadow-xl); }


/* ── Opacity ───────────────────────────────────────────────────────────── */
.opacity-0         { opacity: 0; }
.opacity-25        { opacity: 0.25; }
.opacity-50        { opacity: 0.5; }
.opacity-75        { opacity: 0.75; }
.opacity-100       { opacity: 1; }


/* ── Cursor ────────────────────────────────────────────────────────────── */
.cursor-pointer    { cursor: pointer; }
.pointer-events-none { pointer-events: none; }


/* ── Section Spacing (used by ACF Section Settings) ────────────────────── */
.section-pt-none   { padding-top: var(--section-space-none); }
.section-pt-sm     { padding-top: var(--section-space-sm); }
.section-pt-md     { padding-top: var(--section-space-md); }
.section-pt-lg     { padding-top: var(--section-space-lg); }
.section-pt-xl     { padding-top: var(--section-space-xl); }

.section-pb-none   { padding-bottom: var(--section-space-none); }
.section-pb-sm     { padding-bottom: var(--section-space-sm); }
.section-pb-lg     { padding-bottom: var(--section-space-lg); }
.section-pb-md     { padding-bottom: var(--section-space-md); }
.section-pb-xl     { padding-bottom: var(--section-space-xl); }


/* ── Decorative / Kenya Motif ──────────────────────────────────────────── */
.pattern-dots {
  background-image: radial-gradient(circle, var(--color-gray-200) 1px, transparent 1px);
  background-size: 24px 24px;
}

.wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

@media (min-width: 768px) {
  .wave-divider svg {
    height: 80px;
  }
}


/* ── Image Utilities ───────────────────────────────────────────────────── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-circle {
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* ── Placeholder / Skeleton ────────────────────────────────────────────── */
.placeholder-img {
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.placeholder-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

.placeholder-img svg {
  width: 48px;
  height: 48px;
  color: var(--color-gray-300);
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ── Visibility ────────────────────────────────────────────────────────── */
.visible           { visibility: visible; }
.invisible         { visibility: hidden; }

@media (max-width: 767px) {
  .hide-mobile     { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet     { display: none !important; }
}
@media (min-width: 1024px) {
  .hide-desktop    { display: none !important; }
}
@media (max-width: 1023px) {
  .show-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  .show-mobile-only  { display: none !important; }
}