/* Navigation Component */
.navbar {
  @apply sticky top-0 z-50 bg-cream-50 border-b border-wood-100 backdrop-blur-sm bg-cream-50/95;
  transition: box-shadow 0.3s ease-out;
}

.navbar.scrolled {
  @apply shadow-sm;
}

.navbar-container {
  @apply flex items-center justify-between h-20 container-max;
}

.navbar-brand {
  @apply text-xl font-serif font-bold text-wood-900 tracking-wide;
  letter-spacing: 0.05em;
}

.navbar-links {
  @apply hidden lg:flex gap-12 items-center;
}

.navbar-link {
  @apply text-sm text-wood-700 hover:text-wood-900 transition-colors duration-300 font-medium uppercase tracking-wide;
  letter-spacing: 0.05em;
}

.navbar-link.active {
  @apply text-wood-900 border-b-2 border-wood-700 pb-1;
}

/* Hero Section */
.hero {
  @apply relative min-h-[90vh] md:min-h-screen flex items-center justify-center bg-cream-50 overflow-hidden;
}

.hero::before {
  content: '';
  @apply absolute inset-0 opacity-30 pointer-events-none;
  background: radial-gradient(ellipse at 50% 50%, rgba(184, 128, 77, 0.1) 0%, transparent 70%);
}

.hero-content {
  @apply relative text-center max-w-4xl mx-auto px-4 md:px-6 lg:px-8 animate-fade-in z-10;
}

.hero-pre-title {
  @apply inline-block text-xs md:text-sm text-wood-600 font-sans uppercase tracking-widest mb-6 md:mb-8;
  letter-spacing: 0.15em;
}

.hero-title {
  @apply text-6xl md:text-8xl font-serif font-light text-wood-900 mb-6 md:mb-8 text-balance tracking-tight;
  line-height: 1.1;
}

.hero-divider {
  @apply w-12 h-1 bg-wood-400 mx-auto mb-8 md:mb-10;
}

.hero-subtitle {
  @apply text-base md:text-xl text-wood-600 mb-4 md:mb-6 font-light font-serif italic;
}

.hero-description {
  @apply text-sm md:text-base text-wood-700 mb-8 md:mb-12 max-w-2xl mx-auto leading-relaxed font-light;
}

.michelin-star {
  @apply inline-flex items-center gap-2 text-wood-700 font-light text-sm uppercase tracking-widest mb-4 md:mb-6;
  letter-spacing: 0.1em;
}

.michelin-symbol {
  @apply text-2xl md:text-3xl text-wood-600;
}

/* Button Group */
.button-group {
  @apply flex flex-col sm:flex-row gap-4 md:gap-6 justify-center items-center;
}

/* Card Component - Premium style */
.card {
  @apply bg-white rounded-none shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden;
  border: 1px solid rgba(157, 104, 64, 0.1);
}

.card:hover {
  @apply border-wood-300;
}

.card-header {
  @apply h-64 bg-gradient-to-br from-wood-100 to-wood-200 relative overflow-hidden;
}

.card-body {
  @apply p-6 md:p-8;
}

.card-title {
  @apply text-lg md:text-xl font-serif font-semibold text-wood-900 mb-3 tracking-tight;
}

.card-text {
  @apply text-wood-600 text-sm leading-relaxed mb-4 font-light;
}

.card-link {
  @apply text-wood-700 hover:text-wood-900 font-medium text-sm transition-colors duration-300 inline-flex items-center gap-2;
}

.card-link:hover {
  @apply translate-x-1;
}

/* Section Styles */
.section {
  @apply scroll-mt-20;
}

.section-header {
  @apply text-center mb-12 md:mb-20 animate-slide-up;
}

.section-pre-title {
  @apply text-xs md:text-sm text-wood-600 font-sans uppercase tracking-widest mb-4 md:mb-6;
  letter-spacing: 0.15em;
}

.section-title {
  @apply text-4xl md:text-6xl font-serif font-light text-wood-900 mb-4 md:mb-8 text-balance tracking-tight;
  line-height: 1.1;
}

