/* Anchor scroll: offset for fixed/sticky header when jumping to sections */
body.public-site .cms-section-anchor {
    scroll-margin-top: 5.5rem;
}

/* Prevent horizontal scroll caused by wide content on mobile. */
html {
    overflow-x: hidden;
}

body.public-site {
    overflow-x: hidden;
    /* Fallback offset for the fixed header; public-navbar.js sets the exact value */
    padding-top: 96px;
}

/* Nowa theme sets body { display: flex; flex-direction: column }, making every direct child
   a flex item with min-width: auto. Without min-width: 0, flex items can grow wider than the
   viewport when their content (e.g. Bootstrap row negative margins) overflows, causing
   horizontal scroll. This one rule fixes the root cause across all public pages. */
body.public-site > * {
    min-width: 0;
}

/* Lock background scroll while the mobile drawer is open */
body.public-site.show-menu {
    overflow: hidden;
}

/* ─── Sticky header ─────────────────────────────────────────────────────────
   Fixed to the top at all times; shrinks slightly once the page is scrolled
   (mirrors the reference project's .scrolled behavior). */
.public-header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
}

.public-header .navbar {
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}

.public-header-logo {
    transition: height 0.3s ease-in-out;
}

.public-header.scrolled .navbar {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.public-header.scrolled .public-header-logo {
    height: 28px !important;
}

/* Desktop: identical layout to Bootstrap's .navbar-collapse */
.navbar-collapse-drawer {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: center;
}

/* Hamburger icon (custom 3-bar, replaces navbar-toggler-icon); hidden above the collapse breakpoint */
.header-menu-toggle {
    display: none;
}

/* Undo Nowa theme: nav 12px, dropdown-item 0.8125rem + tight padding */
body.public-site .navbar .nav-link {
    padding: 0.5rem 1rem;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover/focus: orange highlight */
body.public-site .navbar .nav-link:not(.btn-nav-connect):not(.btn-nav-auth):hover,
body.public-site .navbar .nav-link:not(.btn-nav-connect):not(.btn-nav-auth):focus-visible {
    color: var(--jm-color-orange) !important;
}

/* Nowa theme sets .navbar-nav .show > .nav-link to --primary-color (teal) when a
   dropdown is open; override that with our orange so opened dropdowns look consistent. */
body.public-site .navbar-nav .show > .nav-link:not(.btn-nav-connect):not(.btn-nav-auth) {
    color: var(--jm-color-orange) !important;
}

body.public-site .navbar .dropdown-menu {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
}

body.public-site .navbar .dropdown-menu .dropdown-item {
    font-weight: 400;
    padding: 0.625rem 1.25rem;
    line-height: 1.4;
}

body.public-site .navbar .dropdown-menu .dropdown-item.dropdown-toggle::after {
    margin-inline-start: 0.5rem;
}

/* Active: orange text + underline only (no background), matching the brand accent */
body.public-site .navbar .nav-link.active,
body.public-site .navbar .dropdown-menu .dropdown-item.active {
    color: var(--jm-color-orange) !important;
    background-color: transparent !important;
    text-decoration: underline;
    text-decoration-color: var(--jm-color-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

body.public-site .navbar .btn-nav-connect {
    background-color: var(--jm-color-orange);
    color: var(--jm-color-white) !important;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--jm-tracking-btn-wider);
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

body.public-site .navbar .btn-nav-connect:hover,
body.public-site .navbar .btn-nav-connect:focus {
    background-color: var(--jm-color-orange-hover);
    color: var(--jm-color-white) !important;
    text-decoration: none;
}

body.public-site .navbar .btn-nav-connect.active {
    background-color: var(--jm-color-orange-hover);
    color: var(--jm-color-white) !important;
    text-decoration: none;
}

body.public-site .navbar .btn-nav-auth {
    background-color: transparent;
    color: var(--jm-color-earth) !important;
    border: 1px solid var(--jm-color-earth);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

body.public-site .navbar .btn-nav-auth:hover,
body.public-site .navbar .btn-nav-auth:focus {
    background-color: var(--jm-color-earth);
    border-color: var(--jm-color-earth);
    color: var(--jm-color-white) !important;
    text-decoration: none;
}

body.public-site .navbar .btn-nav-auth.active {
    background-color: var(--jm-color-earth);
    border-color: var(--jm-color-earth);
    color: var(--jm-color-white) !important;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    body.public-site .navbar .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    body.public-site .navbar .btn-nav-connect,
    body.public-site .navbar .btn-nav-auth {
        display: inline-block;
        margin-top: 0.25rem;
    }

    body.public-site .navbar .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding: 0.25rem 0 0.5rem 1rem;
    }

    body.public-site .navbar .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem;
    }

    /* Semi-transparent backdrop when drawer is open */
    body.public-site.show-menu::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1049;
    }

    /* Hamburger icon */
    .header-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .header-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--jm-color-earth);
        transition: 0.3s ease-in-out;
    }

    body.show-menu .header-menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.show-menu .header-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.show-menu .header-menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Off-canvas drawer — hidden via transform (not negative right) so it never
       contributes to document scroll width, preventing horizontal overflow. */
    body.public-site .navbar-collapse-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: var(--jm-color-white);
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 5rem 1.5rem 2rem;
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 1050;
    }

    body.public-site.show-menu .navbar-collapse-drawer {
        transform: translateX(0);
        visibility: visible;
    }

    .navbar-collapse-drawer .navbar-nav {
        width: 100%;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .navbar-collapse-drawer .navbar-nav + .navbar-nav {
        border-top: 1px solid var(--jm-color-border);
        padding-top: 1.25rem;
        margin-top: 0.25rem;
    }

    .navbar-collapse-drawer .dropdown-menu {
        position: static;
        width: 100%;
    }
}