/* =====================================================
   MSC WEBSITE — MAIN STYLESHEET (2026 redesign)
   Muslim Student Council | AhlulBayt Islamic Societies

   Design language: "Night sky & illuminated page."
   Deep lapis night sections (hero, nav, footer) meet
   warm manuscript-paper content sections, bound by gold
   leaf accents and khatam (8-pointed star) geometry.

   NOTE ON TOKEN NAMES: the --green-* / --gold-* scale
   names are kept from the previous stylesheet so that
   every functional component further down (admin portal,
   calendar, passport, comments, profile…) reskins itself
   automatically. --green-* is now the lapis/night scale,
   --gold-* is true illumination gold.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Scheherazade+New:wght@400;700&display=swap');

/* =====================================================
   CSS CUSTOM PROPERTIES
   ===================================================== */
:root {
  /* Night / lapis scale */
  --green-900: #070A18;
  --green-800: #0C1230;
  --green-700: #16214E;
  --green-600: #23336F;
  --green-500: #35489B;
  --green-400: #5B6FBE;
  --green-300: #8C9CD8;
  --green-200: #B8C3EA;
  --green-100: #D8DEF4;
  --green-50:  #EDF0FA;

  /* Gold leaf scale */
  --gold-900: #453305;
  --gold-800: #6B4F0C;
  --gold-700: #8F6C14;
  --gold-600: #AD861C;
  --gold-500: #C9A227;
  --gold-400: #DAB94E;
  --gold-300: #E7CF7F;
  --gold-200: #F1E2AE;
  --gold-100: #F8F0D5;
  --gold-50:  #FCF8EC;

  /* Paper */
  --cream:      #F7F3E9;
  --cream-dark: #EFE9D9;
  --ivory:      #FCFAF4;

  /* Carnelian — manuscript red (donate, destructive) */
  --carnelian:      #A93226;
  --carnelian-dark: #8C2A20;

  --color-bg:           var(--cream);
  --color-bg-alt:       var(--ivory);
  --color-surface:      var(--ivory);
  --color-primary:      var(--green-700);
  --color-primary-dark: var(--green-800);
  --color-primary-light:var(--green-600);
  --color-accent:       var(--gold-600);
  --color-accent-light: var(--gold-300);
  --color-text:         #14182B;
  --color-text-muted:   #575D73;
  --color-border:       #D9D2BC;
  --color-border-light: #E9E3D2;

  /* Night-section ink tokens */
  --night:        var(--green-900);
  --night-soft:   rgba(255,255,255,0.68);
  --night-faint:  rgba(255,255,255,0.42);
  --night-line:   rgba(218,185,78,0.22);

  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Space Grotesk', 'Schibsted Grotesk', sans-serif;
  --font-arabic:  'Scheherazade New', 'Traditional Arabic', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(12,18,48,0.07);
  --shadow-sm: 0 2px 10px rgba(12,18,48,0.08);
  --shadow-md: 0 6px 20px rgba(12,18,48,0.11);
  --shadow-lg: 0 12px 36px rgba(12,18,48,0.15);
  --shadow-xl: 0 20px 56px rgba(12,18,48,0.22);
  --shadow-gold: 0 6px 24px rgba(201,162,39,0.28);

  --ease-fast:   160ms cubic-bezier(0.4,0,0.2,1);
  --ease-normal: 320ms cubic-bezier(0.4,0,0.2,1);
  --ease-slow:   560ms cubic-bezier(0.22,1,0.36,1);
  --ease-spring: 420ms cubic-bezier(0.34,1.56,0.64,1);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);

  --nav-height: 76px;
  --container-xl: 1280px;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

::selection { background: var(--gold-400); color: var(--green-900); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.display-1 { font-size: clamp(3rem, 8vw, 6.5rem);  font-weight: 500; letter-spacing: -0.02em; line-height: 0.98; }
.display-2 { font-size: clamp(2.25rem, 5.5vw, 4.25rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; }
.heading-1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; }
.heading-2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 600; }
.heading-3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.8; }

.text-gold    { color: var(--color-accent); }
.text-green   { color: var(--color-primary); }
.text-white   { color: #fff; }
.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }

/* Italic gold accent inside display headings */
.accent-word, .hero-title .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-400);
}

/* Arabic display */
.arabic-text {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.4em;
  line-height: 2;
}

/* =====================================================
   LAYOUT
   ===================================================== */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }

.section { padding-block: var(--space-20); position: relative; }
@media (min-width: 768px) { .section { padding-block: var(--space-24); } }

.section-header {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.section-label::before,
.section-label::after {
  content: '✦';
  font-size: 0.6rem;
  opacity: 0.75;
  letter-spacing: 0;
}

.divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  margin: var(--space-6) auto 0;
  position: relative;
}
.divider::after {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;
  color: var(--gold-600);
  background: inherit;
}

/* Khatam ornament — inline SVG helper */
.khatam {
  display: block;
  color: var(--gold-500);
  opacity: 0.9;
}
.khatam-spin { transform-origin: center; }

/* Manuscript frame corners — signature card treatment.
   Two gold L-shaped corner ticks (top-left / bottom-right). */
.frame-card { position: relative; }
.frame-card::before,
.frame-card::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--gold-500);
  opacity: 0.85;
  pointer-events: none;
  transition: width var(--ease-normal), height var(--ease-normal), opacity var(--ease-normal);
}
.frame-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.frame-card::after  { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.frame-card:hover::before,
.frame-card:hover::after { width: 40px; height: 40px; opacity: 1; }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 2rem;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), background var(--ease-normal), color var(--ease-normal), border-color var(--ease-normal);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}

/* Gold shimmer sweep */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 600ms var(--ease-out-expo);
  z-index: -1;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn-primary {
  background: var(--green-800);
  color: var(--gold-100);
  border-color: var(--green-700);
  box-shadow: 0 6px 20px rgba(12,18,48,0.28);
}
.btn-primary:hover {
  background: var(--green-700);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12,18,48,0.32);
}

.btn-gold {
  background: linear-gradient(160deg, var(--gold-400), var(--gold-500));
  color: var(--green-900);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: linear-gradient(160deg, var(--gold-300), var(--gold-400));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201,162,39,0.4);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--gold-400);
  color: var(--gold-200);
}

.btn-outline-green {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--green-700);
}
.btn-outline-green:hover { background: var(--green-800); border-color: var(--green-800); color: var(--gold-100); }

.btn-sm { padding: 0.55rem 1.3rem; font-size: var(--text-xs); }
.btn-lg { padding: 1.05rem 2.5rem; font-size: var(--text-sm); }
.w-full { width: 100%; }

.btn-donate {
  background: var(--carnelian);
  color: #FBEFE9;
  box-shadow: 0 6px 20px rgba(169,50,38,0.35);
}
.btn-donate:hover {
  background: var(--carnelian-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(169,50,38,0.4);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above Leaflet's own pane/control z-index stack (up to 1000) and above
     .mobile-menu (1001) — otherwise the fixed navbar renders behind the map
     on find-absoc.html (the only page with a Leaflet instance) once you
     scroll. Same root cause as the .mobile-menu fix below. */
  z-index: 1002;
  height: var(--nav-height);
  transition: background var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal), transform var(--ease-normal);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(7,10,24,0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--night-line);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-800));
  border: 1px solid var(--night-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--gold-300);
  font-family: var(--font-display);
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.nav-logo:hover .nav-logo-mark {
  border-color: var(--gold-500);
  box-shadow: 0 0 18px rgba(201,162,39,0.35);
}
.nav-logo-mark img { width: 78%; height: 78%; object-fit: contain; }
.nav-logo-abbr {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600; color: #fff;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.nav-logo-full {
  font-family: var(--font-label);
  font-size: 0.55rem; font-weight: 500;
  color: var(--gold-400);
  text-transform: uppercase; letter-spacing: 0.22em;
  line-height: 1;
  margin-top: 3px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-1);
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  transition: color var(--ease-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: 2px;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease-normal);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--gold-300); }
.nav-link.active::after { transform: scaleX(1); }

/* "About" nav dropdown — houses Get Involved. Opens on hover/focus, no JS
   needed; the trigger link still just navigates to about.html directly. */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 190px;
  background: rgba(7,10,24,0.98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--night-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--ease-fast), transform var(--ease-fast), visibility var(--ease-fast);
  z-index: 210;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  transition: all var(--ease-fast);
}
.nav-dropdown-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-dropdown-item.active { color: var(--gold-300); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-login {
  display: none;
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.22);
  transition: all var(--ease-fast);
}
@media (min-width: 768px) { .nav-login { display: flex; align-items: center; } }
.nav-login:hover { color: var(--gold-200); border-color: var(--gold-500); background: rgba(201,162,39,0.08); }

.nav-logout {
  background: none; cursor: pointer;
  font-family: var(--font-label);
  color: #E8A199;
  border-color: rgba(169,50,38,0.55);
}
.nav-logout:hover { color: #fff; background: rgba(169,50,38,0.25); border-color: rgba(233,109,94,0.7); }

.nav-admin-portal {
  display: none;
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-300);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--night-line);
  transition: all var(--ease-fast);
}
@media (min-width: 768px) { .nav-admin-portal { display: flex; align-items: center; } }
.nav-admin-portal:hover { color: var(--gold-100); border-color: var(--gold-500); background: rgba(201,162,39,0.1); }

.mobile-nav-logout {
  background: none; cursor: pointer;
  font-family: inherit;
  color: #E8A199;
  border-color: rgba(233,109,94,0.5);
}
.mobile-nav-logout:hover { color: #fff; background: rgba(169,50,38,0.25); }

.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: flex; } }

/* Hamburger */
.hamburger {
  display: flex; flex-direction: column;
  gap: 5px; padding: var(--space-2);
}
@media (min-width: 1024px) { .hamburger { display: none; } }
.hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--gold-300); border-radius: var(--radius-full);
  transition: all var(--ease-normal);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: var(--nav-height); left: 0; right: 0;
  background: linear-gradient(180deg, rgba(7,10,24,0.98), rgba(12,18,48,0.98));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: var(--space-5) var(--space-4) var(--space-6);
  /* Above Leaflet's own control/pane z-index stack (up to 1000) — otherwise
     the open menu renders behind the map on find-absoc.html, the only page
     with a Leaflet instance. Safe everywhere else: nothing else on the site
     goes above 1000 except the notification panel (250) and the member
     profile-completion gate (1500), neither of which co-occurs with the
     mobile menu. */
  z-index: 1001;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 480ms var(--ease-out-expo), opacity 320ms ease;
  border-top: 1px solid var(--night-line);
  border-bottom: 1px solid var(--night-line);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }

.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-label);
  font-weight: 500; font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--ease-fast);
}
.mobile-nav-link:hover { border-color: var(--night-line); color: var(--gold-200); background: rgba(201,162,39,0.06); }

.mobile-menu-actions {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--night-line);
}

/* =====================================================
   HERO — HOMEPAGE (night sky)
   ===================================================== */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 70% 15%, rgba(53,72,155,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(22,33,78,0.6) 0%, transparent 60%),
    linear-gradient(170deg, #05070F 0%, var(--green-900) 40%, #0B1233 100%);
}

/* Constellation canvas layer */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* Soft vignette above canvas so text always reads */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 30% 60%, rgba(5,7,15,0.55) 0%, transparent 55%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-height);
  padding-block: var(--space-20);
  width: 100%;
}

.hero-inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 58% 1fr;
    gap: var(--space-16);
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--gold-400);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}
.hero-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: var(--radius-full);
  background: var(--gold-400);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.75); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  font-weight: 500;
  line-height: 1.0;
  color: #F5F1E4;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.hero-title .accent { color: var(--gold-400); font-style: italic; font-weight: 500; }

/* Split-text line wrappers (added by js/motion.js).
   The mask needs extra room below the baseline, or Cormorant's
   descenders (g, y, j) get clipped by overflow: hidden — the
   negative margin gives that room back so line spacing is unchanged. */
