/* Buttons */
.ffp-btn-primary .wp-block-button__link{
  background:#F26A00;
  color:#fff;
  font-weight:700;
  border-radius:10px;
  padding:.8rem 1.2rem;
}
.ffp-btn-accent .wp-block-button__link{
  background:#000;
  color:#fff;
  font-weight:700;
  border-radius:10px;
  padding:.8rem 1.2rem;
}



/* Tabs */
.rank-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  background:#141414; border-radius:12px; padding:10px; margin:10px 0 16px; }
.rank-tab { padding:10px 14px; border-radius:999px; background:#fff; color:#141414;
  font-weight:700; text-decoration:none; transition:all .08s ease; }
.rank-tab:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.25); }
.rank-tab.active { background:#FF7A1C; color:#101010; }

/* Sections */
.rankings-section { display:none; }
.rankings-section.active { display:block; }

/* Tables */
.compare-table { width:100%; border-collapse:collapse; background:#181818; color:#fff; border-radius:12px; overflow:hidden; margin-top:12px; }
.compare-table thead tr { background:linear-gradient(0deg,#FF7A1C,#F26A00); color:#000; font-weight:800; }
.compare-table th, .compare-table td { text-align:center; padding:12px 8px; }
.compare-table tbody tr:nth-child(even) td { background:#2a2a2a; }
.compare-table tbody tr:hover td { background:rgba(242,106,0,.25); }

/* Subscript style for teams/opponents */
.team-sub { font-size:0.8em; color:#ccc; display:block; margin-top:2px; }


/* Keep the same look on all screens */
.compare-table {
  width: 100%;
  table-layout: fixed;          /* preserves column proportions */
  border-collapse: collapse;
  background: #181818;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-size: clamp(14px, 1.6vw, 16px);  /* fluid size: mobile → desktop */
}

.compare-table thead tr {
  background: linear-gradient(0deg, #FF7A1C, #F26A00);
  color: #000;
  font-weight: 800;
}

.compare-table th,
.compare-table td {
  text-align: center;
  padding: clamp(10px, 1.8vw, 12px) clamp(6px, 1.2vw, 8px); /* fluid padding */
  line-height: 1.2;                  /* tight for desktop look on mobile */
  white-space: normal;               /* allow natural wrapping if needed */
  word-break: keep-all;
}

/* Column proportions: same feel on mobile & desktop */
.compare-table th:nth-child(1),
.compare-table td:nth-child(1) { width: 18%; }   /* Rank */
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) { width: 82%; }   /* Player (with subscript) */

/* Zebra + hover (unchanged) */
.compare-table tbody tr:nth-child(even) td { background: #2a2a2a; }
.compare-table tbody tr:hover td { background: rgba(242,106,0,.25); }

/* Subscript line under player (keeps the same visual hierarchy) */
.team-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;                 /* readable on mobile */
  color: #bbb;
}

/* Tabs: same pill look on mobile, just let them scroll if needed */
.rank-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;                  /* keep pills on one line */
  overflow-x: auto;                   /* but allow swipe if it overflows */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  justify-content: center;            /* same centered look */
  background: #141414;
  border-radius: 12px;
  padding: 10px;
}

.rank-tab {
  flex: 0 0 auto;                     /* keep pill shape, no squish */
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #141414;
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background .08s;
}

.rank-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.rank-tab.active { background: #FF7A1C; color: #101010; }

/* Optional: keep the whole hub comfortably narrow on huge screens */
.wp-block-group.has-background {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}




/* =========================================================
   MAKE MOBILE LOOK IDENTICAL TO DESKTOP (HOMEPAGE)
   - Keeps desktop sizes/layout on phones
   - Allows gentle horizontal pan instead of stacking/reflow
   - Includes hero overlay so title sits on top of the image
   ========================================================= */

/* ---- HERO overlay + layering (works for Cover or Image-in-Group) ---- */
.home-hero { position: relative; overflow: hidden; }
.home-hero .home-hero-bg img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 0 !important;
}
.home-hero .wp-block-cover__image-background {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.home-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 1; pointer-events: none;
}
.home-hero .home-hero-content,
.home-hero .wp-block-cover__inner-container {
  position: relative; z-index: 2;
  display: grid; place-items: center; text-align: center;
  margin: 0 auto; padding: 24px; max-width: 960px;
}
.home-hero h1, .home-hero h2, .home-hero h3, .home-hero p, .home-hero .wp-block-heading {
  font-stretch: normal !important;
  font-variation-settings: "wdth" 100 !important;
  letter-spacing: normal !important; word-spacing: normal !important;
  transform: none !important;
}


/* ==========================================
   HOMEPAGE HERO — DESKTOP LOOK ON MOBILE
   ========================================== */
.home-hero { 
  position: relative; 
  overflow: hidden; 
}

/* Image as background (no stretch) */
.home-hero .home-hero-bg img,
.home-hero .wp-block-cover__image-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Dark overlay for readability */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
}

/* Content on top of background */
.home-hero .home-hero-content,
.home-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  padding: 24px 16px;
  max-width: 960px;
}

/* Reset stretched fonts */
.home-hero h1, .home-hero h2, .home-hero h3, 
.home-hero p {
  font-stretch: normal !important;
  font-variation-settings: "wdth" 100 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  transform: none !important;
}

/* ------------------------
   MOBILE OPTIMIZATION
   ------------------------ */
@media (max-width: 768px) {
  /* Hero height adapts to content */
  .home-hero { min-height: 60vh; }

  /* Constrain content so it fits narrow screens */
  .home-hero .home-hero-content,
  .home-hero .wp-block-cover__inner-container {
    max-width: 90%;   /* keep it narrow */
    padding: 20px;
  }

  /* Headings scale down fluidly */
  .home-hero h1 { font-size: clamp(22px, 6vw, 36px); line-height: 1.2; margin-bottom: 10px; }
  .home-hero h2, .home-hero h3 { font-size: clamp(16px, 5vw, 20px); line-height: 1.25; }
  .home-hero p { font-size: clamp(14px, 4.5vw, 18px); line-height: 1.35; }

  /* Buttons: full-width stack */
  .home-hero .wp-block-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .home-hero .wp-block-button__link {
    width: 100%;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
  }

  /* Columns stack vertically */
  body.home .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 16px;
  }
  body.home .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Images scale down naturally */
  body.home .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }

  /* Kill parallax/fixed background on mobile */
  .home-hero.has-parallax,
  .home-hero .wp-block-cover.has-parallax {
    background-attachment: scroll !important;
  }
}


/* Fix body text in posts */
.entry-content p {
  text-transform: none !important;
}

/* Hide social icons in the footer only */
.site-footer .social-icons,
.site-footer .wp-block-social-links,
.site-footer .kadence-socials {
  display: none !important;
}


/* Make featured images display fully without cropping */
.entry-content img.wp-post-image,
.post-thumbnail img,
.featured-image img {
  width: 100%;
  height: auto;
  object-fit: contain !important; /* shows whole image, no crop */
}

/* If using cover-style featured image areas */
.featured-image,
.post-thumbnail {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}




/* Standings – wrapper */
.standings-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:14px; background:#181818; padding:0; margin-top:10px;
}

