/* UGO — the navbar of every page (home, About, Contact, Terms, the product pages, track-order).
 *
 * The reference is the navbar of UGO | Link, as built by js/components.js and styled by css/styles.css (.navbar). The Tailwind pages (home, About,
 * Contact, Terms) do not load that stylesheet, so this file carries the same rules for them; the product pages load it too, after styles.css, so
 * both families are governed by the one definition below and cannot drift apart. The markup is the same on both (tools/ugo-cm-nav.js writes it
 * for the static pages and tools/check-ugo-nav.js proves it equals what components.js writes).
 *
 * Measured on the reference: a 64px bar + 1px border (65px), 56px up to 768px wide and 52px up to 480px; the g logo 36 / 32 / 28px less 20% = 29 / 26 / 22px (owner's request, 2026-10-19); links 14px,
 * weight 600, padding 6px 11px, 2px apart, in the muted tone, turning terracotta with a faint tint when hovered or current; a "The UGO family"
 * dropdown under Products; the theme switch at the right. Two deliberate differences from the reference, both fixes:
 *   - its dropdown card was a fixed pale colour in BOTH themes with the theme's muted text on it (grey on cream, about 3:1, in dark mode): here
 *     the card follows the theme;
 *   - its links were hidden up to 900px wide while the menu button only exists up to 768px, leaving 769-900px with no navigation: here the links
 *     show from 769px up, the same breakpoint as the floating menu button.
 * Specificity is `html body .navbar ...` so it wins over css/styles.css on the product pages without !important.
 */
html {
  --un-bg: rgba(240, 237, 232, .94); --un-text: #3a3530; --un-muted: #7a7168; --un-primary: #c0533a; --un-tint: rgba(192, 83, 58, .06);
  --un-pop-bg: rgba(248, 245, 241, .97); --un-pop-line: rgba(255, 255, 255, .92); --un-pop-hover: #dedad2; --un-pop-hover-text: #3a3530;
  --un-pop-shadow: 0 20px 60px rgba(100, 90, 76, .28), 0 4px 20px rgba(100, 90, 76, .12);
  --un-bar-shadow: 8px 8px 24px rgba(155, 145, 128, .38), -5px -5px 16px rgba(255, 255, 255, .92);
}
html[data-theme="dark"] {
  --un-bg: rgba(22, 18, 14, .96); --un-text: #e8e2da; --un-muted: #9a8e84; --un-primary: #d4664a; --un-tint: rgba(212, 102, 74, .08);
  --un-pop-bg: rgba(30, 26, 22, .98); --un-pop-line: rgba(255, 255, 255, .09); --un-pop-hover: #2e261e; --un-pop-hover-text: #e8e2da;
  --un-pop-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 4px 20px rgba(0, 0, 0, .4);
  --un-bar-shadow: 6px 6px 20px rgba(0, 0, 0, .5), -4px -4px 14px rgba(255, 255, 255, .04);
}

html body .navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999; max-width: 100vw; height: auto; margin: 0; padding: 0;
  background: var(--un-bg);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(200, 190, 175, .35);
  box-shadow: none; transition: background .4s ease, box-shadow .28s ease;
  /* the same type on every page, whatever the page's own body font is */
  font-family: 'Nunito Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: normal; text-align: left; color: var(--un-text);
}
html body .navbar.scrolled { box-shadow: var(--un-bar-shadow); }
html body .navbar, html body .navbar *, html body .navbar *::before, html body .navbar *::after { box-sizing: border-box; }
html body .navbar a { text-decoration: none; }

html body .navbar .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 6px; height: 64px; }
html body .navbar .nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 8px; color: var(--un-text); }
html body .navbar .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
html body .navbar .nav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

html body .navbar .nav-link {
  padding: 6px 11px; font-size: .875rem; font-weight: 600; color: var(--un-muted); border-radius: 10px; white-space: nowrap; text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit; line-height: 1; display: flex; align-items: center; gap: 5px;
  transition: color .28s cubic-bezier(.4, 0, .2, 1), background-color .28s cubic-bezier(.4, 0, .2, 1);
}
html body .navbar .nav-link:hover, html body .navbar .nav-link.active { color: var(--un-primary); background: var(--un-tint); }
html body .navbar .nav-link:focus-visible, html body .navbar .nav-logo:focus-visible, html body .navbar .dropdown-menu a:focus-visible { outline: 2px solid var(--un-primary); outline-offset: 2px; }
html body .navbar .nav-caret { font-size: .65rem; opacity: .6; transition: transform .2s; }
html body .navbar .nav-dropdown.open .nav-caret { transform: rotate(180deg); }

/* the dropdown */
html body .navbar .nav-dropdown { position: relative; }
html body .navbar .dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--un-pop-bg); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--un-pop-line); border-radius: 22px; min-width: 200px; padding: 6px; box-shadow: var(--un-pop-shadow);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 200;
}
html body .navbar .dropdown-menu::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px;
  background: var(--un-pop-bg); border-left: 1px solid var(--un-pop-line); border-top: 1px solid var(--un-pop-line);
}
html body .navbar .nav-dropdown:hover .dropdown-menu, html body .navbar .nav-dropdown.open .dropdown-menu { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
html body .navbar .dropdown-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--un-muted); padding: 4px 10px 6px; opacity: .7; }
html body .navbar .dropdown-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: .855rem; font-weight: 500; color: var(--un-muted); border-radius: 10px;
  white-space: nowrap; transition: background-color .28s cubic-bezier(.4, 0, .2, 1), color .28s cubic-bezier(.4, 0, .2, 1);
}
html body .navbar .dropdown-menu a i { width: 16px; text-align: center; font-size: .82rem; color: var(--un-primary); opacity: .8; }
html body .navbar .dropdown-menu a:hover { background: var(--un-pop-hover); color: var(--un-pop-hover-text); }
html body .navbar .dropdown-menu a.active { color: var(--un-primary); background: var(--un-tint); }
html body .navbar .dropdown-menu a:hover i { opacity: 1; }

/* 769-900px: the links show (the reference hid them here, with no menu button yet) */
@media (min-width: 769px) and (max-width: 900px) {
  html body .navbar .nav-link.nav-hide-mobile { display: flex !important; }
  html body .navbar .nav-dropdown.nav-hide-mobile { display: block !important; }
}

/* phones: 56px, then 52px; no links (the floating menu button is the navigation), logo 26 / 22px (css/ugo-g.css) */
@media (max-width: 768px) {
  html body .navbar { height: 56px; padding: 0 12px 0 20px; }   /* the logo sits 8px further in from the left edge than the switch does from the right (owner's request, 2026-10-19) */
  html body .navbar .nav-inner { padding: 0; height: 56px; gap: 4px; }
  html body .navbar .nav-links { display: none !important; }
  html body .navbar .nav-hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  html body .navbar { height: 52px; }
  html body .navbar .nav-inner { height: 52px; }
}
@media print { html body .navbar { display: none; } }