/* Unified primary navigation — used on every page in the repo.
   Fonts inherit from the page body so the nav adapts to each page's type system.
   Hover bridge keeps the dropdown open while the cursor crosses the gap.
   Mobile (≤760px): full-screen sheet with accordion sections + scroll lock. */

.topnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 6, 8, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(253, 246, 232, 0.10);
}
.topnav__inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 24px;
}
.topnav__brand {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: 0; flex-shrink: 0;
}
.topnav__logo { height: 40px; width: auto; display: block; }
.topnav__links {
  list-style: none; padding: 0; margin: 0 auto;
  display: flex; gap: 36px; align-items: center;
}

.topnav__item { position: relative; }
.topnav__item::before {
  content: '';
  position: absolute;
  bottom: -14px; left: 0; right: 0; height: 14px;
}

.topnav__item > a,
.topnav__trigger {
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  color: rgba(253, 246, 232, 0.85);
  text-decoration: none;
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; line-height: 1.3; letter-spacing: 0;
  transition: color 0.15s ease;
}
.topnav__item > a:hover,
.topnav__trigger:hover,
.topnav__item.is-open .topnav__trigger,
.topnav__item:hover .topnav__trigger {
  color: #fdf6e8;
}
.topnav__caret {
  font-size: 9px; display: inline-block;
  position: relative; top: 1px; opacity: 0.7;
  transition: transform 0.18s ease;
}
.topnav__item.is-open .topnav__caret,
.topnav__item:hover .topnav__caret {
  transform: rotate(180deg); opacity: 1;
}

.topnav__dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  margin-top: 14px;
  list-style: none; padding: 6px 0;
  background: rgba(20, 16, 22, 0.97);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(253, 246, 232, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 10;
}
.topnav__item:hover .topnav__dropdown,
.topnav__item.is-open .topnav__dropdown,
.topnav__item:focus-within .topnav__dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.topnav__dropdown li { list-style: none; margin: 0; }
.topnav__dropdown a {
  display: block; padding: 8px 16px;
  font-family: inherit;
  font-size: 13.5px; font-weight: 400;
  color: rgba(253, 246, 232, 0.85);
  text-decoration: none; letter-spacing: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.topnav__dropdown a:hover {
  background: rgba(95, 184, 74, 0.14);
  color: #fdf6e8;
}
.topnav__dropdown-divider {
  border-top: 1px solid rgba(253, 246, 232, 0.10);
  margin-top: 4px; padding-top: 4px;
}
.topnav__dropdown-divider a { color: #5fb84a; font-weight: 500; }
.topnav__dropdown-divider a:hover { color: #7dc56b; }

.topnav__cta {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #2ea043 0%, #1f7a32 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
  padding: 10px 18px; border-radius: 8px;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 3px 12px rgba(31, 122, 50, 0.38);
  flex-shrink: 0;
}
.topnav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(31, 122, 50, 0.50);
  color: #ffffff;
}

/* ===== HAMBURGER + MOBILE SHEET ===== */

.topnav__burger {
  display: none;
  background: none; border: none; padding: 8px;
  cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  color: rgba(253, 246, 232, 0.92);
  margin-left: auto;
}
.topnav__burger-bar {
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.topnav__burger.is-open .topnav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topnav__burger.is-open .topnav__burger-bar:nth-child(2) {
  opacity: 0;
}
.topnav__burger.is-open .topnav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.topnav__sheet { display: none; }

@media (max-width: 760px) {
  .topnav__inner { padding: 6px 16px; gap: 14px; }
  .topnav__links { display: none; }
  .topnav__cta { display: none; }
  .topnav__burger { display: flex; }

  .topnav__sheet {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    /* explicit height — ancestor backdrop-filter creates a containing block
       for fixed children, so `bottom: 0` would resolve against the nav,
       not the viewport. Use dvh on browsers that support it for mobile
       URL-bar shifts. */
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    background: rgba(20, 16, 22, 0.98);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.18s ease;
    z-index: 200;
  }
  .topnav__sheet.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .topnav__sheet-inner {
    padding: 12px 20px 80px;
    max-width: 640px;
    margin: 0 auto;
  }
  .topnav__sheet-nav {
    list-style: none; padding: 0; margin: 0 0 28px;
  }
  .topnav__sheet-nav > li {
    border-bottom: 1px solid rgba(253, 246, 232, 0.08);
  }
  .topnav__sheet-link,
  .topnav__sheet-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    background: none; border: none;
    font-family: inherit;
    font-size: 17px; font-weight: 500;
    color: rgba(253, 246, 232, 0.95);
    text-decoration: none;
    cursor: pointer; text-align: left;
    letter-spacing: 0;
  }
  .topnav__sheet-trigger::after {
    content: '+';
    font-size: 22px; line-height: 1;
    color: rgba(253, 246, 232, 0.55);
    transition: transform 0.2s ease;
  }
  .topnav__sheet-section.is-open .topnav__sheet-trigger::after {
    transform: rotate(45deg);
    color: rgba(253, 246, 232, 0.9);
  }
  .topnav__sheet-sub {
    list-style: none; padding: 0; margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, padding 0.2s ease;
  }
  .topnav__sheet-section.is-open .topnav__sheet-sub {
    max-height: 800px;
    padding-bottom: 12px;
  }
  .topnav__sheet-sub li {
    margin: 0;
  }
  .topnav__sheet-sub a {
    display: block;
    padding: 10px 0 10px 14px;
    font-family: inherit;
    font-size: 15.5px; font-weight: 400;
    color: rgba(253, 246, 232, 0.78);
    text-decoration: none;
    transition: color 0.12s ease;
  }
  .topnav__sheet-sub a:hover,
  .topnav__sheet-sub a:active {
    color: #fdf6e8;
  }
  .topnav__sheet-cta {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #2ea043 0%, #1f7a32 100%);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    padding: 16px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(31, 122, 50, 0.40);
  }
}

body.topnav-open {
  overflow: hidden;
  touch-action: none;
}

/* ===== LIGHT VARIANT — scoped to .odoo-page (the white-bg product pages) ===== */
.odoo-page .topnav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(20, 16, 22, 0.08);
}
.odoo-page .topnav__item > a,
.odoo-page .topnav__trigger {
  color: rgba(20, 16, 22, 0.72);
}
.odoo-page .topnav__item > a:hover,
.odoo-page .topnav__trigger:hover,
.odoo-page .topnav__item.is-open .topnav__trigger,
.odoo-page .topnav__item:hover .topnav__trigger {
  color: #141016;
}
.odoo-page .topnav__dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(20, 16, 22, 0.10);
  box-shadow: 0 10px 30px rgba(20, 16, 22, 0.12);
}
.odoo-page .topnav__dropdown a {
  color: rgba(20, 16, 22, 0.78);
}
.odoo-page .topnav__dropdown a:hover {
  background: rgba(95, 184, 74, 0.10);
  color: #141016;
}
.odoo-page .topnav__dropdown-divider {
  border-top-color: rgba(20, 16, 22, 0.10);
}
.odoo-page .topnav__dropdown-divider a { color: #4ca33b; }
.odoo-page .topnav__dropdown-divider a:hover { color: #3a8a2a; }

.odoo-page .topnav__burger { color: rgba(20, 16, 22, 0.85); }

@media (max-width: 760px) {
  .odoo-page .topnav__sheet {
    background: rgba(255, 255, 255, 0.98);
  }
  .odoo-page .topnav__sheet-nav > li {
    border-bottom-color: rgba(20, 16, 22, 0.08);
  }
  .odoo-page .topnav__sheet-link,
  .odoo-page .topnav__sheet-trigger {
    color: rgba(20, 16, 22, 0.92);
  }
  .odoo-page .topnav__sheet-trigger::after {
    color: rgba(20, 16, 22, 0.5);
  }
  .odoo-page .topnav__sheet-section.is-open .topnav__sheet-trigger::after {
    color: rgba(20, 16, 22, 0.85);
  }
  .odoo-page .topnav__sheet-sub a {
    color: rgba(20, 16, 22, 0.78);
  }
  .odoo-page .topnav__sheet-sub a:hover,
  .odoo-page .topnav__sheet-sub a:active {
    color: #141016;
  }
}