/* static/css/custom.css */

/* --------------------------------------------------
   GLOBAL TYPOGRAPHY SCALE (100% -> 80%)
-------------------------------------------------- */
html { font-size: 75%; }

/* --------------------------------------------------
   HEADING TYPOGRAPHY KNOBS (h1 -> h6)
   (kept to Pico defaults; uncomment + tweak as needed)
-------------------------------------------------- */
h1 { /* font-size: 2.5rem; */ }
h2 {  
  font-size: 1.7rem; 
  margin-top: 4.0rem;
  margin-left: 0.15rem;
  margin-bottom: 1.2rem;
}
h3 { 
  font-size: 1.4rem; 
  margin-top: 0.45rem;
  margin-left: 0.4rem;
  margin-bottom: 0.05rem;
}
h4 { /* font-size: 1.25rem; */ }
h5 { /* font-size: 1.125rem; */ 
margin-top: 0.45rem;
margin-bottom: 0.05rem;
}
h6 { /* font-size: 1rem; */ }
/* Headings: force a single consistent color */
h1, h2, h3, h4, h5, h6 {
  color: rgb(66, 71, 81);
}

/* If any headings contain links, keep them the same color too */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: rgb(66, 71, 81);
}

/* Prevent hover/visited from turning them into Pico "primary" */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  color: rgb(66, 71, 81);
}
/* --------------------------------------------------
   HARD STOP HORIZONTAL SCROLL
-------------------------------------------------- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

img, svg, canvas, video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------
   CONTAINER RHYTHM
-------------------------------------------------- */
main.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

section { margin-top: 1.2rem; }

/* --------------------------------------------------
   BRAND HEADER (logo + subtext)
-------------------------------------------------- */
.brand-header {
  text-align: center;
  margin: 0 0 1.0rem 0;
  padding: 0;
}

.brand-header a {
  display: inline-block;
  line-height: 0; /* removes baseline gap below image */
  margin: 0;
  padding: 0;
}

.site-logo {
  width: 315px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: 1.7rem;
  margin-bottom: 0.8rem;
}

/* Subtext */
.brand-header h6,
.brand-subtext {
  display: block;
  width: 300px;
  max-width: 90%;
  margin: 0 auto;

  color: rgb(45, 49, 56);
  font-size: 14.4px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.288px;
  text-align: center;
  margin-bottom: 4.5rem;

  /* Keep your "logo transparent pixels" visual gap fix WITHOUT clipping */
  margin-top: -0.55rem; /* pulls subtext upward to cancel PNG bottom transparency */
}

@media (max-width: 520px) {
  main.container { padding: 1.4rem 1.0rem; }
  .brand-header { margin-bottom: 0.9rem; }

  .site-logo { max-width: 92%; }
  .brand-header h6,
  .brand-subtext {
    max-width: 92%;
    margin-top: -0.60rem;
  }
}

@media (max-width: 380px) {
  .site-logo { width: 280px; max-width: 95%; }
  .brand-header h6,
  .brand-subtext {
    width: 280px;
    max-width: 95%;
    margin-top: -0.60rem;
  }
}

/* --------------------------------------------------
   TABLE DENSITY
-------------------------------------------------- */
table { font-size: 1em; 
}

table thead th {
  font-size: 0.10em;
  font-weight: 600;
  white-space: nowrap; /* prevent header character-stacking */
  padding-top: 0.4rem;

}

table th,
table td {
  padding: 0.38rem 0.55rem;
  line-height: 1.10;
  vertical-align: middle;
}

/* ---------------------------------------------
   Chart cell alignment fix
--------------------------------------------- */

/* Apply to the <td> that holds charts */
.td-chart {
  text-align: right;
  padding-right: 0.05rem;
  white-space: nowrap;
}

/* Remove trailing canvas/svg gap */
.td-chart canvas,
.td-chart svg {
  display: inline-block;
  margin-right: 0 !important;
}

/* Sparkline/Peity span spacing fix */
.td-chart span {
  margin-right: 0 !important;
}

td.td-align-right {
  text-align: right;
  white-space: nowrap; /* keep 24803.25 / 0.18% on one line */
  font-variant-numeric: tabular-nums; /* optional: nicer column alignment */
}

/* First column symbol cell (no need for <strong>) */
td.td-symbol {
  padding-left: 0.17rem;
  text-align: left;
  white-space: nowrap;
  font-weight: 700;      /* makes plain text look like your old <strong> */
  letter-spacing: 0.05em; /* optional: slight ticker crispness */
}

/* If you also have numbers in that cell, keep them right as well */
td.td-chart > * {
  margin-left: 0.4rem; /* optional spacing if multiple items */
}
/* --------------------------------------------------
   GRID SYSTEM
-------------------------------------------------- */
.grid-2col,
.grid-3col,
.grid-4col,
.grid-5col,
.grid-6col {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

.grid-2col { grid-template-columns: repeat(2, 1fr); }
.grid-3col { grid-template-columns: repeat(3, 1fr); }
.grid-4col { grid-template-columns: repeat(4, 1fr); }
.grid-5col { grid-template-columns: repeat(5, 1fr); }
.grid-6col { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
  .grid-6col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid-3col,
  .grid-4col,
  .grid-5col,
  .grid-6col { grid-template-columns: repeat(2, 1fr); }
}

/* Cards */
.grid-2col > article,
.grid-3col > article,
.grid-4col > article,
.grid-5col > article,
.grid-6col > article {
  padding: 0.75rem 0.75rem 0.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  min-width: 0;

  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------
   A/B TOGGLE: FUTURES | FOREX JOIN
   You asked for OPPOSITE (NON-SEAMLESS): keep the normal gap + normal radii.
   So: REMOVE/DO NOT APPLY the "seamless join" rules entirely.
-------------------------------------------------- */
/* (intentionally empty) */

/* --------------------------------------------------
   MOBILE TABLE BEHAVIOR FIX (prevents vertical-letter wrap)
-------------------------------------------------- */
@media (max-width: 520px) {
  /* Let the browser size columns naturally (avoid "squished" layout) */
  .grid-2col table,
  .grid-3col table,
  .grid-4col table,
  .grid-5col table,
  .grid-6col table {
    table-layout: auto;
  }

  /* DO NOT allow random character wrapping */
  th, td {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* First column can wrap normally (at separators), others stay compact */
  td:first-child, th:first-child {
    white-space: normal;
  }

  td:not(:first-child), th:not(:first-child) {
    white-space: nowrap;
  }

  /* If symbol gets too long, clip instead of stacking */
  td:first-child strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .grid-2col,
  .grid-3col,
  .grid-4col,
  .grid-5col,
  .grid-6col {
    row-gap: 0.75rem;
  }

  .grid-2col > article,
  .grid-3col > article,
  .grid-4col > article,
  .grid-5col > article,
  .grid-6col > article {
    padding: 0.6rem 0.6rem 0.2rem;
  }

  table th,
  table td {
    padding: 0.30rem 0.40rem;
  }
}

@media (max-width: 380px) {
  table th,
  table td {
    padding: 0.26rem 0.32rem;
  }
}