/* Responsive Framework for Zamto Africa Website */
:root {
  --navy: #003087;
  --red: #e11d48;
}

/* Base responsive styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* Typography */
.font-heading {
  font-family: 'Montserrat', sans-serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* Color classes */
.bg-navy { background-color: var(--navy); }
.bg-red { background-color: var(--red); }
.text-navy { color: var(--navy); }
.hover-red:hover { background-color: #be123c; }

/* Card hover effects */
.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,48,135,0.2);
  transition: all 0.4s;
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  .card-hover:hover {
    transform: none;
  }
  .card-hover:active {
    transform: scale(0.98);
  }
}

/* Mobile-First Responsive Enhancements */
/* Extra small devices (phones, less than 640px) */
@media (max-width: 639px) {
  .hero-title {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-subtitle {
    font-size: 1.25rem !important;
  }
  
  .mobile-padding {
    padding: 1rem !important;
  }
  
  .mobile-button {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }
  
  .mobile-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-full {
    width: 100% !important;
  }
  
  .mobile-text-center {
    text-align: center !important;
  }
  
  .mobile-flex-column {
    flex-direction: column !important;
  }
  
  .mobile-gap-2 {
    gap: 0.5rem !important;
  }
  
  .mobile-gap-4 {
    gap: 1rem !important;
  }
}

/* Small devices (tablets, 640px and up) */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-hidden {
    display: none !important;
  }
  
  .tablet-full {
    width: 100% !important;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  .lg\:flex {
    display: flex !important;
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Mobile video optimizations */
video {
  max-width: 100%;
  height: auto;
}

/* Responsive image galleries */
.image-gallery img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Mobile form inputs */
input, textarea, select {
  font-size: 16px !important; /* Prevents zoom on iOS */
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Container utilities */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* Flexbox helpers */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

@media (min-width: 1024px) {
  .lg\:flex-row {
    flex-direction: row !important;
  }
}

/* Grid helpers */
.grid-gap-4 {
  gap: 1rem;
}

.grid-gap-6 {
  gap: 1.5rem;
}

.grid-gap-8 {
  gap: 2rem;
}

/* Spacing helpers */
.py-responsive {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .py-responsive {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .py-responsive {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.px-responsive {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .px-responsive {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .px-responsive {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Text responsiveness */
.responsive-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.responsive-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.responsive-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .responsive-text-lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.responsive-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .responsive-text-xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.responsive-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 768px) {
  .responsive-text-2xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.responsive-text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .responsive-text-3xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.responsive-text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 768px) {
  .responsive-text-4xl {
    font-size: 3rem;
    line-height: 1;
  }
}

/* Button responsiveness */
.btn-responsive {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .btn-responsive {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .btn-responsive {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }
}

/* Image responsiveness */
.img-responsive {
  max-width: 100%;
  height: auto;
}

/* Card responsiveness */
.card-responsive {
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .card-responsive {
    border-radius: 1rem;
  }
}

/* Navigation responsiveness */
.nav-responsive {
  display: none;
}

@media (min-width: 1024px) {
  .nav-responsive {
    display: flex !important;
  }
}

.mobile-menu-responsive {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-menu-responsive {
    display: none !important;
  }
}