/* ===== UBER WHITE THEME OVERRIDE ===== */
/* Overrides dark theme from main.css with light Uber aesthetic */

:root {
  --ls-black: #000000;
  --ls-white: #FFFFFF;
  --ls-grey-100: #F6F6F6;
  --ls-grey-200: #EEEEEE;
  --ls-grey-300: #E2E2E2;
  --ls-grey-400: #CBCBCB;
  --ls-grey-500: #999999;
  --ls-grey-600: #767676;
  --ls-grey-700: #545454;
  --ls-grey-800: #333333;

  /* Override text colors */
  --text-light: var(--ls-grey-700);
  --text-light-darktheme: var(--ls-grey-600);
}

/* Body background - white */
body {
  background-color: #ffffff !important;
  color: var(--ls-black) !important;
}

/* Section backgrounds */
.st_black-bg,
.st_content-wrapper {
  background-color: #e8f4ff !important;
  color: var(--ls-black) !important;
}

/* Headers and titles */
/* .section-title__title,
.section-title,
h1, h2, h3, h4, h5, h6,
.t-h2, .t-h3, .t-h4,
.glue-headline {
  color: var(--ls-black) !important;
} */

/* Paragraph text */
.section-title__text,
.t-paragraph,
.t-paragraph-2,
.text-content,
p {
  color: var(--ls-grey-700) !important;
}

/* Light text variations */
.t-light,
.section-title__text,
.glue-label {
  color: var(--ls-grey-700) !important;
}

/* Cards and content boxes */
.hover-card,
.stacked-card,
.webgl-gallery__content {
  background: #e8f4ff !important;
  border: 1px solid var(--ls-grey-300) !important;
}

/* Buttons - Black CTAs (Uber style) */
.custom-button {
  --background: var(--ls-black);
  color: var(--ls-white) !important;
  background: var(--ls-black) !important;
  border: 1px solid var(--ls-black) !important;
}

.custom-button:before {
  background: var(--ls-black) !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
}

.custom-button:hover {
  --background: var(--ls-grey-800);
  background: var(--ls-grey-800) !important;
  border: 1px solid var(--ls-grey-800) !important;
  color: var(--ls-white) !important;
}

.custom-button--white {
  --background: var(--ls-white);
  color: var(--ls-black) !important;
  background: var(--ls-white) !important;
  border: 1px solid var(--ls-grey-300) !important;
}

.custom-button--white:hover {
  --background: var(--ls-grey-200);
  background: var(--ls-grey-200) !important;
  color: var(--ls-black) !important;
}

/* Navigation/Header - Force white background in ALL states (static, sticky, scrolled) */
header,
header.glue-header,
header.glue-header--transparent,
header.glue-header--active,
header.glue-header--sticky,
header.glue-header--scrolled,
.glue-header,
.glue-header--transparent,
.glue-header--active,
.glue-header--sticky,
.glue-header--scrolled,
.glue-header__bar,
header .glue-header__bar,
.glue-header.glue-header--transparent .glue-header__bar,
.glue-header.glue-header--transparent.glue-header--active .glue-header__bar,
.glue-header.glue-header--active .glue-header__bar,
.glue-header.glue-header--sticky .glue-header__bar,
.glue-header.glue-header--scrolled .glue-header__bar,
.glue-header.glue-header--transparent.gdm-header--search-open .glue-header__bar {
  background: var(--ls-white) !important;
  background-color: var(--ls-white) !important;
}

.glue-header__bar {
  border-bottom: 1px solid var(--ls-grey-300) !important;
}

/* Ensure sticky/fixed header stays white */
header.sticky,
header[style*="position: fixed"],
header[style*="position: sticky"],
.glue-header.sticky,
.glue-header[style*="position: fixed"],
.glue-header[style*="position: sticky"] {
  background: var(--ls-white) !important;
  background-color: var(--ls-white) !important;
}

.glue-header__link,
.glue-header__logo-link,
.glue-header--active .glue-header__link,
.glue-header--active .glue-header__logo-link,
.glue-header--sticky .glue-header__link,
.glue-header--sticky .glue-header__logo-link,
.glue-header--scrolled .glue-header__link,
.glue-header--scrolled .glue-header__logo-link {
  color: var(--ls-black) !important;
}

.glue-header__link:hover,
.glue-header__logo-link:hover {
  background-color: var(--ls-grey-100) !important;
  color: var(--ls-black) !important;
}

