/* ===========================
   1. MTN HEADER
   =========================== */

/* A. Header container + extra vertical padding for CTA space */
.mtn-header{position:fixed;z-index:999999;width:100vw;background:#1a1a1a;left:0;top:0;box-sizing:border-box;padding-top:12px;padding-bottom:20px;transition:transform .3s ease,opacity .3s ease;}

/* B. Inner header layout + increased height for breathing room */
.header-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;height:130px;padding:0;box-sizing:border-box;}

/* C. Left + right column flex behavior */
.header-left,.header-right{display:flex;align-items:center;}

/* D. Main site logo */
.logo img{height:115px;object-fit:contain;}

/* E. Center column (top links + nav) */
.header-center{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0;align-items:center;}

/* F. Top links row (centered + extra spacing between links) */
.top-links{display:flex;justify-content:center;gap:40px;font-size:14px;margin:6px 0;}

/* G. Top link styles */
.top-links a{color:#ccc;text-decoration:none;}
.top-links a:hover{color:#fff;}

/* H. Divider between top links + nav row */
.short-divider{width:100%;border:none;height:2px;background-color:#333;margin-top:4px;margin-bottom:8px;}

/* I. Primary navigation row */
.nav-links{
  display:flex;
  justify-content:center;
  gap:32px;
  margin-top:6px; /* matches top-links breathing room */
}


/* J. Primary nav links */
.nav-links a{color:#fff;text-decoration:none;font-size:16px;}

/* K. Default desktop CTA button style */
.cta-button{background:#932c3c;color:#fff;padding:12px 20px;border-radius:8px;font-weight:500;text-decoration:none;white-space:nowrap;}

/* L. Mobile menu toggle icon */
.hamburger{font-size:28px;cursor:pointer;background:none;border:none;color:#fff;padding:8px;display:none;z-index:1000;}





/* ===========================
   2. MOBILE MENU
   =========================== */

.mobile-menu { position: fixed; top: 0; right: 0; width: 80%; height: 100vh; background: #000; color: #fff; transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 99999999; display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-top: 80px; opacity: 0; visibility: hidden; }

.mobile-menu.active { transform: translateX(0); opacity: 1; visibility: visible; }

.mobile-menu-header { background: #000; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #333; position: relative; top: 0; z-index: 10000; padding-top: 80px; }

.mobile-logo img { height: 130px; max-width: 280px; display: block; }

.close-menu { font-size: 28px; color: #fff; cursor: pointer; position: absolute; top: 12px; right: 16px; }

.mobile-menu-inner { padding: 4px 16px !important; display: flex !important; flex-direction: column !important; gap: 0px !important; margin-top: -100px; padding-top: 100px; }

/* ===========================
   3. MOBILE DROPDOWNS
   =========================== */

#mobile-products.dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }

#mobile-products.dropdown-content.show { max-height: 1000px; overflow: visible; }

/* Additional Therapies Info Blocks */

.therapy-group { padding: 10px 16px 0; margin-top: 5px; }

.therapy-title { font-size: 14px; font-weight: 600; color: #ddd; text-transform: none; letter-spacing: 0.4px; margin: 16px 0 6px; padding-bottom: 6px; border-bottom: 1px solid #444; font-style: italic; }

.therapy-note { font-size: 12px; color: #aaa; line-height: 1.4; padding-top: 2px; }

.dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; display: flex; flex-direction: column; opacity: 1; }

.dropdown-content.show { max-height: 500px; }

.dropdown-content a { color: #ccc; text-decoration: none; font-size: 14px; padding: 8px 0; transition: color 0.3s ease, background-color 0.3s ease; }

.dropdown-content a:hover { color: #fff; background: #333; }

.dropdown-content .no-link { display: block; color: #ccc; padding: 8px 10px; font-size: 14px; font-family: inherit; line-height: 1.4; pointer-events: none; cursor: default; white-space: normal; }

#desktop-products.dropdown-content { max-height: 80vh; overflow-y: auto; overflow-x: hidden; }

.dropdown-content .dropdown-label { font-size: 15px; color: #eee; text-transform: uppercase; font-weight: 700; padding: 10px 16px 4px; letter-spacing: 0.7px; margin-top: 10px; margin-bottom: 6px; display: block; pointer-events: none; border-bottom: 1px solid #2a2a2a; }

.dropdown-content a { padding-left: 16px; padding-right: 16px; }

.mobile-menu-inner button,
.mobile-menu-inner a.main-link {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: left;

  width: 100%;
  padding: 14px 16px; /* FIX — matches Services & Solutions left indent */
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  height: auto;
}



.mobile-menu-inner button:hover, .mobile-menu-inner a:hover { text-decoration: none; }

.mobile-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: #aaa;
  margin-top: 12px;
  margin-bottom: 28px; /* ADDED */
}



/* Add padding to footer links */
.mobile-footer-links {
  padding: 0 12px !important;
}

.mobile-footer-links a {
  padding: 6px 4px !important; /* FIX — reduce vertical spacing */
  color: #ddd !important;
  display: block !important;
  text-decoration: none !important;
  line-height: 1.2 !important; /* EXTRA tightening */
}



/* ===========================
   4. MOBILE CTA BUTTON
   =========================== */

@media (max-width: 768px) {
  .cta-button.mobile-cta.book-visit { background: #222; color: #fff !important; font-weight: 700; border-radius: 8px; display: block; width: 100%; text-align: center; margin-top: 12px; margin-bottom: 16px; border: 1px solid #932c3c; transition: background 0.3s ease, transform 0.2s ease; }
  .cta-button.mobile-cta.book-visit:hover { background: #333; transform: translateY(-2px); }
}

.menu-image {
  width: 100%;
  border-radius: 12px;
  margin-top: 32px; /* INCREASED */
}





/* ===========================
   4.1 MOBILE NAV — UNIFORM ROW HEIGHT
   =========================== */

/* Apply identical height + vertical rhythm to buttons AND links */
#mobile-menu .mobile-menu-inner button[data-target],
#mobile-menu .mobile-menu-inner a.main-link {
  height: 56px !important;          /* FORCE exact equality */
  padding: 0 16px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  line-height: 1 !important;
  box-sizing: border-box !important;
}






/* ===========================
   5. DESKTOP DROPDOWNS
   =========================== */

@media (min-width: 769px) {
  .dropdown { position: relative; }
  .dropdown-content { position: absolute; top: 100%; left: 0; background: #111; padding: 10px; display: none; opacity: 1; width: 400px; white-space: normal; overflow: visible; max-height: none; flex-direction: column; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); border: 1px solid #333; }
  .dropdown-content a { color: #ccc; text-decoration: none; font-size: 14px; padding: 8px 10px; display: block; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease; }
  .dropdown-content a:hover { color: #fff; background: #333; }
  .dropdown:hover .dropdown-content { display: block; }
}

/* ===========================
   6. START HERE BLOCK
   =========================== */
.start-here-block {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  padding: 0 16px; /* ADDED — gives left/right breathing room */
}

.start-here-block .main-link {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.start-here-block .cta-button {
  display: inline-block;
  margin-top: 0;
}


/* ===========================
   7. RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .hamburger { display: flex; align-items: center; justify-content: center; position: absolute; top: 24px; right: 24px; }
  .header-inner { flex-direction: column; align-items: center; justify-content: center; }
  .logo img { height: 105px; max-width: 80vw; width: auto; display: block; }
}


@media (min-width: 769px) {
  .mobile-only { display: none !important; }
  .header-inner { padding-left: 40px; padding-right: 40px; }
}

/* Mobile main links — match accordion headers */
.main-link {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: left !important;

  width: 100% !important;
  padding: 14px 16px !important; /* FIX — match Services/Solutions indent */
  margin: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}



.mobile-divider { margin: 4px 0; border-top: 1px solid #444; }

.cta-button.mobile-cta { margin-top: 4px; padding: 10px; font-size: 16px; width: 100%; text-align: center; background: #932c3c; border-radius: 8px; text-decoration: none; font-weight: bold; }

.compare-link { font-weight: 600; color: #2f855a; display: block; font-size: 15px; transition: color 0.3s ease; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }

.compare-link:hover { color: #38a169; background: rgba(47,133,90,0.15); border-radius: 6px; padding-left: 12px; }

@media (max-width: 768px) { #mobile-services .compare-link { border-top: none; margin-top: 14px; padding-top: 6px; } }

/* ===========================
   8. HIDE ON SCROLL
   =========================== */

.mtn-header { transition: transform 0.3s ease, opacity 0.3s ease; }

.mtn-header.hide { transform: translateY(-100%); opacity: 0; }






/* ===========================
   9. CTA STACK (RESTORED)
   =========================== */

/* A. Stack CTA buttons vertically on desktop */
@media (min-width:769px){.header-right.desktop-only{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}}








/* ===========================
   CTA BUTTONS — UNIFORM SIZE
   =========================== */

/* A. Same width + height for BOTH CTAs */
@media (min-width:769px){
  .header-right.desktop-only .cta-button,
  .header-right.desktop-only .secondary-cta{
    display:block;
    min-width:220px;
    min-height:52px;
    padding:0 20px;
    line-height:52px;
    font-size:16px;
    font-weight:600;
    border-radius:8px;
    text-align:center;
    box-sizing:border-box;
  }
}

/* B. Free Consultation (primary CTA) */
@media (min-width:769px){
  .header-right.desktop-only .cta-button{
    background:#932c3c!important;
    color:#fff!important;
    border:none!important;
  }
}

/* C. Book Your First Visit (secondary CTA) */
@media (min-width:769px){
  .header-right.desktop-only .secondary-cta{
    background:#222!important;
    color:#fff!important;
    border:1px solid #932c3c!important;
  }
}

/* D. Hover */
@media (min-width:769px){
  .header-right.desktop-only .secondary-cta:hover{
    background:#333!important;
    transform:translateY(-2px);
  }
}


/* ===========================
   TOP LINKS — SPACING + CENTER
   =========================== */

@media (min-width:769px){
  .top-links{
    justify-content:center!important;
    gap:40px!important;
    margin-top:6px!important;
    margin-bottom:6px!important;
  }

  .short-divider{
    margin:8px 0!important;
  }
}


/* ===========================
   CTA GROUP — VERTICAL ALIGN
   =========================== */

/* Center CTA buttons vertically inside the header */
@media (min-width:769px){
  .header-inner{
    align-items:center!important;
  }
}


/* ===========================
   MIDDLE HEADER VISUAL ENHANCEMENTS
   =========================== */

/* A. Increase top link + nav link font size/weight */
@media (min-width:769px){.top-links a{font-size:16px!important;font-weight:500!important;}.nav-links a{font-size:18px!important;font-weight:600!important;}}

/* B. Thicker horizontal divider */
@media (min-width:769px){.short-divider{height:3px!important;background-color:#444!important;}}



/* ===========================
   DROPDOWN TEXT SIZE FIX
   =========================== */

/* A. Reset dropdown link size + weight */
@media (min-width:769px){
  .dropdown-content a{
    font-size:15px!important;
    font-weight:400!important;
  }
}

/* B. Reset dropdown label size */
@media (min-width:769px){
  .dropdown-content .dropdown-label{
    font-size:14px!important;
    font-weight:600!important;
  }
}

/* C. Reset therapy titles + notes so they aren't huge */
@media (min-width:769px){
  .therapy-title{
    font-size:14px!important;
    font-weight:600!important;
  }
  .therapy-note{
    font-size:12px!important;
    font-weight:400!important;
  }
}


/* ===========================
   14. MEMBERSHIP + SOLUTIONS CTA INSIDE DROPDOWN
   =========================== */

/* A. Make CTA buttons full-width on desktop */
@media (min-width:769px){

  /* Membership & Pricing (Services) */
  #desktop-services .compare-link,

  /* View All Solutions (Solutions) */
  #desktop-products .compare-link{
    display:block!important;
    background:#222!important;
    color:#fff!important;
    border:1px solid #932c3c!important;
    border-radius:8px!important;
    padding:14px 20px!important;
    font-size:16px!important;
    font-weight:600!important;
    text-align:center!important;
    margin-top:14px!important;
    margin-bottom:6px!important;
    transition:background .3s ease,transform .2s ease;
  }

  /* B. Hover effect (match secondary CTA) */
  #desktop-services .compare-link:hover,
  #desktop-products .compare-link:hover{
    background:#333!important;
    transform:translateY(-2px);
  }
}

/* Extra spacing above Membership CTA only */
@media (min-width:769px){
  #desktop-services .compare-link{
    margin-top:28px!important;
  }
}











/* ===========================
   17. NUCLEAR FIX — FORCE HAMBURGER VISIBLE
   =========================== */

@media (max-width:960px){

  /* Override every possible desktop rule */
  .desktop-only,
  .header-center.desktop-only,
  .header-right.desktop-only,
  .header-left.desktop-only {
    display:none!important;
  }

  .mobile-only{
    display:block!important;
  }

  /* Force hamburger visible even if a wrapper hides it */
  .hamburger,
  .header-inner .hamburger,
  .mtn-header .hamburger,
  .header-right .hamburger {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    top:22px!important;
    right:22px!important;
    font-size:34px!important;
    color:#fff!important;
    z-index:999999!important;
  }

  .header-inner{
    flex-direction:column!important;
    align-items:center!important;
  }

  .logo img{
    height:100px!important;
  }
}






/* ===========================
   18. MOBILE MEMBERSHIP BUTTON
   =========================== */

/* A. Convert Membership & Pricing → into a CTA inside mobile menu */
@media (max-width:960px){
  .mobile-menu-inner .compare-link{
    display:block!important;
    width:100%!important;
    background:#222!important;
    color:#fff!important;
    border:1px solid #932c3c!important;
    border-radius:8px!important;
    padding:14px 18px!important;
    font-size:16px!important;
    font-weight:600!important;
    text-align:center!important;
    margin-top:28px!important;
    margin-bottom:10px!important;
    box-sizing:border-box!important;
    transition:background .3s ease, transform .2s ease;
  }

  /* B. Hover lift */
  .mobile-menu-inner .compare-link:hover{
    background:#333!important;
    transform:translateY(-2px);
  }
}


/* ===========================
   13. UNIFY CTA BUTTON STYLE ACROSS ALL SIZES
   =========================== */

/* A. Match desktop CTA style even when mobile menu is active */
@media (min-width:480px){

  /* Free Consultation (primary CTA) */
  .cta-button{
    background:#932c3c!important;
    color:#fff!important;
    border:none!important;
    min-width:220px!important;
    min-height:52px!important;
    line-height:52px!important;
    border-radius:8px!important;
    font-weight:600!important;
    text-align:center!important;
    display:block!important;
  }

  /* Book Your First Visit (secondary CTA) */
  .secondary-cta{
    background:#222!important;
    color:#fff!important;
    border:1px solid #932c3c!important;
    min-width:220px!important;
    min-height:52px!important;
    line-height:52px!important;
    border-radius:8px!important;
    font-weight:600!important;
    display:block!important;
  }

  /* Hover effect preserved */
  .secondary-cta:hover{
    background:#333!important;
    transform:translateY(-2px);
  }
}


/* ===========================
   19. MOBILE BOOK VISIT = DESKTOP SECONDARY CTA
   =========================== */

/* Make "Book Your First Visit" match the gray desktop secondary CTA */
@media (max-width:960px){
  .cta-button.mobile-cta.book-visit{
    background:#222!important;
    color:#fff!important;
    border:1px solid #932c3c!important;
    font-weight:600!important;
  }
}



/* MOBILE CTA BUTTONS – RESTORE ORIGINAL SLIM DESIGN */
@media (max-width:960px){

  /* Base mobile CTA */
  .mobile-cta{
    background:#932c3c !important;
    color:#fff !important;
    padding:14px 18px !important;
    border-radius:8px !important;
    font-size:16px !important;
    font-weight:600 !important;
    width:100% !important;
    text-align:center !important;
    margin:12px 0 !important;
    line-height:1.3 !important;
  }

  /* Book Your First Visit mobile button (secondary style) */
  .mobile-cta.book-visit{
    background:#222 !important;
    border:1px solid #932c3c !important;
  }

  .mobile-cta.book-visit:hover{
    background:#333 !important;
  }
}


/* ===========================
   12. FIX MID-RANGE (TABLET/HALF SCREEN) HEADER HEIGHT
   =========================== */

/* A. Apply desktop-style compression to tablet/half-screen */
@media (min-width:769px) and (max-width:1400px){

  /* Keep logo from expanding when the header narrows */
  .logo img{
    height:110px!important;
    width:auto!important;
  }

  /* Prevent top links from wrapping (this adds height!) */
  .top-links{
    white-space:nowrap!important;
  }

  /* Align header contents exactly like full desktop */
  .header-inner{
    align-items:center!important;
  }

  /* Prevent nav links from wrapping into taller rows */
  .nav-links{
    white-space:nowrap!important;
  }

  /* Keep CTA stack consistent; prevent mid-range stretching */
  .header-right.desktop-only{
    justify-content:center!important;
  }
}





/* ============================================
   MOBILE MENU — FIXED BUTTON + ACCORDION STYLE
   ============================================ */

/* Make mobile buttons behave as accordion headers */
#mobile-menu .mobile-menu-inner button[data-target] {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600;
  width: 100%;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}



/* Add the + icon automatically — CENTERED, NO HEIGHT INFLUENCE */
#mobile-menu .mobile-menu-inner button[data-target]::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  transition: transform .2s ease, color .2s ease;
  color: #fff;
}


/* When open → show minus */
#mobile-menu .mobile-menu-inner button[data-target].open::after {
  content: "–";
  transform: rotate(0deg);
  color: #fff;
}

/* The dropdown container (mobile-services, mobile-products) */
#mobile-menu .dropdown-content {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: max-height .35s ease;
  padding-left: 0 !important;
}

/* Visible state */
#mobile-menu .dropdown-content.show {
  max-height: 1000px; /* plenty of room */
}

/* Links inside dropdown retain style */
#mobile-menu .dropdown-content a {
  padding: 10px 0 !important;
  font-size: 15px;
}

/* Make dropdown labels match spacing */
#mobile-menu .dropdown-content .dropdown-label {
  padding: 12px 0 6px !important;
  margin-top: 10px;
}

/* Remove inherited spacing from earlier CSS */
.mobile-menu-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

























/* =========================================
   FIX: MOBILE MENU DROPDOWNS + UNIFORM HEADER SPACING
   FIX: REMOVE LEFT INDENT (Services + Solutions)
   FOR TABLET / HALF DESKTOP (769–1199px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1199px) {

  /* --- Fix dropdown panels not opening --- */
  #mobile-menu .dropdown-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  #mobile-menu .dropdown-content.show {
    max-height: 1000px !important;
    display: flex !important;
  }

  /* =========================================
     REMOVE EXTRA WRAPPER SPACING
     ========================================= */
  #mobile-menu .therapy-group,
  #mobile-menu .category-wrapper,
  #mobile-menu .dropdown-label,
  #mobile-menu .mobile-menu-inner > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =========================================
     THE REAL FIX: REMOVE LEFT INDENT
     FROM HEADER BUTTONS THEMSELVES
     ========================================= */

  /* This is the padding causing the indent — override it */
  #mobile-menu .mobile-menu-inner button[data-target],
  #mobile-menu .mobile-menu-inner a[data-target] {
    padding: 14px 0 !important;     /* ← NO LEFT/RIGHT PADDING */
    margin: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Add balanced left/right spacing to visually center text */
  #mobile-menu .mobile-menu-inner button[data-target] span,
  #mobile-menu .mobile-menu-inner a[data-target] span {
    padding-left: 16px !important;
  }

  /* Ensure "+" icon stays aligned right */
  #mobile-menu .mobile-menu-inner button[data-target]::after,
  #mobile-menu .mobile-menu-inner a[data-target]::after {
    margin-right: 16px !important;
  }

  /* Clean divider spacing */
  #mobile-menu .mobile-divider {
    margin: 4px 0 !important;
  }
}








/* ===========================
   HARD FIX: DESKTOP DROPDOWN TEXT COLLAPSE
   =========================== */

@media (min-width: 769px) {

  /* Lock dropdown width so it cannot collapse */
  .nav-links .dropdown-content {
    min-width: 380px !important;
    max-width: 380px !important;
    width: 380px !important;
  }

  /* Force normal text flow (prevents vertical letters) */
  .nav-links .dropdown-content,
  .nav-links .dropdown-content * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
  }
}