/* ============================================================
   Metro Parlez-Ment — Shared global navigation bar
   Single source of truth for the navbar on EVERY page.
   Paired with nav.js (which injects the markup and sets the
   active link based on the current page).
   ============================================================ */

:root {
  --nav-red: #ed3237;
  --nav-red-dark: #be2929;
  --nav-height: 80px;
  --nav-pad-x: 64px;
  --nav-max-width: 1320px;
  --surface-elevate: 0 24px 60px rgba(0, 0, 0, 0.1);
}

html {
  scroll-behavior: smooth;
}

body.page-exit {
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.page-loader-active {
  overflow: hidden;
}

.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fff;
  color: #111;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.32s ease,
    visibility 0.32s ease;
}

.page-loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-panel {
  width: min(100%, 360px);
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 26px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.12);
}

.page-loader-ring {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
}

.page-loader-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(237, 50, 55, 0.18);
}

.page-loader-ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 4px solid rgba(237, 50, 55, 0.3);
  border-top-color: var(--nav-red);
  animation: loader-spin 1.35s linear infinite;
}

.page-loader-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.page-loader-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-loader-note {
  font-size: 14px;
  color: #575757;
  text-align: center;
  line-height: 1.6;
  max-width: 100%;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-ring::after {
    animation: none;
  }
  .page-loader-overlay,
  .page-loader-panel {
    transition: none;
  }
}

.animate-item {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
  will-change: opacity, transform;
  transition:
    opacity 0.64s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-illustration img,
.value-card,
.team-card,
.focus-card,
.who-image,
.card {
  will-change: transform, box-shadow;
}

.hero-illustration img {
  animation: float 16s ease-in-out infinite alternate;
}

@keyframes float {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -8px, 0);
  }
}

.site-nav .nav-links a {
  position: relative;
  overflow: hidden;
}

.site-nav .nav-links a::after {
  display: none;
}

.btn,
.btn-donate-nav,
.drawer-volunteer,
.drawer-links a,
.focus-card,
.team-card,
.value-card,
.who-image {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease;
}

.btn:hover,
.btn-donate-nav:hover,
.drawer-volunteer:hover,
.drawer-links a:hover,
.focus-card:hover,
.team-card:hover,
.value-card:hover,
.who-image:hover {
  transform: translateY(-2px);
  box-shadow: var(--surface-elevate);
}

.btn:active,
.btn-donate-nav:active,
.drawer-volunteer:active,
.drawer-links a:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Touchable hover enhancement for cards and images */
.focus-card,
.team-card,
.value-card,
.who-image-inner {
  border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .animate-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Navbar shell ── */
.site-nav {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Three balanced tracks keep the links perfectly centered while the
   logo stays pinned left and the CTA pinned right. The 1fr side tracks
   are equal, so the middle (links) column is centered in the bar. */
.site-nav .nav-inner {
  max-width: var(--nav-max-width);
  margin: 0 auto;
  height: var(--nav-height);
  padding: 0 var(--nav-pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}

/* Logo — fixed left */
.site-nav .nav-logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.site-nav .nav-logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Centered links */
.site-nav .nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-links li {
  list-style: none;
}

/* Every link reserves the exact pill box (padding + transparent border)
   so toggling .active only repaints colour — it never changes geometry,
   guaranteeing zero layout shift between pages. */
.site-nav .nav-links a {
  display: block;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #333;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.site-nav .nav-links a:hover {
  background: #fbfbfb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 18, 18, 0.06);
}
.site-nav .nav-links a.active {
  border-color: var(--nav-red);
  color: var(--nav-red);
  background: transparent;
}

/* Pressed / active state (mouse down or touch) */
.site-nav .nav-links a:active,
.site-nav .nav-links a.pressed {
  transform: translateY(0) scale(0.985);
  box-shadow: none;
  background: rgba(237, 50, 55, 0.06);
}

/* Focus-visible for keyboard accessibility */
.site-nav .nav-links a:focus-visible {
  outline: 3px solid rgba(237, 50, 55, 0.12);
  outline-offset: 4px;
}

/* Right group — CTA fixed right (+ hamburger on mobile) */
.site-nav .nav-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.site-nav .btn-donate-nav {
  display: inline-block;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--nav-red);
  border: 1.5px solid var(--nav-red);
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.site-nav .btn-donate-nav:hover {
  background: var(--nav-red-dark);
  border-color: var(--nav-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(237, 50, 55, 0.12);
}
.site-nav .btn-donate-nav:active,
.site-nav .btn-donate-nav.pressed {
  transform: translateY(0) scale(0.992);
  box-shadow: none;
}

/* ── Hamburger (mobile) ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── Overlay + slide-in drawer (mobile) ── */
.nav-overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  backdrop-filter: blur(2px);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 290px;
  max-width: 84vw;
  height: 100dvh;
  background: #fff;
  z-index: 300;
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.12);
  will-change: transform, opacity;
}
.nav-drawer.open {
  transform: translateX(0);
  opacity: 1;
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.drawer-header .nav-logo img {
  height: 24px;
  width: auto;
  display: block;
}
.drawer-close {
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  color: #555;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 0.2s,
    transform 0.2s;
}
.drawer-close:hover {
  background: #ebebeb;
  transform: scale(1.03);
}
.drawer-close svg {
  width: 18px;
  height: 18px;
}
.drawer-close:hover {
  background: #f5f5f5;
}
.drawer-links {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
}
.drawer-links li {
  list-style: none;
}
.drawer-links a {
  display: block;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}
.drawer-links a:hover {
  background: #fbfbfb;
  transform: translateX(-2px);
}

/* Pressed state for drawer links */
.drawer-links a:active,
.drawer-links a.pressed {
  transform: translateX(0) scale(0.99);
  background: rgba(237, 50, 55, 0.04);
}
.drawer-links a.active {
  color: var(--nav-red);
  font-weight: 600;
  background: #fde8e7;
}
.drawer-cta {
  padding: 18px 20px 24px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.drawer-volunteer {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px 22px;
  border: 1px solid #ddd;
  border-radius: 999px;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}
.drawer-volunteer:hover {
  color: var(--nav-red);
  border-color: var(--nav-red);
  background: rgba(237, 50, 55, 0.06);
}
.drawer-cta .btn-donate-nav {
  width: 100%;
  text-align: center;
  padding: 12px 22px;
  background: var(--nav-red);
  color: #fff;
  border: 1.5px solid var(--nav-red);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(237, 50, 55, 0.16);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.drawer-cta .btn-donate-nav:hover {
  background: var(--nav-red-dark);
  border-color: var(--nav-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(237, 50, 55, 0.22);
}
.drawer-cta .btn-donate-nav:active,
.drawer-cta .btn-donate-nav.pressed {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}

/* Mobile — collapse to hamburger + drawer */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --nav-pad-x: 16px;
  }
  .site-nav .nav-inner {
    grid-template-columns: 1fr auto;
    column-gap: 0;
  }
  .site-nav .nav-links {
    display: none;
  }
  .site-nav .nav-inner {
    column-gap: 12px;
  }
  .site-nav .nav-logo img {
    height: 34px;
  }
  .site-nav .nav-right {
    justify-self: end;
  }
  .site-nav .nav-right .btn-donate-nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}