/* Custom styles that complement Tailwind */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure all interactive elements have proper focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #c8952e;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a1628;
}
::-webkit-scrollbar-thumb {
    background: #1a3a6b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c8952e;
}

/* Prevent layout shift on images */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile menu transitions */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
    max-height: 400px;
}

/* Gold accent line under headings */
.section-accent::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #c8952e, #e0bb5c);
    margin-top: 1rem;
    border-radius: 2px;
}

/* Subtle pattern overlay for sections */
.pattern-overlay {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
    background-size: 24px 24px;
}

/* Card border glow on hover */
.card-hover:hover {
    border-color: rgba(200, 149, 46, 0.2) !important;
}