/* Site background styles: image fallback, overlay, and optional video behind content */
html,body{height:100%;}
body{
  margin:0;
  background-color:#0b1220;
  /* Try multiple fallbacks: absolute (server), relative (site root/relative file paths)
     This helps when pages are opened via file:// or served from a subpath. */
  background-image:
    url('/assets/img/Site-pics/20250926_1720_Joyful%20Community%20Gathering_simple_compose_01k641ry7nfa2aeedre3k06ez7.png'),
    url('assets/img/Site-pics/20250926_1720_Joyful Community Gathering_simple_compose_01k641ry7nfa2aeedre3k06ez7.png'),
    url('../assets/img/Site-pics/20250926_1720_Joyful Community Gathering_simple_compose_01k641ry7nfa2aeedre3k06ez7.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:inherit;
}
/* Make media elements fluid by default for small screens */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
/* Improve text rendering on mobile */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* gentle overlay to improve contrast */
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(rgba(2,6,23,0.45), rgba(3,9,30,0.45));
}
/* video container (inserted by JS) */
.hpra-bg-video{
  position:fixed;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.45;pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .hpra-bg-video{display:none}
}

/* Mobile-specific adjustments */
@media (max-width: 768px){
  /* Fixed backgrounds can cause jank on mobile; allow normal scroll */
  body{ background-attachment: scroll; background-position: center top; }
  /* Navigation layout on small screens */
  header.nav .nav-inner{ flex-wrap: wrap; height: auto; padding-top: .35rem; padding-bottom: .35rem; }
  /* Collapsible nav with smooth transition */
  header.nav nav{ width:100%; display:block; overflow:hidden; max-height:0; opacity:0; transition: max-height .25s ease, opacity .2s ease; }
  header.nav[data-menu-open="true"] nav{ max-height:60vh; opacity:1; }
  header.nav nav a{ display:block; padding:.6rem .65rem; border-radius:10px; }
  header.nav[data-menu-open="true"] nav{ display:block; }
  /* Card-like panel for mobile nav */
  header.nav[data-menu-open="true"] nav{ background:#fff; border:1px solid var(--line, rgba(0,0,0,.1)); border-radius:12px; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08)); padding:.35rem; }
  header.nav[data-menu-open="true"] nav a{ border-radius:8px; }
  header.nav[data-menu-open="true"] nav a + a{ border-top:1px solid rgba(0,0,0,.06); }
  /* Menu toggle button */
  header.nav .menu-toggle{ appearance:none; border:1px solid var(--line, rgba(0,0,0,.1)); background:#fff; color:inherit; border-radius:10px; padding:.5rem .7rem; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; cursor:pointer; }
  header.nav .menu-toggle svg{ width:18px; height:18px; }
  /* Show the toggle button only on small screens */
  header.nav .menu-toggle{ display:inline-flex; }
  /* Allow wide tables to scroll horizontally instead of breaking layout */
  .table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
}

/* Even smaller phones */
@media (max-width: 600px){
  .container{ padding-left:.75rem; padding-right:.75rem; }
  header.nav nav a{ padding:.55rem .6rem; }
}

/* Dark-mode touch-ups for toggle button */
@media (prefers-color-scheme: dark){
  header.nav .menu-toggle{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color:#e5e7eb; }
  header.nav .menu-toggle:hover{ background: rgba(255,255,255,0.12); }
  /* Subtle hover for links inside collapsed mobile nav on dark */
  header.nav nav a:hover{ background: rgba(255,255,255,0.06); }
  header.nav nav a:active{ background: rgba(255,255,255,0.1); }
  /* Card-like panel on dark */
  header.nav[data-menu-open="true"] nav{ background: rgba(17,24,39,0.96); border-color: rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  header.nav[data-menu-open="true"] nav a + a{ border-top-color: rgba(255,255,255,0.08); }
}

/* Utility: screen-reader only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }