/* ===================================================================
   IPO SME — shared theme layer
   -------------------------------------------------------------------
   Loaded last on every page, on top of each page's own <style> block.
   Two jobs:
     1. a living, on-brand background for the white areas
     2. the finishing touches that make the pages read as one product
   Everything here is CSS-only (no JS, no timers) and collapses to a
   static background under prefers-reduced-motion.
   =================================================================== */

:root {
  --brand-orange: #FF6B35;
  --brand-green: #22C55E;
  --bg-motion-duration: 34s;
}

/* ── 1. The moving background ───────────────────────────────────────
   Three soft colour fields drift behind the page, plus a faint market
   grid and a slow sheen. They live on <html> pseudo-elements so no page
   markup has to change, and the page background is made transparent so
   the layer shows through. */

html {
  background-color: #fff;
}

/* the page's own background colour still applies to sections/cards —
   only the flat body fill is dropped so the animation is visible */
body {
  background-color: transparent !important;
  position: relative;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}

/* Colour fields: brand orange and green, kept very light so tables and
   text keep their contrast. */
body::before {
  background:
    radial-gradient(38rem 38rem at 12% 18%, rgba(255, 107, 53, 0.13), transparent 62%),
    radial-gradient(34rem 34rem at 88% 12%, rgba(34, 197, 94, 0.12), transparent 60%),
    radial-gradient(42rem 42rem at 72% 88%, rgba(255, 107, 53, 0.09), transparent 64%),
    radial-gradient(30rem 30rem at 22% 82%, rgba(34, 197, 94, 0.08), transparent 60%);
  animation: ipoDrift var(--bg-motion-duration) ease-in-out infinite alternate;
}

/* A faint grid with a slow horizontal crawl — reads as a trading screen
   without competing with the data. */
body::after {
  background-image:
    linear-gradient(to right, rgba(22, 32, 27, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 27, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 78%);
  animation: ipoGrid 30s linear infinite;
  z-index: -3;
}

@keyframes ipoDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2.2%, 0) scale(1.02); }
}

@keyframes ipoGrid {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}

/* Content must sit above the background layer. The navbar is already
   position:fixed with its own z-index — don't touch its positioning. */
.page-wrapper {
  position: relative;
  z-index: 1;
}

/* Sections that need to stay opaque (dark footer, hero art, banded
   sections) keep their own background — the layer only shows where the
   page was plain white. */
.footer_component {
  position: relative;
  z-index: 1;
}

/* ── 2. Product polish ──────────────────────────────────────────────*/

/* Cards and tables lift off the moving background instead of blending
   into it. */
.table-wrapper,
.stat-card,
.doc-card,
.cal-event,
.panel,
.kv {
  background-color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.table-wrapper thead {
  background-color: rgba(247, 249, 248, 0.92);
}

/* Sticky table headers — long tables (156 IPOs) are unreadable without
   them once you scroll past the top. */
.table-wrapper th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* A hairline accent under the page header ties the pages together. */
.page-header {
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-green), transparent);
  opacity: 0.55;
}

/* Visible keyboard focus — the default outline was invisible against
   the light theme in several places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Tabular figures stop prices and percentages from jittering as the
   live numbers tick over. */
.stat-number,
.gain,
.loss,
td,
.kv dd {
  font-variant-numeric: tabular-nums;
}

/* The live-data stamp reads as a status pill rather than stray text. */
.ipo-stamp {
  padding: 0.3rem 0.85rem 0.3rem 0.7rem;
  border-radius: 100px;
  border: 1px solid rgba(22, 32, 27, 0.08);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 3. Accessibility and performance guards ────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}

/* Backdrop blur on many elements is expensive on low-end phones, and the
   grid is too fine to read at small sizes. */
@media (max-width: 768px) {
  body::after {
    display: none;
  }
  .table-wrapper,
  .stat-card,
  .doc-card,
  .cal-event,
  .panel,
  .kv,
  .ipo-stamp {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #fff;
  }
  .table-wrapper th {
    position: static;
  }
}

/* ── 4. Mobile layout guards ────────────────────────────────────────
   Several pages carry an abbreviated copy of the shared styles and are
   missing the responsive rules, which pushed the page wider than the
   viewport. Fixing it here covers every page at once. */

@media (max-width: 900px) {
  /* Wide tables scroll inside their own box instead of stretching the page. */
  .table-wrapper {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stats-grid,
  .movers-grid,
  .kv-grid,
  .docs-grid,
  .cal-grid-inner {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
}

@media (max-width: 768px) {
  /* The footer's two columns and its link list have to wrap. */
  .footer_top-wrapper,
  .footer_bottom-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .footer_top-left-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    min-width: 0;
  }
  .footer_link-list {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
  .padding-global {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* Stat cards must be allowed to shrink below their content width. */
  .stat-card,
  .doc-card,
  .cal-event,
  .panel {
    min-width: 0;
  }
  .stat-number {
    font-size: 2.1rem;
    overflow-wrap: anywhere;
  }
}

/* Nothing may push the document wider than the screen. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media print {
  body::before,
  body::after { display: none; }
}
