/* ============================================================
   HOLIDAY TAXI SERVICE — MANALI
   Theme: "Himalayan Pine & Sunrise"
   One custom stylesheet. Bootstrap 5.3.3 provides the base.
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  --ht-primary:      #0F5132;  /* deep pine green — brand, headers, nav */
  --ht-primary-dark: #0A3D26;
  --ht-accent:       #F4A62A;  /* sunrise amber — CTAs, highlights, prices */
  --ht-accent-dark:  #D98C12;
  --ht-whatsapp:     #25D366;  /* WhatsApp brand green — WA buttons ONLY */
  --ht-whatsapp-dark:#128C4A;  /* darker WA green for AA-compliant hover/borders */
  --ht-ink:          #16211C;  /* body text */
  --ht-muted:        #6B7A73;
  --ht-surface:      #FFFFFF;
  --ht-surface-alt:  #F5F8F6;  /* alternating section background */
  --ht-border:       #E3EAE6;
  --ht-radius:       14px;
  --ht-shadow:       0 6px 24px rgba(15, 81, 50, 0.08);
  --ht-shadow-lg:    0 14px 40px rgba(15, 81, 50, 0.14);

  /* Bootstrap overrides */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--ht-ink);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-primary: var(--ht-primary);
  --bs-primary-rgb: 15, 81, 50;
  --bs-link-color: var(--ht-primary);
  --bs-link-hover-color: var(--ht-primary-dark);
  --bs-border-radius: var(--ht-radius);
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body { background: var(--ht-surface); }

@media (min-width: 992px) {
  body { font-size: 1.0625rem; }
}

h1, h2, h3, h4, h5, .navbar-brand {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ht-ink);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); letter-spacing: -0.01em; }

/* Visible focus ring on every interactive element (WCAG) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid var(--ht-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Skip link — first focusable element */
.ht-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ht-primary);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--ht-radius) 0;
  text-decoration: none;
  font-weight: 600;
}
.ht-skip-link:focus { left: 0; color: #fff; }

/* Section rhythm */
.py-md-6 { }
@media (min-width: 768px) {
  .py-md-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; } /* !important: overrides Bootstrap py-5 utility on the same element */
}

.ht-section-alt { background: var(--ht-surface-alt); }

/* Eyebrow label above section titles */
.ht-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ht-accent-dark); /* AA-safe amber on white */
  margin-bottom: .5rem;
}
.ht-eyebrow--ondark { color: var(--ht-accent); } /* amber on deep green passes 3:1+ for this size/weight pairing */

/* ===== BUTTONS ===== */
.btn { min-height: 44px; border-radius: 50rem; font-weight: 600; padding: .625rem 1.5rem; }

.btn-ht-accent {
  background: var(--ht-accent);
  border: 1px solid var(--ht-accent);
  color: #16211C; /* dark ink on amber — AA compliant */
}
.btn-ht-accent:hover, .btn-ht-accent:focus {
  background: var(--ht-accent-dark);
  border-color: var(--ht-accent-dark);
  color: #16211C;
}

.btn-ht-whatsapp {
  background: var(--ht-whatsapp);
  border: 1px solid var(--ht-whatsapp);
  color: #0B3D22; /* dark ink on WA green — AA compliant */
}
.btn-ht-whatsapp:hover, .btn-ht-whatsapp:focus {
  background: #1FB959;
  border-color: #1FB959;
  color: #0B3D22;
}

.btn-ht-outline-light {
  border: 2px solid rgba(255,255,255,.85);
  color: #fff;
  background: transparent;
}
.btn-ht-outline-light:hover, .btn-ht-outline-light:focus {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}

.btn-ht-ghost {
  border: 1px solid var(--ht-border);
  color: var(--ht-primary);
  background: var(--ht-surface);
}
.btn-ht-ghost:hover, .btn-ht-ghost:focus {
  border-color: var(--ht-primary);
  background: var(--ht-surface-alt);
  color: var(--ht-primary-dark);
}

