/**
 * Little Jungle School - Custom Theme Stylesheet
 */

/* 1. Global Custom Property Variables */
:root {
  --color-jungle-dark: #064e3b;
  --color-jungle-light: #10b981;
  --color-leaf: #d1fae5;
  --color-bark: #451a03;
  --color-bark-light: #b45309;
  --color-cream: #fffbeb;
  --color-warning: #f59e0b;
  --color-text-dark: #292524;
  
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Fredoka', sans-serif;
}

body.jungle-theme {
  background-color: var(--color-cream);
  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-body {
  font-family: var(--font-body) !important;
}

/* Brand Colors Utilities */
.text-brand { color: var(--color-jungle-dark) !important; }
.bg-brand { background-color: var(--color-jungle-dark) !important; }
.bg-brand-light { background-color: var(--color-leaf) !important; }
.bg-warning-light { background-color: #fffbeb; border: 2px dashed var(--color-jungle-light); }
.bg-jungle-dark { background-color: var(--color-jungle-dark) !important; }
.bg-jungle-light { background-color: var(--color-leaf) !important; }

.btn-jungle {
  background-color: var(--color-bark-light);
  color: white;
  border: 3px solid var(--color-bark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: bold;
}
.btn-jungle:hover {
  background-color: var(--color-jungle-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(6, 78, 59, 0.4);
}
.btn-brand {
  background-color: var(--color-jungle-light);
  color: white;
  border: 2px solid var(--color-jungle-dark);
}
.btn-brand:hover {
  background-color: var(--color-jungle-dark);
  color: white;
  transform: scale(1.05);
}
.btn-outline-brand {
  border: 2px solid var(--color-bark-light);
  color: var(--color-bark-light);
}
.btn-outline-brand:hover {
  background-color: var(--color-bark-light);
  color: white;
}

/* Top bar and header */
.navbar {
  border-bottom: 5px solid var(--color-jungle-dark) !important;
}

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

.nav-link:hover, .nav-link.active {
  color: var(--color-bark-light) !important;
  background-color: rgba(209, 250, 229, 0.5);
  border-radius: 8px;
}

/* 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(to right, rgba(6, 78, 59, 0.6), rgba(0, 0, 0, 0.1));
}

.hero-content {
  background: rgba(255, 251, 235, 0.95);
  border-radius: 20px;
  border: 4px solid var(--color-bark);
  box-shadow: 8px 8px 0px var(--color-bark) !important;
}

/* 3. Section Title with Organic Leaves styling */
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: ' 🍂';
  font-size: 1.25rem;
}

/* 4. Wooden styled Cards */
.card {
  border-radius: 16px !important;
  border: 3px solid var(--color-bark) !important;
  background-color: white;
  box-shadow: 4px 4px 0px var(--color-bark);
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px var(--color-bark) !important;
}

/* Specific Card variants */
.hw-card { background-color: #f0fdf4; }
.event-card { background-color: #fffbeb; }
.facility-card { background-color: #fafaf9; }
.achievement-card { background-color: #f0fdf4; }

/* Birthday cards */
.birthday-item {
  background-color: white;
  border-radius: 12px;
  border: 2px solid var(--color-bark-light);
  box-shadow: 2px 2px 0px var(--color-bark-light);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--color-cream);
  border: 3px solid var(--color-bark) !important;
  box-shadow: 4px 4px 0px var(--color-bark) !important;
}
.dropdown-item {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-jungle-dark);
}
.dropdown-item:hover {
  background-color: var(--color-jungle-dark);
  color: white;
}

/* Falling Leaves Canvas style */
#falling-leaves-canvas {
  opacity: 0.8;
}

/* Footer structure */
footer {
  background-color: var(--color-jungle-dark);
  border-top: 5px solid var(--color-bark);
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--color-bark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 2px 2px 0px var(--color-bark);
}
.social-icon:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--color-bark);
}

.principal-img-frame {
  border: 5px solid var(--color-bark);
  box-shadow: 6px 6px 0px var(--color-bark);
}
.principal-img-frame img {
  border-radius: 10px;
}
.floating-badge {
  border: 3px solid var(--color-bark);
  box-shadow: 3px 3px 0px var(--color-bark);
}
.admission-banner {
  background: var(--color-jungle-dark);
  border: 5px solid var(--color-bark);
  box-shadow: 8px 8px 0px var(--color-bark);
}
.stats-banner .stat-item {
  border: 3px solid var(--color-bark) !important;
  box-shadow: 5px 5px 0px var(--color-bark) !important;
}
.top-bar {
  border-bottom: 2px solid var(--color-bark);
}
.bg-cream {
  background-color: var(--color-cream) !important;
}


/* 5. Custom Themed Cursor */
body.jungle-theme, body.jungle-theme a, body.jungle-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; }