/* ==============================================
   File: responsive.css
   Project: Zaza Rush Subaru
   Developer: bguvava
   Last Updated: January 30, 2026
   Description: Media queries and responsive styles
   ============================================== */

/* ---------------------------------------------
   MOBILE FIRST APPROACH
   Default styles are for mobile (< 768px)
   --------------------------------------------- */

/* ---------------------------------------------
   TABLET PORTRAIT (>= 768px)
   --------------------------------------------- */
@media (min-width: 768px) {
  /* Typography */
  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-4xl);
  }

  h3 {
    font-size: var(--font-size-3xl);
  }

  /* Sections */
  section {
    padding: var(--spacing-4xl) 0;
  }

  /* Navigation */
  .navbar-brand img {
    height: 60px;
  }

  /* WhatsApp Float - Show tooltip */
  .whatsapp-float .tooltip {
    display: block;
  }
}

/* ---------------------------------------------
   TABLET LANDSCAPE / SMALL DESKTOP (>= 1024px)
   --------------------------------------------- */
@media (min-width: 1024px) {
  /* Container */
  .container {
    max-width: var(--container-lg);
  }

  /* Navigation */
  .navbar-nav .nav-link {
    padding: var(--spacing-md) var(--spacing-lg) !important;
  }

  /* Cards Grid */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

/* ---------------------------------------------
   DESKTOP (>= 1200px)
   --------------------------------------------- */
@media (min-width: 1200px) {
  /* Container */
  .container {
    max-width: var(--container-xl);
  }

  /* Sections */
  section {
    padding: 5rem 0;
  }

  /* Footer */
  .footer {
    padding: 5rem 0 var(--spacing-xl);
  }
}

/* ---------------------------------------------
   LARGE DESKTOP (>= 1400px)
   --------------------------------------------- */
@media (min-width: 1400px) {
  /* Container */
  .container {
    max-width: var(--container-xxl);
  }
}

/* ---------------------------------------------
   MOBILE SPECIFIC ADJUSTMENTS
   --------------------------------------------- */
@media (max-width: 767.98px) {
  /* Typography Scaling */
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  /* Buttons - Full Width on Mobile */
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }

  /* Scroll to Top - Smaller on mobile */
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
  }

  /* WhatsApp Float - Smaller on mobile */
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 15px;
    left: 15px;
  }

  .whatsapp-float i {
    font-size: 24px;
  }

  /* Hide tooltip on mobile */
  .whatsapp-float .tooltip {
    display: none;
  }

  /* Section Spacing */
  section {
    padding: var(--spacing-xl) 0;
  }

  /* Hero Mobile Adjustments */
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero-text-content {
    padding: 1rem;
    text-align: center;
  }

  .hero-brand-wrapper {
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .hero-brand-logo {
    height: 50px;
  }

  .hero-brand-name {
    font-size: 2rem;
  }

  .hero-main-title {
    font-size: 1.8rem;
  }

  .hero-highlight {
    font-size: 2.2rem;
  }

  .hero-description {
    max-width: 100%;
    font-size: 0.9rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-trust-badges {
    justify-content: center;
    gap: 1rem;
  }

  .hero-image-frame {
    margin-top: 2rem;
  }

  .hero-image-label {
    font-size: 1rem;
  }

  /* Cards */
  .card {
    margin-bottom: var(--spacing-md);
  }

  /* Footer */
  .footer {
    text-align: left;
    padding: var(--spacing-xl) 0 var(--spacing-md);
  }
  
  .footer .col-6 {
    margin-bottom: var(--spacing-md);
  }

  .footer-links {
    margin-bottom: 0;
  }
  
  .footer-heading {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  .footer-links li {
    margin-bottom: 0.25rem;
  }
  
  .footer-links a {
    font-size: 0.75rem;
  }

  .social-links {
    justify-content: flex-start;
    margin-bottom: var(--spacing-md);
  }
  
  /* Footer bottom - stack on mobile */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }

  /* Navigation Mobile Menu */
  .navbar-collapse {
    padding: var(--spacing-sm) 0;
  }

  .navbar-nav .nav-link {
    padding: 0.5rem 0.25rem !important;
    text-align: center;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
}

/* ---------------------------------------------
   SMALL MOBILE (< 375px)
   --------------------------------------------- */
@media (max-width: 374.98px) {
  html {
    font-size: 14px;
  }

  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

/* ---------------------------------------------
   BODY SCROLL LOCK (Mobile Menu) - CORE-028
   --------------------------------------------- */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Mobile menu backdrop */
@media (max-width: 991.98px) {
  .navbar-collapse.show {
    background-color: var(--color-primary);
    padding: var(--spacing-lg);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .navbar-collapse.show .nav-link {
    padding: var(--spacing-md) var(--spacing-sm) !important;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-collapse.show .nav-link:last-child {
    border-bottom: none;
  }
  
  .navbar-collapse.show .nav-link.btn {
    margin-top: var(--spacing-md);
  }
  
  .navbar-collapse.show .nav-link.active::after {
    display: none;
  }
}

/* ---------------------------------------------
   PRINT STYLES
   --------------------------------------------- */
@media print {
  /* Hide non-essential elements */
  .navbar,
  .scroll-progress,
  .scroll-to-top,
  .whatsapp-float,
  .footer {
    display: none !important;
  }

  /* Ensure content is visible */
  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Show full URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ---------------------------------------------
   REDUCED MOTION PREFERENCE
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .whatsapp-float::before {
    animation: none;
  }
}

/* ---------------------------------------------
   DARK MODE PREFERENCE (Future Enhancement)
   --------------------------------------------- */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-white: #1a1a1a;
    --color-dark-gray: #f5f5f5;
    --color-light-gray: #2d2d2d;
  }
} */