/* ==========================================================================
   Sango Taxi — visual polish overlay
   Loaded after cityride.css. Refines spacing, hierarchy and consistency
   using the existing brand palette (--cityride-base etc.) — no structural
   HTML changes, no new colors, no functionality touched.
   ========================================================================== */

/* ==========================================================================
   Header redesign pass
   ========================================================================== */

/* Logo: the HTML's width/height attributes (103x55, a wide lockup) don't
   match the source file's real aspect ratio (463x539, a tall icon-over-
   wordmark stack). The template's own "height:auto" rule uses the real
   ratio, so the logo was rendering ~120px tall — nearly dictating the
   entire header's height by itself. Cap it to a proper header size and let
   width scale proportionally instead. */
.main-header__logo img {
  height: 62px;
  width: auto;
  max-width: none;
}
.mobile-nav__content .logo-box img {
  height: 56px;
  width: auto;
  max-width: none;
}

/* With the logo no longer oversized, give the row deliberate, comfortable
   padding instead of letting the logo's height dictate it. */
.main-header__inner {
  padding: 18px 0;
}

/* A soft edge between the white header and whatever sits below it when the
   header isn't in its sticky/scrolled state (which already gets its own
   shadow, added earlier). */
.main-header {
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.06);
}

/* Topbar: quiet vertical dividers instead of bare gaps, so "email | location"
   and "language | log in" read as grouped, deliberate clusters rather than
   loose items floating in a bar. */
.topbar__info li + li {
  position: relative;
  padding-left: 24px;
}
.topbar__info li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}
.topbar__login {
  position: relative;
  padding-left: 24px;
}
.topbar__login::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}

/* ---- Keyboard access to the header dropdowns (About, Services): they only
   open on :hover, so Tab-only users can never reach "About us" / "Welcome
   Message" / "Mission & Vision" — the submenu stays invisible while still
   sitting in the tab order. :focus-within opens it the same way hover
   does, without changing how it looks or behaves for mouse users. ---- */
.main-menu .main-menu__list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1) translateZ(0px);
}

/* ---- Reserve hero space before owl-carousel initializes. owl-carousel.css
   sets .owl-carousel{display:none} until JS adds .owl-loaded, so the hero
   (which has no height of its own) collapses to 0px on first paint and then
   jumps to full height once the carousel loads — a large, measured (~0.4)
   layout shift on the very first thing users see. Reserving the real loaded
   height up front removes that jump. Values measured directly per breakpoint. ---- */
.main-slider-one {
  min-height: 680px;
}
@media (max-width: 991px) {
  .main-slider-one {
    min-height: 968px;
  }
}
@media (max-width: 767px) {
  .main-slider-one {
    min-height: 905px;
  }
}

/* ---- Smooth anchor jumps for the new "book a taxi" CTAs ---- */
html {
  scroll-behavior: smooth;
}
#enhanced-booking-form,
.booking-form-section,
#home {
  scroll-margin-top: 140px;
}

/* ---- Footer: the template's "two" footer variant reserves 220px of top
   padding to make room for a floating CTA banner (.cta-one). That banner
   only exists on the homepage, so about/contact/welcome/mission were
   rendering a large empty gap above the footer. Restore the compact
   spacing by default and only use the wide gap where the CTA actually
   precedes the footer. ---- */
.main-footer__top--two {
  padding-top: 88px;
}
@media (max-width: 767px) {
  .main-footer__top--two {
    padding-top: 70px;
  }
}
.cta-one ~ .main-footer .main-footer__top--two {
  padding-top: 220px;
}
@media (max-width: 991px) {
  .cta-one ~ .main-footer .main-footer__top--two {
    padding-top: 80px;
  }
}

/* ---- Service cards: the rest of the site (testimonials, booking form)
   already uses soft rounded corners + shadow elevation. Bring the flat,
   hard-bordered service cards into that same language. ---- */
.service-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 14px 40px rgba(131, 46, 25, 0.18);
}

/* ---- Testimonials: subtle lift on hover to match ---- */
.testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.12);
}

/* ---- Primary "book a taxi" CTAs: consistent, more prominent weight
   wherever the booking action appears (hero, why-choose-us, header) ---- */
.main-slider-one__btn.cityride-btn--secondary,
.why-choose-one__btn.cityride-btn--secondary,
.main-header__btn.cityride-btn--secondary {
  box-shadow: 0 10px 30px rgba(131, 46, 25, 0.35);
}

/* ---- Carousel dot nav: the visible dot is 6px (deliberately small/subtle
   design), but that was also the entire tap target — invisible ::before
   expands the actual hit area to a touch-friendly ~28px without changing
   how the dot looks. ---- */
.owl-dots .owl-dot {
  position: relative;
}
.owl-dots .owl-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

/* ---- Current-page nav highlight: the mobile menu is a JS clone of
   .main-menu's innerHTML (see cityride.js) but isn't re-wrapped in a
   .main-menu element, so the desktop ".current" color rule (scoped to
   ".main-menu .main-menu__list > li.current > a") never matches there.
   Mirror it under the mobile nav's own container, same accent color it
   already uses for its "expanded" dropdown state. ---- */
.mobile-nav__content .main-menu__list > li.current > a,
.mobile-nav__content .main-menu__list li ul li.current > a {
  color: var(--cityride-base, #832e19);
}

/* ---- Header: clearer separation once it becomes sticky on scroll-up ---- */
.sticky-header--normal.active {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ---- Footer widgets: tighter, more consistent vertical rhythm ---- */
.footer-widget__title {
  margin-bottom: 24px;
}
.footer-widget__links li + li {
  margin-top: 4px;
}
.footer-widget__post__item + .footer-widget__post__item {
  margin-top: 20px;
}

/* ---- Accessibility: fix WCAG color-contrast failures (verified via
   Lighthouse). Each of these pairs dark text with a dark background, or
   light-gray text that falls just under the 4.5:1 minimum. ---- */

/* "Book a taxi" buttons (hero, header, why-choose-us, CTA banner) render
   with near-black text (#141414) on a dark rust background (#832e19) —
   ~2:1 contrast. The button's own :hover rule already sets white text in
   anticipation of the hover wipe-to-black, confirming the resting-state
   color was simply left unset. Matches the --black/--white/--border
   variants, which already pair light-bg/dark-text and dark-bg/light-text. */
.cityride-btn--secondary {
  color: var(--cityride-white, #FFFFFF);
}

/* Topbar language selector: transparent background inherits the dark
   rust topbar, but the dropdown text color was never set, so it fell back
   to the browser/Bootstrap default dark text. */
.topbar__language .bootstrap-select > .dropdown-toggle,
.topbar__language .filter-option-inner-inner {
  color: var(--cityride-white, #FFFFFF) !important;
}

/* Testimonial quote text: inherits the muted --cityride-text gray
   (#838383) on a white card, ~3.5:1 — fails AA for normal-size text. */
.testimonial-card__text {
  color: #595959;
}

/* Footer copyright + legal links: near-black at 80% opacity on the dark
   rust footer-bottom bar. */
.main-footer__copyright,
.main-footer__bottom__list li a {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Small/mid-screen refinements ---- */
@media (max-width: 767px) {
  .booking-form-container {
    padding: 22px !important;
  }
  .booking-form-header {
    margin-bottom: 20px !important;
  }
  .form-group-enhanced {
    margin-bottom: 14px !important;
  }
}
@media (max-width: 575px) {
  .main-slider-one__title {
    font-size: 32px;
  }
  .booking-form-container {
    padding: 18px !important;
  }
  .booking-form-header h2 {
    font-size: 26px !important;
  }
}