/* ==========================================================================
   KAVIRI TECH — SITE-WIDE DESIGN SYSTEM (WHITE CANVAS / BLACK+BLUE TYPE /
   BLUE ELEVATION SHADOWS)
   ==========================================================================
   Loaded last (see layouts.blade.php) so it sits on top of the vendor
   theme (theme.css) and the page-specific stylesheets. Most page content
   already carries the correct colour inline or via a dedicated component
   class (service cards, product cards, the lead-capture form, etc.) — this
   file supplies the site-wide *defaults* those specific rules sit on top
   of, plus a handful of targeted fixes for components that were still
   wired to the old brand colour.

   Rules are intentionally NOT !important unless the thing they override
   is itself !important (or otherwise wins on specificity) in theme.css —
   forcing !important everywhere would also stomp legitimate exceptions
   such as light headings set on dark card/banner backgrounds.
   ========================================================================== */

:root {
  /* Surfaces & backgrounds */
  --bg-page: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-inner: #F0F7FF;

  /* Typography colours */
  --text-h1-h2: #0A0D14;
  --text-h3-h5: #1E3A8A;
  --text-body: #1E293B;
  --text-accent-blue: #2563EB;
  --text-accent-blue-hover: #1D4ED8;
  --text-sky-blue: #0284C7;
  --text-muted: #94A3B8;

  /* Borders */
  --border-subtle: #E2E8F0;
  --border-active: #93C5FD;
  --border-focus: #2563EB;

  /* Blue elevation shadows */
  --shadow-blue-rest: 0 4px 14px 0 rgba(37, 99, 235, 0.08);
  --shadow-blue-hover: 0 14px 30px -4px rgba(37, 99, 235, 0.22);
  --shadow-blue-glow: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* Bootstrap theme variables — the vendor stylesheet mostly hardcodes its
     own colours, but a handful of hand-written project files (the hero
     stat chips, floating cards, .btn-primary) legitimately consume these,
     so redefining them here fixes those in one place. */
  --bs-primary: #2563EB;
  --bs-secondary: #1E293B;
  --bs-info: #0284C7;
  --bs-light: #F0F7FF;
}

/* -------------------------------------------------------------------- */
/* Base canvas                                                          */
/* -------------------------------------------------------------------- */
body {
  background-color: var(--bg-page);
  color: var(--text-body);
}

/* -------------------------------------------------------------------- */
/* Headings — defaults only. Any component with a more specific rule     */
/* (.text-white on dark cards, .hero-title's gradient clip, inline       */
/* style="color:") already wins on specificity/origin and is untouched.  */
/* -------------------------------------------------------------------- */
h1, .h1, h2, .h2 {
  color: var(--text-h1-h2);
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--text-h3-h5);
}

p, li, label {
  color: var(--text-body);
}

/* -------------------------------------------------------------------- */
/* Hyperlinks                                                            */
/* -------------------------------------------------------------------- */
a {
  color: var(--text-accent-blue);
}

a:hover, a:focus {
  color: var(--text-accent-blue-hover);
}

/* -------------------------------------------------------------------- */
/* Navigation                                                            */
/* -------------------------------------------------------------------- */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.nav-item.active .nav-link {
  color: var(--text-accent-blue) !important;
}

/* -------------------------------------------------------------------- */
/* Buttons — .btn-primary already resolves through --bs-primary above    */
/* (see hero-animations.css), this only fixes the hover/focus states     */
/* theme.css still hardcodes to the old brand colour, and adds the       */
/* touch-lift + blue glow. Outline/light buttons (carousel arrows, the   */
/* "Learn About Our Process" secondary CTA) are left alone on purpose.   */
/* -------------------------------------------------------------------- */
.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--text-accent-blue-hover) !important;
  border-color: var(--text-accent-blue-hover) !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
  box-shadow: var(--shadow-blue-glow) !important;
}

.btn-primary,
a.btn-primary {
  box-shadow: var(--shadow-blue-rest);
}

.btn-primary:hover,
a.btn-primary:hover {
  box-shadow: var(--shadow-blue-hover);
}

/* -------------------------------------------------------------------- */
/* Technology stack pills (section "Technologies We Work With")          */
/* -------------------------------------------------------------------- */
.tech-pill-category-label {
  color: var(--text-h3-h5);
}

.tech-pill:hover {
  border-color: var(--border-active);
}

.tech-pill:hover .tech-pill-label {
  color: var(--text-accent-blue);
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.link-900 {
  color: var(--text-body) !important;
}

.link-900:hover, .link-900:focus {
  color: var(--text-accent-blue) !important;
}

.footer-heading-color {
  color: var(--text-h1-h2);
}

.icon-group .icon-item {
  background-color: var(--bg-card-inner) !important;
  color: var(--text-accent-blue) !important;
}

.icon-group .icon-item:hover,
.icon-group .icon-item:focus {
  background-color: var(--text-accent-blue) !important;
  color: #FFFFFF !important;
}

.shadow-social {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* -------------------------------------------------------------------- */
/* Contact info cards (Phone / Email / Location) — theme.css's           */
/* .text-muted is a near-invisible #BDBDBD; scoped to #contact .card so  */
/* only these three values darken, not every other .text-muted on the   */
/* site (service descriptions, testimonial captions, etc).               */
/* -------------------------------------------------------------------- */
#contact .card .text-muted {
  color: #475569 !important;
}

/* -------------------------------------------------------------------- */
/* Form inputs — the site's actual contact/lead form (.lead-form-field)  */
/* is an intentionally dark-themed card with its own correct styling in  */
/* conversion-components.css; this only supplies a light-canvas default  */
/* for any plain Bootstrap form control elsewhere on the site.           */
/* -------------------------------------------------------------------- */
input[type="text"]:not(.lead-form-field),
input[type="email"]:not(.lead-form-field),
input[type="tel"]:not(.lead-form-field),
textarea:not(.lead-form-field),
select:not(.lead-form-field) {
  background-color: var(--bg-subtle);
  color: var(--text-h1-h2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  outline: none;
}

input[type="text"]:not(.lead-form-field):focus,
input[type="email"]:not(.lead-form-field):focus,
input[type="tel"]:not(.lead-form-field):focus,
textarea:not(.lead-form-field):focus,
select:not(.lead-form-field):focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-blue-glow);
}