/* ============================================================
   Miki Transport Ltd. — custom styles
   (Tailwind utilities live in tailwind.min.css; this file holds
    only the bits Tailwind can't express as utilities.)
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; }
::selection { background: #b3c7ea; color: #0d1c38; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg, #1f4a97, #517bc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Animated underline for nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: #1f4a97;
  transition: width .3s ease;
  border-radius: 2px;
}
.nav-link:hover::after { width: 100%; }

/* ---- Logo (always keeps its aspect ratio, never stretches) ---- */
.site-logo {
  display: block;
  height: auto;          /* let width drive height so ratio is preserved */
  width: auto;
  max-height: 48px;      /* desktop cap */
  max-width: 200px;      /* never push the nav links */
  object-fit: contain;
  image-rendering: auto;
}
.footer-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .site-logo { max-height: 36px; }   /* neat next to the hamburger */
}

/* ---- Services dropdown (desktop) ---- */
.services-dd .services-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.services-dd:hover .services-menu,
.services-dd:focus-within .services-menu,
.services-dd.open .services-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.dd-caret { transition: transform .2s ease; }
.services-dd:hover .dd-caret,
.services-dd.open .dd-caret,
.m-services-toggle[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

/* Card hover lift */
.lift { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
.lift:hover { transform: translateY(-6px); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .animate-floaty, .animate-fadeUp { animation: none !important; }
  html { scroll-behavior: auto; }
}