/* Custom Utilities, Animations & Brand Styling for NACMU */

:root {
  --navbar-height: 80px;
}

@media (max-width: 639px) {
  :root {
    --navbar-height: 68px;
  }
}

/* Base page hero and content top spacing utilities ensuring no content is covered */
.page-hero-spacing {
  padding-top: calc(var(--navbar-height, 80px) + 2rem) !important;
}
@media (min-width: 640px) {
  .page-hero-spacing {
    padding-top: calc(var(--navbar-height, 80px) + 2.75rem) !important;
  }
}
@media (min-width: 1024px) {
  .page-hero-spacing {
    padding-top: calc(var(--navbar-height, 80px) + 3.5rem) !important;
  }
}

.page-dashboard-spacing {
  padding-top: calc(var(--navbar-height, 80px) + 1.25rem) !important;
}
@media (min-width: 640px) {
  .page-dashboard-spacing {
    padding-top: calc(var(--navbar-height, 80px) + 2rem) !important;
  }
}

/* Scroll margin for anchored section links */
section[id], div[id], a[name] {
  scroll-margin-top: calc(var(--navbar-height, 80px) + 1.5rem);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism helpers */
.glass-nav {
  background: #ffffff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.glass-nav-transparent {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Navbar smooth transitions on scroll */
#nacmu-navbar {
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When mobile drawer is open, navbar becomes solid white with dark text */
#nacmu-navbar.nav-menu-open {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.07) !important;
}

/* Brand title dynamic colors */
.glass-nav-transparent:not(.nav-menu-open) .nav-brand-title {
  color: #ffffff;
}
.glass-nav:not(.nav-menu-open) .nav-brand-title,
#nacmu-navbar.nav-menu-open .nav-brand-title {
  color: #0f172a;
}

/* Desktop link items dynamic colors & animations */
.nav-link-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.15s ease;
  white-space: nowrap;
}

.nav-link-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 9999px;
  background-color: #2563eb;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-nav-transparent:not(.nav-menu-open) .nav-link-item {
  color: #e2e8f0;
}
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.14);
}
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item::after {
  background-color: #38bdf8;
}

.glass-nav:not(.nav-menu-open) .nav-link-item,
#nacmu-navbar.nav-menu-open .nav-link-item {
  color: #334155;
}
.glass-nav:not(.nav-menu-open) .nav-link-item:hover,
#nacmu-navbar.nav-menu-open .nav-link-item:hover {
  color: #2563eb;
  background-color: #f1f5f9;
}
.glass-nav:not(.nav-menu-open) .nav-link-item::after,
#nacmu-navbar.nav-menu-open .nav-link-item::after {
  background-color: #2563eb;
}

.nav-link-item:hover::after {
  transform: scaleX(1);
}
.nav-link-item:active {
  transform: scale(0.97);
}

/* Active navigation item styling */
.nav-link-item.active-link,
.nav-link-item.nav-link-active {
  font-weight: 700 !important;
}
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item.active-link,
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item.nav-link-active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
}
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item.active-link::after,
.glass-nav-transparent:not(.nav-menu-open) .nav-link-item.nav-link-active::after {
  transform: scaleX(1);
}
.glass-nav:not(.nav-menu-open) .nav-link-item.active-link,
.glass-nav:not(.nav-menu-open) .nav-link-item.nav-link-active,
#nacmu-navbar.nav-menu-open .nav-link-item.active-link,
#nacmu-navbar.nav-menu-open .nav-link-item.nav-link-active {
  color: #2563eb !important;
  background-color: #eff6ff !important;
}
.glass-nav:not(.nav-menu-open) .nav-link-item.active-link::after,
.glass-nav:not(.nav-menu-open) .nav-link-item.nav-link-active::after,
#nacmu-navbar.nav-menu-open .nav-link-item.active-link::after,
#nacmu-navbar.nav-menu-open .nav-link-item.nav-link-active::after {
  transform: scaleX(1);
}

/* Desktop navigation fits its container.
   The full link row only renders at >=1280px; below that the drawer is the
   navigation (see includes/navbar.php), because the row needs ~1490px and a
   small laptop cannot give it that.

   At >=1280px the shared .max-w-7xl wrapper would pin the bar to 1216px of
   usable width however wide the monitor is, so the row overflowed and was
   clipped at the right edge. The navbar gets its own wider wrapper instead,
   plus modest compaction, so every label stays readable. */
