/* Event Header Icon Buttons Optimization */

/* Ensure buttons maintain proper alignment and spacing */
.event-header-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Button base styles - ensure consistent sizing */
#modal-button,
#print-button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    /* Slightly smaller icons on mobile for better fit */
    #modal-button svg,
    #print-button svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* Ensure buttons are still touch-friendly */
    #modal-button,
    #print-button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.625rem;
    }
}

/* Tablet and up - larger icons */
@media (min-width: 641px) {
    #modal-button svg,
    #print-button svg {
        width: 2rem;
        height: 2rem;
    }
}

/* Very small screens - extra compact */
@media (max-width: 374px) {
    #modal-button,
    #print-button {
        padding: 0.5rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    #modal-button svg,
    #print-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Improve button hover states on desktop */
@media (hover: hover) {
    #modal-button:hover,
    #print-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
}

/* Active state for better touch feedback */
#modal-button:active,
#print-button:active {
    transform: translateY(0);
}

/* Focus visible for keyboard navigation */
#modal-button:focus-visible,
#print-button:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Ensure proper spacing in the header container */
.border-b-white.pb-3 {
    padding-bottom: 0.75rem;
}

/* Responsive title and button alignment */
@media (max-width: 640px) {
    /* Stack title and buttons on very small screens if needed */
    .flex.flex-row.justify-between.items-start {
        gap: 0.75rem;
    }
    
    /* Ensure title doesn't push buttons off screen */
    .text-white.flex-1 h1 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    #modal-button,
    #print-button {
        padding: 0.5rem;
    }
}