/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#1b5e20; /* deep green (logo-like) */
  --accent-2:#4caf50; /* lighter green */
  --deep:#062d15;
  --glass: rgba(255,255,255,0.7);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,'Helvetica Neue',Arial; background:var(--bg); color:#0f172a; line-height:1.5;}

/* Layout padding to account for fixed navbar */
body{padding-top:78px}

/* NAVBAR */
.navbar-custom{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px rgba(15,118,110,0.12)}
.navbar-brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700}
.navbar-logo{height:44px}
.nav-link{color:rgba(255,255,255,0.95) !important;font-weight:600}
.nav-link:hover{color:#fff;text-decoration:underline}
.dropdown-menu{border-radius:10px;border:none;box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.dropdown-item{padding:.6rem 1rem}

/* HERO */
.hero-section{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(12,74,41,0.6), rgba(16,185,129,0.1)), url('school_bg.png') center/cover no-repeat;color:#fff}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.25))}
.hero-content{position:relative;z-index:2;padding:3rem 1.25rem;text-align:center;max-width:980px}
.hero-content h1{font-size:clamp(1.6rem,3.6vw,3.2rem);font-weight:800;margin-bottom:.5rem;letter-spacing:-0.5px}
.hero-content p{font-size:1.05rem;color:var(--glass);margin-bottom:1.25rem}

.search-form{display:flex;gap:.6rem;max-width:680px;margin:0 auto;padding:.6rem;border-radius:999px;box-shadow:0 8px 24px rgba(2,6,23,0.08)}
.search-input{flex:1;border:0;padding:.8rem 1rem;border-radius:999px;font-size:0.95rem}
.search-input:focus{outline:2px solid rgba(16,185,129,0.15)}
.search-btn{background:var(--accent);border:2px solid;color:#fff;padding:.6rem 1.05rem;border-radius:999px;font-weight:600}
.search-btn:hover{border:2px solid #4caf50;background:transparent;color:#000000;;box-shadow:0 8px 24px rgba(16,185,129,0.18)}

@media (max-width:640px){
  .search-form{flex-direction:column;padding:.75rem}
  .search-btn{width:100%}
}

/* ANNOUNCEMENTS / CARDS */
.announcements{padding:3.5rem 1.25rem}
.announcements h2{color:var(--deep);font-size:1.6rem;margin-bottom:1.5rem}
.card{border-radius:12px;border:0;background:var(--card);box-shadow:0 10px 30px rgba(2,6,23,0.06);overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.08)}
.card .card-body{padding:1.2rem}
.card-title{color:var(--accent);font-weight:700}
.card-text{color:var(--muted)}

/* FOOTER */
footer{background:#052e1f;color:#d1fae5;padding:1rem;text-align:center;margin-top:2rem}

/* FORMS & MODALS */
form{background:transparent;padding:0;margin:0}
label{font-weight:600;color:#0f172a}
input,select,textarea{border:1px solid #e6eef0;padding:.6rem;border-radius:8px;background:#fff;width:100%}
.modal-content{border-radius:12px}

/* TABLES */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}
table th{background:#f3f7f6;color:#0f172a;padding:12px 14px;text-align:left;font-weight:700}
table td{padding:12px 14px;border-top:1px solid #f1f5f4}

/* MISC */
.message{padding:.9rem;border-radius:8px}
.success{background:#ecfdf5;color:#065f46}
.error{background:#fff1f2;color:#7f1d1d}

.cert-btn{background:var(--accent-2);color:#fff;border-radius:8px;padding:.45rem .75rem;border:0;display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
.cert-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.18)}

/* Responsive helpers */
@media (max-width:768px){
  .hero-content h1{font-size:1.8rem}
  .navbar-logo{height:36px}
}

/* smaller screens adjustments */
@media (max-width:576px){
  .card{margin-bottom:1rem;}
  .card h5{font-size:1rem;}
  .card-body{padding:0.8rem;}
  .card .badge{font-size:0.7rem;}
  /* shorten event header on phones */
  .card > div[style*="height:150px"]{height:120px!important;}
  .search-form{flex-direction:column;padding:.75rem}
  .search-btn{width:100%}
  .modal-dialog{max-width:90%}
}

@media (max-width:480px){
  .hero-content p{font-size:0.95rem;}
  .form-control,.form-control-lg{font-size:0.9rem}
}

/* Accessibility */
.btn:focus,.search-input:focus{outline:3px solid rgba(16,185,129,0.12);outline-offset:2px}

/* small utility */
.text-muted{color:var(--muted)}

/* MODAL STYLING */
.modal-content{border-radius:12px;border:0;box-shadow:0 20px 60px rgba(2,6,23,0.15)}
.modal-header{border-bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.modal-footer{border-top:0}
.form-label{font-weight:600;color:#0f172a;font-size:0.95rem}
.form-control,.form-control-lg{border:1px solid #243033;border-radius:8px;transition:all 0.2s ease;padding:0.65rem 1rem}
.form-control:focus,.form-control-lg:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,0.1)}
.form-control-lg{font-size:1rem;padding:0.85rem 1rem}
.alert{border-radius:8px;border:0}
.fw-600{font-weight:600}