/* jc-mobile.css — shared across every page.
 *
 * 1. MOBILE TYPE & SPACING SCALE (below 768px only)
 *    The site was authored at desktop sizes; on a phone that reads oversized
 *    (body copy was landing at 18-30px). These rules step the Tailwind size
 *    utilities down on small screens ONLY. Nothing here affects md and up, so
 *    the desktop design is untouched.
 *
 *    !important is deliberate: Tailwind's CDN build injects its utilities at
 *    runtime, so we can't rely on source order to win the cascade.
 *
 * 2. FOOTER — solid black in both light and dark mode.
 * 3. HEADER (menu bar) — darkens in dark mode; centralized here after drifting.
 *
 * Edit this file to retune mobile globally; it is linked from every page.
 */

/* ── 0. Header (menu bar): darken in dark mode ────────────────────────────────
   This previously lived in each page's own inline dark-mode <style> block, which
   is duplicated per page rather than shared — it had drifted, and 14 of 39 pages
   (including this event detail page) were missing it, leaving a bright white nav
   bar in dark mode while the rest of the page went dark. */
[data-theme="dark"] #site-header { background: rgba(16,16,19,0.92) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important; }
[data-theme="dark"] #site-header .text-slate-700 { color: #a1a1aa !important; }
[data-theme="dark"] #mobile-nav { background: #1e1e23 !important; border-color: #35353d !important; }


/* ── 1. Mobile type & spacing ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Body / lead copy */
  .text-lg  { font-size: 1rem     !important; line-height: 1.55 !important; }  /* 18 -> 16 */
  .text-xl  { font-size: 1.0625rem!important; line-height: 1.55 !important; }  /* 20 -> 17 */

  /* Headings */
  .text-2xl { font-size: 1.25rem  !important; line-height: 1.3  !important; }  /* 24 -> 20 */
  .text-3xl { font-size: 1.5rem   !important; line-height: 1.2  !important; }  /* 30 -> 24 */
  .text-4xl { font-size: 1.75rem  !important; line-height: 1.15 !important; }  /* 36 -> 28 */
  .text-5xl { font-size: 2.0625rem!important; line-height: 1.1  !important; }  /* 48 -> 33 */
  .text-6xl { font-size: 2.375rem !important; line-height: 1.05 !important; }  /* 60 -> 38 */
  .text-7xl { font-size: 2.625rem !important; line-height: 1.05 !important; }  /* 72 -> 42 */
  .text-8xl { font-size: 3rem     !important; line-height: 1    !important; }
  .text-9xl { font-size: 3.5rem   !important; line-height: 1    !important; }

  /* Section rhythm — big desktop padding is far too tall on a phone */
  .py-28 { padding-top: 2.5rem  !important; padding-bottom: 2.5rem  !important; }
  .py-24 { padding-top: 2.5rem  !important; padding-bottom: 2.5rem  !important; }
  .py-20 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-16 { padding-top: 2rem    !important; padding-bottom: 2rem    !important; }
  .py-14 { padding-top: 2rem    !important; padding-bottom: 2rem    !important; }

  /* Side gutters: 2rem each side eats a lot of a 390px screen */
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Oversized header/section bottom margins */
  .mb-16 { margin-bottom: 2rem   !important; }
  .mb-14 { margin-bottom: 1.75rem!important; }
  .mb-12 { margin-bottom: 1.5rem !important; }
  .mb-10 { margin-bottom: 1.25rem!important; }

  /* Wide desktop grid gaps stack up vertically on mobile */
  .gap-16 { gap: 1.75rem !important; }
  .gap-12 { gap: 1.5rem  !important; }
  .gap-10 { gap: 1.25rem !important; }
}

/* ── 2. Footer: solid black in BOTH light and dark mode ───────────────────── */
/* Selectors are written to match the specificity of the existing
   [data-theme="dark"] footer rules, otherwise dark mode would win. */
footer,
[data-theme="dark"] footer,
[data-theme="dark"] footer.bg-slate-50 {
  background: #000 !important;
  border-color: #1f2937 !important;
  border-top-color: #1f2937 !important;
}
footer h5,
footer .text-slate-900,
[data-theme="dark"] footer h5,
[data-theme="dark"] footer .text-slate-900   { color: #ffffff !important; }
footer .text-slate-700,
[data-theme="dark"] footer .text-slate-700   { color: #e5e7eb !important; }
footer .text-slate-500,
footer .text-slate-400,
[data-theme="dark"] footer .text-slate-500,
[data-theme="dark"] footer .text-slate-400   { color: #9ca3af !important; }
footer a                      { color: inherit; }
footer a:hover                { color: #60a5fa !important; }
footer .bg-slate-200,
[data-theme="dark"] footer .bg-slate-200     { background: #1f2937 !important; color: #d1d5db !important; }
footer .bg-slate-200:hover    { color: #ffffff !important; }
footer .border-slate-200,
footer .border-slate-100,
[data-theme="dark"] footer .border-slate-200 { border-color: #1f2937 !important; }
/* strong tags inside the address block */
footer strong                 { color: #f3f4f6 !important; }

/* ── Horizontal card rails on mobile (moved out of per-page <style> blocks) ── */
@media (max-width: 767px) {
  .jc-rail {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jc-rail::-webkit-scrollbar { display: none; }
  .jc-rail > * { flex: 0 0 82%; min-width: 82%; max-width: 82%; scroll-snap-align: start; }
}

/* ── Event strips (assets/js/jc-events-strip.js) ──────────────────────────────
   The strip is a horizontal rail of fixed 260px cards. Three of them plus gaps
   come to ~804px, so in a max-w-5xl or max-w-7xl container they hugged the left
   edge with a lot of dead space, and the heading above them stretched well past
   the last card.

   Two layers here, deliberately:

   1. THIS FILE centres the cards inside whatever width the rail has. That alone
      fixes the dead-space problem and is all that's needed if step 2 never runs.
      "safe" centring degrades to flex-start the moment the cards overflow, so
      the first card can never end up stranded behind the scroll origin. A
      browser that doesn't know the keyword drops the declaration and keeps
      today's left alignment — no worse than before.

   2. THE SCRIPT then measures the card row and caps .jc-strip to it, which pulls
      the heading and the "see all" link in to line up with the first and last
      card. That's progressive enhancement on top of 1, and it measures rather
      than relying on intrinsic sizing around a scroll container.

   Note .jc-strip-rail, NOT .jc-rail — that name is already taken above by the
   mobile rail utility, which would force these cards to 82% width on phones.
   ───────────────────────────────────────────────────────────────────────────*/
.jc-strip      { margin-inline: auto; }
.jc-strip-rail { justify-content: safe center; }