/* public/assets/css/theme-edu.css
   Education-flavored theme override (keeps your layout; only colors/accents).
   Safe for PHP 5.6 sites. Load AFTER your base style.css.
*/

:root{
  /* Primary academic blues & teals */
  --edu-primary: #2d7ff9;
  --edu-primary-600: #1f6be0;
  --edu-primary-700: #195bc0;

  --edu-teal: #1fc8c8;
  --edu-teal-700: #14a4a4;

  /* Supporting accents */
  --edu-lime: #8bd66c;
  --edu-violet: #8e7cff;

  /* Surfaces */
  --edu-bg: #0c1220;         /* deeper, trustworthy */
  --edu-panel: #121a2b;
  --edu-panel-2: #0f172a;
  --edu-border: rgba(255,255,255,.08);
  --edu-text: rgba(255,255,255,.92);
  --edu-text-soft: rgba(255,255,255,.75);
}

/* ---------- Global ---------- */
html, body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45,127,249,.08), transparent),
    radial-gradient(800px 400px at 10% 110%, rgba(31,200,200,.06), transparent),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--edu-bg);
  color: var(--edu-text);
}

.container{ color: var(--edu-text); }

/* Cards / panels */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--edu-panel);
  border: 1px solid var(--edu-border);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.02) inset;
  border-radius: 18px;
}

/* Headings with subtle underline */
h1,h2,h3{
  color: #ffffff;
  letter-spacing: .2px;
}
h1{ font-weight: 700; }
h2{ font-weight: 700; color: var(--edu-teal); }
h3{ font-weight: 600; color: var(--edu-lime); }

/* Paragraph / soft text */
p, .lead{ color: var(--edu-text-soft); }

/* Links */
a{ color: var(--edu-primary); }
a:hover{ color: var(--edu-primary-600); text-decoration: none; }

/* ---------- Navigation ---------- */
.site-top, .main-nav a{
  color: var(--edu-text);
}
.main-nav a{
  padding: 10px 14px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.main-nav a:hover, .main-nav a.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(60px 24px at 50% 0%, rgba(45,127,249,.18), transparent);
  color: #fff;
  box-shadow: 0 2px 0 0 var(--edu-primary) inset;
}

/* ---------- Buttons ---------- */
.btn, button, .button{
  background: linear-gradient(180deg, var(--edu-primary), var(--edu-primary-600));
  color: #fff !important;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  transition: transform .06s ease, box-shadow .2s ease;
  box-shadow: 0 8px 16px rgba(45,127,249,.28);
}
.btn:hover, button:hover, .button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(45,127,249,.34);
}
.btn.secondary{
  background: linear-gradient(180deg, var(--edu-teal), var(--edu-teal-700));
  box-shadow: 0 8px 16px rgba(31,200,200,.28);
}

/* ---------- Badges / pills (optional) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size: .85rem;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--edu-border);
  border-radius: 999px;
}

/* ---------- Tables (admin or lists) ---------- */
table{
  border-collapse: separate;
  border-spacing: 0;
}
th, td{
  border-bottom: 1px solid var(--edu-border);
}
th{ color:#fff; font-weight:600; }
tbody tr:hover{
  background: rgba(255,255,255,.02);
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  background: var(--edu-panel-2);
  border: 1px solid var(--edu-border);
  color: var(--edu-text);
  border-radius: 12px;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(45,127,249,.6);
  box-shadow: 0 0 0 3px rgba(45,127,249,.15);
}

/* ---------- Footer ---------- */
.site-foot{
  color: var(--edu-text-soft);
}

/* ---------- About page extras (if present) ---------- */
.about-hero .hero-media img,
.about-bio .bio-media img{
  outline: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset;
}
.about-gallery .gal img{
  outline: 1px solid rgba(255,255,255,.05);
  transition: transform .12s ease, box-shadow .2s ease;
}
.about-gallery .gal img:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 20px rgba(0,0,0,.35);
}

/* ---------- Small decorative dots background (optional) ---------- */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  mask-image: linear-gradient(0deg, transparent 0%, black 20%);
}