/* ===========================================================
   SHARED CHROME — used by BOTH the website and the tracking app.

   Base reset, buttons, utility bar, header/nav and footer live here
   and nowhere else. Both apps load this same file, which is what
   guarantees the header looks identical on shrijicouriers.com and
   on track.shrijicouriers.com.

   If you edit this file, copy it to tracking/assets/css/ too.
   =========================================================== */

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--s-4); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--maxw-narrow); }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s-3);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: .82em 1.7em; border-radius: var(--r-pill);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-600); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-500); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.32); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-outline { border: 1.5px solid var(--hairline); color: var(--navy); background: var(--surface); }
.btn-outline:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-sm { padding: .6em 1.2em; font-size: .86rem; }
/* WhatsApp actions carry WhatsApp's own colour, not the site red. The design
   rule is one red action per view — on the Contact page the form's submit owns
   it — and a red button sitting beside a green WhatsApp icon read as a clash. */
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-600); transform: translateY(-2px); }
/* On navy grounds a white button reads as primary without spending the red.
   The design rule is one red action per view; the header CTA owns it. */
.btn-white { background: #fff; color: var(--navy); box-shadow: var(--shadow-md); }
.btn-white:hover { background: #F0F3FA; transform: translateY(-2px); }

/* ---------- UTILITY BAR ---------- */
.utility {
  background: var(--navy-900); color: rgba(255,255,255,.82);
  font-size: var(--fs-sm); border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility-in { display: flex; align-items: center; gap: var(--s-5); min-height: 42px; flex-wrap: wrap; }
.utility a { display: inline-flex; align-items: center; gap: .5em; transition: color var(--dur-fast); }
.utility a:hover { color: #fff; }
.utility svg { width: 15px; height: 15px; flex: none; color: var(--red-300); }
.utility .socials { margin-left: auto; display: flex; gap: var(--s-2); }
.utility .socials a {
  width: 28px; height: 28px; border-radius: 50%; justify-content: center;
  background: rgba(255,255,255,.09); transition: background var(--dur-fast), transform var(--dur-fast);
}
.utility .socials a:hover { background: var(--red); transform: translateY(-2px); }
.utility .socials svg { width: 13px; height: 13px; color: #fff; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  transition: box-shadow var(--dur-mid) var(--ease);
}
.site-header.stuck { box-shadow: var(--shadow-md); }
.header-in { display: flex; align-items: center; gap: var(--s-5); min-height: 78px; }
.brand img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
/* :not(.btn) throughout — the mobile drawer's Track Order button is an <a>
   inside .nav, and `.nav a` (0,2,0) outranks `.btn-primary` (0,1,0), which
   painted grey link text onto the red fill. Same specificity trap as
   `.info-card a`; see the note there. */
.nav a:not(.btn) {
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  position: relative; padding: .4em 0; transition: color var(--dur-fast);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--navy); }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: flex; align-items: center; gap: var(--s-3); }
/* The nav's Track Order button exists only for the mobile drawer, where the
   header one is hidden. On desktop it would duplicate the header button. */
.nav .btn { display: none; }

.burger { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); }
.burger span {
  display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px auto;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-6);
  padding-block: var(--section-y) var(--s-7);
}
.site-footer .f-logo { height: 44px; width: auto; margin-bottom: var(--s-4); }
.site-footer p { font-size: var(--fs-sm); color: rgba(255,255,255,.62); max-width: 34ch; }
.site-footer h4, .site-footer .f-head {
  color: #fff; font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; margin-bottom: var(--s-4); font-family: var(--font-body); font-weight: 700;
}
.site-footer nav a, .f-contact li {
  display: block; font-size: var(--fs-sm); padding: 5px 0; color: rgba(255,255,255,.68);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.site-footer nav a:hover { color: #fff; transform: translateX(4px); }
.f-contact { list-style: none; padding: 0; margin: 0; }
.f-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.f-contact svg { width: 16px; height: 16px; color: var(--red-300); flex: none; margin-top: 5px; }
.f-social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.f-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.09);
  display: grid; place-items: center; transition: background var(--dur-fast), transform var(--dur-fast);
}
.f-social a:hover { background: var(--red); transform: translateY(-3px); }
.f-social svg { width: 15px; height: 15px; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--s-5);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}

/* ---------- SCROLL REVEAL ----------
   Progressive enhancement, deliberately. Content is VISIBLE by default; the
   hidden start state applies only under html.js, which the inline snippet in
   header.php sets after confirming the browser can actually drive the animation.

   Hiding by default has blanked the entire site twice: once from a corrupt
   minified bundle, once from an IntersectionObserver that never fired. With
   this ordering, any JS failure degrades to "no animation" instead of
   "no website". Do not invert it. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js .reveal.d1.in { transition-delay: .09s; }
.js .reveal.d2.in { transition-delay: .18s; }
.js .reveal.d3.in { transition-delay: .27s; }
.js .reveal.d4.in { transition-delay: .36s; }
.js .reveal.d5.in { transition-delay: .45s; }

/* ---------- RESPONSIVE CHROME ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile nav drawer */
  .burger { display: block; }
  /* .nav becomes position:fixed below, which takes it out of the flex flow.
     Without this, nothing pushes the button to the right edge and it ends up
     stranded in the middle of the header. */
  .header-cta { margin-left: auto; }
  .header-cta .btn:not(.burger) { display: none; }

  /* Anchored to the header itself (top:100%), not a hardcoded pixel offset.
     The header sits below a utility bar that scrolls away, so any fixed number
     is wrong half the time — it made the drawer open underneath the logo. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--surface);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-5);
    border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
    transform: translateY(-130%); transition: transform var(--dur-mid) var(--ease);
    max-height: 78vh; overflow-y: auto;
    /* Hidden from assistive tech and pointer events while closed. */
    visibility: hidden;
  }
  .nav.open { visibility: visible; }
  .nav.open { transform: none; }
  .nav a:not(.btn) { padding: .85em 0; border-bottom: 1px solid var(--hairline); font-size: 1.02rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: var(--s-4); border-bottom: none; justify-content: center; }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .utility .socials { display: none; }
}

@media (max-width: 860px) { .utility .hide-sm { display: none; } }