body {
  margin: 0;
  background-color: #03273f;
  font-family: Arial, sans-serif;
  color: white;
}

img.logo {
  display: block;           /* makes the image a block element */
  margin: 40px auto 0;      /* auto left/right margins center it */
  width: 30vw;
  max-width: 400px;
  height: auto;
}

/* Standings block */
.table-container {
  margin-top: 40px;
  width: 95%;
  max-width: 900px; /* smaller cap */
  margin-left: auto;
  margin-right: auto; /* centers it */
}

table {
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffff10;
}

th, td {
  border: 1px solid #ffffff30;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

th {
  background-color: #ffffff20;
}

caption {
  margin-bottom: 10px;
  font-size: 1.5em;
  font-weight: bold;
  color: #ffffff;
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.team-cell img {
  height: 20px;
  width: auto;
}

/* Hover effect */
tbody tr:hover {
  background-color: #ffffff30;
  cursor: default;
}

/* Qualification highlights */
.leader {
  background-color: #1e90ff50;
  font-weight: bold;
}

.champions {
  background-color: #00ff0050; /* CL group stage (1st) */
  font-weight: bold;
}

.cl-qual {
  background-color: #00ffff50; /* CL 3rd qualifying (2nd) */
  font-weight: bold;
}

.europa {
  background-color: #ffd70050; /* Europa 2nd qualifying (3rd) */
  font-weight: bold;
}

.conference {
  background-color: #ffa50050; /* Conference qualifying (4th) */
  font-weight: bold;
}

/* Relegation playoff styling */
.legend-box.relegation-playoff { background-color: #ff9f50; border: 1px solid #ffffff50; }

/* Row highlight for relegation playoff (16th) */
.relegation-playoff {
  background-color: rgba(255,159,80,0.3); /* soft orange */
  font-weight: 600;
}

/* ensure existing direct relegation styling remains */
.relegation {
  background-color: #ff000050; /* keep as-is for 17–18 */
}

.relegation {
  background-color: #ff000050; /* Relegation (17–18) */
}

/* Legend */
.legend {
  margin-top: 20px;
  text-align: left;
  color: #fff;
  font-size: 0.9em;
}

.legend p {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ffffff50;
}

.legend-box.champions { background-color: #00ff0050; }
.legend-box.cl-qual   { background-color: #00ffff50; }
.legend-box.europa    { background-color: #ffd70050; }
.legend-box.conference{ background-color: #ffa50050; }
.legend-box.relegation{ background-color: #ff000050; }

/* Bottom section layout for side-by-side tables */
.bottom-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 95%;
  max-width: 1200px;
  margin-top: 30px;
}

.table-container,
.bottom-section {
  margin-left: auto;
  margin-right: auto;
}

.results-block, .next-block {
  flex: 1; /* each takes equal width */
}


/* Latest results block */
.results-block h2 {
  text-align: left;
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1.3em;
}

.results {
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffff10;
}

.results th, .results td {
  border: 1px solid #ffffff30;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

.results th {
  background-color: #ffffff20;
}

.results .team-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.results .team-cell img {
  height: 18px;
  width: auto;
}

/* Next round matches block */
.next-block h2 {
  text-align: left;
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1.3em;
}

.next {
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffff10;
}

.next th, .next td {
  border: 1px solid #ffffff30;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap; /* keeps channel names tidy */
}

.next th {
  background-color: #ffffff20;
}

.next .team-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.next .team-cell img {
  height: 18px;
  width: auto;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  th, td {
    padding: 6px;
    font-size: 0.85em;
  }
  
  img.logo {
    display: block;
    margin: 40px auto 0;
    width: 30vw;
    max-width: 400px;
    height: auto;
  }

  .bottom-section {
    flex-direction: column;
  }
} /* ← Close the media query here */

/* Now define footer styles outside the media query */
.site-footer {
  display: block;
  box-sizing: border-box;
  width: 95%;
  max-width: 300px;
  margin: 40px auto 40px;
  padding: 10px 10px 10px 10px;  /* ← Changed from 20px to 10px */
  background-color: #021a2b;
  color: #ffffffd0;
  border-top: 1px solid #ffffff30;
  text-align: center;
  clear: both;
}

.site-footer-inner {
  display: block;
  max-width: 300px;  /* ← Add this to constrain the inner content */
  margin: 0 auto;
  text-align: center;
}

.site-footer a {
  color: #1e90ff;
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover { 
  text-decoration: underline; 
}


/* If parent uses flexbox and forces alignment, this ensures footer is centered */
.site-footer[style] {}

/* Last resort: increase specificity to override page-level alignment */
body .site-footer { margin-left: auto; margin-right: auto; }