/* ==================================================
   MonkeZen Brand Theme (Bootstrap 5.3+ overrides)
   --------------------------------------------------
   Primary (accent): #38bdf8 — links, buttons, nav links
   Backgrounds:
     - Base (page): #0b1220
     - Accent blocks: #0f172a
   Text:
     - All text: #ffffff
     - Hover: #0d6efd
    Dividers, borders:
    - #1e293b
   Notes:
     - Never edit bootstrap.min.css. Load this file AFTER Bootstrap on every page.
   ================================================== */

:root {
  /* Core palette */
  --bs-primary: #38bdf8;
  --bs-link-color: #38bdf8;
  --bs-link-hover-color: #0d6efd;

  /* Body + headings */
  --bs-body-bg: #0b1220;
  --bs-body-color: #ffffff;
  --bs-heading-color: #ffffff;

  /* Borders / dividers */
  --bs-border-color: #1e293b;
}

/* Typography baseline */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
}
a {
  color:#38bdf8;
}
a:hover {
  color:#0d6efd;
}

.font-size-xsm: {
  font-size: 0.333em;
}
/* Buttons (token-based) */

.btn-primary {
  --bs-btn-color: #0b1220;
  --bs-btn-bg: #38bdf8;
  --bs-btn-border-color: #38bdf8;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
}
.btn-outline-primary {
  --bs-btn-color: #38bdf8;
  --bs-btn-border-color: #38bdf8;
  --bs-btn-hover-color: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-hover-bg: transparent;
}

/* Sticky header background + blur */
.site-header {
  background: rgba(11, 18, 32, 0.66);         /* #0b1220 @ 85% */
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px); /* Safari */
  border-bottom: solid 1px var(--bs-border-color);
      
}

/* Nav links (works for .nav-link and plain <nav> anchors) */
.nav-link,
header nav a {
  color: var(--bs-body-color);
}
.nav-link:hover,
header nav a:hover,
.nav-link:focus,
header nav a:focus {
  color: var(--bs-link-color);
}

/* Accent background utility */
.bg-accent {
  background: #0f172a !important;
  color: #ffffff;
}

/* Dividers */
hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}

/* Hero overlay utility (uses base bg with transparency) */
.hero-overlay {
  background: rgba(11, 18, 32, 0.66);
}

/* Make hamburger icon visible on dark headers */
.navbar-toggler { border-color: rgba(255,255,255,.25); }
.navbar-toggler-icon { filter: invert(1) grayscale(100%); }

/* Optional: let the header provide the blurred background */
.site-header .navbar { background: transparent; }


/* Keep the logo text legible and centered inside its 40x40 box */
.brand-mark {
  height: 40px;
  width: 40px;
  background: #38bdf8;
  color: #0b1220;
  font-size: 0.95rem;   /* tweak if you want it bigger/smaller */
  line-height: 1;       /* prevents vertical wobble */
}

/* Tighter vertical rhythm for the two-line brand text */
.brand-stack { line-height: 1.1; }

/* Ensure headings/brand text don’t inherit odd sizes from navbar */
.navbar .fs-5 { font-size: 1.25rem !important; } /* Bootstrap’s fs-5 default; adjust if desired */

/* Extra breathing room when collapsed (mobile only) */
@media (max-width: 767.98px) {
  .navbar {
    --bs-nav-link-padding-y: .75rem;
    --bs-nav-link-padding-x: .75rem;
    margin-top: .25rem;
  }

}



/* ----- Anchor jumps never sit under the sticky header ----- */
:root { --header-h: 70px; }                 /* tweak if your header is taller */
@media (min-width: 768px){ :root { --header-h: 90px; } }

html {
  scroll-behavior: smooth;                   /* optional: nice scrolling */
  scroll-padding-top: var(--header-h);       /* native offset for anchor jumps */
}
/* Fallback for browsers that ignore scroll-padding on some anchors */
[id] { scroll-margin-top: var(--header-h); }

/* Prevent scroll-anchoring from interfering with the collapse */
.navbar-collapse { overflow-anchor: none; }

/* ----- Make the collapse animation a bit longer (≈1s fade) ----- */
.navbar-collapse.collapsing {
  transition-duration: .35s;                   /* Bootstrap default is .35s */
}

.navbar-collapse.collapsing .nav-link {
  pointer-events: none;  /* Disable clicks during animation */
  opacity: 0.5;          /* Visual feedback */
}

/* Approx header height — tune if needed */
:root {
  --header-h: 90px; /* try 72–80px depending on your navbar thickness */
}