@charset "UTF-8";
/* ==========================================================================
   Hazmat Student - portal theme (layout B / Bootstrap 5)
   Modeled on hazmatstudent.com (2026 redesign)
   Upload: /css_themes/CSS_hazmatstudent.css
   Images: /css_themes/hazmatstudent/
   Overrides tokens + a few selectors from /assets/css/portal_theme_b.css
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');

/* Brand palette (from hazmatstudent.com)
   red      #ca1921 -> #a51219   top bar, Enroll / Browse buttons, footer headings
   navy     #0e2344 / #0a1f3c    nav bar, headings, footer bar
   hero     #020810 -> #1e4d96   dark-to-blue gradient, red rule underneath */

:root {
  --portal-primary: #0e2344;          /* links, active states */
  --portal-primary-hover: #1e4d96;
  --portal-primary-soft: #eaf0f8;
  --portal-cta: #ca1921;              /* red buttons */
  --portal-text: #222;
  --portal-text-2: #3b4352;
  --portal-soft-bg: #f3f6fb;
  --portal-font: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --portal-heading-font: var(--portal-font);
  --portal-radius: 12px;
  --portal-radius-sm: 8px;
  --portal-logo-max-height: 52px;
}

h1, h2, h3, h4, h5, h6 { color: #0a1f3c; font-weight: 800; letter-spacing: -.01em; }
a { color: #1e4d96; }
a:hover { color: #ca1921; }

/* ---------- Buttons: red gradient pills, outline pills for secondary ---------- */
.btn { font-weight: 700; border-radius: 50px; }
.btn-primary {
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
  background-image: linear-gradient(135deg, #ca1921 0%, #a51219 100%);
}
.btn-primary:hover,
.btn-primary:active { background-image: linear-gradient(135deg, #b3161d 0%, #8f1016 100%); }
.btn-info,
.btn-ghost {
  --bs-btn-bg: #fff; --bs-btn-color: #0e2344; --bs-btn-border-color: #c9d3e1;
  --bs-btn-hover-bg: #0e2344; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #0e2344;
  --bs-btn-active-bg: #0e2344; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #0e2344;
}

/* ---------- Logo (replaces the portal-name text; link keeps its aria-label) ---------- */
.site-brand {
  width: 231px;
  height: 52px;
  background: url(/css_themes/hazmatstudent/HAZMAT-STUDENT-Logo.png) left center / contain no-repeat;
}
.site-brand img { display: none; }
.site-brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 575.98px) {
  .site-brand { width: 178px; height: 40px; }
}

/* ---------- Header: white bar under the red top line, navy menu ---------- */
.site-header { border-top: 4px solid #ca1921; border-bottom: 1px solid #e3e8f0; }
.site-nav .nav-link { color: #0e2344; font-weight: 700; }
.site-nav .nav-link:hover { color: #0e2344; background: var(--portal-soft-bg); }
.site-nav .nav-link.active,
.site-nav .nav-item.active > .nav-link { color: #fff; background: #0e2344; border-radius: 50px; }
.login-panel { border-top: 4px solid #ca1921; }

/* ---------- Hero bands: night-sky gradient with the red rule ---------- */
.hero-b,
.page-hero {
  background: linear-gradient(180deg, #020810 0%, #081a33 30%, #0e2850 62%, #1e4d96 100%);
  border-bottom: 4px solid #ca1921;
}
.hero-title,
.page-hero h1 { color: #fff; font-weight: 800; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: .14em; color: #fff;
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25);
}
.hero-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #ca1921; flex: 0 0 auto; }

/* ---------- Catalog accents ---------- */
.cat-header h2 { color: #0a1f3c; }
.course-name a:hover { color: #ca1921; }

/* ---------- Footer: light panel, red section headings, navy bottom bar ---------- */
.site-footer { background: var(--portal-soft-bg); border-top: 1px solid #e3e8f0; color: var(--portal-text-2); padding-bottom: 0; }
.site-footer a { color: #0e2344; }
.site-footer a:hover { color: #ca1921; }
.site-footer-heading { color: #ca1921; letter-spacing: .14em; }
.site-footer-name { color: #0a1f3c; }
.site-footer-copy {
  margin-top: 2rem; padding: 1rem 0; border-top: 0; color: rgba(255, 255, 255, .7);
  background: #0e2344; box-shadow: 0 0 0 100vmax #0e2344; clip-path: inset(0 -100vmax);   /* full-width navy bar */
}

/* Chat badge on the left so it doesn't cover the sign-up buttons */
iframe#launcher,
iframe#webWidget { left: 0 !important; right: auto !important; }