/*
 * riverBI homepage enhancement layer
 *
 * Design tokens + polish borrowed from the recipePro design system
 * (see public/recipe.ejs :root block), expressed in riverBI's own brand:
 * navy #002D56 / #00325d, accent orange #E39156, Work Sans.
 *
 * Loaded LAST from header.ejs (after style.css / responsive.css), so these
 * rules win at equal specificity. Selectors are scoped to homepage sections
 * only — safe on other riverbi pages.
 */

:root {
  --rbi-navy-900: #002D56;
  --rbi-navy-800: #00325d;
  --rbi-navy-700: #01488A;
  --rbi-orange: #E39156;
  --rbi-orange-dark: #C9783D;
  --rbi-ink: #131313;
  --rbi-radius-lg: 16px;
  --rbi-radius-md: 10px;
  --rbi-shadow-sm: 0 2px 10px rgba(0, 45, 86, 0.06), 0 12px 32px rgba(0, 45, 86, 0.08);
  --rbi-shadow-md: 0 4px 14px rgba(0, 45, 86, 0.10), 0 24px 48px rgba(0, 45, 86, 0.14);
  --rbi-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Off-brand pink selection → brand orange */
::selection { background: var(--rbi-orange); color: #fff; }

/* Anchor targets clear any fixed chrome when jumped to */
#services, #about, #main-content { scroll-margin-top: 90px; }

/* ====================== Hero ====================== */

/* Eyebrow label (mirrors .service-title / .line1 span pattern) */
.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rbi-orange);
  margin: clamp(3rem, 8vw, 5.75rem) 0 1.1rem;
}

/* Fluid headline: 58px desktop cap preserved, scales down smoothly.
   Wins over responsive.css fixed sizes because this file loads last. */
.hero-left h1 {
  font-size: clamp(2.125rem, 1.1rem + 2.6vw, 3.625rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.hero-left p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 36em;
}

/* ====================== CTA buttons ====================== */
/* .hero-left-btn previously had no base styling — the primary CTA rendered
   as bare orange text. Now a real button in both placements (hero, about). */
.hero-left .hero-left-btn,
.about-us-inner .hero-left-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--rbi-orange);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  min-width: min(280px, 100%);
  box-shadow: var(--rbi-shadow-sm);
  transition:
    transform 0.18s var(--rbi-ease),
    box-shadow 0.18s var(--rbi-ease),
    background-color 0.18s var(--rbi-ease);
}

.hero-left .hero-left-btn span,
.about-us-inner .hero-left-btn span {
  color: inherit;
}

.hero-left .hero-left-btn img,
.about-us-inner .hero-left-btn img {
  width: 20px;
  height: 20px;
  margin-right: 0;
  filter: brightness(0) invert(1); /* monochrome icon → white */
}

.hero-left .hero-left-btn:hover,
.about-us-inner .hero-left-btn:hover {
  transform: translateY(-2px);
  background: var(--rbi-orange-dark);
  color: #fff;
  box-shadow: var(--rbi-shadow-md);
}

/* Secondary (outline-on-dark) variant */
.hero-left .hero-left-btn.hero-left-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.hero-left .hero-left-btn.hero-left-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Header + footer pill CTA ("Schedule a Session" / "Get recipePro") */
.menu-item ul li .gst,
.f-menu ul li a.gst {
  border-radius: 999px;
  font-weight: 600;
  transition:
    transform 0.18s var(--rbi-ease),
    box-shadow 0.18s var(--rbi-ease),
    background-color 0.18s var(--rbi-ease),
    color 0.18s var(--rbi-ease);
}
.menu-item ul li .gst:hover {
  background: var(--rbi-orange-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--rbi-shadow-sm);
}

/* ====================== Section headers ====================== */
/* Fluid scale, no forced <br> needed (removed in markup) */
.who-we-header {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  line-height: 1.4;
  max-width: 24em;
  margin-left: auto;
  margin-right: auto;
}

.service-header {
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 24em;
  margin-left: auto;
  margin-right: auto;
}

.about-us-inner h2 {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
  line-height: 1.4;
}

/* ====================== Service cards ====================== */
.services .service-card,
.services .service-item,
.services .service-inner {
  height: 100%;
}

.services .service-text {
  height: 100%;
  border-radius: var(--rbi-radius-lg);
  border: 1px solid rgba(0, 45, 86, 0.08);
  box-shadow: var(--rbi-shadow-sm);
  transition:
    transform 0.2s var(--rbi-ease),
    box-shadow 0.2s var(--rbi-ease),
    background-color 0.2s var(--rbi-ease);
}

/* Hover: lift + navy flip (white-on-#E39156 failed WCAG AA; navy passes) */
.services .service-card:hover .service-text,
.services .service-text:hover {
  transform: translateY(-4px);
  box-shadow: var(--rbi-shadow-md);
  background: var(--rbi-navy-900);
}

.services .service-card:hover .service-text h2,
.services .service-text:hover h2 { color: #fff; }

.services .service-card:hover .service-text p,
.services .service-text:hover p { color: rgba(255, 255, 255, 0.85); }

.services .service-card:hover .square,
.services .service-text:hover .square {
  background: var(--rbi-navy-900);
  border-color: #fff;
}

/* Feature list inside the Agentforce card: orange diamond markers,
   left-aligned (global reset had stripped all list markers) */
.services .service-text ul {
  text-align: left;
  margin: 6px auto 2px;
  max-width: 32em;
}

.services .service-text ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
  color: rgba(19, 19, 19, 0.75);
}

.services .service-text ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--rbi-orange);
  transform: rotate(45deg);
}

.services .service-card:hover .service-text ul li,
.services .service-text:hover ul li { color: rgba(255, 255, 255, 0.85); }

/* ====================== Metric band ====================== */
/* Was flat #1a1a1a (off-palette); now brand navy with orange figures */
.metric-row { background: linear-gradient(135deg, var(--rbi-navy-900), var(--rbi-navy-700)); }
.metric-row .mr-value { color: var(--rbi-orange); }

/* ====================== Contact form ====================== */
.contact-form form input,
.contact-form form select {
  border-radius: var(--rbi-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form form input:focus,
.contact-form form select:focus {
  border-color: var(--rbi-orange);
  box-shadow: 0 0 0 3px rgba(227, 145, 86, 0.22);
}

.contact-form [type="submit"] {
  border-radius: 999px;
  font-weight: 600;
}

.contact-form [type="submit"]:hover {
  background: var(--rbi-orange);
  color: #fff;
}

/* ====================== Reduced motion ====================== */
@media (prefers-reduced-motion: reduce) {
  .hero-left-btn,
  .hero-left-btn:hover,
  .services .service-text,
  .services .service-text:hover,
  .menu-item ul li .gst,
  .menu-item ul li .gst:hover {
    transition: none;
    transform: none;
  }
  .slide { animation: none; }
}