/* Override active/sticky/scrolled header hover states */
.glue-header.glue-header--transparent.glue-header--active .glue-header__link:hover,
.glue-header.glue-header--transparent.glue-header--active .glue-header__logo-link:hover,
.glue-header.glue-header--active .glue-header__link:hover,
.glue-header.glue-header--active .glue-header__logo-link:hover,
.glue-header.glue-header--sticky .glue-header__link:hover,
.glue-header.glue-header--sticky .glue-header__logo-link:hover,
.glue-header.glue-header--scrolled .glue-header__link:hover,
.glue-header.glue-header--scrolled .glue-header__logo-link:hover {
  background-color: var(--ls-grey-100) !important;
  color: var(--ls-black) !important;
}

.glue-header__link:hover span,
.glue-header.glue-header--transparent.glue-header--active .glue-header__link:hover span,
.glue-header.glue-header--transparent.glue-header--active .glue-header__logo-link:hover span,
.glue-header.glue-header--active .glue-header__link:hover span,
.glue-header.glue-header--sticky .glue-header__link:hover span,
.glue-header.glue-header--scrolled .glue-header__link:hover span {
  color: var(--ls-black) !important;
}

/* Ensure active header item stays visible in all states */
.glue-header.glue-header--transparent.glue-header--active .glue-header__item--active .glue-header__link,
.glue-header.glue-header--active .glue-header__item--active .glue-header__link,
.glue-header.glue-header--sticky .glue-header__item--active .glue-header__link,
.glue-header.glue-header--scrolled .glue-header__item--active .glue-header__link {
  color: var(--ls-black) !important;
  background-color: transparent !important;
}

/* Footer */
footer.glue-footer {
  background: var(--ls-white) !important;
  border-top: 1px solid var(--ls-grey-300) !important;
}

footer,
footer .glue-social-group,
footer .gdm-sign-up__disclaimer,
footer .glue-footer__link,
footer .glue-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: var(--ls-grey-700) !important;
}

footer .glue-social__link {
  background: var(--ls-grey-100) !important;
}

footer .glue-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled) {
  background: var(--ls-white) !important;
  border: 1px solid var(--ls-grey-300) !important;
}

/* Form inputs */
form.g-sign-up input {
  background: var(--ls-white) !important;
  border: 1px solid var(--ls-grey-400) !important;
  color: var(--ls-black) !important;
}

form.g-sign-up input::placeholder {
  color: var(--ls-grey-600) !important;
}

form.g-sign-up .email-input svg {
  color: var(--ls-black) !important;
}

/* Graph table */
.graph-table {
  color: var(--ls-black) !important;
}

.gt-head-cell {
  border-bottom: 1px solid var(--ls-grey-300) !important;
}

.gt-heading-title,
.gt-head-title,
.gtr-group-title,
.gtr-value,
.gt-paragraph {
  color: var(--ls-black) !important;
}

.gt-heading-subheading,
.gt-head-caption,
.gtr-caption,
.gtr-description,
.gt-caption {
  color: var(--ls-grey-700) !important;
}

.gtr-longshot {
  background-color: rgba(0,0,0,0.04) !important;
}

.gtr-is_last_row .gtr-cell {
  border-bottom: 1px solid var(--ls-grey-300) !important;
}

/* Borders and dividers */
.stacked-card {
  border: 1px solid var(--ls-grey-300) !important;
}

/* WebGL Gallery */
.webgl-gallery:after {
  background-color: var(--ls-white) !important;
}

.webgl-gallery__content {
  border: 1px solid var(--ls-grey-300) !important;
  background: var(--ls-white) !important;
}

.webgl-gallery__content__list li p {
  color: var(--ls-black) !important;
}

/* Hover cards text */
.hover-card .glue-headline {
  color: var(--ls-black) !important;
}

.hover-card:hover .glue-headline,
.hover-card:hover .glue-icon {
  color: var(--ls-white) !important;
}

/* Stacked cards */
.stacked-card__bottom .card-description {
  color: var(--ls-grey-700) !important;
}

/* Modal close button */
.modal-close-button {
  background: rgba(0,0,0,0.1) !important;
  color: var(--ls-black) !important;
}

.modal-close-button:focus-visible {
  outline-color: var(--ls-black) !important;
}

/* Collapse button */
.gt-collapse-button-style {
  --background: var(--ls-white);
  background: var(--ls-white) !important;
  color: var(--ls-black) !important;
  border: 1px solid var(--ls-grey-400) !important;
}

