/* Professional stylesheet for an education website
   - Clean, accessible, responsive
   - Includes variables, typography, layout, components (header, hero, cards, courses, forms), utilities
   - Author: ChatGPT
*/

:root{
  /* Color palette (adjust to your brand) */
  --primary: #0b5cff;       /* deep blue for CTAs */
  --accent: #00a99d;        /* secondary/brand accent */
  --bg: #f7f9fc;            /* page background */
  --surface: #ffffff;       /* card / surface */
  --muted: #6b7280;         /* secondary text */
  --text: #0f1724;          /* main text */
  --danger: #e02424;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --base-size: 16px;        /* root font size */
  --scale-1: 0.875rem;      /* small */
  --scale-2: 1rem;          /* body */
  --scale-3: 1.125rem;      /* lead */
  --scale-4: 1.5rem;        /* h4/h3 */
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 6px 20px rgba(16,24,40,0.08);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--scale-2);
  color:var(--text);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:focus,a:hover{text-decoration:underline}

.container{width:min(1200px,92%);margin:0 auto}

/* Utility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.flex{display:flex}
.grid{display:grid}
.center{display:flex;align-items:center;justify-content:center}
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}
.p-1{padding:0.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}
.round{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow-md)}
.text-muted{color:var(--muted)}
.text-center{text-align:center}

/* Header */
.site-header{
  background-color:var(--surface);
  border-bottom:1px solid rgba(15,23,36,0.06);
  position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(6px);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.logo{display:flex;gap:0.5rem;align-items:center}
.logo img{height:40px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{padding:0.5rem 0.75rem;border-radius:6px}
.nav a:hover{background-color:rgba(11,92,255,0.06)}
.cta{background:linear-gradient(90deg,var(--primary),#0066ff);color:#fff;padding:0.5rem 0.9rem;border-radius:8px;font-weight:600}

/* Hero */
.hero{
  background:linear-gradient(180deg, rgba(11,92,255,0.04), transparent 60%);
  padding:3rem 0 2rem 0;
}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:0 0 0.5rem 0}
.lead{font-size:var(--scale-3);color:var(--muted)}
.hero-cta{display:flex;gap:0.75rem;margin-top:1rem}

/* Cards */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem;border:1px solid rgba(15,23,36,0.03)}
.card h3{margin:0 0 0.5rem 0}
.card .meta{font-size:0.875rem;color:var(--muted)}

/* Course list */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.course{
  display:flex;flex-direction:column;justify-content:space-between;gap:0.75rem;padding:1rem;border-radius:0.75rem;background:linear-gradient(180deg, #fff, #fbfdff);
}
.course .thumb{height:160px;border-radius:0.5rem;overflow:hidden}
.course .title{font-weight:700}
.course .meta{font-size:0.9rem}
.course .actions{display:flex;gap:0.5rem}

/* Cards for instructor */
.instructor{
  text-align:center;padding:1rem
}
.instructor img{width:96px;height:96px;object-fit:cover;border-radius:999px;margin:0 auto}
.instructor h4{margin:0.5rem 0 0}

/* Forms */
.form{background:var(--surface);padding:1rem;border-radius:0.5rem;border:1px solid rgba(15,23,36,0.03)}
.form label{display:block;font-weight:600;margin-bottom:0.25rem}
.input,textarea,select{width:100%;padding:0.75rem;border-radius:0.5rem;border:1px solid rgba(15,23,36,0.08);background:transparent}
.input:focus,textarea:focus,select:focus{outline:2px solid rgba(11,92,255,0.12);border-color:var(--primary)}
.inline{display:flex;gap:0.5rem}
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 0.9rem;border-radius:8px;border:0;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:transparent;border:1px solid rgba(15,23,36,0.06)}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* Table (for grades/schedule)
   Use responsive wrapping for small screens */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:0.5rem;overflow:hidden}
thead th{text-align:left;padding:0.75rem;background:linear-gradient(180deg, rgba(11,92,255,0.03), transparent);font-weight:700}
tbody td{padding:0.75rem;border-top:1px solid rgba(15,23,36,0.03)}
@media (max-width:720px){
  .hero-inner{grid-template-columns:1fr;}
  .nav{display:none}
  .site-header .container{padding:0.5rem 0}
}

/* Footer */
.site-footer{margin-top:2rem;padding:2rem 0;background:transparent;color:var(--muted)}
.site-footer .grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}

/* Accessibility helpers */
:focus{outline:3px solid rgba(11,92,255,0.12);outline-offset:2px}

/* Print optimization */
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.hero-cta{display:none}
  a::after{content:" (" attr(href) ")"}
}

/* Example small utilities you might use in template */
.badge{display:inline-block;padding:0.25rem 0.5rem;border-radius:999px;font-size:0.75rem}
.badge-new{background:linear-gradient(90deg,var(--accent),#00c2b5);color:white}

/* Smooth transitions for interactive elements */
button,input,select,a{transition:all 180ms ease}

/* Custom responsive tweaks */
@media (max-width:480px){
  :root{--radius:0.375rem}
  .hero{padding:2rem 0}
  .container{width:95%}
}

/* End of stylesheet */