/* ===== Al-Shamekha — public site theme ===== */
:root {
  --navy: #0e2240;
  --navy-2: #16345c;
  --navy-3: #1e4275;
  --gold: #c9a227;
  --gold-2: #e6c65a;
  --ink: #24303f;
  --muted: #6b7686;
  --bg-soft: #f6f8fb;
  --border-soft: #e6eaf0;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  color: var(--ink);
  background: #fff;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
  font-family: "Cairo", "Tajawal", sans-serif;
}

a { text-decoration: none; }

/* ---- Top bar ---- */
.topbar {
  background: var(--navy);
  color: #cfd8e6;
  font-size: .85rem;
  padding: .45rem 0;
}
.topbar a { color: #cfd8e6; transition: color .2s; }
.topbar a:hover { color: var(--gold-2); }
.topbar .bi { color: var(--gold); margin-inline-start: .25rem; }

/* ---- Navbar ---- */
.navbar-shamekh {
  background: #fff;
  box-shadow: 0 2px 18px rgba(14, 34, 64, .08);
  padding: .6rem 0;
}
.navbar-shamekh .brand-text { line-height: 1.1; display: flex; flex-direction: column; }
.navbar-shamekh .brand-text strong {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  /* stacked shadows read as extruded depth behind the wordmark */
  text-shadow:
    0 1px 0 #c8d2e0,
    0 2px 0 #b6c2d4,
    0 3px 0 #a6b3c8,
    0 4px 6px rgba(14, 34, 64, .35);
}
.navbar-shamekh .brand-text small { color: var(--muted); font-size: .7rem; }

/* ---- 3D gold logo ---- */
/* The artwork itself carries the gold extrusion (see img/logo-gold.png); this
   wrapper only adds the depth cast and the tilt on hover. */
.logo-3d {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  perspective: 640px;
}
.logo-3d img {
  height: 52px;
  width: auto;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .5s;
  filter: drop-shadow(0 3px 5px rgba(14, 34, 64, .3));
}
a:hover > .logo-3d img,
.logo-3d:hover img {
  transform: rotateY(-14deg) rotateX(8deg) translateZ(18px) scale(1.03);
  filter: drop-shadow(0 8px 14px rgba(14, 34, 64, .42));
}

/* sizes */
.logo-3d.logo-sm img { height: 58px; }
.logo-3d.logo-lg img { height: 104px; }

/* the pale gold needs a touch more bite against a white navbar */
.navbar-shamekh .logo-3d img { filter: drop-shadow(0 3px 5px rgba(14, 34, 64, .32)) saturate(1.08) contrast(1.06); }

/* on navy backgrounds the gold needs a warm halo instead of a grey shadow */
.logo-3d.on-dark img {
  filter:
    drop-shadow(0 3px 6px rgba(0, 0, 0, .55))
    drop-shadow(0 0 16px rgba(230, 198, 90, .3));
}
.logo-3d.on-dark:hover img,
a:hover > .logo-3d.on-dark img {
  filter:
    drop-shadow(0 8px 14px rgba(0, 0, 0, .6))
    drop-shadow(0 0 24px rgba(230, 198, 90, .45));
}

@media (prefers-reduced-motion: reduce) {
  .logo-3d img { transition: none; }
  a:hover > .logo-3d img, .logo-3d:hover img { transform: none; }
}
.navbar-shamekh .nav-link {
  color: var(--navy);
  font-weight: 700;
  font-size: .98rem;
  padding-inline: 1rem;
  position: relative;
}
.navbar-shamekh .nav-link::after {
  content: "";
  position: absolute;
  bottom: .15rem;
  right: 1rem;
  left: 1rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s;
}
.navbar-shamekh .nav-link:hover::after { transform: scaleX(1); }
.navbar-shamekh .dropdown-menu {
  border: 0;
  border-top: 3px solid var(--gold);
  box-shadow: 0 12px 30px rgba(14, 34, 64, .14);
  border-radius: 0 0 .75rem .75rem;
}
.navbar-shamekh .dropdown-item { padding: .55rem 1.25rem; font-weight: 500; }
.navbar-shamekh .dropdown-item:hover { background: var(--bg-soft); color: var(--navy); }

/* ---- Buttons ---- */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), #b08a1d);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 2rem;
  padding: .55rem 1.5rem;
  transition: transform .2s, box-shadow .2s;
}
.btn-gold:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 162, 39, .4);
}
.btn-outline-light-gold {
  border: 2px solid var(--gold-2);
  color: var(--gold-2);
  font-weight: 700;
  border-radius: 2rem;
  padding: .5rem 1.5rem;
}
.btn-outline-light-gold:hover { background: var(--gold-2); color: var(--navy); }

