/* includes/styles.css */

/* ------------------------------------------------ */
/* 1) COLOR PALETTE */
/* ------------------------------------------------ */

:root {
  --color-red: #e10600;            /* UFC‐style red */
  --color-black: #000000;          /* Pure black */
  --color-gray-light: #f5f5f5;     /* Light gray for backgrounds */
  --color-gray-dark: #4a4a4a;      /* Dark gray for text or accents */
  --color-white: #ffffff;          /* Pure white */
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --color-blue-dark: #0b0f2d;   /* very dark blue */
   --color-green: #4caf50;
  --color-blue-dark: #0b0f2d;
}

/* ------------------------------------------------ */
/* 2) GLOBAL RESET & BODY STYLES */
/* ------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-white);
  color: var(--color-gray-dark);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Utility container to center content */


/* ------------------------------------------------ */
/* 3) HEADER / NAVIGATION */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* 4) HERO SECTION */
/* ------------------------------------------------ */
.hero {
  background-color: var(--color-white);
  padding: 4rem 0;
  text-align: center;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.125rem;
  color: var(--color-gray-dark);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
}
.btn-primary:hover {
  background-color: #c80500; /* Slightly darker red */
}

/* ------------------------------------------------ */
/* 5) FEATURES SECTION */
/* ------------------------------------------------ */
.features {
  background-color: var(--color-gray-light);
  padding: 4rem 0;
}

.features h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-black);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.2s ease-in-out;
}

.feature-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  color: var(--color-red);
  margin-bottom: 1rem;
}

.feature-icon svg {
  width: 48px;
  height: 48px;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-black);
}

.feature-card p {
  font-size: 1rem;
  color: var(--color-gray-dark);
}

/* ------------------------------------------------ */
/* 6) FOOTER */
/* ------------------------------------------------ */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  margin-top: auto; /* Push footer to bottom */
  padding: 2rem 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-content p {
  font-size: 0.875rem;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--color-white);
  font-size: 0.875rem;
  transition: color 0.2s ease-in-out;
}
.footer-links a:hover {
  color: var(--color-red);
}

/* ------------------------------------------------ */
/* 7) RESPONSIVE BREAKPOINTS */
/* ------------------------------------------------ */

/* Tablet and up */
@media (min-width: 768px) {
  /* Show navigation normally, hide hamburger */
  .nav-toggle {
    display: none;
  }
  .site-nav {
    display: block !important;
  }

  /* Feature grid: three columns */
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
  /* Hide nav by default on mobile */
  .site-nav {
    display: none;
    width: 100%;
    background-color: var(--color-black);
    position: absolute;
    top: 100%;
    left: 0;
    padding: 1rem 0;
  }
  .site-nav.active {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: center;
  }
  .site-nav li {
    margin: 0.5rem 0;
  }
  .nav-toggle {
    display: block;
  }
  
  /* Make container padding slightly smaller */
  
}
.predictions {
  padding: 8rem 0;
  background-color: var(--color-white);
}

.fight-row {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-light);
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  /*margin-bottom: 1.5rem;*/
  background-color: var(--color-gray-light);
  padding-top: 2rem;
}

.fight-row.main {
  background-color: var(--color-white);
  border-color: var(--color-blue-dark);
}

.fighter-col {
  flex: 1;
  text-align: center;
}
.fighter-col.left  { padding-right: 1rem; }
.fighter-col.right { padding-left: 1rem; }

.name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-black);
}
.odds {
  font-size: 0.875rem;
  color: var(--color-gray-dark);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.vs {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-gray-dark);
  white-space: nowrap;
  margin: 0 0.5rem;
}

/* the center-origin bars */
.prob-bar {
  position: absolute;
  bottom: 1rem;
  height: 4px;
}
.prob-bar.left  { right: 50%; transform-origin: right center; }
.prob-bar.right { left: 50%;  transform-origin: left center; }

/* responsive: stack on mobile */
@media (max-width: 767px) {
  .fight-row {
    flex-direction: column;
    text-align: center;
  }
  .vs {
    margin: 0.5rem 0;
  }
  .prob-bar { bottom: 0.75rem; }
}
.prob-bar {
  position: absolute;
  bottom: 0.75rem;
  height: 4px;
  background-color: var(--color);
}
.prob-bar.left {
  right: 50%;
  transform-origin: right center;
  width: calc(var(--p) * 50%);
}
.prob-bar.right {
  left: 50%;
  transform-origin: left center;
  width: calc(var(--p) * 50%);
}

/* label sits just beyond the bar’s outer end */
.prob-text {
  position: absolute;
  bottom: 1.1rem;
  font-size: 0.75rem;
  color: var(--color-gray-dark);
  white-space: nowrap;
}
.prob-text.left {
  /* center minus the bar‐width, then nudge left a bit */
  left: calc(50% - var(--p) * 50% - 0.25rem);
  transform: translateX(-100%);
}
.prob-text.right {
  /* center plus the bar‐width, then nudge right a bit */
  left: calc(50% + var(--p) * 50% + 0.25rem);
  /* text flows to the right by default */
}
.probL {

}
.probR {

}
.best-ev{
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background-color: lightgray;
    border-radius: 0px 0px 8px 8px;
    border-bottom: black;
    border-bottom-style: solid;
    color: black;
    font-size: 13px;
    
}
.connector{
    margin-bottom: 1.5rem;
    position: relative;
}
.connectorCoverL {
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 200px;
    height: 40px;
    background-color: black;
    z-index: 1;
    color: #FFD700;
    font-size: 1.25rem;
    font-weight: 300;
    border-radius: 8px;
}
.connectorCoverR {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 200px;
    height: 40px;
    background-color: black;
    z-index: 1;
    color: #FFD700;
    font-size: 1.25rem;
    font-weight: 300;
    border-radius: 8px;
}
.connectorCoverL p{
    font-family: 'Inter', sans-serif;
    text-align: center;
    margin-top: 0.24rem;
}
.connectorCoverR p{
    font-family: 'Inter', sans-serif;
    text-align: center;
    margin-top: 0.24rem;
}
.connector .fight-breakdown{
    height:0px;
    opacity:0;
    transition: all 1s ease;
    border-style: solid;
    border-color:var(--color-gray-light);
    border-width:0.5px;
    border-top-color:black;
    max-height: 500px;
    overflow-y: scroll;
    overflow-x:hidden;
}
.connector.open .fight-breakdown{
    height:500px;
    opacity:1;
}

