/**
 * Header Buttons Container - Styles
 * Flexbox container for header buttons (Dark Mode, Staff)
 * No JavaScript needed - pure CSS solution
 */

/* Container - positioned fixed at top right */
/* Right position is set dynamically by JavaScript based on GTranslate button */
.header-buttons-container {
    position: fixed;
    top: 3px;
    right: 8px; /* Fallback if JS hasn't run yet */
    z-index: 1000;
    display: none; /* Hidden by default, shown on 600px+ */
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Show container on screens 600px and above */
@media screen and (min-width: 600px) {
    .header-buttons-container {
        display: flex;
    }
}

/* Reset positioning for buttons inside container on desktop */
@media screen and (min-width: 600px) {
    .header-buttons-container .fsdm-desktop-toggle,
    .header-buttons-container .assistance-button {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
    }
    
    /* Ensure buttons display properly in flex container */
    .header-buttons-container .fsdm-desktop-toggle {
        display: flex !important;
    }
    
    .header-buttons-container .assistance-button {
        display: flex !important;
    }
}

/* On mobile, buttons inside container should use fixed positioning */
/* Right position is set dynamically by JavaScript based on GTranslate button */
@media screen and (max-width: 599px) {
    .header-buttons-container .assistance-button {
        position: fixed !important;
        top: 3px !important;
        right: 8px !important; /* Fallback, JS will override based on GTranslate */
        display: flex !important;
    }
}