/* -------------------------------------------------
   Pairings page — 
   - Follows body.dark toggle
   - Mobile-first sizing with clamp()
   - All rules scoped under .pairings-page
--------------------------------------------------*/

/* Headings/body fonts only for this page */
.pairings-page h1, 
.pairings-page h2, 
.pairings-page h3 { font-family: 'Montserrat', sans-serif; }
.pairings-page, 
.pairings-page p, 
.pairings-page a, 
.pairings-page span { font-family: 'Poppins', serif; }

/* -------------------------
   Theme tokens (light / dark)
--------------------------*/

/* LIGHT (default) */
.pairings-page {
  --pr-bg: #f7f9fc;
  --pr-bg-soft: #eef2f8;
  --pr-card: #ffffff;
  --pr-text: #0f1115;
  --pr-text-dim: #3b4657;
  --pr-accent: #005fbf;
  --pr-accent-2: #1e7f3b;
  --pr-border: #dde3ee;
  --pr-danger: #ff6b6b;
  --pr-warn: #ffd166;
}

/* DARK (when body has .dark) */
.pairings-page.dark {
  --pr-bg: #0f1115;
  --pr-bg-soft: #151922;
  --pr-card: #121622;
  --pr-text: #e8ecf2;
  --pr-text-dim: #b7c0cf;
  --pr-accent: #7ccfff;
  --pr-accent-2: #a6e3a1;
  --pr-border: #1f2430;
  --pr-danger: #ff6b6b;
  --pr-warn: #ffd166;
}

/* Page background + base type */
.pairings-page { background: var(--pr-bg); color: var(--pr-text); }

/* Links use local accent */
.pairings-page a { color: var(--pr-accent); text-decoration: none; }
.pairings-page a:hover { text-decoration: underline; }

/* --------------------------------
   Layout + fluid type on headings
---------------------------------*/
.pairings-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(0.75rem, 1.5vw, 1rem);
}

.pairings-page section {
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.pairings-page h2 {
  font-size: clamp(1.1rem, 2vw + 0.6rem, 1.7rem);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

/* Grid: 2-up desktop, 1-up tablet/phone */
.pairings-page .card-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 2vw, 1rem);
}
@media (max-width: 900px) { .pairings-page .card-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 640px) { .pairings-page .card-grid { grid-template-columns: repeat(4, 1fr); } }

.pairings-page .card {
  grid-column: span 6;
  background: var(--pr-card);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
@media (max-width: 900px) { .pairings-page .card { grid-column: span 8; } }
@media (max-width: 640px) { .pairings-page .card { grid-column: span 4; } }

.pairings-page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: clamp(.75rem, 1.5vw, 1rem);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--pr-border);
}
.pairings-page .card-title { margin: 0; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem); }
.pairings-page .badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.pairings-page .badge {
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: clamp(.68rem, 1vw + .4rem, .78rem);
  border: 1px solid var(--pr-border);
  background: var(--pr-bg-soft);
  color: var(--pr-text-dim);
  white-space: nowrap;
}
.pairings-page .badge.accent { color: var(--pr-accent); border-color: currentColor; }
.pairings-page .badge.green  { color: var(--pr-accent-2); border-color: currentColor; }

.pairings-page .card-body {
  padding: clamp(.75rem, 1.6vw, 1rem);
  display: grid;
  gap: clamp(.6rem, 1.8vw, 1rem);
}

/* ----------------------------
   Standings table (responsive)
-----------------------------*/
.pairings-page .table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--pr-text);
  font-size: clamp(.82rem, 1.2vw + .2rem, .95rem);
  table-layout: auto;               /* allow natural column widths */
  margin: 0;
}

.pairings-page .table th,
.pairings-page .table td {
  border: 0;
  padding: clamp(.4rem, 1.2vw, .6rem);
  text-align: left;
  border-bottom: 1px solid var(--pr-border);
  /* important: no letter-by-letter breaks */
  word-break: normal;
  overflow-wrap: normal;
}

/* Leader row */
.pairings-page .table tr.leader td {
  color: var(--pr-accent);
  font-weight: 700;
}

