/* ============================================================
   BPS Shared Navbar — dropdown menus + responsive behaviour
   Layered on top of common.css + design-system.css.
   Provides: hover dropdowns (desktop), accordion drawer (mobile),
   active-state highlighting, smooth + consistent animations.
   Palette/token references use var() fallbacks so this file is
   self-sufficient even on pages that skip design-system.css.
   ============================================================ */

:root{
  --nav-drop-bg:#ffffff;
  --nav-drop-ink:#1B2230;
  --nav-drop-ink-soft:#525E72;
  --nav-drop-line:#E6EAF1;
  --nav-mobile-bp:860px;            /* hamburger appears at/below this */
}

/* ---- top-level list: let it own its own layout at every width ---- */
.navbar__links{
  position:relative;
}
.navbar__links .nav-item{
  position:relative;
  display:flex;
  align-items:center;
  list-style:none;
}

/* parent link + caret sit on one baseline */
.navbar__links .nav-item > a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

/* caret glyph */
.nav-caret{
  width:11px;height:11px;flex-shrink:0;
  fill:currentColor;opacity:.8;
  transition:transform .25s ease;
}
.navbar__links .nav-item.has-dropdown:hover > a .nav-caret,
.navbar__links .nav-item.has-dropdown:focus-within > a .nav-caret{
  transform:rotate(180deg);
}

/* ============================================================
   DESKTOP DROPDOWN PANEL
   ============================================================ */
.nav-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:212px;
  margin-top:14px;
  padding:8px;
  list-style:none;
  background:var(--nav-drop-bg);
  border:1px solid var(--nav-drop-line);
  border-radius:var(--ds-radius-sm,12px);
  box-shadow:0 8px 28px rgba(30,58,138,.16), 0 2px 6px rgba(27,34,48,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:120;
}
/* invisible hover-bridge so the gap between link and panel keeps it open */
.nav-dropdown::before{
  content:"";
  position:absolute;
  top:-14px;left:0;right:0;height:14px;
}

.navbar__links .nav-item.has-dropdown:hover > .nav-dropdown,
.navbar__links .nav-item.has-dropdown:focus-within > .nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* dropdown items */
.nav-dropdown li{ list-style:none; }
.nav-dropdown a{
  display:block;
  padding:10px 14px;
  margin-top:2px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.2;
  color:var(--nav-drop-ink) !important;
  text-decoration:none;
  border-radius:8px;
  white-space:nowrap;
  transition:background .16s ease, color .16s ease, padding-left .16s ease;
}
.nav-dropdown a::after{ display:none !important; }   /* kill the gold underline from common.css */
.nav-dropdown a:first-child{ margin-top:6px; }        /* small breathing room at the top */

/* Mobile-only accordion toggle — hidden on web (shown in the mobile media query) */
.nav-subtoggle{ display:none; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{
  background:var(--royal-wash,#EEF1FA);
  color:var(--royal-deep,#15306E) !important;
  padding-left:18px;
}
.nav-dropdown a.active{
  background:var(--royal-wash,#EEF1FA);
  color:var(--royal-deep,#15306E) !important;
  font-weight:600;
}

/* ============================================================
   HAMBURGER TOGGLE (hidden on desktop)
   ============================================================ */
.navbar__toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border-radius:var(--ds-radius-sm,10px);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  cursor:pointer;
  flex-shrink:0;
  transition:background .18s ease, border-color .18s ease;
}
.navbar__toggle:hover{ background:rgba(255,255,255,.22); border-color:var(--gold,#C0922E); }
.navbar__toggle .bar{
  position:relative;
  width:20px;height:2px;border-radius:2px;background:#fff;
  transition:transform .28s ease, opacity .2s ease;
}
.navbar__toggle .bar::before,
.navbar__toggle .bar::after{
  content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:#fff;
  transition:transform .28s ease, top .28s ease, bottom .28s ease;
}
.navbar__toggle .bar::before{ top:-6px; }
.navbar__toggle .bar::after{ bottom:-6px; }
/* animate to X when open */
body.nav-open .navbar__toggle .bar{ background:transparent; }
body.nav-open .navbar__toggle .bar::before{ top:0; transform:rotate(45deg); }
body.nav-open .navbar__toggle .bar::after{ bottom:0; transform:rotate(-45deg); }

/* ============================================================
   RESPONSIVE — tablet & mobile drawer
   ============================================================ */
@media (max-width:860px){
  .navbar__toggle{ display:flex; }

  /* turn the link list into a slide-down drawer.
     Override common.css `.navbar__links{display:none}` at 640px. */
  .navbar__links{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:var(--nav-height,64px);
    left:0;right:0;
    max-height:0;
    overflow:hidden auto;
    padding:0 18px;
    background:linear-gradient(180deg, var(--royal-deep,#15306E), var(--royal-press,#102554));
    border-bottom:0 solid var(--gold,#C0922E);
    box-shadow:0 18px 40px rgba(16,37,84,.35);
    opacity:0;
    visibility:hidden;
    transition:max-height .32s ease, opacity .25s ease, padding .25s ease,
               border-bottom-width .25s ease, visibility .32s;
    z-index:110;
  }
  body.nav-open .navbar__links{
    max-height:calc(100vh - var(--nav-height,64px));
    opacity:1;
    visibility:visible;
    padding:12px 18px 22px;
    border-bottom-width:3px;
  }

  .navbar__links .nav-item{
    flex-direction:column;
    align-items:stretch;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .navbar__links .nav-item:last-child{ border-bottom:0; }

  /* parent row: link grows, caret becomes a tap target */
  .navbar__links .nav-item > a{
    flex:1;
    padding:15px 4px;
    font-size:15px;
    justify-content:space-between;
  }
  .navbar__links .nav-item.has-dropdown{ position:relative; }
  .navbar__links .nav-item.has-dropdown > a .nav-caret{ display:none; }

  /* dedicated mobile caret toggle (added by JS) */
  .nav-subtoggle{
    position:absolute;
    top:0;right:0;
    width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;cursor:pointer;
  }
  .nav-subtoggle svg{
    width:14px;height:14px;fill:rgba(255,255,255,.85);
    transition:transform .25s ease;
  }
  .navbar__links .nav-item.open > .nav-subtoggle svg{ transform:rotate(180deg); }

  /* mobile submenu = accordion */
  .nav-dropdown{
    position:static;
    min-width:0;margin:0 0 8px;padding:0 0 0 10px;
    background:transparent;border:0;box-shadow:none;
    opacity:1;visibility:visible;pointer-events:auto;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  /* beat the desktop hover/focus rule (higher specificity) so the
     panel is never shifted off-screen by translateX(-50%) on mobile */
  .nav-dropdown,
  .navbar__links .nav-item.has-dropdown:hover > .nav-dropdown,
  .navbar__links .nav-item.has-dropdown:focus-within > .nav-dropdown{
    transform:none !important;
    left:auto !important;
  }
  .nav-dropdown::after,
  .nav-dropdown::before{ display:none; }
  .navbar__links .nav-item.open > .nav-dropdown{
    max-height:520px;
  }
  .nav-dropdown a{
    color:rgba(255,255,255,.82) !important;
    padding:11px 12px;border-radius:8px;
    border-left:2px solid rgba(255,255,255,.18);
  }
  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible,
  .nav-dropdown a.active{
    background:rgba(255,255,255,.10);
    color:#fff !important;
    padding-left:14px;
    border-left-color:var(--gold,#C0922E);
  }

  /* the active top-level link gets a gold left rule on mobile */
  .navbar__links .nav-item > a.active{
    color:#fff !important;
    box-shadow:inset 3px 0 0 var(--gold,#C0922E);
    padding-left:12px;
  }
}

@media (max-width:860px){
  /* keep the brand + controls + hamburger on one line */
  .navbar__right{ gap:14px; }
}

@media (max-width:640px){
  .navbar{ padding:0 16px !important; }
  .navbar__right{ gap:10px !important; }
  /* the long clinic name must not crowd out the hamburger */
  .navbar__title{
    display:inline-block;
    max-width:130px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    vertical-align:middle;
  }
  .navbar__cta{ padding:8px 14px !important; }
}

@media (max-width:400px){
  .navbar__title{ display:none; }   /* logo alone below 400px */
}

@media (prefers-reduced-motion: reduce){
  .nav-caret,.nav-dropdown,.navbar__links,.navbar__toggle .bar,
  .navbar__toggle .bar::before,.navbar__toggle .bar::after,.nav-subtoggle svg{
    transition:none !important;
  }
}

/* ============================================================
   NAV MENU ICONS (top-level items + dropdown items)
   ============================================================ */
.nav-ic{
  width:16px; height:16px; flex-shrink:0;
  fill:currentColor; opacity:.85;
}
.navbar__links .nav-item > a .nav-ic{ opacity:.9; }
/* dropdown rows: align icon + label */
.nav-dropdown a{ display:flex; align-items:center; gap:9px; }
.nav-dropdown a .nav-ic{ width:15px; height:15px; opacity:.75; }
.nav-dropdown a:hover .nav-ic,
.nav-dropdown a.active .nav-ic{ opacity:1; }

/* ============================================================
   REAL-TIME NOTIFICATION BADGE (count bubble on the bell)
   High specificity + !important to override common.css's
   `.navbar__notif-badge{display:none !important}` and any inline
   display:none, but ONLY when the .show class is present (count > 0).
   ============================================================ */
.navbar .navbar__notif .navbar__notif-badge.show{
  display:flex !important;
  position:absolute;
  top:0; right:0;
  min-width:17px; height:17px;
  padding:0 4px;
  align-items:center; justify-content:center;
  background:#E11D48; color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  border-radius:9px;
  box-shadow:0 0 0 2px var(--white, #fff);
  pointer-events:none;
  animation:notifBadgePop .25s ease-out;
}
@keyframes notifBadgePop{
  0%{ transform:scale(0); }
  70%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}