/*─────────────────────────────────────────────────────────────────────
  Ehel Academy • Global Utility Stylesheet
  Loaded via $THEME->sheets = ['custom']; in config.php
  ────────────────────────────────────────────────────────────────────*/

/* ========================
   #1 - TYPOGRAPHY 
   ======================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&display=swap");

.font-baloo {
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
}


/* ========================
   #2 - DESIGN SYSTEM 
   ======================== */
:root {
    /* Brand Colors */
    --brand-green: #a7e0ba;
    --brand-purple: #c8b8ef;
    --brand-orange: #ffcaad;
    
    /* Decorative Elements */
    --blob-opacity: 0.32;
    --blur-intensity: 55px;
}

/* Blurred decorative circles */
.blob {
    filter: blur(var(--blur-intensity));
    opacity: var(--blob-opacity);
}


/* ========================
   #3 - INTERACTIVE ELEMENTS
   ======================== */
/* Micro-bounce animation for CTAs */
.btn-bounce:hover {
    animation: bounceY 0.6s both;
}

@keyframes bounceY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.blob {
  animation: floaty 6s ease-in-out infinite;
}


/* ========================
   #4 - BACKGROUND PATTERNS
   ======================== */
/* Animated dotted background (opt-in) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23917aca' fill-opacity='0.15'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='70' cy='50' r='4'/%3E%3Ccircle cx='120' cy='20' r='5'/%3E%3Ccircle cx='40' cy='90' r='5'/%3E%3Ccircle cx='100' cy='110' r='6'/%3E%3Ccircle cx='20' cy='130' r='4'/%3E%3Ccircle cx='130' cy='80' r='5'/%3E%3Ccircle cx='80' cy='20' r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 140px 140px;
    animation: scrollbg 60s linear infinite;
}

@keyframes scrollbg {
    from { background-position: 0 0; }
    to { background-position: 1000px 600px; }
}


/* ========================
   #5 - MOODLE OVERRIDES
   ======================== */
/* Hide default Moodle notifications */
#notice-policy,
.usermessage { 
    display: none !important; 
}


/* ========================
   #6 - RESPONSIVE HELPERS
   ======================== */
/* Hero section height scaling */
.h-22rem { height: 22rem; }

@media (min-width: 768px) {
    .md\:h-27rem { height: 27rem; }
}

@media (min-width: 1024px) {
    .lg\:h-33rem { height: 33rem; }
}

/* Fixed height elements */
.h-350px { height: 350px; }

//



body,
#page,
#region-main,
#region-main-box,
.main-inner,
.card {
  background: transparent !important;
  box-shadow: none !important;
}

#region-main {
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1;
}