.split-line { display: block; overflow: hidden; padding: 0.12em 0 0.24em; margin: -0.12em 0 -0.24em; }
.split-line > .split-inner { display: block; }

.hero-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--gold-300);
  opacity: 0.55;
  margin-bottom: var(--space-6);
  letter-spacing: 0.04em;
  display: block;
}

.hero-description {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--night-soft);
  line-height: 1.85;
  margin-bottom: var(--space-8);
  max-width: 520px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-10); }

.hero-stats-mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--night-line);
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--gold-400);
  line-height: 1;
}
.hero-stat-lbl {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--night-faint);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 7px;
}

/* Hero right — illuminated manuscript card (Daily Hadith) */
.hero-visual { display: none; }
@media (min-width: 1024px) { .hero-visual { display: block; position: relative; } }

.hero-glass-card {
  background: linear-gradient(165deg, rgba(252,250,244,0.07), rgba(252,250,244,0.03));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--night-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  z-index: 2;
}
/* gold manuscript corners */
.hero-glass-card::before,
.hero-glass-card::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border: 1px solid var(--gold-500);
  opacity: 0.9;
  pointer-events: none;
}
.hero-glass-card::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.hero-glass-card::after  { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.glass-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.glass-card-title {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.glass-card-badge {
  background: rgba(201,162,39,0.12);
  border: 1px solid var(--night-line);
  color: var(--gold-300);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.hadith-feed { position: relative; padding: var(--space-2) var(--space-2) 0; }
.hadith-quote-mark {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.6;
  display: block;
  margin-bottom: -0.5rem;
}
.hadith-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.6;
  color: rgba(252,250,244,0.94);
  font-style: italic;
  font-weight: 500;
}

/* Floating accent cards — small ivory manuscript slips */
.float-card {
  position: absolute;
  background: var(--ivory);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xl), 0 0 0 4px rgba(201,162,39,0.06);
  z-index: 3;
  animation: floatBob 5s ease-in-out infinite;
}
.float-card.top-right { top: -22px; right: -26px; animation-delay: 0s; max-width: 200px; }
.float-card.bottom-left { bottom: -54px; left: -26px; animation-delay: 2.4s; max-width: 200px; }

@keyframes floatBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}

.float-card-label {
  font-family: var(--font-label);
  font-size: 0.6rem; font-weight: 600;
  color: var(--gold-700);
  text-transform: uppercase; letter-spacing: 0.2em;
}
.float-card-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--green-800);
  line-height: 1.1;
}
.float-card-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.float-card-value-sm {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--green-800);
  line-height: 1.3;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-8); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2);
  color: var(--night-faint);
  font-family: var(--font-label);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  z-index: 2;
}
.scroll-mouse {
  width: 1px; height: 52px;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, var(--gold-500), transparent);
  display: block;
  padding: 0;
  position: relative;
  overflow: visible;
}
.scroll-dot {
  width: 5px; height: 5px;
  background: var(--gold-400);
  border-radius: var(--radius-full);
  position: absolute;
  left: -2px; top: 0;
  animation: scrollAnim 2.2s ease-in-out infinite;
}
@keyframes scrollAnim {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(44px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* =====================================================
   CAMPUS MARQUEE — scrolling band of university cities
   ===================================================== */
.uni-marquee {
  background: var(--green-900);
  border-top: 1px solid var(--night-line);
  border-bottom: 1px solid var(--night-line);
  overflow: hidden;
  padding-block: var(--space-4);
  position: relative;
  z-index: 3;
  cursor: grab;
  touch-action: pan-y; /* horizontal drags are ours; vertical still scrolls the page */
  user-select: none;
  -webkit-user-select: none;
}
.uni-marquee.is-grabbing { cursor: grabbing; }
.uni-marquee-track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
}
.uni-marquee:hover .uni-marquee-track { animation-play-state: paused; }
.uni-marquee-track.is-js { animation: none; } /* JS drag module has taken over */
.uni-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: rgba(252,250,244,0.5);
  white-space: nowrap;
}
.uni-marquee-item::after {
  content: '✦';
  font-style: normal;
  font-size: 0.65rem;
  color: var(--gold-500);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================
   STATS SECTION
   ===================================================== */
.stats-section {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(53,72,155,0.25) 0%, transparent 60%),
    linear-gradient(180deg, var(--green-900), var(--green-800));
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DAB94E' stroke-width='0.5' opacity='0.07'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  position: relative;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card { text-align: center; padding: var(--space-6); position: relative; }
.stat-card + .stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 20%;
  height: 60%; width: 1px;
  background: var(--night-line);
}
@media (max-width: 767px) {
  .stat-card:nth-child(odd)::before { display: none; }
}
.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--night-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto var(--space-4);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  font-weight: 500;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-lbl {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--night-faint);
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

/* =====================================================
   WHAT WE DO — CARDS
   ===================================================== */
.activities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .activities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .activities-grid { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 640px) { .activities-grid .activity-card.featured { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .activities-grid .activity-card.featured { grid-column: auto; } }

.activity-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
  position: relative;
  overflow: hidden;
}
.activity-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0;
  transition: opacity var(--ease-normal);
}
.activity-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold-300); }
.activity-card:hover::after { opacity: 1; }

.activity-icon {
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-spring);
}
.activity-card:hover .activity-icon { transform: rotate(-6deg) scale(1.08); }
.icon-bg-green  { background: var(--green-50); }
.icon-bg-gold   { background: var(--gold-100); }
.icon-bg-red    { background: #F9EAE7; }
.icon-bg-blue   { background: #EAF0FA; }
.icon-bg-purple { background: #F1EDF8; }

.activity-title { font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-3); }
.activity-desc  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }

/* =====================================================
   EVENTS PREVIEW
   ===================================================== */
.events-section {
  background: var(--cream-dark);
  position: relative;
  overflow: hidden;
}

.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }

.event-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-normal), box-shadow var(--ease-normal);
}
.event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.event-card-img {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  position: relative;
}
.event-card-body { padding: var(--space-5); }

.event-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-label);
  font-size: 0.64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.badge-religious    { background: var(--green-50);  color: var(--green-700); }
.badge-social       { background: var(--gold-100);  color: var(--gold-800); }
.badge-charity      { background: #F9EAE7;          color: var(--carnelian); }
.badge-educational  { background: #EAF0FA;          color: #2C4A9A; }
.badge-interfaith   { background: #F1EDF8;          color: #5B3E8F; }
.badge-national     { background: var(--green-900); color: var(--gold-400); }

.event-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); line-height: 1.3; }

.event-meta { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-4); }
.event-meta-row {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
}

.event-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.event-absoc { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }
.event-rsvp-btn {
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  padding: 5px 14px;
  border: 1px solid var(--green-700);
  border-radius: var(--radius-md);
  transition: all var(--ease-fast);
}
.event-rsvp-btn:hover { background: var(--green-800); color: var(--gold-100); }

/* Legacy event feed (hero variants) */
.event-feed { display: flex; flex-direction: column; gap: var(--space-3); }
.event-feed-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  transition: background var(--ease-fast);
}
.event-feed-item:hover { background: rgba(255,255,255,0.09); }
.event-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.dot-green  { background: var(--green-400); }
.dot-gold   { background: var(--gold-400); }
.dot-coral  { background: #D96C5F; }
.dot-blue   { background: #64B5F6; }
.event-feed-name { font-size: var(--text-sm); color: rgba(255,255,255,0.85); font-weight: 500; flex: 1; }
.event-feed-time { font-size: var(--text-xs); color: rgba(255,255,255,0.35); }

/* =====================================================
   MAP TEASER
   ===================================================== */
.map-teaser {
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%, rgba(53,72,155,0.3) 0%, transparent 60%),
    linear-gradient(165deg, var(--green-900), var(--green-800));
  padding-block: var(--space-24);
  position: relative;
  overflow: hidden;
}
.map-teaser::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23DAB94E' opacity='0.06' stroke-width='0.6'%3E%3Ccircle cx='45' cy='45' r='34'/%3E%3Ccircle cx='45' cy='45' r='20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px;
}

.map-teaser-inner {
  display: grid; gap: var(--space-12); align-items: center;
  position: relative;
}
@media (min-width: 1024px) {
  .map-teaser-inner { grid-template-columns: 1fr 1.4fr; }
}

.map-teaser-text { color: #fff; }
.map-teaser-text .section-label { color: var(--gold-400); }
.map-teaser-heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 500; color: #F5F1E4; line-height: 1.1;
  margin-bottom: var(--space-5);
}
.map-teaser-desc {
  font-size: var(--text-lg);
  color: var(--night-soft); line-height: 1.8;
  margin-bottom: var(--space-8);
}
.map-features { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.map-feat {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--night-soft);
}
.map-feat-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--night-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); flex-shrink: 0;
}

.map-preview-box {
  height: 380px;
  border-radius: var(--radius-lg);
  background: rgba(252,250,244,0.04);
  border: 1px solid var(--night-line);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.map-preview-uk { width: 100%; height: 100%; object-fit: contain; opacity: 0.5; }
.map-pin {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--gold-500);
  border: 2px solid var(--green-900);
  box-shadow: 0 0 0 2px var(--gold-500), 0 4px 16px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform var(--ease-spring);
}
.map-pin:hover { transform: scale(1.2); }
.map-pin-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--ivory); color: var(--green-900);
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-fast);
}
.map-pin:hover .map-pin-tooltip { opacity: 1; }

/* =====================================================
   INSTAGRAM FEED
   ===================================================== */
.instagram-section { background: var(--cream-dark); padding-block: var(--space-16); }

.insta-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-8);
}
.insta-handle {
  font-family: var(--font-label);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-primary);
  display: flex; align-items: center; gap: var(--space-2);
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
@media (min-width: 640px) { .insta-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
@media (min-width: 768px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }

.insta-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.insta-item-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  transition: transform var(--ease-slow);
}
.insta-item:hover .insta-item-img { transform: scale(1.07); }

.insta-overlay {
  position: absolute; inset: 0;
  background: rgba(7,10,24,0);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-200); font-size: 1.25rem;
  opacity: 0;
  transition: all var(--ease-normal);
}
.insta-item:hover .insta-overlay { background: rgba(7,10,24,0.55); opacity: 1; }

/* =====================================================
   MEMBER TIERS SECTION
   ===================================================== */
.tiers-section { background: var(--color-bg); }

.tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .tiers-grid { grid-template-columns: repeat(3, 1fr); } }

.tier-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tier-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tier-card.featured {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-gold);
}
.tier-card.featured::before {
  content: 'Most Popular';
  position: absolute; top: 18px; right: -30px;
  background: var(--gold-500);
  color: var(--green-900);
  font-family: var(--font-label);
  font-size: 0.62rem; font-weight: 700;
  padding: 4px 40px;
  transform: rotate(45deg);
  text-transform: uppercase; letter-spacing: 0.12em;
}

.tier-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.64rem; font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.tier-badge.green  { background: var(--green-50);  color: var(--green-700); }
.tier-badge.gold   { background: var(--gold-100);  color: var(--gold-800); }
.tier-badge.red    { background: #F9EAE7;          color: var(--carnelian); }

.tier-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.tier-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }

.tier-features {
  text-align: left;
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.tier-feat {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.tier-check { color: var(--gold-600); font-weight: 900; flex-shrink: 0; margin-top: 2px; }

/* =====================================================
   NEWS SECTION
   ===================================================== */
.news-section { background: var(--color-bg); }

.news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) { .news-layout { grid-template-columns: 5fr 3fr; } }

.news-featured-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  transition: all var(--ease-normal);
}
.news-featured-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.news-featured-img {
  height: 300px;
  position: relative;
  display: flex; align-items: flex-end;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
}
.news-featured-img::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,10,24,0.92) 0%, rgba(7,10,24,0.1) 55%, transparent 100%);
}
.news-featured-tag {
  position: absolute; top: var(--space-5); left: var(--space-5);
  background: var(--gold-500); color: var(--green-900);
  font-family: var(--font-label);
  font-size: 0.64rem; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.news-featured-img-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 600; color: #F5F1E4; line-height: 1.25;
}
.news-featured-emoji {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem; opacity: 0.2;
}

