@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Mukta+Malar:wght@400;600;700&display=swap');

:root {
  --color-primary-navy: #07132b;
  --color-dark-navy: #0b1b3d;
  --color-mid-navy: #152952;
  --color-gold: #c5a059;
  --color-gold-light: #dfbe7a;
  --color-gold-dark: #9e7b32;
  --color-cream: #faf8f5;
  --color-cream-subtle: #f4efe6;
  --color-text-main: #1e293b;
  --color-text-muted: #64748b;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-text-main);
  background-color: #ffffff;
}

body {
  overflow-x: clip;
  width: 100%;
  position: relative;
}

.font-serif-luxury {
  font-family: 'Cinzel', serif;
}

.font-editorial {
  font-family: 'Playfair Display', serif;
}

.font-tamil {
  font-family: 'Mukta Malar', 'Plus Jakarta Sans', sans-serif;
}

/* Gold Gradient Utilities */
.text-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa820a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #c5a059 0%, #e6c887 50%, #a48033 100%);
}

.bg-navy-gradient {
  background: linear-gradient(180deg, #07132b 0%, #0b1b3d 60%, #08142c 100%);
}

.gold-border {
  border-color: rgba(197, 160, 89, 0.35);
}

.gold-glow {
  box-shadow: 0 10px 30px -10px rgba(197, 160, 89, 0.3);
}

/* Custom Heritage Ribbon & Crest */
.crest-circle {
  border: 3px solid #c5a059;
  box-shadow: 0 0 25px rgba(197, 160, 89, 0.25);
}

/* Card Hover Transitions */
.luxury-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.luxury-card:hover {
  transform: translateY(-5px);
  border-color: rgba(197, 160, 89, 0.5);
  box-shadow: 0 20px 35px -15px rgba(7, 19, 43, 0.12);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c5a059;
}

/* Badge Glow for Affiliations */
.badge-gold {
  background: rgba(197, 160, 89, 0.12);
  color: #936e23;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

/* Mobile Quick-Action Bottom Dock */
.mobile-bottom-dock {
  background-color: #07132b !important;
  background: #07132b !important;
  border-top: 1px solid rgba(197, 160, 89, 0.35) !important;
  box-shadow: 0 -8px 25px rgba(4, 11, 26, 0.45) !important;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
}

/* Mobile Active Tap Feedback */
.tap-effect {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tap-effect:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* Sticky Header - 100% Solid Background & No Overlap */
header, .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(7, 19, 43, 0.08) !important;
}

/* Ensure Anchor Targets Do Not Scroll Behind Header */
html {
  scroll-padding-top: 85px !important;
}

section[id] {
  scroll-margin-top: 85px !important;
}

/* Pure CSS Drawer & Overlay (Works with zero JS or under strict CSP simulators) */
/* Accessible Off-Screen Checkbox Hack - NEVER use display:none or pointer-events:none */
.nav-drawer-toggle,
#navDrawerCheckbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.001 !important;
  z-index: -9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#mobileDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 85% !important;
  max-width: 360px !important;
  height: 100% !important;
  background-color: #040b1a !important;
  color: #ffffff !important;
  z-index: 100000 !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#drawerOverlay {
  position: fixed !important;
  inset: 0 !important;
  background-color: rgba(4, 11, 26, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* Checkbox State Triggers (100% Pure CSS - No JS Needed) */
#navDrawerCheckbox:checked ~ #drawerOverlay,
.nav-drawer-toggle:checked ~ #drawerOverlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#navDrawerCheckbox:checked ~ #mobileDrawer,
.nav-drawer-toggle:checked ~ #mobileDrawer {
  transform: translateX(0) !important;
}

/* Also support JS classes if JS is active */
#mobileDrawer.drawer-open {
  transform: translateX(0) !important;
}

#drawerOverlay.overlay-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (min-width: 1024px) {
  #mobileDrawer, #drawerOverlay, #navDrawerCheckbox {
    display: none !important;
  }
}

/* ==========================================================================
   COMPLETE COLOR SYSTEM & THEME UTILITIES (High-Contrast Desktop & Mobile)
   ========================================================================== */

