/* Mobile enhancements for eCourier Services landing page */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
}

body {
  max-width: 100%;
  overscroll-behavior-x: none;
}

#root {
  max-width: 100%;
}

/* Restore sticky header — overflow on ancestors breaks position:sticky */
header.sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

header.sticky .header-brand-group {
  flex-shrink: 1;
  min-width: 0;
}

header.sticky .header-phone-link {
  text-decoration: none;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

header.sticky .header-phone-link--contact-menu {
  gap: 0.25rem;
}

header.sticky .header-phone-link--contact-menu .header-phone-icon-default {
  display: none;
}

header.sticky .header-phone-link--contact-menu .header-contact-icon-mobile {
  display: block;
  width: 20px;
  height: 20px;
}

@media (min-width: 1024px) {
  header.sticky .header-brand-group {
    gap: 1rem;
  }

  header.sticky .header-phone-link {
    padding-left: 1rem;
  }
}

/* Hero CTAs — wider Schedule a Demo, narrower View Demo System */
@media (min-width: 640px) {
  .hero-cta-row {
    align-items: stretch;
  }

  .hero-cta-schedule {
    flex: 1 1 16rem;
    max-width: 17rem;
  }

  .hero-cta-demo {
    flex: 0 1 auto;
  }

  .hero-btn-schedule {
    min-width: 14.5rem;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .hero-btn-demo {
    min-width: 0 !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
}

/* Hero image — shift up on desktop */
@media (min-width: 1024px) {
  .hero-image-wrap {
    margin-top: -5rem;
  }
}

/* Hero — Trusted by badge in orangish-red */
.hero-trusted-badge {
  background: #fff1f0 !important;
  color: #c2410c !important;
  border-color: rgba(253, 186, 116, 0.55) !important;
}
/* Testimonials carousel — one card at a time */
.testimonials-wrap {
  width: 100%;
  max-width: 48rem; /* match max-w-3xl single-card width */
  margin-left: auto;
  margin-right: auto;
}

.testimonials-viewport {
  --testimonial-visible: 1;
  --testimonial-gap: 0.75rem;
  overflow: hidden;
  width: 100%;
}

.testimonials-track {
  display: flex;
  align-items: stretch;
  gap: var(--testimonial-gap);
  transition: margin-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: margin-left;
}

.testimonial-slide {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--testimonial-visible) - 1) * var(--testimonial-gap)) / var(--testimonial-visible));
  max-width: calc((100% - (var(--testimonial-visible) - 1) * var(--testimonial-gap)) / var(--testimonial-visible));
  min-width: 0;
}


/* Testimonials — keep quote mark from colliding with text on mobile */
@media (max-width: 767px) {
  .testimonial-card {
    padding: 1.5rem !important;
  }

  .testimonial-quote-mark {
    top: 1rem !important;
    left: 1rem !important;
    height: 1.75rem !important;
    width: 1.75rem !important;
    opacity: 0.75;
    z-index: 0;
    pointer-events: none;
  }

  .testimonial-card-body {
    position: relative;
    z-index: 1;
    padding-top: 1.75rem;
  }
}

/* Smooth horizontal scroll for comparison table on touch devices */
.mobile-table-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  overflow-x: auto;
  max-width: 100%;
}

.mobile-table-scroll table {
  min-width: 520px;
}

.mobile-table-scroll::before {
  content: "Swipe to compare →";
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.45);
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .mobile-table-scroll::before {
    display: none;
  }
}

.mobile-table-scroll::-webkit-scrollbar {
  height: 4px;
}

.mobile-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.35);
  border-radius: 999px;
}

/* Footer — white logo only, no text */
footer .footer-brand {
  line-height: 0;
}

footer .footer-logo-white {
  height: 2.5rem;
  width: auto;
  filter: brightness(0) invert(1);
}

footer img[alt="eLIFE 365"] {
  height: 1.25rem;
  width: auto;
  opacity: 0.85;
}

/* Hero headline gradient — cyan start, logo blue mid, cyan end */
.gradient-text {
  background: linear-gradient(135deg, #0ea5e9 0%, #0066cc 45%, #4a8fd6 70%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Thinner sticky header — padding only; logo size unchanged */
header .flex.items-center.justify-between {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  header .container,
  main .container,
  footer .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Prevent long words/URLs from forcing horizontal page scroll */
main p,
main li,
main h1,
main h2,
main h3 {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  main,
  main > section,
  footer {
    max-width: 100%;
  }

  main > section {
    overflow-x: clip;
  }

  main img,
  main picture,
  main video {
    max-width: 100%;
  }

  /* Keep native form controls inside the viewport on small screens */
  main input,
  main select,
  main textarea,
  main button {
    max-width: 100%;
  }

  main .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .mobile-table-scroll {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  header img[alt="eCourier Services"] {
    height: 2.625rem !important;
    max-width: min(10.5rem, 52vw);
    width: auto !important;
    object-fit: contain;
  }

  header a.flex.items-center.group picture {
    display: block;
    max-width: min(10.5rem, 52vw);
    line-height: 0;
  }
}

@media (max-width: 639px) {
  /* Full-width primary buttons in hero on very small screens */
  main .flex.flex-col.sm\:flex-row.gap-4 > a {
    width: 100%;
  }

  main .flex.flex-col.sm\:flex-row.gap-4 > a button,
  main .flex.flex-col.sm\:flex-row.gap-4 > a [class*="inline-flex"] {
    width: 100%;
    justify-content: center;
  }
}

/* Strategic partnership — center single eCourier logo (all breakpoints) */
#partnership .partnership-logo-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

#partnership .partnership-logo-row picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100%;
  margin-inline: auto !important;
}

#partnership .partnership-ecourier-logo {
  display: block !important;
  margin-inline: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 767px) {
  #partnership .text-center.mb-16 {
    margin-bottom: 1.25rem !important;
  }

  #partnership .partnership-logo-row {
    margin-top: 0.85rem !important;
    margin-bottom: 4rem !important;
  }

  #partnership .partnership-ecourier-logo {
    height: auto !important;
    width: auto !important;
    max-height: clamp(1.75rem, 8.5vw, 2.35rem) !important;
    max-width: min(12rem, 70vw) !important;
  }

  /* Extra breathing room before feature cards below */
  #partnership .partnership-logo-row + .grid {
    margin-top: 0.75rem !important;
  }
}