/* ============================================================
   DESIGN FIXES — Jayesh Trans Movers
   Loaded LAST in header.php (highest specificity overrides)
   Addresses: color consistency, font scale, contrast, spacing,
              mobile UX, icon sizes, and design-token unification.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. UNIFIED DESIGN TOKENS (global :root override)
   ────────────────────────────────────────────────────────── */
:root {
  /* Brand Orange — single source of truth */
  --brand-orange:       #F57920;
  --brand-orange-dark:  #d96610;
  --brand-orange-light: rgba(245,121,32,.12);
  --brand-orange-glow:  rgba(245,121,32,.28);

  /* Navy scale */
  --navy-darkest:  #070E1C;
  --navy-dark:     #0D1828;
  --navy:          #1C2B4A;
  --navy-mid:      #2d4270;
  --navy-light:    rgba(28,43,74,.07);

  /* Text scale */
  --text-primary:  #1C2B4A;
  --text-secondary:#4b5c7a;
  --text-muted:    #6b7280;
  --text-light:    #9ca3af;

  /* Surface scale */
  --surface-white: #ffffff;
  --surface-light: #F5F7FB;
  --surface-mid:   #eef1f7;
  --surface-dark:  #e2e7f0;

  /* Unified shadow scale */
  --shadow-xs: 0 1px 3px rgba(28,43,74,.06);
  --shadow-sm: 0 2px 8px rgba(28,43,74,.08);
  --shadow-md: 0 4px 16px rgba(28,43,74,.10);
  --shadow-lg: 0 8px 32px rgba(28,43,74,.12);
  --shadow-xl: 0 16px 48px rgba(28,43,74,.14);

  /* Unified border radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:999px;

  /* Typography scale (base 16px) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  0.9375rem; /* 15px */
  --text-md:    1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
}


/* ──────────────────────────────────────────────────────────
   2. GLOBAL BODY & TYPOGRAPHY BASELINE
   ────────────────────────────────────────────────────────── */
