/* OLC Mugoiri CBC Digital Hub — custom styling layer */

:root{
  --brand: #dc2626;
  --brand-dark: #b91c1c;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---------- Notification ticker ---------- */
.notice-track{ mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.notice-scroll{
  display: inline-flex;
  white-space: nowrap;
  animation: notice-marquee 28s linear infinite;
}
.notice-bar:hover .notice-scroll{ animation-play-state: paused; }
@keyframes notice-marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Nav links ---------- */
.navlink{ padding:.55rem .9rem; border-radius:9999px; transition:.15s; }
.navlink:hover{ background:#f1f5f9; color:#0f172a; }
.navlink-active{ background:#fef2f2; color:var(--brand-dark); font-weight:600; }
.mobile-link{ padding:.65rem .5rem; border-radius:.6rem; }
.mobile-link:active{ background:#f1f5f9; }

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius:1rem; border:1px solid #f1f5f9;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ box-shadow: 0 10px 28px rgba(15,23,42,.08); transform: translateY(-2px); }

.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:9999px; letter-spacing:.02em; }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--brand); color:#fff; font-weight:600; padding:.65rem 1.3rem; border-radius:.75rem;
  box-shadow: 0 8px 20px rgba(220,38,38,.25);
  transition: .15s;
}
.btn-primary:hover{ background: var(--brand-dark); transform: translateY(-1px); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:#fff; color:#334155; font-weight:600; padding:.65rem 1.3rem; border-radius:.75rem;
  border:1px solid #e2e8f0; transition:.15s;
}
.btn-outline:hover{ background:#f8fafc; border-color:#cbd5e1; }

.input, select.input, textarea.input{
  width:100%; padding:.65rem .9rem; border-radius:.7rem; border:1px solid #e2e8f0;
  background:#fff; font-size:.925rem; transition:.15s;
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
label.field-label{ display:block; font-size:.83rem; font-weight:600; color:#334155; margin-bottom:.35rem; }

/* Drag & drop file zone */
.dropzone{
  border:2px dashed #e2e8f0; border-radius:1rem; padding:1.75rem 1rem; text-align:center;
  background:#fafbfd; transition:.15s; cursor:pointer;
}
.dropzone.drag-over{ border-color: var(--brand); background:#fef2f2; }

/* Sidebar nav (teacher/admin) */
.sidebar-link{
  display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:.7rem;
  color:#475569; font-weight:500; font-size:.9rem; transition:.15s;
}
.sidebar-link:hover{ background:#f1f5f9; color:#0f172a; }
.sidebar-link-active{ background: var(--brand); color:#fff !important; box-shadow: 0 6px 16px rgba(220,38,38,.25); }
.sidebar-dark .sidebar-link{ color:#cbd5e1; }
.sidebar-dark .sidebar-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar-dark .sidebar-link-active{ background: var(--brand); color:#fff !important; }

/* Table */
.tbl th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; padding:.75rem 1rem; }
.tbl td{ padding:.85rem 1rem; border-top:1px solid #f1f5f9; font-size:.875rem; vertical-align: top; }
.tbl tr:hover td{ background:#fafbfd; }

/* Loading skeleton shimmer (optional use) */
.skeleton{ background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* Line clamp helper */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Star ribbon for featured/best projects */
.ribbon{
  position:absolute; top:.75rem; left:-.4rem; background:var(--brand); color:#fff; font-size:.7rem; font-weight:700;
  padding:.3rem .8rem .3rem .9rem; border-radius:0 .4rem .4rem 0; box-shadow:0 4px 10px rgba(220,38,38,.35);
}
.ribbon:before{
  content:""; position:absolute; left:0; bottom:-.4rem; border-width:.4rem .4rem 0 0; border-style:solid;
  border-color: var(--brand-dark) transparent transparent transparent;
}