/* =========================================================
   MHT STICKY TOPBAR
   WordPress menu-driven version
   Icons use WP menu item classes:
   .mht-menu-home
   .mht-menu-money
   .mht-menu-wellness
   .mht-menu-search
   ========================================================= */

.hotips-header{
  overflow: visible;
}

.hotips-header .hotips-topbar.mht-sticky-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  min-height: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(67, 82, 107, 0.96) 0%,
      rgba(30, 42, 63, 0.98) 48%,
      rgba(15, 25, 42, 0.98) 100%
    ) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 8px rgba(9, 18, 34, 0.26);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-bar .hotips-header .hotips-topbar.mht-sticky-topbar{
  top: 32px;
}

.hotips-header .mht-sticky-topbar__inner{
  max-width: none;
  min-height: 30px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 3px 6px;
}

.hotips-header .mht-sticky-topbar__nav{
  display: flex;
  align-items: center;
  min-width: 0;
}

.hotips-header .hotips-topbar__menu,
.hotips-header .mht-sticky-topbar__menu{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;

  list-style: none;
  margin: 0;
  padding: 0;
}

.hotips-header .hotips-topbar__menu > li,
.hotips-header .mht-sticky-topbar__menu > li{
  display: flex;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}

.hotips-header .hotips-topbar__menu > li > a,
.hotips-header .mht-sticky-topbar__menu > li > a{
  min-height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 0 9px;

  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.05) 100%
    );

  color: rgba(255,255,255,.94) !important;
  text-decoration: none;

  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;

  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 1px 3px rgba(0,0,0,.16);

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.hotips-header .hotips-topbar__menu > li > a:hover,
.hotips-header .hotips-topbar__menu > li > a:focus-visible,
.hotips-header .mht-sticky-topbar__menu > li > a:hover,
.hotips-header .mht-sticky-topbar__menu > li > a:focus-visible{
  color: #ffffff !important;
  transform: translateY(-1px);

  border-color: rgba(255,255,255,.32);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 4px 10px rgba(0,0,0,.22);

  outline: none;
}

.hotips-header .hotips-topbar__menu > li.current-menu-item > a,
.hotips-header .hotips-topbar__menu > li.current_page_item > a,
.hotips-header .hotips-topbar__menu > li.current-menu-ancestor > a,
.hotips-header .hotips-topbar__menu > li.current_page_ancestor > a,
.hotips-header .mht-sticky-topbar__menu > li.current-menu-item > a,
.hotips-header .mht-sticky-topbar__menu > li.current_page_item > a,
.hotips-header .mht-sticky-topbar__menu > li.current-menu-ancestor > a,
.hotips-header .mht-sticky-topbar__menu > li.current_page_ancestor > a{
  color: #ffffff !important;

  border-color: rgba(255,255,255,.36);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.10) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 2px 7px rgba(0,0,0,.22);
}

/* Home is text-only */
.hotips-header .hotips-topbar__menu > li.mht-menu-home > a,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-home > a{
  padding-inline: 10px;
}

/* =========================================================
   TOPBAR MENU ICONS
   WordPress menu item classes:
   .mht-menu-home
   .mht-menu-money
   .mht-menu-wellness
   .mht-menu-search

   Money / Wellness use the real MyHotips image icons.
   Search uses one clean SVG icon.
   ========================================================= */

/* Keep icon-bearing links aligned */
.hotips-header .hotips-topbar__menu > li.mht-menu-money > a,
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness > a,
.hotips-header .hotips-topbar__menu > li.mht-menu-search > a,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money > a,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness > a,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-image: none !important;
}

/* Kill any old/proof handle from previous temporary CSS */
.hotips-header .hotips-topbar__menu > li.mht-menu-search > a::after,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a::after,
.hotips-header li.mht-menu-search > a::after{
  content: none !important;
  display: none !important;
}

