/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Lato:wght@400;700&display=swap');

/* Tailwind CSS Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Root variable definitions based on the brand identity */
:root {
  --space-blue: #0a192f;
  --cosmic-crimson: #640d14;
  --luminous-gold: #ffd700;
  --starlight-white: #f8f8f8;
  --nebula-gray: #a9a9a9;

  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Lato', sans-serif;
}

/* Base body styles */
body {
  background-color: var(--space-blue);
  color: var(--starlight-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom utility classes for applying fonts */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* Custom utility classes for applying brand colors */
.bg-space-blue { background-color: var(--space-blue); }
.text-luminous-gold { color: var(--luminous-gold); }
.text-nebula-gray { color: var(--nebula-gray); }
.text-starlight-white { color: var(--starlight-white); }
.border-luminous-gold { border-color: var(--luminous-gold); }

@layer components {
  /* --- Buttons --- */
  .btn {
    @apply inline-block px-8 py-3 rounded-full font-bold uppercase tracking-wider transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-space-blue focus:ring-luminous-gold;
  }
  .btn-primary {
    @apply bg-luminous-gold text-space-blue shadow-lg shadow-luminous-gold/20;
  }
  .btn-secondary {
    @apply bg-transparent border-2 border-luminous-gold text-luminous-gold hover:bg-luminous-gold hover:text-space-blue;
  }

  /* --- Hero Background --- */
  .hero-bg {
    background-image: linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.7)), url('../a926afec-fe84-45d3-82fb-0011bdba8e14.jfif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  /* --- Page Header Background --- */
  .page-header-bg {
      @apply bg-gradient-to-b from-white/5 to-transparent;
      border-bottom: 1px solid theme('colors.white / 10%');
  }

  /* --- Application Card --- */
  .application-card {
    @apply bg-white/5 rounded-lg shadow-lg overflow-hidden h-full transition-all duration-300 border border-transparent;
  }
  .application-card-link:hover .application-card {
    @apply -translate-y-2 shadow-2xl shadow-luminous-gold/10 border-luminous-gold/20;
  }

  /* --- Active Navigation Link --- */
  .nav-link.active {
    @apply text-luminous-gold font-bold;
  }

  /* --- Dropdown Menu Component --- */
  .dropdown {
    @apply relative;
  }

  /* Base dropdown menu (hidden by default) */
  .dropdown-menu {
    @apply absolute top-full left-0 mt-2 w-56 bg-space-blue/80 backdrop-blur-lg border border-white/10 rounded-lg shadow-2xl z-50
           opacity-0 invisible transform -translate-y-2 transition-all duration-300;
  }

  /* Show dropdown on desktop hover */
  .dropdown:hover > .dropdown-menu {
    @apply opacity-100 visible translate-y-0;
  }

  /* Show dropdown when .open is added (mobile toggle) */
  .mobile-dropdown.open > .dropdown-menu {
    @apply opacity-100 visible translate-y-0;
  }

  .dropdown-item {
    @apply block w-full px-4 py-2 text-left text-sm text-nebula-gray hover:bg-luminous-gold/10 hover:text-starlight-white transition-colors duration-200;
  }
} /* ✅ closes @layer components */

/* --- Custom styles for the Typography plugin --- */
.prose { color: var(--nebula-gray); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: var(--luminous-gold);
    font-family: var(--font-heading);
}
.prose strong { color: var(--starlight-white); }
.prose a {
    color: var(--luminous-gold);
    transition: color 0.3s ease;
}
.prose a:hover { color: var(--starlight-white); }