.news-body { padding: var(--space-6); }
.news-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }
.news-meta-row {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.news-meta-dot { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-border); }

.news-side-list { display: flex; flex-direction: column; gap: var(--space-4); }

.news-item-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  display: flex; gap: var(--space-4);
  transition: all var(--ease-fast);
  align-items: flex-start;
}
.news-item-card:hover { box-shadow: var(--shadow-md); transform: translateX(4px); border-color: var(--gold-300); }

.news-item-thumb {
  width: 76px; height: 76px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; flex-shrink: 0;
}
.news-item-tag { font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.news-item-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; margin-bottom: 5px; }
.news-item-date { font-size: var(--text-xs); color: var(--color-text-muted); }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(53,72,155,0.25) 0%, transparent 60%),
    var(--green-900);
  color: var(--night-soft);
  padding-top: var(--space-20);
  border-top: 1px solid var(--night-line);
  position: relative;
  overflow: hidden;
}
/* keep links/text above the injected constellation canvas */
.footer > .container { position: relative; z-index: 1; }

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
  position: relative;
}
@media (min-width: 640px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 2.5fr 1fr 1fr 1fr; } }

.footer-logo-row {
  display: flex; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.footer-logo-mark {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-800));
  border: 1px solid var(--night-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--gold-300);
  font-family: var(--font-display);
}
.footer-logo-mark img { width: 78%; height: 78%; object-fit: contain; }
.footer-logo-name {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; color: #F5F1E4;
}
.footer-tagline {
  font-size: var(--text-sm); line-height: 1.75;
  max-width: 280px; margin-bottom: var(--space-5);
  color: var(--night-faint);
}
.footer-arabic {
  font-family: var(--font-arabic);
  font-size: 1.2rem; color: var(--gold-300);
  opacity: 0.4;
  margin-bottom: var(--space-5);
  display: block;
}

.footer-socials { display: flex; gap: var(--space-2); }
.footer-social-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: rgba(252,250,244,0.04);
  border: 1px solid var(--night-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: rgba(252,250,244,0.55);
  transition: all var(--ease-fast);
  text-decoration: none;
}
.footer-social-btn:hover {
  background: rgba(201,162,39,0.12);
  border-color: var(--gold-500);
  color: var(--gold-300);
  transform: translateY(-3px);
}

.footer-col-title {
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 600;
  color: var(--gold-400); text-transform: uppercase; letter-spacing: 0.24em;
  margin-bottom: var(--space-5);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-link {
  font-size: var(--text-sm); color: var(--night-faint);
  transition: color var(--ease-fast), transform var(--ease-fast);
  display: inline-block;
  width: fit-content;
}
.footer-link:hover { color: var(--gold-300); transform: translateX(4px); }

.footer-bottom {
  border-top: 1px solid var(--night-line);
  padding-block: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  align-items: center; text-align: center;
  font-family: var(--font-label);
  font-size: var(--text-xs); color: rgba(252,250,244,0.3);
  letter-spacing: 0.04em;
  position: relative;
}
@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.footer-bottom-links { display: flex; gap: var(--space-4); }
.footer-bottom-link { color: rgba(252,250,244,0.3); transition: color var(--ease-fast); }
.footer-bottom-link:hover { color: var(--gold-300); }

/* Big watermark wordmark behind footer */
.footer-watermark {
  position: absolute;
  bottom: -0.18em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 20rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(252,250,244,0.025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* =====================================================
   PAGE HERO (inner pages)
   ===================================================== */
.page-hero {
  background:
    radial-gradient(ellipse 80% 90% at 75% 0%, rgba(53,72,155,0.35) 0%, transparent 55%),
    linear-gradient(170deg, #05070F 0%, var(--green-900) 55%, var(--green-800) 100%);
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-16);
  position: relative; overflow: hidden;
}
/* faint khatam lattice */
.page-hero-content { position: relative; z-index: 1; text-align: center; color: #fff; }
.page-hero-label {
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--gold-400); text-transform: uppercase; letter-spacing: 0.3em;
  margin-bottom: var(--space-4);
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 500; color: #F5F1E4;
  margin-bottom: var(--space-4); line-height: 1.05;
  letter-spacing: -0.015em;
}
.page-hero-desc {
  font-size: var(--text-lg);
  color: var(--night-soft);
  max-width: 620px; margin: 0 auto; line-height: 1.8;
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 500;
  color: var(--night-faint);
  text-transform: uppercase; letter-spacing: 0.18em;
  margin-bottom: var(--space-4);
  justify-content: center;
}
.breadcrumb-sep { color: var(--gold-600); }
.breadcrumb-current { color: var(--gold-400); }

/* =====================================================
   TEAM CARDS
   ===================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
  text-align: center;
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
  cursor: pointer;
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold-300); }

.team-avatar {
  width: 88px; height: 88px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); font-weight: 700;
  color: #fff; font-family: var(--font-display);
  margin: 0 auto var(--space-4);
  border: 3px solid var(--gold-200);
  transition: border-color var(--ease-normal);
}
.team-card:hover .team-avatar { border-color: var(--gold-400); }
.avatar-green  { background: linear-gradient(135deg, var(--green-700), var(--green-500)); }
.avatar-gold   { background: linear-gradient(135deg, var(--gold-700),  var(--gold-500)); }
.avatar-teal   { background: linear-gradient(135deg, #1F5F5B, #2E877F); }
.avatar-indigo { background: linear-gradient(135deg, #37348F, #5450C7); }

.team-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: 3px; }
.team-role { font-family: var(--font-label); font-size: 0.64rem; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.team-university { font-size: var(--text-xs); color: var(--color-text-muted); }

.team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }

.team-card.lead {
  border: 1px solid var(--gold-400);
  background: linear-gradient(165deg, var(--gold-50), var(--ivory));
  max-width: 220px;
  width: 100%;
}

.team-section-block { margin-bottom: 4rem; }
.team-section-block:last-child { margin-bottom: 0; }
.team-section-title-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem;
}
.team-section-title-row .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border)); }
.team-section-title-row .line:last-child { background: linear-gradient(90deg, var(--color-border), transparent); }
.team-section-title {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700;
  color: var(--green-700);
  white-space: nowrap; letter-spacing: 0.02em;
}
.team-subgroup { margin-bottom: 1.75rem; }
.team-subgroup:last-child { margin-bottom: 0; }
.team-subgroup-label {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--color-text-muted);
  margin-bottom: 0.875rem;
}
.team-lead-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; margin-bottom: 1rem;
}
.team-lead-row:last-child { margin-bottom: 0; }
.team-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.875rem;
  max-width: 640px;
  margin: 0 auto;
}

/* =====================================================
   SOCIETY CARDS
   ===================================================== */
.society-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .society-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .society-grid { grid-template-columns: repeat(3, 1fr); } }

.society-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
}
.society-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--gold-300); }

.society-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.society-logo-sm {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-800));
  border: 1px solid var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: var(--gold-300);
  font-family: var(--font-display); flex-shrink: 0;
}
.society-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.society-uni  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.society-city {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.society-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.society-tag {
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--green-50); color: var(--green-700);
  border: 1px solid var(--green-100);
}

/* =====================================================
   MAP PAGE
   ===================================================== */
.map-page-wrap { padding-top: var(--nav-height); }

.map-controls-bar {
  background: var(--color-surface);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky; top: var(--nav-height); z-index: 50;
}
.map-search-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}

.search-input, .filter-select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-family: var(--font-body);
  background: var(--color-bg); color: var(--color-text);
  outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.search-input { flex: 1; min-width: 200px; }
.search-input:focus, .filter-select:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,0.15); }
.filter-select { cursor: pointer; }

.view-toggle {
  display: flex; gap: 3px;
  background: var(--color-bg); padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}
.view-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted); transition: all var(--ease-fast);
}
.view-btn.active { background: var(--green-800); color: var(--gold-100); }

.find-absoc-gate {
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--green-50);
}
.find-absoc-gate-inner { text-align: center; }

#map-container {
  height: calc(100vh - var(--nav-height) - 76px);
  background: var(--green-50);
}
.society-list-view { display: none; padding: var(--space-8) var(--space-4); }
.society-list-view.active { display: block; }

/* =====================================================
   EVENTS CALENDAR PAGE
   ===================================================== */
.cal-wrap { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .cal-wrap { grid-template-columns: 1fr 340px; } }

.cal-main { min-width: 0; }

.cal-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3);
}
.cal-month-label {
  font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: 700;
}
.cal-nav-btns { display: flex; gap: var(--space-2); }
.cal-nav-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all var(--ease-fast);
  cursor: pointer; background: var(--color-surface);
}
.cal-nav-btn:hover { background: var(--green-800); color: var(--gold-100); border-color: var(--green-800); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cal-day-hdr {
  background: var(--color-surface);
  text-align: center; padding: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 600;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em;
}
.cal-day {
  background: var(--color-surface);
  min-height: 80px; padding: var(--space-2);
  cursor: pointer; transition: background var(--ease-fast);
  position: relative;
}
.cal-day:hover { background: var(--gold-50); }
.cal-day.today { background: var(--gold-50); }
.cal-day.today .cal-day-num {
  background: var(--green-800); color: var(--gold-200);
  border-radius: var(--radius-full);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cal-day.empty { background: var(--color-bg); cursor: default; pointer-events: none; }
.cal-day.other-month .cal-day-num { color: var(--color-border); }
.cal-day-num { font-family: var(--font-label); font-size: var(--text-sm); font-weight: 500; margin-bottom: 4px; }
.cal-event-pill {
  font-size: 0.6rem; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-sm);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block;
}
.pill-green     { background: var(--green-100); color: var(--green-800); }
.pill-gold      { background: var(--gold-100);  color: var(--gold-800); }
.pill-red       { background: #F6DEDA;          color: var(--carnelian-dark); }
.pill-blue      { background: #DBE5F5;          color: #24408E; }

/* Sidebar */
.cal-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.cal-sidebar-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
}
.sidebar-section-title { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-4); color: var(--color-accent); }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  cursor: pointer; transition: all var(--ease-fast);
  color: var(--color-text-muted);
  background: none;
}
.filter-chip.active { background: var(--green-800); color: var(--gold-100); border-color: var(--green-800); }
.filter-chip:hover  { border-color: var(--gold-500); color: var(--gold-700); }
.filter-chip.active:hover { color: var(--gold-100); }

.upcoming-events { display: flex; flex-direction: column; gap: var(--space-3); }
.upcoming-event {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  transition: border-color var(--ease-fast);
  cursor: pointer;
}
.upcoming-event:hover { border-color: var(--gold-400); }
.upcoming-event-date {
  min-width: 44px;
  text-align: center;
  background: var(--green-50);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.upcoming-event-day { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); line-height: 1; }
.upcoming-event-month { font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.upcoming-event-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.upcoming-event-absoc { font-size: var(--text-xs); color: var(--color-text-muted); }

/* =====================================================
   ABSOC TEMPLATE PAGE
   ===================================================== */
.absoc-page-header { position: relative; }
.absoc-banner {
  height: 220px;
  background:
    radial-gradient(ellipse 70% 90% at 70% 0%, rgba(53,72,155,0.4) 0%, transparent 60%),
    linear-gradient(135deg, var(--green-900), var(--green-700));
  position: relative; overflow: hidden;
}

.absoc-sidebar #join {
  background: linear-gradient(135deg, color-mix(in srgb, var(--absoc-accent, var(--green-800)) 85%, black), var(--absoc-accent, var(--green-700)));
}
/* No students'-union link set yet — greyed out and inert, same treatment
   as an unset Instagram/WhatsApp row below it. */
