/* ============================================================
   HEALTH MOVEMENT — CENTRALIZED THEME
   Used by ALL pages. Never put page-specific styles here.
   ============================================================ */

/* ── Google Font (Poppins) ───────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── CSS Custom Properties ───────────────────────────────── */
:root {
  /* Brand colours */
  --hm-green:          #52D93C;   /* primary accent / CTA */
  --hm-green-dark:     #52D93C;   /* hover state */
  --hm-green-light:    #52D93C;   /* soft accent, badges */
  --hm-green-muted:    #EBF7E0;   /* very light green bg tint */

  /* Neutrals */
  --hm-black:          #000000;   /* dark section backgrounds */
  --hm-dark:           #1A1A1A;   /* footer, dark cards */
  --hm-dark-mid:       #2A2A2A;   /* dark card borders */
  --hm-grey-100:       #F8F8F8;   /* light section bg */
  --hm-grey-200:       #F0F0F0;   /* card bg */
  --hm-grey-400:       #AAAAAA;   /* muted text on dark */
  --hm-grey-600:       #666666;   /* body text secondary */
  --hm-white:          #FFFFFF;

  /* Text */
  --hm-text-dark:      #1A1A1A;
  --hm-text-body:      #444444;
  --hm-text-muted:     #777777;
  --hm-text-on-dark:   #CCCCCC;
  

  /* Typography */
  --hm-font:           'Poppins', sans-serif;

  --hm-fs-xs:          0.75rem;   /* 12px */
  --hm-fs-sm:          0.875rem;  /* 14px */
  --hm-fs-base:        1rem;      /* 16px */
  --hm-fs-md:          1.125rem;  /* 18px */
  --hm-fs-lg:          1.25rem;   /* 20px */
  --hm-fs-xl:          1.5rem;    /* 24px */
  --hm-fs-2xl:         2rem;      /* 32px */
  --hm-fs-3xl:         2.5rem;    /* 40px */
  --hm-fs-4xl:         3rem;      /* 48px */
  --hm-fs-5xl:         3.75rem;   /* 60px */

  --hm-fw-light:       300;
  --hm-fw-regular:     400;
  --hm-fw-medium:      500;
  --hm-fw-semibold:    600;
  --hm-fw-bold:        700;
  --hm-fw-extrabold:   800;
  --hm-fw-black:       900;

  /* Spacing scale (matches Bootstrap multiples) */
  --hm-section-py:     5rem;      /* vertical padding for sections */
  --hm-section-py-sm:  3rem;

  /* Borders & Radius */
  --hm-radius-sm:      8px;
  --hm-radius:         12px;
  --hm-radius-lg:      20px;
  --hm-radius-pill:    999px;

  /* Shadows */
  --hm-shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
  --hm-shadow:         0 6px 24px rgba(0,0,0,0.12);
  --hm-shadow-lg:      0 16px 48px rgba(0,0,0,0.18);
  --hm-shadow-green:   0 6px 24px rgba(82,217,60,0.30);

  /* Transitions */
  --hm-transition:     0.25s ease;
}

/* ── Base Reset & Globals ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--hm-font);
  font-size: var(--hm-fs-base);
  font-weight: var(--hm-fw-regular);
  color: var(--hm-text-body);
  background-color: var(--hm-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.hm-has-fixed-navbar {
  padding-top: var(--hm-navbar-offset, 82px);
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--hm-green);
  text-decoration: none;
  transition: color var(--hm-transition);
}
a:hover { color: var(--hm-green-dark); }

/* ── Typography helpers ──────────────────────────────────── */
.hm-display {
  font-size: var(--hm-fs-5xl);
  font-weight: var(--hm-fw-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hm-h1 {
  font-size: var(--hm-fs-4xl);
  font-weight: var(--hm-fw-extrabold);
  line-height: 1.15;
}
.hm-h2 {
  font-size: var(--hm-fs-3xl);
  font-weight: var(--hm-fw-bold);
  line-height: 1.2;
}
.hm-h3 {
  font-size: var(--hm-fs-2xl);
  font-weight: var(--hm-fw-semibold);
  line-height: 1.3;
}
.hm-h4 {
  font-size: var(--hm-fs-xl);
  font-weight: var(--hm-fw-semibold);
}
.hm-lead {
  font-size: var(--hm-fs-md);
  font-weight: var(--hm-fw-regular);
  line-height: 1.75;
}
.hm-small {
  font-size: var(--hm-fs-sm);
  color: var(--hm-text-muted);
}
.text-green  { color: var(--hm-green) !important; }
.text-dark-hm { color: var(--hm-text-dark) !important; }

/* ── Section Wrappers ────────────────────────────────────── */
.section-light {
  padding: var(--hm-section-py) 0;
  background-color: var(--hm-white);
}
.section-grey {
  padding: var(--hm-section-py) 0;
  background-color: var(--hm-grey-100);
}
.section-dark {
  padding: var(--hm-section-py) 0;
  background-color: var(--hm-black);
  color: var(--hm-white);
}
.section-dark .hm-lead,
.section-dark p { color: var(--hm-text); }

.section-label {
  display: inline-block;
  font-size: var(--hm-fs-sm);
  font-weight: var(--hm-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-green);
  margin-bottom: 0.75rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-hm-primary {
  display: inline-flex;
  align-items: center;
 
  padding: 0.05rem 2rem;
  background-color: var(--hm-green);
  color: var(--hm-black);
  font-family: var(--hm-font);
  font-size: var(--hm-fs-base);
  font-weight: var(--hm-fw-semibold);
  letter-spacing: 0.04em;
  border: 2px solid var(--hm-green);
  border-radius: var(--hm-radius-pill);
  cursor: pointer;
  transition: background-color var(--hm-transition),
              border-color var(--hm-transition),
              box-shadow var(--hm-transition),
              transform var(--hm-transition);
}

.btn-hm-light-font{
  font-weight: var(--hm-fw-light);
}
.btn-hm-primary:hover {
  background-color: var(--hm-green-dark);
  border-color: var(--hm-green-dark);
  color: var(--hm-black);
  box-shadow: var(--hm-shadow-green);
}
.btn-hm-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background-color: transparent;
  color: var(--hm-black);
  font-family: var(--hm-font);
  font-size: var(--hm-fs-base);
  font-weight: var(--hm-fw-light);
  letter-spacing: 0.04em;
  border: 2px solid #F2F2F4;
 
  cursor: pointer;
  transition: background-color var(--hm-transition),
              color var(--hm-transition),
              transform var(--hm-transition);
}
.btn-hm-outline:hover {

  color: var(--hm-black);
  box-shadow: var(--hm-shadow-green);
}
.btn-hm-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background-color: var(--hm-dark);
  color: var(--hm-white);
  font-family: var(--hm-font);
  font-size: var(--hm-fs-sm);
  font-weight: var(--hm-fw-semibold);
  letter-spacing: 0.04em;
  border: 2px solid var(--hm-dark);
  border-radius: var(--hm-radius-pill);
  cursor: pointer;
  transition: background-color var(--hm-transition), transform var(--hm-transition);
}
.btn-hm-dark:hover {
  background-color: var(--hm-black);
  color: var(--hm-white);
}
.btn-sm-hm { padding: 0.5rem 1.25rem; font-size: var(--hm-fs-base); }
.btn-lg-hm { padding: 1rem 2.5rem; font-size: var(--hm-fs-base); }
.btn-radius-sm { border-radius: var(--hm-radius-sm); }
.btn-radius-lg { border-radius: var(--hm-radius-lg); }

/* ── Remove focus outlines on dropdown toggles ───────────── */
.btn-hm-primary:focus,
.btn-hm-primary:focus-visible,
.btn-hm-primary:active,
.btn-hm-outline:focus,
.btn-hm-outline:focus-visible,
.btn-hm-outline:active,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Navbar Dropdowns ────────────────────────────────────── */
.hm-dropdown {
  border: none;
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow);
  padding: 0.5rem;
  min-width: 180px;
  margin-top: 0 !important;
  padding-top: calc(0.5rem + 0.4rem);
}
.hm-dropdown .dropdown-item {
  font-family: var(--hm-font);
  font-size: var(--hm-fs-sm);
  font-weight: var(--hm-fw-light);
  color: var(--hm-text-dark);
  border-radius: var(--hm-radius-sm);
  padding: 0.6rem 1rem;
  transition: background-color var(--hm-transition), color var(--hm-transition);
}
.hm-dropdown .dropdown-item:hover,
.hm-dropdown .dropdown-item:focus {
  background-color: var(--hm-green-muted);
  color: var(--hm-green);
}

/* Dropdown carets — no space when hidden, appear on hover/open */
.dropdown-toggle::after,
.nav-link.dropdown-toggle::after {
  width: 0;
  height: 0;
  margin-left: 0;
  overflow: hidden;
  border: none;
  transition: margin-left var(--hm-transition);
}
.dropdown:hover > .dropdown-toggle::after,
.dropdown-toggle:focus::after,
.dropdown-toggle[aria-expanded="true"]::after,
.nav-item.dropdown:hover > .nav-link.dropdown-toggle::after {
  width: auto;
  height: auto;
  margin-left: 0.4em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  border-bottom: 0;
  overflow: visible;
}

/* ── Cards ───────────────────────────────────────────────── */
.hm-card {
  background: var(--hm-white);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
  padding: 2rem;
  transition: box-shadow var(--hm-transition), transform var(--hm-transition);
}
.hm-card:hover {
  box-shadow: var(--hm-shadow);
  transform: translateY(-3px);
}
.hm-card-dark {
  background: var(--hm-dark);
  border: 1px solid var(--hm-dark-mid);
  border-radius: var(--hm-radius);
  padding: 2rem;
  color: var(--hm-white);
}
.hm-card-outline {
  background: transparent;
  border: 2px solid var(--hm-green);
  border-radius: var(--hm-radius);
  padding: 2rem;
}

/* ── Icon Badge ──────────────────────────────────────────── */
.hm-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: var(--hm-radius);
  background-color: var(--hm-green-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-green);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.hm-icon-badge-dark {
  background-color: rgba(120,200,64,0.15);
  color: var(--hm-green);
}

/* ── Navbar ──────────────────────────────────────────────── */
.hm-navbar {
  background-color: var(--hm-white);
  padding: 1rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  width: 100%;
}
.hm-navbar.scrolled {
  box-shadow: var(--hm-shadow-sm);
}
.hm-navbar .navbar-brand img { height: 30px; }
.hm-navbar-logo {
  height: 30px;
  max-width: 323px;
}
.hm-navbar .nav-link {
  font-size: var(--hm-fs-base);
  font-weight: var(--hm-fw-light);
  color: var(--hm-text-dark);
  padding: 0.5rem 1rem !important;
  transition: color var(--hm-transition);
}
.hm-navbar .nav-link:hover,
.hm-navbar .nav-link.active { color: var(--hm-green); }

@media (max-width: 767px) {
  .hm-navbar-logo {
    height: 24px;
    max-width: 260px;
  }
}

/* ── Hero ────────────────────────────────────────────────── */
.hm-hero {
  background-color: var(--hm-black);
  color: var(--hm-white);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(120,200,64,0.12), transparent);
  pointer-events: none;
}
.hm-hero .hm-display { color: var(--hm-white); }
.hm-hero .hm-display span { color: var(--hm-green); }
.hm-hero .hm-lead { color: var(--hm-text-on-dark); max-width: 580px; }

/* Email / input bar used in hero */
.hm-input-bar {
  display: flex;
  align-items: stretch;
  background: var(--hm-white);
  border-radius: var(--hm-radius-pill);
  overflow: hidden;
  max-width: 500px;
  box-shadow: var(--hm-shadow);
}
.hm-input-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.85rem 1.5rem;
  font-family: var(--hm-font);
  font-size: var(--hm-fs-sm);
  color: var(--hm-text-dark);
  background: transparent;
}
.hm-input-bar button {
  flex-shrink: 0;
  padding: 0 1.5rem;
  background-color: var(--hm-green);
  color: var(--hm-white);
  border: none;
  font-family: var(--hm-font);
  font-size: var(--hm-fs-sm);
  font-weight: var(--hm-fw-semibold);
  cursor: pointer;
  transition: background-color var(--hm-transition);
}
.hm-input-bar button:hover { background-color: var(--hm-green-dark); }

/* ── Step/Plan Card ──────────────────────────────────────── */
.hm-plan-card {
  background: var(--hm-white);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow);
  overflow: hidden;
}
.hm-plan-card .plan-header {
  background-color: var(--hm-green);
  color: var(--hm-white);
  padding: 1.25rem 1.5rem;
  font-weight: var(--hm-fw-bold);
  font-size: var(--hm-fs-lg);
}
.hm-plan-card .plan-body { padding: 1.5rem; }
.hm-plan-card ul li {
  font-size: var(--hm-fs-sm);
  padding: 0.3rem 0;
  color: var(--hm-text-body);
}

