/* ==========================================================================
   SurrealCast shared stylesheet

   Loaded AFTER each page's inline <style> so the responsive and accessibility
   rules below intentionally win. Deliberately additive: it does not attempt to
   restyle existing components, only to add design tokens, accessibility
   defaults and mobile behaviour that were missing.
   ========================================================================== */

:root {
  /* Brand */
  --sc-purple: #7B2FF7;        /* fills, borders, gradients */
  --sc-purple-text: #A78BFA;   /* purple as TEXT — 6.88:1 on the card bg */
  --sc-gold: #D4A017;
  --sc-teal: #0D9488;
  --sc-brand-gradient: linear-gradient(135deg, #7B2FF7, #D4A017, #0D9488);

  /* Surfaces */
  --sc-bg: #080812;
  --sc-bg-page: #0a0a1f;
  --sc-bg-card: #0f0f2a;
  --sc-bg-nav: #0a0a1a;
  --sc-border: #1a1a4a;

  /* Text, in descending prominence. Every step clears WCAG AA (4.5:1). */
  --sc-text: #F0EDE8;          /* 16.03 */
  --sc-text-2: #A99FC7;        /*  7.55 */
  --sc-text-3: #9B8EC4;        /*  6.29 */
  --sc-text-4: #8B7EB0;        /*  5.09 — dimmest usable for body text */

  /* Status */
  --sc-success: #4caf50;
  --sc-warning: #D4A017;
  --sc-danger: #ff4444;

  /* The smallest comfortable text size on this palette */
  --sc-text-min: 0.7rem;
  --sc-touch: 44px;            /* minimum touch target */
}

/* --------------------------------------------------------------------------
   Accessibility: visible keyboard focus
   Most pages had no focus styling at all, so keyboard users saw nothing.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--sc-purple-text);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't show the ring for mouse users on elements that already have hover feedback */
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first tab stop, visually hidden until focused */
.sc-skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--sc-purple);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.15s ease-in-out;
}
.sc-skip-link:focus { top: 0; }

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

/* --------------------------------------------------------------------------
   Respect prefers-reduced-motion
   There are ~25 keyframe animations across the site and none of them honoured
   this. !important is warranted: it must beat inline and page-level styles.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Touch and pointer behaviour
   -------------------------------------------------------------------------- */
/* Hover effects only where hovering is actually possible, so states don't
   stick after a tap on touch devices. */
@media (hover: none) {
  a:hover, button:hover, .vcard:hover, .movie-card:hover, .creator-item:hover {
    transform: none !important;
    filter: none !important;
  }
}

/* Give small controls a real tap area without changing their visual size */
@media (pointer: coarse) {
  button, .btn, a[role="button"], input[type="submit"], input[type="button"], select {
    min-height: var(--sc-touch);
  }
  /* Tightly padded inline buttons in tables/toolbars: pad them out vertically */
  button, .btn {
    padding-top: max(0.5rem, 6px);
    padding-bottom: max(0.5rem, 6px);
  }
}

/* --------------------------------------------------------------------------
   Overflow safety
   -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; }
img, video, iframe, svg, canvas { max-width: 100%; }

/* Long titles, usernames and URLs shouldn't push the layout sideways */
p, li, h1, h2, h3, h4, td, th,
.title-text, .c-text, .c-name, .vtext h4, .vmeta {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Data tables scroll instead of overflowing on narrow screens */
table { max-width: 100%; }
.sc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   Shared nav / footer for the simple content pages
   -------------------------------------------------------------------------- */
.sc-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.sc-nav-links a {
  color: var(--sc-text-3);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.5rem 0;
}
.sc-nav-links a:hover { color: var(--sc-text); }
.sc-nav-links a.sc-cta {
  color: var(--sc-text);
  border: 1px solid rgba(123, 47, 247, 0.5);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

/* --------------------------------------------------------------------------
   Responsive: the content pages (about / help / privacy / terms / report /
   creators / 404) previously had no breakpoints at all and used a fixed
   800px container.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  nav { padding: 0 1rem !important; }
  .sc-nav-links { gap: 0.85rem; }
  .sc-nav-links a { font-size: 0.8rem; }

  .container { padding: 2rem 1.15rem !important; }

  h1 { font-size: 1.7rem !important; line-height: 1.25; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1.02rem !important; }

  footer { padding: 1.5rem 1rem !important; }
  footer a { display: inline-block; margin: 0.4rem 0.6rem !important; }

  /* Any rigid multi-column grid collapses rather than squeezing */
  .sc-grid-auto { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .sc-nav-links { gap: 0.6rem; }
  .sc-nav-links a { font-size: 0.75rem; }
  .sc-nav-links a.sc-cta { padding: 0.35rem 0.75rem; }
  .container { padding: 1.5rem 1rem !important; }
  h1 { font-size: 1.45rem !important; }
}

/* Nothing on the site should render text below the readable floor */
body { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }