/*
================================================================================
* Template Name: AutoCare - Premium Car Repair & Auto Service HTML Template
* Description: Responsive CSS overrides for AutoCare.
================================================================================
*/

/* Extra Large screens */
@media screen and (min-width: 1100px) and (max-width: 3000px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }
}
@media screen and (min-width: 778px) and (max-width: 1100px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1020px;
    }
}

/* Notebook & Desktop (lg) breakpoint */
@media (max-width: 1199px) {
  .nav-menu {
    gap: 20px;
  }

  .nav-link-custom {
    font-size: 0.9rem;
  }
}

/* Tablet & Mobile navigation collapse breakpoint */
@media (max-width: 991px) {
  /* Hide standard nav menu on mobile/tablet */
  .nav-menu {
    display: none !important;
  }

  /* Show mobile hamburger menu toggle */
  .mobile-toggle {
    display: block !important;
  }

  /* Top Bar adjustments */
  .topbar-info span:last-child {
    margin-right: 0;
  }

  /* Mega menu & standard hover dropdown are disabled in CSS for desktop size,
     so they don't overlay on mobile screens in unexpected ways. */
  .mega-menu-custom,
  .dropdown-custom {
    display: none !important;
  }

  /* Responsive sections padding */
  .section-spacing {
    padding: 70px 0;
  }
  .section-spacing-top {
    padding-top: 70px;
  }
  .section-spacing-bottom {
    padding-bottom: 70px;
  }
}

/* Medium & Small Devices (md) */
@media (max-width: 767px) {
  .topbar {
    display: none !important; /* Hide topbar on mobile to save precious vertical space */
  }

  .logo-brand {
    font-size: 1.4rem;
  }

  .footer-bottom-links {
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-bottom {
    text-align: center;
  }

  .btn-premium {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  /* Adjust hero display typography */
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
}

/* Extra Small Screen */
@media (max-width: 479px) {
  .logo-brand {
    font-size: 1.25rem;
  }

  .nav-actions {
    gap: 12px;
  }

  .btn-premium {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}