/**
 * Fairy Tale School - Custom Theme Stylesheet
 */

/* 1. Global Custom Property Variables */
:root {
  --color-fairy-brand: #8b5cf6;
  --color-gold: #d97706;
  --color-gold-light: #fef08a;
  --color-fairy-light: #faf5ff;
  --color-pink: #f472b6;
  --color-pink-light: #fce7f3;
  --color-text-dark: #3730a3;
  --color-bg-body: #faf8ff;
  
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lora', serif;
}

body.fairy-theme {
  background-color: var(--color-bg-body);
  font-family: var(--font-body);
  color: var(--color-text-dark);
  overflow-x: hidden;
}

.font-heading {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-style: italic;
}

.font-body {
  font-family: var(--font-body) !important;
}

/* Brand Colors Utilities */
.text-brand { color: var(--color-fairy-brand) !important; }
.bg-brand { background-color: var(--color-fairy-brand) !important; }
.bg-brand-light { background-color: var(--color-fairy-light) !important; }
.bg-warning-light { background-color: var(--color-pink-light) !important; border: 1.5px solid var(--color-pink); }
.bg-fairy-brand { background-color: var(--color-fairy-brand) !important; }
.bg-fairy-light { background-color: var(--color-fairy-light) !important; }

.btn-fairy {
  background: linear-gradient(135deg, var(--color-pink), var(--color-fairy-brand));
  color: white;
  border: 2px solid var(--color-gold-light);
  font-family: var(--font-heading);
  font-weight: bold;
  padding: 10px 25px;
  box-shadow: 0 4px 15px rgba(244, 114, 182, 0.4);
}
.btn-fairy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
  color: white;
}
.btn-brand {
  background-color: var(--color-gold);
  color: white;
  border: none;
  font-family: var(--font-heading);
}
.btn-brand:hover {
  background-color: #b45309;
  color: white;
}
.btn-outline-brand {
  border: 2px solid var(--color-fairy-brand);
  color: var(--color-fairy-brand);
}
.btn-outline-brand:hover {
  background-color: var(--color-fairy-brand);
  color: white;
}

/* Sticky Navbar */
.navbar {
  border-bottom: 3px solid var(--color-gold-light) !important;
  background-color: rgba(250, 245, 255, 0.85) !important;
  backdrop-filter: blur(10px);
}

.nav-link {
  font-family: var(--font-heading);
  color: var(--color-text-dark);
  font-weight: 600;
  transition: all 0.2s;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-gold) !important;
  background-color: rgba(254, 240, 138, 0.4);
  border-radius: 20px;
}

/* 2. Hero Section */
.hero-slider-item {
  height: 520px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-slider-item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(244, 114, 182, 0.2));
}

.hero-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  border: 2px solid var(--color-gold-light);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15) !important;
}

/* 3. Section Titles */
.section-title {
  color: var(--color-text-dark) !important;
}

.section-title::after {
  background-color: var(--color-gold-light) !important;
  height: 4px;
}

/* 4. Elegant Castle Cards */
.card {
  border-radius: 20px !important;
  border: 1.5px solid var(--color-gold-light) !important;
  background-color: white;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--color-pink) !important;
  box-shadow: 0 10px 25px rgba(244, 114, 182, 0.15) !important;
}

/* Specific Card variants */
.hw-card { background-color: #fff9fd; }
.event-card { background-color: #faf5ff; }
.facility-card { background-color: #fffdf5; }
.achievement-card { background-color: #fff9fd; }

.birthday-item {
  background-color: white;
  border-radius: 16px;
  border: 1.5px dashed var(--color-pink);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--color-fairy-light);
  border: 2px solid var(--color-gold-light) !important;
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.1) !important;
}
.dropdown-item {
  font-family: var(--font-heading);
  color: var(--color-text-dark);
}
.dropdown-item:hover {
  background-color: var(--color-gold-light);
  color: var(--color-text-dark);
}

/* Flower Petals Canvas style */
#flower-petals-canvas {
  opacity: 0.65;
}

/* Sparkle trail particle */
.sparkle-trail-particle {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  z-index: 99999;
}

/* Footer structure */
footer {
  background-color: var(--color-fairy-brand);
  border-top: 4px solid var(--color-gold-light);
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.social-icon:hover {
  transform: scale(1.1);
  background-color: var(--color-gold-light);
  color: var(--color-text-dark) !important;
}

.principal-img-frame {
  border: 5px solid var(--color-gold-light);
  border-radius: 30px;
}
.breadcrumb-item a {
  color: var(--color-fairy-brand) !important;
}
.text-muted {
  color: #5b617c !important;
}
.text-secondary {
  color: #4f46e5 !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--color-pink-light) !important;
  color: var(--color-fairy-brand) !important;
  box-shadow: none !important;
}


/* 5. Custom Themed Cursor */
body.fairy-theme, body.fairy-theme a, body.fairy-theme button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext y='24' font-size='24'%3E✨%3C/text%3E%3C/svg%3E") 16 16, auto !important; }