/* ---- Hero ---- */
.hero {
  position: relative;
  /* Layers, front to back: gold glow, navy wash, cover photo, skyline fallback, base gradient.
     A missing cover.jpg is simply skipped by the browser and cover.svg shows through. */
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(201, 162, 39, .22), transparent 60%),
    radial-gradient(900px 480px at 10% 110%, rgba(14, 34, 64, .70), rgba(14, 34, 64, .88)),
    url('../img/cover.jpg'),
    url('../img/cover.svg'),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
  background-size: auto, auto, cover, cover, auto;
  background-position: center, center, center, bottom center, center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 6.5rem 0 8.5rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
}
.hero .container { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(201, 162, 39, .15);
  border: 1px solid rgba(230, 198, 90, .5);
  color: var(--gold-2);
  border-radius: 2rem;
  font-size: .85rem;
  font-weight: 700;
  padding: .35rem 1rem;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 1rem;
}
.hero h1 .accent { color: var(--gold-2); }
.hero p.lead-text {
  color: #c6d2e2;
  font-size: 1.12rem;
  max-width: 640px;
  margin-bottom: 2rem;
}

/* ---- Stats strip ---- */
.stats-strip { margin-top: -4.5rem; position: relative; z-index: 2; }
.stat-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 14px 40px rgba(14, 34, 64, .12);
  padding: 1.5rem 1.25rem;
  text-align: center;
  height: 100%;
  border-bottom: 3px solid var(--gold);
}
.stat-card .num {
  font-family: "Cairo", sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--navy);
}
.stat-card .lbl { color: var(--muted); font-size: .9rem; font-weight: 500; }
.stat-card .bi { font-size: 1.5rem; color: var(--gold); }

/* ---- Sections ---- */
.section { padding: 4.5rem 0; }
.section-soft { background: var(--bg-soft); }
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title .eyebrow {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .5px;
  font-size: .9rem;
  display: block;
  margin-bottom: .4rem;
}
.section-title h2 {
  color: var(--navy);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  position: relative;
  display: inline-block;
  padding-bottom: .8rem;
}
.section-title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 70px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

/* ---- Cards ---- */
.card-elev {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  transition: transform .25s, box-shadow .25s;
  height: 100%;
}
.card-elev:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(14, 34, 64, .12);
}

/* announcements */
.announce-card {
  border-inline-start: 4px solid var(--gold);
  padding: 1.4rem 1.5rem;
}
.announce-card .date {
  color: var(--muted);
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.announce-card h5 { color: var(--navy); font-weight: 700; margin: .5rem 0 .65rem; }
.announce-card p { color: var(--muted); font-size: .95rem; margin-bottom: .9rem; }
.pin-badge {
  background: rgba(201, 162, 39, .14);
  color: #9a7a14;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: .2rem .7rem;
}

/* about preview */
.about-figure {
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  border-radius: 1.25rem;
  color: var(--gold-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  min-height: 320px;
  box-shadow: 0 18px 44px rgba(14, 34, 64, .25);
}
.about-figure .bi { font-size: 4.5rem; }
.about-figure .since { color: #c6d2e2; font-weight: 700; }
.about-content h3 { color: var(--navy); font-weight: 800; }
.about-content .excerpt { color: var(--muted); line-height: 1.9; }

/* feature list */
.feature-item { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; }
.feature-item .bi { color: var(--gold); font-size: 1.15rem; margin-top: .1rem; }

/* project card */
.project-card .cover {
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  border-radius: 1rem 1rem 0 0;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-2);
  font-size: 3rem;
}
.project-card .cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem 1rem 0 0; }
.project-card .body { padding: 1.35rem 1.4rem; }
.project-card h5 { color: var(--navy); font-weight: 700; }
.project-card p { color: var(--muted); font-size: .93rem; }

/* report chip */
.report-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
}
.report-tile .icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: .8rem;
  background: rgba(201, 162, 39, .12);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.report-tile h6 { color: var(--navy); font-weight: 700; margin: 0; }
