/* ===== BEK Academy - Brand style (dark-blue + gold) ===== */
:root {
    --brand-dark: #0b2b3a;
    --brand-darker: #071f27;
    --brand-gold: #f0b429;
    --brand-gold-deep: #c99b2e;
    --muted-ink: #f3efe6;
    --muted-gray: #97a3ad;
    --gradient-primary: linear-gradient(135deg, rgba(240,180,41,1) 0%, rgba(201,155,46,1) 100%);
    --gradient-dark: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-darker) 100%);
    --shadow-sm: 0 2px 6px rgba(2,6,23,0.2);
    --shadow-md: 0 6px 18px rgba(2,6,23,0.35);
    --shadow-lg: 0 12px 30px rgba(2,6,23,0.45);
    --shadow-xl: 0 20px 45px rgba(2,6,23,0.55);
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --transition: all 0.28s cubic-bezier(.4,.0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
    font-family: var(--site-font, 'Poppins'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height:1.6;
    color:var(--muted-ink);
    background:transparent; /* kept in base template */
    min-height:100vh;
}

/* Light theme overrides via html.light are defined in the template, but add fallback here */
html.light body{
    background-color: #f5fbff;
}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.15;margin-bottom:1rem}
h1{font-size:2.6rem}
h2{font-size:2rem}
h3{font-size:1.6rem}

/* Buttons */
.btn{border-radius:var(--border-radius);font-weight:600;padding:.7rem 1.4rem;transition:var(--transition);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn-primary{background:var(--gradient-primary);color:var(--brand-darker);border-radius:14px;padding:.8rem 1.6rem}
.btn-primary:hover{background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-deep));color:var(--brand-darker);box-shadow:0 10px 30px rgba(201,155,46,0.16)}
.btn-outline-primary{border:2px solid rgba(240,180,41,0.12);color:var(--brand-gold);background:transparent}
.btn-outline-primary:hover{background:rgba(240,180,41,0.06);color:var(--brand-gold-deep)}

/* Cards */
.card{border:none;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);transition:var(--transition);overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.card-header{background:linear-gradient(90deg,rgba(240,180,41,0.98),rgba(201,155,46,0.92));color:var(--brand-darker);border:none;padding:1.25rem 1.5rem;font-weight:700}
.card-body{padding:2rem;background:rgba(255,255,255,0.02)}

/* Forms */
.form-control{border:2px solid rgba(255,255,255,0.06);border-radius:var(--border-radius);padding:.75rem 1rem;transition:var(--transition);font-size:1rem;background:transparent;color:var(--muted-ink)}
.form-control:focus{border-color:rgba(240,180,41,0.9);box-shadow:0 6px 20px rgba(240,180,41,0.08);outline:none}

/* Alerts */
.alert{border:none;border-radius:var(--border-radius);padding:1rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.alert-success{background:linear-gradient(135deg,#d4edda 0%,#c3e6cb 100%);color:#155724}

/* Navigation */
.navbar{backdrop-filter:blur(6px);background:rgba(11,43,58,0.62) !important;box-shadow:0 6px 20px rgba(2,6,23,0.6)}
.navbar-brand{font-size:1.8rem;font-weight:800;color:var(--muted-ink)}
.nav-link{font-weight:600;color:var(--muted-gray) !important;transition:var(--transition);border-radius:var(--border-radius);margin:0 .25rem;padding:.5rem 1rem !important}
.nav-link:hover,.nav-link.active{background:rgba(240,180,41,0.06);color:var(--brand-gold) !important;transform:translateY(-2px)}

/* Dropdown */
.dropdown-menu{border:none;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);padding:.5rem 0;margin-top:.5rem;min-width:250px}
.dropdown-item{padding:.75rem 1.5rem;transition:var(--transition);border-radius:var(--border-radius);margin:.25rem .5rem;font-weight:600}
.dropdown-item:hover{background:rgba(240,180,41,0.06);color:var(--brand-gold-deep);transform:translateX(4px)}

/* Footer */
footer{background:var(--brand-dark);color:var(--muted-ink);position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-deep))}
footer a{transition:var(--transition)}
footer a:hover{color:var(--brand-gold) !important;transform:translateX(5px)}

/* Profile */
.profile-avatar{width:120px;height:120px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(240,180,41,0.95),rgba(201,155,46,0.8));border-radius:50%;color:var(--brand-darker);font-size:3rem}

/* Responsive */
@media (max-width:768px){.navbar-brand{font-size:1.5rem}.card-body{padding:1.5rem}.btn{padding:.6rem 1.2rem;font-size:.95rem}h1{font-size:2rem}h2{font-size:1.6rem}}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .6s ease-out}

/* Utilities */
.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.bg-gradient-primary{background:var(--gradient-primary)}
.shadow-custom{box-shadow:var(--shadow-lg)}
.rounded-custom{border-radius:var(--border-radius-lg)}
