/* =========================
   EV Savings Challenge – styles.css
   ========================= */

/* --- Base / body --- */
body {
  background: #F7FAFC;              /* soft, modern background */
  color: #1F2937;                    /* neutral ink */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
}

/* Optional hero gradient if you wrap your header in .ev-hero */
.ev-hero {
  background: linear-gradient(180deg, #ffffff 0%, #F7FAFC 100%);
  padding: 24px 0 8px;
}

/* Subtle secondary text */
.text-subtle { color: #6B7280 !important; }

/* --- Headings --- */
h1, .h1 {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Cards / wrappers --- */
.ev-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
  position: relative;   /* allows tooltips to overflow cleanly */
  overflow: visible;
}

/* --- Forms --- */
.form-control, .form-select {
  border-radius: 12px;
  border-color: #E5E7EB;
  padding: 12px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: #1E88E5;
  box-shadow: 0 0 0 0.25rem rgba(30,136,229,0.15);
}

/* --- Buttons --- */
.btn-primary {
  background-color: #1E88E5;   /* EV Blue */
  border-color: #1E88E5;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 4px 12px rgba(30,136,229,0.20);
}
.btn-primary:hover {
  background-color: #1565C0;   /* darker blue */
  border-color: #1565C0;
}

.btn-outline-primary {
  color: #1E88E5;
  border-color: #1E88E5;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
}
.btn-outline-primary:hover {
  background-color: rgba(30,136,229,0.08);
  color: #1565C0;
  border-color: #1E88E5;
}

/* Secondary outline (if you use it) */
.btn-outline-secondary {
  color: #374151;
  border-color: #D1D5DB;
  border-radius: 10px;
  padding: 12px 18px;
}
.btn-outline-secondary:hover {
  background-color: #F3F4F6;
  color: #111827;
  border-color: #D1D5DB;
}

/* --- Highlights / badges --- */
.ev-highlight {
  color: #27AE60;               /* Energy Green */
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
}
.badge-ev {
  background: rgba(46,204,113,.12);
  color: #27AE60;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- Links --- */
a { color: #1E88E5; }
a:hover { color: #1565C0; }

/* =========================
   Tooltip tuning (Bootstrap 5)
   ========================= */
:root{
  --bs-tooltip-bg: #111;
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: .98;
  --bs-tooltip-max-width: 320px;
}
.tooltip .tooltip-inner{
  font-size: .95rem;
  padding: .45rem .6rem;
}
.ev-tip{
  --bs-tooltip-bg: #111;
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-max-width: 24rem;
  --bs-tooltip-padding-y: .45rem;
  --bs-tooltip-padding-x: .6rem;
  --bs-tooltip-font-size: .95rem;
  --bs-tooltip-border-radius: .5rem;
  z-index: 3000;
}
.tooltip { z-index: 2000; } /* ensure on top */

/* =========================
   Global Brand Header (consistent on every page)
   ========================= */
.brand-wrap{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand-bar{
  padding-block:12px; /* equal top/bottom padding */
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-left,
.brand-right{
  display:flex;
  align-items:center;
}

/* Logo: consistent, responsive */
.brand-logo{
  height:64px;       /* default */
  width:auto;
  display:block;
  object-fit:contain;
}

/* Strapline */
.brand-strapline{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight:600;
  font-size:18px;
  color:#374151;
  white-space:nowrap;
}

/* Scale up on larger screens */
@media (min-width: 768px){
  .brand-bar{ padding-block:14px; }
  .brand-logo{ height:72px; }
  .brand-strapline{ font-size:19px; }
}
@media (min-width: 1200px){
  .brand-bar{ padding-block:16px; }
  .brand-logo{ height:80px; }
  .brand-strapline{ font-size:20px; }
}

/* =========================
   Keep: Bootstrap demo helpers (from original)
   ========================= */
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .bd-placeholder-img-lg { font-size: 3.5rem; }
}
.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* Legacy demo violet button (kept if still referenced) */
.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle { z-index: 1500; }