/* ================================
   LAYOUT — HEADER
================================ */

.header {
  background: #b30000;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* purely decorative now it's centered/overlapping */
}

.badge {
  width: 42px;
  height: auto;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
}

.club-name {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .club-name {
    font-size: 16px;
  }
}

/* HOMEPAGE NEWS GRID — MATCH NEWS PAGE */
.home-news-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile = 1 column */
  gap: 20px;
  margin: 30px 0;
}

@media (min-width: 700px) {
  .home-news-grid {
    grid-template-columns: repeat(2, 1fr); /* desktop = 2 columns */
  }
}

/* ================================
   LAYOUT — MOBILE MENU
================================ */

.menu-btn {
  width: auto;
  height: auto;
  position: relative;
  z-index: 1; /* sits above the centered, non-interactive badge/name */
  cursor: pointer;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 6px;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.menu-btn span {
  display: none;
}

.menu-btn::after {
  content: "Menu";
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #000;
  color: #fff;
  padding: 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 9999;
}

.mobile-menu.show {
  transform: translateX(0);
}

.mobile-menu a {
  display: block;
  padding: 12px 0;
  color: #fff;
  border-bottom: 1px solid #333;
  font-size: 18px;
}

.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998; /* below .mobile-menu (9999), above everything else */
}

.menu-overlay.show {
  display: block;
}


/* ================================
   LAYOUT — FOOTER
================================ */

.footer {
  background: #111;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  margin-top: 40px;
}

.footer-badge {
  width: 80px;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 25px;
}

.footer-links a {
  color: #ddd;
  text-decoration: none;
}

.footer-links a:hover {
  color: #b30000;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.social-icon {
  width: 36px;
  height: 36px;
  background: #222;
  border-radius: 50%;
  line-height: 36px;
  text-align: center;
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 15px;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-accreditation {
  height: 78px;
  width: auto;
  opacity: 0.85;
}





/* ============================================================
   FINAL FIX — DESKTOP FIXTURES ALIGNMENT (UPDATED SPACING)
============================================================ */

@media (min-width: 700px) {

  .fixtures-table,
  .reserves-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* FORCE column alignment */
  }

  /* Header + body cells must behave the same */
  .fixtures-table th,
  .fixtures-table td,
  .reserves-table th,
  .reserves-table td {
    padding: 10px 12px; /* slightly more padding */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 15px; /* slightly larger for readability */
  }

  /* Column widths — widened for breathing room */
  .fx-date {
    width: 130px;
  }

  .fx-opponent {
    width: 320px;
  }

  .fx-venue {
    width: 280px;
  }

  .fx-ko {
    width: 80px;
    text-align: center;
  }

  .fx-competition {
    width: auto;
  }

  /* Opponent cell layout */
  .fx-opponent {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .fx-opponent img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}

/* On mobile: a normal inline row instead of the old centered-overlay
   trick - Menu button, then badge+club name flowing together right
   after it, with the theme toggle pinned to the far right. Club name
   truncates with an ellipsis if it ever runs out of room rather than
   overlapping anything. */
@media (max-width: 600px) {
  .header {
    justify-content: flex-start;
    gap: 10px;
  }

  .header-left {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    left: auto;
    transform: none;
  }

  .menu-btn {
    order: 1;
    flex-shrink: 0;
  }

  .badge {
    flex-shrink: 0;
    width: 32px;
  }

  .club-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .theme-toggle {
    order: 3;
    flex-shrink: 0;
    margin-left: auto;
  }
}

@media (max-width: 340px) {
  .club-name {
    font-size: 12px;
  }

  .badge {
    width: 26px;
  }
}