/* Shared round icon bubble */
.hotips-header .hotips-topbar__menu > li.mht-menu-money > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-search > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a::before{
  content: "" !important;

  width: 19px;
  height: 19px;
  flex: 0 0 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 1px 4px rgba(0,0,0,.18);
}

/* Money icon — real image asset */
.hotips-header .hotips-topbar__menu > li.mht-menu-money > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money > a::before{
  background-color: rgba(181,214,255,.16);
  background-image: url("https://myhotips.com/wp-content/uploads/2026/04/businessGrowth.png") !important;
  background-size: 18px 18px;
}

/* Wellness icon — real image asset */
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness > a::before{
  background-color: rgba(206,232,203,.16);
  background-image: url("https://myhotips.com/wp-content/uploads/2026/04/wellnesslotus.png") !important;
  background-size: 18px 18px;
}

/* Search icon */
.hotips-header .hotips-topbar__menu > li.mht-menu-search > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a::before{
  background-color: rgba(212,175,55,.20);
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f0cd63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.7' cy='10.7' r='5.7'/%3E%3Cpath d='M15.1 15.1 20 20'/%3E%3C/svg%3E") !important;
}

/* Icon hover / current state */
.hotips-header .hotips-topbar__menu > li.mht-menu-money > a:hover::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness > a:hover::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-search > a:hover::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-money.current-menu-item > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness.current-menu-item > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-search.current-menu-item > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-money.current_page_item > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-wellness.current_page_item > a::before,
.hotips-header .hotips-topbar__menu > li.mht-menu-search.current_page_item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money > a:hover::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness > a:hover::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a:hover::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money.current-menu-item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness.current-menu-item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search.current-menu-item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-money.current_page_item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness.current_page_item > a::before,
.hotips-header .mht-sticky-topbar__menu > li.mht-menu-search.current_page_item > a::before{
  border-color: rgba(240,205,99,.36);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 2px 7px rgba(0,0,0,.22);
}

/* Dropdown */

.hotips-header .mht-sticky-topbar__dropdown{
  margin-left: auto;

  display: flex;
  align-items: center;

  min-width: 0;
}

.hotips-header .mht-sticky-topbar__dropdown .topbar-area-dropdown{
  display: flex;
  align-items: center;
}

.hotips-header .mht-sticky-topbar__dropdown select,
.hotips-header .topbar-area-dropdown select{
  max-height: 24px;
  min-height: 24px;

  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.18);

  background: rgba(255,255,255,.10);
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  padding: 0 8px;
}

.hotips-header .topbar-area-dropdown select option{
  color: #111111;
  background: #ffffff;
}

/* Login */

.hotips-header .mht-sticky-topbar__login{
  min-height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 0 8px;

  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.14);

  background: rgba(255,255,255,.07);

  color: rgba(255,255,255,.90) !important;
  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.hotips-header .mht-sticky-topbar__login:hover,
.hotips-header .mht-sticky-topbar__login:focus-visible{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.13);
}

