/* ========================================
   CUSTOM UTILITIES
   Only utilities NOT provided by Bootstrap
   ======================================== */

/* ========================================
   CUSTOM SPACING UTILITIES
   ======================================== */

/* Space Scale Utilities (--space-0 through --space-24) */

/* Margin Utilities using Space Scale */
.m-0 {
  margin: var(--space-0) !important;
}

.m-1 {
  margin: var(--space-1) !important;
}

.m-2 {
  margin: var(--space-3) !important;
}

.m-3 {
  margin: var(--space-5) !important;
}

.m-4 {
  margin: var(--space-7) !important;
}

.m-5 {
  margin: var(--space-11) !important;
}

.m-6 {
  margin: var(--space-14) !important;
}

.m-7 {
  margin: var(--space-17) !important;
}

.m-8 {
  margin: var(--space-20) !important;
}

.m-9 {
  margin: var(--space-21) !important;
}

.m-10 {
  margin: var(--space-22) !important;
}

.m-11 {
  margin: var(--space-23) !important;
}

.m-12 {
  margin: var(--space-24) !important;
}

/* Margin Top */
.mt-0 {
  margin-top: var(--space-0) !important;
}

.mt-1 {
  margin-top: var(--space-1) !important;
}

.mt-2 {
  margin-top: var(--space-3) !important;
}

.mt-3 {
  margin-top: var(--space-5) !important;
}

.mt-4 {
  margin-top: var(--space-7) !important;
}

.mt-5 {
  margin-top: var(--space-11) !important;
}

.mt-6 {
  margin-top: var(--space-14) !important;
}

.mt-7 {
  margin-top: var(--space-17) !important;
}

.mt-8 {
  margin-top: var(--space-20) !important;
}

.mt-9 {
  margin-top: var(--space-21) !important;
}

.mt-10 {
  margin-top: var(--space-22) !important;
}

.mt-11 {
  margin-top: var(--space-23) !important;
}

.mt-12 {
  margin-top: var(--space-24) !important;
}

/* Margin Bottom */
.mb-0 {
  margin-bottom: var(--space-0) !important;
}

.mb-1 {
  margin-bottom: var(--space-1) !important;
}

.mb-2 {
  margin-bottom: var(--space-3) !important;
}

.mb-3 {
  margin-bottom: var(--space-5) !important;
}

.mb-4 {
  margin-bottom: var(--space-7) !important;
}

.mb-5 {
  margin-bottom: var(--space-11) !important;
}

.mb-6 {
  margin-bottom: var(--space-14) !important;
}

.mb-7 {
  margin-bottom: var(--space-17) !important;
}

.mb-8 {
  margin-bottom: var(--space-20) !important;
}

.mb-9 {
  margin-bottom: var(--space-21) !important;
}

.mb-10 {
  margin-bottom: var(--space-22) !important;
}

.mb-11 {
  margin-bottom: var(--space-23) !important;
}

.mb-12 {
  margin-bottom: var(--space-24) !important;
}

/* Margin Vertical (Top + Bottom) */
.my-0 {
  margin-top: var(--space-0) !important;
  margin-bottom: var(--space-0) !important;
}

.my-1 {
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-1) !important;
}

