/*
 * sote-readability.css
 * Comprehensive text readability fixes across the entire site.
 * Loaded last so it takes precedence over all other stylesheets.
 * Covers: topbar, header/nav, hero sections, page headers,
 *         footer, mobile nav, and all inner-page sections.
 */

/* ─────────────────────────────────────────────
   GLOBAL BASE
   Ensure body text is always legible
   ───────────────────────────────────────────── */
body {
  color: #3a3a3a;
}

/* ─────────────────────────────────────────────
   TOPBAR
   Yellow (#f7a600) background → needs dark text
   ───────────────────────────────────────────── */

/* Generic topbar (non-sote pages) */
.topbar .topbar__info li,
.topbar .topbar__info li a,
.topbar .topbar__info li address,
.topbar .topbar__right,
.topbar .topbar__login,
.topbar .topbar__login a,
.topbar .topbar__language .bootstrap-select > .dropdown-toggle,
.topbar .topbar__language .bootstrap-select > .dropdown-toggle .filter-option,
.topbar .topbar__language .bootstrap-select > .dropdown-toggle .filter-option-inner,
.topbar .topbar__language .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  color: #17120d !important;
}

.topbar .topbar__info__icon {
  color: #17120d !important;
  border-color: rgba(23, 18, 13, 0.28) !important;
}

.topbar .topbar__info li a:hover,
.topbar .topbar__login a:hover {
  color: rgba(23, 18, 13, 0.65) !important;
}

/* Sote-home topbar has a dark gradient bg → keep white text */
.sote-topbar .topbar__info li,
.sote-topbar .topbar__info li a,
.sote-topbar .topbar__login a,
.sote-topbar .topbar__login__inner,
.sote-topbar .topbar__login__inner a {
  color: rgba(255, 255, 255, 0.9) !important;
}

