/* ===== VIBRANT Health — Universal Navbar (namespaced & resilient) ===== */
:root{
  --vhs-nav-h-desktop: 66px;
  --vhs-pad-x-desktop: 16px;
  --vhs-pad-x-mobile: 12px;

  /* ✅ Safe-area variable (for iPhones with notches) */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ===== WRAPPER ===== */
.vhs-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: #000 url("../images/navbar/navbackground.png") center top / cover no-repeat;
  background-color: #000; /* ✅ solid fallback under image */
  border-bottom: 2px solid #ccc;

  /* ✅ Fill notch area with background */
  padding-top: var(--safe-top);
  min-height: calc(var(--vhs-nav-h-desktop) + var(--safe-top));
}
@supports (padding: max(0px)) {
  .vhs-nav { padding-top: max(env(safe-area-inset-top), 0px); }
}

.vhs-nav::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(to right, var(--accent-color, #1dbd89), var(--secondary-color, #20e0a5));
  box-shadow: 0 0 10px rgba(51,156,255,.7);
  pointer-events: none;
}

/* ===== INNER BAR (DESKTOP) ===== */
.vhs-nav-inner{
  height: var(--vhs-nav-h-desktop);
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px var(--vhs-pad-x-desktop) 0; /* ✅ slight top padding for spacing, not safe-area */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}
.vhs-nav-inner > *{ min-width: 0; }

/* ===== BRAND (LEFT, DESKTOP) ===== */
.vhs-brand{
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 8px;
}
.vhs-brand a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
}
.vhs-logo-img{
  height: clamp(18px, 2.2vw, 26px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.vhs-logo-text{
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(.82rem, 1.05vw, 1.02rem);
}

/* ===== MENU (RIGHT, DESKTOP) ===== */
.vhs-menu{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(6px, 1.4vw, 16px);
  white-space: nowrap;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.vhs-menu::-webkit-scrollbar{ display: none; }

/* ===== LINKS ===== */
.vhs-nav a,
.vhs-nav a:link,
.vhs-nav a:visited,
.vhs-nav a:active{
  color: #fff !important;
  text-decoration: none !important;
}
.vhs-nav a:hover,
.vhs-nav a:focus-visible{
  color: var(--accent-color, #1dbd89) !important;
}
.vhs-menu a{
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  line-height: 1;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: clamp(.76rem, 1vw, .95rem);
  transition: color .2s ease;
  flex: 0 0 auto;
}
.vhs-menu a:focus-visible{
  outline: 2px solid var(--accent-color, #1dbd89);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== PREDICTABLE SIZING ===== */
.vhs-nav, .vhs-nav *{ box-sizing: border-box; }

/* ===== TABLET TIGHTEN ===== */
@media (max-width: 1200px){
  .vhs-menu{ gap: clamp(6px, 1vw, 12px); }
  .vhs-menu a{ font-size: clamp(.74rem, .9vw, .88rem); padding: 5px 7px; }
}

/* =================================================================== */
/* =======================  MOBILE LAYOUT  =========================== */
/* =================================================================== */
@media (max-width: 900px){
  .vhs-nav-inner{
    height: auto !important;
    padding: 10px var(--vhs-pad-x-mobile) 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* ===== BRAND ROW ===== */
  .vhs-brand{
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* ✅ Logo + text side-by-side */
  .vhs-brand a{
    display: inline-flex !important;
    flex-direction: row !important; /* side-by-side */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .vhs-brand .vhs-logo-img{
    display: block !important;
    height: clamp(18px, 6vw, 22px) !important;
    width: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  .vhs-brand .vhs-logo-text{
    display: block !important;
    font-size: clamp(.9rem, 4vw, 1.1rem) !important;
    line-height: 1.1 !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  /* ===== MENU ROW ===== */
  .vhs-menu{
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
    gap: clamp(6px, 2.4vw, 14px) !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .vhs-menu a{
    font-size: clamp(.8rem, 3.4vw, .95rem) !important;
    padding: 5px 8px !important;
  }
}

/* ===== EXTRA SMALL PHONES ===== */
@media (max-width: 480px){
  .vhs-nav-inner{ padding-top: 6px !important; row-gap: 6px !important; }
  .vhs-brand .vhs-logo-img{ height: 18px !important; }
  .vhs-brand .vhs-logo-text{ font-size: clamp(.82rem, 4.2vw, 1rem) !important; }
  .vhs-menu a{ font-size: .78rem !important; padding: 4px 6px !important; }
}

/* ===== ULTRA TINY SAFETY ===== */
@media (max-width: 360px){
  .vhs-brand .vhs-logo-text{ font-size: .8rem !important; }
  .vhs-menu a{ font-size: .74rem !important; }
}

/* === iPhone Notch-Safe Background Fix === */
.vhs-nav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--vhs-nav-h-desktop) + env(safe-area-inset-top, 0px));
  background: #000 url("../images/navbar/navbackground.png") center top / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* Make navbar background transparent so fixed image shows through */
.vhs-nav {
  background: transparent;
  backdrop-filter: none;
}

/* === Reliable Notch Background Layer === */
.notch-background-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(66px + env(safe-area-inset-top, 20px)); /* matches navbar + notch */
  padding-top: env(safe-area-inset-top, 0px);
  background: #000 url("../images/navbar/navbackground.png") center top / cover no-repeat;
  z-index: -10;
  pointer-events: none;
}

/* Ensure the main .vhs-nav stays transparent to reveal the background layer */
.vhs-nav {
  background: transparent !important;
}

/* ==== KEEP LOGO + "VIBRANT Health" ON ONE LINE (DESKTOP) ==== */
.vhs-brand{
  flex: 0 0 auto;            /* don't shrink */
  min-width: max-content;     /* reserve enough width for logo + text */
}
.vhs-brand a{
  display: flex;              /* ensure row layout */
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;          /* never wrap */
  white-space: nowrap;        /* keep text on one line */
}
.vhs-brand .vhs-logo-img,
.vhs-brand .vhs-logo-text{
  flex: 0 0 auto;             /* prevent shrinking of both pieces */
}

/* Make the MENU the flexible piece so the brand never gets squeezed */
.vhs-menu{
  flex: 1 1 0%;
  min-width: 0;               /* allow menu to shrink before wrapping */
  overflow-x: auto;           /* scroll instead of pushing brand to wrap */
  -webkit-overflow-scrolling: touch;
}

/* Optional: smooth out tiny font-load shifts that could cause initial wrap */
.vhs-logo-text{
  font-kerning: normal;
  text-rendering: optimizeLegibility;

  /* ===== MOBILE: brand stays side-by-side on row 1, menu on row 2 ===== */
@media (max-width: 900px){
  /* Two rows total for the navbar */
  .vhs-nav-inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* Row 1: BRAND centered */
  .vhs-brand{
    grid-row: 1 !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;   /* let the <a> be the layout container */
    text-align: center !important;
  }

  /* 🔒 Force logo + text to never stack */
  .vhs-brand a{
    display: grid !important;
    grid-auto-flow: column !important;     /* horizontal flow */
    grid-auto-columns: max-content !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px !important;
    white-space: nowrap !important;        /* keep text on one line */
  }

  .vhs-brand .vhs-logo-img{
    min-width: 18px !important;            /* guard against image load thrash */
    height: clamp(18px, 6vw, 22px) !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .vhs-brand .vhs-logo-text{
    line-height: 1.1 !important;
    font-size: clamp(.9rem, 4vw, 1.1rem) !important;
    white-space: nowrap !important;
  }

  /* Row 2: MENU centered; can wrap to 2 lines if needed, still row 2 */
  .vhs-menu{
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;            /* allow buttons to wrap within row 2 */
    gap: clamp(6px, 2.4vw, 14px) !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .vhs-menu a{
    font-size: clamp(.8rem, 3.4vw, .95rem) !important;
    padding: 5px 8px !important;
  }
}

/* Extra safety: never shrink or wrap the brand on any viewport */
.vhs-brand{ flex: 0 0 auto; min-width: max-content; }
.vhs-brand .vhs-logo-img, .vhs-brand .vhs-logo-text{ flex: 0 0 auto; }
}