/* ==========================================================================
   myindiaspeedpost.com - Custom styles
   Note: Custom utility classes are prefixed with "sp-" to avoid any
   collision with Tailwind's built-in utility classes (e.g. Tailwind's
   bg-orange-500 vs. our sp-bg-orange-500).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base styles
   -------------------------------------------------------------------------- */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #FFFDFC;
}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Scroll reveal animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Custom Orange Color Palette (based on brand color #E87518)
   Exposed as CSS variables AND as "sp-" prefixed utility classes so they
   never collide with Tailwind's own color utilities.
   -------------------------------------------------------------------------- */
:root {
  --sp-orange-100: #E7E9FE;
  --sp-orange-200: #C5CBFC;
  --sp-orange-300: #94A0FA;
  --sp-orange-400: #6374F8;
  --sp-orange-500: #273FF5; /* brand base color */
  --sp-orange-600: #0B25EA;
  --sp-orange-700: #091FC3;
  --sp-orange-800: #07199C;
  --sp-orange-900: #061375;
}

/* ---- Text color utilities ---- */
.sp-text-orange-100 { color: var(--sp-orange-100); }
.sp-text-orange-200 { color: var(--sp-orange-200); }
.sp-text-orange-300 { color: var(--sp-orange-300); }
.sp-text-orange-400 { color: var(--sp-orange-400); }
.sp-text-orange-500 { color: var(--sp-orange-500); }
.sp-text-orange-600 { color: var(--sp-orange-600); }
.sp-text-orange-700 { color: var(--sp-orange-700); }
.sp-text-orange-800 { color: var(--sp-orange-800); }
.sp-text-orange-900 { color: var(--sp-orange-900); }

/* ---- Background color utilities ---- */
.sp-bg-orange-100 { background-color: var(--sp-orange-100); }
.sp-bg-orange-200 { background-color: var(--sp-orange-200); }
.sp-bg-orange-300 { background-color: var(--sp-orange-300); }
.sp-bg-orange-400 { background-color: var(--sp-orange-400); }
.sp-bg-orange-500 { background-color: var(--sp-orange-500); }
.sp-bg-orange-600 { background-color: var(--sp-orange-600); }
.sp-bg-orange-700 { background-color: var(--sp-orange-700); }
.sp-bg-orange-800 { background-color: var(--sp-orange-800); }
.sp-bg-orange-900 { background-color: var(--sp-orange-900); }

/* ---- Border color utilities ---- */
.sp-border-orange-100 { border-color: var(--sp-orange-100); }
.sp-border-orange-200 { border-color: var(--sp-orange-200); }
.sp-border-orange-300 { border-color: var(--sp-orange-300); }
.sp-border-orange-400 { border-color: var(--sp-orange-400); }
.sp-border-orange-500 { border-color: var(--sp-orange-500); }
.sp-border-orange-600 { border-color: var(--sp-orange-600); }
.sp-border-orange-700 { border-color: var(--sp-orange-700); }
.sp-border-orange-800 { border-color: var(--sp-orange-800); }
.sp-border-orange-900 { border-color: var(--sp-orange-900); }

/* --------------------------------------------------------------------------
   Hover variants
   Usage: combine with the base class, e.g.
   <button class="sp-bg-orange-500 sp-hover-bg-orange-700">...</button>
   -------------------------------------------------------------------------- */

/* ---- Hover text color ---- */
.sp-hover-text-orange-100:hover { color: var(--sp-orange-100); }
.sp-hover-text-orange-200:hover { color: var(--sp-orange-200); }
.sp-hover-text-orange-300:hover { color: var(--sp-orange-300); }
.sp-hover-text-orange-400:hover { color: var(--sp-orange-400); }
.sp-hover-text-orange-500:hover { color: var(--sp-orange-500); }
.sp-hover-text-orange-600:hover { color: var(--sp-orange-600); }
.sp-hover-text-orange-700:hover { color: var(--sp-orange-700); }
.sp-hover-text-orange-800:hover { color: var(--sp-orange-800); }
.sp-hover-text-orange-900:hover { color: var(--sp-orange-900); }

/* ---- Hover background color ---- */
.sp-hover-bg-orange-100:hover { background-color: var(--sp-orange-100); }
.sp-hover-bg-orange-200:hover { background-color: var(--sp-orange-200); }
.sp-hover-bg-orange-300:hover { background-color: var(--sp-orange-300); }
.sp-hover-bg-orange-400:hover { background-color: var(--sp-orange-400); }
.sp-hover-bg-orange-500:hover { background-color: var(--sp-orange-500); }
.sp-hover-bg-orange-600:hover { background-color: var(--sp-orange-600); }
.sp-hover-bg-orange-700:hover { background-color: var(--sp-orange-700); }
.sp-hover-bg-orange-800:hover { background-color: var(--sp-orange-800); }
.sp-hover-bg-orange-900:hover { background-color: var(--sp-orange-900); }

/* ---- Hover border color ---- */
.sp-hover-border-orange-100:hover { border-color: var(--sp-orange-100); }
.sp-hover-border-orange-200:hover { border-color: var(--sp-orange-200); }
.sp-hover-border-orange-300:hover { border-color: var(--sp-orange-300); }
.sp-hover-border-orange-400:hover { border-color: var(--sp-orange-400); }
.sp-hover-border-orange-500:hover { border-color: var(--sp-orange-500); }
.sp-hover-border-orange-600:hover { border-color: var(--sp-orange-600); }
.sp-hover-border-orange-700:hover { border-color: var(--sp-orange-700); }
.sp-hover-border-orange-800:hover { border-color: var(--sp-orange-800); }
.sp-hover-border-orange-900:hover { border-color: var(--sp-orange-900); }

/* MyIndiaSpeedPost custom mobile-first finishing layer */
:root {
  --misp-orange: #e87518;
  --misp-orange-dark: #b84b0b;
  --misp-orange-soft: #fff1e4;
  --misp-ink: #252a31;
  --misp-muted: #5c6470;
  --misp-border: #eadfd5;
  --misp-page: #fffaf5;
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  color: var(--misp-ink);
  background: var(--misp-page);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid #f5a45e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* MyIndiaSpeedPost mobile visibility and footer fixes (2026-10) */
html, body {
  border: 0 !important;
  outline: 0 !important;
}

/* Explicit colors for custom utility classes not generated in every build */
.sp-bg-orange-900 { background-color: #7c2d12 !important; }
.sp-bg-orange-600 { background-color: #ea580c !important; }
.sp-bg-orange-500 { background-color: #f97316 !important; }
.sp-bg-orange-700 { background-color: #c2410c !important; }
.sp-hover-bg-orange-600:hover { background-color: #ea580c !important; }
.sp-hover-bg-orange-700:hover { background-color: #c2410c !important; }
.sp-hover-bg-orange-200:hover { background-color: #ffedd5 !important; }
.sp-hover-text-orange-900:hover { color: #7c2d12 !important; }

/* Mobile navigation: keep the action CTA visible against the light panel */
#mobileSidebar {
  background: #fffaf5 !important;
  color: #1f2937 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 18px 48px rgba(30, 41, 59, .22) !important;
}
#mobileSidebar nav a { color: #1f2937; }
#mobileSidebar nav a:last-child {
  background: #ea580c !important;
  color: #fff !important;
  border: 1px solid #c2410c !important;
  min-height: 44px;
}
#mobileSidebar nav a:last-child svg { color: #fff !important; }
#mobileSidebar nav a:last-child:hover,
#mobileSidebar nav a:last-child:focus-visible { background: #c2410c !important; color: #fff !important; }

/* Tracking action must remain orange with readable white text */
#trackBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  background: #ea580c !important;
  color: #fff !important;
  border: 1px solid #c2410c !important;
  opacity: 1;
}
#trackBtn:hover, #trackBtn:focus-visible { background: #c2410c !important; color: #fff !important; }
#trackBtn:disabled { opacity: .65 !important; }

/* Footer: remove the accidental black frame and restore contrast */
footer.sp-bg-orange-900 {
  display: block;
  background: #7c2d12 !important;
  color: #ffedd5 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  width: 100%;
}
footer.sp-bg-orange-900 nav,
footer.sp-bg-orange-900 nav a,
footer.sp-bg-orange-900 nav span,
footer.sp-bg-orange-900 p { color: #ffedd5 !important; }
footer.sp-bg-orange-900 nav a:hover,
footer.sp-bg-orange-900 nav a:focus-visible { color: #fff !important; text-decoration: underline; }
footer.sp-bg-orange-900 .border { border-color: rgba(255, 237, 213, .35) !important; }
footer.sp-bg-orange-900 .text-slate-300,
footer.sp-bg-orange-900 .text-slate-200 { color: #ffedd5 !important; }


/* Navigation layout rules extracted from inline style attributes.
   These preserve the original sizing and visibility safeguards. */
.nav-brand-layout {
  display: flex !important;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 52px);
  position: relative;
  z-index: 2;
}
.nav-brand-link-layout {
  display: inline-flex !important;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
}
.nav-brand-image-layout {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(310px, 65vw);
  height: auto;
  max-height: 56px;
  object-fit: contain;
}
.nav-mobile-menu-scroll {
  max-height: calc(100vh - 2rem);
  overflow: auto;
}