/* Tunable vars */
:root {
    --site-bgcolor: #fff;
    --site-header-bgcolor: #000;
    --site-header-fgcolor: #fff;
    --site-header-subtitle-fgcolor: #ddd;
    --site-header-height: 4rem; /* fallback estimate — adjust if your header is taller */
    --site-footer-bgcolor: rgba(80, 80, 80, 0.5);
    --site-footer-fgcolor: rgba(0, 0, 0, 0.8);
    --site-footer-height: 3rem; /* matches .site-footer approximate height (padding + text) */

    --race-header- --card-font-family: 'Encode Sans';
    --card-collapsed-height: 4rem; /* height to show only the header; adjust to match .display-5 size */
    --card-expanded-max-height: 48rem; /* large enough for full content */
    --card-transition-duration: 500ms;
    --card-header-color: transparent;
    --card-header-bgcolor-hover: rgba(4, 127, 181, 0.3);
    --card-footer-bgcolor-hover: rgb(10, 57, 50, 1);
    --race-header-bgcolor: rgba(255, 255, 255, 0.5);
    --race-header-fgcolor: #000;
    --race-header-eventname-row-bgcolor: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(255, 255, 255,0.2) 50%, rgba(0, 0, 0,0) 80%);
    --events-year-bgcolor: linear-gradient(90deg, rgba(0,255,255,0.55) 0%, rgba(0, 255, 255,0.2) 20%, rgba(0, 0, 0,0) 50%);
    --events-year-fgcolor: #fff;
    --banner-upcoming-event-bgcolor: #000;
    --banner-upcoming-event-fgcolor: #fff;
    --banner-current-event-bgcolor: #063005;
    --banner-current-event-fgcolor: #fff;
    --banner-completed-event-bgcolor: #000;
    --banner-completed-event-fgcolor: #fff;
    --final-classification-button-hover: rgb(10, 57, 50, 0.8);
    --final-classification-button: rgb(17, 82, 72, 0.8);
    --telemetry-card-header: rgb(17, 82, 72, 0.9);
}

/* ----------------------------------------------------------------------------
   Global and Home page usage
   - html/body, box-sizing, canvas, Home "enter"/title/footer elements
   ---------------------------------------------------------------------------- */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--site-bgcolor, #000); /* ensures variable use */
    font-size: 1rem;    
}

@media (min-width: 992px) {
    
       
}

/* Make canvas cover the viewport responsively (Home) */
canvas.bg-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    object-fit: cover;
}

/* Update message styles (Home) */
#enter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: static;
    margin-top: 0.5rem;
    width: auto;
    z-index: 11;
    font-size: 1.1rem;
    color: #ccc;
    font-family: "Nata Sans", sans-serif;
    pointer-events: auto; /* allow mouse events */
    align-self: center;
    cursor: pointer;
    user-select: none;
    padding: 0.4rem 0.9rem;
    border-radius: 0.4rem;
    transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}
#enter p { margin: 0; }
#enter:hover {
    transform: translateY(-3px);
    background-color: rgba(255,255,255,0.03);
    color: #fff;
}
#enter:active, #enter.pressed {
    transform: translateY(0);
    background-color: rgba(255,255,255,0.06);
}
#enter:focus {
    outline: 2px solid rgba(0,255,255,0.25);
    outline-offset: 3px;
}

/* small-screen adjustments for Home */
@media (max-width: 600px), (max-height: 600px) {
    #enter {
        font-size: 0.85em;
    }
}
@media (max-width: 600px), (max-height: 600px) {
  .title,
  .tld {
    font-size: 6vw;
  }
  .site-footer {
    font-size: 0.65em;
  }
  body {
    font-size: 0.95em;
  }
}

/* Home centered title area */
.text-cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    text-align: center;
    padding: 1rem;
}
.title{
    font-size: clamp(2rem, 10vw + 1vh, 10rem);
    font-family: "Nata Sans", sans-serif;
    font-weight: 100;
    color: #fff;
    z-index: 10;
    line-height: 1;
}
.tld{
    font-size: clamp(2rem, 10vw + 1vh, 10rem);
    font-family: "Nata Sans", sans-serif;
    font-weight: 100;
    color: #0ff;
    z-index: 10;
    margin-left: 0.25em;
}

/* Footer used site-wide (Home) */
.site-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: var(--site-footer-fgcolor);
    font-family: "Nata Sans", sans-serif;
    font-size: 0.6em;
    padding: 0.75rem 0;
    z-index: 1000;
    background: var(--site-footer-bgcolor);
}

