/* Footer CSS - Scoped to footer elements only */

/* Base utilities used in footer - scoped to footer */
footer .relative {
  position: relative !important;
}

footer .flex {
  display: flex !important;
}

footer .w-full {
  width: 100% !important;
}

footer .w-auto {
  width: auto !important;
}

footer .h-9 {
  height: calc(var(--spacing) * 9) !important;
}

footer .flex-1 {
  flex: 1 !important;
}

footer .shrink-0 {
  flex-shrink: 0 !important;
}

footer .flex-col {
  flex-direction: column !important;
}

footer .items-start {
  align-items: flex-start !important;
}

footer .justify-between {
  justify-content: space-between !important;
}

footer .gap-10 {
  gap: calc(var(--spacing) * 10) !important;
}

footer .gap-20 {
  gap: calc(var(--spacing) * 20) !important;
}

footer .space-y-2 > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;
}

footer .border-b {
  border-bottom-style: var(--tw-border-style) !important;
  border-bottom-width: 1px !important;
}

footer .border-gray-200 {
  border-color: var(--color-gray-200) !important;
}

footer.px-6,
footer .px-6 {
  padding-inline: calc(var(--spacing) * 6) !important;
}

footer .pb-5 {
  padding-bottom: calc(var(--spacing) * 5) !important;
}

footer .pb-6 {
  padding-bottom: calc(var(--spacing) * 6) !important;
}

footer .pt-4 {
  padding-top: calc(var(--spacing) * 4) !important;
}

footer .mt-6 {
  margin-top: calc(var(--spacing) * 6) !important;
}

footer.mt-40,
footer .mt-40 {
  margin-top: calc(var(--spacing) * 40) !important;
}

footer .mb-5 {
  margin-bottom: calc(var(--spacing) * 5) !important;
}

footer .text-center {
  text-align: center !important;
}

footer .font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold) !important;
}

footer .text-slate-500 {
  color: var(--color-slate-500) !important;
}

footer .text-slate-700 {
  color: var(--color-slate-700) !important;
}

footer .text-sm {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height) !important;
}

footer .mt-4 {
  margin-top: calc(var(--spacing) * 4) !important;
}

footer .block {
  display: block !important;
}

footer .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium) !important;
}

footer .transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events !important;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
  transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
}

footer a:hover.hover\:text-indigo-600 {
  @media (hover: hover) {
    color: var(--color-indigo-600) !important;
  }
}

/* Medium screen breakpoint styles - scoped to footer */
@media (width >= 48rem) {
  footer .md\:h-9\.5 {
    height: calc(var(--spacing) * 9.5) !important;
  }

  footer .md\:max-w-114 {
    max-width: calc(var(--spacing) * 114) !important;
  }

  footer .md\:flex-row {
    flex-direction: row !important;
  }

  footer .md\:justify-end {
    justify-content: flex-end !important;
  }

  footer .md\:px-16 {
    padding-inline: calc(var(--spacing) * 16) !important;
  }
}

/* Large screen breakpoint styles - scoped to footer */
@media (width >= 64rem) {
  footer.lg\:px-24,
  footer .lg\:px-24 {
    padding-inline: calc(var(--spacing) * 24) !important;
  }
}

/* Extra large screen breakpoint styles - scoped to footer */
@media (width >= 80rem) {
  footer.xl\:px-32,
  footer .xl\:px-32 {
    padding-inline: calc(var(--spacing) * 32) !important;
  }
}

/* Medium screen breakpoint styles - additional specificity */
@media (width >= 48rem) {
  footer.md\:px-16,
  footer .md\:px-16 {
    padding-inline: calc(var(--spacing) * 16) !important;
  }
}

/* Small screen breakpoint styles - scoped to footer */
@media (width >= 40rem) {
  footer .sm\:flex-row {
    flex-direction: row !important;
  }

  footer .sm\:gap-20 {
    gap: calc(var(--spacing) * 20) !important;
  }
}

/* CSS Variables needed for footer styles */
:root {
  --spacing: 0.25rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 150ms;
  --tw-border-style: solid;
  --tw-space-y-reverse: 0;
}

/* Alternative approach - direct class targeting */
footer[class*="px-6"] {
  padding-inline: calc(var(--spacing) * 6) !important;
}

@media (width >= 48rem) {
  footer[class*="md:px-16"] {
    padding-inline: calc(var(--spacing) * 16) !important;
  }
}

@media (width >= 64rem) {
  footer[class*="lg:px-24"] {
    padding-inline: calc(var(--spacing) * 24) !important;
  }
}

@media (width >= 80rem) {
  footer[class*="xl:px-32"] {
    padding-inline: calc(var(--spacing) * 32) !important;
  }
}

footer[class*="mt-40"] {
  margin-top: calc(var(--spacing) * 40) !important;
}