/* ==========================================================================
   efdigital | Master Responsive Stylesheet
   Universal compatibility across all screens:
   - Mobile Phones (320px – 480px)
   - Large Phones / Phablets (481px – 640px)
   - Tablets & iPads (641px – 1024px)
   - Laptops & Desktops (1025px – 1919px)
   - Ultra-Wide & 4K Monitors (1920px+)
   ========================================================================== */

/* 1. Resets & Viewport Boundary Safety */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  background-color: #0C0C0C;
  color: #F4F1ED;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Fluid Media & Breakpoints */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Prevent text overflow or clipping on small devices */
h1, h2, h3, h4, h5, h6, p, span, a, label, li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 3. Custom Scrollbar & Utility */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0C0C0C;
}
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C2A46A;
}

/* Hide scrollbar utility for mobile horizontal scroll carousels/pills */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* 4. Rotating Ticker Marquee */
.marquee-track {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
  width: 100%;
}

.marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 100%;
  animation: marqueeLoop 28s linear infinite;
}

.marquee-track:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marqueeLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* 5. Portfolio Tabs & Cards */
.portfolio-tab.active {
  background-color: #FFFFFF !important;
  color: #0C0C0C !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.portfolio-card {
  transition: all 0.35s ease-in-out;
}

.portfolio-card.is-hidden {
  display: none !important;
  opacity: 0;
  transform: scale(0.95);
}

/* 6. FAQ Accordion Transitions */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item.active {
  border-color: rgba(194, 164, 106, 0.5) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.faq-plus {
  transition: transform 0.25s ease;
}

/* Smooth Card Hover */
.service-clean-card {
  will-change: transform, box-shadow;
}

/* 7. Mobile Drawer Navigation */
#mobile-menu {
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.mobile-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

/* 8. Floating WhatsApp Responsive Adjustment */
.fixed.bottom-6.right-6 {
  transition: all 0.3s ease;
}

/* ==========================================================================
   Responsive Breakpoints Optimization
   ========================================================================== */

/* --- A. Small Mobile Screens (max-width: 480px: iPhone SE, Galaxy S, etc.) --- */
@media (max-width: 480px) {
  /* Fluid typography to avoid awkward word breaks */
  h1.text-4xl, h2.text-4xl, .text-4xl {
    font-size: 1.85rem !important;
    line-height: 1.18 !important;
  }
  h2.text-3xl, h3.text-3xl, .text-3xl {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }

  /* Padding adjustments to maximize readable space */
  .p-8 {
    padding: 1.5rem !important;
  }
  .p-10 {
    padding: 1.6rem !important;
  }
  .py-24, .py-28, .py-32 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* Smooth rounded corners proportional to small screens */
  .rounded-\[32px\], .rounded-\[40px\] {
    border-radius: 22px !important;
  }

  /* Compact floating WhatsApp so it never covers content */
  .fixed.bottom-6.right-6 {
    bottom: 1rem !important;
    right: 1rem !important;
  }
  .fixed.bottom-6.right-6 a {
    padding: 0.65rem 1rem !important;
    font-size: 0.72rem !important;
    gap: 0.4rem !important;
  }

  /* Responsive image height on mobile */
  img[src*="founder-studio"], img[src*="founder-office"] {
    max-height: 420px !important;
    object-position: top center !important;
  }

  /* Buttons on mobile take full width for easier thumb tapping */
  .mobile-w-full {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* --- B. Tablets & Mid Screens (min-width: 641px and max-width: 1024px) --- */
@media (min-width: 641px) and (max-width: 1024px) {
  .py-28, .py-32 {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }
  img[src*="founder-studio"], img[src*="founder-office"] {
    max-height: 520px !important;
  }
}

/* --- C. Ultra-Wide & 4K Monitors (min-width: 1920px) --- */
@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: 1440px !important;
  }
  .max-w-6xl {
    max-width: 1280px !important;
  }
}