.sote-topbar .topbar__info li a:hover,
.sote-topbar .topbar__login a:hover {
  color: var(--sote-base, #f7a600) !important;
}

/* ─────────────────────────────────────────────
   HEADER / MAIN NAVIGATION
   Light (#fff9f0) background → dark text
   ───────────────────────────────────────────── */
.main-header,
.sote-header {
  background-color: rgba(255, 249, 240, 0.96);
}

/* Nav links */
.main-menu .main-menu__list > li > a,
.sote-home .main-menu .main-menu__list > li > a {
  color: #17120d !important;
}

.main-menu .main-menu__list > li > a:hover,
.main-menu .main-menu__list > li.current > a,
.sote-home .main-menu .main-menu__list > li > a:hover,
.sote-home .main-menu .main-menu__list > li.current > a {
  color: var(--sote-base-deep, #db7600) !important;
}

/* Dropdown menus */
.main-menu .main-menu__list ul li a {
  color: #17120d !important;
}

.main-menu .main-menu__list ul li a:hover {
  color: var(--sote-base-deep, #db7600) !important;
}

/* Sticky cloned header */
.sticky-header--cloned .main-menu .main-menu__list > li > a {
  color: #17120d !important;
}

/* Search + cart icons in header */
.main-header__search,
.main-header__cart {
  color: #17120d !important;
}

/* ─────────────────────────────────────────────
   HERO SECTIONS (dark overlay background)
   Always white/near-white text
   ───────────────────────────────────────────── */

/* Generic main-slider hero */
.main-slider-one__item,
.main-slider-two__item,
.main-slider-three__item {
  /* Dark bg is set inline; text should be white */
}

.main-slider-one__title,
.main-slider-two__title,
.main-slider-three__title {
  color: #ffffff !important;
}

.main-slider-one__text,
.main-slider-two__text,
.main-slider-three__text {
  color: rgba(255, 255, 255, 0.88) !important;
}

.main-slider-one__sub-title,
.main-slider-two__sub-title,
.main-slider-three__sub-title {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Sote hero (v1) */
.sote-hero__content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.sote-hero__content p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.sote-hero__trust li {
  color: rgba(255, 255, 255, 0.95) !important;
}

.sote-stat strong {
  color: #ffffff !important;
}

.sote-stat span {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-service-pill {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sote-link-btn {
  color: #ffffff !important;
}

/* Eyebrow labels on dark/hero sections */
.sote-hero .sote-eyebrow,
.sote-services-hero .sote-eyebrow,
.sote-about-hero .sote-eyebrow,
.sote-contact-hero .sote-eyebrow,
.sote-faq-hero .sote-eyebrow,
.sote-blog-hero .sote-eyebrow,
.sote-news-hero .sote-eyebrow,
.sote-article-hero .sote-eyebrow,
.sote-cta .sote-eyebrow,
.sote-footer .sote-eyebrow {
  color: #ffffff !important;
}

/* Sote hero v2 */
.sote-v2-hero__content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.sote-v2-hero__content p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.sote-v2-hero__service-tags span {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sote-v2-metric strong {
  color: #ffffff !important;
}

.sote-v2-metric span {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ─────────────────────────────────────────────
   PAGE HEADER (dark overlay bg)
   ───────────────────────────────────────────── */
.page-header__title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Breadcrumbs */
.cityride-breadcrumb li {
  color: rgba(255, 255, 255, 0.9) !important;
}

.cityride-breadcrumb li:not(:last-of-type)::after {
  color: rgba(255, 255, 255, 0.7) !important;
}

.cityride-breadcrumb li .cityride-breadcrumb__icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

.cityride-breadcrumb li a {
  color: rgba(255, 255, 255, 0.82) !important;
}

.cityride-breadcrumb li a:hover {
  color: var(--cityride-base, #f89c10) !important;
}

.cityride-breadcrumb li:last-child span {
  color: var(--cityride-base, #f89c10) !important;
}

/* ─────────────────────────────────────────────
   SECTION HEADINGS AND BODY TEXT (light bg)
   ───────────────────────────────────────────── */
.sote-section__head h2,
.sote-spotlight__content h2,
.sote-operations__lead h2,
.sote-v2-section__head h2,
.sote-v2-app h2,
.sote-v2-cta__inner h2,
.sote-v2-showcase__top h2,
.sote-v2-overview__card h2 {
  color: #0b0b0b !important;
}

.sote-section__head p,
.sote-spotlight__content p,
.sote-operations__lead p,
.sote-v2-section__head p,
.sote-v2-overview__card p,
.sote-v2-city-card__body p,
.sote-v2-service-card p,
.sote-v2-platform__content p,
.sote-v2-platform__item p,
.sote-v2-expansion__card p,
.sote-feature-card p,
.sote-process__content p {
  color: #52565a !important;
}

/* Card headings on light backgrounds */
.sote-feature-card h3,
.sote-process__content h3,
.sote-v2-city-card__body h3,
.sote-v2-service-card h3,
.sote-v2-platform__item h3,
.sote-v2-expansion__card h3,
.sote-v2-overview__card h2,
.sote-testimonial-card__quote {
  color: #0b0b0b !important;
}

/* Muted labels / uppercase eyebrows on light bg */
.sote-process__content span,
.sote-spotlight__badge span,
.sote-hero__signal span,
.sote-hero__route__label,
.sote-v2-showcase__focus span,
.sote-v2-showcase__item span,
.sote-v2-city-card__body span,
.sote-v2-platform__note span {
  color: #767b80 !important;
}

/* Strong / values on light cards */
.sote-hero__signal strong,
.sote-hero__route__value,
.sote-spotlight__badge strong,
.sote-v2-showcase__focus strong,
.sote-v2-showcase__item strong {
  color: #0b0b0b !important;
}

/* ─────────────────────────────────────────────
   DARK SECTION OVERRIDES
   Audiences, app panel, expansion hero
   ───────────────────────────────────────────── */
.sote-audiences .sote-section__head h2,
.sote-audiences .sote-audience-card h3 {
  color: #ffffff !important;
}

.sote-audiences .sote-section__head p,
.sote-audiences .sote-audience-card p {
  color: rgba(255, 255, 255, 0.80) !important;
}

.sote-audience-card li {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sote-app__content h2 {
  color: #ffffff !important;
}

.sote-app__content p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-check-list__item {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sote-store-btn span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.sote-store-btn strong {
  color: #ffffff !important;
}

.sote-v2-section--dark .sote-v2-section__head h2 {
  color: #ffffff !important;
}

.sote-v2-section--dark .sote-v2-section__head p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-v2-expansion__copy h3 {
  color: #ffffff !important;
}

.sote-v2-expansion__copy p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-v2-expansion__meta-item strong {
  color: #ffffff !important;
}

.sote-v2-expansion__meta-item span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.sote-v2-expansion__card h3,
.sote-v2-expansion__card p,
.sote-v2-expansion__card a {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Platform overlay note */
.sote-v2-platform__note span {
  color: rgba(255, 255, 255, 0.75) !important;
}

.sote-v2-platform__note strong {
  color: #ffffff !important;
}

/* Booking card (dark) */
.sote-booking-card__title {
  color: #ffffff !important;
}

.sote-booking-card__text {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-booking-card__footer p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.sote-field label {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ─────────────────────────────────────────────
   CTA SECTION (yellow gradient bg)
   ───────────────────────────────────────────── */
.sote-cta__content h2,
.sote-v2-cta__inner h2 {
  color: #17120d !important;
}

.sote-cta__content p {
  color: rgba(23, 18, 13, 0.82) !important;
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */

/* Sote-footer (custom dark footer) */
.sote-footer h3 {
  color: #ffffff !important;
}

.sote-footer a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.sote-footer a:hover {
  color: var(--sote-base, #f7a600) !important;
}

.sote-footer__brand p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.sote-footer__contact-card strong {
  color: #ffffff !important;
}

.sote-footer__contact-card p {
  color: rgba(255, 255, 255, 0.86) !important;
}

.sote-footer__social a {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sote-footer__bottom,
.sote-footer__bottom p,
.sote-footer__bottom a {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Generic main-footer (dark bg) */
.main-footer__inner .footer-widget__about-text,
.main-footer__inner .footer-widget__links li,
.main-footer__inner .footer-widget__info li,
.main-footer__inner .footer-widget__info li address {
  color: rgba(255, 255, 255, 0.88) !important;
}

.main-footer__inner .footer-widget__post__title {
  color: rgba(255, 255, 255, 0.94) !important;
}

.main-footer__inner .footer-widget__post__meta a {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Footer bottom bar — yellow bg */
.main-footer__bottom .main-footer__copyright,
.main-footer__bottom .main-footer__bottom__list li a {
  color: rgba(23, 18, 13, 0.85) !important;
}

.main-footer__bottom .main-footer__bottom__list li a:hover {
  color: #17120d !important;
}

/* Widget headings inside dark footer */
.main-footer .widget-title,
.main-footer .footer-widget__title {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   MOBILE NAV
   ───────────────────────────────────────────── */
.mobile-nav__content {
  background: #ffffff;
}

.mobile-nav__content .main-menu__list > li > a,
.mobile-nav__content .main-menu__list li a {
  color: #17120d !important;
}

.mobile-nav__content .main-menu__list > li > a:hover {
  color: var(--sote-base-deep, #db7600) !important;
}

/* ─────────────────────────────────────────────
   SECTION: PROOF / TESTIMONIALS / CARDS (light)
   ───────────────────────────────────────────── */
.sote-testimonial-card__stars {
  color: var(--sote-base-deep, #db7600) !important;
}

.sote-testimonial-card__quote {
  color: #17120d !important;
}

.sote-testimonial-card__author strong {
  color: #0b0b0b !important;
}

.sote-testimonial-card__author span {
  color: #767b80 !important;
}

/* City cards */
.sote-city-card__content h3 {
  color: #0b0b0b !important;
}

.sote-city-card__content p {
  color: #52565a !important;
}

.sote-city-card__link {
  color: #0b0b0b !important;
}

.sote-v2-city-card__body h3 {
  color: #0b0b0b !important;
}

/* Presence items */
.sote-presence__item strong {
  color: #0b0b0b !important;
}

.sote-presence__item span {
  color: #767b80 !important;
}

/* ─────────────────────────────────────────────
   INNER PAGE: ABOUT, SERVICES, CONTACT, FAQ etc.
   (page-header is dark; content sections are light)
   ───────────────────────────────────────────── */
.sote-about-section h2,
.sote-about-section h3,
.sote-services-section h2,
.sote-services-section h3,
.sote-contact-main h2,
.sote-contact-main h3,
.sote-faq-main h2,
.sote-faq-main h3,
.sote-blog-main h2,
.sote-blog-main h3,
.sote-news-main h2,
.sote-news-main h3 {
  color: #0b0b0b !important;
}

.sote-about-section p,
.sote-services-section p,
.sote-contact-main p,
.sote-faq-main p,
.sote-blog-main p,
.sote-news-main p {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   BOOKING / FORM ELEMENTS (dark bg forms)
   ───────────────────────────────────────────── */
.sote-field input,
.sote-field select {
  color: #ffffff !important;
}

.sote-field input::placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* ─────────────────────────────────────────────
   DRIVER SECTION
   ───────────────────────────────────────────── */
.sote-driver-clean-section h2,
.sote-driver-clean-section h3 {
  color: #0b0b0b !important;
}

.sote-driver-clean-section p {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   GENERIC BODY TEXT FALLBACK
   Ensure adequate contrast on all standard pages
   ───────────────────────────────────────────── */
p {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

/* Prevent transparent / invisible text globally */
[style*="color: transparent"],
[style*="color:transparent"] {
  color: inherit !important;
}

/* ─────────────────────────────────────────────
   HERO EYEBROW — v2 eyebrow on dark hero bg
   Default .sote-v2-eyebrow color is #7c5200
   (dark amber) — invisible on dark backgrounds.
   ───────────────────────────────────────────── */
.sote-v2-hero .sote-v2-eyebrow,
.sote-booking-shell .sote-v2-eyebrow,
.sote-driver-hero .sote-v2-eyebrow,
.sote-driver-page .sote-v2-eyebrow {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ─────────────────────────────────────────────
   CTA SECTION — yellow gradient bg (#f4b400)
   Body rule `color: #3a3a3a` provides adequate
   contrast here; ensure h2/p are not overridden
   to white by readability dark-section rules.
   ───────────────────────────────────────────── */
.sote-v2-cta__inner h2,
.sote-v2-cta__inner p,
.sote-v2-cta__inner span:not(.cityride-btn__icon) {
  color: #17120d !important;
}

/* Eyebrow inside yellow CTA = amber dot on white pill */
.sote-v2-cta__inner .sote-v2-eyebrow {
  background: rgba(23, 18, 13, 0.1) !important;
  border-color: rgba(23, 18, 13, 0.12) !important;
  color: #17120d !important;
}

/* ─────────────────────────────────────────────
   BOOKING CARD — white card on dark hero
   Tag contrast: amber text on amber bg is low
   ───────────────────────────────────────────── */
.sote-booking-tag {
  background: rgba(201, 141, 0, 0.14) !important;
  color: #4a2d00 !important;
}

.sote-booking-card__status {
  background: rgba(23, 18, 13, 0.07) !important;
  color: #0b0b0b !important;
}

.sote-booking-card__head h2 {
  color: #0b0b0b !important;
}

.sote-booking-card__head p {
  color: #52565a !important;
}

.sote-booking__qr-panel h3,
.sote-booking__qr-panel .sote-booking-tag {
  color: #0b0b0b !important;
}

.sote-booking-form__note strong {
  color: #0b0b0b !important;
}

/* ─────────────────────────────────────────────
   DRIVER PAGE HERO — same issue as rides hero
   ───────────────────────────────────────────── */
.sote-driver-hero__content h1,
.sote-driver-clean__hero h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.sote-driver-hero__content p,
.sote-driver-clean__hero p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ─────────────────────────────────────────────
   ABOUT PAGE — "Build with Sote" dark CTA
   The .sote-readability body rule + WOW
   animation can sometimes reset color.
   ───────────────────────────────────────────── */
.sote-about-cta__inner h2 {
  color: #ffffff !important;
}

.sote-about-cta__inner .sote-eyebrow {
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ─────────────────────────────────────────────
   GLOBAL: prevent body `color: #3a3a3a` from
   leaking into explicitly dark sections
   ───────────────────────────────────────────── */
.sote-v2-section--dark,
.sote-v2-section--dark h2,
.sote-v2-section--dark h3,
.sote-v2-section--dark p {
  color: inherit;
}

.sote-v2-section--dark .sote-v2-section__head h2 {
  color: #ffffff !important;
}

.sote-v2-section--dark .sote-v2-section__head p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ─────────────────────────────────────────────
   HEADER APP PANEL dropdown — text contrast
   ───────────────────────────────────────────── */
.sote-header__app-panel h3,
.sote-header__app-panel p,
.sote-header__app-panel strong {
  color: #0b0b0b !important;
}

.sote-header__app-panel .sote-header__app-desc {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   STEP CARDS (rides page) — labels contrast
   ───────────────────────────────────────────── */
.sote-booking-step-card__label {
  background: rgba(244, 180, 0, 0.14) !important;
  color: #5a3c00 !important;
}

.sote-booking-step-card h3 {
  color: #0b0b0b !important;
}

.sote-booking-step-card p {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   FEATURE CARDS (rides page)
   ───────────────────────────────────────────── */
.sote-booking-feature-card h3 {
  color: #0b0b0b !important;
}

.sote-booking-feature-card p,
.sote-booking-feature-card__list li {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   SECTION HEADS (light bg pages)
   ───────────────────────────────────────────── */
.sote-booking-section-head h2 {
  color: #0b0b0b !important;
}

.sote-booking-section-head p {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   BOTTOM CTA PANEL (dark bg on rides page)
   ───────────────────────────────────────────── */
.sote-booking-bottom__copy h2 {
  color: #ffffff !important;
}

.sote-booking-bottom__copy p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ─────────────────────────────────────────────
   ABOUT PAGE HERO — ensure white text on dark
   overlay is not overridden by body color rule
   ───────────────────────────────────────────── */
.sote-about-hero__content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

.sote-about-hero__content p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.sote-about-hero__content .sote-eyebrow {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ─────────────────────────────────────────────
   ABOUT HERO ACTION LINKS
   ───────────────────────────────────────────── */
.sote-about-hero .sote-text-link,
.sote-about-hero .sote-text-link span {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   ABOUT SECTION (light bg) — body text
   ───────────────────────────────────────────── */
.sote-about-section h2,
.sote-about-section h3 {
  color: #0b0b0b !important;
}

.sote-about-section p,
.sote-about-section li {
  color: #52565a !important;
}

/* ─────────────────────────────────────────────
   V2 HERO COPY — left side on booking/driver
   shells that share the .sote-booking-copy class
   ───────────────────────────────────────────── */
.sote-booking-copy h1 {
  color: #ffffff !important;
}

.sote-booking-copy p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.sote-booking-copy .sote-v2-eyebrow {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Public cleanup and final readability safeguards */
.megamenu-clickable--toggler,
.mobile-nav__content .megamenu-clickable--toggler {
  display: none !important;
}

.sote-booking-page .sote-booking-shell .sote-booking-card,
.sote-driver-page .sote-booking-shell .sote-booking-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

.sote-booking-page .sote-booking-card__head h2,
.sote-driver-page .sote-booking-card__head h2,
.sote-booking-page .sote-booking__qr-panel h3,
.sote-driver-page .sote-booking__qr-panel h3,
.sote-booking-page .sote-booking-form__note strong,
.sote-driver-page .sote-booking-form__note strong {
  color: #0b0b0b !important;
}

.sote-booking-page .sote-booking-card__head p,
.sote-driver-page .sote-booking-card__head p {
  color: #4d5358 !important;
}

.sote-booking-page .sote-booking-form__note,
.sote-driver-page .sote-booking-form__note {
  background: rgba(23, 18, 13, 0.06) !important;
  border-color: rgba(23, 18, 13, 0.08) !important;
}

.sote-booking-page .sote-booking__app-links .cityride-btn--border,
.sote-driver-page .sote-booking__app-links .cityride-btn--border {
  background: #ffffff !important;
  border-color: rgba(244, 180, 0, 0.82) !important;
  color: #17120d !important;
}

.sote-booking-page .sote-booking__app-links .cityride-btn--border span,
.sote-driver-page .sote-booking__app-links .cityride-btn--border span {
  color: #17120d !important;
}

@media (max-width: 575px) {
  #scroll-top,
  .scroll-top {
    display: none !important;
  }
}