:root {
    --bo-white: #fff;

    /* Accent för linjen under navbaren (bilden visar röd) */
    --bo-nav-accent: #ff2300;
    --bo-nav-accent-scroll: #3d1711;

    --bo-nav-height: 135px;
    --bo-nav-max: 1720px;

    --bo-nav-link: rgba(255, 255, 255, 0.92);
    --bo-nav-link-hover: rgba(255, 255, 255, 1);

    --bo-nav-bg: radial-gradient(1200px 500px at 20% 50%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(90deg, #070707 0%, #111111 55%, #070707 100%);

    --bo-scroll-progress: 0%;
    --bo-scrollbar-h: 4px;

    --bo-radius: 1rem;
    --bo-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    --bo-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ==============================
   NAVBAR (always sticky)
============================== */
.bo-header {
    position: relative;
    background: var(--bo-nav-bg);
    z-index: 2000;
}

.bo-header--sticky {
    position: sticky;
    top: 0;
}

/* Scroll-progress under navbar */
.bo-header[data-bo-progress="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--bo-scrollbar-h);
    width: 100%;
    background:
        linear-gradient(90deg,
            var(--bo-nav-accent) 0,
            var(--bo-nav-accent-scroll) var(--bo-scroll-progress),
            rgba(255, 255, 255, 0) var(--bo-scroll-progress),
            rgba(255, 255, 255, 0.12) 100%);
    transition: width 120ms linear;
    z-index: 2100;
}


.bo-navbar {
    height: var(--bo-nav-height);
    display: flex;
    align-items: center;
    max-width: var(--bo-nav-max);
    margin: 0 auto;
    padding-inline: 0.5rem;
}

/* Logo (du har redan bo-logo-box/bo-logo) */
.bo-logo-box {
    border-radius: var(--bo-radius);
}

.bo-logo {
    width: 100%; /* Sätt värde annars */
    height: auto;
    display: block;
}

/* Desktop links */
.bo-navlinks {
    gap: clamp(1rem, 3vw, 3rem);
}

.bo-navlink {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bo-nav-link);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem;
    transition: color 180ms var(--bo-ease);
    white-space: nowrap;
}

.bo-navlink:hover {
    color: var(--bo-nav-link-hover);
}

/* Mobile toggle */
.bo-navtoggle {
    background: none;
    border: none;
    padding: 0;
    display: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

.bo-navtoggle img {
    width: 32px;
    height: 32px;
    display: block;
}

/* Dropdown (details/summary) */
.bo-navdropdown {
    position: relative;
}

.bo-navdropdown__toggle {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bo-nav-link);
    padding: 0.25rem 0.25rem;
}

.bo-navdropdown__toggle::-webkit-details-marker {
    display: none;
}

.bo-navdropdown__caret {
    transition: transform 180ms var(--bo-ease);
    display: inline-block;
}

.bo-navdropdown[open] .bo-navdropdown__caret {
    transform: rotate(180deg);
}

.bo-navdropdown__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    background: var(--bo-white);
    border-radius: 0.875rem;
    box-shadow: var(--bo-shadow);
    padding: 0.75rem;
    display: grid;
    gap: 0.25rem;
    z-index: 2500;
}

.bo-navdropdown__menu a {
    padding: 0.5rem 0.25rem;
    color: #111;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0.5rem;
}

.bo-navdropdown__menu a:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Mobile breakpoint */
@media (max-width: 992px) {
    .bo-navtoggle {
        display: block;
    }

    .bo-logo {
        width: 300px;
	margin:0 auto;
    }
}

/* ==============================
   DRAWER
============================== */
.bo-drawer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms var(--bo-ease);
}

.bo-drawer.is-open {
    pointer-events: auto;
    opacity: 1;
}

.bo-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
}

.bo-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(320px, 85vw);
    height: 100%;
    background: var(--bo-white);
    box-shadow: var(--bo-shadow);
    transform: translateX(-100%);
    transition: transform 220ms var(--bo-ease);
}

.bo-drawer.is-open .bo-drawer__panel {
    transform: translateX(0);
}

.bo-drawer__inner {
    padding: 1.25rem;
    display: grid;
    gap: 0.25rem;
}

.bo-drawer__link {
    display: block;
    padding: 0.85rem 0.5rem;
    color: #111;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.75rem;
}

.bo-drawer__link:hover {
    background: rgba(0, 0, 0, 0.06);
}

.bo-drawer__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0.75rem 0;
}

/* Body lock */
.bo-no-scroll {
    overflow: hidden;
}

@media (min-width: 992px) {
    .bo-drawer {
        display: none;
    }
}

/* ==============================
   A11Y
============================== */
.bo-navlink:focus-visible,
.bo-navdropdown__toggle:focus-visible,
.bo-navtoggle:focus-visible,
.bo-drawer__link:focus-visible,
.bo-drawer__backdrop:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
}

.bo-drawer__link:focus-visible {
    outline-color: rgba(0, 0, 0, 0.6);
}