.absoc-union-link-empty { opacity: 0.45; pointer-events: none; }
.absoc-action-row .btn-primary {
  background: linear-gradient(135deg, var(--absoc-accent, var(--green-700)), color-mix(in srgb, var(--absoc-accent, var(--green-700)) 70%, white));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--absoc-accent, var(--green-700)) 35%, transparent);
}
.absoc-action-row .btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--absoc-accent, var(--green-700)) 80%, black), var(--absoc-accent, var(--green-700)));
}
.absoc-action-row .btn-outline-green {
  color: var(--absoc-accent, var(--color-primary));
  border-color: var(--absoc-accent, var(--color-primary));
}
.absoc-action-row .btn-outline-green:hover {
  background: var(--absoc-accent, var(--color-primary));
  color: #fff;
}

.absoc-profile-row {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-6);
  padding-top: 0;
  position: relative;
}
@media (min-width: 640px) { .absoc-profile-row { flex-direction: row; align-items: flex-end; } }

.absoc-logo-xl {
  width: 100px; height: 100px;
  border-radius: var(--radius-lg);
  background: var(--ivory);
  border: 3px solid var(--gold-300);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; font-weight: 700;
  color: var(--green-700); font-family: var(--font-display);
  flex-shrink: 0;
  margin-top: -50px;
  position: relative; z-index: 1;
}
.absoc-logo-xl img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.absoc-info { flex: 1; }
.absoc-name-xl {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600; line-height: 1.15;
  margin-bottom: 4px;
}
.absoc-university-lbl {
  font-size: var(--text-base); color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.absoc-follower-count {
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
}
.absoc-action-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.absoc-content { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .absoc-content { grid-template-columns: 1fr 340px; } }

.absoc-main { min-width: 0; }
.absoc-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }

.absoc-section-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-6);
}
.absoc-section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }

/* Gallery */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) { .photo-gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery-item {
  aspect-ratio: 1; border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, var(--green-700), var(--green-600));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.gallery-item::after {
  content: '🔍';
  position: absolute; inset: 0;
  background: rgba(7,10,24,0);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  transition: all var(--ease-normal);
  opacity: 0;
}
.gallery-item:hover::after { background: rgba(7,10,24,0.5); opacity: 1; }

/* =====================================================
   FORMS
   ===================================================== */
.form-section { background: var(--color-bg); }

.form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }

.form-input, .form-textarea, .form-select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-family: var(--font-body);
  color: var(--color-text); background: var(--ivory);
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  outline: none; width: 100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.15);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { cursor: pointer; }

.password-field { position: relative; }
.password-field .form-input { padding-right: var(--space-10); }
.password-toggle {
  position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: var(--text-base); line-height: 1; padding: var(--space-2);
  opacity: 0.55; transition: opacity var(--ease-fast);
}
.password-toggle:hover { opacity: 1; }
.password-toggle svg { display: block; }

.signup-level-options { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
.signup-level-options label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 500; }

.password-strength-meter {
  display: flex; gap: 4px;
  margin-top: var(--space-2);
}
.password-strength-bar {
  height: 4px; flex: 1;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
  transition: background var(--ease-fast);
}
.password-strength-bar.filled[data-level="1"] { background: #C0392B; }
.password-strength-bar.filled[data-level="2"] { background: #D68910; }
.password-strength-bar.filled[data-level="3"] { background: var(--gold-500); }
.password-strength-bar.filled[data-level="4"] { background: #7C9C35; }
.password-strength-bar.filled[data-level="5"] { background: #3E7C3A; }
.password-strength-label {
  font-size: var(--text-xs); font-weight: 700;
  margin-top: var(--space-1);
}
.password-strength-label[data-level="0"], .password-strength-label[data-level="1"] { color: #C0392B; }
.password-strength-label[data-level="2"] { color: #D68910; }
.password-strength-label[data-level="3"] { color: var(--gold-700); }
.password-strength-label[data-level="4"] { color: #63822B; }
.password-strength-label[data-level="5"] { color: #3E7C3A; }

/* =====================================================
   LOGIN PAGE
   ===================================================== */
.login-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 70% at 70% 10%, rgba(53,72,155,0.35) 0%, transparent 55%),
    linear-gradient(170deg, #05070F, var(--green-900) 60%, var(--green-800));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  position: relative; overflow: hidden;
}
.login-card {
  background: var(--ivory);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-300);
  padding: var(--space-10);
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(201,162,39,0.08);
  position: relative; z-index: 1;
}
/* manuscript corners on the login card */
.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--gold-500);
  opacity: 0.7;
  pointer-events: none;
}
.login-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.login-card::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.login-logo-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.login-logo-mark {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-800));
  border: 1px solid var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; color: var(--gold-300);
  font-family: var(--font-display);
  overflow: hidden;
}
.login-logo-mark img { width: 78%; height: 78%; object-fit: contain; }
.login-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; margin-bottom: 4px; }
.login-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }

.login-divider {
  display: flex; align-items: center; gap: var(--space-4);
  margin-block: var(--space-5);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--color-border-light);
}
.login-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); font-size: var(--text-sm);
}
.login-remember { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.login-forgot { font-weight: 600; color: var(--color-primary); }
.login-signup { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-6); }
.login-signup a { color: var(--color-primary); font-weight: 700; }

/* Tier selector on login */
.tier-selector { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.tier-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer; transition: all var(--ease-fast);
}
.tier-option:hover { border-color: var(--gold-500); background: var(--gold-50); }
.tier-option.selected { border-color: var(--gold-500); background: var(--gold-50); box-shadow: 0 0 0 3px rgba(201,162,39,0.12); }
.tier-option-icon { font-size: 1.25rem; }
.tier-option-label { font-size: var(--text-sm); font-weight: 700; }
.tier-option-desc { font-size: var(--text-xs); color: var(--color-text-muted); }

/* =====================================================
   GET INVOLVED PAGE
   ===================================================== */
.involvement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .involvement-grid { grid-template-columns: repeat(2, 1fr); } }

.involvement-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
  position: relative; overflow: hidden;
}
.involvement-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold-300); }

.involvement-num {
  position: absolute; top: var(--space-4); right: var(--space-6);
  font-family: var(--font-display); font-size: 4.5rem; font-weight: 600;
  color: var(--gold-200); line-height: 1; user-select: none;
  font-style: italic;
}
.involvement-icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.involvement-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-3); }
.involvement-desc  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-5); }

.steps-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.step-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.step-num {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--gold-100); border: 1px solid var(--gold-300);
  color: var(--gold-800); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

/* WhatsApp CTA */
.whatsapp-cta {
  background: linear-gradient(135deg, #0E6E62, #1DA851);
  color: #fff; border-radius: var(--radius-lg);
  padding: var(--space-8); text-align: center;
}
.whatsapp-cta-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-3); color: #fff; }
.whatsapp-cta-desc  { font-size: var(--text-base); opacity: 0.9; margin-bottom: var(--space-6); }

/* =====================================================
   NEWS PAGE
   ===================================================== */
.news-page-layout {
  display: grid; gap: var(--space-8);
}
@media (min-width: 1024px) { .news-page-layout { grid-template-columns: 1fr 320px; } }

.article-list { display: flex; flex-direction: column; gap: var(--space-5); }

.article-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  display: flex; flex-direction: column;
  transition: all var(--ease-normal);
}
@media (min-width: 640px) { .article-card { flex-direction: row; } }
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.article-thumb {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green-700), var(--green-600));
}
@media (min-width: 640px) { .article-thumb { width: 220px; height: auto; } }

.article-body { padding: var(--space-5); flex: 1; }
.article-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.article-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-3); line-height: 1.25; }
.article-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }

/* Video gallery */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.video-thumb {
  border-radius: var(--radius-lg);
  aspect-ratio: 16/9;
  background: var(--green-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
}
.video-thumb-emoji { font-size: 2.5rem; opacity: 0.35; }
.play-btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  background: rgba(252,250,244,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--green-900);
  transition: transform var(--ease-spring);
}
.video-thumb:hover .play-btn { transform: scale(1.15); }
.video-title {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(7,10,24,0.9), transparent);
  padding: var(--space-4); font-size: var(--text-xs); font-weight: 600; color: #fff;
}

/* Sidebar widgets */
.sidebar-widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-4);
}
.widget-title { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-4); color: var(--color-accent); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-chip {
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: 500;
  padding: 5px 14px; border-radius: var(--radius-full);
  background: var(--color-bg); border: 1px solid var(--color-border-light);
  color: var(--color-text-muted); cursor: pointer;
  transition: all var(--ease-fast);
}
.tag-chip:hover { background: var(--gold-50); border-color: var(--gold-400); color: var(--gold-800); }

/* =====================================================
   WHAT WE DO — STORY SECTIONS
   ===================================================== */
.story-section { padding-block: var(--space-24); }

.story-block {
  display: grid; gap: var(--space-12); align-items: center;
  margin-bottom: var(--space-24);
}
.story-block:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .story-block { grid-template-columns: 1fr 1fr; }
  .story-block.reverse .story-visual-col { order: -1; }
}

.story-visual-col {
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 80% at 70% 20%, rgba(53,72,155,0.5) 0%, transparent 60%),
    linear-gradient(135deg, var(--green-800), var(--green-600));
  border: 1px solid var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  position: relative;
}

.story-content-col { min-width: 0; }

.story-chapter-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 5.5rem; font-weight: 500;
  color: var(--gold-300);
  line-height: 1; margin-bottom: var(--space-2);
  user-select: none;
}
.story-title  { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 600; margin-bottom: var(--space-4); }
.story-desc   { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-6); }

.impact-row { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.impact-item {}
.impact-num { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; color: var(--gold-700); }
.impact-lbl { font-family: var(--font-label); font-size: 0.64rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.16em; }

/* =====================================================
   ABOUT PAGE EXTRAS
   ===================================================== */
.vision-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .vision-grid { grid-template-columns: repeat(3, 1fr); } }

.vision-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  text-align: center;
  transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal);
  position: relative;
}
.vision-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold-300); }

.vision-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-5xl); font-weight: 500;
  color: var(--gold-500);
  line-height: 1; margin-bottom: var(--space-4);
}
.vision-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-3); }
.vision-desc  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }

.ahlulbayt-section {
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(53,72,155,0.35) 0%, transparent 60%),
    linear-gradient(135deg, var(--green-900), var(--green-800));
  border: 1px solid var(--night-line);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  position: relative; overflow: hidden;
}
.ahlulbayt-content { position: relative; z-index: 1; color: #fff; }
.ahlulbayt-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--gold-400);
  text-align: center; margin-bottom: var(--space-6);
  display: block;
}
.ahlulbayt-desc {
  font-size: var(--text-base); color: var(--night-soft);
  line-height: 1.8; max-width: 700px; margin: 0 auto;
  text-align: center;
}

/* =====================================================
   REDUCED MOTION — global guardrails
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .uni-marquee-track { animation: none; }
  .float-card, .scroll-dot, .hero-eyebrow-dot { animation: none !important; }
  .btn::after { display: none; }
}
/* =====================================================
   UTILITIES
   ===================================================== */
.hidden   { display: none !important; }
.sr-only  { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.overflow-hidden { overflow: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--green-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--green-400); }

/* Custom leaflet popup */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; }

/* =====================================================
   COMMITTEE DETAIL OVERLAY
   ===================================================== */
.committee-detail-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(7, 16, 42, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ease-normal), visibility var(--ease-normal);
}
.committee-detail-overlay.open { opacity: 1; visibility: visible; }

.committee-detail-panel {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  text-align: center;
  position: relative;
  transform: scale(0.85) translateY(12px);
  transition: transform var(--ease-spring);
}
.committee-detail-overlay.open .committee-detail-panel { transform: scale(1) translateY(0); }

.committee-detail-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-bg); border: 1px solid var(--color-border-light);
  font-size: var(--text-lg); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}
