/* ============================================
   Momentum Behavior Services - Main Stylesheet
   ============================================ */

/* CSS Custom Properties (Variables) */
:root {

  /* Colors (Brand Palette) */
  --color-primary-green: rgb(42, 63, 40);       /* EMERALD GREEN */
  --color-primary-green-dark: rgb(31, 45, 29);  /* darker emerald for hovers */
  --color-primary-green-light: rgb(60, 90, 57);
  --color-accent-gold: rgb(207, 171, 47);         /* MARIGOLD */
  --color-accent-gold-light: rgb(225, 200, 97);
  --color-accent-gold-dark: rgb(173, 138, 32);
  --color-white: rgb(255, 255, 255);
  --color-light-gray: rgb(253, 244, 234);          /* BEIGE */
  --color-dark-gray: rgb(51, 51, 51);
  --color-text-heading-dark: rgb(31, 31, 31);
  --color-text-body: rgb(51, 51, 51);
  --color-text-light: rgb(102, 102, 102);

  /* Colors (Extended) */
  --color-text-nav: rgb(17, 17, 17);
  --color-cream: rgb(253, 248, 238);
  --color-light-gray-hover: rgb(246, 235, 221);
  --color-border-light: rgb(224, 224, 224);
  --color-header-overlay-bg: rgba(42, 63, 40, 0.78);
  --color-header-mobile-bg: rgba(31, 45, 29, 0.96);
  --color-header-mobile-border: rgba(255, 255, 255, 0.12);

  /* Colors (Generated from legacy hex usage) */
  --color-hex-1a1a1a: rgb(26, 26, 26);
  --color-hex-1b2e1f: rgb(27, 46, 31);
  --color-hex-1e2d1d: rgb(30, 45, 29);
  --color-hex-2b353a: rgb(43, 53, 58);
  --color-hex-2d3e2e: rgb(45, 62, 46);
  --color-hex-2d3e32: rgb(45, 62, 50);
  --color-hex-2d452f: rgb(45, 69, 47);
  --color-hex-324c38: rgb(50, 76, 56);
  --color-hex-3a5741: rgb(58, 87, 65);
  --color-hex-444444: rgb(68, 68, 68);
  --color-hex-4e502a: rgb(78, 80, 42);
  --color-hex-555555: rgb(85, 85, 85);
  --color-hex-798c7f: rgb(121, 140, 127);
  --color-hex-7c7c7c: rgb(124, 124, 124);
  --color-hex-999999: rgb(153, 153, 153);
  --color-hex-b89836: rgb(184, 152, 54);
  --color-hex-c19e2e: rgb(193, 158, 46);
  --color-hex-c5a03f: rgb(197, 160, 63);
  --color-hex-ccac3f: rgb(204, 172, 63);
  --color-hex-d1a966: rgb(209, 169, 102);
  --color-hex-d4ac36: rgb(212, 172, 54);
  --color-hex-d4af37: rgb(212, 175, 55);
  --color-hex-dab851: rgb(218, 184, 81);
  --color-hex-dddddd: rgb(221, 221, 221);
  --color-hex-e5c968: rgb(229, 201, 104);
  --color-hex-e8e8e8: rgb(232, 232, 232);
  --color-hex-eca420: rgb(236, 164, 32);
  --color-hex-ecefef: rgb(236, 239, 239);
  --color-hex-eeeeee: rgb(238, 238, 238);
  --color-hex-f5f0e8: rgb(245, 240, 232);
  --color-hex-f5f5f5: rgb(245, 245, 245);
  --color-hex-f9f9f9: rgb(249, 249, 249);

  /* Colors (New palette) */
  --color-hex-111111: #111111;
  --color-hex-cfab2f: #cfab2f;
  --color-hex-cfaa2f: #cfaa2f;
  --color-hex-2a4029: #2a4029;
  --color-hex-ceaa2e: #ceaa2e;
  --color-hex-f8f2e9: #f8f2e9;
  --color-hex-d6b119: #d6b119;
  --color-hex-ffffff: #ffffff;
  --color-hex-333333: #333333;
  --color-hex-222222: #222222;
  --color-hex-2a3f28: #2a3f28;
  --color-hex-2a3f27: #2a3f27;
  --color-hex-212121: #212121;
  --color-hex-ceab2e: #ceab2e;
  --color-hex-202020: #202020;
  --color-hex-232323: #232323;
  --color-hex-fafafa: #fafafa;
  --color-hex-32482e: #32482e;

  /* Typography */
  --font-primary: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-fallback: Arial, Helvetica, sans-serif;
  --font-display: 'AndrogyneMedium', Arial, Helvetica, sans-serif;

  /* Font sizes */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-35: 35px;
  --fs-45: 45px;
  --fs-50: 50px;
  --fs-55: 55px;
  --fs-60: 60px;
  --fs-70: 70px;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-normal: 260ms var(--ease-out);
  --transition-slow: 420ms var(--ease-out);

  /* Interaction polish */
  --focus-ring: 0 0 0 4px rgba(225, 200, 97, 0.35);
}
/* Font Imports & Font Face Declarations */
/* Montserrat is loaded via <link> in each HTML <head> for reliability */

@font-face {
  font-family: 'AndrogyneMedium';
  src: url('../fonts/AndrogyneMedium.woff2') format('woff2'),
       url('../fonts/AndrogyneMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Base Typography */
body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium interaction defaults */
*:focus {
  outline: none !important;
}

*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Headings & Text per design spec */
h1 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-heading-dark);
}

h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary-green);
}

h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 35px;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-heading-dark);
}

h4 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary-green);
}

h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent-gold);
}

h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-heading-dark);
}

p {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 17px;
  line-height: 25px;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-body);
}

/* Lists use paragraph typography with custom line-height */
main ul,
main ol {
  margin: 0 0 var(--spacing-sm);
  padding-left: 0;
  list-style: none;
}

main ul:not(.momentum-values__list):not(.momentum-evaluation__benefits) li,
main ol li {
  position: relative;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 20px;
  line-height: 42px;
  color: var(--color-text-body);
  padding-left: 2.5rem;
}

/* Custom circular bullet icon */
main ul:not(.momentum-values__list):not(.momentum-evaluation__benefits) li::before,
main ol li::before {
  content: '›';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--color-accent-gold);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

a {
  color: var(--color-primary-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Header: sticky only on desktop (992px+); mobile/tablet scroll with page */
.momentum-header {
  position: relative;
  z-index: 999;
  background-color: var(--color-white);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}

.momentum-header.scrolled .navbar {
  box-shadow: 0 0px 20px 0 rgba(255, 255, 255, 0.72);
}
.momentum-header--inner-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: transparent;
}

/* Header navigation links */
.navbar-nav .nav-link {
  color: var(--color-text-nav);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: var(--color-accent-gold);
}

/* Custom navbar toggler base (remove default border/outline/box-shadow) */
.navbar-toggler {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  border: none;
  box-shadow: none;
  outline: none;
}
.nav-link {
  font-size: var(--fs-17);
}

/* Dropdown menu: smooth fade/slide */
/* ── Modern dropdown card ── */
.dropdown-menu {
  border: none;
  border-radius: 16px;
  min-width: 230px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.07);

  /* Animation start state */
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  pointer-events: none;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Dropdown items ── */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 10px;
  padding: 11px 14px 11px 14px;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--color-text-body);
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

/* Left gold accent bar */
.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background-color: var(--color-accent-gold);
  border-radius: 0 4px 4px 0;
  transition: height 0.22s ease;
}

