/* -------------------------------------------------------------
  IsabiCode Academy Styles (Rebranded & Cleaned)
   Organized for scalability and easy maintenance
------------------------------------------------------------- */

/* Brand Variables */
:root{
  --brand-purple:#6b21a8; /* primary deep purple */
  --brand-purple-2:#8b5cf6; /* lighter purple accent */
  --brand-dark:#241332; /* dark text */
  --bg:#fbf7fc; /* off-white with purple tint */
  --muted:#6b6b7a;
  --accent:#e9dbff; /* soft lavender accent */
  --brand-lilac:#A78BFA; /* main lilac for buttons/icons */
  --lesson-accent: #26a65b; /* green accent for lessons */
  --assignment-accent: #f59e0b; /* amber accent for assignments */
  --notif-accent: #6b21a8; /* purple accent for notifications */
  --lesson-green: #e6f8ea;
  --assignment-yellow: #fff7d6;
  --surface:#ffffff;
  --surface-alt:#f8fafc;
  --border-color:#e6e6e6;
  --header-bg:linear-gradient(90deg,#6b21a8,#8b5cf6);
  --header-nav-bg:#6b21a8;
  --shadow:0 6px 18px rgba(15,15,15,0.05);
  --button-text:#ffffff;
}

[data-theme="dark"]{
  --brand-purple:#a78bfa;
  --brand-purple-2:#c4b5fd;
  --brand-dark:#f5f3ff;
  --bg:#0f172a;
  --muted:#cbd5e1;
  --accent:#312e81;
  --brand-lilac:#8b5cf6;
  --lesson-green:#1f2937;
  --assignment-yellow:#312e81;
  --surface:#111827;
  --surface-alt:#1f2937;
  --border-color:#334155;
  --header-bg:linear-gradient(90deg,#111827,#4c1d95);
  --header-nav-bg:#111827;
  --shadow:0 10px 24px rgba(2,6,23,0.32);
  --button-text:#f8fafc;
}

/* Playful kid-friendly font */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&display=swap');

/* Reset */
*{
  box-sizing:border-box;
}

body{
  font-family:'Poppins', Arial, Helvetica, sans-serif;
  margin:0;
  color:var(--brand-dark);
  background:var(--bg);
  transition:background 0.2s ease,color 0.2s ease;
}

[data-theme="dark"] body.bg-light,
[data-theme="dark"] body.bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-light.bg-white,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .offcanvas-body,
[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .nav-pills,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas .nav-link,
[data-theme="dark"] .offcanvas .nav-link:hover,
[data-theme="dark"] .offcanvas .nav-link:focus {
  background-color: var(--surface) !important;
  color: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-text,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .offcanvas .nav-link,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .badge,
[data-theme="dark"] .list-group-item {
  color: var(--brand-dark) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus {
  background-color: var(--surface-alt) !important;
  color: var(--brand-dark) !important;
  border-color: var(--brand-purple-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.25) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(245, 243, 255, 0.7) !important;
}

[data-theme="dark"] .btn-outline-primary {
  background: var(--surface-alt) !important;
  color: var(--brand-lilac) !important;
  border-color: var(--brand-lilac) !important;
}

[data-theme="dark"] .btn-outline-secondary {
  background: var(--surface-alt) !important;
  color: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-outline-danger {
  background: rgba(220,53,69,0.12) !important;
  color: #dc3545 !important;
  border-color: rgba(220,53,69,0.25) !important;
}

[data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; }
[data-theme="dark"] .badge.bg-success { background-color: #22c55e !important; }
[data-theme="dark"] .badge.bg-warning { background-color: #f59e0b !important; color:#111 !important; }
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.24) !important; }

[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--brand-dark) !important;
}

[data-theme="dark"] .student-hero,
[data-theme="dark"] .assignment-card,
[data-theme="dark"] .attendance-card,
[data-theme="dark"] .lesson-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .progress-card,
[data-theme="dark"] .quiz-card,
[data-theme="dark"] .sabicoin-card,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .nav-pills,
[data-theme="dark"] .nav.flex-column,
[data-theme="dark"] .nav.flex-column .nav-link,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .offcanvas-body,
[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .alert,
[data-theme="dark"] .table,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td {
  background-color: var(--surface) !important;
  background-image: none !important;
  color: var(--brand-dark) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .table thead th {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-pills .nav-link,
[data-theme="dark"] .nav.flex-column .nav-link,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .ic-card,
[data-theme="dark"] .ic-card h1,
[data-theme="dark"] .ic-card h2,
[data-theme="dark"] .ic-card h3,
[data-theme="dark"] .ic-card h4,
[data-theme="dark"] .ic-card h5,
[data-theme="dark"] .ic-card h6,
[data-theme="dark"] .ic-card p,
[data-theme="dark"] .ic-card small,
[data-theme="dark"] .course-card,
[data-theme="dark"] .course-card h5,
[data-theme="dark"] .course-card p,
[data-theme="dark"] .course-card small,
[data-theme="dark"] .card {
  color: var(--brand-dark) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted-small,
[data-theme="dark"] .small,
[data-theme="dark"] .text-secondary {
  color: rgba(245, 243, 255, 0.82) !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* -------------------------------------------------------------
   HEADER / NAVIGATION
------------------------------------------------------------- */

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--header-bg);
  border-bottom:4px solid rgba(255,255,255,0.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:48px;
  height:48px; 
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
}

nav{
  display:flex;
  gap:12px;
  align-items:center;
  background-color: var(--header-nav-bg);
}

nav a{
  color:#fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
}

nav a:hover{
  background:rgba(255,255,255,0.16);
}

.cta{
  background:var(--brand-lilac);
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
  font-family: 'Baloo 2', Poppins, sans-serif;
}

.secondary{
  background:#fff;
  border:1px solid rgba(138,97,255,0.18);
  color:var(--brand-dark);
}

/* Mobile menu button */

.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  font-size:18px;
}

/* Sidebar nav active styling (subtle, works with Bootstrap) */
.nav .nav-link.active{
  background: rgba(99,102,241,0.08);
  font-weight:600;
  border-radius:6px;
  color:var(--brand-dark) !important;
}

/* -------------------------------------------------------------
   LAYOUT
------------------------------------------------------------- */

.container{
  max-width:1000px;
  margin:28px auto;
  padding:0 16px;
}

h1,h2,h3{
  color:var(--brand-dark);
  font-family: 'Baloo 2', Poppins, sans-serif;
}

/* Cards */

.ic-card,
.card-custom{
  background:var(--surface);
  padding:16px;
  border-radius:10px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
  border:1px solid var(--border-color);
}

/* -------------------------------------------------------------
   HERO SECTION
------------------------------------------------------------- */

.hero{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  padding:40px 24px;
  background:linear-gradient(180deg,rgba(31,163,74,0.06),transparent);
  border-radius:12px;
}

.hero h2{
  font-size:28px;
  margin:0;
}

.hero p{
  color:var(--muted);
  max-width:680px;
}

.hero-cta{
  display:flex;
  gap:12px;
  align-items:center;
}

/* -------------------------------------------------------------
   FEATURES
------------------------------------------------------------- */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}

.feature{
  background:var(--surface);
  padding:16px;
  border-radius:10px;
  border:1px solid var(--border-color);
  color:var(--brand-dark);
}

/* -------------------------------------------------------------
   PHOTO GALLERY
------------------------------------------------------------- */

.photo-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.photo-gallery-card{
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.photo-gallery-card img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}

.photo-gallery-card .photo-caption{
  padding:12px 14px;
}

.photo-gallery-card .photo-caption h6{
  margin:0 0 4px;
  color:var(--brand-dark);
}

.photo-gallery-card .photo-caption p{
  margin:0;
  color:var(--muted);
  font-size:0.92rem;
}

/* -------------------------------------------------------------
   COURSE CARDS
------------------------------------------------------------- */

.course-card{
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  color:var(--brand-dark);
}

.course-card h5,
.course-card p,
.course-card small {
  position:relative;
  z-index:1;
}

.course-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  background:rgba(255,255,255,0.45);
  color:var(--brand-purple);
  font-size:1.1rem;
}

.course-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.16);
  pointer-events:none;
}

.course-robotics{ background:#dbeafe; }
.course-web{ background:#fde68a; }
.course-cyber{ background:#ddd6fe; }
.course-drone{ background:#a7f3d0; }
.course-mobile{ background:#f9a8d4; }
.course-animation{ background:#fdba74; }
.course-uiux{ background:#86efac; }

[data-theme="dark"] .course-card{
  color:#4c1d95 !important;
  border-color: rgba(108, 43, 217, 0.24);
}

[data-theme="dark"] .course-card h5,
[data-theme="dark"] .course-card p,
[data-theme="dark"] .course-card small {
  color:#4c1d95 !important;
}

/* -------------------------------------------------------------
   TESTIMONIALS
------------------------------------------------------------- */

.testimonials{
  margin-top:20px;
}

.testimonial{
  background:var(--surface);
  padding:16px;
  border-radius:10px;
  margin-bottom:12px;
  border:1px solid var(--border-color);
  color:var(--brand-dark);
}

/* -------------------------------------------------------------
   FORMS
------------------------------------------------------------- */

label{
  display:block;
  margin:8px 0;
}

input,
select,
textarea{
  padding:10px;
  border:1px solid #e6e6e6;
  border-radius:8px;
  width:100%;
  max-width:480px;
}

button, .btn, .cta, .secondary, .nav-toggle, .theme-toggle-btn{
  background:var(--brand-lilac);
  border:1px solid transparent;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  color:var(--button-text);
  font-family: 'Baloo 2', Poppins, sans-serif;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, color 0.2s ease;
}

button:hover, .btn:hover, .cta:hover, .secondary:hover, .nav-toggle:hover, .theme-toggle-btn:hover{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(107,33,168,0.16);
}

.btn-outline-primary{
  background:var(--surface);
  color:var(--brand-purple);
  border-color:var(--brand-purple);
}

.btn-outline-secondary{
  background:var(--surface-alt);
  color:var(--brand-dark);
  border-color:var(--border-color);
}

.btn-outline-danger{
  background:rgba(220,53,69,0.08);
  color:#dc3545;
  border-color:rgba(220,53,69,0.2);
}

.btn-link{
  background:transparent;
  border:none;
  color:var(--brand-purple);
  padding:0;
}

.theme-toggle-btn{
  background:rgba(255,255,255,0.16);
  color:#fff;
  border-color:rgba(255,255,255,0.24);
}

[data-theme="dark"] .theme-toggle-btn{
  background:var(--surface-alt);
  color:var(--brand-dark);
  border-color:var(--border-color);
}

/* -------------------------------------------------------------
   ADMIN DASHBOARD
------------------------------------------------------------- */

.admin-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:16px;
}

/* Admin-specific styles */
.admin-stats .stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.admin-stats .stat{
  text-align:center;
  padding:18px;
}
.stat .muted{ color:var(--muted); }

.student-list, #studentResults{ display:flex; flex-direction:column; gap:8px; }

@media (max-width:900px){
  .admin-grid{ grid-template-columns:1fr; }
  .admin-stats .stats-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .admin-stats .stats-grid{ grid-template-columns:1fr; }
  input{ font-size:14px; }
  .logo{ width:40px; height:40px }
}

/* Better mobile layout adjustments */
@media (max-width:800px){
  header{ padding:12px 14px; }
  .brand{ gap:10px }
  .container{ margin:18px auto; padding:0 12px }
  .ic-card, .card-custom{ padding:12px }
  .admin-stats .stat{ padding:14px }
  input, select, textarea{ max-width:100%; }
  button, .cta{ width:100%; display:inline-block; text-align:center }
  nav.desktop-nav{ display:none }
  .nav-toggle{ display:inline-flex }
  .mobile-sidebar{ left:-100%; width:78%; max-width:320px }
  .mobile-sidebar.open{ left:0 }
  .mobile-sidebar nav a{ display:block; padding:10px 0; border-bottom:1px solid #f0f0f0 }
  main{ order:0 }
  aside{ order:1 }
}

/* Small touch targets */
button, .cta, .nav-toggle{ padding:12px 14px }


/* -------------------------------------------------------------
   MOBILE SIDEBAR
------------------------------------------------------------- */

.mobile-sidebar{
  position:fixed;
  left:-280px;
  top:0;
  width:260px;
  height:100%;
  background:var(--surface);
  color:var(--brand-dark);
  box-shadow:6px 0 24px rgba(0,0,0,0.12);
  z-index:1200;
  padding:18px;
  transition:left 0.28s ease;
}

.mobile-sidebar.open{
  left:0;
}

.mobile-sidebar .close-btn{
  background:transparent;
  border:none;
  font-size:20px;
  margin-bottom:12px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease;
  z-index:1100;
}

.overlay.visible{
  opacity:1;
  visibility:visible;
}

/* -------------------------------------------------------------
   BADGE ANIMATION
------------------------------------------------------------- */

.completed-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:20px;
  background:var(--brand-lilac);
  color:#fff;
  font-weight:700;
  animation:pop 420ms ease;
}

/* Colorize Font Awesome icons to match brand (lilac) and add playful hover */
.fa, .fas, .far, .fab { color: var(--brand-lilac); transition:transform 180ms ease, color 180ms ease; }
.fa{ font-size:1.05rem }
.fa:hover{ transform: translateY(-3px) rotate(-8deg) scale(1.12); }

/* Avatar styling using brand gradients */
.avatar{ background: linear-gradient(135deg,var(--brand-lilac),var(--accent)); color:#fff }

/* Preserve logout styling as red */
.btn-danger, .text-danger, a.logout, a[href*="logout.php"]{ background:#dc3545 !important; color:#fff !important; }

/* Theme toggle placement */
.navbar .theme-toggle-btn, .navbar .btn{ margin-left:0.35rem; }

/* Fun headings/buttons for kids */
h1,h2,h3, .cta, button{ font-family: 'Baloo 2', Poppins, sans-serif; }

/* Small playful bounce on key icons */
@keyframes playful-bounce{ 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
.playful{ animation: playful-bounce 1.6s ease-in-out infinite; }

@keyframes pop{
  0%{transform:scale(.3);opacity:0}
  60%{transform:scale(1.05);opacity:1}
  100%{transform:scale(1)}
}

/* Toast notification */

.ic-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  z-index:2000;
  opacity:0;
  transform:translateY(10px);
  transition:all 260ms ease;
}

.ic-toast.visible{
  opacity:1;
  transform:translateY(0);
}

/* Improve button spacing globally to avoid jam-packed buttons */
.btn + .btn{ margin-left:0.5rem; }
/* Ensure spacing for any adjacent buttons, whether they use .btn class or not */
button + button, button + .btn, .btn + button{ margin-left:0.5rem; }

/* Search bar layout for forms like attendance - wrap on small screens */
.search-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.search-bar input, .search-bar select{ min-width:120px; }

@media (max-width:800px){
  button, .btn{ margin-top:0.35rem; }
  .search-bar{ gap:6px; }
}

/* Utility: small gap for button groups when tighter control is needed */
.btn-gap { display:inline-block; }
.btn-gap + .btn-gap { margin-left:0.5rem; }
.btn-gap { margin-top:0; }
@media (max-width:800px){ .btn-gap { margin-top:0.35rem; } }

/* Testimonials: purple background with white text */
.testimonial.ic-card{
  background:var(--brand-purple);
  color:#fff;
  border-radius:12px;
}

/* Progress bar color ranges (custom gradients) */
.progress-bar.prog-red{
  background: linear-gradient(90deg,#dc3545,#ff6b6b) !important;
  color:#fff;
}
.progress-bar.prog-pink{
  background: linear-gradient(90deg,#ff7ab6,#ffb3d9) !important;
  color:#111;
}
.progress-bar.prog-lightblue{
  background: linear-gradient(90deg,#7dd3fc,#bfdbfe) !important;
  color:#04111d;
}
.progress-bar.prog-green{
  background: linear-gradient(90deg,#34d399,#10b981) !important;
  color:#fff;
}
.progress-bar.prog-purple{
  background: linear-gradient(90deg,#8b5cf6,#6b21a8) !important;
  color:#fff;
}
.progress-bar.prog-default{
  background: linear-gradient(90deg,#e9ecef,#dee2e6) !important;
  color:#111;
}

/* Student section colors */
.section-purple{ background: linear-gradient(180deg, rgba(107,33,168,0.06), #fff); border:1px solid rgba(107,33,168,0.06); }
.section-green{ background: linear-gradient(180deg, rgba(38,166,91,0.06), #fff); border:1px solid rgba(38,166,91,0.06); }
.section-orange{ background: linear-gradient(180deg, rgba(245,158,11,0.06), #fff); border:1px solid rgba(245,158,11,0.06); }
.section-pink{ background: linear-gradient(180deg, rgba(236,72,153,0.06), #fff); border:1px solid rgba(236,72,153,0.06); }

/* Progress / status fills */
.status-bar{ height:10px; background:#f5f5f5; }
.status-fill{ height:10px; width:0%; transition:width .28s ease; }
.bg-purple{ background:var(--brand-purple) !important; }

/* Performance color scale */
.perf-low{ background: linear-gradient(90deg, rgba(220,53,69,0.08), transparent); }
.perf-lowmid{ background: linear-gradient(90deg, rgba(236,72,153,0.08), transparent); }
.perf-average{ background: linear-gradient(90deg, rgba(179,229,252,0.12), transparent); }
.perf-above{ background: linear-gradient(90deg, rgba(59,130,246,0.08), transparent); }
.perf-almost{ background: linear-gradient(90deg, rgba(164,243,160,0.12), transparent); }
.perf-complete{ background: linear-gradient(90deg, rgba(167,139,250,0.12), transparent); }

/* small helpers for status buttons */
.mark-inprogress{ min-width:96px }
.mark-complete{ min-width:96px }
.testimonial.ic-card small, .testimonial.ic-card .muted-small{ color: rgba(255,255,255,0.85); }
.carousel-caption h5, .carousel-caption p{ color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }

/* Platform overview: modern cards with icon */
.overview-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
/* Navbar purple background utility and navbar-dark tweaks */
.bg-purple{ background-color: var(--brand-purple) !important; }
.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-brand, .navbar-dark .navbar-text{ color: #fff !important; }
.navbar-dark .navbar-brand small{ color: rgba(255,255,255,0.85) !important; }
.navbar-dark .fa, .navbar-dark .fas, .navbar-dark .far, .navbar-dark .fab { color: #fff !important; }
.logo{ background:none; border-radius:0; }
.logo img{ height:40px; display:block; }
.overview-item{ background:var(--surface); border:1px solid var(--border-color); border-radius:12px; padding:14px; display:flex; gap:12px; align-items:center; box-shadow:0 8px 20px rgba(36,19,50,0.06); }
.overview-item .icon{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--brand-lilac),var(--brand-purple)); font-size:22px; }
.overview-item .meta{ display:flex; flex-direction:column; }
.overview-item .meta .num{ font-weight:700; font-size:20px; color:var(--brand-dark); }
.overview-item .meta .label{ font-size:13px; color:var(--muted); }

@media (max-width:900px){ .overview-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .overview-grid{ grid-template-columns:1fr; } }

/* Footer: lilac background and professional layout */
.site-footer{ background:var(--brand-lilac); color:#fff; padding:36px 0; }
.site-footer a{ color:rgba(255,255,255,0.95); text-decoration:none }
.site-footer .footer-inner{ max-width:1100px; margin:0 auto; display:flex; gap:24px; align-items:flex-start; justify-content:space-between; padding:0 16px; }
.site-footer .col{ flex:1; min-width:220px }
.site-footer h5{ color:#fff; margin-bottom:12px; }
.site-footer .contact-form input, .site-footer .contact-form textarea{ width:100%; padding:10px; border-radius:8px; border:none; margin-bottom:8px; }
.site-footer .contact-form button{ background:#fff; color:var(--brand-lilac); border-radius:8px; padding:10px 12px; font-weight:700 }
.site-footer .legal{ margin-top:18px; color:rgba(255,255,255,0.85); }

/* Footer responsive stacking */
@media (max-width:800px){
  .site-footer .footer-inner{ flex-direction:column; gap:18px; align-items:stretch }
  .site-footer .col{ min-width:0 }
  .site-footer .contact-form button{ width:100% }
}

/* Lesson / Assignment / Notification card helpers */
.card-lesson{ background:var(--lesson-green); color:var(--brand-dark); border-left:6px solid var(--lesson-accent); }
.card-lesson .h5, .card-lesson .h5.mb-0, .card-lesson .fw-bold{ color:var(--brand-dark); }

.card-assignment{ background:var(--assignment-yellow); color:var(--brand-dark); border-left:6px solid var(--assignment-accent); }
.card-assignment .h5, .card-assignment .h5.mb-0, .card-assignment .fw-bold{ color:var(--brand-dark); }

.card-notification{ background:var(--brand-lilac); color:#fff; border-left:6px solid var(--notif-accent); }
.card-notification .muted-small{ color: rgba(255,255,255,0.9); }

/* decorative icon badge */
.card-icon-badge{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,0.08); margin-right:12px; }
.card-lesson .card-icon-badge{ background: linear-gradient(135deg, rgba(38,166,91,0.15), rgba(38,166,91,0.05)); color:var(--lesson-accent); }
.card-assignment .card-icon-badge{ background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); color:var(--assignment-accent); }
.card-notification .card-icon-badge{ background: linear-gradient(135deg, rgba(107,33,168,0.18), rgba(107,33,168,0.06)); color:#fff; }

/* subtle shadow and hover pop */
.card-lesson, .card-assignment, .card-notification{ transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 1px 4px rgba(15,15,15,0.04); border-radius:12px; padding:14px; }
.card-lesson:hover, .card-assignment:hover, .card-notification:hover{ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(15,15,15,0.08); }



/* -------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------- */

@media (max-width:800px){

  .features{
    grid-template-columns:1fr;
  }

  .photo-gallery-grid{
    grid-template-columns:1fr 1fr;
  }

  .photo-gallery-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero{
    padding:20px;
  }

  .hero h2{
    font-size:20px;
  }

  nav{
    display:none;
  }

  .nav-toggle{
    display:inline-flex;
  }

}