.root-replaced{}
:root{
  --gold: #d4af37;
  --bronze: #5c3b22;
  --navy: #0f3b66;
  --accent: var(--navy);
  --bg: #f6f7fb;
  --surface: #ffffff;
  --muted:#6b7280;
  --radius: 12px;
  --container-width: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;margin:0;background:var(--bg);color:#0f172a;line-height:1.45}
.container{max-width:var(--container-width);margin:0 auto;padding:1rem}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(16,24,40,0.04);border-bottom:1px solid rgba(15,59,102,0.04)}
.site-header .container{display:flex;align-items:center;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:0.6rem;font-weight:700;color:var(--bronze);text-decoration:none;font-size:1.1rem}
.brand-logo{height:48px;object-fit:contain}
.main-nav{margin-left:1rem;display:flex;gap:0.75rem;align-items:center}
.main-nav a{color:var(--accent);text-decoration:none;padding:0.45rem 0.6rem;border-radius:8px;transition:background .15s}
.main-nav a:hover{background:rgba(15,59,102,0.06)}

.actions{margin-left:auto;display:flex;align-items:center;gap:0.5rem}
.lang-switch{text-decoration:none;padding:0.4rem 0.6rem;border-radius:8px;background:var(--surface);border:1px solid rgba(15,59,102,0.06);color:var(--accent)}

.menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0.4rem 0.6rem;font-size:1.2rem;cursor:pointer;color:var(--accent)}

/* Mobile nav (overlay) */
@media (max-width: 899px) {
  .main-nav{display:none;position:fixed;inset:0;top:72px;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.98));flex-direction:column;padding:2.5rem 1.25rem;gap:1rem;align-items:center;overflow:auto}
  body.nav-open .main-nav{display:flex}
  .site-header .container{height:64px}
}

/* Hero */
.hero{padding:3.25rem 1rem;text-align:center;background:linear-gradient(180deg,rgba(13,37,63,0.02),transparent)}
.hero h1{font-size:1.9rem;margin:0 0 0.5rem;color:var(--navy)}
.hero p{color:var(--muted);max-width:760px;margin:0 auto}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.25rem}
.cards article{background:var(--surface);border-radius:var(--radius);padding:1.1rem;box-shadow:0 6px 18px rgba(15,23,42,0.04);border:1px solid rgba(15,59,102,0.04)}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:0.75rem}
.gallery-grid img{width:100%;height:150px;object-fit:cover;border-radius:10px}

/* Forms */
form{display:grid;gap:.6rem;max-width:820px;margin:0 auto}
label{display:block;font-size:0.95rem;color:var(--muted)}
input[type=text],input[type=email],input[type=url],input[type=number],textarea,select,input[type=date]{width:100%;padding:.75rem;border:1px solid rgba(15,23,42,0.06);border-radius:10px;background:var(--surface);font-size:0.95rem}
textarea{min-height:110px}
button{background:var(--accent);color:#fff;padding:.75rem 1rem;border:0;border-radius:10px;font-weight:600;cursor:pointer}

/* Responsive tables */
.table-responsive{overflow:auto}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:8px;overflow:hidden}
table th, table td{padding:0.7rem 0.9rem;border-bottom:1px solid rgba(15,23,42,0.04);text-align:left}
table thead th{background:rgba(15,59,102,0.04);font-weight:600}

/* Board grid */
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.board-member{background:var(--surface);padding:1rem;border-radius:10px;box-shadow:0 6px 16px rgba(2,6,23,0.04)}

.site-footer{padding:1.25rem 0;border-top:1px solid rgba(15,23,42,0.04);margin-top:2rem;background:transparent}

.rtl{direction:rtl}

@media (min-width:900px){
  .menu-toggle{display:none}
}

/* Admissions page styles */
.admissions-page .admission-hero{padding:2rem 0 1.25rem}
.admission-grid{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start;margin-top:1.25rem}
.admission-form .success-alert{background:linear-gradient(90deg,rgba(34,197,94,0.06),transparent);border:1px solid rgba(34,197,94,0.12);padding:0.9rem;border-radius:10px;margin-bottom:1rem}
.admission-form .form-grid{display:grid;grid-template-columns:1fr;gap:0.75rem}
.form-grid.two-col{grid-template-columns:repeat(2,1fr)}
.form-grid label{display:block}
.form-grid label.full{grid-column:1/-1}
.form-actions{margin-top:0.75rem}
.admission-aside .card{background:var(--surface);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.04);border:1px solid rgba(15,59,102,0.04);margin-bottom:1rem}
.admission-aside .card h3{margin-top:0;margin-bottom:0.5rem}
.file-list{margin-top:0.5rem;display:flex;flex-direction:column;gap:0.5rem}
.file-item{display:flex;align-items:center;gap:0.6rem;background:rgba(2,6,23,0.02);padding:0.45rem;border-radius:8px}
.file-item img{width:48px;height:40px;object-fit:cover;border-radius:6px}
.file-item .meta{font-size:0.9rem;color:var(--muted)}