@media (min-width: 1280px) {
  #nacmu-navbar .max-w-7xl {
    max-width: min(100% - 1.5rem, 1600px);
    padding-inline: 1rem;
  }
  .nav-link-item {
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
  }
  .nav-sponsor-cta {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    gap: 0.25rem;
  }
  #nacmu-navbar nav {
    gap: 0;
  }
  #nacmu-navbar .nav-secondary-btn {
    padding-inline: 0.55rem;
    font-size: 0.75rem;
  }
  /* Nav items must never be squeezed into wrapped, multi-line labels.
     Without this the row "fits" only because flex shrinks the Sponsor a Child
     pill until its text breaks across three lines. */
  #nacmu-navbar nav > a,
  #nacmu-navbar nav > div {
    flex: 0 0 auto;
  }
  .nav-link-item,
  .nav-sponsor-cta,
  .nav-sponsor-cta > span,
  #nacmu-navbar .nav-secondary-btn {
    white-space: nowrap;
  }
}

/* 1280-1399px is the tightest band that still shows the full row: the full
   version needs ~1323px but only ~1224-1310px is available. Drop the two
   purely decorative pieces -- the pulsing NEED badge and the "Sponsor App"
   label (the icon keeps its tooltip) -- rather than shrinking every label.
   Both return at 1400px, where there is genuinely room. */
@media (min-width: 1280px) and (max-width: 1399px) {
  #nacmu-navbar .max-w-7xl {
    padding-inline: 0.625rem;
  }
  .nav-sponsor-cta > span:last-child {
    display: none;
  }
  #nacmu-navbar .nav-secondary-btn > span {
    display: none;
  }
}

/* Roomier once the monitor can actually afford it. */
@media (min-width: 1560px) {
  .nav-link-item { padding: 0.5rem 0.7rem; font-size: 0.875rem; }
  .nav-sponsor-cta { padding: 0.5rem 0.8rem; font-size: 0.875rem; }
  #nacmu-navbar nav { gap: 0.125rem; }
}

/* Sponsor a Child desktop prominent pill */
.nav-sponsor-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-nav-transparent:not(.nav-menu-open) .nav-sponsor-cta {
  background: rgba(225, 29, 72, 0.25);
  border: 1px solid rgba(251, 113, 133, 0.5);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.2);
}
.glass-nav-transparent:not(.nav-menu-open) .nav-sponsor-cta:hover {
  background: rgba(225, 29, 72, 0.45);
  border-color: rgba(251, 113, 133, 0.8);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.glass-nav:not(.nav-menu-open) .nav-sponsor-cta,
#nacmu-navbar.nav-menu-open .nav-sponsor-cta {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.08);
}
.glass-nav:not(.nav-menu-open) .nav-sponsor-cta:hover,
#nacmu-navbar.nav-menu-open .nav-sponsor-cta:hover {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #be123c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.15);
}
.nav-sponsor-cta.active-link {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #be123c !important;
}

/* Animated 3-Bar Hamburger into Close (X) Icon */
.hamburger-box {
  width: 20px;
  height: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: currentColor;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
}

#mobile-menu-toggle[aria-expanded="true"] .hamburger-line-1 {
  transform: translateY(7px) rotate(45deg);
}
#mobile-menu-toggle[aria-expanded="true"] .hamburger-line-2 {
  opacity: 0;
  transform: scaleX(0);
}
#mobile-menu-toggle[aria-expanded="true"] .hamburger-line-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile hamburger button dynamic styling */
.glass-nav-transparent:not(.nav-menu-open) #mobile-menu-toggle {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.glass-nav:not(.nav-menu-open) #mobile-menu-toggle,
#nacmu-navbar.nav-menu-open #mobile-menu-toggle {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}

/* Mobile Backdrop Overlay Animation */
#mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  top: 4rem; /* 64px on mobile */
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 38;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  pointer-events: none;
}
@media (min-width: 640px) {
  #mobile-nav-backdrop {
    top: 5rem; /* 80px on sm and up */
  }
}
#mobile-nav-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile Drawer Menu Slide-Down Animation */
#mobile-nav-drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: 4rem;
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  pointer-events: none;
}
@media (min-width: 640px) {
  #mobile-nav-drawer {
    top: 5rem;
    max-height: calc(100dvh - 5rem);
  }
}
#mobile-nav-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Secondary header buttons on desktop */
.glass-nav-transparent:not(.nav-menu-open) .nav-secondary-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.glass-nav-transparent:not(.nav-menu-open) .nav-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.glass-nav:not(.nav-menu-open) .nav-secondary-btn,
#nacmu-navbar.nav-menu-open .nav-secondary-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

/* Rainbow border & accents */
.rainbow-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed, #db2777, #ea580c, #eab308, #16a34a, #06b6d4);
}

