@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: 'Montserrat', sans-serif;
  --font-mono: 'Montserrat', monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --nav-text: white !important;
  --radius: 0.625rem;
  --background: #101010;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #ebc341;
  --primary-foreground: #000000;
  --secondary: #2a2a2a;
  --secondary-foreground: #ffffff;
  --muted: #2a2a2a;
  --muted-foreground: #a1a1a1;
  --accent: #2a2a2a;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --ring: #ebc341;
  --chart-1: #3b82f6;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #6366f1;
  --chart-5: #ec4899;
  --sidebar: #1a1a1a;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ebc341;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #2a2a2a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2a2a2a;
  --sidebar-ring: #ebc341;
  --header-height: 4rem;
  --header-zindex: 50;
  --sidebar-zindex: 900;
  :root {
  /* Menu Colors */
  --menu-primary: white;
  --menu-primary-hover: #ebc341;
  --menu-primary-active: #ebc341;
}
}

.dark {
  --background: #101010;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #ebc341;
  --primary-foreground: #000000;
  --secondary: #2a2a2a;
  --secondary-foreground: #ffffff;
  --muted: #2a2a2a;
  --muted-foreground: #a1a1a1;
  --accent: #2a2a2a;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --ring: #ebc341;
  --chart-1: #3b82f6;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #6366f1;
  --chart-5: #ec4899;
  --sidebar: #1a1a1a;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ebc341;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #2a2a2a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2a2a2a;
  --sidebar-ring: #ebc341;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Montserrat', sans-serif;
  }

  /* ===== Montserrat Font Faces ===== */
  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  /* ===== Navigation Reset ===== */
  nav {
    a {
      @apply text-white hover:text-primary transition-colors duration-200;
      
      &.active {
        @apply text-primary;
      }
    }
  }
  
  /* Specific navigation structure */
  .main-nav > ul > li > a,
  .submenu > li > a {
    @apply text-white hover:text-primary;
  }

  /* Specific styles for navigation links */
  nav a.nav-link,
  nav a.submenu-link {
    color: white !important;
  }

  nav a.nav-link:hover,
  nav a.submenu-link:hover {
    color: var(--menu-primary-hover) !important;
  }

  /* ===== Typography ===== */
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold leading-tight tracking-tight;
  }

  h1 {
    @apply text-5xl md:text-7xl;
  }

  h2 {
    @apply text-4xl md:text-5xl;
  }

  h3 {
    @apply text-3xl md:text-4xl;
  }

  h4 {
    @apply text-2xl md:text-3xl;
  }

  h5 {
    @apply text-xl md:text-2xl;
  }

  h6 {
    @apply text-lg md:text-xl;
  }
}


@layer base {
  :root {
    --background: 20 14.3% 4.1%; /* #101010 */
    --foreground: 0 0% 98%; /* #fafafa */
    
    --card: 20 14.3% 4.1%; /* #1a1a1a */
    --card-foreground: 0 0% 98%;
    
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 47 89% 59%; /* #ebc341 */
    --primary-foreground: 0 0% 0%; /* black */
    
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 240 3.7% 15.9%; /* #2a2a2a */
    --input: 240 3.7% 15.9%;
    --ring: 47 89% 59%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  /* ===== Navigation Components ===== */
  .nav-link {
    @apply text-white hover:text-primary transition-colors duration-200;
    
    &.active {
      @apply text-primary;
    }
  }

  .submenu-link {
    @apply text-white hover:text-primary transition-colors duration-200;
  }

/* ===== Button Styles ===== */
.btn {
  @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  @apply disabled:opacity-50 disabled:pointer-events-none cursor-pointer;
}

/* Primary Button - Gold with black text */
.btn-primary {
  @apply bg-[#ebc341] text-black hover:bg-[#ebc341]/90 font-bold py-4 px-8 rounded-md text-lg;
}

/* Outline Button */
.btn-outline {
  @apply border border-[#ebc341] text-[#ebc341] hover:bg-[#ebc341]/10 py-2 px-4 rounded-md;
}

/* Secondary Button */
.btn-secondary {
  @apply bg-gray-600 text-white hover:bg-gray-600/80 py-2 px-4 rounded-md;
}

/* Destructive Button */
.btn-destructive {
  @apply bg-red-600 text-white hover:bg-red-600/90;
}

/* Link Buttons */
a.btn {
  color: inherit !important;
  text-decoration: none !important;
}

/* Specific primary button styling */
a.btn-primary {
  color: var(--primary-foreground) !important; /* Will be black */
}

/* Hover states */
a.btn-primary:hover {
  color: var(--primary-foreground) !important; /* Maintain black on hover */
}

/* Sizes */
.btn-sm {
  @apply h-9 px-3;
}
.btn-md {
  @apply h-10 px-4 py-2;
}
.btn-lg {
  @apply h-11 px-8;
}

/* ===== Fixes for Links ===== */
a.btn {
  @apply no-underline;
}


/* Sizes */
.btn-sm {
  @apply h-9 px-3;
}
.btn-md {
  @apply h-10 px-4 py-2;
}
.btn-lg {
  @apply h-11 px-8;
}

/* Specific styles for primary button */
.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  background-color: var(--primary-hover, #d4a931); /* Optional hover color */
  color: var(--primary-foreground);
}

  /* ===== Card Styles ===== */
  .card {
    @apply bg-card text-card-foreground border border-border rounded-xl hover:border-primary/30 transition-all hover:shadow-lg hover:shadow-primary/10;
  }

  /* ===== Form Elements ===== */
  .input {
    @apply bg-input border border-input rounded-md px-4 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent;
  }
}

@layer utilities {
  /* Sticky Header */
  .sticky-with-header {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    height: calc(100vh - var(--header-height) - 1rem);
    overflow-y: auto;
    z-index: 40; /* Below header but above content */
  }
  /* Masonry grid fix */
  .break-inside-avoid {
    break-inside: avoid;
  }

  /* Scrollbar Styles */
  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--primary)) oklch(var(--background));
  }

  .scrollbar::-webkit-scrollbar {
    @apply w-2;
  }

  .scrollbar::-webkit-scrollbar-track {
    @apply bg-background;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    @apply bg-primary/50 rounded-full hover:bg-primary/70;
  }

  /* Animation Classes */
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

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

  /* Pointer Styles */
  .cursor-pointer {
    cursor: pointer !important;
  }

  /* For image overlays */
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
}

/* Global Pointer Styles */
button, 
a, 
[role="button"], 
input[type="submit"], 
input[type="button"],
[onclick],
[tabindex]:not([tabindex="-1"]) {
  @apply cursor-pointer;
}


/* Section Padding */
.section-padding {
  @apply py-20 px-4;
}

/* Header styles - must be sticky */
header {
  position: sticky;
  top: 0;
  z-index: var(--header-zindex);
  background: #101010; /* Match your header bg color */
  width: 100%;
}

/* Sticky sidebar utility class */
.sticky-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 1rem); /* Starts below header */
  height: calc(100vh - var(--header-height) - 1rem);
  overflow-y: auto;
  z-index: var(--sidebar-zindex);
}

.sticky {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Cards */
.glass-effect {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes goldShift {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.gold-text {
  background-size: 200% auto;
  animation: goldShift 5s ease infinite;
}