.section-subtitle {
  @apply text-base md:text-lg text-wood-600 max-w-2xl mx-auto font-light leading-relaxed;
}

.section-divider {
  @apply w-12 h-1 bg-wood-400 mx-auto mt-8 md:mt-10;
}

/* Grid layouts */
.grid-two {
  @apply grid md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center;
}

.grid-three {
  @apply grid md:grid-cols-3 gap-6 md:gap-8;
}

/* Content sections */
.content-block {
  @apply prose prose-lg max-w-none text-wood-700 leading-relaxed;
}

.content-block h3 {
  @apply text-2xl md:text-3xl font-serif font-semibold text-wood-900 mb-4 md:mb-6 tracking-tight;
}

.content-block p {
  @apply text-base md:text-lg text-wood-700 mb-4 font-light leading-relaxed;
}

.accent-box {
  @apply bg-gradient-to-br from-wood-50 to-wood-100 rounded-none p-8 md:p-12 border border-wood-200;
}

.accent-box-text {
  @apply text-center font-serif text-2xl md:text-4xl italic text-wood-900 font-light leading-relaxed;
}

/* Team section */
.team-member {
  @apply text-center animate-slide-up;
}

.team-member-avatar {
  @apply w-48 h-48 md:w-56 md:h-56 mx-auto mb-6 md:mb-8 rounded-none bg-gradient-to-br from-wood-200 to-wood-400 flex items-center justify-center text-6xl;
}

.team-member-name {
  @apply text-2xl md:text-3xl font-serif font-semibold text-wood-900 mb-2 tracking-tight;
}

.team-member-role {
  @apply text-wood-700 font-medium mb-4 uppercase text-sm tracking-widest;
  letter-spacing: 0.1em;
}

.team-member-bio {
  @apply text-wood-600 text-sm leading-relaxed max-w-sm mx-auto font-light;
}

.team-grid {
  @apply grid md:grid-cols-2 gap-12 md:gap-16 mb-12 md:mb-16;
}

/* Footer Component */
.footer {
  @apply bg-wood-900 text-cream-50 border-t border-wood-800;
}

.footer-content {
  @apply container-max section-padding;
}

.footer-grid {
  @apply grid md:grid-cols-3 gap-12 md:gap-16 mb-12 md:mb-16;
}

.footer-section h3 {
  @apply text-lg font-serif font-semibold mb-6 text-cream-100 tracking-tight;
}

.footer-section p {
  @apply text-cream-50/80 text-sm leading-relaxed font-light;
}

.footer-link {
  @apply text-cream-50/80 hover:text-cream-50 transition-colors duration-300 text-sm font-light;
}

.footer-link:hover {
  @apply border-b border-cream-50/50;
}

.footer-divider {
  @apply border-t border-wood-700 pt-8 md:pt-12 mt-8 md:mt-12;
}

.footer-bottom {
  @apply flex flex-col md:flex-row justify-between items-center text-cream-50/70 text-xs md:text-sm gap-4;
}

.footer-credit {
  @apply text-cream-50/60 font-light;
}

/* Contact Form */
.form-group {
  @apply mb-6 md:mb-8;
}

.form-label {
  @apply block text-wood-900 font-medium mb-2 font-serif text-sm md:text-base tracking-tight;
}

.form-input,
.form-textarea {
  @apply w-full px-4 md:px-6 py-3 md:py-4 border border-wood-200 rounded-none bg-cream-50 text-wood-900 text-base font-light transition-all duration-300;
}

.form-input:focus,
.form-textarea:focus {
  @apply outline-none border-wood-700 bg-white shadow-sm;
}

.form-textarea {
  @apply resize-none min-h-40 md:min-h-48 font-sans;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    @apply text-4xl;
  }

  .section-title {
    @apply text-3xl;
  }

  .hero-content {
    @apply py-12;
  }
}

/* Utility classes */
.no-prose {
  @apply prose-headings:font-serif prose-headings:font-normal prose-p:font-light;
}

.text-cream {
  @apply text-cream-50;
}

.bg-cream {
  @apply bg-cream-50;
}