/* Homepage: main-nav-links and mobile overrides - cacheable */
.main-nav-links {
  background: linear-gradient(135deg, rgba(18, 32, 137, 0.02), rgba(73, 49, 108, 0.02));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(18, 32, 137, 0.08);
}
.main-nav-links h3 {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(18, 32, 137, 0.1);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.main-nav-links ul li a {
  color: #4c5878;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: inline-block;
  padding: 0.25rem 0;
}
.main-nav-links ul li a:hover {
  color: #122089;
  padding-left: 0.5rem;
  font-weight: 500;
}
/* ========== Mobile: Tablet and below (768px) ========== */
@media (max-width: 768px) {
  .main-nav-links {
    padding: 1.25rem 1rem;
  }
  .main-nav-links h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
  .main-nav-links ul li {
    margin-bottom: 0.35rem;
  }
  .main-nav-links ul li a {
    font-size: 0.9rem;
    padding: 0.35rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  h1.display-5,
  h1.display-4 {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }
  h2 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    line-height: 1.4 !important;
  }
  .lead {
    font-size: clamp(1rem, 3vw, 1.125rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }
  .btn {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    touch-action: manipulation;
  }
  section.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Section-specific: Business */
  .business-section {
    border-radius: 0 0 28px 28px;
  }
  .business-section .container {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  .business-section .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1.5rem;
  }
  .business-section h1 {
    font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
    line-height: 1.25 !important;
  }
  .business-section .lead {
    font-size: 0.9375rem !important;
  }
  .business-section .row-cols-2 {
    gap: 0.5rem;
  }
  .business-section .count-box h5 {
    font-size: 1.25rem;
  }
  /* Section-specific: Services */
  #services.services .container,
  .services .container {
    padding-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  #services.services .row,
  .services .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 1rem;
  }
  .service-h2-gradient {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  .services .section-header-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  /* Section-specific: Industries */
  .industries-section {
    padding: 2rem 0 !important;
  }
  .industries-section .container {
    padding-bottom: 1rem !important;
  }
  .industries-h2-gradient {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  .industries-section .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
  /* Section divider */
  .section-divider {
    padding: 0.4rem 0 !important;
  }
  /* Why Celcom - cards (bg-body section with "Why Choose Celcom Africa") */
  section.bg-body.pb-5 .row.row-cols-md-4,
  section.bg-body .row.row-cols-auto.row-cols-md-4 {
    row-gap: 1.25rem;
  }
  section.bg-body .card-body .lead {
    font-size: 0.9rem !important;
  }
  /* Devs / Tech services */
  .tech-services {
    padding-top: 2.5rem !important;
  }
  .tech-services .row {
    --bs-gutter-y: 1.5rem;
  }
  .tech-services h2 {
    font-size: clamp(1.375rem, 4vw, 1.75rem) !important;
  }
  /* Customer section */
  .customer-section .customer-heading {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
  }
  .customer-section .customer-heading2 {
    font-size: 1.125rem !important;
  }
  .customer-section .row {
    --bs-gutter-y: 1.5rem;
  }
  /* Kenya cities */
  #kenya-cities.kenya-cities .section-head h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  #kenya-cities.kenya-cities .container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  /* Clients section */
  #clients.clients {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  /* Coverage map */
  .coverage-map-section .coverage-map-h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  .coverage-map-section .container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  /* Blog section */
  .blog-section.blog-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .blog-section .blog-h2-gradient {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  .blog-section .row.g-4 {
    --bs-gutter-y: 0.75rem;
  }
  /* Resellers section */
  .resellers-section .reseller-heading-h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
  .resellers-section .row.mb-5 {
    margin-bottom: 1.5rem !important;
  }
  .resellers-section .reseller-stat-card {
    padding: 0.75rem;
  }
  .resellers-section .stat-value {
    font-size: 1.25rem;
  }
}

/* ========== Mobile: Small phones (576px) ========== */
@media (max-width: 576px) {
  h1.display-5,
  h1.display-4 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  h2 {
    font-size: 1.375rem !important;
  }
  .lead {
    font-size: 0.9375rem !important;
  }
  .btn {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }
  .btn:last-child {
    margin-bottom: 0 !important;
  }
  .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  section.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .main-nav-links {
    padding: 1rem 0.75rem;
    border-radius: 12px;
  }
  .main-nav-links h3 {
    font-size: 0.9375rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
  }
  .main-nav-links .row.g-3 {
    --bs-gutter-y: 0.75rem;
  }
  /* Business: tighter on small phones */
  .business-section .container {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
  .business-section .row {
    --bs-gutter-y: 1.25rem;
  }
  .business-section .business-cta {
    width: 100%;
    justify-content: center;
  }
  .business-section .count-box {
    padding-top: 0.5rem !important;
  }
  .business-section {
    border-radius: 0 0 20px 20px;
  }
  /* Services */
  #services.services .row,
  .services .row {
    --bs-gutter-y: 0.75rem;
  }
  /* Industries: single column cards */
  .industries-section {
    padding: 1.5rem 0 !important;
  }
  .industry-box,
  .industry-card-link {
    min-height: auto;
  }
  /* Why Celcom */
  section.bg-body.pb-5 {
    padding-bottom: 2rem !important;
  }
  section.bg-body .col-2 {
    flex: 0 0 auto;
    width: 2.5rem;
  }
  section.bg-body .col-11 {
    flex: 1;
    min-width: 0;
  }
  /* Tech / Devs */
  .tech-services {
    padding-top: 2rem !important;
  }
  .tech-services .btn {
    width: 100%;
  }
  /* Customer */
  .customer-section .content {
    padding-right: 0;
  }
  .customer-section .btn-gradient {
    width: 100%;
    justify-content: center;
  }
  /* Kenya cities */
  #kenya-cities.kenya-cities .section-head {
    margin-bottom: 1rem !important;
  }
  #kenya-cities.kenya-cities .section-head .lead {
    font-size: 0.9rem !important;
  }
  /* Blog */
  .blog-section .blog-h2-gradient {
    font-size: 1.25rem !important;
  }
  .blog-section .row.g-4 {
    --bs-gutter-y: 0.5rem;
  }
  /* Resellers */
  .resellers-section .row.justify-content-center.mb-5 {
    margin-bottom: 1rem !important;
  }
  .resellers-section .reseller-stat-card {
    padding: 0.5rem 0.25rem;
  }
  .resellers-section .stat-value {
    font-size: 1.1rem;
  }
  .resellers-section .stat-label {
    font-size: 0.75rem;
  }
}

/* ========== Mobile: Extra small (400px) ========== */
@media (max-width: 400px) {
  .container {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }
  section.py-5 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  .main-nav-links {
    padding: 0.75rem 0.5rem;
  }
  .main-nav-links h3 {
    font-size: 0.875rem;
  }
  .main-nav-links ul li a {
    font-size: 0.8125rem;
  }
  .business-section h1 {
    font-size: 1.375rem !important;
  }
  .customer-section .customer-heading {
    font-size: 1.35rem !important;
  }
}

/* Touch targets: buttons and CTAs only (not inline text links) */
@media (hover: none) and (pointer: coarse) {
  .btn,
  button,
  .business-cta,
  .btn-gradient,
  .btn-outline-light,
  .industry-card-link {
    min-height: 44px !important;
  }
  .btn,
  button,
  .business-cta,
  .btn-gradient {
    touch-action: manipulation;
  }
}