/* ==========================================================================
   PREMIUM DESIGN OVERRIDE - JEEVAN JYOTI SECONDARY SCHOOL
   ========================================================================== */

/* --- Elevated Root Variables --- */
:root {
  /* Vibrant & Premium Color Palette */
  --color-primary: #1e1b4b;      /* Indigo 950 - Deepest, richer navy */
  --color-primary-light: #312e81;/* Indigo 800 */
  --color-secondary: #e11d48;    /* Rose 600 - Vibrant Nepal Crimson alternative */
  --color-secondary-hover: #be123c;
  --color-accent: #f59e0b;       /* Amber 500 - Brighter Gold */
  --color-accent-hover: #d97706;
  
  --color-bg-light: #f8fafc;     /* Clean Slate 50 */
  --color-bg-white: #ffffff;
  
  /* Modern Soft Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px -3px rgba(30, 27, 75, 0.05), 0 4px 6px -4px rgba(30, 27, 75, 0.05);
  --shadow-lg: 0 10px 25px -3px rgba(30, 27, 75, 0.1), 0 8px 10px -6px rgba(30, 27, 75, 0.05);
  --shadow-xl: 0 25px 50px -12px rgba(30, 27, 75, 0.25);
  
  /* Glassmorphism Defaults */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(30, 27, 75, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(16px);
}

/* ==========================================================================
   GLOBAL OVERRIDES & MICRO-ANIMATIONS
   ========================================================================== */

body {
  background-color: var(--color-bg-light);
  /* Subtle global mesh gradient background for a very premium feel */
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,0.02) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,0.02) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,0.02) 0, transparent 50%);
}

/* Enhanced Buttons with dynamic hover states */
.btn {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-full); /* Pill shaped buttons feel more modern */
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%;
  z-index: -1;
  transition: all 0.4s ease;
  transform: translateX(-100%);
}

.btn:hover::after {
  transform: translateX(100%);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-secondary), #f43f5e);
  border: none;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 20px rgba(225, 29, 72, 0.3);
}

/* ==========================================================================
   GLASSMORPHISM COMPONENTS
   ========================================================================== */

/* Header */
.main-header.scrolled {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

/* Cards */
.card {
  background-color: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
  background-color: rgba(255, 255, 255, 0.9);
}

.highlight-icon {
  background: linear-gradient(135deg, var(--color-secondary), #f43f5e);
  color: white;
  box-shadow: 0 8px 16px rgba(225, 29, 72, 0.2);
  border-radius: 50%; /* Modern circle icons */
}

.card:hover .highlight-icon {
  transform: scale(1.15) rotate(5deg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

/* ==========================================================================
   HERO SECTION MODERNIZATION
   ========================================================================== */
.hero-section {
  position: relative;
}

.hero-slide-bg::after {
  /* Richer gradient overlay on hero */
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(30, 27, 75, 0.4) 100%);
}

.hero-title {
  text-shadow: 2px 4px 10px rgba(0,0,0,0.3);
}

.hero-tagline {
  display: inline-block;
  padding: 6px 16px;
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ==========================================================================
   NOTICE BOARD & EVENTS
   ========================================================================== */
.notice-tabs-container {
  background-color: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}

.notice-tabs {
  background-color: rgba(30, 27, 75, 0.03);
}

.notice-item {
  transition: all 0.3s ease;
  border-radius: var(--radius-md);
  padding: 15px;
}

.notice-item:hover {
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-md);
  transform: translateX(8px);
  border-bottom-color: transparent;
}

.upcoming-events-sidebar {
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-light));
  position: relative;
  overflow: hidden;
}

.upcoming-events-sidebar::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-secondary) 0%, transparent 70%);
  opacity: 0.2;
}

/* ==========================================================================
   ANIMATIONS UTILITY CLASSES
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}