/* Column alignment for ACTIVE standings (7 cols: #, Player, Rating, W, D, L, Pts) */
.pairings-page .active-standings th:nth-child(1),
.pairings-page .active-standings td:nth-child(1) { text-align: center; width: 2.6rem; }
.pairings-page .active-standings th:nth-child(2),
.pairings-page .active-standings td:nth-child(2) { text-align: left;  }
.pairings-page .active-standings th:nth-child(n+3),
.pairings-page .active-standings td:nth-child(n+3) { text-align: center; }

/* Player names may wrap; numbers never wrap */
.pairings-page .active-standings td:nth-child(2) { white-space: normal; word-break: break-word; }
.pairings-page .active-standings td:not(:nth-child(2)),
.pairings-page .active-standings th:not(:nth-child(2)) { white-space: nowrap; }

/* Header styling */
.pairings-page .table th {
  color: var(--pr-text-dim);
  font-weight: 600;
  background: color-mix(in srgb, var(--pr-card) 90%, transparent);
}

/* Column collapse for very small screens (ACTIVE standings only) */
@media (max-width: 480px) {
  /* Hide Rating */
  .pairings-page .active-standings th:nth-child(3),
  .pairings-page .active-standings td:nth-child(3) { display: none; }
}
@media (max-width: 360px) {
  /* Hide D and L; keep #, Player, W, Pts */
  .pairings-page .active-standings th:nth-child(5),
  .pairings-page .active-standings td:nth-child(5),
  .pairings-page .active-standings th:nth-child(6),
  .pairings-page .active-standings td:nth-child(6) { display: none; }
}

/* Round header */
.pairings-page .round-header {
  margin-top: .25rem;
  padding: .25rem .5rem;
  font-size: clamp(.85rem, 1vw + .4rem, 1rem);
  font-weight: 600;
  color: var(--pr-text-dim);
  border-left: 3px solid var(--pr-border);
}

/* ----------------------------
   Pairings rows + mobile tweaks
-----------------------------*/
.pairings-page .pairings-list { display: grid; gap: .5rem; }

.pairings-page .pairing-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
  padding: .5rem .6rem;
  border: 1px dashed var(--pr-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pr-card) 96%, transparent);
  font-size: clamp(.85rem, 1.2vw + .2rem, .95rem);
}
.pairings-page .pairing-vs { opacity: .7; }
.pairings-page .color-w { border-left: 4px solid #e6e6e6; padding-left: .5rem; }
.pairings-page .color-b { border-right: 4px solid #333; padding-right: .5rem; text-align: right; }

@media (max-width: 480px) {
  .pairings-page .pairing-row { padding: .4rem .5rem; }
  .pairings-page .color-w, 
  .pairings-page .color-b { 
    padding-left: .4rem; 
    padding-right: .4rem; 
    word-break: break-word; 
  }
}

/* ----------------------------
   Buttons & utilities
-----------------------------*/
.pairings-page .hidden { display: none !important; }

.pairings-page .btn-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.pairings-page .toggle-btn {
  cursor: pointer;
  padding: .5rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--pr-border);
  background: var(--pr-bg-soft);
  color: var(--pr-text);
  font-size: clamp(.85rem, 1vw + .35rem, .95rem);
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.pairings-page .toggle-btn:hover { background: rgba(255,255,255,0.06); }
.pairings-page .toggle-btn:active { transform: translateY(1px); }

/* Notices & footer */
.pairings-page .notice {
  padding: .75rem .9rem;
  background: color-mix(in srgb, var(--pr-card) 95%, transparent);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  color: var(--pr-text-dim);
}
.pairings-page .site-footer {
  padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--pr-border);
  color: var(--pr-text-dim);
  text-align: center;
}

/* ----------------------------
   Small-device polish
-----------------------------*/
@media (max-width: 720px) {
  .pairings-page .badge { line-height: 1; }
  .pairings-page .card { border-radius: 14px; }
  .pairings-page .card-header { gap: .6rem; }
}

@media (max-width: 380px) {
  .pairings-page .badge { font-size: .7rem; padding: .2rem .45rem; }
  .pairings-page .toggle-btn { padding: .45rem .6rem; border-radius: 8px; }
}


.pairings-page .nav-links a{
  text-decoration: none;
}