/* ============================================================
   NAVY THEME – FINAL, CLEAN & PRODUCTION READY
============================================================ */

/* ------------------------------------------------------------
   1️⃣ Brand Tokens
------------------------------------------------------------ */
:root {
  --navy: #0b1c2d;
  --navy-hover: #132f4c;
}

/* ------------------------------------------------------------
   2️⃣ GLOBAL TEXT (Index + Public Pages)
------------------------------------------------------------ */
body {
  color: var(--navy);
}

/* Headings everywhere */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
}

/* ------------------------------------------------------------
   3️⃣ LINKS (Text only – no button look)
------------------------------------------------------------ */
a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  color: var(--navy-hover);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   4️⃣ NAVY BUTTONS (DEFAULT = NAVY)
------------------------------------------------------------ */
.btn-navy {
  background-color: var(--navy);
  color: #ffffff;
  border: none;
}

.btn-navy:hover,
.btn-navy:focus {
  background-color: var(--navy-hover);
  color: #ffffff;
}

.btn-navy:active,
.btn-navy:focus {
  box-shadow: none;
}

/* Outline version */
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}

.btn-outline-navy:hover {
  background-color: var(--navy);
  color: #ffffff;
}

/* ------------------------------------------------------------
   5️⃣ NAVBAR
------------------------------------------------------------ */
.navbar-clean {
  background-color: #ffffff;
}

.navbar-clean .navbar-brand,
.nav-link-navy {
  color: var(--navy);
  font-weight: 600;
}

.navbar-clean .navbar-brand:hover,
.nav-link-navy:hover {
  color: var(--navy-hover);
}

/* ------------------------------------------------------------
   6️⃣ BADGES
------------------------------------------------------------ */
.badge-navy {
  background-color: rgba(11, 28, 45, 0.08);
  color: var(--navy);
  border: 1px solid var(--navy);
}

/* ------------------------------------------------------------
   7️⃣ MUTED TEXT (Readable, not navy)
------------------------------------------------------------ */
.text-muted {
  color: #6b7280 !important;
}

/* ------------------------------------------------------------
   8️⃣ BLOG CONTENT (OVERRIDE OLD BLACK)
------------------------------------------------------------ */
.blog-content h1,
.blog-content h2,
.blog-content h3 {
  color: var(--navy);
}

.text-navy {
  color: #0b1c2d !important; /* Navy */
}


/* ============================================================
   FORCE NAVY (OVERRIDE BOOTSTRAP DARK)
============================================================ */

/* Replace any dark background */
.bg-navy {
  background-color: #0b1c2d !important;
  color: #ffffff !important;
}

/* Kill Bootstrap dark if accidentally used */
.bg-dark {
  background-color: #0b1c2d !important;
  color: #ffffff !important;
}

/* Admin login header text */
.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy p {
  color: #ffffff !important;
}


/* ============================================================
   HERO BANNER – SLIM & IMAGE SAFE (FINAL)
============================================================ */

.hero-banner {
  position: relative;
  width: 100%;
  height: 140px;                

  background-image: url("/images/blog/banner/blog-banner.png");
  background-size: cover;        
  background-position: center;   
  background-repeat: no-repeat;

  border-radius: 16px;
  overflow: hidden;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 45, 0.55); /* navy overlay */
  display: flex;
  align-items: center;
}

/* Content */
.hero-content {
  padding: 0 2rem;
}

/* Text */
.hero-content h1 {
  color: #ffffff;
  font-weight: 800;
}

.hero-content p {
  color: rgba(255, 255, 255, 0.8);
}