/* ==========================================================================
   Lions Club CMS — Brand Theme
   Matches lions.org.in (primary #005baa) and Lions Clubs International
   brand standards (Reflex/royal blue + PMS 123 gold).
   Layered on top of Bootstrap 5. Load AFTER bootstrap.min.css.
   ========================================================================== */

:root {
  /* --- Core brand palette --- */
  --lion-blue:        #005baa;  /* lions.org.in theme-color / primary */
  --lion-blue-dark:   #00337a;  /* hovers, footer, deep sections */
  --lion-blue-royal:  #00338d;  /* LCI Reflex blue reference */
  --lion-navy:        #0d2240;  /* darkest headings / footer base */
  --lion-gold:        #ffc72c;  /* LCI PMS 123 gold — accent/CTA */
  --lion-gold-dark:   #e6a700;  /* gold hover */

  /* --- Neutrals --- */
  --lion-gray-900:    #1c1c1c;
  --lion-gray-700:    #55565a;  /* LCI Cool Gray 11 */
  --lion-gray-400:    #b3b2b1;  /* LCI Cool Gray 5 */
  --lion-gray-100:    #f4f6f9;  /* section backgrounds */
  --lion-white:       #ffffff;

  /* --- Semantic (status badges: project Upcoming/Ongoing/Completed) --- */
  --lion-status-upcoming:  #407cca;
  --lion-status-ongoing:   #ffc72c;
  --lion-status-completed: #00ab68;

  /* --- Typography --- */
  --lion-font-heading: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --lion-font-body:    "Open Sans", "Segoe UI", system-ui, sans-serif;

  /* --- Shape --- */
  --lion-radius:   .5rem;
  --lion-shadow:   0 .25rem 1rem rgba(0, 51, 122, .12);
  --lion-shadow-lg:0 .75rem 2rem rgba(0, 51, 122, .18);

  /* --- Bootstrap variable overrides --- */
  --bs-primary:        var(--lion-blue);
  --bs-primary-rgb:    0, 91, 170;
  --bs-link-color:     var(--lion-blue);
  --bs-link-hover-color: var(--lion-blue-dark);
  --bs-body-font-family: var(--lion-font-body);
  --bs-body-color:     var(--lion-gray-900);
  --bs-border-radius:  var(--lion-radius);
}

/* ---------- Base ---------- */
body { font-family: var(--lion-font-body); color: var(--lion-gray-900); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-family: var(--lion-font-heading);
  font-weight: 700;
  color: var(--lion-navy);
}
a { color: var(--lion-blue); text-decoration: none; }
a:hover { color: var(--lion-blue-dark); }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--lion-blue);
  --bs-btn-border-color: var(--lion-blue);
  --bs-btn-hover-bg: var(--lion-blue-dark);
  --bs-btn-hover-border-color: var(--lion-blue-dark);
  --bs-btn-active-bg: var(--lion-blue-dark);
  font-weight: 600;
}
.btn-gold {
  --bs-btn-color: var(--lion-navy);
  --bs-btn-bg: var(--lion-gold);
  --bs-btn-border-color: var(--lion-gold);
  --bs-btn-hover-color: var(--lion-navy);
  --bs-btn-hover-bg: var(--lion-gold-dark);
  --bs-btn-hover-border-color: var(--lion-gold-dark);
  color: var(--lion-navy);
  background: var(--lion-gold);
  border: 1px solid var(--lion-gold);
  font-weight: 700;
  border-radius: var(--lion-radius);
  padding: .5rem 1.5rem;
}
.btn-gold:hover { background: var(--lion-gold-dark); }
.btn-outline-primary {
  --bs-btn-color: var(--lion-blue);
  --bs-btn-border-color: var(--lion-blue);
  --bs-btn-hover-bg: var(--lion-blue);
  --bs-btn-hover-border-color: var(--lion-blue);
}

/* ---------- Navbar ---------- */
.navbar-lions {
  background: var(--lion-blue);
  box-shadow: var(--lion-shadow);
}
.navbar-lions .navbar-brand { color: var(--lion-white); font-family: var(--lion-font-heading); font-weight: 800; }
.navbar-lions .nav-link { color: rgba(255,255,255,.9); font-weight: 600; }
.navbar-lions .nav-link:hover,
.navbar-lions .nav-link.active { color: var(--lion-gold); }
.navbar-lions .nav-link.active { border-bottom: 3px solid var(--lion-gold); }

/* ---------- Hero / banner ---------- */
.lion-hero {
  background: linear-gradient(135deg, var(--lion-blue) 0%, var(--lion-navy) 100%);
  color: var(--lion-white);
  padding: 5rem 0;
}
.lion-hero h1 { color: var(--lion-white); }
.lion-hero .lead { color: rgba(255,255,255,.9); }
.lion-hero .accent { color: var(--lion-gold); }

/* ---------- Section helpers ---------- */
.section-muted { background: var(--lion-gray-100); }
.section-title {
  position: relative;
  margin-bottom: 2.5rem;
  text-align: center;
}
.section-title::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin: .75rem auto 0;
  background: var(--lion-gold);
  border-radius: 2px;
}

/* ---------- Cards (services / projects) ---------- */
.lion-card {
  position: relative; /* contains .stretched-link to this card */
  border: none;
  border-radius: var(--lion-radius);
  box-shadow: var(--lion-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.lion-card:hover { transform: translateY(-4px); box-shadow: var(--lion-shadow-lg); }
.lion-card .icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,91,170,.1);
  color: var(--lion-blue);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* ---------- Stat counters ---------- */
.lion-stat .num { font-family: var(--lion-font-heading); font-size: 2.5rem; font-weight: 800; color: var(--lion-blue); }
.lion-stat .label { color: var(--lion-gray-700); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }

/* ---------- Project status badges ---------- */
.badge-status { font-weight: 600; padding: .4em .8em; border-radius: 999px; }
.badge-upcoming  { background: var(--lion-status-upcoming);  color: #fff; }
.badge-ongoing   { background: var(--lion-status-ongoing);   color: var(--lion-navy); }
.badge-completed { background: var(--lion-status-completed); color: #fff; }

/* ---------- Footer ---------- */
.lion-footer {
  background: var(--lion-navy);
  color: rgba(255,255,255,.75);
  padding: 3rem 0 1.5rem;
}
.lion-footer h5 { color: var(--lion-white); }
.lion-footer a { color: rgba(255,255,255,.75); }
.lion-footer a:hover { color: var(--lion-gold); }
.lion-footer .copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.5rem; font-size: .875rem; }

/* ---------- Admin panel accents ---------- */
.admin-sidebar { background: var(--lion-navy); min-height: 100vh; }
.admin-sidebar .nav-link { color: rgba(255,255,255,.8); border-radius: var(--lion-radius); margin: .15rem .5rem; }
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active { background: var(--lion-blue); color: #fff; }
.admin-topbar { background: #fff; box-shadow: var(--lion-shadow); }
.admin-stat-card { border-left: 4px solid var(--lion-blue); }
.admin-stat-card.gold { border-left-color: var(--lion-gold); }
.admin-stat-card.green { border-left-color: var(--lion-status-completed); }