/* ============================================================
   SPECTRUM FREIGHT — Mobile Responsive Override
   Add <link rel="stylesheet" href="mobile.css"> to ALL pages
   AFTER scss/style.css
   ============================================================ */

/* ── BASE RESETS ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; width: 100%; }
img  { max-width: 100%; height: auto; display: block; }

/* ── NAVBAR ──────────────────────────────────────────────── */
.site-navbar { padding: .75rem 0 !important; }
.site-navbar .container { padding: 0 1rem; }
#logo { max-height: 48px; width: auto; }

/* Mobile hamburger always visible below xl */
@media (max-width: 1199px) {
  .site-mobile-menu { z-index: 9999; }
  .d-none.d-xl-block { display: none !important; }
}

/* ── HERO / COVER SECTION ────────────────────────────────── */
.site-blocks-cover {
  min-height: 280px !important;
  padding: 3rem 1rem !important;
  background-attachment: scroll !important; /* fixed breaks on iOS */
}
.site-blocks-cover h1 {
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
}
.site-blocks-cover .btn {
  font-size: .9rem !important;
  padding: .65rem 1.5rem !important;
}

/* ── OVERLAP SECTION (calculator + pricing + support) ───── */
.overlap-section { margin-top: 0 !important; }
.overlap-section .col-md-4 { margin-bottom: 1rem; }
.feature-1, .feature-3 { padding: 1.5rem 1rem !important; }
.free-quote { padding: 1.25rem 1rem !important; }
.free-quote .form-control { font-size: .9rem; }

/* ── ABOUT SECTION ───────────────────────────────────────── */
.orange-background { display: none; } /* hide decorative bg on mobile */
#about .col-md-6 { padding: 0 1rem; }
#about p { font-size: .92rem; line-height: 1.75; }

/* ── HOW IT WORKS ────────────────────────────────────────── */
.how-it-work-item { padding: 1.5rem 1rem !important; margin-bottom: 1.5rem; }
.how-it-work-item .number { font-size: 3rem !important; }
.how-it-work-item h2 { font-size: 1.1rem !important; }
.how-it-work-item p  { font-size: .88rem !important; }

/* ── SERVICES / UNIT-4 CARDS ─────────────────────────────── */
.unit-4 { margin-bottom: 1.25rem; }
.unit-4-icon { min-width: 40px; }

/* ── IMAGE REEL ──────────────────────────────────────────── */
#spectrum-reel {
  height: 260px !important;
}
.reel-caption h3 { font-size: .95rem !important; }
.reel-caption p  { font-size: .75rem !important; display: none; }
.reel-nav { width: 32px !important; height: 32px !important; font-size: 1rem !important; }

@media (min-width: 576px) {
  #spectrum-reel { height: 360px !important; }
  .reel-caption p { display: block; }
}
@media (min-width: 768px) {
  #spectrum-reel { height: 460px !important; }
}

/* ── TESTIMONIALS ────────────────────────────────────────── */
#testimonials .col-md-4 { margin-bottom: 1.25rem; }
#testimonials p[style*="font-size:.95rem"] { font-size: .88rem !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer .col-sm-6 { margin-bottom: 1.5rem; }
.site-footer .footer-heading { font-size: .95rem; }
.site-footer p, .site-footer a { font-size: .85rem; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-block { display: block; width: 100%; }
@media (max-width: 575px) {
  .btn { font-size: .88rem !important; padding: .6rem 1.25rem !important; }
  .btn.py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .btn.px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ── FORMS ───────────────────────────────────────────────── */
.form-control { font-size: .9rem !important; }
input, select, textarea { max-width: 100%; }

/* ── GENERAL SPACING ─────────────────────────────────────── */
.site-section { padding: 3rem 0 !important; }
.container { padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 767px) {
  .site-section { padding: 2rem 0 !important; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.05rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }
  .mt-5 { margin-top:    1.5rem !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Stack columns full width */
  .col-md-4, .col-md-5, .col-md-6, .col-md-7,
  .col-lg-4, .col-lg-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

  /* Calculator full width */
  .overlap-section .row { flex-direction: column; }
  .overlap-section .col-md-4 { max-width: 100% !important; flex: 0 0 100% !important; }
}

/* ── KENYA PAGE SPECIFIC ─────────────────────────────────── */
.kenya-hero { padding: 3rem 1rem !important; }
.kenya-hero h1 { font-size: 1.5rem !important; }
.kenya-hero .flag-route { font-size: 1.5rem !important; letter-spacing: .25rem !important; }
.kenya-hero .btn { display: block; width: 100%; margin-bottom: .75rem; }
.why-card { margin-bottom: 1rem; }
.price-box { margin-bottom: 1.5rem; }
.coverage-badge { font-size: .75rem !important; margin: .2rem !important; }
.faq-item h5 { font-size: .9rem; }
.faq-item p  { font-size: .85rem; }
.social-card { flex-direction: column; }

/* ── ACCOUNT / LOGIN PAGES ───────────────────────────────── */
.p-5 { padding: 1.25rem !important; }
.tab-toggle button { font-size: .85rem; padding: .6rem .5rem; }
.account-avatar { width: 60px !important; height: 60px !important; font-size: 1.3rem !important; }
.account-card { padding: 1.25rem !important; }
.progress-track { overflow-x: auto; padding-bottom: .5rem; }
.step-label { font-size: .62rem !important; }
.step-dot { width: 26px !important; height: 26px !important; font-size: .7rem !important; }

/* ── ADMIN ───────────────────────────────────────────────── */
.section-card { padding: 1rem !important; overflow-x: auto; }
.section-card table { min-width: 600px; }
.admin-header { flex-direction: column; gap: .5rem; padding: .75rem 1rem; }
.nav-tabs .nav-link { padding: .4rem .6rem; font-size: .78rem; }

/* ── STICKY MOBILE CTA BAR ───────────────────────────────── */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #e26c1a;
  z-index: 8888;
  padding: .75rem 1rem;
  display: flex;
  gap: .5rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.mobile-cta-bar a {
  flex: 1;
  text-align: center;
  color: #fff !important;
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem;
  border-radius: 5px;
  text-decoration: none;
}
.mobile-cta-bar a.secondary {
  background: rgba(255,255,255,.2);
}
.mobile-cta-bar a.primary {
  background: #1a1a2e;
}
@media (min-width: 768px) {
  .mobile-cta-bar { display: none !important; }
}
/* Add bottom padding so content isn't hidden behind bar */
@media (max-width: 767px) {
  body { padding-bottom: 60px; }
}

/* ── PERFORMANCE — lazy load hints ──────────────────────── */
.reel-slide {
  background-size: cover;
  background-position: center center;
  will-change: opacity;
}

/* ── TOUCH TARGETS ───────────────────────────────────────── */
a, button { min-height: 44px; }
nav a { padding: .5rem .75rem !important; }