@media (max-width:900px){
  .admission-grid{grid-template-columns:1fr}
  .form-grid.two-col{grid-template-columns:1fr}
}

/* Theme updates: modern palette and component polish */
:root{
  --primary: #0B5FFF; /* vivid blue */
  --primary-600: #0845D1;
  --accent: #FFB020; /* warm amber */
  --accent-600: #E59400;
  --text: #0f172a;
  --muted: #6b7280;
  --bg: #F6F8FF;
  --surface: #FFFFFF;
  --card-radius: 14px;
  --card-shadow: 0 12px 30px rgba(2,6,23,0.08);
}

/* Navbar / brand */
.navbar{background:var(--surface);border-bottom:1px solid rgba(11,91,255,0.06)}
.site-title{color:var(--primary);font-weight:700}
.brand-logo{height:44px}

/* Hero */
.hero{background:linear-gradient(180deg,rgba(11,91,255,0.06),transparent);padding:3.5rem 0}
.hero .display-5{color:var(--primary);font-size:clamp(1.5rem,4.5vw,2.6rem)}
.hero .lead{color:var(--muted);font-size:clamp(0.95rem,2.6vw,1.15rem)}

/* Buttons */
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-600));border:0;color:#fff;box-shadow:var(--card-shadow)}
.btn-primary:hover{filter:brightness(0.98);transform:translateY(-1px)}
.btn-accent{background:linear-gradient(90deg,var(--accent),var(--accent-600));border:0;color:#0f172a}
.btn-outline-secondary{border-color:rgba(11,91,255,0.08);color:var(--primary)}

/* Nav icons alignment */
.nav-link .bi{font-size:1.05rem;vertical-align:-0.1rem}

/* Hero CTA */
.hero .btn-lg{padding:.9rem 1.2rem;border-radius:12px}
.hero .btn-outline-secondary{background:transparent}

/* Small interactive touches */
.btn{transition:transform .18s ease,box-shadow .18s ease}
.card{transition:transform .18s ease,box-shadow .18s ease}


/* Media overlay and interactions */
.media-card{border-radius:12px;overflow:hidden}
.media-card img{display:block;width:100%;height:clamp(120px,24vh,260px);object-fit:cover}
.media-overlay{background:linear-gradient(180deg,rgba(2,6,23,0.35),rgba(2,6,23,0.18));opacity:0;transition:opacity .18s ease,transform .18s ease}
.media-card:hover .media-overlay{opacity:1;transform:translateY(-4px)}
.media-overlay .bi{filter:drop-shadow(0 8px 20px rgba(2,6,23,0.45))}

/* Event card tweaks */
.event-card .card-title .bi{font-size:1.1rem}

/* Board avatars */
.board-member img{height:clamp(120px,22vh,200px);object-fit:cover;border-radius:8px}

/* Make cards clickable visually */
.card a.stretched-link{z-index:2}


/* Cards and surfaces */
.card{border-radius:var(--card-radius);box-shadow:var(--card-shadow);border:none}
.card h5{color:var(--text)}
.card .card-text{color:var(--muted)}
.card:hover{transform:translateY(-6px);transition:transform 180ms ease}

/* Links */
a{color:var(--primary)}

/* Forms */
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 0.12rem rgba(11,91,255,0.12)}

/* Gallery */
.card img{object-fit:cover;height:clamp(120px,22vh,220px)}

/* Small utilities */
.accent-badge{background:linear-gradient(90deg,var(--accent),var(--accent-600));color:#0f172a;padding:0.35rem 0.6rem;border-radius:8px;font-weight:600}

/* RTL adjustments */
.rtl .navbar .nav-link{text-align:right}

/* Responsive brand logo */
@media (max-width:576px){
  .brand-logo{height:36px}
  .site-title{font-size:1rem}
}

/* Make media overlay scale on small screens */
@media (max-width:480px){
  .media-card img{height:140px}
  .media-overlay .bi{font-size:2.2rem}
}

/* Skip link visible on focus */
.skip-link{position:absolute;left:12px;top:8px;padding:8px 12px;background:#0b1725;color:#fff;border-radius:6px;z-index:1050;transform:translateY(-120%);opacity:0;transition:transform .12s ease,opacity .12s ease}
.skip-link:focus{transform:translateY(0);opacity:1;outline:3px solid rgba(11,91,255,0.18)}

/* Focus-visible outlines for keyboard users */
:focus-visible{outline:3px solid rgba(11,91,255,0.18);outline-offset:2px}