.stats-comparison table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  
}
.stats-comparison th,
.stats-comparison td {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-gray-dark);
  text-align: center;
}
.stats-comparison th:first-child,
.stats-comparison td:first-child {
  text-align: center;
}
.elo-bar-L,
.elo-bar-R {
  position: absolute;
  bottom: 0;            /* hug the bottom of the cell */
  height: 4px;
  background-color: var(--color);
}

.elo-bar-L {
  right: 50%;
  transform-origin: right center;
  width: calc(var(--p) * 50%);
}

.elo-bar-R {
  left: 50%;
  transform-origin: left center;
  width: calc(var(--p) * 50%);
}
.stats-comparison .stat-row {
  display: grid;
  grid-template-columns: 37% auto 37%;
  position: relative;       /* for the absolute bars */
  align-items: center;
  padding: 1.5rem 0;
border-top: solid;
border-width:0.5px;
text-align: center;
}

.stats-comparison .stat-cell,
.stats-comparison .stat-label {
  text-align: center;
  z-index: 100;               /* keep text above bars */
}

/* Re-use your prob-bar rules: */
.stats-comparison .prob-bar {
  position: absolute;
      bottom: 0.7em;
  height: 4px;
}
.stats-comparison .prob-bar.left {
  right: 50%;
  transform-origin: right center;
  width: calc(var(--p) * 50%);
  background-color: var(--color);
}
.stats-comparison .prob-bar.right {
  left: 50%;
  transform-origin: left center;
  width: calc(var(--p) * 50%);
  background-color: var(--color);
}
/* 1) Make the wrapper cover the tooltip’s area */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  /* give it room on the right equal to your tooltip width + gap */
    padding-right:10px;
    padding-left:10px;
}

/* 2) Basic styling for the text */
.stat-label {
  cursor: help;
}

/* 3) Style & position the tooltip */
.tooltip-wrapper .tooltip-content {
  position: absolute;
  z-index: 999; 
  top: 50%;
  left: 100%;               /* immediately to the right */
  transform: translateY(-50%);
    font-size:10px;
  width: 200px;             /* your desired tooltip width */
  background: var(--color-gray-light);;
  color: black;
  padding: 0.75rem;
  border-radius: 8px;
  
  /* hidden by default */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;

}

/* 4) Show tooltip when hovering anywhere over wrapper */
.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* 5) Link styling inside tooltip */
.tooltip-wrapper .tooltip-content a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

stat-head {
    
}

/* style & position your toggle button */
.toggle-breakdown {
  position: absolute;
    /* top: 0.5rem; */
    /* right: 0.5rem; */
    background: transparent;
    border: none;
    /* color: var(--color-white); */
    padding: 0.25rem 0.5rem;
    border-radius: 0px 8px 0px 0px;
    cursor: pointer;
    font-size: 0.875rem;
    z-index: 2;
    display: flex
;
    align-items: center;
    /* left: 48%; */
    font-size: 20px;
    top: 6rem;
}
.toggle-breakdown .icon {
  margin-left: 0.25rem;
  transition: transform 0.2s;
}
/* make sure connector is the positioning context */
.connector {
  position: relative;
}

/* breakdown closed by default */
.connector .fight-breakdown {
  position: relative;      /* so z-index takes effect */
  z-index: 1;              /* under the button */
  max-height: 0;
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 1s ease;
  border: 0.5px solid var(--color-gray-light);
  border-top-color: black;
}

/* breakdown open */
.connector.open .fight-breakdown {
  max-height: 500px;
  opacity: 1;
}

/* pin the toggle at the top‐right of the connector */


/* rotate the little arrow when open, if you like */
.other-fight {
  overflow: hidden;
  max-height: 1000px;               /* large enough to show full fight */
  opacity: 1;
  transition: all 1s;
}

.other-fight.hidden {
  max-height: 0;
  opacity: 0;
}
.connector {
  position: relative;    /* keep your absolute children positioned properly */
  overflow: visible;     /* let the predicted‐winner flags hang outside */
  margin-bottom:2rem;
}

/* === extra fights (expanded) === */
.other-fight {
  max-height: 1000px;                /* big enough for the full content */
  opacity: 1;
  transition: all 1s;
  /* no overflow:hidden here! */
}

/* === extra fights (collapsed) === */
.other-fight.hidden {
  max-height: 0;                     /* collapse to zero height */
  opacity: 0;                        /* fade it out */
  overflow: hidden;                  /* only when it’s collapsed */
  transition: all 1s;
}
html {
  scroll-behavior: smooth;
}
.rows-container {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* collapsed = only ~5 rows tall */
.rows-container.collapsed {
  max-height: 240px;   /* adjust if your row height differs */
}

/* expanded = show all rows */
.rows-container.expanded {
  max-height: 1000px;  /* or any value larger than your full table height */
}