.my-2 {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

.my-3 {
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
}

.my-4 {
  margin-top: var(--space-7) !important;
  margin-bottom: var(--space-7) !important;
}

.my-5 {
  margin-top: var(--space-11) !important;
  margin-bottom: var(--space-11) !important;
}

.my-6 {
  margin-top: var(--space-14) !important;
  margin-bottom: var(--space-14) !important;
}

.my-7 {
  margin-top: var(--space-17) !important;
  margin-bottom: var(--space-17) !important;
}

.my-8 {
  margin-top: var(--space-20) !important;
  margin-bottom: var(--space-20) !important;
}

.my-9 {
  margin-top: var(--space-21) !important;
  margin-bottom: var(--space-21) !important;
}

.my-10 {
  margin-top: var(--space-22) !important;
  margin-bottom: var(--space-22) !important;
}

.my-11 {
  margin-top: var(--space-23) !important;
  margin-bottom: var(--space-23) !important;
}

.my-12 {
  margin-top: var(--space-24) !important;
  margin-bottom: var(--space-24) !important;
}

/* Margin Horizontal (Left + Right) */
.mx-0 {
  margin-left: var(--space-0) !important;
  margin-right: var(--space-0) !important;
}

.mx-1 {
  margin-left: var(--space-1) !important;
  margin-right: var(--space-1) !important;
}

.mx-2 {
  margin-left: var(--space-3) !important;
  margin-right: var(--space-3) !important;
}

.mx-3 {
  margin-left: var(--space-5) !important;
  margin-right: var(--space-5) !important;
}

.mx-4 {
  margin-left: var(--space-7) !important;
  margin-right: var(--space-7) !important;
}

.mx-5 {
  margin-left: var(--space-11) !important;
  margin-right: var(--space-11) !important;
}

.mx-6 {
  margin-left: var(--space-14) !important;
  margin-right: var(--space-14) !important;
}

.mx-7 {
  margin-left: var(--space-17) !important;
  margin-right: var(--space-17) !important;
}

.mx-8 {
  margin-left: var(--space-20) !important;
  margin-right: var(--space-20) !important;
}

.mx-9 {
  margin-left: var(--space-21) !important;
  margin-right: var(--space-21) !important;
}

.mx-10 {
  margin-left: var(--space-22) !important;
  margin-right: var(--space-22) !important;
}

.mx-11 {
  margin-left: var(--space-23) !important;
  margin-right: var(--space-23) !important;
}

.mx-12 {
  margin-left: var(--space-24) !important;
  margin-right: var(--space-24) !important;
}

/* Padding Utilities using Space Scale */
.p-0 {
  padding: var(--space-0) !important;
}

.p-1 {
  padding: var(--space-1) !important;
}

.p-2 {
  padding: var(--space-3) !important;
}

.p-3 {
  padding: var(--space-5) !important;
}

.p-4 {
  padding: var(--space-7) !important;
}

.p-5 {
  padding: var(--space-11) !important;
}

.p-6 {
  padding: var(--space-14) !important;
}

.p-7 {
  padding: var(--space-17) !important;
}

.p-8 {
  padding: var(--space-20) !important;
}

.p-9 {
  padding: var(--space-21) !important;
}

.p-10 {
  padding: var(--space-22) !important;
}

.p-11 {
  padding: var(--space-23) !important;
}

.p-12 {
  padding: var(--space-24) !important;
}

/* Padding Top */
.pt-0 {
  padding-top: var(--space-0) !important;
}

.pt-1 {
  padding-top: var(--space-1) !important;
}

.pt-2 {
  padding-top: var(--space-3) !important;
}

.pt-3 {
  padding-top: var(--space-5) !important;
}

.pt-4 {
  padding-top: var(--space-7) !important;
}

.pt-5 {
  padding-top: var(--space-11) !important;
}

.pt-6 {
  padding-top: var(--space-14) !important;
}

.pt-7 {
  padding-top: var(--space-17) !important;
}

.pt-8 {
  padding-top: var(--space-20) !important;
}

.pt-9 {
  padding-top: var(--space-21) !important;
}

.pt-10 {
  padding-top: var(--space-22) !important;
}

.pt-11 {
  padding-top: var(--space-23) !important;
}

.pt-12 {
  padding-top: var(--space-24) !important;
}

/* Padding Bottom */
.pb-0 {
  padding-bottom: var(--space-0) !important;
}

.pb-1 {
  padding-bottom: var(--space-1) !important;
}

.pb-2 {
  padding-bottom: var(--space-3) !important;
}

.pb-3 {
  padding-bottom: var(--space-5) !important;
}

.pb-4 {
  padding-bottom: var(--space-7) !important;
}

.pb-5 {
  padding-bottom: var(--space-11) !important;
}

.pb-6 {
  padding-bottom: var(--space-14) !important;
}

.pb-7 {
  padding-bottom: var(--space-17) !important;
}

.pb-8 {
  padding-bottom: var(--space-20) !important;
}

.pb-9 {
  padding-bottom: var(--space-21) !important;
}

.pb-10 {
  padding-bottom: var(--space-22) !important;
}

.pb-11 {
  padding-bottom: var(--space-23) !important;
}

.pb-12 {
  padding-bottom: var(--space-24) !important;
}

/* Padding Vertical (Top + Bottom) */
.py-0 {
  padding-top: var(--space-0) !important;
  padding-bottom: var(--space-0) !important;
}

.py-1 {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}

.py-2 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

.py-3 {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}

.py-4 {
  padding-top: var(--space-7) !important;
  padding-bottom: var(--space-7) !important;
}

.py-5 {
  padding-top: var(--space-11) !important;
  padding-bottom: var(--space-11) !important;
}

.py-6 {
  padding-top: var(--space-14) !important;
  padding-bottom: var(--space-14) !important;
}

.py-7 {
  padding-top: var(--space-17) !important;
  padding-bottom: var(--space-17) !important;
}

.py-8 {
  padding-top: var(--space-20) !important;
  padding-bottom: var(--space-20) !important;
}

.py-9 {
  padding-top: var(--space-21) !important;
  padding-bottom: var(--space-21) !important;
}

.py-10 {
  padding-top: var(--space-22) !important;
  padding-bottom: var(--space-22) !important;
}

.py-11 {
  padding-top: var(--space-23) !important;
  padding-bottom: var(--space-23) !important;
}

.py-12 {
  padding-top: var(--space-24) !important;
  padding-bottom: var(--space-24) !important;
}

/* Padding Horizontal (Left + Right) */
.px-0 {
  padding-left: var(--space-0) !important;
  padding-right: var(--space-0) !important;
}

.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}

