/* stylePersonalisationHub.css -- dedicated stylesheet for the Personalisation Hub / Configuration
   Menu nav (menus/personalise-wellness-menu.php), split out of common.css + the page-scoped
   duplicate in style_bodyglobal.css on 2026-09-07 so this component has its own file, the same
   way the Assessment Hub nav has its own styleAssessment.css. Loaded sitewide (same unconditional
   foundation tier as common.css) rather than gated to a specific page list: this menu is inserted
   via a WPCode snippet, so its real target pages are controlled in the WPCode admin UI, not in any
   theme file -- gating this stylesheet to a guessed page list would risk silently breaking a page
   using the menu that this list didn't know about. */

/* ===== migrated from menus/personalise-wellness-menu.php -- cross-silo wellness-plan nav (same family as menu-wellness-plan-page.php) -- unique class .personalise-menu-wrap ===== */

:root {
}
.personalise-menu-wrap {
  width: 100%; margin: 0; padding: 0; border-bottom: var(--brand-border-width-thin) solid var(--brand-gray-100);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--brand-white);
}
.personalise-menu-inner {
  max-width: var(--brand-width-wide); margin: 0; padding: 0 20px;
  width: 100%; box-sizing: border-box;
}
.personalise-mini-menu {
  display: flex; width: 100%; justify-content: center; align-items: center;
  padding: 12px 0; list-style: none; margin: 0; gap: 12px; flex-wrap: nowrap;
}
.personalise-desktop-title {
  font-weight: var(--brand-weight-black); color: var(--brand-black); font-size: var(--brand-font-size-base);
  text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
  transition: 0.2s; display: flex; align-items: center; gap: 6px; margin-right: auto;
  white-space: nowrap;
}
.personalise-desktop-title:hover { color: var(--brand-teal); }
.personalise-mini-menu a.personalise-nav-link {
  text-decoration: none; color: var(--brand-gray-400); font-weight: var(--brand-weight-semibold); font-size: var(--brand-font-size-sm);
  transition: 0.2s; cursor: pointer; padding-bottom: 2px; text-align: center;
  white-space: nowrap;
}
.personalise-mini-menu a.personalise-nav-link:hover { color: var(--brand-teal); }
.personalise-mini-menu a.active {
  color: var(--brand-teal); font-weight: var(--brand-weight-extrabold); border-bottom: var(--brand-border-width-thick) solid var(--brand-teal);
}
/* MY WELLNESS PLAN CTA */
.personalise-plan-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
  color: var(--brand-white) !important;
  background: linear-gradient(135deg, var(--brand-black), var(--brand-cyan));
  font-size: var(--brand-font-size-sm);
  font-weight: var(--brand-weight-extrabold);
  padding: 6px 12px;
  border-radius: var(--brand-radius-xl);
  white-space: nowrap;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(51,65,85,0.2);
  margin-left: auto;
  flex-shrink: 0;
}
.personalise-plan-cta:hover {
  background: linear-gradient(135deg, var(--brand-gray-400), var(--brand-cyan));
  box-shadow: 0 4px 12px rgba(51,65,85,0.3);
  transform: translateY(-1px);
}
.personalise-menu-toggle { display: none; }
@media (max-width: 900px) {
  .personalise-menu-inner { padding: 0 15px; position: relative; }

  .personalise-menu-toggle {
    display: flex; align-items: center; justify-content: center; width: 100%;
    background: var(--brand-gray-100); border: var(--brand-border-width-thin) solid var(--brand-gray-100); padding: 12px; border-radius: var(--brand-radius-md);
    cursor: pointer; margin: 10px 0; font-weight: var(--brand-weight-extrabold); color: var(--brand-black);
    text-transform: uppercase; font-size: var(--brand-font-size-base);
  }

  .personalise-mini-menu {
    display: none; position: absolute; top: 100%; left: 15px; right: 15px;
    background: var(--brand-white); border: var(--brand-border-width-thin) solid var(--brand-gray-100); border-radius: var(--brand-radius-md); padding: 15px;
    z-index: 999; flex-direction: column; align-items: flex-start; gap: 0;
    box-shadow: var(--brand-elevation-strong);
    width: var(--brand-width-narrow);
  }

  .personalise-mini-menu.open { display: flex; }

  .personalise-desktop-title { border-bottom: var(--brand-border-width-thin) solid var(--brand-gray-100); width: 100%; padding-bottom: 10px; margin-bottom: 10px; margin-right: 0; }
  .personalise-mini-menu a.personalise-nav-link { border-bottom: none; width: 100%; padding: 10px 0; text-align: left; }
  .personalise-mini-menu a.active { border-bottom: none; color: var(--brand-teal); }

  /* Full width on mobile */
  .personalise-plan-cta {
    width: 100%; justify-content: center; border-radius: var(--brand-radius-md);
    padding: 12px; margin-left: 0; margin-top: 10px; font-size: var(--brand-font-size-md);
    border-top: var(--brand-border-width-thin) solid var(--brand-gray-100); padding-top: 15px;
  }
}