/* TABLET MODE FIXES - ENSURE BUTTONS ARE ALWAYS VISIBLE */
/* MOBILE MODE FIXES - HIDE CERTAIN BUTTONS */

/* Hide CTA buttons in mobile mode */
@media (max-width: 767px) {
    /* Hide the "Pledge to Vote" and "Register Now" buttons */
    .cta-group {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    /* Ensure proper spacing for other elements */
    .header-actions {
        gap: 6px !important;
    }
    
    /* Ensure mobile menu button is properly shown */
    .mobile-menu-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure language selector is visible */
    .language-selector {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Global override to ensure buttons always display on tablets */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide navigation to make space for buttons */
    .navigation {
        display: none !important;
    }
    
    /* Force display of container elements */
    .header-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 5000 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    /* Force display of language selector */
    .language-selector {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 1 !important;
    }
    
    /* Force display of CTA buttons group */
    .cta-group {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        gap: 4px !important;
        order: 2 !important;
    }
    
    /* Force display of mobile menu button */
    .mobile-menu-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 3 !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Force display of individual buttons */
    .cta-button, .language-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 11px !important;
        padding: 5px 8px !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        border-radius: var(--radius-md) !important;
    }
    
    /* Make Primary CTA button stand out */
    .cta-primary {
        background: var(--saffron) !important;
        color: var(--white) !important;
    }
    
    /* Header container adjustments */
    .header-container {
        padding: 0 16px !important;
        height: 72px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Logo section adjustments */
    .logo-section {
        max-width: 45% !important;
        width: auto !important;
        flex-shrink: 1 !important;
        gap: 12px !important;
    }
    
    .logo-container {
        width: 48px !important;
        height: 48px !important;
    }
    
    .logo-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        max-width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}