/* J-TV design preview: shared styles.
   Page layout lives in each page's inline styles (mirrors the Wix build one element at a time).
   This file only adds what every page needs: tokens, focus, phone-width tweaks and preview chrome. */

:root {
  --jtv-night: #170D33;      /* page ground */
  --jtv-night-deep: #0F0824; /* footer */
  --jtv-broadcast: #2B1FA0;  /* stats band, from the YouTube banner */
  --jtv-violet: #5B2FD0;     /* primary action on light grounds */
  --jtv-violet-light: #9966FF;
  --jtv-gold: #F5B52E;       /* Support J-TV, lower-thirds */
  --jtv-lavender: #E9E2FF;   /* secondary text on night */
  --jtv-wash: #F3EFFF;       /* light section ground */
}

html { scroll-behavior: smooth; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--jtv-gold); outline-offset: 2px;
}

/* Phone-width overrides for the desktop pages (inline sizes are desktop sizes). */
@media (max-width: 760px) {
  body:not([data-page^="mobile"]) h1 { font-size: 42px !important; letter-spacing: -1px !important; line-height: 1.02 !important; }
  body:not([data-page^="mobile"]) h2 { font-size: 30px !important; letter-spacing: -0.5px !important; line-height: 1.08 !important; }
  body:not([data-page^="mobile"]) blockquote { font-size: 24px !important; }
  body:not([data-page^="mobile"]) section, body:not([data-page^="mobile"]) header > div, body:not([data-page^="mobile"]) footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  body:not([data-page^="mobile"]) [style*="font-family: Anton"][style*="font-size: 54px"],
  body:not([data-page^="mobile"]) [style*="font-family: Anton"][style*="font-size: 68px"] { font-size: 40px !important; }
  body[data-page="home"] section[aria-label="J-TV"] { min-height: 720px !important; }
  body[data-page="about"] section[aria-label="Ollie Anisfeld"] img { height: 380px !important; }
  body[data-page="contact"] form { padding: 40px 16px 64px !important; }
  body[data-page="contact"] section > div:first-child > div:last-child { left: 16px !important; right: 16px !important; bottom: 32px !important; }
  body[data-page="fundraiser"] form { padding: 24px !important; }
}

/* Mobile menu drawer (mobile pages) */
.jtv-drawer { position: fixed; inset: 0; z-index: 40; background: rgba(15, 8, 36, 0.98); color: #fff; display: flex; flex-direction: column; padding: 24px 20px; gap: 8px; font-family: Montserrat, sans-serif; }
.jtv-drawer[hidden] { display: none; }
.jtv-drawer a { color: #fff; text-decoration: none; font-weight: 800; font-size: 28px; padding: 10px 0; border-bottom: 1px solid #2E2157; }
.jtv-drawer button { align-self: flex-end; background: none; border: 1.5px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; width: 46px; height: 46px; font-size: 22px; cursor: pointer; }

/* Comments slider transition (home) */
.jtv-fade { transition: opacity .35s ease; }
.jtv-fade.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .jtv-fade { transition: none; } html { scroll-behavior: auto; } }

/* Preview chrome: not part of the design */
.preview-pill { position: fixed; left: 16px; bottom: 16px; z-index: 30; background: rgba(15, 8, 36, 0.92); color: #fff !important; font: 600 13px 'Instrument Sans', system-ui, sans-serif; padding: 10px 14px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(255,255,255,.25); }
body[data-page^="mobile"] .preview-pill { bottom: 96px; }
body[data-page="mobile-home"] .preview-pill, body[data-page="mobile-about"] .preview-pill { bottom: 16px; }