/* ── Principle list item ─────────────────────────────────── */
.hm-principle {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hm-grey-200);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.hm-principle:last-child { border-bottom: none; }
.hm-principle-num {
  width: 32px;
  height: 32px;
  background: var(--hm-green);
  color: var(--hm-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hm-fs-xs);
  font-weight: var(--hm-fw-bold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Accordion (FAQ) ─────────────────────────────────────── */
.hm-accordion .accordion-button {
  font-family: var(--hm-font);
  font-weight: var(--hm-fw-medium);
  color: var(--hm-text-dark);
  background: var(--hm-white);
  box-shadow: none;
}
.hm-accordion .accordion-button:not(.collapsed) {
  color: var(--hm-green);
  background: var(--hm-white);
}
.hm-accordion .accordion-button:not(.collapsed)::after {
  filter: none;
}
.hm-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2378C840'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.hm-accordion .accordion-item {
  border-left: none;
  border-right: none;
  border-radius: 0 !important;
  border-color: var(--hm-grey-200);
}

/* ── Footer ──────────────────────────────────────────────── */
.hm-footer {
  background-color: var(--hm-black);
  color: var(--hm-white);
  padding: 5rem 0 2.5rem;
}
.hm-footer .footer-brand img { height: 32px; filter: brightness(0) invert(1); }
.hm-footer .footer-heading {
  font-size: var(--hm-fs-base);
  font-weight: var(--hm-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hm-white);
  margin-bottom: 1.250rem;
}
.hm-footer a {
  color: var(--hm-white);
  font-size: var(--hm-fs-sm);
  font-weight: var(--hm-fw-light);
  transition: color var(--hm-transition);
  display: block;
  margin-bottom: 1rem;
}
.hm-footer a:hover { color: var(--hm-green); }
.hm-footer .footer-divider {
  border-color: var(--hm-dark-mid);
  margin: 2rem 0 1.5rem;
}
.hm-footer .footer-copy {
  font-size: var(--hm-fs-xs);
  color: var(--hm-grey-400);
}

/* ── Social icons ────────────────────────────────────────── */
.hm-social-links { display: flex; gap: 0.75rem; }
.hm-social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hm-dark-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-grey-400);
  font-size: 0.9rem;
  transition: border-color var(--hm-transition), color var(--hm-transition), background-color var(--hm-transition);
  margin-bottom: 0;
}
.hm-social-links a:hover {
  border-color: var(--hm-green);
  color: var(--hm-green);
  background-color: rgba(120,200,64,0.1);
}

/* ── Utility helpers ─────────────────────────────────────── */
.bg-green  { background-color: var(--hm-green) !important; }
.bg-dark-hm { background-color: var(--hm-dark) !important; }
.bg-black-hm { background-color: var(--hm-black) !important; }
.bg-muted-green { background-color: var(--hm-green-muted) !important; }

.rounded-hm    { border-radius: var(--hm-radius) !important; }
.rounded-hm-lg { border-radius: var(--hm-radius-lg) !important; }
.rounded-pill-hm { border-radius: var(--hm-radius-pill) !important; }

.shadow-hm    { box-shadow: var(--hm-shadow) !important; }
.shadow-hm-sm { box-shadow: var(--hm-shadow-sm) !important; }
.shadow-hm-lg { box-shadow: var(--hm-shadow-lg) !important; }

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 991px) {
  :root {
    --hm-section-py: 3.5rem;
    --hm-fs-5xl: 2.75rem;
    --hm-fs-4xl: 2.25rem;
    --hm-fs-3xl: 2rem;
  }
  .hm-hero { padding: 4rem 0 3rem; }
}
@media (max-width: 575px) {
  :root {
    --hm-section-py: 2.5rem;
    --hm-fs-5xl: 2.25rem;
    --hm-fs-4xl: 1.875rem;
    --hm-fs-3xl: 1.625rem;
  }
  .hm-input-bar { flex-direction: column; border-radius: var(--hm-radius); }
  .hm-input-bar button { padding: 0.75rem 1.5rem; border-radius: 0; }
}