@import url("./variables.css");

html { scroll-behavior: smooth; }
body {
  color: var(--njm-ink);
  background: linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { text-decoration: none; }
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:9999; background:#fff; color:#000; padding:.75rem 1rem; border-radius:.5rem; }
.site-header {
  min-height: var(--header-height);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11,46,89,.10);
}
.brand-logo { width: 58px; height: 58px; object-fit: contain; }
.brand-title { color: var(--njm-navy); font-weight: 800; letter-spacing: -.02em; }
.brand-subtitle { color: var(--njm-muted); font-size: .82rem; }
.sidebar {
  position: fixed; top: var(--header-height); left: 0; bottom: 0;
  width: var(--sidebar-width); overflow-y: auto; padding: 1.25rem;
  background: linear-gradient(180deg, var(--njm-navy), #071d38);
  z-index: 1020;
}
.sidebar .nav-link {
  color: rgba(255,255,255,.82); border-radius: .85rem; padding: .82rem 1rem;
  margin-bottom: .45rem; font-weight: 600;
}
.sidebar .nav-link:hover,.sidebar .nav-link.active {
  color:#fff; background: rgba(255,255,255,.14); transform: translateX(3px);
}
.site-main { margin-left: var(--sidebar-width); padding-top: calc(var(--header-height) + 2rem); min-height: calc(100vh - 110px); }
.site-footer { margin-left: var(--sidebar-width); background:#071d38; color:rgba(255,255,255,.82); }
.hero-panel {
  background: linear-gradient(135deg, var(--njm-navy), var(--njm-navy-2) 55%, var(--njm-red));
  color:#fff; border-radius: 1.6rem; box-shadow: var(--njm-shadow); overflow:hidden;
}
.hero-kicker { color: #ffe49a; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }
.content-card { background:#fff; border:1px solid rgba(11,46,89,.1); border-radius:var(--njm-radius); box-shadow:var(--njm-shadow); }
.project-card { border-top:5px solid var(--njm-gold); }
.carousel-shell { border-radius:1.4rem; overflow:hidden; box-shadow:var(--njm-shadow); background:#0b2e59; }
.carousel-shell img { width:100%; height:460px; object-fit:cover; opacity:.72; }
.carousel-caption { background:rgba(7,29,56,.78); border-radius:1rem; padding:1.2rem; }
.section-image { width:100%; min-height:250px; object-fit:cover; border-radius:1.25rem; box-shadow:var(--njm-shadow); }
.learning-row { background:#fff; border:1px solid rgba(11,46,89,.1); border-radius:1.5rem; padding:1rem; box-shadow:var(--njm-shadow); }
.learning-carousel { border-radius:1.25rem; overflow:hidden; min-height:290px; background:linear-gradient(135deg,#f6f9fd,#eaf4ff); }
.learning-slide { min-height:290px; padding:2.4rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.level-badge { background:var(--njm-red); color:#fff; }
.btn-njm { background:var(--njm-red); color:#fff; border:none; }
.btn-njm:hover { background:#921925; color:#fff; }
.btn-outline-njm { border-color:var(--njm-navy); color:var(--njm-navy); }
.btn-outline-njm:hover { background:var(--njm-navy); color:#fff; }
.mobile-nav-button { display:none; }
.visitor-counter { display:none !important; }
@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; width:min(86vw,320px); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  .site-main,.site-footer { margin-left:0; }
  .mobile-nav-button { display:inline-flex; }
  .carousel-shell img { height:390px; }
}
@media (max-width: 575.98px) {
  .brand-subtitle { display:none; }
  .brand-logo { width:46px; height:46px; }
  .site-main { padding-top:calc(var(--header-height) + 1rem); }
  .carousel-shell img { height:350px; }
  .learning-slide { padding:2rem 2.8rem; }
}