/* Right arrow icon — slides in on hover */
.dropdown-item::after {
  content: '\f054'; /* fa-chevron-right */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Sharp';
  font-weight: 900;
  font-size: 11px;
  margin-left: auto;
  color: var(--color-accent-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f8f5ee;
  color: var(--color-primary-green-dark);
  padding-left: 18px;
}

.dropdown-item:hover::before,
.dropdown-item:focus::before {
  height: 22px;
}

.dropdown-item:hover::after,
.dropdown-item:focus::after {
  opacity: 1;
  transform: translateX(0);
}
/* Button System (pill buttons with arrow) */
.btn {
  font-family: var(--font-primary);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.9rem 2.75rem 0.9rem 1rem;
  border-width: 0;
  transition: all var(--transition-normal);
  font-size: var(--fs-17);
}

/* Marigold Button */
.btn-primary {
  background-color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  color: var(--color-primary-green);
}

.btn-primary:hover {
  background-color: var(--color-accent-gold-dark);
  border-color: var(--color-accent-gold-dark);
  color: var(--color-primary-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Ivory / Beige Button */
.btn-secondary {
  background-color: var(--color-light-gray);
  border-color: var(--color-light-gray);
  color: var(--color-primary-green);
}

.btn-secondary:hover {
  background-color: var(--color-light-gray-hover);
  border-color: var(--color-light-gray-hover);
  color: var(--color-primary-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Green Button */
.btn-outline-primary {
  background-color: var(--color-primary-green);
  border-color: var(--color-primary-green);
  color: var(--color-cream);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary-green-dark);
  border-color: var(--color-primary-green-dark);
  color: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Override Bootstrap blue active/long-press state for all button variants */
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-check:checked + .btn-primary,
:not(.btn-check) + .btn-primary:active {
  background-color: var(--color-accent-gold-dark) !important;
  border-color: var(--color-accent-gold-dark) !important;
  color: var(--color-primary-green-dark) !important;
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.show,
.btn-check:checked + .btn-secondary,
:not(.btn-check) + .btn-secondary:active {
  background-color: var(--color-light-gray-hover) !important;
  border-color: var(--color-light-gray-hover) !important;
  color: var(--color-primary-green-dark) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary,
:not(.btn-check) + .btn-outline-primary:active {
  background-color: var(--color-primary-green-dark) !important;
  border-color: var(--color-primary-green-dark) !important;
  color: var(--color-cream) !important;
}

/* Shared arrow treatment for all arrow buttons */
.btn[data-arrow="true"] {
  position: relative;
  padding-right: 3.5rem;
}

.btn[data-arrow="true"]::after {
  content: "\f138"; /* Font Awesome: circle-chevron-right */
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-hex-2a4029);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-24);

}
 .btn.btn-secondary[data-arrow="true"]::after{
  color: var(--color-hex-2a4029) !important;
}
/* Utility Classes */
.text-gold {
  color: var(--color-accent-gold) !important;
}

.bg-primary-green {
  background-color: var(--color-primary-green) !important;
}

.bg-light-gray {
  background-color: var(--color-light-gray) !important;
}

/* Header phone styles */
.header-phone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--color-accent-gold);
  color: var(--color-white);
  font-size: 12px;
}


.header-phone:hover .header-phone__icon,
.header-phone:focus .header-phone__icon {
  background-color: var(--color-accent-gold);
}

/* Navbar toggler base (use Bootstrap icon when closed, X when open) */
.navbar-toggler {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  border: none;
  box-shadow: none;
  outline: none;
}

/* When expanded, replace default hamburger with a bold X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: none;
  position: relative;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  content: '\00d7'; /* × */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-body);
}
.momentum-header.scrolled .header-phone span {
  display: none;
}

.section-padding {
  padding: var(--spacing-xl) 0;
}

.section-padding-lg {
  padding: var(--spacing-xxl) 0;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Styles */
/*
*:focus {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

button:focus,
a:focus {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}
*/
/* ===== Shared: Gold Section Divider =====
   Usage:
     <div class="section-divider">
       <span class="section-divider__line"></span>
       <h5 class="section-divider__label">Section Title</h5>
       <span class="section-divider__line"></span>
     </div>
   ========================================= */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: var(--spacing-sm);
}
.section-divider__line {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background-color: var(--color-accent-gold);
}
.section-divider__label {
  color: var(--color-accent-gold);
  font-size: var(--fs-20);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
  font-family: var(--font-display);
  white-space: nowrap;
}

/* ===== Shared: Inline preheadline with decorative lines =====
   Usage: add class "section-divider--inline" to any preheadline element.
   The lines are generated via ::before and ::after.
   ============================================================ */
.section-divider--inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--color-accent-gold);
  margin-bottom: var(--spacing-sm);
}
.section-divider--inline::before,
.section-divider--inline::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background-color: var(--color-accent-gold);
}

.momentum-contact-bar .dropdown-menu li {
  padding-left: 0px !important;
}