/* Table base */
.standings-table{
  width:100%; border-collapse:separate; border-spacing:0;
  color:#fff; background:#181818; min-width:820px;
  font-size:16px;
}

/* Header */
.standings-table thead tr{
  background:linear-gradient(0deg,#FF7A1C,#F26A00); color:#000;
}
.standings-table th{
  padding:12px 10px; text-align:center; font-weight:800; position:sticky; top:0; z-index:2;
}

/* Body cells */
.standings-table td{
  padding:12px 10px; text-align:center; border-bottom:1px solid #2a2a2a;
}

/* Sticky first column */
.standings-table th:first-child,
.standings-table td:first-child{
  position:sticky; left:0; z-index:1; background:#1c1c1c;
}

/* Zebra rows */
.standings-table tbody tr:nth-child(even) td{ background:#202020; }
.standings-table tbody tr:hover td{ background:rgba(242,106,0,.18); }

/* Team cell with logo */
.standings-table td.team{
  text-align:left; display:flex; align-items:center; gap:10px;
}
.standings-table td.team img{
  width:28px; height:28px; object-fit:cover; border-radius:6px; background:#111;
}
.badge.seed{
  margin-left:auto; background:#FF7A1C; color:#101010;
  font-weight:800; padding:2px 8px; border-radius:999px; font-size:.8em;
}

/* Diff coloring */
.diff.pos{ color:#4cd964; }  /* green */
.diff.neg{ color:#ff5e57; }  /* red */

/* Streak coloring */
.streak.win{ color:#4cd964; font-weight:700; }
.streak.loss{ color:#ff5e57; font-weight:700; }

/* Form dots */
.form .dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin:0 2px; background:#555;
}
.form .dot.w{ background:#4cd964; }  /* win */
.form .dot.l{ background:#ff5e57; }  /* loss */
.form .dot.n{ background:#333; }     /* not played */

/* Column widths (tweak as needed) */
.standings-table th:nth-child(1), .standings-table td:nth-child(1){ width:40px; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2){ width:280px; }
.standings-table th:nth-child(3), .standings-table td:nth-child(3){ width:90px; }
.standings-table th:nth-child(4), .standings-table td:nth-child(4){ width:80px; }
.standings-table th:nth-child(5), .standings-table td:nth-child(5){ width:90px; }
.standings-table th:nth-child(6), .standings-table td:nth-child(6){ width:90px; }
.standings-table th:nth-child(7), .standings-table td:nth-child(7){ width:80px; }
.standings-table th:nth-child(8), .standings-table td:nth-child(8){ width:90px; }
.standings-table th:nth-child(9), .standings-table td:nth-child(9){ width:110px; }
.standings-table th:nth-child(10), .standings-table td:nth-child(10){ width:80px; }
.standings-table th:nth-child(11), .standings-table td:nth-child(11){ width:80px; }

/* Header/legend styling */
.standings-legend{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  color:#cfcfcf; font-size:14px; margin:6px 0 8px;
}
.standings-note{ color:#9b9b9b; font-size:14px; text-align:center; margin-top:10px; }

/* Mobile type sizing */
@media (max-width:768px){
  .standings-table{ font-size:15px; min-width:720px; }
  .standings-legend{ font-size:13px; }
}


/* ===== Positional Rankings: Global Styles ===== */
.rankings-page{
  --orange:#FF7A1C; --bg:#101010; --row:#181818; --row-alt:#222; --text:#fff;
  background:var(--bg); color:var(--text); border-radius:16px; padding:18px; margin:0 auto;
  overflow:visible !important; max-width:1200px;
}

/* If a theme/container clips overflow, unclip it here */
.rankings-page .wp-block-group,
.rankings-page .entry-content,
.rankings-page [class*="container"],
.rankings-page [class*="inner-container"]{ overflow:visible !important; }

/* Header + “Last Updated” pill */
.rp-header{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.rp-header h2{margin:0;text-align:center;font-weight:800;line-height:1.2;font-size:clamp(22px,6vw,40px);color:#fff}
.rp-updated{background:rgba(255,122,28,.15);color:var(--orange);border:1px solid var(--orange);
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}

/* Scrollable viewport */
.compare-wrap{width:100%;display:block;overflow-x:auto !important;overflow-y:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-radius:12px}

/* Table */
.compare-table{width:max-content; /* key: wider than screen so it can scroll */
  border-collapse:collapse; table-layout:auto; background:var(--row); color:#fff}

/* Sticky header row */
.compare-table thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(0deg,var(--orange),#F26A00); color:#000;
  font-weight:800; text-transform:uppercase; padding:12px 8px;
  border-bottom:2px solid #000; line-height:1.1; font-size:14px; white-space:nowrap;
}

/* Cells */
.compare-table td{padding:10px 8px; border-bottom:1px solid #2e2e2e;
  text-align:center; line-height:1.25; white-space:nowrap}
.compare-table tbody tr:nth-child(even) td{background:var(--row-alt)}
.compare-table th:first-child,.compare-table td:first-child{color:var(--orange);font-weight:800}

/* Compact sizes for tablets/phones */
@media (max-width:1024px){
  .compare-table{min-width:900px;}     /* ensures horizontal scrolling */
  .compare-table th,.compare-table td{padding:8px 6px; font-size:13px;}
}
@media (max-width:480px){
  .compare-table{min-width:760px;}
  .compare-table th,.compare-table td{padding:6px 4px; font-size:12px;}
}

/* --- Rank column: black text instead of orange --- */
.compare-table th:first-child,
.compare-table td:first-child {
  color: #000 !important;  /* black text */
  font-weight: bold;
}

/* --- Rank header text (title only) black --- */
.compare-table th:first-child {
  color: #000 !important;   /* black font for "Rank" */
  font-weight: bold;
}

/* --- Rank numbers (cells) orange --- */
.compare-table td:first-child {
  color: #FF7A1C !important;  /* orange numbers */
  font-weight: bold;
  text-align: center;         /* keep numbers centered */
}

/* --- Center rankings table on page --- */
.rankings-page .compare-wrap {
  display: flex;
  justify-content: center;  /* centers the table horizontally */
  width: 100%;
}

.rankings-page .compare-table {
  margin: 0 auto;           /* centers table inside wrapper */
}


/* Move entire rankings page to the very top */
body.page .site-main,
body.page .entry-content,
.rankings-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If your theme adds a wrapper/container with padding */
body.page .content-area,
body.page #primary,
body.page #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Left-align only the table on mobile */
@media (max-width: 768px) {
  .rankings-page .compare-wrap {
    justify-content: flex-start !important; /* push table to left */
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .rankings-page .compare-table {
    margin-left: 0 !important;  /* stick table to left */
    margin-right: auto !important;
  }
}