/* ==========================================================================
   Custom UI/UX refresh overlay  —  Sandesh Enterprises (public site)
   Layered on top of theme.css. Non-destructive: colors, type, spacing,
   depth, motion. No layout/markup dependencies.
   ========================================================================== */

:root {
  --se-primary:        #0f8b8d;   /* teal — trustworthy, medical */
  --se-primary-dark:   #0a6c6e;
  --se-primary-light:  #4bb7b9;
  --se-accent:         #1b6ca8;   /* deep blue */
  --se-ink:            #1f2d3d;
  --se-muted:          #5b6b7b;
  --se-bg-soft:        #f4f8f9;
  --se-radius:         14px;
  --se-radius-sm:      10px;
  --se-shadow-sm:      0 2px 10px rgba(16, 42, 67, .06);
  --se-shadow:         0 10px 30px rgba(16, 42, 67, .10);
  --se-shadow-lg:      0 18px 45px rgba(16, 42, 67, .16);
  --se-transition:     .25s cubic-bezier(.4, 0, .2, 1);

  /* Nudge Bootstrap's own tokens so stock components inherit the palette */
  --bs-primary:        #0f8b8d;
  --bs-primary-rgb:    15, 139, 141;
  --bs-link-color:     #0f8b8d;
  --bs-link-hover-color: #0a6c6e;
}

/* ---------- Base / typography ---------- */
body {
  color: var(--se-ink);
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3 { color: var(--se-ink); letter-spacing: -.01em; }
h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 700; }
p { color: var(--se-muted); }
html { scroll-behavior: smooth; }

/* Accent underline for centered section headings */
section h1.text-center,
section h2.text-center {
  position: relative;
  padding-bottom: .75rem;
  margin-bottom: 2.25rem;
}
section h1.text-center::after,
section h2.text-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 68px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--se-primary), var(--se-primary-light));
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 50rem;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform var(--se-transition), box-shadow var(--se-transition),
              background-color var(--se-transition), color var(--se-transition);
}
.btn-primary,
.btn-lg.btn-primary {
  background: linear-gradient(135deg, var(--se-primary), var(--se-primary-dark));
  border: none;
  box-shadow: 0 8px 20px rgba(15, 139, 141, .28);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--se-primary-dark), var(--se-primary));
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 139, 141, .38);
}
.btn-outline-primary {
  border: 2px solid var(--se-primary);
  color: var(--se-primary);
}
.btn-outline-primary:hover {
  background: var(--se-primary);
  border-color: var(--se-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 139, 141, .28);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--se-shadow); }

/* ---------- Navbar ---------- */
.navbar {
  transition: background-color var(--se-transition), box-shadow var(--se-transition),
              padding var(--se-transition);
}
.navbar.navbar-light { backdrop-filter: saturate(140%) blur(6px); }
.navbar .nav-link {
  position: relative;
  font-weight: 500;
  transition: color var(--se-transition);
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .35rem;
  height: 2px;
  background: var(--se-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--se-transition);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link:hover { color: var(--se-primary) !important; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid rgba(16, 42, 67, .06);
  border-radius: var(--se-radius);
  box-shadow: var(--se-shadow-sm);
  overflow: hidden;
  transition: transform var(--se-transition), box-shadow var(--se-transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--se-shadow);
}
.card-title { font-weight: 700; color: var(--se-ink); }
.card img, .card-img-top { transition: transform .4s ease; }
.card:hover img, .card:hover .card-img-top { transform: scale(1.04); }

/* Expertise / feature cards get a subtle top accent on hover */
.card.text-center .card-body { padding: 1.75rem 1.25rem; }
.card.text-center::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--se-primary), var(--se-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--se-transition);
}
.card.text-center:hover::before { transform: scaleX(1); }

/* ---------- Sections rhythm & soft backgrounds ---------- */
section { scroll-margin-top: 90px; }
section.py-5 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.bg-soft, section.bg-light { background-color: var(--se-bg-soft) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--se-radius-sm);
  border: 1.5px solid #dfe6ec;
  padding: .7rem .95rem;
  transition: border-color var(--se-transition), box-shadow var(--se-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--se-primary);
  box-shadow: 0 0 0 .2rem rgba(15, 139, 141, .18);
}
label, .form-label { font-weight: 600; color: var(--se-ink); }

/* ---------- Images / media ---------- */
img.rounded, .img-rounded { border-radius: var(--se-radius) !important; }
.testimonial, .card blockquote { line-height: 1.7; }

/* ---------- Footer ---------- */
footer, .footer {
  background: linear-gradient(160deg, #10222f, #14303f);
  color: #cdd8e0;
}
footer a, .footer a { color: #a9d8d9; transition: color var(--se-transition); }
footer a:hover, .footer a:hover { color: #fff; text-decoration: none; }

/* ---------- Motion: gentle reveal on load for hero content ---------- */
@keyframes seFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero h1, .hero h2, section:first-of-type h2 { animation: seFadeUp .6s ease both; }

/* ---------- Scroll-to-top button polish (if present) ---------- */
.scroll-to-top {
  border-radius: 50%;
  box-shadow: var(--se-shadow);
  transition: transform var(--se-transition), background-color var(--se-transition);
}
.scroll-to-top:hover { transform: translateY(-3px); }

/* ---------- Accessibility ---------- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible {
  outline: 3px solid rgba(15, 139, 141, .35);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}