.rainbow-bar {
  height: 4px;
  background: linear-gradient(90deg, #dc2626, #ea580c, #eab308, #16a34a, #0284c7, #4f46e5, #9333ea);
}

.rainbow-glow {
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.25), 0 0 50px rgba(220, 38, 38, 0.15);
}

/* Custom subtle animations */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

.animate-gentle-float {
  animation: gentle-float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

/* Image zoom hover effect */
.zoom-img-container img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-img-container:hover img {
  transform: scale(1.06);
}

/* Modal transitions */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.modal-box {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s ease;
}
.modal-backdrop.active .modal-box {
  transform: scale(1) translateY(0);
}

/* ========================================================
   Mobile Responsiveness Enhancements
   ======================================================== */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Prevent iOS Safari from zooming in on input focus by guaranteeing 16px font on small screens */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Custom smooth touch scrolling for mobile containers and drawers */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Safe bottom spacing for modern mobile browsers with navigation bars */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* Ensure buttons have comfortable minimum touch targets (>= 44px) */
@media (max-width: 640px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}


/* ============================================================
   Companion Sponsor App integration utilities
   ------------------------------------------------------------
   assets/css/style.css is a PRE-BUILT Tailwind bundle: it only
   contains the utilities that were in use when it was compiled,
   and `npm run build` does not regenerate it. The classes below
   are used by the Sponsor App pages/menus but are absent from
   that bundle, so they are defined here by hand.

   If style.css is ever recompiled from source, these become
   redundant but remain harmless.
============================================================ */

/* Responsive display helpers (sm: breakpoint = 640px) */
@media (min-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:block { display: block !important; }
}

/* 5-column grid used by the app's bottom-navigation previews */
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Accent colours used by the app screen cards (tone map in pages/sponsor-app.php) */
.bg-rose-100   { background-color: oklch(0.941 0.03 12.58); }
.text-rose-600 { color: oklch(0.586 0.253 17.585); }
.bg-indigo-100 { background-color: oklch(0.93 0.034 272.788); }
.text-indigo-600 { color: oklch(0.511 0.262 276.966); }
.bg-purple-100 { background-color: oklch(0.946 0.033 307.174); }
.text-purple-600 { color: oklch(0.558 0.288 302.321); }
.bg-cyan-100   { background-color: oklch(0.956 0.045 203.388); }
.text-cyan-600 { color: oklch(0.609 0.126 221.723); }
.bg-emerald-600 { background-color: oklch(0.596 0.145 163.225); }
.hover\:bg-emerald-700:hover { background-color: oklch(0.508 0.118 165.612); }

/* Hover border accents for the screen cards */
.hover\:border-teal-400:hover   { border-color: oklch(0.777 0.152 181.912); }
.hover\:border-rose-400:hover   { border-color: oklch(0.712 0.194 13.428); }
.hover\:border-indigo-400:hover { border-color: oklch(0.678 0.182 276.935); }
.hover\:border-purple-400:hover { border-color: oklch(0.714 0.203 305.504); }
.hover\:border-cyan-400:hover   { border-color: oklch(0.789 0.154 211.53); }

/* 5-across screen-card grid on large screens (absent from the compiled bundle) */
@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Gradient colour stops missing from the compiled bundle.
   Without these, the from, via and to utilities resolve to
   nothing, the stop falls back to transparent, and the element
   fades out instead of showing its colour.
   Rules mirror the bundle's own Tailwind v4 output shape.

   NOTE: never write an asterisk followed by a slash inside these
   comments (e.g. a "from-<star>/" wildcard). It terminates the
   comment early and the CSS that follows is silently discarded.
------------------------------------------------------------ */

/* Palette variables the bundle never emitted */
:root {
  --color-indigo-200: oklch(0.87 0.065 274.039);
  --color-indigo-500: oklch(0.585 0.233 277.117);
  --color-indigo-900: oklch(0.359 0.144 278.697);
  --color-indigo-950: oklch(0.257 0.09 281.288);
  --color-rose-400: oklch(0.712 0.194 13.428);
  --color-green-600: oklch(0.627 0.194 149.214);
}

.from-blue-50,.from-blue-300,.from-blue-500,.from-blue-900,.from-blue-950,
.from-amber-600,.from-emerald-600,.from-red-700 {
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-50    { --tw-gradient-from: var(--color-blue-50); }
.from-blue-300   { --tw-gradient-from: var(--color-blue-300); }
.from-blue-500   { --tw-gradient-from: var(--color-blue-500); }
.from-blue-900   { --tw-gradient-from: var(--color-blue-900); }
.from-blue-950   { --tw-gradient-from: var(--color-blue-950); }
.from-amber-600  { --tw-gradient-from: var(--color-amber-600); }
.from-emerald-600{ --tw-gradient-from: var(--color-emerald-600); }
.from-red-700    { --tw-gradient-from: var(--color-red-700); }

.via-blue-600,.via-indigo-200,.via-indigo-900,.via-orange-400,.via-slate-900 {
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-blue-600    { --tw-gradient-via: var(--color-blue-600); }
.via-indigo-200  { --tw-gradient-via: var(--color-indigo-200); }
.via-indigo-900  { --tw-gradient-via: var(--color-indigo-900); }
.via-orange-400  { --tw-gradient-via: var(--color-orange-400); }
.via-slate-900   { --tw-gradient-via: var(--color-slate-900); }

.to-amber-200,.to-amber-600,.to-green-600,.to-indigo-500,.to-indigo-950,
.to-rose-400,.to-rose-700,.to-slate-950,.to-teal-500,.to-teal-600 {
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-200  { --tw-gradient-to: var(--color-amber-200); }
.to-amber-600  { --tw-gradient-to: var(--color-amber-600); }
.to-green-600  { --tw-gradient-to: var(--color-green-600); }
.to-indigo-500 { --tw-gradient-to: var(--color-indigo-500); }
.to-indigo-950 { --tw-gradient-to: var(--color-indigo-950); }
.to-rose-400   { --tw-gradient-to: var(--color-rose-400); }
.to-rose-700   { --tw-gradient-to: var(--color-rose-700); }
.to-slate-950  { --tw-gradient-to: var(--color-slate-950); }
.to-teal-500   { --tw-gradient-to: var(--color-teal-500); }
.to-teal-600   { --tw-gradient-to: var(--color-teal-600); }

/* ==========================================================================
   Mobile quality pass
   --------------------------------------------------------------------------
   Layout breakpoints are handled by style.css + utilities.css. This block
   covers the things that only go wrong on a real phone.
   ========================================================================== */

/* 1. Dynamic viewport height.
      On phones, 100vh is the height WITHOUT the browser chrome, so a 100vh
      hero is taller than the visible area and its bottom is cut off until the
      address bar hides. dvh tracks the chrome as it collapses. */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
  .h-screen     { height: 100dvh; }
  .min-h-\[92vh\] { min-height: 92dvh; }
  .max-h-\[92vh\] { max-height: 92dvh; }
  .min-h-\[85vh\] { min-height: 85dvh; }
}

/* 2. Tap targets.
      Footer/link lists rendered as 16px-tall flex rows are hard to hit with a
      thumb. Give list links and small pill links a comfortable height on
      touch screens without changing how they look on desktop. */
@media (max-width: 1023px) {
  #nacmu-footer ul li > a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  #nacmu-footer .flex.flex-wrap > a,
  #nacmu-footer a.inline-flex {
    min-height: 40px;
  }
  a.inline-flex,
  button.inline-flex {
    min-height: 36px;
  }
}

/* 3. Legibility floor.
      The design uses 9-10px micro-labels. That is fine on a desktop monitor
      but close to unreadable on a phone, so lift the smallest tiers a little
      on small screens only. Remove this block to restore the original sizes. */
@media (max-width: 640px) {
  .text-\[9px\]  { font-size: 10.5px; }
  .text-\[10px\] { font-size: 11px; }
}

/* 4. Notched devices.
      Pair with viewport-fit=cover in the meta tag so env(safe-area-inset-*)
      resolves; otherwise content can sit under the home indicator. */
@supports (padding: max(0px)) {
  #nacmu-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #mobile-nav-drawer { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* 5. Media never outgrows its column.
      These belong in the base layer. Unlayered rules outrank every layered one,
      so at the top level `height: auto` here beat Tailwind's own `.h-full`
      (which sits in @layer utilities) and every object-cover image collapsed to
      its intrinsic aspect ratio instead of filling its box. */
@layer base {
  img, svg, video, canvas, iframe { max-width: 100%; }
  img, video { height: auto; }
}

/* ==========================================================================
   Taller page heroes (.hero-tall)
   --------------------------------------------------------------------------
   Applied to every hero EXCEPT the home page, which keeps its own min-h-[92vh]
   treatment. The class is set explicitly in each template rather than derived
   from a selector, so which pages are affected is obvious from the markup.

   These heroes place a full-bleed photograph behind the heading but gave the
   section no height of its own, so it collapsed to whatever the text needed
   and the image was squeezed into a strip.

   Two levers are used together on purpose:
     - min-height   raises the short heroes to a consistent size;
     - padding      grows even the heroes whose copy already exceeds that
                    floor (What We Do, Stories and Gallery on phones), so
                    every tagged page gets taller rather than just some.
   ========================================================================== */
.hero-tall {
  min-height: 56vh;
  padding-bottom: 5rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-tall {
    min-height: 62vh;
    padding-bottom: 6rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-tall {
    min-height: 68vh;
    padding-bottom: 7rem !important;
  }
}

/* Track the phone's collapsing address bar rather than the static viewport. */
@supports (height: 100dvh) {
  .hero-tall { min-height: 56dvh; }
  @media (min-width: 640px)  { .hero-tall { min-height: 62dvh; } }
  @media (min-width: 1024px) { .hero-tall { min-height: 68dvh; } }
}

/* ==========================================================================
   Home hero fits the window (.home-hero)
   --------------------------------------------------------------------------
   min-h-[92vh] is only a FLOOR. The hero's content needs a fixed ~794px, so
   on any window shorter than that the section grew past the floor and the
   call-to-action buttons and stats row fell below the fold.

   Fix in two parts:
     1. Make the hero exactly fill the viewport (100dvh, so the mobile address
        bar is accounted for) instead of a fraction of it.
     2. Shrink what the content NEEDS as the window gets shorter, using
        height-based media queries. Without this the content simply overflows
        a hero that is now pinned to the viewport height.

   The tiers below are measured against the real content, not guessed.
   ========================================================================== */
.home-hero {
  min-height: 100vh;
}

@supports (height: 100dvh) {
  .home-hero {
    min-height: 100dvh;
  }
}

/* --- Short laptops (~700-850px tall): trim the generous vertical rhythm --- */
@media (max-height: 850px) {
  .home-hero {
    padding-top: calc(var(--navbar-height, 80px) + 1.5rem) !important;
    padding-bottom: 1.5rem !important;
  }
  /* The section is a flex container, so this wrapper would otherwise
     shrink-wrap its content and drift to the centre once the side photo is
     hidden below. Keep it full width so the copy stays on the container's
     left gutter, as it is at full height. */
  .home-hero > .relative.z-10 {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .home-hero .grid {
    gap: 2rem;
  }
  .home-hero .space-y-6 > :not(:last-child) {
    margin-bottom: 1.1rem;
  }
  .home-hero h1 {
    font-size: clamp(2.25rem, 4.2vh + 1rem, 3.75rem);
    line-height: 1.05;
  }
}

/* --- Netbook / short window (<=700px): tighten further --- */
@media (max-height: 700px) {
  .home-hero {
    padding-top: calc(var(--navbar-height, 80px) + 0.75rem) !important;
    padding-bottom: 0.75rem !important;
  }
  .home-hero > .relative.z-10 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .home-hero .space-y-6 > :not(:last-child) {
    margin-bottom: 0.75rem;
  }
  .home-hero p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  /* The decorative side photo is the least load-bearing element here. */
  .home-hero .lg\:col-span-5 {
    display: none;
  }
  .home-hero .lg\:col-span-7 {
    grid-column: span 12 / span 12;
    max-width: 44rem;
  }
}

/* --- Very short (<=600px tall, e.g. landscape phone): drop the stats row --- */
@media (max-height: 600px) {
  .home-hero .border-t.border-white\/15 {
    display: none;
  }
  .home-hero h1 {
    font-size: clamp(1.75rem, 5vh, 2.5rem);
  }
}

/* ==========================================================================
   Home: upcoming events hero (slideshow)
   The stage holds one slide per event; the "Coming up" rail sits on the
   right on wide screens and below the stage on phones.
   ========================================================================== */
.ev-hero {
  position: relative;
  margin-top: calc(var(--navbar-height, 80px) + 4px);
  background: #020617;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.ev-hero__stage {
  position: relative;
  min-height: clamp(560px, 84vh, 820px);
}
.events-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.events-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease;
  z-index: 1;
}
.events-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 9s ease-out;
}
.events-slide.is-active .events-slide__bg { transform: scale(1); }
.events-slide__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(2, 6, 23, 0.96) 0%, rgba(2, 6, 23, 0.7) 38%, rgba(2, 6, 23, 0.15) 75%, rgba(2, 6, 23, 0.35) 100%),
    linear-gradient(100deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.35) 55%, rgba(2, 6, 23, 0.1) 100%);
}
.ev-hero__inner {
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 1rem 2.5rem;
}
@media (min-width: 640px) { .ev-hero__inner { padding: 4rem 1.5rem 3rem; } }
@media (min-width: 1024px) { .ev-hero__inner { padding: 4rem 2rem 4.5rem; } }

