:root {
    --sidebar-width: 200px;
    --nav-sidebar-bg: #00000e;
    --carosel-grid-gap: 1.5rem;
}

h1:focus {
    outline: none !important;
}

/* Visually hidden class for accessibility - hides content visually but keeps it available to screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.home-gold-button {
    border-color: var(--gcg-primary) !important;
    color: white !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.home-gold-button:hover {
    background-color: var(--gcg-primary) !important;
    /*color: var(--gcg-secondary) !important;*/
}

/* Make home buttons full-width on xs screens only */
@media (max-width: 599px) {
    .home-button-responsive {
        width: 100%;
    }
}


/* Sidebar base */
.nav-sidebar {
    position: fixed;
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
    width: var(--sidebar-width);
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height)/8);
    background-color: var(--nav-sidebar-bg, #ffffff);
    overflow: auto;
    will-change: transform;
}


/* Nav menu text size and centering */
.nav-sidebar .mud-nav-link {
    font-size: 1.1rem;
    justify-content: center;
}

.nav-sidebar .mud-nav-link .mud-nav-link-text {
    font-size: 1.1rem;
    text-align: center;
}

.main-content-toppadding {
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

.app-header-logo {
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    height: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

.paper-palette-bg {
    background-color: var(--mud-palette-background, #00000e);
}

/* Add to your app-gcg.css or app.css */
.responsive-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important;
    text-transform: uppercase;
    font-family: 'Supreme';
    font-weight: 500;
    line-height: 1.0;
}
/* Add to your app-gcg.css or app.css */
.responsive-title {
    font-size: clamp(2rem, 5vw, 3.75rem) !important;
    text-transform: uppercase;
    font-family: 'Supreme';
    font-weight: 700;
    line-height: 1.0;
}


/* little adjustment that MudBlazor makes on 600px needs to be accounted for */
.nav-overlay.show {
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

/* Overlay (mobile only) */
.nav-overlay {
    display: none;
}

/* Toggle button visible on mobile, hidden on desktop */
.menu-toggle-btn {
    display: inline-flex;
}

@media (min-width: 600px) {

    .app-header-logo {
        /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
        height: calc(var(--mud-appbar-height));
    }

    .main-content-toppadding {
        /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
        padding-top: var(--mud-appbar-height);
    }


    .nav-sidebar {
        /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
        top: var(--mud-appbar-height);
        height: calc(100vh - var(--mud-appbar-height));
    }

    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    .nav-overlay.show {
        top: var(--mud-appbar-height);
    }
 }

    /* Desktop: persistent sidebar on the left */
    @media (min-width: 1280px) {
        .nav-sidebar {
            left: 0;
            border-right: 1px solid rgba(0,0,0,0.12);
            border-left: none;
            transform: none !important;
            z-index: 1;
        }

        .main-content {
            margin-left: var(--sidebar-width);
        }

        .nav-overlay {
            display: none !important;
        }

        .menu-toggle-btn {
            display: none !important;
        }
    }

    /* Mobile/Tablet: hidden by default, slides in from the right */
    @media (max-width: 1279px) {
        .nav-sidebar {
            right: 0;
            border-left: 1px solid rgba(0,0,0,0.12);
            border-right: none;
            transform: translateX(100%);
            transition: transform 0.2s ease;
            z-index: 1001;
        }

            .nav-sidebar.open {
                transform: translateX(0);
            }

        .nav-overlay.show {
            display: block;
            position: fixed;
            /* taken out because we need variable adjustment in different spots due to MudBlazor adjustments */
           /* top: var(--mud-appbar-height);*/
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
    }

/* Skimpy card styles */
.skimpy-card {
    position: relative;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    /* Maintain 1:1.25 aspect ratio (width:height = 0.8) */
    aspect-ratio: 0.8;
}

    .skimpy-card:hover {
        box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    }

/* Skimpy card image (picture element) */
.skimpy-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

    .skimpy-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
    }

    .skimpy-card:hover .skimpy-card-image img {
        transform: scale(1.1);
    }

.skimpy-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    z-index: 1;
}

    .skimpy-card:hover .skimpy-card-overlay {
        background: rgba(0, 0, 0, 0.2);
    }

.skimpy-card-name {
    color: white !important;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 700 !important;
    padding: 0 16px;
    text-transform: uppercase;
}

/* Skimpy profile image styles */
.skimpy-profile-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

    .skimpy-profile-image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

/* Skimpy thumbnail image styles */
.skimpy-thumbnail-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

    .skimpy-thumbnail-image img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 4px;
        object-fit: cover;
    }



/* Jump to Top button styles */
.jump-to-top-btn {
    position: fixed;
    right: 0px;
    bottom: 40px; /* Lower position, closer to bottom */
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(20px);
}

.jump-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jump-to-top-btn .mud-fab {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.jump-to-top-btn .mud-fab:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Responsive positioning for smaller screens */
@media (max-width: 599px) {
    .jump-to-top-btn {
        right: 0px;
        bottom: 40px; /* Lower on mobile too */
    }
}

/* ============================================================================
   HORIZONTAL SCROLLER CAROUSEL STYLES
   ============================================================================
   Infinite scrolling carousel for circle profile pictures
   Based on goldclassgirls.com design
   ============================================================================ */

/* Scroll animation keyframe */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ========================================
   HORIZONTAL SCROLLER - SHARED STYLES
   ======================================== */

/* Shared CSS variables for both normal and reverse scrollers */
.horizontal-scroller,
.horizontal-scroller-reverse {
    --width: 100%;
    --min-width: 100%;
    --transform: none;
    --play: running;
    --duration: 400s;
    --delay: 0s;
    --iteration-count: infinite;
    --pause-on-hover: paused;
    --image-gap: var(--carosel-grid-gap);
    --image-width: clamp(7rem, 12.5vw, 10rem);
    --image-aspect-ratio: 1;
    --image-background: var(--mud-palette-background);
    --image-border: 0.2rem solid var(--gcg-primary);
    --image-border-radius: 100%;
}

/* Direction-specific variables */
.horizontal-scroller {
    --direction: normal;
}

.horizontal-scroller-reverse {
    --direction: reverse;
}

/* Shared container styles */
.horizontal-scroller,
.horizontal-scroller-reverse {
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--image-gap);
    position: relative;
    width: var(--width);
    transform: var(--transform);
    user-select: none;
    max-width: unset;
    mask-image: linear-gradient(
        var(--mask-direction, to right),
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 10%,
        hsl(0 0% 0% / 1) 90%,
        hsl(0 0% 0% / 0)
    );
}

/* Shared hover behavior */
.horizontal-scroller:hover div,
.horizontal-scroller-reverse:hover div {
    animation-play-state: var(--pause-on-hover);
}

/* Shared default/animation container styles */
.horizontal-scroller__default,
.horizontal-scroller-reverse__default {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    gap: var(--image-gap);
    min-width: var(--min-width);
    align-items: center;
    justify-content: space-around;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-play-state: var(--play);
    animation-delay: var(--delay);
    animation-direction: var(--direction);
    max-width: unset;
    will-change: transform;
}

/* Shared image wrapper styles */
.horizontal-scroller__image-wrap,
.horizontal-scroller-reverse__image-wrap {
    display: flex;
    flex: 0 0 auto;
}

/* Shared image container styles */
.horizontal-scroller__image,
.horizontal-scroller-reverse__image {
    width: var(--image-width);
    height: var(--image-width);
    display: block;
}

    
/* Carousel image styles - ensure images fill the circle properly */
.horizontal-scroller__image,
.horizontal-scroller__image picture,
.horizontal-scroller-reverse__image,
.horizontal-scroller-reverse__image picture {
    display: block;
    width: var(--image-width);
    height: var(--image-width);
}

    
.horizontal-scroller__image img,
.horizontal-scroller-reverse__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    display: block;
    border: var(--image-border);
    background: var(--image-background);
}