/* ===== ANNOUNCEMENT BAR ===== */
.ht-announce {
  background: var(--ht-primary-dark);
  color: #fff;
  font-size: .875rem;
  position: relative;
  z-index: 1035;
}
.ht-announce a { color: var(--ht-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ht-announce a:hover { text-decoration: underline; color: var(--ht-accent); }
.ht-announce__close {
  background: none;
  border: 0;
  color: #fff;
  line-height: 1;
  padding: .5rem .75rem;
  min-width: 44px;
  min-height: 44px;
}

/* ===== NAVBAR ===== */
.ht-navbar {
  transition: background-color .3s ease, box-shadow .3s ease;
  background: transparent;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.ht-navbar .navbar-brand { color: #fff; font-weight: 800; font-size: 1.25rem; }
.ht-navbar .navbar-brand .bi-taxi-front-fill { color: var(--ht-accent); }
.ht-navbar .navbar-brand strong { color: var(--ht-accent); }
.ht-navbar .nav-link { color: rgba(255,255,255,.92); font-weight: 500; }
.ht-navbar .nav-link:hover, .ht-navbar .nav-link:focus { color: var(--ht-accent); }
.ht-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); color: #fff; min-width: 44px; min-height: 44px; }

/* Solid state after 60px scroll (class toggled by JS) */
.ht-navbar.ht-navbar--solid {
  background: var(--ht-surface);
  box-shadow: var(--ht-shadow);
}
.ht-navbar.ht-navbar--solid .navbar-brand { color: var(--ht-primary); }
.ht-navbar.ht-navbar--solid .navbar-brand strong { color: var(--ht-accent-dark); }
.ht-navbar.ht-navbar--solid .nav-link { color: var(--ht-ink); }
.ht-navbar.ht-navbar--solid .nav-link:hover,
.ht-navbar.ht-navbar--solid .nav-link:focus { color: var(--ht-primary); }
.ht-navbar.ht-navbar--solid .navbar-toggler { border-color: var(--ht-border); color: var(--ht-ink); }

/* Offcanvas (mobile menu) */
.ht-offcanvas .nav-link { color: var(--ht-ink); font-weight: 600; padding: .75rem 0; font-size: 1.125rem; }
.ht-offcanvas .nav-link:hover { color: var(--ht-primary); }

/* ===== HERO ===== */
.ht-hero {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding-top: 7rem;
  padding-bottom: 3rem;
}
.ht-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,61,38,.88) 0%, rgba(10,61,38,.45) 55%, rgba(10,61,38,.15) 100%);
}
.ht-hero > .container { position: relative; z-index: 1; }
.ht-hero h1 { color: #fff; }
.ht-hero .ht-hero__sub { color: rgba(255,255,255,.9); font-size: 1.125rem; max-width: 34rem; }

.ht-trust-strip { color: #fff; font-size: .9375rem; }
.ht-trust-strip .bi { color: var(--ht-accent); font-size: 1.125rem; }

/* Quick Inquiry card floating over hero */
.ht-quick-card {
  background: var(--ht-surface);
  border-radius: var(--ht-radius);
  box-shadow: var(--ht-shadow-lg);
  border: 1px solid var(--ht-border);
}

/* ===== CARDS (shared) ===== */
.ht-card {
  border-radius: var(--ht-radius);
  border: 1px solid var(--ht-border);
  box-shadow: var(--ht-shadow);
  background: var(--ht-surface);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.ht-card:hover { transform: translateY(-6px); box-shadow: var(--ht-shadow-lg); }
.ht-card img { width: 100%; height: auto; display: block; }

/* Service card icon badge overlapping image */
.ht-service-card__media { position: relative; }
.ht-service-card__badge {
  position: absolute;
  left: 1rem;
  bottom: -1.375rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ht-primary);
  color: var(--ht-accent);
  font-size: 1.25rem;
  box-shadow: var(--ht-shadow);
}
.ht-service-card__body { padding: 2.25rem 1.25rem 1.25rem; }
.ht-link-arrow {
  font-weight: 700;
  text-decoration: none;
  color: var(--ht-primary);
}
.ht-link-arrow:hover { color: var(--ht-accent-dark); }

/* Fleet cards */
.ht-fleet-card__media { position: relative; }
.ht-fleet-card__capacity {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: var(--ht-accent);
  color: #16211C;
  font-weight: 700;
  font-size: .8125rem;
  padding: .25rem .75rem;
  border-radius: 50rem;
}
.ht-fleet-card__models { color: var(--ht-muted); font-size: .875rem; }
.ht-fleet-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--ht-border);
  font-size: .9375rem;
}
.ht-fleet-card__price-row:last-of-type { border-bottom: 0; }
.ht-price { color: var(--ht-accent-dark); font-weight: 700; white-space: nowrap; }
.ht-price .ht-price__per { color: var(--ht-muted); font-weight: 400; font-size: .75rem; }

/* ===== WHY US (dark band) ===== */
.ht-why {
  background-color: var(--ht-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' viewBox='0 0 260 120'%3E%3Cpath d='M0 120 L50 40 L80 80 L130 10 L180 90 L215 50 L260 120 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  color: #fff;
}
.ht-why h2, .ht-why h3 { color: #fff; }
.ht-why .ht-why__lead { color: rgba(255,255,255,.88); max-width: 46rem; }
.ht-why__icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244,166,42,.18);
  color: var(--ht-accent);
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.ht-why p { color: rgba(255,255,255,.82); font-size: .9375rem; }

/* Counters */
.ht-counter__num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--ht-accent);
}
.ht-counter__label { color: rgba(255,255,255,.85); font-size: .9375rem; }

