/* Base */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }

/* Dropdown visibility */
.dropdown-container { position: relative; }

/* Ensure anchors are easy to hit and the dropdown doesn't leave a pointer gap */
.nav-link, .dropdown-container > a { display: inline-flex; align-items: center; }

.dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% - 6px);
	margin-top: 0;
	z-index: 50;
}

/* Show dropdown on hover, focus (keyboard), or when the container has focus-within */
.dropdown-container:hover .dropdown-menu,
.dropdown-container:focus-within .dropdown-menu {
	display: block;
}

/* Mobile menu animation */
#mobile-menu { will-change: transform; }

/* Simple prose */
.prose h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.prose p { color: #374151; margin-bottom: .75rem; }
/* 1. Reserve space so the page doesn't "jump" */
#header-placeholder {
    min-height: 80px; /* Adjusts to match your real header height */
    background-color: #ffffff;
    display: block;
}

#footer-placeholder {
    min-height: 300px; /* Approximate height of your footer */
    background-color: #111827; /* Matches your gray-900 footer color */
    display: block;
}

/* 2. The Animation Keyframes */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 3. Apply the animation to the injected elements */
/* This targets the <header> tag once it loads inside the placeholder */
#header-placeholder > header {
    animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#footer-placeholder > footer {
    animation: fadeIn 0.8s ease-out forwards;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}