/* ========================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Maps to the tailwind.config brand tokens so custom CSS
   components stay in sync with the Tailwind palette.
   ======================================== */

:root {
  /* Brand blue scale — updated to match Figma */
  --brand-primary: #2563eb;   /* blue-600  — buttons */
  --brand-hover:   #1d4ed8;   /* blue-700  — button hover */
  --brand-dark:    #1e3a8a;   /* blue-900  — headings, active tab */
  --brand-deeper:  #0d1847;   /* custom    — dark card end */
  --brand-navy:    #1e2d70;   /* custom    — dark card start */
  --brand-accent:  #60a5fa;   /* blue-400  — light accents */
  --brand-muted:   #93c5fd;   /* blue-300  — hover links */

  /* Surface (light sky backgrounds) */
  --surface-sky:    #e0f2fe;  /* sky-100   — soft section background */
  --surface-muted:  #bfdbfe;  /* blue-200  — inactive tab bg / dividers */
  --surface-border: #93c5fd;  /* blue-300  — borders, tab hover */

  /* Text */
  --text-muted: #6b7280;      /* gray-500  — secondary text */

  /* Gradients */
  --gradient-text: linear-gradient(135deg, #1e3a8a, #2563eb);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ========================================
   FLUID TYPOGRAPHY
   ======================================== */

h1 {
  font-size: clamp(1.75rem, 5vw + 0.5rem, 4.5rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.4rem, 3.5vw + 0.4rem, 3.75rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.1rem, 2vw + 0.25rem, 2rem);
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", sans-serif;
  background: linear-gradient(150deg, #ffffff 0%, #ddf0fa 40%, #a8d9f0 100%);
  background-attachment: fixed;
}

.smooth-scroll { scroll-behavior: smooth; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

.animate-fade-in   { animation: fade-in 1s ease-out; }
.animate-shimmer   { animation: shimmer 3s infinite; }
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
.particle          { animation: pulse-dot 2s ease-in-out infinite; }

/* ========================================
   COMPONENTS — TABS
   ======================================== */

.tab-btn { transition: all 0.3s ease; }

.tab-btn.active {
  background-color: var(--brand-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px var(--brand-accent), 0 4px 14px rgba(30, 58, 138, 0.35);
  transform: translateY(-1px);
}

.tab-btn:not(.active) {
  background-color: var(--surface-muted) !important;
  color: var(--brand-dark) !important;
  border: 1px solid var(--surface-border);
}

.tab-btn:not(.active):hover {
  background-color: var(--surface-border) !important;
  transform: translateY(-1px);
}

.topic-content        { display: none; }
.topic-content.active { display: block; animation: fade-in 0.5s ease-out; }

/* ========================================
   NAVIGATION
   ======================================== */

nav.scrolled {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(191, 219, 254, 0.8);
  box-shadow: 0 2px 16px rgba(59, 130, 246, 0.08);
}

nav.scrolled .nav-link-blur { color: #1e3a8a !important; }

.nav-link-blur { transition: color 0.2s ease; font-size: 1.30rem; color: #1e3a8a; }
.nav-link-blur:hover { color: #2563eb !important; }
nav.scrolled .nav-link-blur:hover { color: #2563eb !important; }

.nav-link-blur.nav-active {
  color: #1e40af !important;
  border-bottom: 2px solid #2563eb;
  padding-bottom: 2px;
}
nav.scrolled .nav-link-blur.nav-active { color: #1e40af !important; }

/* ========================================
   HAMBURGER / MOBILE MENU
   ======================================== */

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 60;
  position: relative;
  flex-shrink: 0;
}

/* Override the global button scale hover */
.hamburger-btn:hover {
  transform: none;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--brand-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu full-screen overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(90vw, 320px);
}

.mobile-menu-nav a {
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--surface-muted);
  transition: color 0.2s ease;
}

.mobile-menu-nav a:last-child { border-bottom: none; }
.mobile-menu-nav a:hover      { color: var(--brand-primary); }

.mobile-menu-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand-dark);
  padding: 8px;
  line-height: 1;
}

.mobile-menu-close:hover { transform: scale(1.1); }

/* Hide hamburger on desktop */
@media (min-width: 768px) {
  .hamburger-btn { display: none; }
  .mobile-menu   { display: none; }
}

/* ========================================
   HERO SECTION
   ======================================== */

@keyframes hero-blur-in {
  from { backdrop-filter: blur(0px);  -webkit-backdrop-filter: blur(0px); }
  to   { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

.hero-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  animation: hero-blur-in 0.8s ease 0.10s forwards;
}

/* Hero content vertical offset (desktop) */
.hero-content-offset { transform: translateY(-80px); }

/* Hero decorative ABS logo — positioned off-corner, fixed size */
.hero-abs-logo {
  position: absolute;
  bottom: -250px;
  right: -200px;
  width: 1188px;
  height: 1000px;
  object-fit: contain;
  object-position: bottom right;
  opacity: 1;
  transform: translateY(-90px);
  pointer-events: none;
}

/* ========================================
   CARDS & INTERACTIVE ELEMENTS
   ======================================== */

.news-card { transition: transform 0.3s ease, filter 0.3s ease; }
.news-card:hover img { transform: scale(1.1); filter: brightness(0.8); }

.event-card { transition: all 0.3s ease; }
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(37, 99, 235, 0.25);
}

button { transition: all 0.3s ease; }
button:hover { transform: scale(1.05); }

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(191, 219, 254, 0.6);
}

/* ========================================
   SECTION HAPPENING — DEFAULT (desktop) PADDING
   ======================================== */

.section-happening {
  padding-top: calc(8rem + 100px);
  padding-bottom: calc(4rem + 60px);
}

/* ========================================
   STATS BAR — RESPONSIVE
   ======================================== */

/* Assign a class .stats-grid to the 5-col grid in index.html */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0;
}

.stats-grid > div {
  border-right: none !important;
  border-bottom: 1px solid rgba(30, 58, 138, 0.5);
}

.stats-grid > div:last-child,
.stats-grid > div:nth-last-child(-n+1) {
  border-bottom: none;
}

/* Two-column layout: remove border-bottom from last two items */
.stats-grid > div:nth-last-child(1),
.stats-grid > div:nth-last-child(2) {
  border-bottom: none;
}

/* Stat value fluid sizing */
.stat-value {
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
  font-weight: 300;
  color: white;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .stats-grid > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(30, 58, 138, 0.5);
  }
  .stats-grid > div:nth-last-child(1),
  .stats-grid > div:nth-last-child(2),
  .stats-grid > div:nth-last-child(3) {
    border-bottom: none;
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .stats-grid > div {
    border-right: 1px solid rgba(30, 58, 138, 0.5) !important;
    border-bottom: none !important;
  }
  .stats-grid > div:last-child {
    border-right: none !important;
  }
}

/* ========================================
   TAB BUTTONS — COMPACT SIZE ON MOBILE
   ======================================== */

@media (max-width: 767px) {
  .tab-btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.8rem !important;
  }
}

/* ========================================
   TOPIC CONTENT PANELS — RESPONSIVE
   Targets panels without requiring class changes in HTML
   ======================================== */

/* Panel container — fluid height replacing fixed h-[500px] */
.topic-content > div {
  height: clamp(340px, 65vw, 500px) !important;
}

/* Inner content area — fluid horizontal padding replacing px-12 */
.topic-content > div .relative.z-10 {
  padding-left:   clamp(1rem, 4vw, 3rem) !important;
  padding-right:  clamp(1rem, 4vw, 3rem) !important;
  padding-top:    clamp(1rem, 3vw, 2rem) !important;
  padding-bottom: clamp(1rem, 3vw, 2rem) !important;
  overflow-y: auto;
}

/* Heading inside panel — fluid size */
.topic-content > div .relative.z-10 h3 {
  font-size: clamp(1.25rem, 3.5vw + 0.25rem, 3rem) !important;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem) !important;
  line-height: 1.15;
}

/* Body paragraphs inside panel — fluid size */
.topic-content > div .relative.z-10 p {
  font-size: clamp(0.8rem, 1.6vw + 0.2rem, 1.125rem) !important;
  line-height: 1.5;
  margin-bottom: clamp(0.4rem, 1.2vw, 2rem) !important;
}

/* CTA buttons — full width on small screens, reduced size */
.topic-content > div .relative.z-10 button {
  padding-top:    0.6rem !important;
  padding-bottom: 0.6rem !important;
  font-size: clamp(0.8rem, 1.4vw + 0.15rem, 1rem) !important;
}

@media (max-width: 479px) {
  .topic-content > div .relative.z-10 button {
    width: 100% !important;
  }
}

/* Reusable named classes (for any future use) */
.topic-panel {
  height: clamp(280px, 60vw, 500px);
}

.topic-panel-inner {
  padding-left:  clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

/* ========================================
   EVENT CARD ROW — RESPONSIVE
   ======================================== */

/* Used on the events page for horizontal card layout */
.event-card-row {
  flex-direction: column;
}

@media (min-width: 480px) {
  .event-card-row { flex-direction: row; }
}

/* ========================================
   RESPONSIVE BREAKPOINTS — GLOBAL
   ======================================== */

/* Small screens (< 640px) */
@media (max-width: 639px) {
  /* Scale down the hero decorative logo for phones */
  .hero-abs-logo {
    width: 620px;
    height: auto;
    bottom: -60px;
    right: -60px;
    transform: none;
    opacity: 1;
  }

  /* Reduce hero content offset */
  .hero-content-offset { transform: translateY(-10px); }

  /* Remove fixed left indent */
  [class*="ml-[72px]"] { margin-left: 0 !important; }

  /* Section padding reduction */
  .section-happening {
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 10vw, 8rem);
  }

  /* Responsive section py-32 override */
  section.py-32 { padding-top: 4rem; padding-bottom: 4rem; }

  /* Reduce inner padding on tight sections */
  .py-32 .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }

  /* Tab buttons remain scrollable */
  .hide-scrollbar { overflow-x: auto; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Responsive button width */
  .btn-full-mobile { width: 100% !important; }
}

/* Medium screens (640px – 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-abs-logo {
    width: 1050px;
    height: auto;
    bottom: -140px;
    right: -100px;
    transform: none;
    opacity: 1;
  }
  .hero-content-offset { transform: translateY(-40px); }
}

/* ========================================
   RESPONSIVE FIXES — MOBILE (≤ 767px)
   ======================================== */

@media (max-width: 767px) {
  .hide-scrollbar { overflow-x: auto; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* News card fixed heights — allow fluid height */
  .news-card { height: auto !important; min-height: 240px; }

  /* Reduce large padding sections */
  .py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-20 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Hero content translate */
  .hero-content-offset { transform: translateY(-10px); }

  /* Remove fixed left indent on hero content — all pages use ml-[72px] */
  [class*="ml-[72px]"] {
    margin-left: 0 !important;
  }

  /* Hero heading — scale down for small screens */
  section [class*="ml-[72px]"] h1,
  section .hero-content-offset h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  /* Reduce inner bottom gap in hero */
  section [class*="ml-[72px]"] .mb-12,
  section .hero-content-offset .mb-12 {
    margin-bottom: 1rem !important;
  }

  /* Homepage hero vertical padding */
  .hero-content-offset {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Section with large inline padding (What's Happening) */
  .section-happening {
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
  }
}