/* The outgoing text leaves first, the new text follows. */
.events-slide__body {
  max-width: 44rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.events-slide.is-active .events-slide__body {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.45s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
}
@media (min-width: 1024px) {
  .ev-hero .events-slide__body { max-width: calc(100% - 400px); }
}

.ev-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ev-kicker__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fcd34d;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ev-kicker__dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: #fbbf24; }
.ev-kicker__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: live-ping 1.6s ease-out infinite; }
.ev-kicker__tag {
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  font-weight: 700;
  color: #e2e8f0;
}
.events-slide__title {
  margin-top: 1rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.events-slide__title span {
  background: linear-gradient(90deg, #fcd34d, #fb923c, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ev-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.ev-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 600;
  color: #f1f5f9;
}
.ev-facts i { color: #fcd34d; }
.events-slide__text { margin-top: 1rem; max-width: 38rem; font-size: 1.05rem; line-height: 1.65; color: #cbd5e1; }

/* An appeal's "raised so far" bar. */
.ev-raised { max-width: 30rem; margin-top: 1.2rem; }
.ev-raised__bar { height: 12px; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.ev-raised__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f97316, #e11d48); box-shadow: 0 0 18px rgba(251, 146, 60, 0.6); }
.ev-raised p { margin-top: 0.5rem; font-size: 0.85rem; color: #cbd5e1; }
.ev-raised b { color: #fcd34d; font-size: 1rem; }
.events-slide--appeal .ev-kicker__pill { background: rgba(225, 29, 72, 0.2); border-color: rgba(251, 113, 133, 0.6); color: #fecdd3; }
.events-slide--appeal .ev-kicker__dot { background: #fb7185; }
.ev-rail__item--appeal .ev-rail__date { background: #fecdd3; }
.ev-rail__item--appeal .ev-rail__date small { color: #9f1239; }
.ev-rail__item--sponsor .ev-rail__date b i { font-size: 1rem; color: #dc2626; }

.ev-countdown { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.ev-countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.1rem;
  padding: 0.6rem 0.4rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
.ev-countdown b { font-family: 'Outfit', sans-serif; font-size: 1.65rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-countdown small { margin-top: 0.25rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #dc2626; }
@media (max-width: 400px) { .ev-countdown span { min-width: 3.4rem; } .ev-countdown b { font-size: 1.35rem; } }

.events-slide__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.events-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.events-btn:hover { transform: translateY(-1px); }
.events-btn:active { transform: scale(0.97); }
.events-btn--primary { background: linear-gradient(90deg, #dc2626, #e11d48); color: #fff; box-shadow: 0 14px 30px -10px rgba(225, 29, 72, 0.7); }
.events-btn--primary:hover { box-shadow: 0 18px 36px -10px rgba(225, 29, 72, 0.85); }
.events-btn--ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; backdrop-filter: blur(8px); }
.events-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* "Coming up" rail */
.ev-rail {
  position: relative;
  z-index: 2;
  padding: 1rem 1rem 1.25rem;
  background: #020617;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ev-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ev-rail__count { font-variant-numeric: tabular-nums; }
.ev-rail__count b { color: #fff; }
.ev-rail__list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ev-rail__list::-webkit-scrollbar { display: none; }
.ev-rail__item {
  position: relative;
  flex: 0 0 min(80%, 280px);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  text-align: left;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.ev-rail__item:hover { background: rgba(255, 255, 255, 0.12); }
.ev-rail__item.is-active { background: rgba(255, 255, 255, 0.16); border-color: rgba(251, 191, 36, 0.6); }
.ev-rail__date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: #fff;
  color: #0f172a;
  line-height: 1;
}
.ev-rail__date small { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; color: #dc2626; letter-spacing: 0.08em; }
.ev-rail__date b { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 900; }
.ev-rail__item.is-active .ev-rail__date { background: #fbbf24; }
.ev-rail__text { display: flex; flex-direction: column; min-width: 0; }
.ev-rail__text b { font-size: 0.88rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-rail__text small { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-rail__progress { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.4rem; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ev-rail__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f97316); }
.ev-rail__item.is-active .ev-rail__progress i { animation: ev-progress var(--ev-interval, 7000ms) linear forwards; }
.ev-hero.is-paused .ev-rail__item.is-active .ev-rail__progress i { animation-play-state: paused; }
@keyframes ev-progress { from { width: 0; } to { width: 100%; } }
.ev-rail__nav { display: none; }

@media (min-width: 1024px) {
  .ev-rail {
    position: absolute;
    right: max(2rem, calc((100vw - 80rem) / 2 + 2rem));
    bottom: 4.5rem;
    width: 360px;
    padding: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.5rem;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  }
  .ev-rail__list { flex-direction: column; overflow: visible; max-height: 330px; overflow-y: auto; }
  .ev-rail__item { flex: 0 0 auto; }
  .ev-rail__item:hover { transform: translateX(-3px); }
  .ev-rail__nav { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
  .ev-rail__nav button {
    flex: 1;
    min-height: 40px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    transition: background-color 0.2s ease;
  }
  .ev-rail__nav button:hover { background: rgba(255, 255, 255, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .events-slide, .events-slide.is-active, .events-slide__bg,
  .events-slide__body, .events-slide.is-active .events-slide__body { transition: none; transform: none; }
  .ev-rail__item.is-active .ev-rail__progress i { animation: none; width: 100%; }
  .ev-kicker__dot::after { animation: none; }
}

/* Brand logo: the full-colour logo on white, large enough to read. */
.brand-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 46px;
  padding: 3px 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.18);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px) { .brand-logo { width: 76px; height: 58px; border-radius: 14px; padding: 4px 6px; } }
.brand-logo--footer { width: 76px; height: 58px; border-color: transparent; }

/* ==========================================================================
   Home: appeals running now
   ========================================================================== */
.appeals-band { padding: 3.5rem 0; background: linear-gradient(135deg, #fff7ed, #fef2f2); border-bottom: 1px solid #fde2e2; }
.appeals-band__head { text-align: center; margin-bottom: 2rem; }
.appeals-band__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 9999px;
  background: #fee2e2; color: #b91c1c; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.appeals-band__title { margin-top: 0.75rem; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.25rem); color: #0f172a; }
.appeals-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.appeals-grid:has(> :only-child) { max-width: 44rem; margin: 0 auto; }
.appeal-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #fecaca; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 30px -12px rgba(220, 38, 38, 0.25); }
.appeal-card__img { width: 100%; height: 200px; object-fit: cover; }
.appeal-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; flex: 1; }
.appeal-card__tag { align-self: flex-start; padding: 0.2rem 0.65rem; border-radius: 9999px; background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.appeal-card__title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; color: #0f172a; line-height: 1.2; }
.appeal-card__text { font-size: 0.875rem; line-height: 1.6; color: #475569; }
.appeal-progress { height: 10px; border-radius: 9999px; background: #fee2e2; overflow: hidden; margin-top: 0.25rem; }
.appeal-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(to right, #f59e0b, #dc2626); }
.appeal-card__figures { font-size: 0.8rem; color: #64748b; }
.appeal-card__figures strong { color: #0f172a; }
.appeal-card__btn {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.7rem 1.3rem; border-radius: 0.9rem; background: #dc2626; color: #fff; font-size: 0.875rem; font-weight: 700;
}
.appeal-card__btn:hover { background: #b91c1c; }

/* ==========================================================================
   Live from campus (PR updates) and the live dot
   ========================================================================== */
.live-band { padding: 3.5rem 0; background: #fff; border-bottom: 1px solid #e2e8f0; }
.live-band__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.live-band__title { display: flex; align-items: center; gap: 0.6rem; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.6rem; color: #0f172a; }
.live-band__more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: #2563eb; }
.live-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.live-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column; }
.live-card__img { width: 100%; height: 180px; object-fit: cover; }
.live-card__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.live-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #64748b; }
.live-card__title { font-weight: 800; color: #0f172a; font-size: 1rem; }
.live-card__text { font-size: 0.875rem; color: #334155; line-height: 1.6; }
.live-card__link { font-size: 0.8rem; font-weight: 700; color: #2563eb; }
.live-dot { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 9999px; background: #ef4444; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: live-ping 1.6s ease-out infinite; }
.live-dot--sm { width: 8px; height: 8px; }
@keyframes live-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

/* ==========================================================================
   Video gallery
   ========================================================================== */
.video-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.video-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease; }
.video-card:hover { box-shadow: 0 20px 40px -18px rgba(15, 23, 42, 0.35); }
.video-card[hidden] { display: none; }
.video-card__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; }
.video-card__frame iframe, .video-card__frame video, .video-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.1)); color: #fff; cursor: pointer; border: 0;
}
.video-card__play i { width: 64px; height: 64px; border-radius: 9999px; background: rgba(220, 38, 38, 0.92); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; padding-left: 4px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; }
.video-card__play:hover i { transform: scale(1.08); }
.video-card__body { padding: 1.1rem 1.25rem 1.3rem; }
.video-card__tag { display: inline-block; margin-bottom: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 9999px; background: #eff6ff; color: #1d4ed8; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.video-card__title { font-family: 'Outfit', sans-serif; font-weight: 800; color: #0f172a; font-size: 1.05rem; line-height: 1.3; }
.video-card__text { margin-top: 0.35rem; font-size: 0.85rem; color: #475569; line-height: 1.55; }
.media-switch { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.media-switch a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.5rem 1rem; border-radius: 0.8rem; font-size: 0.8rem; font-weight: 700; color: #e2e8f0; }
.media-switch a[aria-current="page"] { background: #fff; color: #0f172a; }
.video-filter { display: inline-flex; align-items: center; min-height: 40px; padding: 0.5rem 1rem; border-radius: 0.8rem; font-size: 0.75rem; font-weight: 700; background: rgba(255, 255, 255, 0.1); color: #fff; }
.video-filter.is-active { background: #2563eb; }

/* Intro emblem: the full-colour logo on a white tile inside the rainbow ring. */
.intro-logo { width: 12rem; height: 12rem; padding: 5px; border-radius: 2rem; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.55); }
.intro-logo__tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0.6rem; border-radius: calc(2rem - 5px); background: #fff; }
.intro-logo__tile img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) { .intro-logo { width: 14rem; height: 14rem; } }
@media (max-height: 560px) { .intro-logo { width: 8.5rem; height: 8.5rem; } }

/* =====================================================================
   Photo and video popup (main.js): dark backdrop, the picture large and
   whole, or the video playing; caption under it; arrows at the sides on
   larger screens, swipe on phones.
   ===================================================================== */
.media-open { cursor: zoom-in; }
.media-open:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }
.media-open__zoom {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; color: #fff;
  background: rgba(15, 23, 42, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s;
}
.media-open:hover .media-open__zoom, .media-open:focus-visible .media-open__zoom { opacity: 1; transform: none; }
@media (hover: none) { .media-open__zoom { opacity: 1; transform: none; } }

html.media-pop-open, html.media-pop-open body { overflow: hidden; }
.media-pop {
  position: fixed; inset: 0; z-index: 2147482500;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  align-items: center; gap: 0 8px;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(2, 6, 23, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;
  color: #fff;
}
.media-pop.is-open { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.media-pop__bar {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px 6px;
}
.media-pop__count { font: 600 .85rem/1 'Outfit', system-ui, sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.media-pop__btn, .media-pop__nav {
  width: 46px; height: 46px; border-radius: 9999px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  color: #fff; background: rgba(255, 255, 255, .12); transition: background .15s, transform .15s;
}
.media-pop__btn:hover, .media-pop__nav:hover { background: rgba(255, 255, 255, .24); }
.media-pop__btn:focus-visible, .media-pop__nav:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.media-pop__nav:active { transform: scale(.94); }
.media-pop__nav[hidden] { visibility: hidden; display: flex; }
.media-pop__figure {
  grid-column: 2; margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transform: scale(.97); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.media-pop.is-open .media-pop__figure { transform: none; }
.media-pop__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; flex: 0 1 auto; max-height: calc(100% - 90px); }
.media-pop__stage img {
  display: block; max-width: 100%; max-height: min(78vh, calc(100dvh - 190px)); width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 25px 60px rgba(0, 0, 0, .5); background: #0f172a; object-fit: contain;
}
.media-pop.is-video .media-pop__stage { aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - 200px) * 16 / 9)); max-height: none; }
.media-pop__stage iframe, .media-pop__stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; background: #000; box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}
.media-pop.is-loading .media-pop__stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: media-pop-spin .8s linear infinite; pointer-events: none;
}
@keyframes media-pop-spin { to { transform: rotate(360deg); } }
.media-pop__caption { max-width: 760px; text-align: center; padding: 0 6px; }
.media-pop__caption h2 { margin: 0; font: 700 1.05rem/1.3 'Outfit', system-ui, sans-serif; color: #fff; }
.media-pop__caption p { margin: 4px 0 0; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }

/* Phones: the media uses the full width; the arrows sit over its edges. */
@media (max-width: 640px) {
  .media-pop { grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; }
  .media-pop__nav { position: absolute; top: 50%; margin-top: -23px; z-index: 2; width: 40px; height: 40px; background: rgba(15, 23, 42, .55); }
  .media-pop__nav--prev { left: max(6px, env(safe-area-inset-left)); }
  .media-pop__nav--next { right: max(6px, env(safe-area-inset-right)); }
  .media-pop__stage img, .media-pop__stage iframe, .media-pop__stage video { border-radius: 10px; }
  .media-pop.is-video .media-pop__stage { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .media-pop, .media-pop__figure { transition: none; }
}