/* Reset navbar link styles to prevent inheritance from style.css */
.navbar li {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Override base style.css with higher specificity */
nav.navbar {
  overflow: visible !important;
}

nav.navbar a {
  float: none !important;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 13px;
  gap: 6px;
  margin: 0;
  padding: 8px 20px;
  background-color: #16213e;
  border-bottom: 1px solid #0f3460;
  color: #888;
}

.breadcrumb a {
  text-decoration: none;
  color: #00d4ff;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: #f39c12;
}

/*------------------------------------------------------------------------------------------*/
/* Top Navigation Bar                                                                        */
/*------------------------------------------------------------------------------------------*/
.navbar {
  background: linear-gradient(135deg, #0a1628 0%, #0f3460 50%, #162850 100%);
  border-bottom: 3px solid #00d4ff;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  position: sticky;
  top: 0;
  z-index: 9999;
  overflow: visible !important;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.navbar > ul {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The containing block for the dropdowns is the whole row, NOT the hovered tab.
   Every dropdown in this navbar is a wide `.mega-menu` (there are no narrow
   per-tab dropdowns left), and a wide box anchored to its own tab runs off the
   screen: the /visualization tab sits 699px into the navbar, so its 1250px menu
   ended at 1949px — past the 1200px navbar and past the right edge of a 1920px
   display, with the last column unreachable. Anchoring to the row instead means
   `left: 0` on a mega menu is the navbar's left edge, so any menu up to 1200px
   wide is guaranteed to fit whatever tab opens it.
   If a narrow tab-aligned dropdown is ever added back, give IT `position:
   relative` on its own li rather than reverting this. */
.navbar > ul {
  position: relative;
}

.navbar > ul > li {
  position: static;
  /* `transform: none` is load-bearing, not cleanup. Further down, `.navbar *`
     sets `transform: translateZ(0)` for compositing, and ANY transform makes an
     element a containing block for absolutely-positioned descendants — which
     silently re-anchors each mega menu to its own tab and defeats the
     `position: static` above. Both declarations are needed together. */
  transform: none;
}

.navbar a {
  display: block;
  padding: 14px 10px; /* fits 13 top-level items inside the navbar (body max-width 1600px) after adding the Mushrooms menu */
  color: #e0e0e0;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Extra breathing room between the "My Healthcare" wordmark and the first icon. */
.navbar > ul > li:first-child {
  margin-right: 16px !important;
}

/* Selected / hovered top-level tab = "outlined ghost pill": every tab is a
   fully-rounded capsule inset from the bar; the highlight is a translucent cyan
   fill + a thin cyan ring (segmented-control style) instead of a solid fill. */
.navbar > ul > li > a {
  border-radius: 999px;
  margin: 6px 4px;
}

/* Hover state — faint fill + a soft cyan ring. */
.navbar > ul > li:hover > a {
  background-color: rgba(0, 212, 255, 0.08);
  color: #00d4ff;
  box-shadow: inset 0 0 0 1.5px rgba(0, 212, 255, 0.55);
}

/* Active/selected tab: the page's menu JS is the only thing that puts an inline
   style= on a top-level tab, so a[style] targets exactly the current section.
   Override its solid fill + underline with the outlined-pill look. */
.navbar > ul > li > a[style] {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00d4ff !important;
  box-shadow: inset 0 0 0 1.5px #00d4ff !important;
}

/* Middle-dot separators between top-level items removed — the icons read clearly on their own. */

/*------------------------------------------------------------------------------------------*/
/* Regular Dropdown Menu (for Toxins, Lab Tests)                                             */
/*------------------------------------------------------------------------------------------*/
.navbar .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #16213e;
  min-width: 240px;
  width: auto;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  border: 1px solid #0f3460;
  border-top: 3px solid #00d4ff;
  border-radius: 0 0 6px 6px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Show dropdown on hover */
.navbar > ul > li:hover > .dropdown {
  display: block !important;
}

.navbar .dropdown li {
  margin: 0;
  padding: 0;
  display: block;
  width: auto;
  position: relative;
}

.navbar .dropdown li a {
  padding: 9px 28px 9px 16px;
  font-size: 14px;
  text-align: left !important;
  white-space: nowrap;
  display: block;
  color: #c8d0da;
  position: relative;
  z-index: 1;
  font-weight: 400;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar .dropdown li a:hover {
  background-color: #1a2a4e;
  color: #00d4ff;
}

/*------------------------------------------------------------------------------------------*/
/* Mega Menu                                                                                 */
/*------------------------------------------------------------------------------------------*/
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #16213e;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  border: 1px solid #0f3460;
  border-top: 3px solid #00d4ff;
  border-radius: 0 0 8px 8px;
  padding: 20px 24px;
  animation: slideDown 0.2s ease-out;
  /* Safety net, not a layout tool. Every mega menu is sized to fit a laptop
     viewport (<= 25 rows per column, verified by web/megamenu-measure.py), so
     this should never engage. It exists because the failure mode when a column
     DOES outgrow the screen is silent and total: the dropdown is absolutely
     positioned, so it simply extends past the bottom of the window with no
     scrollbar and the last rows become unreachable — no hover, no click, no
     keyboard. That is what happened to /visualization when it grew to 137 items
     in 3 columns (a 64-row column, 1735px tall, 887px of it off-screen).
     `.navbar .dropdown` has carried the same guard for its plain dropdowns. */
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

/* Show mega menu on hover */
.navbar > ul > li:hover > .mega-menu {
  display: flex !important;
}

/* Widths below are not free choices — each is the narrowest width at which no
   label in that menu ellipsizes, measured by web/megamenu-measure.py in headless
   chromium. Re-run it after editing any label or adding a column; a menu that is
   too narrow truncates silently, because every row is nowrap + text-overflow.
   1200px is the hard ceiling (body and .navbar are both 1200px, and every mega
   menu is left:0, so a wider one would hang outside the navbar). */

.mega-menu-food {
  width: 1180px;
  left: 0;
}

.mega-menu-mushrooms {
  width: 840px;
  left: 0;
}

.mega-menu-vitamins {
  width: 780px;
  left: 0; /* -414 centered on tab — fits within navbar */
}

.mega-menu-minerals {
  width: 800px;
  left: 0; /* 3-col (Macro / Trace / Toxic): centered on tab, fits within navbar */
}

.mega-menu-amino-acids {
  width: 520px;
  left: 0;
}

/* widened for the fifth column (Southeast Asian): 1200px == navbar width,
   so 5 flex columns are 240px each and a long label like "Vietnamese
   Coriander" does not truncate. At the old 1000px they would be 200px. */
.mega-menu-herbs {
  width: 1200px;
  left: 0; /* trimmed from 1050 so the right edge stays inside the navbar */
}

.mega-menu-antioxidants {
  width: 1100px;
  left: 0;
}

.mega-menu-remedies {
  width: 1200px;
  left: 0; /* 5 columns; the "Mind, Body & Lifestyle" header is the widest row */
}

.mega-menu-diseases {
  width: 1200px;
  left: 0; /* 5 columns: the Diseases specialty list spans the first two. That leaves
              214px per row, so the two widest parasite labels dropped their Latin
              genus rather than ellipsize. */
}

.mega-menu-toxins {
  width: 880px;
  left: 0; /* "VOCs (Volatile Organic Compounds)" is the widest row */
}

.mega-menu-labtests {
  width: 880px;
  left: 0; /* "TSH (Thyroid-Stimulating Hormone)" is the widest row */
}

.mega-menu-doctors {
  width: 780px;
  left: 0; /* 4 columns since the Nobel wing landed (2026-08-15): practitioners,
              then Nobel Laureates spanning two columns (32 hubs, over the 25-row
              cap), then Signature Work. 780px is the MEASURED minimum: the
              isolated web/megamenu-measure.py run passes at 720px, but
              web/megamenu-verify-live.py — which also sees the navbar, style163
              and the theme skin — still clipped 'Oxygen-Sensing Trio' and the
              pre-existing 'Root Cause Protocol' there. Trust the LIVE verifier;
              this is the same two-labels-past-the-isolated-gate case the
              visualization menu hit. Re-measure with BOTH tools after editing
              any label here. Shortening the laureate column's view-all from
              "Every Nobel 1901-2025" to "Every Nobel" bought ~110px on its own. */
}

.mega-menu-visualization {
  width: 1200px;
  left: 0; /* 6 columns of the ~137 animations, packed row-aware by
              web/build-viz-index.py. It was 760px/3 columns while the menu still
              listed only 12 pages, and never grew with the gallery. */
}

/* Mega menu columns */
.mega-col {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid #2a2a4a;
}

.mega-col:first-child {
  padding-left: 0;
}

.mega-col:last-child {
  padding-right: 0;
  border-right: none;
}

/* Column header */
.mega-col-header {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00d4ff;
  padding: 0 0 8px 0;
  margin-bottom: 8px;
  border-bottom: 2px solid #0f3460;
  text-decoration: none !important;
  white-space: nowrap;
}

a.mega-col-header {
  color: #00d4ff !important;
  padding: 0 0 8px 0 !important;
  font-size: 13px !important;
}

a.mega-col-header:hover {
  color: #f39c12 !important;
  background-color: transparent !important;
}

/* Mega menu list */
.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-col ul li {
  margin: 0;
  padding: 0;
}

.mega-col ul li a {
  display: block;
  padding: 5px 8px;
  font-size: 13.5px;
  color: #c8d0da;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  font-weight: 400;
}

.mega-col ul li a:hover {
  background-color: #1a2a4e;
  color: #00d4ff;
}

/* Mega menu "View All" link at bottom of column */
.mega-col-viewall {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #2a2a4a;
  font-size: 12.5px;
  font-weight: 600;
  color: #00d4ff;
  text-decoration: none;
}

a.mega-col-viewall {
  color: #00d4ff !important;
  font-size: 12.5px !important;
  padding: 4px 8px !important;
}

a.mega-col-viewall:hover {
  color: #f39c12 !important;
  background-color: transparent !important;
}

/* Continuation column: a group whose list is too long for one column spans two,
   under a single heading. The second column gets this spacer instead of a repeated
   heading, so its first row lines up with the first column's first row and the
   heading's rule runs unbroken across both. It is `aria-hidden` in the markup, so
   a screen reader hears one "Diseases" heading, not an empty second one. */
.mega-col-header-cont {
  color: transparent;
  cursor: default;
  user-select: none;
}

/* Sub-section label within a mega column */
.mega-col-sublabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7c8f;
  padding: 8px 8px 2px 8px;
  font-weight: 600;
  cursor: default;
}

/*------------------------------------------------------------------------------------------*/
/* Animations                                                                                 */
/*------------------------------------------------------------------------------------------*/
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown {
  animation: slideDown 0.2s ease-out;
}

/* Override animation for centered mega menus (need to keep transform) */
.mega-menu-diseases,
.mega-menu-vitamins,
.mega-menu-minerals,
.mega-menu-amino-acids,
.mega-menu-herbs,
.mega-menu-antioxidants,
.mega-menu-remedies,
.mega-menu-food,
.mega-menu-mushrooms,
.mega-menu-toxins,
.mega-menu-labtests,
.mega-menu-doctors,
.mega-menu-visualization {
  animation: megaSlideDown 0.2s ease-out;
  left: 0;
}

@keyframes megaSlideDown {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*------------------------------------------------------------------------------------------*/
/* Scrollbar Styling                                                                          */
/*------------------------------------------------------------------------------------------*/
.dropdown::-webkit-scrollbar {
  width: 6px;
}

.dropdown::-webkit-scrollbar-track {
  background: #1a1a2e;
}

.dropdown::-webkit-scrollbar-thumb {
  background: #0f3460;
  border-radius: 4px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
  background: #2a2a4a;
}

/*------------------------------------------------------------------------------------------*/
/* Search Icon                                                                              */
/*------------------------------------------------------------------------------------------*/
/* Random page: a shuffle icon that floats to the right, just before Search.
   margin-left:auto on this (the first right-floated item) consumes the free
   space, so Random + Search sit together as an icon cluster on the far right. */
.nav-random {
  margin-left: auto !important;
}

/* Search then hugs Random instead of claiming its own separate gap. */
.nav-random + .nav-search {
  margin-left: 0 !important;
}

.nav-random a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 10px; /* match category-icon padding so inter-icon spacing is uniform */
  height: 100%;
  box-sizing: border-box;
  color: #e0e0e0;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.nav-random a:hover {
  opacity: 1;
  background-color: rgba(0, 212, 255, 0.1);
}

.nav-random svg {
  display: block;
  transition: transform 0.45s ease;
}

/* Playful affordance: the arrows spin a half-turn on hover. (The click
   navigates away too fast to animate, so the motion lives on hover.) */
.nav-random a:hover svg {
  transform: rotate(180deg);
}

.nav-search {
  margin-left: auto !important;
}

.nav-search a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 10px; /* match category-icon padding so inter-icon spacing is uniform */
  height: 100%;
  box-sizing: border-box;
  color: #e0e0e0;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.nav-search a:hover {
  opacity: 1;
  background-color: rgba(0, 212, 255, 0.1);
}

.nav-search svg {
  display: block;
}

/* Proper stacking context */
.navbar,
.navbar * {
  transform: translateZ(0);
}

/* Fix overflow */
body {
  overflow-x: visible !important;
}

/*------------------------------------------------------------------------------------------*/
/* Mobile Top Bar — hidden on desktop                                                        */
/*------------------------------------------------------------------------------------------*/
.mobile-nav {
  display: none;
}

/*------------------------------------------------------------------------------------------*/
/* Mobile Responsive Navigation                                                              */
/*------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  /* Hide desktop navbar, show mobile top bar */
  .navbar {
    display: none !important;
  }

  .mobile-nav {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a1628 0%, #0f3460 50%, #162850 100%);
    border-bottom: 3px solid #00d4ff;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .mobile-nav-brand {
    padding: 14px 18px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  .mobile-nav-brand:hover {
    color: #00d4ff;
  }

  .mobile-nav-right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.2s ease;
  }

  .mobile-nav-link:hover {
    background-color: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
  }

  /* Hamburger button */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 18px;
    transition: background-color 0.2s ease;
  }

  .hamburger:hover {
    background-color: rgba(0, 212, 255, 0.1);
  }

  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #e0e0e0;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .breadcrumb {
    font-size: 12px;
    padding: 6px 14px;
  }
}

/* ============================================================================
   MEGA-MENU COLUMN CONTAINMENT
   ----------------------------------------------------------------------------
   Guarantee that no menu label can ever leave its column, regardless of how long
   a future entry is. Naming discipline (Title Case, 20 chars, no parenthetical
   glosses) keeps labels short, but discipline is not a guarantee — one long
   entry added later would spill into the neighbouring column and scramble the
   layout, which is exactly what happened with "Artemisia annua (Sweet
   Wormwood)".

   Truncate with an ellipsis rather than wrapping. A wrapped label becomes a
   two-line row, which breaks the vertical rhythm and leaves the columns visibly
   misaligned; an ellipsis keeps every row exactly one line high, so the columns
   stay in lockstep. Losing the tail of a name costs nothing here — the full name
   is on the page the link goes to, and in the category landing-page listing.

   `min-width: 0` on the flex item is required: a flex child's default
   `min-width: auto` refuses to shrink below its content, so without it the
   overflow rules never engage and the column simply grows instead. It is already
   set on .mega-col above; repeated here as the reason this works.
   ========================================================================== */
.mega-col{ min-width: 0; }
.mega-col ul li a{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-col-sublabel,
.mega-col-header,
.mega-col-viewall{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*------------------------------------------------------------------------------------------*/
/* Breadcrumb crumbs + Plain Text pill (built by /static/site-nav<N>.js)                      */
/*                                                                                            */
/* Shape is nitra.net's breadcrumb (its style77.css:922): uppercase, tracked, a middle-dot    */
/* separator, every crumb on ONE colour, and a link marked by a 35% border-bottom rather than */
/* an underline — so the row reads as one quiet line and the current page is the crumb with   */
/* no rule under it.                                                                          */
/*                                                                                            */
/* LEGIBILITY (owner 2026-09-01: "older people like me still will trouble to see it").        */
/* nitra's .68rem at .82 opacity in a warm off-white was dimmer than the body text right      */
/* below it. Three changes, all deliberate departures from the nitra values:                  */
/*   - full opacity, not .82;                                                                 */
/*   - pure #fff instead of var(--text) (#e3dccf on warm-espresso is a warm grey, not white); */
/*   - .78rem instead of .68rem.                                                              */
/* On warm-espresso that takes the crumbs from roughly 9:1 to 19.8:1 against the bar.         */
/*                                                                                            */
/* WHITE IS NOT SAFE ON EVERY THEME. Four of the 15 have near-white surfaces, where #fff      */
/* measures 1.0-1.1:1 — invisible. Those four are listed explicitly below and take near-black */
/* instead (20:1). The other 11 plus the unthemed :root default are all under 0.02 luminance, */
/* so white is correct for them. Classified by computing WCAG contrast against each theme's   */
/* own --surface; if a 16th theme is added, measure it rather than guessing.                  */
/*------------------------------------------------------------------------------------------*/

.breadcrumb,
html[data-theme] .breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  gap: 0.5rem 1.15rem;
}

/* The four light themes — white fails here, near-black gives 20:1. */
html[data-theme="soft-linen"]    .breadcrumb,
html[data-theme="warm-sand"]     .breadcrumb,
html[data-theme="calm-sky"]      .breadcrumb,
html[data-theme="sage-wellness"] .breadcrumb {
  color: #141210;
}

.breadcrumb a:not(.plain-text-btn),
html[data-theme] .breadcrumb a:not(.plain-text-btn) {
  color: inherit;
  opacity: 1;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.45);
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.breadcrumb a:not(.plain-text-btn):hover,
html[data-theme] .breadcrumb a:not(.plain-text-btn):hover {
  color: inherit;
  text-decoration: none;
  border-bottom-color: currentColor;
}

.crumb-current { font-weight: 500; }

/* Bigger dots (owner 2026-09-01). A round bullet, not nitra's middle dot: at
   this size the middle-dot glyph is only a couple of pixels across however
   far you scale its font-size, because the dot occupies a small part of its
   em box. Rendered side by side, the bullet is the one that actually reads.
   Sized in em so it tracks the crumb text, with line-height:0 so the larger
   glyph cannot grow the bar's height. */
.crumb-sep {
  font-size: 1.45em;
  line-height: 0;
  vertical-align: -0.02em;
  opacity: 0.85;
  user-select: none;
}

/* The pill takes the crumb colour too, so the row is one family — as the
   HISTORY / ON MAP pills are on nitra. currentColor therefore resolves to the
   crumb colour, and the outline can never contrast worse than the crumbs. */
.breadcrumb a.plain-text-btn,
html[data-theme] .breadcrumb a.plain-text-btn {
  color: inherit;
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity .15s ease, background-color .15s ease;
}

.breadcrumb a.plain-text-btn:hover,
.breadcrumb a.plain-text-btn:focus-visible,
html[data-theme] .breadcrumb a.plain-text-btn:hover {
  opacity: 1;
  text-decoration: none;
  background: rgba(128, 128, 128, 0.18);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

@media (max-width: 700px) {
  .breadcrumb, html[data-theme] .breadcrumb { letter-spacing: 0.12em; gap: 0.35rem 0.7rem; }
  .breadcrumb a.plain-text-btn { padding: 2px 9px; letter-spacing: 0.08em; }
}