/* ========================================================
   Aura Mind — Global Site Styles (v1.3.5)
   Best gift that you can give to your loving kid
   ✅ Premium Mobile Header
   ✅ More menu fixed
   ✅ Sidebar OFF-CANVAS on mobile (hidden by default)
   ✅ No broken / incomplete sections on mobile
   ✅ Logo never becomes huge
======================================================== */

/* ---------- Root Design Tokens ---------- */
:root {

:root {

  --maxw: 1320px;

  --deep: #072a33;
  --muted: #6b7280;

  --surface: #ffffff;
  --surface-soft: #fafafa;
  --shell-bg: linear-gradient(180deg,#fdfcff,#f3f7ff);

  --radius-s: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow: 0 10px 28px rgba(0,0,0,0.06);
}
/* ===== WORLD CLASS UI IMPROVEMENTS ===== */

body{
background:
radial-gradient(circle at 15% 10%, #eef6ff 0%, transparent 40%),
radial-gradient(circle at 90% 0%, #fdf2ff 0%, transparent 40%),
var(--shell-bg);
}

/* smooth cards */
.course-card,
.home-block,
.shell-body{
transition:all .25s ease;
}

/* hover lift */
.course-card:hover,
.home-block:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(0,0,0,0.10);
}

/* smooth buttons */
.btn{
letter-spacing:.2px;
}

/* section spacing */
.home-block{
margin-top:32px;
}
/* ---------- Base Reset ---------- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
  radial-gradient(circle at 15% 10%, #eef6ff 0%, transparent 40%),
  radial-gradient(circle at 90% 0%, #fdf2ff 0%, transparent 40%),
  var(--shell-bg);
  color: var(--deep);
  line-height: 1.5;
  overflow-x: hidden; /* ✅ prevents sideways cut */
}

/* ---------- Global Shell Layout ---------- */
.app-shell{
  max-width: var(--maxw);
  width:100%;
  margin:18px auto;
  padding:0 clamp(16px,2vw,28px);
}

/* ======================================================
   HEADER (Premium)
====================================================== */

.gb-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 18px;
  gap:14px;
background:rgba(255,255,255,0.88);
backdrop-filter: blur(12px);
  border:1px solid #eef2f7;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(2,6,23,0.06);
  margin-top:10px;
  margin-bottom:10px;
}

.gb-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

/* Kill old square logo system */
.gb-header .logo{ display:none; }

/* ✅ LOGO SAFE (never huge) */
.gb-header .brand-logo{
  height:52px;
  width:auto;
  max-width:160px;     /* ✅ HARD LIMIT */
  object-fit:contain;
  display:block;
}

.gb-header .brand-title{
  font-size:18px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Desktop actions ON */
.desktop-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

/* Mobile actions OFF by default */
.mobile-actions{
  display:none;
  width:100%;
  gap:10px;
  margin-top:8px;
}

/* Button base */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  border:0;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,0.10);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,0.14);
}