.report-tile small { color: var(--muted); }

/* board member */
.member-card { text-align: center; padding: 2rem 1.4rem 1.6rem; }
.member-card .avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  overflow: hidden;
}
.member-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-card h6 { color: var(--navy); font-weight: 800; }
.member-card .pos { color: var(--gold); font-weight: 700; font-size: .88rem; }
.member-card .edu { color: var(--muted); font-size: .85rem; }

/* CTA band */
.cta-band {
  background:
    radial-gradient(800px 300px at 15% 120%, rgba(201, 162, 39, .25), transparent 60%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
}
.cta-band h3 { font-weight: 800; }
.cta-band p { color: #c6d2e2; margin-bottom: 0; }

/* ---- Inner pages ---- */
.page-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: #fff;
  padding: 3.5rem 0;
  margin-bottom: 3rem;
}
.page-hero h1 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; }
.page-hero .breadcrumb { margin: .6rem 0 0; }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: #c6d2e2; }
.page-hero .breadcrumb-item.active { color: var(--gold-2); }

.article-body { line-height: 2; color: #33404f; font-size: 1.03rem; }
.article-body h3 { color: var(--navy); font-weight: 800; margin: 1.6rem 0 .8rem; }
.article-body img { max-width: 100%; height: auto; border-radius: .75rem; }
.article-body table { width: 100%; }
.article-body li { margin-bottom: .45rem; }

/* forms */
.form-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  box-shadow: 0 10px 34px rgba(14, 34, 64, .08);
  padding: 2.25rem;
}
.form-control, .form-select {
  border-radius: .65rem;
  padding: .65rem .9rem;
  border-color: var(--border-soft);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .15);
}
.form-label { font-weight: 700; color: var(--navy); }

/* Stacked inside a column that Bootstrap stretches to the form's height, so these
   must opt out of .card-elev's height:100% or each tile inflates to the full column. */
.contact-info-tile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.3rem 1.4rem;
  height: auto;
}
.contact-info-tile h6 { font-size: .98rem; }
.contact-info-tile small { line-height: 1.7; display: block; }
.contact-info-tile .icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: .8rem;
  background: rgba(201, 162, 39, .12);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

/* ---- Footer ---- */
.footer {
  background: var(--navy);
  color: #aebbcd;
  padding: 3.5rem 0 0;
  margin-top: 4.5rem;
}
.footer-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: .6rem;
}
.footer-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 38px;
  height: 2px;
  background: var(--gold);
}
.footer-text { font-size: .93rem; line-height: 1.9; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: #aebbcd; transition: color .2s, padding .2s; }
.footer-links a:hover { color: var(--gold-2); padding-inline-start: .3rem; }
.footer-contact { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.footer-contact li { margin-bottom: .7rem; display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .bi { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem;
  padding: 1.1rem 0;
  font-size: .85rem;
  gap: .5rem;
}
.admin-link { color: #7f8ea3; font-size: .85rem; }
.admin-link:hover { color: var(--gold-2); }

@media (max-width: 991.98px) {
  .hero { padding: 4.5rem 0 7rem; }
  .navbar-shamekh .nav-link::after { display: none; }
}