/* Flexiblewifi.com static site CSS fixes
   Missing Tailwind classes that weren't in the original purge */

/* Navigation scroll behavior - dark background when scrolled */
.bg-nav-scrolled {
  background-color: #071112 !important;
}

/* Ensure header transition works smoothly */
header {
  transition: background-color 0.3s ease;
}

/* Force grid display on case studies container */
.grid.gap-x-6.gap-y-6 {
  display: grid !important;
}

/* Grid responsive breakpoints - base */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Grid responsive breakpoints - sm (640px+) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Grid responsive breakpoints - lg (1024px+) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Gap utilities */
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
@media (min-width: 768px) {
  .md\:gap-y-12 {
    row-gap: 3rem;
  }
}

/* Hover effects */
.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:border-brand-green:hover {
  border-color: #29C3D3;
}

.hover\:text-brand-green:hover {
  color: #29C3D3;
}

/* Card hover overlay transition */
.absolute.flex.opacity-0 {
  transition: opacity 0.5s ease;
}

/* Ensure cards maintain proper aspect ratio */
.bg-cover.bg-center {
  background-size: cover;
  background-position: center;
}

/* Fix card white info box positioning */
.absolute.-bottom-14 {
  bottom: -3.5rem;
}

@media (min-width: 768px) {
  .md\:h-\[200px\] {
    height: 200px;
  }
  .md\:gap-y-12 {
    row-gap: 3rem;
  }
}

/* Card height on large screens */
@media (min-width: 1024px) {
  .lg\:h-\[400px\] {
    height: 400px;
  }
}

/* Base card height */
.h-\[250px\] {
  height: 250px;
}

/* Card positioning fixes */
.left-4 { left: 1rem; }
.right-4 { right: 1rem; }
@media (min-width: 768px) {
  .md\:left-8 { left: 2rem; }
  .md\:right-8 { right: 2rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:pb-0 { padding-bottom: 0; }
}

/* Ensure proper block display for card links */
a.relative.block {
  display: block;
}