:root {
  --purple-primary: #6B2D8B;
  --purple-hover: #542270;
  --red-crimson: #C41230;
  --red-hover: #9E0E26;
  --white: #FFFFFF;
  --dark-charcoal: #1A1A2E;
  --light-purple: #F5EDFA;
  --gray-light: #F8F9FA;
  --gray-border: #E0E0E0;
}

/* ── Global Reset: Kill all horizontal overflow ────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: 'Inter', sans-serif;
  color: var(--dark-charcoal);
  background-color: #fdfbfd; /* Subtle warm/purple tinted white for premium feel */
  background-image: radial-gradient(circle at top right, rgba(107, 45, 139, 0.03) 0%, transparent 40%);
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* Every row and container must never escape viewport */
.container, .container-fluid, .row, section, main, footer, nav, header {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, embed, object, canvas, svg {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-purple { color: var(--purple-primary) !important; }
.text-red { color: var(--red-crimson) !important; }

.bg-purple { background-color: var(--purple-primary) !important; color: white; }
.bg-red { background-color: var(--red-crimson) !important; color: white; }
.bg-light-purple { background-color: var(--light-purple) !important; }

.btn-purple {
  background-color: var(--purple-primary);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-purple:hover {
  background-color: var(--purple-hover);
  color: var(--white);
}

.btn-red {
  background-color: var(--red-crimson);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-red:hover {
  background-color: var(--red-hover);
  color: var(--white);
}

.navbar-hrc {
  background-color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Ensure dropdowns always appear on top, never clipped */
.navbar .dropdown-menu {
  z-index: 9999 !important;
}

/* On mobile: make dropdowns render inline instead of floating (prevents clipping) */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--light-purple) !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    padding: 8px 0 !important;
  }
  .navbar .dropdown-menu .dropdown-item {
    padding: 10px 16px !important;
    font-size: 0.95rem;
  }
}

.navbar-logo {
  height: 48px;
  width: auto;
  transition: all 0.3s ease;
}

/* ── Mobile Navbar ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-logo {
    height: 40px; /* Slightly smaller on tablets */
  }
  .navbar-brand span.fs-5 {
    font-size: 1rem !important;
  }

  /* Extra small phones (e.g. iPhone SE, old Androids) */
  @media (max-width: 400px) {
    .navbar-brand {
      max-width: 75vw; /* Ensure it leaves room for toggler */
    }
    .navbar-logo {
      height: 32px; /* Much smaller on tiny screens */
    }
    .navbar-brand span.fs-5 {
      font-size: 0.85rem !important;
      white-space: normal;
      line-height: 1.1 !important;
    }
    .navbar-brand small.fs-7 {
      font-size: 0.65rem !important;
      display: block;
      margin-top: 2px;
    }
  }

  /* Style the open collapse panel — do NOT override display or visibility */
  .navbar-collapse.show {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--gray-border);
    border-top: none;
    /* Removed overflow-y: auto to allow dropdowns (logout) to overflow safely */
  }
  .navbar-nav {
    align-items: flex-start !important;
  }
  .navbar-nav .nav-link {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    display: block;
  }
  .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  .navbar-nav .btn {
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }
}

/* ── Hero Banner ───────────────────────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(rgba(107, 45, 139, 0.85), rgba(196, 18, 48, 0.85)), url('/static/images/logo.png') center/cover no-repeat;
  color: white;
  padding: 80px 16px;
  text-align: center;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-banner {
    padding: 120px 0;
  }
}

/* Hero heading must scale down on small phones */
@media (max-width: 575.98px) {
  .display-3 {
    font-size: 1.75rem !important;
  }
  .display-4 {
    font-size: 1.5rem !important;
  }
  .display-5 {
    font-size: 1.35rem !important;
  }
  .display-6 {
    font-size: 1.2rem !important;
  }
  .lead {
    font-size: 0.95rem !important;
  }
  .fs-4 {
    font-size: 1rem !important;
  }
  /* Hero buttons stack vertically on phones */
  .hero-banner .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center;
  }
  .hero-banner .btn-lg {
    width: 100%;
    max-width: 280px;
    font-size: 0.95rem;
    padding: 10px 20px;
  }
  /* Container padding on phones */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Stats counter grid: 2 columns on phone */
  .bg-light-purple .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Medium tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  .display-3 {
    font-size: 2.2rem !important;
  }
  .hero-banner {
    padding: 80px 24px;
  }
}

.card-custom {
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(107, 45, 139, 0.1);
}

.badge-live {
  background-color: var(--red-crimson);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

footer {
  background-color: var(--dark-charcoal);
  color: white;
  padding: 50px 0 20px;
}

/* ── Alert messages must not overflow ──────────────────────────────────── */
.alert {
  word-wrap: break-word;
  overflow-wrap: break-word;
}