/* Brand theme overrides
   Adjust the CSS variables below to match your brand colors.
   Example: set --brand-primary to your main brand color.
*/
:root {
  /* Brand palette (desktop defaults) */
  --brand-primary: #17B9FF;   /* Main Brand Color */
  --brand-accent:  #52489C;   /* Accent */
  --brand-red:     #DB5461;   /* Danger */
  --brand-yellow:  #FFD166;   /* Warning */
  --brand-green:   #06D6A0;   /* Success */

  /* Neutrals */
  --brand-bg: #ffffff;
  --brand-text: #212529;
  --brand-nav-bg: #f8f9fa;
  --brand-nav-text: #111111;
}

/* Navbar */
.navbar {
  background-color: var(--brand-nav-bg) !important;
  /* Increase overall navbar height via padding */
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--brand-nav-text) !important;
}
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: var(--brand-accent) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* Secondary as accent */
.btn-secondary {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  filter: brightness(0.9);
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-success {
  color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: #fff !important;
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}

.btn-outline-warning {
  color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: #111 !important;
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
}

.btn-outline-danger {
  color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: #fff !important;
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

/* Success / Warning / Danger mapped to brand colors */
.btn-success,
.badge.bg-success,
.bg-success {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
.text-success { color: var(--brand-green) !important; }
.border-success { border-color: var(--brand-green) !important; }

.btn-warning,
.badge.bg-warning,
.bg-warning {
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: #111 !important; /* ensure contrast on yellow */
}
.text-warning { color: var(--brand-yellow) !important; }
.border-warning { border-color: var(--brand-yellow) !important; }

.btn-danger,
.badge.bg-danger,
.bg-danger {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.text-danger { color: var(--brand-red) !important; }
.border-danger { border-color: var(--brand-red) !important; }

/* Links */
a {
  color: var(--brand-primary);
}
a:hover,
a:focus {
  color: var(--brand-accent);
}

/* Pills (Bootstrap nav-pills and rounded badges) */
.nav-pills .nav-link {
  color: var(--brand-primary) !important;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
}

/* Rounded pill badges default to brand */
.badge.rounded-pill,
.badge.bg-primary.rounded-pill,
.rounded-pill.bg-primary {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Badges and common accents */
.badge.bg-primary,
.bg-primary {
  background-color: var(--brand-primary) !important;
}
.text-primary {
  color: var(--brand-primary) !important;
}
.border-primary {
  border-color: var(--brand-primary) !important;
}

/* Alerts mapping to brand colors (desktop emphasis) */
.alert-primary {
  background-color: color-mix(in srgb, var(--brand-primary) 10%, #fff) !important;
  border-color: var(--brand-primary) !important;
  color: #0b2e42 !important;
}
.alert-success {
  background-color: color-mix(in srgb, var(--brand-green) 10%, #fff) !important;
  border-color: var(--brand-green) !important;
  color: #0f5132 !important;
}
.alert-warning {
  background-color: color-mix(in srgb, var(--brand-yellow) 20%, #fff) !important;
  border-color: var(--brand-yellow) !important;
  color: #664d03 !important;
}
.alert-danger {
  background-color: color-mix(in srgb, var(--brand-red) 10%, #fff) !important;
  border-color: var(--brand-red) !important;
  color: #58151c !important;
}

/* Optional: cards and body text */
body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

/* Logo sizing in navbar: taller and proportionate */
.navbar .navbar-brand img {
  height: 48px;       /* increase as desired (e.g., 44–56px) */
  width: auto;        /* keep aspect ratio */
  display: block;     /* remove inline baseline gap */
}

/* Ensure brand is vertically centered */
.navbar .navbar-brand {
  display: flex;
  align-items: center;
}

/* ==============================
   Closed Alpha Landing (Desktop)
   ============================== */

.alpha-hero {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 60%, #e6f8ff 100%);
  color: #fff;
  position: relative;
}

.alpha-hero .alpha-title {
  font-weight: 700;
  font-size: 2.5rem; /* ~40px */
  line-height: 1.2;
}

.alpha-hero .alpha-subtitle {
  font-size: 1.125rem;
  opacity: 0.95;
  max-width: 48ch;
}

.alpha-logo {
  height: 64px;
  width: auto;
}

.alpha-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
}

.alpha-hero-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-top: 4px solid var(--brand-primary);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.alpha-hero-bottom {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-green) 100%);
}

.alpha-section {
  background: var(--brand-bg);
}

.feature-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.alpha-list {
  list-style: none;
  padding-left: 0;
}
.alpha-list li {
  position: relative;
  padding-left: 28px;
  margin: 0.5rem 0;
}
.alpha-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-green);
  font-weight: 700;
}

.alpha-cta {
  background: #f6fbff; /* subtle light used for footer bar */
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Minimal landing hero (white background) */
.landing-hero {
  background: #fff;
}
.landing-hero .hero-logo {
  height: 96px;
  width: auto;
  display: block;
}
.landing-hero .alpha-note {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}