/* ==========================================================================
   KDCL EVENTS - GLOBAL DESIGN, TYPOGRAPHY & SPACING SYSTEM (v1.2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY & FONT ASSIGNMENTS
   -------------------------------------------------------------------------- */
:root {
  --app-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --app-font-serif: 'Poppins', 'Plus Jakarta Sans', sans-serif !important;
  --font-serif: 'Poppins', 'Plus Jakarta Sans', sans-serif !important;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html, body, body.light {
  font-family: var(--app-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings font family across the entire site */
h1, h2, h3, h4, h5, h6,
.font-serif,
[class*="font-serif"],
.page-section-title,
body.light .page-section-title,
.site-hero h1,
.hero-title {
  font-family: var(--app-font-serif) !important;
  letter-spacing: -0.015em;
}

/* Hero Title Sizing & Visual Impact */
.hero-title,
.site-hero h1 {
  font-family: var(--app-font-serif) !important;
  font-size: clamp(2.15rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* Section Main Titles (.page-section-title and section h3/h2) */
.page-section-title,
body.light .page-section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}

/* Section Sub-labels / Category Eyebrows */
.page-section-label,
body.light .page-section-label,
.home-label-center,
.home-label {
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}

/* Card & Component Headings */
.glass-panel h3,
.glass-panel h4 {
  font-family: var(--app-font-serif) !important;
  letter-spacing: -0.01em !important;
}

/* Body Paragraphs & Lists */
body.light p,
body.light li,
p, li {
  font-size: clamp(0.9375rem, 1.05vw, 1rem) !important;
  line-height: 1.68 !important;
}

/* Ensure blog prose is comfortably proportioned */
body.light .prose p,
body.light .blog-content p,
body.light .article-content p {
  font-size: 1.025rem !important;
  line-height: 1.75 !important;
}


/* --------------------------------------------------------------------------
   2. ELIMINATE EXCESSIVE BLANK / WHITE SPACE (VERTICAL RHYTHM)
   -------------------------------------------------------------------------- */

/* Reduce massive 112px (py-28) section padding to balanced modern spacing (44px - 64px) */
section.py-28,
div.py-28,
[class*="py-28"],
.values-section.py-28,
.milestones-section.py-28 {
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem) !important;
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem) !important;
}

/* Reduce 96px (py-24) padding */
section.py-24,
div.py-24,
[class*="py-24"] {
  padding-top: clamp(2rem, 3.8vw, 3.25rem) !important;
  padding-bottom: clamp(2rem, 3.8vw, 3.25rem) !important;
}

/* Normalize inner page hero top padding (was 144px - 192px / pt-36, pt-40, pt-48) */
section.pt-40,
section.pt-36,
section.pt-32,
div.pt-40,
div.pt-36,
div.pt-32,
[class*="pt-40"],
[class*="pt-36"],
[class*="pt-32"] {
  padding-top: clamp(6.25rem, 8.5vw, 7.5rem) !important;
}

/* Normalize inner page bottom padding (was pb-28, pb-24) */
section.pb-28,
section.pb-24,
div.pb-28,
div.pb-24,
[class*="pb-28"],
[class*="pb-24"] {
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem) !important;
}

/* Reduce oversized section header bottom margins (was 64px - 72px / mb-16, mb-18) */
.mb-16,
.mb-18,
[class*="mb-16"],
[class*="mb-18"] {
  margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem) !important;
}

/* Reduce massive top margins like mt-28 */
.mt-28,
[class*="mt-28"] {
  margin-top: clamp(2rem, 3.5vw, 3rem) !important;
}

/* Reduce excessive gap spacing like space-y-20 (was 80px) */
[class*="space-y-20"] > :not([hidden]) ~ :not([hidden]) {
  margin-top: clamp(2.25rem, 4vw, 3.5rem) !important;
}


/* --------------------------------------------------------------------------
   3. NAVBAR MEGA-MENU & ALL DROPDOWNS (UPCOMING, RECENT PAST, ABOUT, MEDIA)
   -------------------------------------------------------------------------- */

