/* ==========================================================================
   SIDE-NAV — BEM Component Styles
   Block:    .side-nav
   Elements: __inner, __header, __title, __list, __item, __item-row,
             __link, __toggle, __chevron, __children
   Modifiers: --active, --has-children, --child, --open
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties (override in :root or a theme block to customise)
   -------------------------------------------------------------------------- */
:root {
    --side-nav-font-family:         inherit;
	--side-nav-title-font-family:	var(--font-family--two);
    --side-nav-font-size:           1.25rem;
    --side-nav-font-size-title:     2rem;
    --side-nav-font-size-child:     calc(var(--side-nav-font-size) - 0.2rem);

    --side-nav-color-text:          var(--bs-white);
    --side-nav-color-link:          var(--bs-white);
    --side-nav-color-link-hover:    var(--bs-white);
    --side-nav-color-link-active:   var(--bs-white);
    --side-nav-color-title:         var(--bs-white);
    --side-nav-color-title-hover:   var(--bs-black);
    --side-nav-color-border:        var(--bs-white);
    --side-nav-color-bg:            var(--bs-themered);
    --side-nav-color-bg-hover:      var(--bs-black);
    --side-nav-color-bg-active:     var(--bs-black);
    --side-nav-color-toggle-hover:  var(--bs-black);
    --side-nav-color-active-bar:    var(--bs-white);
    --side-nav-color-child-indent:  #d0d0d0;
    --side-nav-chidlren-bg:         color-mix(in oklch, var(--bs-themered) 80%, var(--bs-black));
    --side-nav-chidlren-color-link-bg-hover:  var(--bs-black);
    --side-nav-chidlren-color-link-bg-hover-active:  var(--bs-black);
    --side-nav-chidlren-color-link:  var(--bs-black);
    --side-nav-chidlren-color-link-hover:  var(--bs-white);
    --side-nav-chidlren-color-link-active:  var(--bs-white);
    --side-nav-chidlren-color-border:  var(--bs-white);

    --side-nav-border-radius:       4px;
    --side-nav-spacing-xs:          0.25rem;
    --side-nav-spacing-sm:          0.5rem;
    --side-nav-spacing-md:          0.75rem;
    --side-nav-spacing-lg:          1rem;
    --side-nav-spacing-xl:          1.25rem;
    --side-nav-indent:              1rem;

    --side-nav-transition-speed:    500ms;
    --side-nav-transition-ease:     ease-in-out;
}

/* --------------------------------------------------------------------------
   Block
   -------------------------------------------------------------------------- */
.side-nav {
    font-family:    var(--side-nav-font-family);
    font-size:      var(--side-nav-font-size);
    color:          var(--side-nav-color-text);
    /*background:     var(--side-nav-color-bg);
    border:         1px solid var(--side-nav-color-border);
    border-radius:  var(--side-nav-border-radius);*/
    overflow:       hidden;
}

/* --------------------------------------------------------------------------
   Element: __inner
   -------------------------------------------------------------------------- */
.side-nav .side-nav__inner {
    display:        flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Element: __header
   -------------------------------------------------------------------------- */
.side-nav .side-nav__header {
    padding:        var(--side-nav-spacing-lg) var(--side-nav-spacing-xl);
    border-bottom:  2px solid var(--side-nav-color-border);
    background:     var(--side-nav-color-bg);
}

/* --------------------------------------------------------------------------
   Element: __title  (linked heading / section title)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__title {
    display:        block;
    font-family:    var(--side-nav-title-font-family);
    font-size:      var(--side-nav-font-size-title);
    font-weight:    700;
    line-height:    1.3;
    color:          var(--side-nav-color-title);
    text-decoration: none;
    transition:     color var(--side-nav-transition-speed) var(--side-nav-transition-ease);
    text-align:     center;
}

.side-nav .side-nav__title:hover,
.side-nav .side-nav__title:focus-visible {
    color:              var(--side-nav-color-title-hover);
    text-decoration:    none;
    outline:            none;
}

.side-nav .side-nav__title:focus-visible {
    outline:            2px solid var(--side-nav-color-active-bar);
    outline-offset:     2px;
    border-radius:      2px;
}

/* --------------------------------------------------------------------------
   Element: __list  (top-level <ul>)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__list {
    list-style:     none;
    margin:         0;
    padding:        var(--side-nav-spacing-sm) 0;
}

/* --------------------------------------------------------------------------
   Element: __item
   -------------------------------------------------------------------------- */
.side-nav .side-nav__item {
    position:       relative;
    margin:         0;
    padding:        0;
}

/* Active left-bar indicator */
.side-nav .side-nav__item--active > .side-nav__link,
.side-nav .side-nav__item--active > .side-nav__item-row > .side-nav__link {
    border-left-color: var(--side-nav-color-active-bar);
    background:        var(--side-nav-color-bg-active);
    font-weight:       600;
    color:             var(--side-nav-color-link-active);
}

/* --------------------------------------------------------------------------
   Element: __item-row  (flex wrapper for link + toggle button)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__item-row {
    display:        flex;
    align-items:    stretch;
    position:       relative;
}

.side-nav .side-nav__item-row .side-nav__link {
    flex:           1 1 auto;
    /* Remove right padding so toggle button sits flush */
    padding-right:  var(--side-nav-spacing-sm);
}

/* --------------------------------------------------------------------------
   Element: __link
   -------------------------------------------------------------------------- */
.side-nav .side-nav__link {
    display:            block;
    padding:            var(--side-nav-spacing-md) var(--side-nav-spacing-xl);
    color:              var(--side-nav-color-link);
    text-decoration:    none;
    font-size:          var(--side-nav-font-size);
    line-height:        1.4;
    border-left:        3px solid transparent;
    background:         transparent;
    transition:
            background     var(--side-nav-transition-speed) var(--side-nav-transition-ease),
            color          var(--side-nav-transition-speed) var(--side-nav-transition-ease),
            border-color   var(--side-nav-transition-speed) var(--side-nav-transition-ease);
}

.side-nav .side-nav__link:hover,
.side-nav .side-nav__link:focus-visible {
    background:         var(--side-nav-color-bg-hover);
    color:              var(--side-nav-color-link-hover);
    text-decoration:    none;
    border-left-color:  var(--side-nav-color-border);
    outline:            none;
}

.side-nav .side-nav__link:focus-visible {
    outline:            2px solid var(--side-nav-color-active-bar);
    outline-offset:     -2px;
}

/* Modifier: active state */
.side-nav .side-nav__link--active {
    border-left-color:  var(--side-nav-color-active-bar) !important;
    background:         var(--side-nav-color-bg-active) !important;
    font-weight:        600;
    color:              var(--side-nav-color-link-active) !important;
}

/* Modifier: child link (indented) */
.side-nav .side-nav__link--child {
    font-size:          var(--side-nav-font-size-child);
    padding-left:       calc(var(--side-nav-indent) + var(--side-nav-spacing-xl));
}

/* --------------------------------------------------------------------------
   Element: __toggle  (chevron button)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__toggle {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-shrink:        0;
    width:              2.75rem;
    padding:            0;
    background:         transparent;
    border:             none;
    border-left:        1px solid var(--side-nav-color-border);
    color:              var(--side-nav-color-link);
    cursor:             pointer;
    transition:
            background     var(--side-nav-transition-speed) var(--side-nav-transition-ease),
            color          var(--side-nav-transition-speed) var(--side-nav-transition-ease);
}

.side-nav .side-nav__toggle:hover,
.side-nav .side-nav__toggle:focus-visible {
    background:         var(--side-nav-color-toggle-hover);
    color:              var(--side-nav-color-link-hover);
    outline:            none;
}

.side-nav .side-nav__toggle:focus-visible {
    outline:            2px solid var(--side-nav-color-active-bar);
    outline-offset:     -2px;
}

/* --------------------------------------------------------------------------
   Element: __chevron  (SVG icon inside __toggle)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__chevron {
    width:              1.5rem;
    height:             1.5rem;
    display:            block;
    transform:          rotate(0deg);
    transition:         transform var(--side-nav-transition-speed) var(--side-nav-transition-ease);
    pointer-events:     none;
}

/* Rotate chevron when expanded */
.side-nav .side-nav__toggle[aria-expanded="true"] .side-nav__chevron {
    transform:          rotate(180deg);
}

/* --------------------------------------------------------------------------
   Element: __children  (sub <ul>)
   -------------------------------------------------------------------------- */
.side-nav .side-nav__children {
    list-style:         none;
    margin:             0;
    padding:            0;
    max-height:         0;
    overflow:           hidden;
    visibility:         hidden;
    background:         var(--side-nav-chidlren-bg);
    border-top:         1px solid transparent;
    transition:
            max-height     var(--side-nav-transition-speed) var(--side-nav-transition-ease),
            visibility     var(--side-nav-transition-speed) var(--side-nav-transition-ease),
            border-color   var(--side-nav-transition-speed) var(--side-nav-transition-ease);
}

/* Modifier: open/visible */
.side-nav .side-nav__children--open {
    max-height:         60rem; /* large enough for any realistic list */
    visibility:         visible;
    border-top-color:   var(--bs-white);
}

/* Left accent line for the child group */
.side-nav .side-nav__children .side-nav__link--child {
    border-left-color:  transparent;
}

.side-nav .side-nav__children .side-nav__link--child:hover {
    border-left-color:  var(--side-nav-color-border);
}

.side-nav .side-nav__children .side-nav__link--active {
    border-left-color:  var(--side-nav-color-active-bar) !important;
}

/* --------------------------------------------------------------------------
   Responsive — full width on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .side-nav {
        border-left:    none;
        border-right:   none;
        border-radius:  0;
    }

    .side-nav .side-nav__link,
    .side-nav .side-nav__link--child {
        padding-top:    var(--side-nav-spacing-lg);
        padding-bottom: var(--side-nav-spacing-lg);
    }
}

/* --------------------------------------------------------------------------
   Print — show all items expanded
   -------------------------------------------------------------------------- */
@media print {
    .side-nav .side-nav__toggle      { display: none; }
    .side-nav .side-nav__children    { max-height: none !important; visibility: visible !important; }
}.side-nav