/* Page-wide stylesheet inspired by the table styles in NHL Classwork Data.html */
:root{
  --steel:#3aa8d1; /* brighter accent */
  --steel-dark:#2f97c2;
  --steel-darker:#153f52; /* softened dark header */
  --bg:#ffffff;
  --row-alt:#f1fbff; /* slightly brighter row background */
  --text-dark:#10282f; /* stronger contrast */
  --muted:#0b74ff;
  /* performance color variables (bright pastels) */
  --perf-top:#bff7c4;
  --perf-mid:#fff59b;
  --perf-low:#ffb3b3;
  /* matching text colors for performance tiers */
  --perf-top-text:#1b9a3a;
  --perf-mid-text:#b48b00;
  --perf-low-text:#c93b3b;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text-dark);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.container{
  max-width:820px;
  margin:18px auto;
  padding:0 12px;
}

.site-header{
  background: linear-gradient(180deg, var(--steel-darker), var(--steel-dark));
  color:#fff;
  border: 1px solid rgba(15,40,55,0.08);
  border-radius:8px;
  overflow:hidden;
  margin:18px auto 8px;
}

.site-header .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 16px;
}

.site-header h1{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.6px;
}

.site-header .lead{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,0.9);
}

/* Intro paragraph (between title and first table) */
.intro{
  margin:14px auto 22px;
  color:var(--text-dark);
  font-size:15px;
  line-height:1.6;
  text-align:center;
  max-width:760px;
}

/* Table styles (moved/adapted) */
table{
  border-collapse: collapse;
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(15,40,55,0.08);
  margin: 12px 0;
  background: var(--bg);
  color: var(--text-dark);
  border-radius: 8px;
  overflow: hidden;
}

thead th{
  background: var(--steel-darker);
  color: #ffffff;
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .6px;
}

/* Bright styling for FGM, FGA, FG% headers */
main.container > table:first-of-type thead th:nth-child(3),
main.container > table:first-of-type thead th:nth-child(4),
main.container > table:first-of-type thead th:nth-child(5) {
  color: #f4c20b;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(231, 184, 14, 0.829);
}

tbody td{
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-dark);
  border-bottom: 1px solid rgba(15,40,55,0.04);
}


tr:nth-child(even) td{ background: var(--row-alt); }
tr:nth-child(odd) td{ background: var(--bg); }

/* Subtle row hover effect */
tbody tr:hover td {
  background-color: rgba(17, 25, 27, 0.08) !important;
  transition: background-color 0.15s ease;
}

/* Core column (Name) highlighting - distinct background color */
main.container > table:first-of-type th:nth-child(2),
main.container > table:first-of-type td:nth-child(2) {
  background-color: #e8f4f8 !important; /* Light blue background for Name column */
  font-weight: 600;
}

/* jQuery row hover effects */
.row-highlight td {
  background-color: #fff9c4 !important; /* Yellow highlight on row hover */
}

.name-spotlight {
  background-color: #ffeb3b !important; /* Bright yellow spotlight on Name cell */
  font-weight: 700 !important;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

a{ color: var(--steel-dark); font-weight:600; text-decoration:none }

/* spacing between player name link and team */
tbody td:nth-child(2) a { padding-right: 3px; color: inherit; text-decoration:none }

/* responsive */
@media (max-width:520px){
  table{ font-size:14px }
  tbody td{ padding:8px }
  thead th{ padding:10px }
  .site-header h1{ font-size:18px }
}

/* Glossary styling */
.glossary{
  margin-top:28px;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(240,249,255,0.6), rgba(255,255,255,0.6));
  border:1px solid rgba(15,40,55,0.06);
  border-radius:8px;
}
.glossary h2{ margin-top:0; color:var(--steel-darker); }
.glossary dl{
  margin:0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Glossary item wrapper */
.glossary-item {
  border: 1px solid rgba(15,40,55,0.08);
  border-radius: 6px;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glossary-item:hover {
  box-shadow: 0 2px 8px rgba(15,40,55,0.12);
}

/* Glossary terms as hoverable elements */
.glossary dt {
  display: block;
  font-weight: 700;
  cursor: pointer;
  color: var(--steel-dark);
  padding: 10px 14px;
  margin: 0;
  background: linear-gradient(90deg, rgba(58, 168, 209, 0.08), transparent);
  transition: background-color 0.3s ease;
  user-select: none;
}

.glossary dt:hover {
  background: linear-gradient(90deg, rgba(58, 168, 209, 0.15), transparent);
}

/* Glossary definitions - slide down effect */
.glossary dd {
  display: none;
  margin: 0;
  padding: 12px 14px;
  color: var(--text-dark);
  font-weight: 400;
  background: rgba(248, 252, 255, 0.8);
  border-top: 1px solid rgba(15,40,55,0.06);
  line-height: 1.6;
}

/* Player spotlight styling for JPEGs below tables */
.player-spotlight{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:14px 0 22px;
}
.player-spotlight img{
  max-width:320px;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(15,40,55,0.06);
  box-shadow:0 8px 20px rgba(15,40,55,0.08);
}
.player-spotlight figcaption{
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

@media (max-width:520px){
  .player-spotlight img{ max-width:240px }
}

.player-spotlight figcaption{ font-size:14px }

/* Overrides to ensure performance gradients use the brighter variables */
/* Set player-name text color to correspond to performance tier in the first table */
main.container > table:first-of-type tbody tr:nth-child(1) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(2) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(3) td:nth-child(2) {
  color: var(--perf-top-text);
}

main.container > table:first-of-type tbody tr:nth-child(4) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(5) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(6) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(7) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(8) td:nth-child(2) {
  color: var(--perf-mid-text);
}

main.container > table:first-of-type tbody tr:nth-child(9) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(10) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(11) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(12) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(13) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(14) td:nth-child(2),
main.container > table:first-of-type tbody tr:nth-child(15) td:nth-child(2) {
  color: var(--perf-low-text);
}



/* Vertical ranking gradient line between RK and Name in the first table */
/* Fix the width of the rank column so the line can be positioned reliably */
main.container > table:first-of-type th:first-child,
main.container > table:first-of-type td:first-child{
  width:64px;
  text-align:center;
}

/* Add a thin vertical gradient bar that spans the tbody height */
main.container > table:first-of-type tbody{
  position:relative;
}

main.container > table:first-of-type tbody::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  /* place the line just to the right of the rank column */
  left: calc(64px + 6px);
  width:4px;
  border-radius:2px;
  background: linear-gradient(to bottom, var(--perf-top-text) 0%, var(--perf-mid-text) 50%, var(--perf-low-text) 100%);
  pointer-events:none;
  z-index:3;
}

/* Hide the vertical line on small screens to avoid overlap */
@media (max-width:520px){
  main.container > table:first-of-type tbody::before{ display:none; }
}

/* Player info box styles */
#player-box{
  border:1px solid rgba(15,40,55,0.06);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  padding:12px 14px;
  border-radius:8px;
  margin:10px 0 16px;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
}
#player-box .player-name{ font-weight:700; color:var(--steel-darker); margin:0 }
#player-box .player-stats{ margin:0; color:var(--text-dark); font-size:14px }
#player-box .placeholder{ margin:0; color:rgba(15,40,55,0.5) }

@media (max-width:520px){
  #player-box{ padding:10px; font-size:14px }
}

/* Table header positioning for tooltips */
table thead th{ position: relative; }