/* =============================================================
   URR NAV — Navigation Styles
   Covers: fixed navbar, large-screen dropdowns, mobile
           expansion panel, mobile accordion sub-panels,
           chapters sidenav.

   Companion files:
     urr-wcag.css     — global WCAG/accessibility styles
     urr-nav.js       — navigation controller (all interactivity)

   Breakpoints:
     Large  (>=993px): Home | Reg Prep | CME | Product Reviews | About Us ... Chapters
     Medium (601-992px): Home ... Hamburger | Chapters
     Small  (<=600px):   Home ... Hamburger | Chapters
============================================================= */

/* ── NAVBAR CONTAINER ────────────────────────────────────── */
#urrNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #572b7a !important; /* overrides W3.CSS theme colour */
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* Single-row flex bar — never wraps, always exactly 1 row tall */
#urrNavBar {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: 46px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ── NAV ITEMS ──────────────────────────────────────────── */
#urrNavBar > li { position: relative; }

/* Right-side group (Hamburger + Chapters) pushed to far right */
#urrNavBar > li.urr-right-group {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}

/* Large-screen-only items hidden on small/medium */
@media (max-width: 992px) {
  #urrNavBar > li.urr-large-only { display: none; }
}

/* Hamburger hidden on large screens.
   display:none only — visibility:hidden causes resize state bugs. */
@media (min-width: 993px) {
  #urrNavBar button.urr-small-only {
    display: none !important;
    pointer-events: none;
  }
}
@media (max-width: 992px) {
  #urrNavBar button.urr-small-only {
    display: flex !important;
    pointer-events: auto;
  }
}

/* Explicit flex order ensures Hamburger always appears before
   Chapters visually, regardless of browser flex resolution.    */
#urrHamburger   { order: 1; }
#urrChaptersBtn { order: 2; }

/* ── NAV LINKS & BUTTONS ────────────────────────────────── */
#urrNavBar a.urr-nav-link,
#urrNavBar button.urr-nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
#urrNavBar a.urr-nav-link:hover,
#urrNavBar button.urr-nav-link:hover,
#urrNavBar a.urr-nav-link:focus,
#urrNavBar button.urr-nav-link:focus {
  background: rgba(255,255,255,.18);
  outline: none;
}
/* White focus ring on purple background — WCAG 2.4.7 */
#urrNavBar a.urr-nav-link:focus-visible,
#urrNavBar button.urr-nav-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ── LARGE-SCREEN DROPDOWN PANELS ──────────────────────── */
.urr-dropdown { position: relative; }

.urr-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
  z-index: 200;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
/* Right-align panels near the right edge to prevent viewport overflow */
.urr-dropdown.urr-align-right .urr-dropdown-panel { left: auto; right: 0; }

.urr-dropdown-panel[aria-hidden="false"] { display: block; }

.urr-dropdown-panel a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: .95rem;
  white-space: nowrap;
}
.urr-dropdown-panel a:hover,
.urr-dropdown-panel a:focus {
  background: #f0f0f0;
  outline: none;
}
.urr-dropdown-panel a:focus-visible {
  outline: 2px solid #572b7a;
  outline-offset: -2px;
}

/* ── MOBILE EXPANSION PANEL (small/medium) ──────────────
   Toggled by Hamburger button. Fixed below navbar, scrollable
   so all items are reachable in landscape orientation.         */
#urrMobilePanel {
  display: none;
  position: fixed;
  top: 46px; left: 0; right: 0;
  max-height: calc(100vh - 46px); /* caps at remaining viewport height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  background: #572b7a;
  z-index: 99;
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
#urrMobilePanel.urr-open { display: block; }

#urrMobilePanel ul { list-style: none; padding: 0; margin: 0; }

#urrMobilePanel a,
#urrMobilePanel button.urr-mob-trigger {
  display: block;
  width: 100%;
  padding: 12px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
#urrMobilePanel a:hover,
#urrMobilePanel a:focus,
#urrMobilePanel button.urr-mob-trigger:hover,
#urrMobilePanel button.urr-mob-trigger:focus {
  background: rgba(255,255,255,.18);
  outline: none;
}
/* White focus ring — mobile panel is on purple background */
#urrMobilePanel a:focus-visible,
#urrMobilePanel button.urr-mob-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Mobile sub-panels (accordion) — match large-screen dropdown:
   white background, dark text, light grey hover.               */
.urr-mob-sub {
  display: none;
  background: #fff;
  border-bottom: 2px solid #ddd;
}
.urr-mob-sub.urr-open { display: block; }
.urr-mob-sub a {
  padding-left: 36px;
  font-size: .92rem;
  color: #333 !important;
  border-bottom: 1px solid #eee;
}
.urr-mob-sub a:hover,
.urr-mob-sub a:focus {
  background: #f0f0f0 !important;
  color: #333 !important;
  outline: none;
}
.urr-mob-sub a:focus-visible {
  outline: 2px solid #572b7a;
  outline-offset: -2px;
}

/* Dropdown caret icon */
.urr-caret { margin-left: 6px; font-size: .75em; }