/* page-content: stretches to fill viewport between header and footer */
.page-content {
    /* ensure the colored background covers the available area between header & footer */
    min-height: calc(100vh - var(--site-header-height) - var(--site-footer-height));
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

    background-color: rgb(118, 118, 118, 0.5);
    background-image: url("/media/cl/5c152f42-b1fe-4505-97e6-b42f3b88e497.webp");
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
   
}




    /* small tweak: keep the footer above the colored area if footer is fixed (it is) */
    .page-content + .site-footer {
        z-index: 50;
    }

/* ----------------------------------------------------------------------------
   Shared site header (used on all pages)
   - Full-width banner with scalable font
   ---------------------------------------------------------------------------- */
.site-header {
    width: 100%;
    background: var(--site-header-bgcolor, #000);
    color: var(--site-header-fgcolor, #fff);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    padding: 0.6rem 0;
    z-index: 100;   
}

/* Site header layout + nav (used across all pages) */
.site-header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 1rem;
}



/* Left column (title + optional subtitle) */
.site-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Title scales responsively */
.site-header-title {
    font-family: "Encode Sans", sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 1;
    font-size: clamp(1.25rem, 1.25rem + 2.5vw, 2.75rem);
}

/* Subtitle */
.site-header-subtitle {
    font-family: "Encode Sans", sans-serif;
    color: var(--site-header-subtitle-fgcolor);
    margin-top: 0.1rem;
    font-size: clamp(0.85rem, 0.8rem + 1.2vw, 1.15rem);
}

/* Navigation styling */
.site-header-nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* NavLink base */
.site-header-nav .nav-link {
    color: inherit;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    font-weight: 600;
    opacity: 0.9;
}

/* Active link style (NavLink adds 'active' class automatically) */
.site-header-nav .active,
.site-header-nav .nav-link:hover,
.site-header-nav .nav-link:focus {
    background: rgba(0,0,0,0.06);
    color: inherit;
    text-decoration: none;
}

/* Small adjustments for narrow screens */
@media (max-width: 420px) {
    .site-header {
        padding: 0.4rem 0;
    }
    .site-header-title {
        font-size: clamp(1rem, 1rem + 3vw, 1.8rem);
    }
}

/* Responsive: stack on narrow viewports */
@media (max-width: 576px) {
    .site-header-inner {
        flex-direction: column;
        align-items: center;
    }
    .site-header-left {
        align-items: center;
        text-align: center;
    }
    .site-header-nav {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------------------
   EventCard module: Components\Modules\EventCard.razor
   - collapsible-card was removed from usage; rules moved/renamed under .event-card
   ---------------------------------------------------------------------------- */

/* Base visual behavior for event cards (always-expanded variant) */
.event-card {
    width: 100%;
    max-height: none !important;
    max-width: 370px;
    min-width: 300px;
    margin: 0 auto; /* center inside the column */
    overflow: visible !important;
    cursor: default;
    transition: none !important;
    border-radius: 3px;
    background-color: #fff;
    gap: 1rem;
}
.event-card-wrapper {
    padding: 0;
    
}

/* Ensure body/footer are always visible and interactive (EventCard) */
.event-card .card-body,
.event-card .card-footer {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Footer hover/focus */
.event-card .card-footer:hover,
.event-card .card-footer:focus,
.event-card .card-footer:active {
    background-color: var(--card-footer-bgcolor-hover);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(13,110,253,0.12);
}
.event-card .card-footer small.text-muted {
    color: inherit;
}

/* EventCard — reduce vertical gap between header and body */
.event-card .card-header {
    padding-bottom: 0; /* tighten header bottom padding */
}

.event-card .card-body {
    padding-top: 0; /* reduce top padding so body sits closer to header */
    padding-bottom: 0;
}

    /* ensure the first inner row doesn't introduce extra top margin */
    .event-card .card-body > .row:first-child {
        margin-top: 0;
    }
.event-card .card-footer {
    padding-top: 0; /* tighten header bottom padding */
}

/* Event header image/backdrop and header styling (applies to EventCard .event-header) */
.event-card .event-header {
    position: relative; /* required for ::before pseudo-element */
    z-index: 2;
    border-bottom: 1px solid rgba(50,50,50,0);
    font-size: 1.75em;
    font-weight: 400;
    transition: 0.5s ease-in-out;
    margin-top: 0;
}

/* Low-opacity background image applied via pseudo-element */
.event-card .event-header::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-image: url("/media/backgrounds/default-image.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
}

/* Hover/focus state for header */
.event-card:hover .event-header,
.event-card:focus .event-header,
.event-card:focus-within .event-header {
    border-bottom: 1px solid rgba(50,50,50,0.5);
    background-color: var(--card-header-bgcolor-hover);
}

.event-sponsor-icon {
    width: 95px;
    height: 80px;
    background: #fff;
    border-radius: 4px;
}
.uci-icon {
    width: 46px;
    height: 15px;
    background: #fff;
    border-radius: 0px;
}
/* ----------------------------------------------------------------------------
   Events page: Components\Pages\Events.razor
   - centered-events, previous-events-divider and centering helpers
   ---------------------------------------------------------------------------- */
/* Spinner used when events are loading (Events) */
.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh; /* ensures vertical space for centering; adjust as needed */
}

/* Center recent events horizontally and vertically (wraps the Bootstrap row) */
.centered-events {
    display: flex;
    justify-content: center;
    align-items: center;
   
    width: 100%;
}

/* Ensure the centered recent-events row uses the same full width as older rows */
.centered-events > .row {
    width: 100%;
    max-width: 100%;
}

/* Full-width divider for current events — 10px height with centered text */
.banner-current-event {
    background-color: var(--banner-current-event-bgcolor);
    color: var(--banner-current-event-fgcolor);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Full-width divider for previous events — 10px height with centered text */
.banner-completed-event {
    background-color: var(--banner-completed-event-bgcolor);
    color: var(--banner-completed-event-fgcolor);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.banner-upcoming-event {
    background-color: var(--banner-upcoming-event-bgcolor);
    color: var(--banner-upcoming-event-fgcolor);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


/* Keep Bootstrap columns centered but DO NOT constrain card width differently
   — ensures centered-events cards match older event cards' column sizing */
.row.justify-content-center > .col-12,
.row.justify-content-center > [class*="col-"] {
    display: flex;
    justify-content: center;
}
.row > .col-12 > .event-card,
.row > [class*="col-"] > .event-card {
    max-width: none; /* allow column width to determine card size consistently */
}

/* ----------------------------------------------------------------------------
   Race Header Module page: Modules\RaceHeader.razor   
   ---------------------------------------------------------------------------- */

.race-header-module {
    background-color: var(--race-header-bgcolor);
    color: var(--race-header-fgcolor);
    font-family: "Encode Sans", sans-serif;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid white;
}
.race-header-eventlogo{
    height: 120px;
}
.race-header-sponsorlogo {
    height: 120px;
}
@media (max-width: 435px) {
    .race-header-eventlogo {
        height: 80px;
    }
    .race-header-sponsorlogo {
        height: 80px;
    }
}



.race-header-eventinfo-row {
    background-color: rgba(255,255,255,0.8);
    margin: 0;
    padding: 0;
    height: 4.5rem;
}
.race-header-eventname-row {
    background-image: var(--race-header-eventname-row-bgcolor);
    margin: 0;
    padding: 0;
}

.race-sort-bar {

    border-radius: 5px;
    background-color: white;
    color: black;
    font-family: 'Encode Sans', sans-serif
        
}

.race {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.race-grid-body {
    border-radius: 5px;
    backdrop-filter: blur(10px);
    padding: 0;
    margin: 0;
    
}
.race-grid-item {
 
    
}

.race-accordion-button {
    font-family: 'Encode Sans';
    font-weight: bold;
    height: 10px;
    padding-bottom: 1rem;
    color: black;
    margin-left: 1px;
    padding-left: 5px;
    background-color: #ddd;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .race-accordion-button:focus {
        box-shadow: none;
        border-color: rgba(0,0,0,.125);
        background-color: #ddd;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .race-accordion-button:not(.collapsed) {
        box-shadow: none;
        border-color: rgba(0,0,0,.125);
        background-color: #ddd;
        color: black;
        margin: 0;
       
    }

.race-line {
    border-bottom: 1px solid silver;
   
}
.race-line-finished {
    border-left: 4px solid green !important;
}
.race-line::before {
        content: '|';
        color: rgba(0,0,0);
        opacity: 0;
        transition: all 0.5s ease-out;
}

.race-line:hover {
        background-color: rgba(0,0,0,0.2);
        cursor: pointer;
        
}

.race-line:hover::before {
    content: "|";
    opacity: 1;
    color: rgba(0,0,0);
}

.race-line-time {
    font-weight: 500;
    width: 8rem;
    text-align: center;
}

.race-line-title {
    font-weight: 600;
    font-size: 1rem;    
}

.race-line-rider {
    font-weight: 400;
    font-size: 1rem;    
}

.race-line-distance {
    font-weight: 400;
    font-size: 0.8rem;    
    padding-left: 0rem;
}

.race-uci-logo {
/*    width: 46px;*/
    height: 10px;
    
    border-radius: 1px;  
}

.race-line-status {
    background-color: rgba(198, 239, 206, 0.6); /* light green background */
    border-left: 4px solid #8bc34a; /* subtle green accent */
    transition: background-color 180ms ease, border-left-color 180ms ease;
    padding-bottom: 2px;
}

.final-classification-button {
    font-family: 'Encode Sans';
    font-weight: bold;
    height: 1rem;
    padding-bottom: 1rem;
    margin: 0;
    text-align: center;
    
}

.final-classification-button.collapsed {
    background-color: var(--final-classification-button) !important;
    color: white;
    font-weight: 400;
    height: 2rem;
    cursor: pointer;
    border-radius: 3px;
}

.final-classification-button:not(.collapsed) {
    background-color: var(--final-classification-button) !important;
    color: white;
    font-weight: 400;
    height: 2rem;
    cursor: pointer;
    border-radius: 3px;
}

.final-classification {
    border-radius: 3px;
    padding-top: 0.2rem;
    
}

@media (max-width: 435px) {
    .final-classification-button {
        font-family: 'Encode Sans';
        font-weight: bold;
        height: 2rem;
        padding-bottom: 1rem;
        margin: 0;
        text-align: center;
        vertical-align: middle;
        
    }

        .final-classification-button.collapsed {
            background-color: var(--final-classification-button) !important;
            color: white;
            font-weight: 400;
            height: 2rem;
            cursor: pointer;
            border-radius: 3px;
        }

        .final-classification-button:not(.collapsed) {
            background-color: var(--final-classification-button) !important;
            color: white;
            font-weight: 400;
            height: 2rem;
            cursor: pointer;
            border-radius: 3px;
        }

    .classification-item {
        background-color: var(--final-classification-button) !important;
        color: white;
        font-weight: 400 !important;
        font-size: 1.1rem;
        cursor: pointer;
        padding-left: 4rem;
        height: 3rem;
        transition: all .2s ease-out;
        vertical-align: middle;
        line-height: 3rem;
        margin-bottom: 1px;
        margin-top: 1px;
    }
}

.classification-item {
    background-color: var(--final-classification-button) !important;
    color: white;
    font-weight: 400 !important;
    cursor: pointer;
    padding-left: 4rem;
    transition: all .2s ease-out;
}

    .classification-item::before {
        content: '| ';
        color: rgba(249,115,27);
        opacity: 0;
    }

    .classification-item:hover {
        background-color: var(--final-classification-button-hover) !important;
    }

        .classification-item:hover::before {
            content: "| ";
            opacity: 1;
            color: rgba(249,115,27);
        }

.sr-document-wrapper {
    margin-top: .5rem;    
    margin-left: 0;
    margin-right: 0;
    background-color: rgba(249,249,249,0.8);
    border-radius: 5px;
    padding-top: 5px;
    padding-left: 0px;
    color: black;
}

.sr-document-header {
    font-size: 1.5rem;
    justify-content: flex-start;
    font-weight: 500;
}

.sr-document-type {
    font-size: 1rem;
    justify-content: flex-start;
}

.sr-document-date {
    font-size: 0.95rem;
    justify-content: flex-end;
}

.sr-document-title {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    font-size: 1.5rem;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.sr-document-flag {
    width: 37px;
}
@media (max-width: 435px) {
    .sr-document-flag {
        width: 20px;
    }
}

table .sr-document-table {
}

sr-document-table thead {
    vertical-align: middle;
}

.sr-document-table tr .startlist {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(255,255,255,0.4);
}


.sr-document-table thead .startlist {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(200,200,200,0.8);
    font-size: 1.2rem;
    font-weight: 600;
}

.sr-document-table thead .t-number.startlist {
    width: 4rem;
    vertical-align: middle;
}

.sr-document-table thead .t-name.startlist {
    justify-content: flex-start;
    padding-left: 2rem;
}

.sr-document-table thead .t-country.startlist {
    width: 4rem;
    vertical-align: middle;
}



.sr-document-table .t-number.startlist {
    width: 4rem;
    vertical-align: middle;
}

.sr-document-table .t-name.startlist {
    justify-content: flex-start;
    max-width: 40rem;
    padding-left: 2em;
    font-weight: 600;
}

.sr-document-table .t-country.startlist {
    width: 4rem;
    vertical-align: middle;
}


.sr-document-table thead .result {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(200,200,200,0.8);
    font-size: 1.2rem;
    font-weight: 600;
}

.sr-document-table thead .t-rank.result {
    width: 1rem;
    text-align: center;
    vertical-align: middle;
}

.sr-document-table thead .t-number.result {
    width: 4rem;
    text-align: center;
    vertical-align: middle;
}


.sr-document-table thead .t-name.result {
    justify-content: flex-start;
    padding-left: 1rem;
}

.sr-document-table thead .t-country.result {
    width: 2rem;
}

.sr-document-table thead .t-laps.result {
    width: 3rem;
    padding-left: 2rem;
}

.sr-document-table thead .t-points.result {
    width: 4rem;
    padding-left: 3rem;
}

.sr-document-table thead .t-time.result {
    width: 4rem;
    padding-left: 3rem;
}

.sr-document-table thead .t-speed.result {
    width: 4rem;
    padding-left: 0rem;
    text-align: center;
}

.sr-document-table .t-rank.result {
    font-size: 1rem;
    font-weight: 600;
    width: 4rem;
}

.sr-document-table .t-number.result {
    font-size: 1rem;
    font-weight: 600;
    width: 4rem;
}

.sr-document-table .t-name.result {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 10px;
}

.sr-document-table .t-country.result {
    font-size: 0.86rem;
    font-weight: 600;
    padding-left: 10px;
}

.sr-document-table .t-laps.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 4rem;
}

.sr-document-table .t-points.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;
}

.sr-document-table .t-time.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;
}

.sr-document-table .t-speed.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;
    text-align: center;
}

.result-parent:nth-child(1) .p-number {
    color: black !important;
    font-size: 1rem;
}

.result-parent:nth-child(2) .p-number {
    color: black !important;
    font-size: 1rem;
}

.result-parent:nth-child(3) .p-number {
    color: black !important;
    font-size: 1rem;
}


.program-startlist,
.program-result {
    background-color: rgba(0, 76, 129, 0.5);
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    rgba(0,76,129,0.5);
    padding-left: 1em;
    padding-right: 1rem;
    margin: 5px;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

    .program-startlist:hover,
    .program-result:hover {
        color: white;
        background-color: rgba(0, 76, 129, 0.9) !important;
    }

    .telemetry-header{
        background-color: var(--telemetry-card-header) !important;
    }

/* ----------------------------------------------------------------------------
   Misc (kept for potential future use)
   ---------------------------------------------------------------------------- */

/* Year visual (not currently referenced by open pages, retained for future use) */
.year {
    color: var(--events-year-fgcolor);
    background: var(--events-year-bgcolor);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* Smooth expand/collapse for site header nav (works without Bootstrap JS)
   - Uses max-height transition so expand/collapse is animated
   - On large screens the nav is flex and not collapsed
*/
.navbar-collapse.collapse {
    display: block;              /* keep in flow so max-height transition works */
    max-height: 0;               /* collapsed */
    overflow: hidden;
    transition: max-height 300ms ease, opacity 200ms ease;
    opacity: 0;
    will-change: max-height, opacity;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-collapse.show {
    max-height: 480px; /* large enough to contain menu items; adjust if needed */
    opacity: 1;    
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;   
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    
}

.accordion-button::after {
    transition: all 0.5s;
   
}

.top-1, .top-2, .top-3 {
    background-color: rgb(131 132 133 / 0.44) !important;
    color: black !important;
    font-weight: bold;
}

/* If the content can grow taller than max-height, increase the value above.
   On large screens keep nav visible and disable the max-height restriction. */
@media (min-width: 992px) {
    .navbar-collapse.collapse,
    .navbar-collapse.show {
        display: flex !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}

/* Small polish: add a short transition for children visibility */
.site-header-nav .nav {
    transition: opacity 200ms ease;
}

/* Keep existing toggler styling/fallback hamburger */
.site-header-nav .navbar-toggler {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
}
.site-header-nav .navbar-toggler-icon {
    display: inline-block;
    width: 1.35rem;
    height: 1rem;
    position: relative;
}
.site-header-nav .navbar-toggler-icon::before,
.site-header-nav .navbar-toggler-icon::after,
.site-header-nav .navbar-toggler-icon span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.site-header-nav .navbar-toggler-icon::before { top: 0; }
.site-header-nav .navbar-toggler-icon span { top: 50%; transform: translateY(-50%); }
.site-header-nav .navbar-toggler-icon::after { bottom: 0; }