.px-2 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

.px-3 {
  padding-left: var(--space-5) !important;
  padding-right: var(--space-5) !important;
}

.px-4 {
  padding-left: var(--space-7) !important;
  padding-right: var(--space-7) !important;
}

.px-5 {
  padding-left: var(--space-11) !important;
  padding-right: var(--space-11) !important;
}

.px-6 {
  padding-left: var(--space-14) !important;
  padding-right: var(--space-14) !important;
}

.px-7 {
  padding-left: var(--space-17) !important;
  padding-right: var(--space-17) !important;
}

.px-8 {
  padding-left: var(--space-20) !important;
  padding-right: var(--space-20) !important;
}

.px-9 {
  padding-left: var(--space-21) !important;
  padding-right: var(--space-21) !important;
}

.px-10 {
  padding-left: var(--space-22) !important;
  padding-right: var(--space-22) !important;
}

.px-11 {
  padding-left: var(--space-23) !important;
  padding-right: var(--space-23) !important;
}

.px-12 {
  padding-left: var(--space-24) !important;
  padding-right: var(--space-24) !important;
}

/* Gap Utilities using Space Scale */
.gap-0 {
  gap: var(--space-0) !important;
}

.gap-1 {
  gap: var(--space-1) !important;
}

.gap-2 {
  gap: var(--space-3) !important;
}

.gap-3 {
  gap: var(--space-5) !important;
}

.gap-4 {
  gap: var(--space-7) !important;
}

.gap-5 {
  gap: var(--space-11) !important;
}

.gap-6 {
  gap: var(--space-14) !important;
}

.gap-7 {
  gap: var(--space-17) !important;
}

.gap-8 {
  gap: var(--space-20) !important;
}

.gap-9 {
  gap: var(--space-21) !important;
}

.gap-10 {
  gap: var(--space-22) !important;
}

.gap-11 {
  gap: var(--space-23) !important;
}

.gap-12 {
  gap: var(--space-24) !important;
}

/* Legacy gap values (10, 20, 30, 40, 60, 80) - mapped to space scale */
.gap-20 {
  gap: var(--gap-20) !important;
}

.gap-30 {
  gap: var(--gap-30) !important;
}

.gap-40 {
  gap: var(--gap-40) !important;
}

.gap-60 {
  gap: var(--gap-60) !important;
}

.gap-80 {
  gap: var(--gap-80) !important;
}

