/* Small helper for the scrollbar if you add horizontal scrolling */
.scrollbar-hide::-webkit-scrollbar { 
    display: none; 
}

/* * The New Midnight & Sky Palette 
 * (These match your Tailwind config in index.html)
 */
:root {
    --brand-dark: #0369A1;
    --brand-medium: #0284C7;
    --brand-base: #0EA5E9;
    --brand-light: #38BDF8;
    --brand-lightest: #7DD3FC;
    
    --midnight-base: #0F172A;
    --midnight-surface: #1E293B;
    --midnight-border: #334155;
}

/* * Ensure all brand tiles maintain a consistent, uniform height 
 * so your grid looks perfectly aligned regardless of logo size.
 */
.brand-tile { 
    height: 9.5rem; 
}

/* Accessibility: crisp focus ring using the palette's vibrant cyan */
.focus-ring:focus-visible { 
    outline: 3px solid var(--brand-base); 
    outline-offset: 2px; 
    border-color: transparent;
}

/* Sidebar containment (if you use it on mobile views) */
.sidebar { 
    max-height: 68vh; 
    overflow-y: auto; 
    padding-right: 0.25rem; 
}

/* Smooth intro animation for the grid and contact card */
.fade-in { 
    animation: fadeIn 0.5s ease-out forwards; 
    opacity: 0; 
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(12px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}