:root{
  --green:#16a34a;
  --green-600:#15803d;
  --green-50:#f0fdf4;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --card:#ffffff;
  --border:#d1fae5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Cairo, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
body.rtl{direction:rtl}

.container{max-width:1100px;margin:auto;padding:0 1rem}
.row{display:flex;gap:1rem}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.gap-sm{gap:.5rem}
.grid{display:grid;gap:1.25rem}

/* Header blocks */
.mm-header{background:#fff;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none;font-weight:700}
.brand img{height:36px}
.brand small{font-weight:500;color:var(--muted)}
.search{display:flex;gap:.5rem}
.search input{padding:.55rem .75rem;border:1px solid var(--border);border-radius:10px;min-width:200px}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem;cursor:pointer}
.icon-btn:hover{border-color:var(--green)}

.mm-subhead{padding:.75rem 1rem;background:var(--green-50);border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted)}
.mm-classify{padding:.6rem 1rem;color:var(--text)}
.mm-classify .muted{color:var(--muted)}
.mm-tools{margin:1rem auto}
.card{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:1rem}
.card.soft{background:var(--green-50)}
.tools-grid{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.tool-label{display:block;margin-bottom:.3rem;color:var(--muted)}
select{padding:.5rem;border:1px solid var(--border);border-radius:10px;background:#fff}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;border:1px solid var(--border);font-weight:700}
.btn.sm{padding:.35rem .6rem;font-weight:600}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{background:var(--green-600)}

.mm-ease{margin-top:.75rem}

/* Off-canvas menu */
.side-menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .25s ease;z-index:40}
.side-menu.open{transform:none}
.side-menu__inner{position:relative;height:100%;padding:1rem}
.side-menu .close{position:absolute;top:.5rem;left:.5rem}
.menu-list{display:flex;flex-direction:column;gap:.5rem;padding-top:2.2rem}
.menu-list a{text-decoration:none;color:var(--text);padding:.5rem .75rem;border-radius:8px}
.menu-list a:hover{background:var(--green-50)}
.menu-list a.placeholder{color:var(--muted)}

/* Sections */
.section{padding:1.25rem 0 3rem}
.accordion{display:grid;gap:.75rem}
.acc-item{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:#fff;cursor:pointer}
.acc-head h3{margin:0;font-size:1.05rem}
.acc-head .arrow{transition:transform .2s ease}
.acc-item.open .acc-head{background:var(--green-50)}
.acc-item.open .arrow{transform:rotate(180deg)}
.acc-body{display:none;padding:1rem;border-top:1px solid var(--border);color:#111827}
.acc-item.open .acc-body{display:block}

.site-footer{border-top:1px solid var(--border);padding:1rem 0;color:var(--muted)}
.to-top{text-decoration:none;color:var(--muted)}

/* Responsive */
@media (max-width:640px){
  .search input{min-width:140px}
  .tools-grid{grid-template-columns:1fr}
}
/* ==== Footer (enhanced) – compact ==== */
.site-footer.enhanced{
  padding: 1.3rem 0 0;
  background:
    radial-gradient(900px 300px at 50% -20%, rgba(22,163,74,.08), transparent 70%),
    linear-gradient(180deg, var(--green-50), #fff);
  border-top: 0;
}

.footer-grid{
  display: grid;
  gap: .9rem;
  grid-template-columns: 1.1fr 2fr 1.5fr; /* logos | text | students */
  align-items: center;
}

.footer-logos{
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}

.logo-tile{
  display: grid;
  place-items: center;
  border-radius: 14px;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
  min-height: 70px;              /* smaller box */
}
.logo-tile img{
  max-width: 100%;
  max-height: 64px;               /* a bit larger than before */
}

/* make organizer logo slightly bigger */
.logo-tile.organizer img{
  max-height: 80px;
}

.logo-tile.on-green{ background: linear-gradient(180deg,#fff, #f6fff8); }
.logo-tile.on-light{ background: #fff; }

.footer-about{
  text-align: center;
  padding: 0 .5rem;
}
.footer-h1{
  margin: .1rem 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}
.footer-h2{
  margin: .1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.footer-h3{
  margin: .15rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
}

.footer-students{
  padding: .25rem 0;
}
.footer-section-title{
  margin: 0 0 .4rem;
  font-size: .95rem;
  color: var(--text);
}
.student-card{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: .55rem .7rem;
  margin-bottom: .4rem;
}
.student-name{
  font-weight: 700;
  margin-bottom: .15rem;
}
.badge{
  display: inline-block;
  margin-inline-start: .5rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--green-50);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: .78rem;
  color: var(--green-600);
}
.student-email{
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
}
.student-email:hover{ color: var(--text); }

/* bottom strip */
.footer-bottom{
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  background: #fff;
  padding: .6rem 0;
}
/* ==== Global mobile tweaks ==== */
@media (max-width: 768px){
  html{
    font-size: 15px;              /* slightly smaller text so things fit */
  }

  .container{
    padding: 0 .8rem;
  }

  /* Header layout on small screens */
  .mm-header .container.row{
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
  }

  .brand{
    order: 1;
  }

  .icon-btn#menuBtn{
    order: 2;
  }

  .search{
    order: 3;
    width: 100%;
  }
  .search input{
    flex: 1;
    min-width: 0;
  }

  /* Accordion titles a bit smaller */
  .acc-head h3{
    font-size: .95rem;
  }

  /* Footer stacks nicely on mobile */
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-about{
    text-align: center;
  }
  .footer-students{
    text-align: center;
  }
  .student-card{
    text-align: center;
  }
  .badge{
    display: inline-block;
    margin-top: .2rem;
  }
}
/* ====== ULTRA COMPACT FOOTER FIX ====== */

/* Reduce space above footer */
.section:last-of-type {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Shrink main footer body */
.site-footer.enhanced {
  padding-top: .6rem !important;
  padding-bottom: 0 !important;
  background:
    radial-gradient(700px 250px at 50% -20%, rgba(22,163,74,.06), transparent 70%),
    linear-gradient(180deg, var(--green-50), #fff);
}

/* Reduce grid spacing inside footer */
.footer-grid {
  gap: .4rem !important;
  align-items: center !important;
}

/* Shrink logo boxes even more */
.logo-tile {
  min-height: 60px !important;
  padding: .4rem .5rem !important;
}
.logo-tile img {
  max-height: 55px !important;
}
.logo-tile.organizer img {
  max-height: 68px !important;
}

/* Shrink text in the middle */
.footer-h1 {
  font-size: 1.1rem !important;
  margin: .05rem 0 !important;
}
.footer-h2 {
  font-size: .9rem !important;
  margin: .05rem 0 !important;
}
.footer-h3 {
  font-size: .75rem !important;
  margin: .05rem 0 !important;
}

/* Shrink student cards */
.student-card {
  padding: .45rem .55rem !important;
  margin-bottom: .25rem !important;
}
.student-name {
  font-size: .85rem !important;
}
.student-email {
  font-size: .78rem !important;
}

/* Shrink bottom footer strip */
.footer-bottom {
  margin-top: .3rem !important;
  padding: .3rem 0 !important;
}
/* === AI Hackathon style footer === */
.site-footer.enhanced{
  position: relative;
  padding-top: 1.6rem;
  background:
    radial-gradient(1200px 700px at 0% 100%, rgba(34,197,235,0.25), transparent 70%),
    linear-gradient(180deg,#020617,#000000);
  color: #e5f9ff;
  border-top: 1px solid #020817;
  overflow: hidden;
}

/* AI brain image on the left */
.site-footer.enhanced::before{
  content: "";
  position: absolute;
  inset: -10% 55% 0 0;               /* left side */
  background: url("../img/ai-footer.png") left center/contain no-repeat;
  opacity: 0.28;
  filter: drop-shadow(0 0 25px #22d3ee);
  pointer-events: none;
}

/* keep content above background */
.footer-grid,
.footer-bg,
.footer-bottom{
  position: relative;
  z-index: 1;
}

/* cards & logos on dark */
.student-card,
.logo-tile{
  background: rgba(15,23,42,0.9);
  border-color: #0f766e;
  box-shadow: 0 0 18px rgba(45,212,191,0.25);
}

.badge{
  background: rgba(34,197,94,0.15);
  border-color: #0f766e;
  color: #6ee7b7;
}

.footer-h1,
.footer-h2{
  color: #e5f9ff;
}
.footer-h3{
  color: #a5f3fc;
}

.footer-students h3{
  color: #e5f9ff;
}
.student-name{
  color: #e5f9ff;
}
.student-email{
  color: #bae6fd;
}
.student-email:hover{
  color: #ffffff;
}

/* logos */
.logo-tile.on-green,
.logo-tile.on-light{
  background: rgba(15,23,42,0.9);
}

/* bottom strip */
.footer-bottom{
  background: #020617;
  border-top: 1px solid #020617;
  padding: .4rem 0;
  color: #9ca3af;
}

.footer-bottom .to-top{
  color: #e5f9ff;
}
.footer-bottom .to-top:hover{
  color: #f9fafb;
}

/* mobile: keep it readable */
@media (max-width: 768px){
  .site-footer.enhanced::before{
    inset: -20% 20% 40% -30%;
    background-size: cover;
    opacity: 0.22;
  }
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}

.brand img{
  height:90px;       /* adjust 48–60px until you like it */
  width:auto;
}
.brand small{
  font-weight:500;
  color:var(--muted);
}
/* Big logo + text layout */
.brand{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:1rem 0;
}

.brand-text{
  text-align:right;   /* RTL alignment */
  white-space:nowrap; /* prevents stretching */
}

.brand-title{
  font-size:2.3rem;
  font-weight:700;
  margin:0;
}

.brand-subtitle{
  font-size:1.2rem;
  color:#475569;
  margin-top:.25rem;
}

/* BIG LOGO */
.brand-logo img{
  height:160px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* For smaller screens */
@media (max-width:768px){
  .brand{
    flex-direction:column-reverse;
    gap:1rem;
  }
  .brand-logo img{
    height:120px;
  }
}
/* ===== Reset brand layout & enlarge logo ONLY in the main header ===== */
.mm-header .brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

/* keep text as it was – don't stretch it */
.mm-header .brand span{
  display:inline-block;
  text-align:right;
}

/* BIGGER LOGO, but header not huge */
.mm-header .brand img{
  height:110px;      /* try 100–130px until you like it */
  width:auto;
  object-fit:contain;
}

/* keep header height reasonable */
.mm-header .container.row{
  align-items:center;
  padding-top:.5rem;
  padding-bottom:.5rem;
}
/* Keep logo and text together */
.brand-group{
  display:flex;
  align-items:center;
  gap:1rem;          /* space between logo and text */
}

/* Make logo large */
.brand-logo{
  height:120px;      /* make bigger as you want */
  width:auto;
}

/* Maintain text style exactly the same as before */
.brand-text .title{
  font-size:2.4rem;
  font-weight:700;
  color:#0f172a;      /* same original */
}

.brand-text .subtitle{
  font-size:1.2rem;
  color:#475569;
}
/* === Only enlarge the logo: do NOT touch text or layout === */
.mm-header .brand img{
  height:110px; /* change 110 → 120 or 130 if you want it even bigger */
  width:auto;
  object-fit:contain;
  display:block;
}
/* === Fix brand in main header: logo + text side-by-side, centered === */
.mm-header .brand{
  display:inline-flex;      /* put logo + text on one row */
  align-items:center;       /* vertically center them */
  justify-content:center;   /* keep them tight together */
  gap:.75rem;               /* distance between logo and text */
  width:auto;               /* don't stretch across header */
}

/* only control logo size, don't touch text */
.mm-header .brand img{
  height:150px;             /* adjust 110 → 120/130 if you want bigger */
  width:auto;
  object-fit:contain;
}
.mm-header {
  padding-top: 3px !important;
  padding-bottom: 1px !important;
}
.mm-header {
  background: linear-gradient(to bottom, #eefaf3 0%, #ffffff 90%);
  padding-bottom: 15px;
  border-bottom: 1px solid #e4f7ea;
  box-shadow: 0 4px 20px rgba(0, 128, 0, 0.05);
}