/* Light theme tokens */
:root,
[data-bs-theme="light"] {
  /* Your primary */
  --bs-primary: #c20000;
  --bs-primary-rgb: 200, 16, 46;
  /* keep in sync with --bs-primary */

  /* Make contextual components (alerts, badges, etc.) match */
  --bs-primary-text-emphasis: #6a0a17;
  /* darker text for contrast */
  --bs-primary-bg-subtle: #f7d6db;
  /* light tinted background */
  --bs-primary-border-subtle: #f1aeb5;
  /* mid border */

  /* (Optional) base body colors if desired */
  --bs-body-bg: #f6f6f6;
  --bs-body-color: #212529;

  /* Fonts */
  --bs-body-font-family:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* Dark theme tokens */
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1114;
  --bs-body-color: #e6e6e6;
  --bs-primary: #c20000;
  /* brighter primary for contrast */
  --bs-secondary: #9aa1a8;
}

html,
body {
  scroll-padding-top: 5.5rem;
  scroll-behavior: smooth;
}

/* Hero sizing and background image */
.hero {
  min-height: 50vh; /* Adjust height: try 70vh or 100vh if you want full screen */
  background-image: url("img/emb2-orange.png");
  background-size: cover; /* Fill area while preserving aspect ratio */
  background-position: center; /* Keep subject centered */
  background-repeat: no-repeat;
}

/* Dark gradient overlay for consistent readability */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.35));
}

/* Optional: slight blur for the text container (supported in modern browsers) */
.backdrop-blur {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

p.lead {
  text-align: justify;
}

.badge {
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

.badge.text-bg-secondary:hover {
  --bs-secondary-rgb: var(--bs-primary-rgb);
  transform: scale(1.05) translateY(-5px);
}

.badge:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
  color: #fff;
}

#team .card {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease;
}

#team .card:hover {
  transform: scale(1.05);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

/* Responsive tweaks for very small screens */
@media (max-width: 575px) {
  .hero {
    min-height: 50vh;
  }
  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 3rem);
  } /* scales ITEC */
}