/* Healthy Living Track — shared brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --hlt-primary: #0f9d6e;
  --hlt-primary-dark: #0b7a56;
  --hlt-primary-deep: #0a3d2c;
  --hlt-accent: #ff7a45;
  --hlt-ink: #16241f;
  --hlt-bg-light: #f4faf7;
  --hlt-paper: #fdfbf6;
  --hlt-line: #d9e6de;
  --hlt-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --hlt-font-body: 'Inter', 'Segoe UI', sans-serif;
}

body {
  font-family: var(--hlt-font-body);
  color: var(--hlt-ink);
}

h1, h2, h3, h4, h5, h6,
.hlt-display {
  font-family: var(--hlt-font-display);
  letter-spacing: -0.01em;
}

.hlt-btn-primary {
  background-color: var(--hlt-primary);
  border-color: var(--hlt-primary);
  color: #fff;
}
.hlt-btn-primary:hover,
.hlt-btn-primary:focus {
  background-color: var(--hlt-primary-dark);
  border-color: var(--hlt-primary-dark);
  color: #fff;
}

.hlt-btn-accent {
  background-color: var(--hlt-accent);
  border-color: var(--hlt-accent);
  color: #fff;
}
.hlt-btn-accent:hover,
.hlt-btn-accent:focus {
  background-color: #e8622e;
  border-color: #e8622e;
  color: #fff;
}

.hlt-badge {
  display: inline-block;
  background-color: var(--hlt-bg-light);
  color: var(--hlt-primary-dark);
  border: 1px solid var(--hlt-primary);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.hlt-section-light {
  background-color: var(--hlt-bg-light);
}

.hlt-text-ink {
  color: var(--hlt-ink);
}

/* Nav logo: bigger on mobile where the nav has more vertical room and the
   mark needs to carry more weight on a small screen; settles down at the
   lg breakpoint (matches navbar-expand-lg) once desktop nav links appear
   alongside it. Overrides the img height="" attribute, which the HTML
   keeps only as a no-CSS fallback.

   At 66px tall the logo's wordmark is wide enough to force Bootstrap's
   navbar-toggler onto its own row below it (the flex row runs out of
   width). Below lg, pin the toggler to the top-right corner instead so
   it stays in line with the logo regardless of how wide the logo gets. */
.navbar-brand img {
  height: 66px;
}
@media (max-width: 991.98px) {
  .navbar .container {
    position: relative;
  }
  .navbar-toggler {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
    height: 44px;
  }
}