/* Dropdown Container Box */
.relative.group .group-hover\:visible > div,
div.relative.group > div.absolute > div {
  max-width: 95vw !important;
  border-radius: 1rem !important;
  background: rgba(13, 20, 36, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body.light .relative.group .group-hover\:visible > div,
body.light div.relative.group > div.absolute > div {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* --- Events Mega-Menu: Left Sidebar (Current/Upcoming & Recent Past Tabs) --- */
.relative.group .w-72,
div.relative.group [class*="w-72"] {
  width: 13.5rem !important; /* reduced from 288px (18rem) to 216px */
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light .relative.group .w-72,
body.light div.relative.group [class*="w-72"] {
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.relative.group .w-72 > div,
div.relative.group [class*="w-72"] > div {
  padding: 0.75rem 1.15rem !important; /* reduced from massive px-6 py-5 (20px vertical!) */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 0.5rem !important;
  margin: 0.3rem 0.5rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.light .relative.group .w-72 > div,
body.light div.relative.group [class*="w-72"] > div {
  color: #1e293b !important;
}

body.light .relative.group .w-72 > div:hover,
body.light div.relative.group [class*="w-72"] > div:hover {
  background-color: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
}

/* --- Events Mega-Menu: Right Events List Panel --- */
.relative.group .w-\[480px\],
div.relative.group [class*="w-[480px]"] {
  width: 22.5rem !important; /* reduced from 480px (30rem) to 360px */
  max-height: 400px !important;
  padding: 0.35rem !important;
}

/* Custom Slim Scrollbar for Events Dropdown */
.relative.group .w-\[480px\]::-webkit-scrollbar,
div.relative.group [class*="w-[480px]"]::-webkit-scrollbar {
  width: 5px;
}
.relative.group .w-\[480px\]::-webkit-scrollbar-track,
div.relative.group [class*="w-[480px]"]::-webkit-scrollbar-track {
  background: transparent;
}
.relative.group .w-\[480px\]::-webkit-scrollbar-thumb,
div.relative.group [class*="w-[480px]"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.relative.group .w-\[480px\]::-webkit-scrollbar-thumb:hover,
div.relative.group [class*="w-[480px]"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

body.light .relative.group .w-\[480px\]::-webkit-scrollbar-thumb,
body.light div.relative.group [class*="w-[480px]"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* Individual Event Links in Dropdown */
.relative.group .w-\[480px\] a,
div.relative.group [class*="w-[480px]"] a {
  padding: 0.65rem 1rem !important; /* reduced from px-10 py-5 (40px/20px!) */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: 0.5rem !important;
  margin-bottom: 2px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.relative.group .w-\[480px\] a:hover,
div.relative.group [class*="w-[480px]"] a:hover {
  padding-left: 1.25rem !important;
}

/* Light mode text contrast for event links */
body.light .relative.group .w-\[480px\] a,
body.light div.relative.group [class*="w-[480px]"] a {
  color: #1e293b !important;
}

body.light .relative.group .w-\[480px\] a:hover,
body.light div.relative.group [class*="w-[480px]"] a:hover {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 0.08) !important;
}

/* --- About & Media Dropdowns --- */
.relative.group > div.absolute .px-5.py-4,
.relative.group > div.absolute [class*="px-5"][class*="py-4"] {
  padding: 0.65rem 1.15rem !important;
  font-size: 0.875rem !important;
}

.relative.group > div.absolute .px-8.py-3,
.relative.group > div.absolute [class*="px-8"][class*="py-3"] {
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
}

body.light .relative.group > div.absolute a,
body.light .relative.group > div.absolute [class*="text-white"] {
  color: #1e293b !important;
}

body.light .relative.group > div.absolute a:hover,
body.light .relative.group > div.absolute [class*="hover:text-primary"]:hover {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 0.08) !important;
}


/* --------------------------------------------------------------------------
   4. EVENT DETAIL CONTENT TYPOGRAPHY SCALE (.event-html-content)
   -------------------------------------------------------------------------- */
.event-html-content h1 {
  font-size: clamp(1.65rem, 2.8vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.875rem !important;
}

.event-html-content h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

.event-html-content h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.65rem !important;
}

.event-html-content h4 {
  font-size: clamp(1.025rem, 1.4vw, 1.2rem) !important;
  font-weight: 600 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}

.event-html-content p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}


/* --------------------------------------------------------------------------
   5. BUTTONS, BADGES, CARDS & INTERACTIVE REFINEMENTS
   -------------------------------------------------------------------------- */
button, [role="button"], .btn {
  font-family: var(--app-font-sans);
  letter-spacing: 0.02em;
}

/* Event badges on cards */
.badge, [class*="bg-primary/20"], [class*="bg-primary/10"] {
  letter-spacing: 0.04em;
}

/* Cards hover elevation */
.home-card-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.home-card-lift:hover {
  transform: translateY(-3px) !important;
}

/* Mobile Drawer Links */
@media (max-width: 768px) {
  .fixed.z-\[9999\] a,
  [class*="z-[9999]"] a {
    font-size: 0.9375rem !important;
  }
}