/* Brand tokens */
:root{
  --page-bg:#f6f8fb;     /* page background */
  --brand:#2563eb;
  --brand-600:#1d4ed8;
  --ink:#0f172a;
  --muted:#64748b;
  --soft:#f8fafc;
   --footer-bg: #fe6510;   /* change this to your desired color */
  --footer-fg: #ffffff;
  --footer-muted: #94a3b8;
  --footer-border: #ffffff1a; /* 10% white */
}

/* Apply site-wide background color */
body{
  background:var(--page-bg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}

/* Keep navbar white while page is tinted */
.navbar{
  background:#fff !important;
}

/* (existing helpers; keep if you already have them) */
.section{padding:72px 0}
.section-soft{background:var(--soft)}
.gradient-hero{background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 60%,#ffffff 100%)}
.btn-brand{background:var(--brand);border-color:var(--brand)}
.btn-brand:hover{background:var(--brand-600);border-color:var(--brand-600)}
.badge-soft{background:#2563EB1A;color:var(--brand);border:1px solid #2563EB33}
.icon-round{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#2563EB1A}
.card-hover{transition:transform .15s ease,box-shadow .15s ease}
.card-hover:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0F172A14}
.shadow-soft{box-shadow:0 10px 30px #0206170F}
.card-hover { position: relative; }
.badge { letter-spacing: .2px; }

.footer-links a{
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover{
  color: var(--ink);
  text-decoration: underline;
}
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2563EB14;
  color: var(--brand);
  text-decoration: none;
}
.footer-social a:hover{
  background: #2563EB26;
}
/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030; /* above content, below offcanvas if any */
}

/* Top utility bar */
.topbar {
  background-color: #fe6510; /* Bootstrap primary blue */
  color: #fff;
  font-size: 0.875rem;
  padding: 0.25rem 0;
}

.topbar .topbar-link {
  color: #fff;
  text-decoration: none;
}
.topbar .topbar-link:hover {
  text-decoration: underline;
}

.topbar .btn {
  /* compact buttons on the topbar */
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .8rem;
}

/* Main nav tweaks */
.navbar .nav-link {
  padding: 0.5rem 0.75rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #0d6efd;
}

/* Ensure toggler is visible on white background (uses .navbar-light) */
.navbar-light .navbar-toggler {
  border-color: #0000001A;
}

/* Mobile stacking for the topbar */
@media (max-width: 575.98px) {
  .topbar .container {
    flex-direction: column;
    gap: 0.25rem;
  }
}
/* === Footer theme (controlled from app.css) === */
.site-footer{
  background: #fe6510;
  color: var(--footer-fg);
  padding: 48px 0 24px;
  border-top: 1px solid var(--footer-border);
}

/* Links inside footer */
.site-footer .footer-links a{
  color: var(--footer-muted);
  text-decoration: none;
}
.site-footer .footer-links a:hover{
  color: var(--footer-fg);
  text-decoration: underline;
}

/* Social icons override for dark footer */
.site-footer .footer-social a{
  background: #FFFFFF14; /* 8% white */
  color: var(--footer-fg);
}
.site-footer .footer-social a:hover{
  background: #FFFFFF26; /* 15% white */
}

/* Bottom strip line & text */
.site-footer .footer-bottom{
  border-top: 1px solid var(--footer-border);
  margin-top: 24px;
  padding-top: 16px;
  color: var(--footer-muted);
}

/* Profile avatar pill for topbar */
.tb-avatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #0d6efd;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;
}
.tb-avatar img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tb-avatar-fallback{
  width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* Make dropdown a bit wider */
.dropdown-menu{ min-width: 220px; }