/* public/assets/css/style.css */
:root{
  --primary: #0b5ed7; /* school blue */
  --primary-700: #084ea8;
  --muted: #6c757d;
  --bg: #f5f7fb;
  --card-bg: #ffffff;
  --glass: rgba(255,255,255,0.7);
}

*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: #162029;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar tweaks */
.navbar{ background: #fff; box-shadow: 0 6px 22px rgba(16,24,40,0.06); border-bottom:1px solid rgba(11,94,215,0.04); }
.navbar-brand img{ border-radius:8px; }
.navbar-brand .fw-bold{ font-size:1.08rem; color:var(--primary); letter-spacing:0.2px }
.navbar .nav-link{ color: #344955; font-weight:500 }
.navbar .nav-link:hover{ color:var(--primary); }

/* Hero / landing */
.hero{
  background: linear-gradient(180deg, rgba(11,94,215,0.06), rgba(11,94,215,0.02));
  padding:3.5rem 1.25rem;
  border-radius:12px;
  margin-bottom:1.8rem;
}
.hero h1{ color: #062a6f; }

/* Cards */
.card{ border:0; background:var(--card-bg); box-shadow:0 10px 30px rgba(16,24,40,0.06); border-radius:12px; }

.btn-primary{
  background: linear-gradient(90deg,var(--primary),var(--primary-700));
  border:0; box-shadow:0 8px 28px rgba(11,94,215,0.14); padding:0.8rem 1.2rem; font-weight:600;
}
.btn-primary:hover{ transform:translateY(-1px); }

.form-control{ border-radius:8px; padding:0.68rem 0.75rem; }
.form-control:focus{ box-shadow:0 6px 18px rgba(11,94,215,0.08); border-color:var(--primary); }

/* Footer */
footer.site-footer{ padding:2.5rem 0; color:#e9eefc; font-size:0.95rem; background:linear-gradient(90deg,var(--primary),var(--primary-700)); }
footer.site-footer p, footer.site-footer a{ color: rgba(255,255,255,0.95); }

/* Utility */
.muted { color: var(--muted); }

/* Small animations */
.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

/* Forms and spacing */
.card .card-body h6{ margin-top:0; margin-bottom:0.75rem; }

/* Responsive tweaks */
@media (max-width:576px){
  .hero{ padding:2rem 0.6rem; }
}

/* Logo styles for landing */
.logo-row { gap: 1rem; }
.logo-smp { max-height:96px; width:auto; display:block; }
.logo-siswa { max-height:160px; width:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.12); border:4px solid #fff; }
.logo-siswa-lg { max-height:220px; width:auto; border-radius:8px; box-shadow:0 8px 26px rgba(0,0,0,0.14); border:6px solid #fff; }
.hero-title { flex: 1 1 auto; max-width: 640px; }
.hero-title .h2 { color: #062a6f; }
.hero-title .h5 { color: #0b5ed7; }
@media (max-width:768px){
  .logo-smp { max-height:64px; }
  .logo-siswa { max-height:120px; }
  .logo-siswa-lg { max-height:140px; }
}

/* Background watermark for registration form */
.form-bg{ position:relative; overflow:hidden; border-radius:12px; }
.form-bg::before{
  content: "";
  position:absolute; top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position: calc(100% - 24px) center;
  background-size: 320px auto;
  opacity:0.12;
  /* use CSS variable set inline for dynamic image path */
  background-image: var(--siswa-img);
}
@media (max-width:768px){
  .form-bg::before{ background-size: 180px auto; background-position: calc(100% - 12px) center; }
}