/* Row Gap Utilities using Space Scale */
.row-gap-0 {
  row-gap: var(--space-0) !important;
}

.row-gap-1 {
  row-gap: var(--space-1) !important;
}

.row-gap-2 {
  row-gap: var(--space-3) !important;
}

.row-gap-3 {
  row-gap: var(--space-5) !important;
}

.row-gap-4 {
  row-gap: var(--space-7) !important;
}

.row-gap-5 {
  row-gap: var(--space-11) !important;
}

.row-gap-6 {
  row-gap: var(--space-14) !important;
}

.row-gap-7 {
  row-gap: var(--space-17) !important;
}

.row-gap-8 {
  row-gap: var(--space-20) !important;
}

.row-gap-9 {
  row-gap: var(--space-21) !important;
}

.row-gap-10 {
  row-gap: var(--space-22) !important;
}

.row-gap-11 {
  row-gap: var(--space-23) !important;
}

.row-gap-12 {
  row-gap: var(--space-24) !important;
}

/* Column Gap Utilities (Bootstrap doesn't provide these) */
.col-gap-0 {
  column-gap: var(--space-0) !important;
}

.col-gap-1 {
  column-gap: var(--space-1) !important;
}

.col-gap-2 {
  column-gap: var(--space-3) !important;
}

.col-gap-3 {
  column-gap: var(--space-5) !important;
}

.col-gap-4 {
  column-gap: var(--space-7) !important;
}

.col-gap-5 {
  column-gap: var(--space-11) !important;
}

.col-gap-6 {
  column-gap: var(--space-14) !important;
}

.col-gap-7 {
  column-gap: var(--space-17) !important;
}

.col-gap-8 {
  column-gap: var(--space-20) !important;
}

.col-gap-9 {
  column-gap: var(--space-21) !important;
}

.col-gap-10 {
  column-gap: var(--space-22) !important;
}

.col-gap-11 {
  column-gap: var(--space-23) !important;
}

.col-gap-12 {
  column-gap: var(--space-24) !important;
}

/* Pointer Events */
.pointer-events-none {
  pointer-events: none;
}

/* Height Utilities */
.min-h-100 {
  min-height: 100%;
}

/* ========================================
   CUSTOM RATIO/IMAGE UTILITIES
   ======================================== */

/* Ratio Container Utilities */
.ratio>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ratio>div .img-full {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
  object-position: top;
}

.ratio>div>a {
  display: flex;
  max-height: 100%;
}

/* Custom Aspect Ratio Utilities */
.ratio-16x9 {
  --bs-aspect-ratio: 66.66%;
}

.advisory-newsletter.ratio {
  --bs-aspect-ratio: 58.32%;
}

/* ========================================
   CUSTOM TEXT UTILITIES
   ======================================== */

/* Text Justify (Bootstrap doesn't provide this) */
.text-justify {
  text-align: justify;
}

/* ========================================
   CUSTOM GUTTER UTILITIES
   ======================================== */

/* Custom Gutter X Utilities (responsive) */
@media (min-width: 992px) {
  .gx-40 {
    --bs-gutter-x: var(--space-17);
  }

  .gx-60 {
    --bs-gutter-x: var(--space-21);
  }
}

/* ========================================
   LEGACY UTILITIES (for backward compatibility)
   ======================================== */

/* Legacy GutterY Utilities */
.gutterY-20 {
  padding: var(--gutterY-20) !important;
}

.gutterY-60 {
  padding: var(--gutterY-60) !important;
}

.gutterY-80 {
  padding: var(--gutterY-80) !important;
}

/* Legacy Gutter Y Utilities - Bootstrap gutter override */
.gy-20 {
  --bs-gutter-y: var(--space-9) !important;
}

.gy-40 {
  --bs-gutter-y: var(--space-17) !important;
}

.gy-60 {
  --bs-gutter-y: var(--space-21) !important;
}

.gy-80 {
  --bs-gutter-y: var(--space-22) !important;
}

/* Legacy Margin Utilities */
.mt-32 {
  margin-top: var(--space-14) !important;
}

.mb-32 {
  margin-bottom: var(--space-14) !important;
}