/* Shared navigation (sales_v4/components/nav.html).
   The same component is rendered by the sales_v4 layout and the legacy
   sales_v2 layout. Its markup keeps Tailwind utility class names, so this file
   re-declares the utilities, element resets and nav behaviour classes the
   navigation needs, scoped to `.bm-nav`. That way the component renders
   identically whether it sits on top of the compiled Tailwind bundle
   (sales_v4) or the Bootstrap theme (sales_v2).

   The Bootstrap theme defines several of the same class names with
   `!important` and different values (Bootstrap's spacing scale differs from
   Tailwind's), so the utility rules here are marked `!important` as well to
   win on specificity. */

:root {
    --banner-height: 0px;
    --navbar-height: 64px;
}

@media (max-width: 640px) {
    :root {
        --navbar-height: 80px;
    }
}

/* Pushes page content clear of the fixed navigation on the legacy layout. */
.bm-nav-spacer {
    height: var(--navbar-height);
}

/* --- reset + element defaults (scoped) --- */
.bm-nav,
.bm-nav *,
.bm-nav *::before,
.bm-nav *::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

.bm-nav * {
    line-height: 110%;
}

.bm-nav a {
    color: inherit;
    text-decoration: inherit;
}

.bm-nav strong,
.bm-nav b {
    font-weight: bolder;
}

.bm-nav svg {
    display: block;
    vertical-align: middle;
}

.bm-nav button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
    appearance: button;
}

.bm-nav button:hover {
    cursor: pointer;
}

