@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500&display=swap');:root{--color-terra:#7D2E68;--color-gold:#D4AF37;--color-charcoal:#2D2D2D;--color-cream:#FDFBF7}.font-serif{font-family:'Cormorant Garamond',serif}body{font-family:'Inter',sans-serif}html{scroll-behavior:smooth}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.form-input{@apply border-gray-300 focus:border-terra focus:ring-terra rounded-md shadow-sm}.btn-primary{@apply bg-terra text-white px-6 py-2 rounded-md hover:bg-terra/90 transition-colors}.btn-secondary{@apply border-2 border-terra text-terra px-6 py-2 rounded-md hover:bg-terra/10 transition-colors}#mobile-portfolio{transition:opacity .2s ease-in-out}#mobile-portfolio.hidden{display:none;opacity:0}#mobile-portfolio:not(.hidden){display:block;opacity:1}

/* Header skeleton placeholder */
#header {
    min-height: 64px; /* Reserve space for header (h-16 = 64px) */
}

/* Hide skeleton when real header is loaded */
#header.loaded .header-skeleton {
    display: none;
}

/* Smooth transition when header loads */
#header.loaded {
    transition: opacity 0.2s ease-in-out;
}

/* Ensure sticky header stays at top */
#header nav {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Prevent footer loading flicker */
#footer {
    min-height: 200px; /* Reserve approximate space for footer */
}

/* Ingredient Autocomplete Styles */
.ingredient-autocomplete-container {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    z-index: 1000;
}

.ingredient-autocomplete-item {
    transition: background-color 0.15s ease-in-out;
}

.ingredient-autocomplete-item:hover {
    background-color: #f3f4f6;
}

.ingredient-autocomplete-item.bg-blue-100 {
    background-color: #dbeafe !important;
}

.ingredient-autocomplete-item mark {
    background-color: #fef08a;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/* Ensure autocomplete container doesn't overflow */
@media (max-width: 640px) {
    .ingredient-autocomplete-container {
        max-width: calc(100vw - 2rem);
        left: 0 !important;
        right: 0 !important;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}