.committee-detail-close:hover { background: var(--color-border-light); }

.committee-detail-avatar {
  width: 120px; height: 120px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-3xl); font-weight: 900;
  color: #fff; font-family: var(--font-display);
  margin: 0 auto var(--space-5);
  border: 4px solid var(--color-border-light);
}
.committee-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }

.committee-detail-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: 2px; }
.committee-detail-role { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-5); }

.committee-detail-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}
.committee-detail-fact { text-align: left; }
.committee-detail-fact-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 2px; }
.committee-detail-fact-value { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }

.committee-detail-message {
  font-size: var(--text-base); color: var(--color-text); line-height: 1.75;
  font-style: italic;
}
.committee-detail-message::before, .committee-detail-message::after { content: '"'; color: var(--gold-500); }

/* =====================================================
   ADMIN DASHBOARD
   ===================================================== */
.admin-page { min-height: 100vh; background: var(--color-bg); visibility: hidden; }
.admin-page.is-authed { visibility: visible; }
.admin-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-header-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.admin-header-user { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

.admin-shell { display: flex; align-items: flex-start; }
.admin-sidebar {
  width: 220px; flex-shrink: 0;
  background: #fff; border-right: 1px solid var(--color-border-light);
  min-height: calc(100vh - 69px);
  padding: var(--space-5) var(--space-3);
}
.admin-nav-item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text-muted);
  background: none; border: none; cursor: pointer;
  margin-bottom: var(--space-1);
  transition: all var(--ease-fast);
}
.admin-nav-item:hover { background: var(--color-bg); color: var(--color-text); }
.admin-nav-item.active { background: var(--green-50, #e6f4ea); color: var(--green-700); }

/* Count of members waiting for approval — a pending account is invisible
   until an admin acts, so the number has to show without opening the tab. */
.admin-nav-badge {
  display: inline-block; margin-left: var(--space-2);
  min-width: 1.25rem; padding: 0 0.35rem;
  border-radius: 999px;
  background: #b8362b; color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.25rem;
  text-align: center; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Row-level account state in the Members table. */
.admin-status-chip {
  display: inline-block; margin-left: var(--space-2);
  padding: 0.1rem 0.45rem; border-radius: var(--radius-sm, 4px);
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle; white-space: nowrap;
}
.admin-status-chip.is-pending { background: #fdf3d8; color: #8a6416; border: 1px solid #e8d3a0; }
.admin-status-chip.is-rejected { background: #fbe6e3; color: #9c2f26; border: 1px solid #f0c2bc; }

.admin-view { display: none; flex: 1; min-width: 0; }
.admin-view.active { display: block; }

@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%; min-height: 0;
    border-right: none; border-bottom: 1px solid var(--color-border-light);
    display: flex; gap: var(--space-2);
    overflow-x: auto;
  }
  .admin-nav-item { width: auto; white-space: nowrap; margin-bottom: 0; }
}

.admin-main { max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-3); flex-wrap: wrap; }
/* overflow-x: auto (not hidden) — wide tables like Members (name, email,
   phone, university, two committee toggles, …) scroll horizontally instead
   of being clipped. overflow-y stays hidden to preserve the rounded corners. */
.admin-table-wrap { background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th, .admin-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); white-space: nowrap; }
.admin-table th { background: var(--color-bg); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.04em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); }
.admin-badge.active { background: var(--green-50, #e6f4ea); color: var(--green-700); }
.admin-badge.inactive { background: #f3f4f6; color: #6b7280; }
.admin-row-actions { display: flex; gap: var(--space-2); }
.admin-row-actions button { font-size: var(--text-xs); padding: 4px 10px; }
.admin-empty, .admin-loading { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }

.admin-modal-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(7, 16, 42, 0.5);
  align-items: center; justify-content: center; z-index: 50;
  padding: var(--space-4);
}
.admin-modal-backdrop.open { display: flex; }
.admin-modal {
  background: #fff; border-radius: var(--radius-lg);
  padding: var(--space-6); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
.admin-modal h2 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-5); }
.admin-modal .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.admin-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.admin-form-error {
  display: none; background: #fce8e8; color: #b91c1c; border: 1px solid #f5b5b5;
  border-radius: var(--radius-md); padding: 0.6rem 0.9rem; font-size: var(--text-sm); font-weight: 600;
  margin-bottom: var(--space-4);
}

/* Wide enough for both the square profile-picture crop and the much wider
   banner crop (its aspect ratio is read live from #soc-banner — see
   js/absoc-edit.js — so this needs to comfortably fit either shape). */
.photo-crop-modal { max-width: 640px; }
.photo-crop-stage {
  width: 100%; height: 360px;
  background: #111; border-radius: var(--radius-md); overflow: hidden;
}
.photo-crop-stage img { display: block; max-width: 100%; }
.photo-crop-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }

.admin-photo-picker { display: flex; align-items: center; gap: var(--space-4); margin-bottom: 0.75rem; }
.admin-photo-preview {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  object-fit: cover; background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.admin-photo-picker-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.admin-photo-remove { font-size: var(--text-xs); color: #b91c1c; background: none; border: none; cursor: pointer; padding: 0; }
.leaflet-popup-tip-container { display: none; }

/* =====================================================
   FORCED PASSWORD CHANGE GATE (admin.html)
   ===================================================== */
.admin-gate-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(158deg, var(--green-900), var(--green-800));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.admin-gate-overlay .admin-modal { max-width: 420px; width: 100%; }
.admin-gate-overlay .admin-modal p.admin-gate-intro {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.6;
}

/* =====================================================
   MEMBER PROFILE-COMPLETION GATE (js/member.js, all pages)
   Same "forced gate" idea as the admin password gate above, but sits above
   the public navbar/mobile-menu since it can appear on any member page.
   ===================================================== */
.complete-profile-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: linear-gradient(158deg, var(--green-900), var(--green-800));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); overflow-y: auto;
}
.complete-profile-overlay .admin-modal { max-width: 460px; width: 100%; margin: auto; }
.complete-profile-overlay .admin-modal p.complete-profile-intro {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.6;
}

/* =====================================================
   ABSOC INLINE EDIT MODE (absoc.html — owning/super admin only)
   ===================================================== */
.absoc-edit-toggle {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 40;
  box-shadow: var(--shadow-lg);
}
.absoc-edit-toggle.active { background: var(--green-900); }

.absoc-editable { position: relative; }
.absoc-edit-pencil {
  display: none;
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 5;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  align-items: center; justify-content: center;
  font-size: 0.9rem; cursor: pointer;
}
body.edit-mode-active .absoc-edit-pencil { display: flex; }
.absoc-edit-pencil:hover { background: var(--color-bg); }
.absoc-edit-pencil.absoc-edit-delete { right: auto; left: var(--space-3); color: #b91c1c; }

.absoc-add-tile {
  display: none;
  align-items: center; justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: 700; font-size: var(--text-sm);
  cursor: pointer; background: none;
  min-height: 96px;
  transition: all var(--ease-fast);
}
body.edit-mode-active .absoc-add-tile { display: flex; }
.absoc-add-tile:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg); }
.absoc-add-tile.gallery { aspect-ratio: 1; min-height: 0; border-radius: var(--radius-lg); font-size: 1.75rem; }

.absoc-item-card { position: relative; }
.absoc-item-card .absoc-edit-pencil,
.absoc-item-card .absoc-edit-delete { width: 28px; height: 28px; font-size: 0.75rem; top: var(--space-2); }
.absoc-item-card .absoc-edit-pencil { right: var(--space-2); }
.absoc-item-card .absoc-edit-delete { left: var(--space-2); right: auto; }

.absoc-edit-inline-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.absoc-edit-inline-actions { display: flex; gap: var(--space-2); }

/* Anchored over the banner's lower-right corner rather than bottom-right
   of the viewport — a bottom-right fixed position landed on top of the
   sidebar's Join/Location cards at normal scroll depths (a fixed
   element's overlap depends on the current scroll offset, not total
   page height, so padding further down the page can't fix it). The
   banner (220px tall, starting right below the navbar) has no text of
   its own down here, and this sits well clear of its own edit pencil
   near the top-right corner. */
.absoc-edit-actions { position: fixed; right: var(--space-6); top: calc(var(--nav-height) + 160px); z-index: 40; display: flex; gap: var(--space-3); }
.absoc-edit-actions .btn { box-shadow: var(--shadow-lg); }
.absoc-edit-cancel { background: #fff; color: #b91c1c; border: 1px solid #f5b5b5; }
.absoc-edit-cancel:hover { background: #fce8e8; }

/* =====================================================
   SITE-WIDE TEXT EDITING (super-admin only, js/site-edit.js)
   Click-to-edit hover affordance — scales to arbitrarily many/small
   scattered text elements better than a pencil-per-element would.
   ===================================================== */
body.site-edit-active [data-site-edit-key] {
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-color var(--ease-fast), background var(--ease-fast);
}
body.site-edit-active [data-site-edit-key]:hover {
  outline-color: var(--color-primary);
  background: rgba(21,44,120,0.06);
}
body.site-edit-active [data-site-edit-key].site-edit-editing {
  outline: none;
  background: none;
  cursor: default;
}

/* =====================================================
   GALLERY LIGHTBOX (public — click a photo to browse)
   ===================================================== */
.absoc-lightbox-overlay {
  display: none;
  /* Above .navbar (1002) so the fullscreen photo view still covers the whole page. */
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(7,16,42,0.92);
  align-items: center; justify-content: center;
}
.absoc-lightbox-overlay.open { display: flex; }
.absoc-lightbox-img { max-width: min(90vw, 900px); max-height: 85vh; border-radius: var(--radius-md); object-fit: contain; }
.absoc-lightbox-close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  font-size: 1.1rem; cursor: pointer;
}
.absoc-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.absoc-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  font-size: 1.75rem; cursor: pointer; line-height: 1;
}
.absoc-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.absoc-lightbox-prev { left: var(--space-5); }
.absoc-lightbox-next { right: var(--space-5); }
@media (max-width: 640px) {
  .absoc-lightbox-nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .absoc-lightbox-prev { left: var(--space-2); }
  .absoc-lightbox-next { right: var(--space-2); }
}

/* =====================================================
   DONATE PAGE
   ===================================================== */
.donate-amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 480px) { .donate-amount-grid { grid-template-columns: repeat(4, 1fr); } }

.donate-amount-btn {
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-light);
  background: var(--color-bg);
  font-size: var(--text-lg); font-weight: 800;
  font-family: var(--font-display);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--ease-fast);
}
.donate-amount-btn:hover { border-color: var(--color-primary); background: var(--green-50); }
.donate-amount-btn.selected { border-color: var(--color-primary); background: var(--green-50); color: var(--color-primary); }

.donate-custom-amount {
  position: relative;
  margin-bottom: var(--space-5);
}
.donate-custom-amount-prefix {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--color-text-muted); pointer-events: none;
}
.donate-custom-amount input { padding-left: var(--space-8); }