.gt-collapse-button-style:hover {
  background: var(--ls-black) !important;
  border-color: var(--ls-black) !important;
  color: var(--ls-white) !important;
}

/* Gradient text - keep blue gradient but with better contrast */
.t-gradient {
  background-image: linear-gradient(45deg, #1a73e8, #4fabff) !important;
}

/* Quote gradient - adjust for light bg */
.quote-section blockquote > p {
  background: linear-gradient(to right, #333333 20%, #1a73e8 40%, #4fabff 60%, #333333 80%) !important;
}

/* Scrollbar for light theme */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Pills/badges */
.t-pill {
  border: 1px solid var(--ls-grey-400) !important;
  color: var(--ls-black) !important;
  background: var(--ls-white) !important;
}

/* Links */
/* a {
  color: var(--ls-black) !important;
} */

a:hover {
  color: var(--ls-grey-800) !important;
}

.section-title__text a {
  color: var(--ls-grey-700) !important;
  text-decoration-color: var(--ls-grey-700) !important;
}

.section-title__text a:hover {
  color: var(--ls-black) !important;
}

/* Radial gradient - soften for light background */
.radial-gradient:before {
  background: radial-gradient(circle, rgba(26, 115, 232, 0.08) 0%, rgba(26, 115, 232, 0) 70%, rgba(26, 115, 232, 0) 100%) !important;
}

/* Spark transition */
.st_spark,
.st_spark path {
  fill: var(--ls-white) !important;
  color: var(--ls-white) !important;
}

/* Override any remaining dark backgrounds */
section,
.longshot-grid {
  background-color: #1f2937;
}

/* Ensure proper contrast for icon-based buttons */
.custom-button svg,
.hover-card .arrow-icon {
  color: currentColor !important;
}

/* Text field icons */
.mdc-text-field__icon--leading,
.mdc-text-field__icon--trailing {
  color: var(--ls-grey-600) !important;
}

/* Ensure all sections have proper backgrounds */
main section {
  background-color: #e8f4ff !important;
}

/* Hero section specific */
.hero-section,
#hero {
  background-color: #ffffff !important;
  color: var(--ls-black) !important;
}

/* ===== AGGRESSIVE HEADER OVERRIDES ===== */
/* Catch-all to prevent ANY black backgrounds on header */
header[class*="glue"],
header[class*="glue"] > *,
header[class*="glue"] .glue-header__bar,
[class*="glue-header"],
[class*="glue-header"] > *,
[class*="glue-header"] .glue-header__bar {
  background: var(--ls-white) !important;
  background-color: var(--ls-white) !important;
}

/* Ensure text stays black in header regardless of scroll state */
header[class*="glue"] a,
header[class*="glue"] span,
header[class*="glue"] .glue-header__link,
header[class*="glue"] .glue-header__logo-link,
[class*="glue-header"] a,
[class*="glue-header"] span,
[class*="glue-header"] .glue-header__link,
[class*="glue-header"] .glue-header__logo-link {
  color: var(--ls-black) !important;
}

/* Logo colors for light theme */
.glue-header__logo-svg,
.glue-header.glue-header--transparent.glue-header--active .glue-header__logo-svg {
  --g-logo-blue: #4285f4 !important;
  --g-logo-green: #34a853 !important;
  --g-logo-red: #ea4335 !important;
  --g-logo-yellow: #fbbc04 !important;
}

/* ===== TESTIMONIALS SECTION ===== */
.modern-testimonials {
  background-color: #e8f4ff !important;
}

.testimonials-title,
.testimonials-title span {
  color: #000000 !important;
}

.testimonials-subtitle {
  color: #333333 !important;
}

.testimonial-image {
  width: 150px !important;
  height: 150px !important;
  border: 4px solid #6aa3f5 !important;
}

.testimonial-text {
  color: #333333 !important;
}

.testimonial-name {
  color: #000000 !important;
}

.testimonial-role {
  color: #666666 !important;
}

/* ===== MOBILE MENU FIXES ===== */
.glue-header__drawer-toggle-btn,
.glue-header__drawer-toggle-btn svg,
.glue-icon {
  fill: #000000 !important;
  color: #000000 !important;
}

.glue-header__hamburger button {
  background: transparent !important;
  border: none !important;
}

.glue-header__drawer {
  background-color: #ffffff !important;
}

.glue-header__drawer-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Mobile menu items text */
.glue-header__bar--mobile .glue-header__link,
.glue-header__bar--mobile a {
  color: #000000 !important;
}

/* Hide drawer navigation by default (desktop) */
.glue-header__drawer-nav {
  display: none !important;
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  width: 280px !important;
  height: calc(100vh - 64px) !important;
  background-color: #ffffff !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile drawer - when opened by JS */
.glue-header__drawer {
  background-color: #ffffff !important;
}

.glue-header__drawer .glue-header__link {
  color: #000000 !important;
}

.glue-header__drawer .glue-header__link:hover {
  background-color: #e8f4ff !important;
  color: #6aa3f5 !important;
}

.glue-header__drawer .glue-header__item {
  border-bottom: 1px solid #e8f4ff !important;
}

.glue-header__drawer-item {
  border-bottom: 1px solid #e8f4ff !important;
}

.glue-header__drawer-link {
  color: #000000 !important;
  display: block !important;
  padding: 16px 24px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.glue-header__drawer-link:hover {
  background-color: #e8f4ff !important;
  color: #6aa3f5 !important;
}

/* Show drawer navigation on mobile when active */
@media (max-width: 768px) {
  .glue-header__drawer.glue-header--active .glue-header__drawer-nav,
  .glue-header__drawer.is-open .glue-header__drawer-nav {
    display: block !important;
    transform: translateX(0) !important;
  }
}

/* Ensure drawer nav doesn't show on desktop */
@media (min-width: 769px) {
  .glue-header__drawer-nav {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ===== CENTER HIRING SECTION IMAGE ===== */
/* Force everything to center and override base CSS */
.section-slider,
.slider {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.slider .item {
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.slider .slide {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  justify-content: center !important;
}

.slider .slide > div {
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.slider .input,
.slider .output {
  align-items: center !important;
  justify-content: center !important;
}

.slider .box {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force title to stay centered on all screen sizes */
.slider .title {
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

.slider .header {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

/* Keep controls centered */
.slider .controls {
  width: 280px !important;
  margin: 0 auto !important;
  justify-content: space-between !important;
  position: relative !important;
}

/* Horizontal layout on desktop - text and images side by side */
@media (min-width: 43.75rem) {
  .slider .slide {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .slider .slide > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
  }
}

@media (min-width: 64rem) {
  .slider .slide {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .slider .slide > div {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 90px !important;
  }

  .slider .title {
    justify-content: center !important;
    text-align: center !important;
  }

  .slider .header {
    text-align: center !important;
  }
}

@media (min-width: 78.125rem) {
  .slider .controls {
    width: 280px !important;
    margin: 0 auto !important;
    height: auto !important;
    grid-area: auto !important;
    position: relative !important;
  }

  .slider {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 100rem) {
  .slider {
    max-width: 1496px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== FIX SLIDER - HIDE INACTIVE SLIDES ===== */
.slider .slide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.slider .slide.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== FIX SLIDER BUTTONS VISIBILITY ===== */
.slider {
  position: relative !important;
}

.slider .controls {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 50 !important;
  position: relative !important;
}

.slider .arrow {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-radius: 50% !important;
  padding: 12px !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
}

.slider .arrow--left {
  left: 20px !important;
}

.slider .arrow--right {
  right: 20px !important;
}

.slider .arrow:hover {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.slider .arrow svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
}

.slider .arrow svg circle {
  fill: rgba(255, 255, 255, 0.5) !important;
  display: block !important;
}

.slider .arrow svg path,
.slider .arrow span svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 1 !important;
}

.slider .dots {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 20px !important;
}

.slider .dots > div {
  background: rgba(0, 0, 0, 0.3) !important;
}

.slider .dots > div.current {
  background: #6aa3f5 !important;
}

.slider .dots > div.current:before {
  background: linear-gradient(252deg, #076eff -72.3%, #4fabff -1.3%, #b1c5ff 63.69%, #ffddb7 115.43%, #ffb7b7 158.76%) !important;
}

/* ===== FIX FOOTER OVERLAP WITH FLOATING NAVIGATION ===== */
/* Add padding to footer so navigation doesn't cover content */
footer,
footer.glue-footer {
  padding-bottom: 100px !important;
}

/* On larger screens, reduce padding as nav is smaller */
@media (min-width: 43.75rem) {
  footer,
  footer.glue-footer {
    padding-bottom: 80px !important;
  }
}