/* --- SLATE PALETTE --- */
.text-slate-100 { color: #f1f5f9 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }

.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-300 { background-color: #cbd5e1 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }

.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-800 { border-color: #1e293b !important; }

/* --- AMBER / GOLD PALETTE --- */
.text-amber-100 { color: #fef3c7 !important; }
.text-amber-200 { color: #fde68a !important; }
.text-amber-300, .text-amber-300\/90 { color: #fcd34d !important; }
.text-amber-400, .text-amber-400\/80 { color: #fbbf24 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-900 { color: #78350f !important; }
.text-amber-950 { color: #451a03 !important; }

.bg-amber-50, .bg-amber-50\/70 { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-200 { background-color: #fde68a !important; }
.bg-amber-300 { background-color: #fcd34d !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1) !important; }
.bg-amber-600 { background-color: #d97706 !important; }

.border-amber-100 { border-color: #fef3c7 !important; }
.border-amber-200 { border-color: #fde68a !important; }
.border-amber-400, .border-amber-400\/30 { border-color: #fbbf24 !important; }
.border-amber-500, .border-amber-500\/40, .border-amber-500\/50 { border-color: #f59e0b !important; }

/* --- NAVY PALETTE --- */
.text-navy-800 { color: #0f224a !important; }
.text-navy-900 { color: #07132b !important; }
.text-navy-950 { color: #040b1a !important; }

.bg-navy-800 { background-color: #0f224a !important; }
.bg-navy-800\/80 { background-color: rgba(15, 34, 74, 0.8) !important; }
.bg-navy-800\/90 { background-color: rgba(15, 34, 74, 0.9) !important; }
.bg-navy-900 { background-color: #07132b !important; }
.bg-navy-900\/40 { background-color: rgba(7, 19, 43, 0.4) !important; }
.bg-navy-900\/50 { background-color: rgba(7, 19, 43, 0.5) !important; }
.bg-navy-900\/60 { background-color: rgba(7, 19, 43, 0.6) !important; }
.bg-navy-900\/80 { background-color: rgba(7, 19, 43, 0.8) !important; }
.bg-navy-950 { background-color: #040b1a !important; }
.bg-navy-950\/80 { background-color: rgba(4, 11, 26, 0.8) !important; }

.border-navy-700 { border-color: #1e3a8a !important; }
.border-navy-800, .border-navy-800\/80 { border-color: rgba(15, 34, 74, 0.8) !important; }
.border-navy-900, .border-navy-900\/90 { border-color: rgba(7, 19, 43, 0.9) !important; }

/* --- GOLD PALETTE --- */
.text-gold-300 { color: #f1dfa8 !important; }
.text-gold-400 { color: #e5c175 !important; }
.text-gold-500 { color: #c5a059 !important; }
.bg-gold-400 { background-color: #e5c175 !important; }
.bg-gold-500 { background-color: #c5a059 !important; }
.border-gold-500, .border-gold-500\/20, .border-gold-500\/30, .border-gold-500\/40, .border-gold-500\/50 {
  border-color: #c5a059 !important;
}

/* --- OTHER ACCENTS --- */
.text-cyan-300 { color: #67e8f9 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-800 { color: #065f46 !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1) !important; }

/* Font size utilities */
.text-\[9\.5px\] { font-size: 9.5px !important; }
.text-\[10px\] { font-size: 10px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-\[15px\] { font-size: 15px !important; }

/* Hover states for interactive elements */
.hover\:text-amber-300:hover { color: #fcd34d !important; }
.hover\:text-amber-400:hover { color: #fbbf24 !important; }
.hover\:text-amber-600:hover { color: #d97706 !important; }
.hover\:text-amber-700:hover { color: #b45309 !important; }
.hover\:text-white:hover { color: #ffffff !important; }
.hover\:bg-navy-800:hover { background-color: #0f224a !important; }
.hover\:bg-navy-900:hover { background-color: #07132b !important; }
.hover\:bg-slate-100:hover { background-color: #f1f5f9 !important; }

/* Specific Component High-Contrast Enhancements */
.open-membership-modal {
  background-color: #07132b !important;
  color: #fcd34d !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.open-membership-modal:hover {
  background-color: #0f224a !important;
  color: #ffffff !important;
  border-color: #c5a059 !important;
}

/* Footer High-Contrast Styling */
footer {
  background-color: #040b1a !important;
}
footer h4 {
  color: #ffffff !important;
}
footer p, footer span {
  color: #cbd5e1 !important;
}
footer a {
  color: #cbd5e1 !important;
  transition: color 0.2s ease;
}
footer a:hover {
  color: #fcd34d !important;
}
footer .text-slate-400,
footer .text-slate-500,
footer .text-slate-600 {
  color: #94a3b8 !important;
}

/* Top Announcement Bar */
.bg-navy-950 {
  background-color: #040b1a !important;
  color: #cbd5e1 !important;
}
.bg-navy-950 a {
  color: #e2e8f0 !important;
}
.bg-navy-950 a:hover {
  color: #fcd34d !important;
}

/* Mobile Accordion Smooth Collapse */
.club-details-collapse {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}