.donate-summary {
  background: var(--green-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.donate-summary strong { color: var(--color-primary); font-size: var(--text-lg); }

.donate-methods {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.donate-methods > span { display: inline-flex; align-items: center; gap: 5px; }
.donate-form-error {
  display: none; background: #fce8e8; color: #b91c1c; border: 1px solid #f5b5b5;
  border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: var(--text-sm); font-weight: 600;
  margin-bottom: var(--space-4);
}
.donate-status-banner {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-weight: 600;
}
.donate-status-banner.success { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }
.donate-status-banner.canceled { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* =====================================================
   ORGANISATION ECOSYSTEM (about page)
   Physics-driven node graph — see js/ecosystem.js.
   All colour/spacing/shadow values below reference the
   design tokens defined in :root; no new colours here.
   ===================================================== */
/* Same dark gradient as the "Who Are the AhlulBayt" card
   (.ahlulbayt-section) and the map teaser, applied to the whole
   section this time rather than an inner card. */
#ecosystem { background: linear-gradient(135deg, var(--green-900), var(--green-800)); }
#ecosystem .heading-1 { color: #fff; }
#ecosystem .section-label { color: var(--gold-300); }
#ecosystem .section-label::before,
#ecosystem .section-label::after { background: var(--gold-300); }

.ecosystem-intro {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  max-width: 620px;
  margin-inline: auto;
}

.ecosystem-graph-wrap {
  position: relative;
  width: 100%;
  height: clamp(440px, 55vw, 620px);
  margin-top: var(--space-12);
  border-radius: var(--radius-2xl);
  /* translucent "glass" panel — the dark section gradient behind it
     shows through softly instead of a solid opaque card */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  touch-action: none;
}

/* night-sky texture: a static scatter of faint dots for depth, plus a
   handful of brighter stars that twinkle. Placed first in the DOM so
   it paints behind the edges/nodes without needing z-index. */
.ecosystem-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ecosystem-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.3px 1.3px at 7% 15%,  rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1px 1px     at 15% 42%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 24% 8%,  rgba(255,255,255,0.5)  50%, transparent 52%),
    radial-gradient(1px 1px     at 33% 60%, rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 41% 25%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1px 1px     at 49% 78%, rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 57% 12%, rgba(255,255,255,0.5)  50%, transparent 52%),
    radial-gradient(1px 1px     at 63% 48%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 70% 85%, rgba(255,255,255,0.5)  50%, transparent 52%),
    radial-gradient(1px 1px     at 77% 30%, rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 84% 65%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1px 1px     at 91% 20%, rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 12% 90%, rgba(255,255,255,0.4)  50%, transparent 52%),
    radial-gradient(1px 1px     at 38% 95%, rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 95% 88%, rgba(255,255,255,0.4)  50%, transparent 52%),
    radial-gradient(1px 1px     at 3% 35%,  rgba(255,255,255,0.3)  50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,255,255,0.4)  50%, transparent 52%),
    radial-gradient(1px 1px     at 20% 22%, rgba(255,255,255,0.3)  50%, transparent 52%);
}

.eco-star {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 0 4px 1px #fff, 0 0 10px 3px var(--gold-300);
  animation: eco-twinkle 3.6s ease-in-out infinite;
}
.eco-star:nth-child(1) { animation-duration: 3.2s; animation-delay: 0s; }
.eco-star:nth-child(2) { animation-duration: 4.1s; animation-delay: -1.4s; }
.eco-star:nth-child(3) { animation-duration: 3.6s; animation-delay: -0.6s; }
.eco-star:nth-child(4) { animation-duration: 4.6s; animation-delay: -2.3s; }
.eco-star:nth-child(5) { animation-duration: 3.9s; animation-delay: -1.1s; }
.eco-star:nth-child(6) { animation-duration: 4.3s; animation-delay: -3.0s; }
.eco-star:nth-child(7)  { animation-duration: 3.4s; animation-delay: -0.9s; }
.eco-star:nth-child(8)  { animation-duration: 4.4s; animation-delay: -2.7s; }
.eco-star:nth-child(9)  { animation-duration: 3.1s; animation-delay: -1.8s; }
.eco-star:nth-child(10) { animation-duration: 4.8s; animation-delay: -0.3s; }
.eco-star:nth-child(11) { animation-duration: 3.7s; animation-delay: -3.5s; }
.eco-star:nth-child(12) { animation-duration: 4.0s; animation-delay: -1.6s; }
.eco-star:nth-child(13) { animation-duration: 3.3s; animation-delay: -2.1s; }
.eco-star:nth-child(14) { animation-duration: 3.5s; animation-delay: -1.3s; }
.eco-star:nth-child(15) { animation-duration: 4.2s; animation-delay: -2.9s; }
.eco-star:nth-child(16) { animation-duration: 3.0s; animation-delay: -0.5s; }
.eco-star:nth-child(17) { animation-duration: 4.7s; animation-delay: -1.9s; }
.eco-star:nth-child(18) { animation-duration: 3.8s; animation-delay: -3.2s; }
.eco-star:nth-child(19) { animation-duration: 4.1s; animation-delay: -0.8s; }
.eco-star:nth-child(20) { animation-duration: 3.6s; animation-delay: -2.4s; }
.eco-star:nth-child(21) { animation-duration: 4.5s; animation-delay: -1.0s; }
.eco-star:nth-child(22) { animation-duration: 3.2s; animation-delay: -3.6s; }
.eco-star:nth-child(23) { animation-duration: 4.0s; animation-delay: -0.4s; }
.eco-star:nth-child(24) { animation-duration: 3.9s; animation-delay: -2.8s; }
.eco-star:nth-child(25) { animation-duration: 4.6s; animation-delay: -1.5s; }
@keyframes eco-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50%      { opacity: 1; transform: scale(1.4); }
}

.ecosystem-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.ecosystem-edge {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5px;
  fill: none;
  transition: stroke var(--ease-normal), stroke-width var(--ease-normal);
}
.ecosystem-edge.is-active { stroke: #fff; stroke-width: 2.5px; }

/* a short bright dash cycling along the same coordinates as the rail
   above — reads as a constant pulse of energy flowing from the hub
   out to each node. Direction: stroke-dashoffset animating negative
   travels the same way the line is drawn (x1,y1 → x2,y2), i.e. hub
   → node. Stacked drop-shadows build a hot white core with a soft
   blue halo around it — a repulsor-beam glow rather than a plain line. */
.ecosystem-edge-pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-linecap: round;
  /* same dash rhythm on every line (Alumni's original pattern) —
     only the pace below still varies per node */
  stroke-dasharray: 8 28;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 9px #fff)
    drop-shadow(0 0 20px var(--green-300));
  animation: eco-energy-flow 2.4s linear infinite;
}

/* each node's pulse still runs at its own pace so the "energy" doesn't
   all flow in lockstep — durations and delays are unrelated numbers
   on purpose. -36 matches the shared dasharray sum (8 + 28) so the
   loop resets seamlessly. */
.ecosystem-edge-pulse[data-id="absoc"]         { animation-duration: 2.0s; animation-delay: -0.3s; }
.ecosystem-edge-pulse[data-id="justice"]       { animation-duration: 2.9s; animation-delay: -1.6s; }
.ecosystem-edge-pulse[data-id="mental-health"] { animation-duration: 1.7s; animation-delay: -0.9s; }
.ecosystem-edge-pulse[data-id="earth"]         { animation-duration: 3.3s; animation-delay: -2.2s; }
.ecosystem-edge-pulse[data-id="mentors"]       { animation-duration: 2.4s; animation-delay: -1.1s; }
.ecosystem-edge-pulse[data-id="alumni"]        { animation-duration: 2.6s; animation-delay: -0.5s; }

@keyframes eco-energy-flow { to { stroke-dashoffset: -36; } }

.ecosystem-canvas { position: absolute; inset: 0; }

/* node shell — JS drives position via transform: translate3d() only,
   so layout (left/top/width/height) never changes during simulation. */
.eco-node {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
}
.eco-node:active,
.eco-node.is-dragging { cursor: grabbing; }

.eco-node-inner { position: relative; }

.eco-node-circle {
  width: clamp(56px, 9vw, 76px);
  height: clamp(56px, 9vw, 76px);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  border: 4px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-spring), box-shadow var(--ease-normal), border-color var(--ease-normal);
}
.eco-node.is-hub .eco-node-circle {
  width: clamp(100px, 16vw, 132px);
  height: clamp(100px, 16vw, 132px);
  font-size: var(--text-lg);
}
.eco-node-circle img {
  width: 62%; height: 62%; object-fit: contain;
  /* the img must never itself become the drag/pointer target —
     pointerdown should always land on the circle so our own
     pointer-based drag handles it, not the browser's native
     "drag this image out" gesture */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* MSC.png is a wide wordmark, not a square mark like absoc-logo.png —
   give it a bit more room so it doesn't read tiny once object-fit:
   contain letterboxes it down to fit the circle. */
.eco-node.is-hub .eco-node-circle img { width: 72%; height: 72%; }
/* AMH.jpeg is a full-bleed square badge with its own teal background —
   fill the whole circle with it instead of floating it at logo size. */
.eco-node[data-id="mental-health"] .eco-node-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.eco-node-label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  width: max-content;
  max-width: 100px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.25;
}
.eco-node.is-hub .eco-node-label { font-size: var(--text-sm); font-weight: 800; color: #fff; max-width: 140px; margin-top: var(--space-4); }

.eco-node.is-active .eco-node-circle,
.eco-node:focus-visible .eco-node-circle {
  transform: scale(1.2);
  /* same white-core / blue-halo language as the energy pulse lines,
     so hovering a node reads as it "lighting up" rather than just a
     generic drop shadow */
  box-shadow:
    0 0 0 1px #fff,
    0 0 16px 4px rgba(255, 255, 255, 0.85),
    0 0 36px 10px var(--green-300),
    var(--shadow-xl);
  border-color: #fff;
}
/* the hub circle is already much bigger, so the same 1.3x growth (in
   px, not just ratio) would swallow its label underneath — scale it
   up less than the satellites */
.eco-node.is-hub.is-active .eco-node-circle,
.eco-node.is-hub:focus-visible .eco-node-circle {
  transform: scale(1.15);
}
.eco-node.is-dragging .eco-node-circle { transform: scale(1.06); box-shadow: var(--shadow-xl); }

/* idle "living" wobble — separate layer from the JS-driven position,
   so ambient motion never fights the physics or drag transform.
   Every node gets its own duration, delay and drift direction so
   they move out of sync rather than bobbing in lockstep; the hub
   floats too, just with a smaller, slower drift befitting its size. */
.eco-node.is-dragging .eco-node-inner { animation-play-state: paused; }

.eco-node.is-hub                   .eco-node-inner { animation: eco-wobble-hub 9.5s ease-in-out infinite; }
.eco-node[data-id="absoc"]         .eco-node-inner { animation: eco-wobble-a 7.4s ease-in-out infinite; }
.eco-node[data-id="justice"]       .eco-node-inner { animation: eco-wobble-b 8.2s ease-in-out infinite; animation-delay: -1.2s; }
.eco-node[data-id="mental-health"] .eco-node-inner { animation: eco-wobble-a 8.8s ease-in-out infinite; animation-delay: -2.6s; }
.eco-node[data-id="earth"]         .eco-node-inner { animation: eco-wobble-b 7.2s ease-in-out infinite; animation-delay: -3.4s; }
.eco-node[data-id="mentors"]       .eco-node-inner { animation: eco-wobble-a 7.8s ease-in-out infinite; animation-delay: -0.8s; }
.eco-node[data-id="alumni"]        .eco-node-inner { animation: eco-wobble-b 8.4s ease-in-out infinite; animation-delay: -4.1s; }

/* bigger, multi-stop drift (not just a straight up/down bob) reads as
   floatier — each node drifts in a loose loop rather than bouncing */
@keyframes eco-wobble-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(7px, -12px) rotate(2.4deg); }
  50%  { transform: translate(2px, -20px) rotate(0.6deg); }
  75%  { transform: translate(-6px, -9px) rotate(-2.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes eco-wobble-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-7px, -9px) rotate(-2.4deg); }
  50%  { transform: translate(-2px, -18px) rotate(-0.6deg); }
  75%  { transform: translate(6px, -11px) rotate(2.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* smaller amplitude than the satellites — the hub is much bigger, so
   the same swing would look heavy rather than gentle */
@keyframes eco-wobble-hub {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(4px, -7px) rotate(0.8deg); }
  50%  { transform: translate(1px, -13px) rotate(0.2deg); }
  75%  { transform: translate(-4px, -6px) rotate(-0.8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.ecosystem-tooltip {
  position: absolute;
  z-index: 5;
  max-width: 230px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* anchored above its node by default: the tooltip's own bottom
     edge sits at (left, top) */
  transform: translate(-50%, -100%) scale(0.94);
  transition: opacity var(--ease-fast), transform var(--ease-spring), visibility var(--ease-fast);
}
.ecosystem-tooltip.is-below {
  /* flipped when there isn't room above: top edge sits at (left, top) */
  transform: translate(-50%, 0) scale(0.94);
}
.ecosystem-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -100%) scale(1);
  pointer-events: auto;
}
.ecosystem-tooltip.is-below.is-visible { transform: translate(-50%, 0) scale(1); }
.ecosystem-tooltip-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 2px;
}
.ecosystem-tooltip-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

@media (max-width: 640px) {
  .ecosystem-graph-wrap { margin-top: var(--space-8); height: clamp(380px, 92vw, 460px); }
  .eco-node-label { max-width: 76px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* !important: the per-node wobble rules above are more specific
     (they target [data-id="..."] .eco-node-inner), so a plain
     .eco-node-inner rule here would otherwise lose to them. */
  .eco-node-inner { animation: none !important; }
  .eco-star { animation: none !important; opacity: 0.85; }
  .ecosystem-edge-pulse { animation: none !important; stroke-dashoffset: 0; opacity: 0.4; }
  .eco-node-circle,
  .ecosystem-tooltip,
  .ecosystem-edge { transition-duration: 0.01ms !important; }
}

/* =====================================================
   BRAND ICONS
   Real logo marks, rendered as CSS mask images so they
   pick up `currentColor` — this lets each icon inherit
   whatever colour/hover-transition its surrounding button
   or text already has, instead of a fixed-colour glyph.
   ===================================================== */
.icon-mask {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
.icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.icon-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.icon-whatsapp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413'/%3E%3C/svg%3E");
}
.icon-apple {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zm3.632-3.583c.842-1.012 1.41-2.427 1.255-3.83-1.207.052-2.662.805-3.53 1.818-.78.896-1.464 2.338-1.28 3.714 1.345.104 2.712-.688 3.555-1.702'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zm3.632-3.583c.842-1.012 1.41-2.427 1.255-3.83-1.207.052-2.662.805-3.53 1.818-.78.896-1.464 2.338-1.28 3.714 1.345.104 2.712-.688 3.555-1.702'/%3E%3C/svg%3E");
}
.icon-google {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.344-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.344-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z'/%3E%3C/svg%3E");
}
.icon-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}

.footer-social-icon { width: 18px; height: 18px; }
.contact-info-icon { width: 20px; height: 20px; }
.donate-method-icon { width: 15px; height: 15px; }
.whatsapp-cta-icon { width: 48px; height: 48px; margin-inline: auto; }
.absoc-social-icon { width: 16px; height: 16px; }

/* =====================================================
   SHARED EVENTS CALENDAR — live page additions
   (event cards, detail modal, view toggle; extends the
   "EVENTS CALENDAR PAGE" section above)
   ===================================================== */
.pill-navy { background: var(--green-900); color: var(--gold-400); }

.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4);
}
.cal-view-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cal-more { font-size: 0.6rem; font-weight: 700; color: var(--color-text-muted); display: block; }
/* Continuation days of a multi-day event: same pill, slightly faded. */
.cal-pill-cont { opacity: 0.65; }

