html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
  height: 100%;
}

body {
  padding-top: 64px; /* keep for fixed-top navbar */
  margin: 0;         /* remove template margin-bottom trick */
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* =========================================================
   Custom Theme Additions
   ========================================================= */

:root{
  --brand: #0d6efd;       /* Bootstrap primary default */
  --brand-2: #0b5ed7;     /* slightly darker */
}

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

/* Hero */
.hero {
  background: radial-gradient(1200px circle at 10% 10%, rgba(13,110,253,.15), transparent 40%),
              radial-gradient(900px circle at 90% 20%, rgba(25,135,84,.12), transparent 40%),
              linear-gradient(180deg, #0b1220 0%, #0b1220 65%, #0f172a 100%);
  color: #fff;
}
.hero .lead { color: rgba(255,255,255,.8); }


/* Simple “glass” cards for dark hero section */
.hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* Section headings */
.section-title {
  letter-spacing: -.02em;
}

/* Service icon badge */
.icon-badge {
  width: 44px;
  height: 44px;
  min-width: 44px;     /* prevents width shrink in flex rows */
  display: flex;       /* fine here (works the same visually) */
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(13,110,253,.1);
  flex-shrink: 0;      /* prevents squishing */
}

/* keep icon sizing consistent */
.icon-badge i {
  line-height: 1;      /* avoids vertical weirdness on some icons */
}

/* Subtle hover lift */
.hover-lift {
  transition: transform .15s ease, box-shadow .15s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2, 8, 23, .10);
}

/* Footer */
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }


/* --- Navbar brand sizing (Kairos) --- */
.site-navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 64px;
  z-index: 1030; /* stays above content */
}

.site-navbar .container {
  height: 64px;
  display: flex;
  align-items: center;
}
.site-navbar.nav-scrolled .container {
  height: 58px;
}

.site-navbar .navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  height: 64px;                  /* aligns brand content nicely */
}

.site-navbar .navbar-brand img {
  height: 60px;                  /* try 64px if you want max */
  width: auto;
  display: block;                /* removes inline image baseline gap */
}




/* Navbar transition */
/* Smooth transition */
.site-navbar {
  transition: all 0.25s ease;
}

/* Default (top of page) */
.site-navbar {
  min-height: 64px;
}

.site-navbar .navbar-brand {
  height: 64px;
  transition: all 0.25s ease;
}

.site-navbar .navbar-brand img {
  height: 60px;
  transition: all 0.25s ease;
}

/* When scrolled */
.site-navbar.nav-scrolled {
  min-height: 58px; /* 6px thinner */
  box-shadow: 0 4px 20px rgba(0,0,0,.25); /* subtle premium depth */
  backdrop-filter: blur(6px);
  background-color: rgba(33, 37, 41, 0.95) !important;
}

.site-navbar.nav-scrolled .navbar-brand {
  height: 58px;
}

.site-navbar.nav-scrolled .navbar-brand img {
  height: 54px;
}


.required::after {
  content: " *";
  color: red; /* Optional: style the asterisk color */
}



/* Mobile navbar: allow collapse panel to expand normally */
@media (max-width: 991.98px) {
  .site-navbar .container {
    height: auto;              /* IMPORTANT: remove the fixed 64px height */
    align-items: stretch;      /* lets the collapse take full width */
    flex-wrap: wrap;           /* ensures toggler + collapse stack properly */
  }

  .site-navbar .navbar-brand {
    height: 64px;              /* keep brand area consistent */
  }
}



/* Mobile dropdown panel styling */
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    background: rgba(33, 37, 41, 0.98); /* dark bg like your navbar */
    margin-top: 0.5rem;
    padding: 0.75rem;
    /* border-radius: 0.75rem; */
    /* border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35); */
  }

  .site-navbar .navbar-nav {
    align-items: stretch !important;
    gap: 0.25rem;
  }

  /* Make your "Request help" button look good in the stack */
  .site-navbar .navbar-nav .btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse {
    backdrop-filter: blur(8px);
  }
}

/* On mobile/tablet, don't use fixed-top behavior so the menu can push content down */
@media (max-width: 991.98px) {
  .site-navbar.fixed-top {
    position: sticky;   /* participates in layout; expands push content */
    top: 0;
  }

  body {
    padding-top: 0;     /* fixed-top needed this; sticky does not */
  }
}


@media (max-width: 991.98px) {

  /* Center everything */
  .site-navbar .navbar-nav {
    text-align: center;
  }

  /* Bigger nav links */
  .site-navbar .nav-link {
    font-size: 1.4rem;
    padding: 0.9rem 0;
  }

  /* Divider lines between items */
  .site-navbar .nav-item {
    /* border-bottom: 1px solid rgba(255,255,255,0.08); */
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Remove divider on last item (before button) */
  .site-navbar .nav-item:last-child {
    border-bottom: none;
  }

  /* Space above button */
  .site-navbar .navbar-nav .btn {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
}