.hotips-header .mht-sticky-topbar__login-icon{
  width: 14px;
  height: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hotips-header .mht-sticky-topbar__login-icon svg{
  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Anchor offset */

#hotips-hub-start{
  scroll-margin-top: 92px;
}

/* Responsive visual rules are consolidated with the final
   topbar mechanics block below so mobile has one authority. */


/* =========================================================
   FINAL TOPBAR MECHANICS + CONTEXT COLOUR AUTHORITY
   - Restores fixed/sticky behaviour that survives header flow
   - Restores Money / Wellness context colouring
   - Keeps this navigation file as the final authority after style.css
   - Dropdown behaviour is intentionally not changed here
   ========================================================= */

:root{
  --mht-sticky-topbar-height: 30px;
  --mht-sticky-topbar-height-mobile: 40px;
  --mht-sticky-topbar-admin-offset: 32px;

  --mht-sticky-topbar-bg:
    linear-gradient(
      180deg,
      rgba(67, 82, 107, 0.96) 0%,
      rgba(30, 42, 63, 0.98) 48%,
      rgba(15, 25, 42, 0.98) 100%
    );

  --mht-sticky-topbar-border: rgba(255, 255, 255, 0.22);
  --mht-sticky-topbar-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 8px rgba(9, 18, 34, 0.26);
}

/* Money context */
body.hotips-site-theme--money,
body.hotips-blog-theme--money,
body:has(.hotips-area-landing--money),
body:has(.hotips-section-guide-shell--money),
body:has(.hotips-section-guide-sidebar--money){
  --mht-sticky-topbar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-area-hub-money-panel-soft-bg, #e8eef7) 26%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-money-band-b, #677288) 72%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-money-band-a, #2e3b55) 88%, transparent) 100%
    );

  --mht-sticky-topbar-border: color-mix(in srgb, var(--color-white, #ffffff) 18%, transparent);
  --mht-sticky-topbar-shadow: 0 10px 24px rgba(12, 26, 46, 0.24);
}

/* Wellness context */
body.hotips-site-theme--wellness,
body.hotips-blog-theme--wellness,
body:has(.hotips-area-landing--wellness),
body:has(.hotips-section-guide-shell--wellness),
body:has(.hotips-section-guide-sidebar--wellness){
  --mht-sticky-topbar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-area-hub-wellness-panel-soft-bg, #eef4ef) 24%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-wellness-band-b, #78967f) 74%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a, #587760) 84%, black 16%) 100%
    );

  --mht-sticky-topbar-border: color-mix(in srgb, var(--color-white, #ffffff) 18%, transparent);
  --mht-sticky-topbar-shadow: 0 10px 24px rgba(40, 58, 38, 0.24);
}

/*
 * Fixed is deliberate here.
 * position: sticky inside the header can stop sticking when the header scrolls away.
 */
.hotips-header{
  overflow: visible !important;
  padding-top: var(--mht-sticky-topbar-height) !important;
}

.hotips-site .hotips-header .hotips-topbar.mht-sticky-topbar,
.hotips-header .hotips-topbar.mht-sticky-topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;

  width: 100% !important;
  height: var(--mht-sticky-topbar-height) !important;
  min-height: var(--mht-sticky-topbar-height) !important;

  background: var(--mht-sticky-topbar-bg) !important;
  border-bottom: 1px solid var(--mht-sticky-topbar-border) !important;
  box-shadow: var(--mht-sticky-topbar-shadow) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.admin-bar .hotips-site .hotips-header .hotips-topbar.mht-sticky-topbar,
.admin-bar .hotips-header .hotips-topbar.mht-sticky-topbar{
  top: var(--mht-sticky-topbar-admin-offset) !important;
}

/* Keep the actual topbar row within the restored fixed bar */
.hotips-header .mht-sticky-topbar__inner{
  min-height: var(--mht-sticky-topbar-height) !important;
  height: var(--mht-sticky-topbar-height) !important;
  box-sizing: border-box !important;
}

/* Mobile admin bar offset */
@media (max-width: 782px){
  .admin-bar .hotips-site .hotips-header .hotips-topbar.mht-sticky-topbar,
  .admin-bar .hotips-header .hotips-topbar.mht-sticky-topbar{
    top: 46px !important;
  }
}

@media (max-width: 760px){
  .hotips-header{
    padding-top: var(--mht-sticky-topbar-height-mobile) !important;
  }

  .hotips-site .hotips-header .hotips-topbar.mht-sticky-topbar,
  .hotips-header .hotips-topbar.mht-sticky-topbar{
    height: var(--mht-sticky-topbar-height-mobile) !important;
    min-height: var(--mht-sticky-topbar-height-mobile) !important;
  }

  /* Option 2: compact icon-only mobile navigation */
  .hotips-header .mht-sticky-topbar__inner{
    width: 100% !important;
    max-width: none !important;
    min-height: var(--mht-sticky-topbar-height-mobile) !important;
    height: var(--mht-sticky-topbar-height-mobile) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .hotips-header .mht-sticky-topbar__nav{
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
  }

  .hotips-header .hotips-topbar__menu,
  .hotips-header .mht-sticky-topbar__menu{
    width: 100%;
    height: 100%;
    gap: 0 !important;
    align-items: stretch;
  }

  .hotips-header .hotips-topbar__menu > li,
  .hotips-header .mht-sticky-topbar__menu > li{
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
  }

  .hotips-header .hotips-topbar__menu > li > a,
  .hotips-header .mht-sticky-topbar__menu > li > a{
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0 !important;
    gap: 0 !important;

    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    font-size: 0 !important;
    line-height: 1;

    transform: none !important;
  }

  /* Home gets a simple white icon on mobile only. */
  .hotips-header .hotips-topbar__menu > li.mht-menu-home > a::before,
  .hotips-header .mht-sticky-topbar__menu > li.mht-menu-home > a::before{
    content: "" !important;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: block;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 2.9 2.7 10.8a1 1 0 0 0 .65 1.76h1.1v7.2c0 .74.6 1.34 1.34 1.34h4.34v-5.7h3.74v5.7h4.34c.74 0 1.34-.6 1.34-1.34v-7.2h1.1a1 1 0 0 0 .65-1.76L12 2.9Z'/%3E%3C/svg%3E") !important;
    box-shadow: none;
  }

  /* Keep the existing real Money / Wellness image assets. */
  .hotips-header .hotips-topbar__menu > li.mht-menu-money > a::before,
  .hotips-header .hotips-topbar__menu > li.mht-menu-wellness > a::before,
  .hotips-header .mht-sticky-topbar__menu > li.mht-menu-money > a::before,
  .hotips-header .mht-sticky-topbar__menu > li.mht-menu-wellness > a::before{
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    background-size: 20px 20px;
  }

  /* Search stays gold but loses the round bubble on mobile. */
  .hotips-header .hotips-topbar__menu > li.mht-menu-search > a::before,
  .hotips-header .mht-sticky-topbar__menu > li.mht-menu-search > a::before{
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-size: 15px 15px;
    box-shadow: none !important;
  }

  /* Flat segmented states: no pills and no vertical jump. */
  .hotips-header .hotips-topbar__menu > li > a:hover,
  .hotips-header .hotips-topbar__menu > li > a:focus-visible,
  .hotips-header .mht-sticky-topbar__menu > li > a:hover,
  .hotips-header .mht-sticky-topbar__menu > li > a:focus-visible,
  .hotips-header .hotips-topbar__menu > li.current-menu-item > a,
  .hotips-header .hotips-topbar__menu > li.current_page_item > a,
  .hotips-header .hotips-topbar__menu > li.current-menu-ancestor > a,
  .hotips-header .hotips-topbar__menu > li.current_page_ancestor > a,
  .hotips-header .mht-sticky-topbar__menu > li.current-menu-item > a,
  .hotips-header .mht-sticky-topbar__menu > li.current_page_item > a,
  .hotips-header .mht-sticky-topbar__menu > li.current-menu-ancestor > a,
  .hotips-header .mht-sticky-topbar__menu > li.current_page_ancestor > a{
    border-radius: 0 !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .hotips-header .mht-sticky-topbar__dropdown{
    display: none !important;
  }

  /* Login is the fifth equal-width icon-only segment. */
  .hotips-header .mht-sticky-topbar__login{
    flex: 0 0 20%;
    width: auto !important;
    height: 100%;
    min-height: 100%;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  .hotips-header .mht-sticky-topbar__login:hover,
  .hotips-header .mht-sticky-topbar__login:focus-visible{
    border-radius: 0 !important;
    background: rgba(255,255,255,.10) !important;
  }

  .hotips-header .mht-sticky-topbar__login-text{
    display: none !important;
  }

  .hotips-header .mht-sticky-topbar__login-icon,
  .hotips-header .mht-sticky-topbar__login-icon svg{
    width: 18px;
    height: 18px;
  }
}