/* Days that have already gone by: greyed out, events dimmed. */
.cal-day.past { background: #eceef2; }
.cal-day.past:hover { background: #e2e5ea; }
.cal-day.past .cal-day-num { color: #9aa3b5; }
.cal-day.past .cal-event-pill { opacity: 0.55; }

/* ── Liveliness (same motion vocabulary as the About page's ecosystem:
      travelling energy, springy pops, gentle idle glow — kept restrained
      and fully disabled under prefers-reduced-motion below) ───────────── */

/* Month grid slides in on every render (initial load + month navigation). */
@keyframes cal-swap {
  from { opacity: 0; transform: translateY(10px); }
}
.cal-grid { animation: cal-swap 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Event pills pop in with a springy stagger sweeping across the month —
   each pill's --i is set by js/events.js in render order. */
@keyframes cal-pop {
  from { opacity: 0; transform: scale(0.4); }
}
.cal-event-pill {
  animation: cal-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.cal-event-pill:hover { transform: scale(1.06); box-shadow: var(--shadow-sm); }

/* Days holding events glow softly and lift under the pointer. */
.cal-day { transition: background var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast); }
.cal-day.has-events:not(.past) {
  background: linear-gradient(160deg, var(--color-surface) 45%, var(--green-50));
}
.cal-day.has-events:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

/* Today's number radiates a slow pulse — the grid's heartbeat. */
@keyframes cal-today-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 88, 207, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(43, 88, 207, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 88, 207, 0); }
}
.cal-day.today .cal-day-num { animation: cal-today-pulse 2.8s ease-out infinite; }

/* List cards rise in with a stagger (--i set in render order). */
@keyframes cal-rise {
  from { opacity: 0; transform: translateY(12px); }
}
.ev-card {
  animation: cal-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Gradient date boxes — same treatment as the ecosystem's avatar circles. */
.ev-card-date, .upcoming-event-date { transition: transform var(--ease-fast); }
.ev-card:hover .ev-card-date { transform: scale(1.06) rotate(-2deg); }
.pill-green.ev-card-date, .pill-green.upcoming-event-date { background: linear-gradient(135deg, var(--green-100), var(--green-50)); }
.pill-gold.ev-card-date  { background: linear-gradient(135deg, var(--gold-300), var(--gold-100)); }
.pill-red.ev-card-date   { background: linear-gradient(135deg, #fecaca, #fee2e2); }
.pill-blue.ev-card-date  { background: linear-gradient(135deg, #bfdbfe, #dbeafe); }
.pill-navy.ev-card-date  { background: linear-gradient(135deg, var(--green-900), var(--green-700)); }

/* "Next Up": rows nudge on hover; the very next event's date box breathes. */
.upcoming-event { transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast); cursor: pointer; }
.upcoming-event:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); border-color: var(--green-200); }
@keyframes next-up-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 88, 207, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(43, 88, 207, 0.12); }
}
.upcoming-event:first-child .upcoming-event-date { animation: next-up-breathe 3.2s ease-in-out infinite; border-radius: var(--radius-md); }

/* The realtime "Live" dot breathes like the ecosystem's edge pulses. */
@keyframes live-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.events-live-dot { animation: live-breathe 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cal-grid, .cal-event-pill, .ev-card { animation: none !important; }
  .cal-day.today .cal-day-num,
  .upcoming-event:first-child .upcoming-event-date,
  .events-live-dot { animation: none !important; }
  .cal-day, .cal-event-pill, .ev-card-date, .upcoming-event { transition-duration: 0.01ms !important; }
  .cal-day.has-events:hover { transform: none; }
}
.cal-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }
.ev-status { padding: var(--space-4) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.events-live-dot { font-size: var(--text-xs); color: #16a34a; font-weight: 700; margin-left: var(--space-2); vertical-align: middle; }
#events-list-wrap { margin-top: var(--space-2); }

.ev-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  display: flex; gap: var(--space-5); align-items: flex-start;
  cursor: pointer; transition: all var(--ease-normal);
}
.ev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ev-card-past { opacity: 0.65; }
.ev-card-date { min-width: 52px; text-align: center; border-radius: var(--radius-md); padding: 0.625rem; }
.ev-card-day { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; line-height: 1; }
.ev-card-month { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ev-card-body { flex: 1; min-width: 0; }
.ev-card-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 0.375rem; flex-wrap: wrap; }
.ev-card-meta .event-badge { margin-bottom: 0; }
.ev-card-where { font-size: var(--text-xs); color: var(--color-text-muted); }
.ev-card-title { font-size: var(--text-lg); font-weight: 800; margin-bottom: 0.25rem; line-height: 1.3; }
.ev-card-host { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.ev-empty {
  padding: var(--space-8); text-align: center;
  color: var(--color-text-muted); font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-xl);
}
.ev-empty-sm { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Event detail modal */
.event-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 16, 42, 0.55);
  display: none; align-items: center; justify-content: center;
  /* Above .navbar (1002) so the modal still covers the whole page. */
  z-index: 1100; padding: var(--space-4);
}
.event-modal-backdrop.open { display: flex; }
.event-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: var(--space-8);
  position: relative;
  box-shadow: var(--shadow-xl);
}
.event-modal-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-light);
  background: var(--color-surface);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  z-index: 1; transition: all var(--ease-fast);
}
.event-modal-close:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.event-modal-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-5); max-height: 260px; object-fit: cover; }
.event-modal-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-4); line-height: 1.25; }
.event-modal-meta { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.event-modal-desc { font-size: var(--text-sm); line-height: 1.7; white-space: pre-line; margin-bottom: var(--space-5); }
.event-modal-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.event-interested { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.event-interested:empty { display: none; margin-top: 0; }
.event-interested-avatars { display: flex; }
.event-interested-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-decoration: none;
  border: 2px solid #fff;
  margin-left: -8px;
}
.event-interested-avatar:first-child { margin-left: 0; }
.event-interested-avatar img { width: 100%; height: 100%; object-fit: cover; }
.event-interested-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.event-modal-daylist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }

/* Month grid on small screens: pills are unreadable at 7 columns, so show a
   dot and let tapping the day open the day's events instead. */
@media (max-width: 640px) {
  .cal-day { min-height: 52px; padding: 4px; }
  .cal-day .cal-event-pill, .cal-day .cal-more { display: none; }
  .cal-day.has-events::after {
    content: '';
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-primary);
  }
}

/* =====================================================
   EVENT COLOUR PALETTE — admin-picked pill colours
   ('navy' is super-admin only, enforced server-side)
   ===================================================== */