/* ===== PACKAGES ===== */
.ht-pkg-card__media { position: relative; }
.ht-pkg-card__duration {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  background: rgba(10,61,38,.9);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 50rem;
}
.ht-pkg-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ht-muted);
  font-size: .9375rem;
}
.ht-pkg-card__prices { font-size: .9375rem; }
.ht-pkg-card__prices .ht-fleet-card__price-row { padding: .375rem 0; }

/* ===== INQUIRY / FORM ===== */
.ht-contact-list { list-style: none; padding: 0; margin: 0; }
.ht-contact-list li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.ht-contact-list .bi { color: var(--ht-primary); font-size: 1.125rem; flex: 0 0 auto; }
.ht-contact-list a { color: var(--ht-ink); text-decoration: none; }
.ht-contact-list a:hover { color: var(--ht-primary); text-decoration: underline; }

.ht-form .form-label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.ht-form .form-control, .ht-form .form-select {
  border-radius: 10px;
  border-color: var(--ht-border);
  min-height: 44px;
}
.ht-form .form-control:focus, .ht-form .form-select:focus {
  border-color: var(--ht-primary);
  box-shadow: 0 0 0 .2rem rgba(15,81,50,.12);
}

/* ===== FAQ ACCORDION ===== */
.ht-faq .accordion-item {
  border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius) !important; /* !important: overrides Bootstrap's first/last-child radius reset for spaced items */
  margin-bottom: .75rem;
  overflow: hidden;
  box-shadow: var(--ht-shadow);
}
.ht-faq .accordion-button {
  font-weight: 600;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ht-ink);
  background: var(--ht-surface);
  min-height: 44px;
}
.ht-faq .accordion-button:not(.collapsed) {
  color: var(--ht-primary);
  background: var(--ht-surface-alt);
  box-shadow: none;
}
/* Custom chevron: plus → × rotation */
.ht-faq .accordion-button::after {
  content: "\F64D"; /* bi-plus-lg codepoint */
  font-family: "bootstrap-icons";
  background-image: none;
  width: auto;
  height: auto;
  font-size: 1.125rem;
  color: var(--ht-accent-dark);
  transition: transform .3s ease;
}
.ht-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
  background-image: none;
}

/* ===== FOOTER ===== */
.ht-footer { background: var(--ht-primary-dark); color: rgba(255,255,255,.85); }
.ht-footer h4 {
  color: #fff;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.ht-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.ht-footer a:hover, .ht-footer a:focus { color: var(--ht-accent); text-decoration: underline; }
.ht-footer ul { list-style: none; padding: 0; margin: 0; }
.ht-footer li { padding: .25rem 0; }
.ht-footer .bi { color: var(--ht-accent); margin-right: .5rem; }
.ht-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-size: 1.125rem;
}
.ht-footer__social a:hover { background: var(--ht-accent); color: #16211C; text-decoration: none; }
.ht-footer__bar {
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .875rem;
  color: rgba(255,255,255,.7);
}
.ht-footer__bar a { color: var(--ht-accent); }

/* ===== FLOATING ELEMENTS ===== */
/* WhatsApp FAB */
.ht-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ht-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(18,140,74,.4);
  text-decoration: none;
}
.ht-fab:hover, .ht-fab:focus { color: #fff; background: #1FB959; }
.ht-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--ht-whatsapp);
  animation: ht-pulse 2s ease-out infinite;
}
@keyframes ht-pulse {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 991.98px) {
  .ht-fab { bottom: 84px; } /* clear the sticky mobile bar */
}

/* Back to top */
.ht-backtop {
  position: fixed;
  right: 1.35rem;
  bottom: 6.25rem;
  z-index: 1039;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--ht-primary);
  color: #fff;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ht-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.ht-backtop.ht-backtop--show { opacity: 1; visibility: visible; transform: translateY(0); }
.ht-backtop:hover { background: var(--ht-primary-dark); }
@media (max-width: 991.98px) {
  .ht-backtop { bottom: 152px; }
}

/* Mobile sticky bottom bar */
.ht-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1041;
  display: flex;
  box-shadow: 0 -4px 20px rgba(15,81,50,.18);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ht-surface);
}
.ht-stickybar a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
}
.ht-stickybar__call { background: var(--ht-accent); color: #16211C; }
.ht-stickybar__call:hover, .ht-stickybar__call:focus { background: var(--ht-accent-dark); color: #16211C; }
.ht-stickybar__wa { background: var(--ht-whatsapp); color: #0B3D22; }
.ht-stickybar__wa:hover, .ht-stickybar__wa:focus { background: #1FB959; color: #0B3D22; }

@media (max-width: 991.98px) {
  body { padding-bottom: 72px; } /* keep content clear of the sticky bar */
}
@media (min-width: 992px) {
  .ht-stickybar { display: none; }
}

/* ===== SCROLL REVEAL ===== */
.ht-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.ht-reveal.ht-reveal--in { opacity: 1; transform: none; }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .ht-reveal { opacity: 1; transform: none; }
}