/* --- utilities --- */
.bm-nav .pointer-events-none,
.bm-nav.pointer-events-none { pointer-events: none !important; }
.bm-nav .absolute,
.bm-nav.absolute { position: absolute !important; }
.bm-nav .relative,
.bm-nav.relative { position: relative !important; }
.bm-nav .fixed,
.bm-nav.fixed { position: fixed !important; }
.bm-nav .top-0,
.bm-nav.top-0 { top: 0 !important; }
.bm-nav .left-0,
.bm-nav.left-0 { left: 0 !important; }
.bm-nav .top-6,
.bm-nav.top-6 { top: 1.5rem !important; }
.bm-nav .top-\[225\%\],
.bm-nav.top-\[225\%\] { top: 225% !important; }
.bm-nav .right-0,
.bm-nav.right-0 { right: 0 !important; }
.bm-nav .left-1\/2,
.bm-nav.left-1\/2 { left: 50% !important; }
.bm-nav .left-4,
.bm-nav.left-4 { left: 1rem !important; }
.bm-nav .-z-10,
.bm-nav.-z-10 { z-index: -10 !important; }
.bm-nav .z-40,
.bm-nav.z-40 { z-index: 40 !important; }
.bm-nav .z-50,
.bm-nav.z-50 { z-index: 50 !important; }
.bm-nav .mt-1,
.bm-nav.mt-1 { margin-top: 0.25rem !important; }
.bm-nav .mt-2,
.bm-nav.mt-2 { margin-top: 0.5rem !important; }
.bm-nav .mb-2,
.bm-nav.mb-2 { margin-bottom: 0.5rem !important; }
.bm-nav .block,
.bm-nav.block { display: block !important; }
.bm-nav .flex,
.bm-nav.flex { display: flex !important; }
.bm-nav .hidden,
.bm-nav.hidden { display: none !important; }
.bm-nav .h-6,
.bm-nav.h-6 { height: 1.5rem !important; }
.bm-nav .max-h-0,
.bm-nav.max-h-0 { max-height: 0 !important; }
.bm-nav .max-h-\[28px\],
.bm-nav.max-h-\[28px\] { max-height: 28px !important; }
.bm-nav .w-6,
.bm-nav.w-6 { width: 1.5rem !important; }
.bm-nav .w-full,
.bm-nav.w-full { width: 100% !important; }
.bm-nav .w-max,
.bm-nav.w-max { width: max-content !important; }
.bm-nav .max-w-\[112px\],
.bm-nav.max-w-\[112px\] { max-width: 112px !important; }
.bm-nav .min-w-max,
.bm-nav.min-w-max { min-width: max-content !important; }
.bm-nav .-translate-x-1\/2,
.bm-nav.-translate-x-1\/2 { transform: translateX(-50%) !important; }
.bm-nav .flex-col,
.bm-nav.flex-col { flex-direction: column !important; }
.bm-nav .items-center,
.bm-nav.items-center { align-items: center !important; }
.bm-nav .items-end,
.bm-nav.items-end { align-items: flex-end !important; }
.bm-nav .justify-center,
.bm-nav.justify-center { justify-content: center !important; }
.bm-nav .justify-end,
.bm-nav.justify-end { justify-content: flex-end !important; }
.bm-nav .gap-2,
.bm-nav.gap-2 { gap: 0.5rem !important; }
.bm-nav .gap-4,
.bm-nav.gap-4 { gap: 1rem !important; }
.bm-nav .overflow-hidden,
.bm-nav.overflow-hidden { overflow: hidden !important; }
.bm-nav .rounded-2xl,
.bm-nav.rounded-2xl { border-radius: 1rem !important; }
.bm-nav .rounded-full,
.bm-nav.rounded-full { border-radius: 9999px !important; }
.bm-nav .border,
.bm-nav.border { border-style: solid !important; border-width: 1px !important; }
.bm-nav .border-black,
.bm-nav.border-black { border-color: #000 !important; }
.bm-nav .bg-\[\#000000\],
.bm-nav.bg-\[\#000000\] { background-color: #000 !important; }
.bm-nav .bg-black,
.bm-nav.bg-black { background-color: #000 !important; }
.bm-nav .bg-black\/60,
.bm-nav.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6) !important; }
.bm-nav .bg-primary,
.bm-nav.bg-primary { background-color: #fad400 !important; }
.bm-nav .p-2,
.bm-nav.p-2 { padding: 0.5rem !important; }
.bm-nav .p-3,
.bm-nav.p-3 { padding: 0.75rem !important; }
.bm-nav .p-5,
.bm-nav.p-5 { padding: 1.25rem !important; }
.bm-nav .px-3,
.bm-nav.px-3 { padding-inline: 0.75rem !important; }
.bm-nav .px-4,
.bm-nav.px-4 { padding-inline: 1rem !important; }
.bm-nav .px-5,
.bm-nav.px-5 { padding-inline: 1.25rem !important; }
.bm-nav .py-1,
.bm-nav.py-1 { padding-block: 0.25rem !important; }
.bm-nav .py-4,
.bm-nav.py-4 { padding-block: 1rem !important; }
.bm-nav .pt-5,
.bm-nav.pt-5 { padding-top: 1.25rem !important; }
.bm-nav .pb-3,
.bm-nav.pb-3 { padding-bottom: 0.75rem !important; }
.bm-nav .pl-2,
.bm-nav.pl-2 { padding-left: 0.5rem !important; }
.bm-nav .pt-\[calc\(15px\+var\(--banner-height\)\)\],
.bm-nav.pt-\[calc\(15px\+var\(--banner-height\)\)\] { padding-top: calc(15px + var(--banner-height)) !important; }
.bm-nav .text-center,
.bm-nav.text-center { text-align: center !important; }
.bm-nav .text-right,
.bm-nav.text-right { text-align: right !important; }
.bm-nav .text-xs,
.bm-nav.text-xs { font-size: 0.75rem !important; }
.bm-nav .text-nowrap,
.bm-nav.text-nowrap { white-space: nowrap !important; }
.bm-nav .font-bold,
.bm-nav.font-bold { font-weight: 700 !important; }
.bm-nav .font-semibold,
.bm-nav.font-semibold { font-weight: 600 !important; }
.bm-nav .text-foreground,
.bm-nav.text-foreground { color: #000 !important; }
.bm-nav .text-white,
.bm-nav.text-white { color: #fff !important; }
.bm-nav .text-white\/80,
.bm-nav.text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
.bm-nav .opacity-0,
.bm-nav.opacity-0 { opacity: 0 !important; }
.bm-nav .shadow-xl,
.bm-nav.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
.bm-nav .transition-all,
.bm-nav.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 0.15s !important;
}
.bm-nav .duration-300,
.bm-nav.duration-300 { transition-duration: 0.3s !important; }
.bm-nav .duration-400,
.bm-nav.duration-400 { transition-duration: 0.4s !important; }
.bm-nav .ease-in-out,
.bm-nav.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* --- interaction states --- */
@media (hover: hover) {
    .bm-nav .hover\:border-white\/15:hover,
    .bm-nav.hover\:border-white\/15:hover { border-color: rgba(255, 255, 255, 0.15) !important; }
    .bm-nav .hover\:bg-primary\/80:hover,
    .bm-nav.hover\:bg-primary\/80:hover { background-color: rgba(250, 212, 0, 0.8) !important; }
    .bm-nav .hover\:text-white:hover,
    .bm-nav.hover\:text-white:hover { color: #fff !important; }
    .bm-nav .hover\:text-white\/70:hover,
    .bm-nav.hover\:text-white\/70:hover { color: rgba(255, 255, 255, 0.7) !important; }
    .bm-nav .hover\:text-white\/100:hover,
    .bm-nav.hover\:text-white\/100:hover { color: #fff !important; }
    .bm-nav .hover\:underline:hover,
    .bm-nav.hover\:underline:hover { text-decoration: underline !important; }
}

.bm-nav .data-\[active\=true\]\:text-white\/100[data-active='true'] {
    color: #fff !important;
}

.bm-nav .focus\:outline-none:focus,
.bm-nav.focus\:outline-none:focus {
    outline-style: none !important;
}

/* --- navigation behaviour classes (mirror of the sales_v4 custom.css rules) --- */
.bm-nav .sales-nav {
    color: color-mix(in oklab, #fff 80%, transparent);
}

.bm-nav .nav-dropdown {
    max-height: 0;
}

.bm-nav .nav-dropdown.is-open {
    max-height: 28rem !important;
}

.bm-nav .nav-mobile-menu {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.bm-nav .nav-mobile-menu.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.bm-nav .nav-mobile-submenu {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}

.bm-nav .nav-mobile-submenu.is-open {
    max-height: 20rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- responsive variants --- */
@media (min-width: 340px) {
    .bm-nav .xs\:flex-row,
    .bm-nav.xs\:flex-row { flex-direction: row !important; }
}

@media (min-width: 640px) {
    .bm-nav .sm\:max-h-\[32px\],
    .bm-nav.sm\:max-h-\[32px\] { max-height: 32px !important; }
    .bm-nav .sm\:max-w-\[126px\],
    .bm-nav.sm\:max-w-\[126px\] { max-width: 126px !important; }
}

@media (min-width: 768px) {
    .bm-nav .md\:static,
    .bm-nav.md\:static { position: static !important; }
    .bm-nav .md\:sticky,
    .bm-nav.md\:sticky { position: sticky !important; }
    .bm-nav .md\:mt-\[15px\],
    .bm-nav.md\:mt-\[15px\] { margin-top: 15px !important; }
    .bm-nav .md\:block,
    .bm-nav.md\:block { display: block !important; }
    .bm-nav .md\:flex,
    .bm-nav.md\:flex { display: flex !important; }
    .bm-nav .md\:hidden,
    .bm-nav.md\:hidden { display: none !important; }
    .bm-nav .md\:w-auto,
    .bm-nav.md\:w-auto { width: auto !important; }
    .bm-nav .md\:justify-between,
    .bm-nav.md\:justify-between { justify-content: space-between !important; }
    .bm-nav .md\:justify-center,
    .bm-nav.md\:justify-center { justify-content: center !important; }
    .bm-nav .md\:gap-6,
    .bm-nav.md\:gap-6 { gap: 1.5rem !important; }
    .bm-nav .md\:bg-black,
    .bm-nav.md\:bg-black { background-color: #000 !important; }
    .bm-nav .md\:px-6,
    .bm-nav.md\:px-6 { padding-inline: 1.5rem !important; }
    .bm-nav .md\:px-10,
    .bm-nav.md\:px-10 { padding-inline: 2.5rem !important; }
    .bm-nav .md\:pt-3\.5,
    .bm-nav.md\:pt-3\.5 { padding-top: 0.875rem !important; }
    .bm-nav .md\:pb-4\.5,
    .bm-nav.md\:pb-4\.5 { padding-bottom: 1.125rem !important; }
    .bm-nav .md\:pt-\[15px\],
    .bm-nav.md\:pt-\[15px\] { padding-top: 15px !important; }
    .bm-nav .md\:text-base,
    .bm-nav.md\:text-base { font-size: 1rem !important; }
}

@media (min-width: 800px) {
    .bm-nav .\[\@media\(min-width\:800px\)\]\:gap-6,
    .bm-nav.\[\@media\(min-width\:800px\)\]\:gap-6 { gap: 1.5rem !important; }
}

@media (min-width: 1024px) {
    .bm-nav .lg\:gap-10,
    .bm-nav.lg\:gap-10 { gap: 2.5rem !important; }
}

@media (max-width: 767px) {
    .bm-nav .sales-nav {
        padding-top: 0;
    }
}