.pill-teal    { background: #ccfbf1; color: #0f766e; }
.pill-emerald { background: #dcfce7; color: #15803d; }
.pill-purple  { background: #ede9fe; color: #6d28d9; }
.pill-pink    { background: #fce7f3; color: #be185d; }
.pill-orange  { background: #ffedd5; color: #c2410c; }

.pill-teal.ev-card-date    { background: linear-gradient(135deg, #99f6e4, #ccfbf1); }
.pill-emerald.ev-card-date, .pill-emerald.upcoming-event-date { background: linear-gradient(135deg, #bbf7d0, #dcfce7); }
.pill-purple.ev-card-date  { background: linear-gradient(135deg, #ddd6fe, #ede9fe); }
.pill-pink.ev-card-date    { background: linear-gradient(135deg, #fbcfe8, #fce7f3); }
.pill-orange.ev-card-date  { background: linear-gradient(135deg, #fed7aa, #ffedd5); }

/* Colour swatch picker in the admin event form */
.event-color-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.event-color-swatch {
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-light);
  cursor: pointer; padding: 0;
  transition: transform var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.event-color-swatch:hover { transform: scale(1.12); }
.event-color-swatch.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 88, 207, 0.25);
}
.event-color-swatch.swatch-auto {
  background: conic-gradient(var(--green-300), var(--gold-400), #f9a8d4, #5eead4, var(--green-300));
  position: relative;
}
.swatch-blue   { background: linear-gradient(135deg, var(--green-300), var(--green-100)); }
.swatch-gold   { background: linear-gradient(135deg, var(--gold-400), var(--gold-200)); }
.swatch-red    { background: linear-gradient(135deg, #f87171, #fecaca); }
.swatch-sky    { background: linear-gradient(135deg, #60a5fa, #bfdbfe); }
.swatch-teal   { background: linear-gradient(135deg, #2dd4bf, #99f6e4); }
.swatch-green  { background: linear-gradient(135deg, #4ade80, #bbf7d0); }
.swatch-purple { background: linear-gradient(135deg, #a78bfa, #ddd6fe); }
.swatch-pink   { background: linear-gradient(135deg, #f472b6, #fbcfe8); }
.swatch-orange { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.swatch-navy   { background: linear-gradient(135deg, var(--green-900), var(--green-700)); }

/* When a Next Up date box carries a pill colour, its day/month text uses the
   pill's colour instead of the default primary/muted pair. */
.upcoming-event-date[class*="pill-"] .upcoming-event-day,
.upcoming-event-date[class*="pill-"] .upcoming-event-month { color: inherit; }

/* =====================================================
   MEMBER ACCOUNTS — signup/login tabs, profiles,
   directory, friends, event comments
   ===================================================== */

/* ── smaller page hero (profile pages) ─────────────── */
.page-hero-sm { padding: calc(var(--nav-height, 72px) + var(--space-10)) 0 var(--space-10); }
.page-hero-sm .page-hero-title { font-size: var(--text-4xl); }

/* ── login/signup card extras ──────────────────────── */
.login-tabs {
  display: flex;
  gap: var(--space-2);
  background: var(--cream);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-6);
}
.login-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.login-tab.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13, 30, 78, 0.25);
}

.signup-error {
  display: none;
  background: #fce8e8;
  color: #b91c1c;
  border: 1px solid #f5b5b5;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 1rem;
}
.signup-switch {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.signup-switch a { color: var(--color-primary); font-weight: 700; text-decoration: underline; }
.signup-verify-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.signup-code-input {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* visually recentres the letter-spaced digits */
}
.signup-verify-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.signup-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.signup-link-btn:disabled { color: var(--color-text-muted); text-decoration: none; cursor: default; }

/* ── nav badge (pending friend requests) ───────────── */
.nav-member-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--radius-full);
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* ── notification bell ─────────────────────────────── */
.nav-bell {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  color: rgba(255,255,255,0.85);
  opacity: 0.85; transition: opacity var(--ease-fast);
}
@media (min-width: 768px) { .nav-bell { display: flex; } }
.nav-bell:hover { opacity: 1; }
.nav-bell-badge {
  position: absolute; top: 2px; right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}
.mobile-nav-bell {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; margin-bottom: var(--space-2);
  background: none; border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  color: rgba(255,255,255,0.85); border-radius: var(--radius-md);
  padding: 0.55rem 0.9rem; font-size: var(--text-sm); font-weight: 600;
}

.nav-notif-panel {
  display: none;
  position: fixed;
  top: calc(var(--nav-height) + 8px);
  right: var(--space-4);
  width: min(360px, calc(100vw - 2rem));
  max-height: min(480px, 70vh);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  /* Above Leaflet's own pane/control z-index stack (up to 1000) and above
     .navbar (1002) — otherwise it renders behind the map on find-absoc.html
     (the only page with a Leaflet instance). Same root cause as the
     .navbar/.mobile-menu fixes elsewhere in this file. */
  z-index: 1003;
  padding: var(--space-2) 0;
}
.nav-notif-panel.open { display: block; }
.nav-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 700;
  border-bottom: 1px solid var(--night-line, #e5e7eb);
}
.nav-notif-settings-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: inherit; line-height: 1; padding: 2px;
  opacity: 0.7; transition: opacity var(--ease-fast);
}
.nav-notif-settings-btn:hover { opacity: 1; }
.notif-settings-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm); font-weight: 400; text-transform: none; letter-spacing: normal;
  cursor: pointer;
}
.notif-settings-row input { width: 16px; height: 16px; flex-shrink: 0; }
.nav-notif-item {
  display: block; color: inherit;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid #f1f1ef;
  font-size: var(--text-sm); line-height: 1.4;
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item.has-link { cursor: pointer; }
.nav-notif-item.has-link:hover { background: var(--cream-dark, #f7f5ef); }
.nav-notif-item.unread { background: rgba(201,162,39,0.08); }
.nav-notif-item-title { font-weight: 600; }
.nav-notif-item-body {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nav-notif-item-time { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }
.nav-notif-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── avatars, chips, member cards ──────────────────── */
.member-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-avatar-lg { width: 110px; height: 110px; font-size: var(--text-3xl); border: 4px solid #fff; box-shadow: 0 6px 18px rgba(7, 16, 42, 0.12); }

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--green-50);
  border: 1px solid var(--color-border-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}
a.member-chip:hover { border-color: var(--color-primary); }
.member-chip-committee { background: linear-gradient(135deg, var(--green-800), var(--green-600)); color: #fff; border: none; }
.member-chip-friend { background: var(--green-700); color: #fff; border: none; }
.member-badge-star { font-size: 0.85em; }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
}
.member-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.member-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 16, 42, 0.08);
}
.member-card .member-avatar { width: 44px; height: 44px; font-size: var(--text-base); }
.member-card-body { min-width: 0; }
.member-card-name {
  font-weight: 800;
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-card-uni {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-card-bio {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── members directory page ────────────────────────── */
.members-toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.members-toolbar .form-input { flex: 2 1 240px; }
.members-toolbar .form-select { flex: 1 1 180px; }
.member-grid-page { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.members-gate { display: flex; justify-content: center; }
.members-gate-card {
  max-width: 480px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.members-gate-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.members-gate-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ── profile page ──────────────────────────────────── */
.profile-container { max-width: 860px; }
.profile-header-card {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: var(--space-8);
  margin-bottom: var(--space-5);
}
.profile-header-main { min-width: 0; flex: 1; }
.profile-name { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: var(--color-text); margin-bottom: 2px; overflow-wrap: anywhere; }
.profile-fullname { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.profile-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.member-study-line { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0; }
.profile-bio { font-size: var(--text-sm); color: var(--color-text); line-height: 1.7; margin: var(--space-3) 0; overflow-wrap: anywhere; }
.profile-bio-empty { color: var(--color-text-muted); font-style: italic; }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); align-items: center; }
.member-block-btn { margin-left: auto; opacity: 0.75; }

.profile-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-5);
}
.profile-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.profile-count {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  background: var(--cream);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
.profile-empty { font-size: var(--text-sm); color: var(--color-text-muted); }
.profile-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }
.profile-hint a { text-decoration: underline; }
.profile-photo-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

.member-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.member-request-row:last-child { border-bottom: none; }
.member-request-row .member-card { border: none; padding: var(--space-1) 0; flex: 1 1 220px; }
.member-request-row .member-card:hover { transform: none; box-shadow: none; }
.member-request-actions { display: flex; gap: var(--space-2); align-items: center; }

/* ── event comments (events.html modal) ────────────── */
.event-comments { margin-top: var(--space-6); border-top: 1px solid var(--color-border-light); padding-top: var(--space-5); }
.event-comments-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.event-comments-gate {
  text-align: center;
  padding: var(--space-5);
  background: var(--cream);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.event-comments-gate p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.event-comments-gate div { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.event-comments-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.event-comments-empty { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.event-comments-error {
  background: #fce8e8;
  color: #b91c1c;
  border: 1px solid #f5b5b5;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-2);
}

.event-comment { display: flex; gap: var(--space-3); }
.comment-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { min-width: 0; flex: 1; }
.comment-meta { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.comment-author { font-size: var(--text-sm); font-weight: 800; color: var(--color-text); text-decoration: none; }
.comment-author:hover { text-decoration: underline; }
.comment-absoc { font-size: var(--text-xs); color: var(--color-text-muted); }
.comment-time { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; }
.comment-content { font-size: var(--text-sm); color: var(--color-text); line-height: 1.6; margin-top: 2px; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: var(--space-3); margin-top: 4px; }
.comment-action {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
}
.comment-action:hover { color: var(--color-primary); text-decoration: underline; }
.comment-edit-input { margin-top: var(--space-1); }

.comment-form { display: flex; gap: var(--space-2); align-items: flex-end; }
.comment-form .form-textarea { flex: 1; min-height: 52px; }

/* Sign Out beside the member's name — same look as the nav Login link,
   slightly muted so the name stays the focal point. */
button.nav-member-signout { cursor: pointer; opacity: 0.75; background: none; }
button.nav-member-signout:hover { opacity: 1; }

/* ── calendar member touches ───────────────────────── */
.ev-followed-star { color: var(--gold-600); }
.cal-feed-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.member-follow-btn { white-space: nowrap; }

/* ── mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .profile-header-card { flex-direction: column; align-items: center; text-align: center; padding: var(--space-6); }
  .profile-chips, .profile-actions { justify-content: center; }
  .member-block-btn { margin-left: 0; }
  .profile-panel { padding: var(--space-5); }
  .member-grid, .member-grid-page { grid-template-columns: 1fr; }
  .comment-time { margin-left: 0; width: 100%; }
}

/* =====================================================
   EVENT PASSPORT — stamps, check-in page, admin panel
   ===================================================== */

/* ── stamp artwork (js/badges.js) ──────────────────── */
.stamp-svg { width: 100%; height: 100%; display: block; }
.stamp-image-wrap {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 3px solid var(--color-border);
  background: #fff;
}
.stamp-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── passport grid on profiles ─────────────────────── */
.passport-checkin-btn { margin-left: auto; }
.passport-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-4);
}
.stamp-card {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  text-align: center;
  transition: transform 0.15s ease;
}
.stamp-card:hover { transform: translateY(-3px) rotate(-1.5deg); }
.stamp-art { display: block; width: 104px; height: 104px; }
.stamp-card-title {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stamp-card-meta { font-size: 11px; color: var(--color-text-muted); max-width: 130px; }

.stamp-detail-modal { text-align: center; }
.stamp-detail-art { width: 170px; height: 170px; margin: 0 auto var(--space-3); }
.stamp-detail-modal .event-modal-meta { justify-content: center; }

/* ── check-in page ─────────────────────────────────── */
.checkin-card { max-width: 420px; }
.checkin-code-input {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.15em;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* Stamp slam: drops in big + rotated, slams down to rest — like an actual
   rubber stamp hitting the page. */
.stamp-slam { width: 180px; height: 180px; margin: 0 auto; }
@keyframes stampSlam {
  0%   { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(0.92) rotate(3deg); opacity: 1; }
  75%  { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.stamp-slam.stamp-slam { animation: stampSlam 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

/* ── admin passport panel ──────────────────────────── */
.passport-modal { max-width: 640px; width: min(640px, 92vw); }
.passport-code-row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.passport-code-col { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.passport-code {
  font-family: 'Courier New', monospace;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: var(--cream);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  user-select: all; /* one tap selects the whole code for copying */
}
.passport-window { font-size: var(--text-xs); color: var(--color-text-muted); }
.passport-code-expired { color: #9ca3af; border-color: #e5e7eb; background: #f9fafb; text-decoration: line-through; text-decoration-thickness: 2px; }
.passport-expired {
  background: #fce8e8;
  color: #b91c1c;
  border: 1px solid #f5b5b5;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.passport-qr-box { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.passport-qr-box canvas { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); }
.passport-grace-row { display: flex; gap: var(--space-3); align-items: flex-end; }

.passport-badge-row { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.passport-badge-preview { width: 120px; height: 120px; flex-shrink: 0; }
.passport-badge-controls { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.passport-badge-controls .form-select { width: 100%; }
.passport-badge-preset { display: flex; gap: var(--space-2); width: 100%; align-items: center; }
.passport-badge-preset .form-select { flex: 1; }
.passport-badge-preset input[type='color'] { width: 44px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; background: #fff; cursor: pointer; }

.passport-attendance { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.passport-attendee {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}
.passport-attendee:last-child { border-bottom: none; }
.passport-attendee-name { font-weight: 700; color: var(--color-text); }
.passport-attendee-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-left: auto; }

.passport-award-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.passport-award-row .form-select { flex: 2 1 200px; }
.passport-award-row .form-input { flex: 2 1 160px; }

.passport-audit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); max-height: 200px; overflow-y: auto; }
.passport-audit-row { font-size: var(--text-xs); color: var(--color-text-muted); border-left: 3px solid var(--color-border-light); padding-left: var(--space-2); }

@media (max-width: 640px) {
  .passport-code-row { flex-direction: column; }
  .passport-qr-box { align-self: center; }
  .passport-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .stamp-art { width: 88px; height: 88px; }
}