/* ================================
   SmartEduHub — site.css (full)
   ================================ */

/* ===== Base theme / tokens ===== */
:root{
  --bg:#ffffff;
  --ink:#0A2342;
  --muted:#5a6d8a;

  --o-bg:#fff7f1;      /* warm page bg gradient start */
  --o-bg-2:#ffefe2;    /* warm page bg gradient end  */

  --o:#ff8a3d;         /* orange primary (free) */
  --o-2:#ffc49f;       /* orange border soft */

  --b:#2d66b3;         /* blue primary (paid) */
  --b-2:#cfe0fb;       /* blue border soft */

  --ring: rgba(45,102,179,.28);
  --shadow: 0 14px 40px rgba(10,35,66,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html, body { height: 100%; }
body{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--o-bg) 0%, var(--o-bg-2) 100%);
  color:var(--ink);
  font-family:"Comic Sans MS","Comic Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{ flex:1; }                 /* sticky footer helper */
a{ color: var(--b); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus{ outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:10px }

/* Containers */
.page-wrap,.wrap{ max-width:1200px; margin:0 auto; padding:0 16px }

/* Buttons & cards */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid var(--o);
  background:var(--o); color:#fff; font-weight:800; text-decoration:none;
}
.btn:hover{ filter:brightness(1.05); text-decoration:none }
.btn.ghost{ background:#fff; color:var(--o) }

.card{
  background:#fff; border:1px solid var(--o-2); border-radius:16px;
  padding:16px; box-shadow:var(--shadow)
}
.grid{ display:grid; gap:16px }

/* ===================
   Header (new)
   =================== */
.site-header.new{
  position:sticky; top:0; z-index:1000;
  background:var(--bg);
  border-bottom:1px solid #eef2f7;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.site-header.new .nav-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
}

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none }
.logo-circle{
  width:32px; height:32px; border-radius:50%;
  background:#5B6CFF; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; letter-spacing:.5px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.brand-text{ font-weight:900; font-size:18px; color:#111 }
.brand-text span{ color:#5B6CFF }  /* accent “Edu” */

/* Primary nav + dropdowns */
.main-nav{ display:flex; align-items:center; gap:16px }
.dropdown{ position:relative }
.dd-btn{
  background:transparent; border:0; font-weight:700; color:#333;
  padding:8px 6px; border-radius:8px; cursor:pointer;
}
.dd-btn:hover{ background:#f6f7fb }
.dd-menu{
  position:absolute; margin-top:8px; background:#fff; border:1px solid #eee; border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.08); padding:8px; display:none; min-width:220px;
}
.dropdown.open .dd-menu{ display:block }
.dd-menu a{ display:block; padding:8px 10px; border-radius:8px; color:#333; text-decoration:none }
.dd-menu a:hover{ background:#f6f7fb }

/* Search */
.site-search{
  display:flex; align-items:center; flex:1; min-width:260px; max-width:760px;
  background:#fff; border:1px solid #e6e6ef; border-radius:28px; padding:6px 10px;
}
.site-search input{
  flex:1; border:0; outline:none; font-size:14px; padding:8px 10px; background:transparent;
}
.site-search button{
  display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%;
  background:#eef1ff; color:#5B6CFF; cursor:pointer;
}
.site-search svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2 }

/* Actions */
.actions{ display:flex; align-items:center; gap:12px }
.actions .link{ color:#333; text-decoration:none; font-weight:600 }
.actions .btn.cta{
  background:#5B6CFF; color:#fff; text-decoration:none; font-weight:800;
  border-radius:28px; padding:10px 14px; display:inline-flex; align-items:center;
}

/* Hamburger (mobile) */
.hamburger{ display:none; width:36px; height:36px; border:0; background:transparent }
.hamburger span{ display:block; height:2px; background:#111; margin:7px 0; border-radius:2px }

/* Responsive header */
@media (max-width:980px){
  .main-nav{ display:none; position:absolute; left:0; right:0; top:56px; background:#fff; padding:12px 16px; border-top:1px solid #eee }
  .main-nav.open{ display:block }
  .site-search{ max-width:none }
  .hamburger{ display:inline-block }
  .site-header.new .nav-inner{ grid-template-columns:auto auto }
  .dd-menu{ position:relative; margin-top:6px }
}

/* ===================
   Dual-tier menus
   =================== */
.tier-stack{
  max-width:1200px; margin:8px auto 0; padding:0 16px 10px;
  display:flex; flex-direction:column; gap:10px;
  min-height:64px; /* reserves space; prevents layout jump */
}
.tier-nav{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  border-radius:16px; padding:10px; border:1px solid #e7eef8;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.tier-nav .tier-label{ font-weight:900; letter-spacing:.2px; margin-right:4px }

/* Paid (blue) */
.tier-nav.paid{ background:#eef5ff; border-color:#cfe0fb }
.tier-nav.paid .pill{
  background:var(--b); color:#fff; border:1px solid #224f8a;
  border-radius:9999px; padding:10px 16px; font-weight:800; text-decoration:none;
  display:inline-block; white-space:nowrap;
}
.tier-nav.paid .pill:hover{ filter:brightness(1.05); text-decoration:none }

/* Free (orange/red) */
.tier-nav.free{ background:#fff4ed; border-color:#ffd7c2 }
.tier-nav.free .pill{
  background:var(--o); color:#fff; border:1px solid #c86524;
  border-radius:9999px; padding:10px 16px; font-weight:800; text-decoration:none;
  display:inline-block; white-space:nowrap;
}
.tier-nav.free .pill:hover{ filter:brightness(1.05); text-decoration:none }

/* Label chip */
.tier-nav.free .tier-label{
  background:#ffe5d3; color:#7a3a12; border:1px solid #ffcaa8;
  padding:8px 12px; border-radius:9999px;
}

/* Responsive tweaks for tiers */
@media (max-width:980px){
  .tier-stack{ padding-bottom:12px }
  .tier-nav{ padding:8px }
  .tier-nav .pill{ padding:9px 14px }
}

/* ===================
   Hero (optional)
   =================== */
.hero{
  background:#fff; border:1px solid var(--o-2);
  border-left:6px solid var(--o);
  border-radius:16px; box-shadow:var(--shadow);
  padding:18px; margin:14px 0 22px;
}
.hero h1{ margin:0 0 8px; color:var(--ink); font-size:clamp(24px,3.5vw,34px) }
.hero p{ margin:0; color:#445066 }

/* ===================
   Footer (new)
   =================== */
.site-footer.new{
  background:#fff; border-top:1px solid #eee; margin-top:40px;
}
.site-footer.new .footer-inner{ max-width:1200px; margin:0 auto; padding:28px 16px }
.foot-brand{ display:flex; align-items:center; gap:8px }

.foot-cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:14px;
}
.foot-cols .col h4{ margin:0 0 10px; font-size:16px }
.foot-cols .col a{ display:block; padding:6px 0; color:#555; text-decoration:none }
.foot-cols .col a:hover{ color:#111 }

.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px;
}
.foot-bottom .muted{ color:#5B6CFF; text-decoration:underline }
.socials a{
  display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  background:#f5f6ff; border-radius:50%; color:#5B6CFF; text-decoration:none; margin-left:6px
}

@media (max-width:900px){
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot-bottom{ flex-direction:column; align-items:flex-start }
}
@media (max-width:560px){
  .foot-cols{ grid-template-columns:1fr }
}

/* ===================
   Motion preferences
   =================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}