/* =====================================================
   HCML – Custom Styles
   Course: Human-Centered Machine Learning
   ===================================================== */

/* Theme Variables */

:root {
  --hcml-primary: #3283FF;
  --hcml-light-text: #ffffff;
  --hcml-muted-text: #cccccc;
}

/* -----------------------------------------------------
   Base Typography
----------------------------------------------------- */

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, serif;
}

/* -----------------------------------------------------
   Navbar
----------------------------------------------------- */

.navbar.bg-light {
  background-color: var(--hcml-primary) !important;
}

.navbar.bg-light .navbar-brand,
.navbar.bg-light .nav-link {
  color: var(--hcml-light-text) !important;
}

.navbar.bg-light .nav-link:hover,
.navbar.bg-light .nav-link:focus {
  color: var(--hcml-muted-text) !important;
}

/* -----------------------------------------------------
   Links
----------------------------------------------------- */

a {
  color: #444;
  text-decoration: none;
}

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

/* -----------------------------------------------------
   Layout
----------------------------------------------------- */

main {
  padding-top: 6rem;
}

.row-special {
  --bs-gutter-x: 0;
}

/* -----------------------------------------------------
   Footer
----------------------------------------------------- */

.lecture-footer {
  padding: 2.5rem 1rem;
  color: #6c757d;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}

.lecture-footer a {
  color: inherit;
}

.lecture-footer a:hover {
  color: var(--hcml-primary);
}

/* -----------------------------------------------------
   Media / Images
----------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
}

.preview {
  width: 300px;
  max-width: 100%;
}

.team {
  max-width: 250px;
  max-height: 250px;
  padding-right: 1.5rem !important;
}

/* -----------------------------------------------------
   Utilities
----------------------------------------------------- */

.text-hcml {
  color: var(--hcml-primary) !important;
}


/* -----------------------------------------------------
   Course Banner
----------------------------------------------------- */

.banner {
  background: linear-gradient(
    135deg,
    var(--hcml-primary),
    #4f93ff
  );
  color: var(--hcml-light-text);
  border-radius: 0.75rem;
}

.banner h1 {
  color: var(--hcml-light-text);
}

.banner p {
  color: #f0f4ff;
}

.banner a {
  color: #e8f0ff;
  font-weight: 500;
  text-decoration: underline;
}

.banner a:hover {
  color: #ffffff;
}

/* -----------------------------------------------------
   Text Utilities
----------------------------------------------------- */

.text-highlight {
  color: var(--hcml-primary) !important;
  font-weight: 500;
}