/* -------------------------------------------
   Responsive header height (Bootstrap breakpoints)
------------------------------------------- */
/* xs: <576 */
:root {
    --header-height: 97px;
}
/* sm: ≥576 */
@media (min-width: 576px) {
    :root {
        --header-height: 98px;
    }
}
/* md: ≥768 */
@media (min-width: 768px) {
    :root {
        --header-height: 98px;
    }
}
/* lg: ≥992 */
@media (min-width: 992px) {
    :root {
        --header-height: 98px;
    }
}
/* xl: ≥1200 */
@media (min-width: 1200px) {
    :root {
        --header-height: 98px;
    }
}
/* xxl: ≥1400 */
@media (min-width: 1400px) {
    :root {
        --header-height: 98px;
    }
}

/* -------------------------------------------
   Offcanvas main nav (mobile behavior)
------------------------------------------- */
@media (max-width: 991.98px) {
    /* Kill horizontal scroll on mobile so the page cannot slide sideways */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* When offcanvas is open, vertical scroll is locked via class */
    html.offcanvas-lock,
    body.offcanvas-lock {
        overflow-y: hidden !important;
    }

    /* Keep header above the drawer and its backdrop on mobile */
    #siteHeader {
        z-index: 1050;
    }

    /* Offcanvas drawer under the header, partial width */
    .offcanvas.offcanvas-main-nav {
        top: var(--header-height);
        height: calc(100% - var(--header-height));
        --bs-offcanvas-width: 80%;
        max-width: 360px;
    }

    /* Backdrop starts under the header too */
    .offcanvas-backdrop.show {
        top: var(--header-height);
        height: calc(100% - var(--header-height));
    }

    /* Offcanvas nav: full-width rows and separators */
    .offcanvas-main-nav .offcanvas-body {
        padding-left: 0;
        padding-right: 0;
    }

    .offcanvas-main-nav .navbar-nav {
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .offcanvas-main-nav .navbar-nav .nav-link {
        display: block;
        margin: 0;
        padding: 0.75rem 1rem;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .offcanvas-main-nav .navbar-nav .nav-item:first-child .nav-link {
        border-top: none; /* top border comes from the list wrapper */
    }

    .offcanvas-main-nav .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    /* Bottom social icons: align with links and add a top border */
    .offcanvas-main-nav .offcanvas-social {
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .offcanvas-main-nav .offcanvas-social .nav-link {
        padding: 0;
    }
}

/* -------------------------------------------
   Page-level offsets for fixed header
------------------------------------------- */
.has-opaque-header {
    padding-top: var(--header-height);
}

.has-overlay-header {
    padding-top: 0;
}
    /* Anchor/fragment jumps: offset on ALL pages */
    .has-opaque-header [id],
    .has-overlay-header [id] {
        scroll-margin-top: var(--header-height);
    }

/* -------------------------------------------
   Header + nav visual rules
------------------------------------------- */
#siteHeader {
    /* Shared border colour + smooth transitions */
    --bs-border-color: rgba(var(--bs-secondary-rgb), .5);
    transition: background-color .25s ease, border-color .25s ease;
}

/* Opaque pages: header is opaque from the start (also matches your bg class) */
.has-opaque-header #siteHeader {
    background-color: var(--brand-secondary-1);
}

/* Overlay pages (Home): transparent before scroll, opaque after (or when menu opens via .scrolled) */
.has-overlay-header #siteHeader:not(.scrolled) {
    background-color: transparent;
}

.has-overlay-header #siteHeader.scrolled {
    background-color: var(--brand-secondary-1);
}

/* Inner navbars:
   - Overlay pages: keep inner bars transparent so the header bg controls the look
   - Opaque pages: inherit from header (no override here) */
.has-overlay-header #siteHeader .navbar {
    background-color: transparent;
}

/* Use the shared border colour for row separators */
#siteHeader .navbar.border-bottom {
    border-bottom-color: rgba(var(--bs-secondary-rgb), .5);
}

/* -------------------------------------------
   Main menu item separators
------------------------------------------- */
/* Default: no separators */
#mainNavbar .nav-item {
    border: 0 !important;
}
/* Mobile/tablet: stack items and show a subtle bottom divider */
@media (max-width: 992px) {
    #mainNavbar .nav-item {
        border-width: 0 0 1px 0;
    }
}
/* Desktop-only optional vertical separators (when helper classes are present) */
@media (min-width: 992px) {
    .nav-sep-lg-start {
        border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
    }

    .nav-sep-lg-end {
        border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
    }
}

/* Icons and links */
/* Main navbar: icons and links */
#mainNavbar .nav-link {
    color: var(--bs-white);
    transition: background-color .25s ease, color .25s ease;
}

    /* Hover / focus: smooth primary background ONLY on main navbar */
    #mainNavbar .nav-link:hover,
    #mainNavbar .nav-link:focus-visible {
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }

    /* Keep active/current looking the same on main navbar */
    #mainNavbar .nav-link.active,
    #mainNavbar .nav-link[aria-current="page"],
    #mainNavbar .nav-link.dropdown-toggle.show {
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }

/* Social navbar: no hover effect on icons */
#socialNavbar .nav-link,
#socialNavbar .nav-link:hover,
#socialNavbar .nav-link:focus-visible {
    background-color: transparent;
    color: var(--bs-white);
    transition: none;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    #siteHeader .navbar .nav-link {
        transition: none;
    }
}