/* Desktop themes */
.btn.franchise{ background: linear-gradient(135deg,#0ea5e9,#2563eb); color:#fff; }
.btn.enroll{    background: linear-gradient(135deg,#ff4fa7,#6d28d9); color:#fff; }
.btn.student{   background: linear-gradient(135deg,#38bdf8,#2563eb); color:#fff; }
.btn.teacher{   background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff; }
.btn.center{    background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#0f172a; }
.btn.admin{     background: linear-gradient(135deg,#111827,#334155); color:#fff; }

/* Mobile primary buttons */
.btn.primary-enroll{
  background: linear-gradient(135deg,#ff4fa7,#6d28d9);
  color:#fff;
  box-shadow:0 10px 26px rgba(109,40,217,0.25);
}
.btn.primary-student{
  background: linear-gradient(135deg,#38bdf8,#2563eb);
  color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,0.22);
}

/* More menu button */
.btn.morebtn{
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 22px rgba(0,0,0,0.06);
}

/* More menu dropdown */
.more-wrap{ position:relative; }

.more-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width:220px;
  background:#ffffff;
  border:1px solid #eef2f7;
  border-radius:16px;
  box-shadow:0 22px 60px rgba(2,6,23,0.18);
  padding:10px;
  display:none;
  z-index:999999;
}
.more-menu.open{ display:block; }

.more-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  color:#0f172a;
  border:1px solid transparent;
}
.more-menu a:hover{
  background:#f8fafc;
  border-color:#eef2f7;
}
.more-menu .m-note{
  font-size:12px;
  color:#64748b;
  font-weight:800;
  padding:6px 10px 0;
}

/* ======================================================
   MOBILE SIDEBAR TOGGLE BUTTON (View Courses)
====================================================== */

.mobile-toggle{
  display:none; /* desktop hidden */
  width:100%;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* ======================================================
   PAGE LAYOUT – SIDEBAR + MAIN
====================================================== */

.page-layout{
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-height: calc(100vh - 90px);
}

/* Sidebar */
.side-panel{
  background: linear-gradient(180deg,#fff7fb,#f0f6ff);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);

  width: 320px;
  min-width: 320px;

  margin-bottom: 20px;
  display:block;
}

/* Main content */
.shell-body{
  flex:1;
  min-width:0;
  min-height: 70vh;
  margin-top: 0;
  background: linear-gradient(180deg,#fdfcff 0%,#f0f6ff 60%,#fef3f8 100%);
  padding: 28px;
  border-radius: var(--radius-lg);
}

/* Home hero card */
.shell-body .course-section{
  background: linear-gradient(135deg,#ffffff,#f9fbff);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.08);
}

.shell-body .course-section h1{
  font-size: 28px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 10px;
}
.shell-body .course-section p{
  font-size: 15px;
  color: var(--muted);
  max-width: 520px;
}

/* Sidebar list */
.side-panel-header{ margin-bottom:14px; }
.sp-title{ font-size:18px; font-weight:900; }

.course-list{ list-style:none; margin:0; padding:0; }
.course-group{ list-style:none; margin-bottom:18px; }

.course-group-head{
  padding:12px 14px;
  font-size:14px;
  font-weight:900;
  border-radius: var(--radius-s);
  color:#05242c;
  background: linear-gradient(135deg,#c7d2fe,#bae6fd);
  border:1px solid #bfdbfe;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  margin-bottom:8px;
}

.course-group-box{
  padding:8px;
  border-radius: var(--radius-s);
  background: linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid #e5e7eb;
  box-shadow: inset 0 0 0 1px #f1f5f9, 0 2px 6px rgba(0,0,0,0.03);
}

.course-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  margin-bottom:4px;
  border-radius: var(--radius-s);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  color: var(--deep);
  background: rgba(255,255,255,0.9);
  border:1px solid #eef2f7;
  transition:.15s ease;
}
.course-link:hover{ background:#ffffff; }
.course-link[aria-current="true"]{ background:#e0f7ff; border-color:#bae6fd; }
.course-group-box .course-link:last-child{ margin-bottom:0; }

.ci{ font-size:18px; }

/* Home blocks */
.home-block{
  margin-top: 28px;
  background: linear-gradient(180deg,#ffffff,#f9fbff);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 10px 26px rgba(2,6,23,0.06);
}

.home-block h2{
  margin-top:0;
  margin-bottom:14px;
  font-size:22px;
  font-weight:900;
}

/* Highlight grid */
.highlight-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:16px;
}
.highlight-card{
  background:#ffffff;
  border-radius:16px;
  padding:16px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.hc-icon{ font-size:34px; margin-bottom:6px; }
.hc-title{ font-weight:900; margin-bottom:4px; }
.hc-text{ font-size:13px; color:var(--muted); font-weight:700; }

/* ✅ VIDEO FIX */
.fb-card,
.parent-video-card,
.video-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(2,6,23,0.06);
}

.shell-body iframe{
  width:100%;
  display:block;
  aspect-ratio: 16 / 9;
  border:0;
}

/* ======================================================
   Footer
====================================================== */
.gb-footer{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-top: 28px;
}
.ft-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.ft-copy{
  margin-top: 14px;
  text-align:center;
  color: var(--muted);
  font-weight:700;
}

/* ======================================================
   MOBILE: Premium Header + OFF-CANVAS Sidebar (FIXED)
====================================================== */
@media (max-width: 768px){

  .app-shell{
    padding: 0 10px !important;
    margin: 10px auto !important;
  }

  /* Header compact */
  .gb-header{
    padding:10px 12px;
    flex-wrap:wrap;
    gap:10px;
  }

  .gb-header .brand{
    width:100%;
    justify-content:center;
  }

  /* ✅ Mobile logo stable & small */
  .gb-header .brand-logo{
    height:40px !important;
    max-width:130px !important;
  }
  .gb-header .brand-title{
    font-size:16px;
  }

  /* Desktop actions OFF */
  .desktop-actions{ display:none !important; }

  /* Mobile actions ON */
  .mobile-actions{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:6px;
  }
  .mobile-actions .btn{
    width:100%;
    padding:10px 10px;
    font-size:12.5px;
    border-radius:999px;
    line-height:1.15;
  }

  /* ✅ View Courses button ON */
  .mobile-toggle{
    display:inline-flex !important;
    justify-content:center;
    align-items:center;
  }

  /* ✅ Mobile page layout single column */
  .page-layout{
    display:block !important;
  }

  .shell-body{
    width:100% !important;
    padding: 14px !important;
    min-height:auto !important;
    margin-top: 12px !important;
    border-radius: 18px !important;
  }

  /* ✅ Blocks look complete */
  .home-block{
    margin-top: 16px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .home-block h2{
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  /* ✅ Responsive media */
  img, iframe, video{
    max-width:100% !important;
    height:auto !important;
  }

  /* ✅ IMPORTANT FIX:
     Sidebar must NOT sit inside the page flow on mobile
     It must be OFF-CANVAS (hidden by default) */
  .side-panel{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;

    width: 86vw !important;
    max-width: 340px !important;
    min-width: unset !important;

    background: #ffffff !important;
    z-index: 999999 !important;

    transform: translateX(-110%) !important; /* ✅ hidden */
    transition: 0.25s ease !important;

    padding-top: 78px !important;
    box-shadow: 20px 0 60px rgba(0,0,0,0.16) !important;

    overflow-y:auto !important;
    border-radius: 0 20px 20px 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .side-panel.open{
    transform: translateX(0) !important;
  }

  body.sidebar-open{
    overflow:hidden !important;
  }

  /* Footer mobile */
  .ft-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* ======================================================
   Desktop wider sidebar
====================================================== */
@media(min-width: 1025px){
  .side-panel{
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;
  }
  .page-layout{
    display:flex !important;
    align-items:stretch !important;
    gap:16px !important;
  }
}
/* ===== PREMIUM HOVER EFFECTS ===== */

.home-block,
.course-card,
.highlight-card{
transition: all .25s ease;
}

.home-block:hover,
.course-card:hover,
.highlight-card:hover{
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}