body {
  font-size: 15px !important;
  line-height: 1.65 !important;
  /* No !important on color — page-level dark/light sections must control their own text color */
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Minimum readable font size — no text below 12px */
p, span, li, td, th, label, small, figcaption {
  font-size: max(var(--text-xs), 1em);
}

/* Headings — unified responsive scale (size/weight only, no color override) */
h1 { font-size: clamp(2rem, 5vw, 3.5rem);   font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.1;  letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.2;  letter-spacing: -.02em; }
h4 { font-size: clamp(1rem, 2vw, 1.2rem);     font-weight: 700; line-height: 1.3; }
h5 { font-size: 1rem;   font-weight: 600; line-height: 1.4; }
h6 { font-size: .9rem;  font-weight: 600; line-height: 1.4; }


/* ──────────────────────────────────────────────────────────
   3. ICON MINIMUM SIZE ENFORCEMENT
   All <i> / <svg> icons must be ≥ 12px
   ────────────────────────────────────────────────────────── */
i.fa-solid, i.fa-regular, i.fa-brands, i.fas, i.far, i.fab {
  font-size: max(12px, 1em);
}

/* Eyebrow/pill icon overrides (were 7–10px) */
.jt-av2-eyebrow i,
.jt-net-eyebrow i,
[class*="eyebrow"] i,
[class*="-eyebrow"] i { font-size: 12px !important; }

.jt-net-rtab i,
.jt-net-route-eta i,
.jt-net-route-state i,
.jt-net-region-list li i,
.jt-ribbon-cta i,
.jt-ftrust-pill i,
.jt-cl-eyebrow i { font-size: 12px !important; }

/* Blog / inner-page meta icons */
.jt-blog-meta i,
.jt-ct-privacy i  { font-size: 13px !important; }

/* Rating star in bar labels */
.jt-rv-bar-label i { font-size: 11px !important; }

/* Related card category tags */
.jt-related-card-cat { font-size: 12px !important; }


/* ──────────────────────────────────────────────────────────
   4. CONTRAST FIXES — Text on dark backgrounds
   Minimum: 4.5:1 ratio for normal text, 3:1 for large text
   ────────────────────────────────────────────────────────── */

/* Footer bottom bar — was rgba(0.18–0.35), now readable */
.jt-footer-gst,
.jt-footer-gst span  { color: rgba(255,255,255,.6)  !important; font-size: 12px !important; }
.jt-reg-sep          { color: rgba(255,255,255,.3)  !important; }
.jt-footer-copy      { color: rgba(255,255,255,.65) !important; font-size: 12px !important; }
.jt-footer-credit    { color: rgba(255,255,255,.55) !important; font-size: 12px !important; }
.jt-footer-credit a  { color: rgba(255,255,255,.65) !important; }
.jt-footer-bottom-links a { color: rgba(255,255,255,.65) !important; }
.jt-footer-bottom-links li:not(:last-child)::after { color: rgba(255,255,255,.4) !important; }

/* Custom.css footer bar label */
.footer-bar-label { color: rgba(255,255,255,.72) !important; font-size: 13px !important; }

/* Network region map labels — were rgba(.20) */
.jt-net-region-label,
.jt-net-route-state  { color: rgba(255,255,255,.6)  !important; }

/* Ribbon items */
.jt-ribbon-item { color: rgba(255,255,255,.8) !important; font-size: 12px !important; }


/* ──────────────────────────────────────────────────────────
   5. ORANGE COLOR STANDARDISATION
   All hover/accent uses brand orange, not #ff8c3a
   ────────────────────────────────────────────────────────── */
:root {
  --dh-accent:        #F57920 !important;
  --dh-accent-hover:  #F57920 !important;
}
a:hover,
a:focus { color: var(--brand-orange); }


/* ──────────────────────────────────────────────────────────
   6. MOBILE UX — Global responsive fixes (< 767px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Prevent horizontal scroll */
  body { overflow-x: hidden !important; }

  /* Section vertical rhythm */
  section, .sec-pad { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Container safe padding */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 767px) {
  /* Headings scale on mobile */
  h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }

  /* Body text — bump up legibility on small screens */
  body, p, li { font-size: 15px; }

  /* Section rhythm */
  section, .sec-pad { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Prevent tiny text in pills/tags */
  [class*="-eyebrow"],
  [class*="-badge"],
  [class*="-tag"],
  [class*="-pill"] { font-size: 11px !important; }

  /* Buttons — ensure tap target ≥ 44px */
  .btn, button, [type="submit"], a.btn,
  .trk-sup-btn, .ip-btn-primary, .btn-primary-hero {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Form inputs — ensure readable and tappable */
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px !important;
  }

  /* Inner page hero */
  .ip-hero { padding: 100px 0 48px !important; }
  .ip-hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
  .ip-hero-desc { font-size: 15px !important; }

  /* Cards — prevent cramped grids */
  .row [class*="col-"] { margin-bottom: 16px; }

  /* Network tabs — horizontal scroll on mobile */
  .jt-net-rtabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jt-net-rtabs::-webkit-scrollbar { display: none; }
  .jt-net-rtab { white-space: nowrap !important; font-size: 13px !important; }

  /* Ribbon top bar — stack on mobile */
  .jt-ribbon { flex-wrap: wrap !important; gap: 4px !important; }
  .jt-ribbon-sep { display: none !important; }

  /* Footer columns — stack properly */
  .jt-footer-col { margin-bottom: 32px !important; }
}

@media (max-width: 575px) {
  h1 { font-size: clamp(1.6rem, 9vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 7vw, 1.7rem); }

  body, p { font-size: 14px; }

  section, .sec-pad { padding-top: 48px !important; padding-bottom: 48px !important; }

  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hide ribbon completely on tiny screens */
  .jt-ribbon-hours, .jt-ribbon-wa { display: none !important; }

  /* Full-width buttons */
  .hero-cta-row { flex-direction: column !important; }
  .hero-cta-row a { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* Stat counters — 2 column grid */
  .about-us-counter-list-prime {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Service cards — full width */
  .service-box { margin-bottom: 16px !important; }

  /* FAQ accordion — better tap targets */
  .accordion-button { padding: 16px !important; font-size: 14px !important; }
  .accordion-body   { padding: 16px !important; font-size: 14px !important; }
}

/* ──────────────────────────────────────────────────────────
   7. CONTACT PAGE — form input font fix
   iOS zooms in if input font-size < 16px
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select { font-size: 16px !important; }
}


/* ──────────────────────────────────────────────────────────
   8. TRACKING PAGE — mobile layout refinements
   ────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .trk-stats-inner  { grid-template-columns: 1fr 1fr !important; }
  .trk-stat-item    { padding: 20px 12px !important; }
  .trk-stat-num     { font-size: 1.5rem !important; }
  .trk-trust-row    { gap: 6px !important; }
  .trk-trust-pill   { font-size: 11px !important; padding: 5px 10px !important; }
}


/* ──────────────────────────────────────────────────────────
   9. FIXED WIDTH OVERRIDES  (audit items: 140px, 160px, 200px)
   ────────────────────────────────────────────────────────── */
.navbar-brand img   { max-width: 140px !important; width: 100% !important; height: auto !important; }
.about-counter-box  { max-width: 200px !important; width: auto !important; }

@media (max-width: 575px) {
  .navbar-brand img { max-width: 110px !important; }
}


/* ──────────────────────────────────────────────────────────
   10. ACCESSIBILITY — Focus rings (keyboard nav)
   ────────────────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #F57920 !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #F57920 !important;
  outline-offset: 3px !important;
}


/* ──────────────────────────────────────────────────────────
   11. SCROLL IMPROVEMENTS
   ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* Prevent body scroll when mobile nav is open */
body.slicknav-open { overflow: hidden !important; }

/* Scrollbar styling (Webkit) */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: #F5F7FB; }
::-webkit-scrollbar-thumb        { background: rgba(28,43,74,.25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: #F57920; }


/* ──────────────────────────────────────────────────────────
   12. IMAGE RESPONSIVENESS
   ────────────────────────────────────────────────────────── */
img {
  max-width: 100% !important;
  height: auto !important;
}