/* ==========================================================================
   Educera Global Styles
   ========================================================================== */

/* Design tokens */
:root{
  --brand: #0A5C91;
  --brand-600:#084c78;
  --accent:#ff8c2b;
  --ink:#0a2940;
  --text:#222;
  --muted:#666;
  --line:#e6e6e6;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --ring:#9ec9ea;
  --radius:12px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1320;
    --bg-soft:#0f1b2b;
    --ink:#cfe7ff;
    --text:#e9eef5;
    --muted:#a5b4c1;
    --line:#1f2b3a;
    --shadow-sm:0 6px 20px rgba(0,0,0,.35);
    --ring:#2a76a9;
  }
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text); background:var(--bg); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

/* Layout helpers */
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.section{padding:40px 0}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}

/* Header */
header{background:#fff; border-bottom:1px solid #eef2f7}
@media (prefers-color-scheme: dark){ header{background:#0d1627; border-bottom-color:#0f2032} }
header .container{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; gap:16px}
.site-logo{display:inline-flex; align-items:center; gap:10px}
nav ul{list-style:none; display:flex; gap:16px; margin:0; padding:0}
nav a{color:var(--ink); font-weight:600}
nav a[aria-current="page"]{color:var(--brand)}

 /* Mobile nav */
.nav-toggle{display:none; background:transparent; border:1px solid var(--line); padding:8px 10px; border-radius:10px}
.nav-toggle:focus-visible{outline:3px solid var(--ring)}
.nav-toggle svg{width:20px; height:20px}
@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  nav{position:absolute; inset:64px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease; }
  nav[data-open="true"]{opacity:1; pointer-events:auto; transform:none}
  nav ul{flex-direction:column; padding:12px 16px}
}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--brand),var(--brand) 60%,var(--bg-soft));
  color:#fff; padding:56px 0;
}
.hero h1{font-size:32px; margin:0 0 6px}
.hero p{margin:0 0 18px}
.btn-primary{
  display:inline-block; padding:12px 18px; background:var(--accent); color:#111; border-radius:8px; font-weight:600; text-decoration:none;
}
.btn-primary:hover{filter:brightness(.95)}

/* Buttons */
.btn{display:inline-block; padding:10px 14px; background:var(--brand); color:#fff; border-radius:6px; text-decoration:none}
.btn:hover{background:var(--brand-600)}

/* Cards & grids */
.card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm)}
@media (prefers-color-scheme: dark){
  .card{background:#0f1b2b}
}
.course-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px}
.course-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.course-card img{width:100%; height:160px; object-fit:cover; background:#f6f7f9}
.course-card .meta{padding:14px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.course-card h3{margin:0; font-size:18px; line-height:1.3}
.course-card p{margin:0; color:var(--muted); font-size:14px}
.course-card .btn{margin-top:auto}

@media (max-width:640px){
  .hero{padding:40px 0}
  .course-card img{height:140px}
}

/* Page hero / breadcrumbs */
.page-hero{background:var(--bg-soft); border-bottom:1px solid #eef2f7; padding:24px 0}
.breadcrumbs,.crumbs{font-size:13px; color:#6b7280}
.breadcrumbs a,.crumbs a{color:inherit}

/* Two-column course layout */
.layout{display:grid; grid-template-columns:2fr 1fr; gap:24px; padding:28px 0}
@media (max-width:900px){ .layout{grid-template-columns:1fr} }
.card-pad{padding:18px}

/* Testimonials */
.testimonials{background:var(--bg-soft); border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7}
.slider{position:relative; overflow:hidden}
.slides{display:flex; transition:transform .6s ease}
.slide{min-width:100%; padding:24px 0}
.review{max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm)}
.stars{color:#ffb400; letter-spacing:1px}
.reviewer{margin-top:10px; color:#333; font-weight:600}
.review small{color:#6b7280; font-weight:500}
.slider-dots{display:flex; justify-content:center; gap:6px; margin:12px 0 0}
.slider-dots button{width:8px; height:8px; border-radius:999px; border:none; background:#c7d2fe; cursor:pointer}
.slider-dots button.active{background:var(--brand)}

/* Footer */
footer{background:#0b1e2b; color:#c2d2df}
footer a{color:#c2d2df}
footer .container{padding:28px 16px; text-align:center}

/* Forms */
input,select,textarea{
  width:100%; padding:12px; border:1px solid #dce3ea; border-radius:8px; background:var(--bg); color:var(--text)
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ring); border-color:transparent}
button{padding:12px 16px; background:var(--brand); color:#fff; border:none; border-radius:8px; cursor:pointer}
button:hover{background:var(--brand-600)}

/* Utilities */
.hidden{display:none !important}
.center{text-align:center}
.max-w-prose{max-width:70ch}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .slides{transition:none}
}

/* Print (basic) */
@media print{
  header,footer,.slider-dots{display:none !important}
  .btn,.btn-primary{border:1px solid #999; color:#000; background:#fff}
}