.contentData a,
.contentDate a:link,
.contentData a:visited,
.contentData a:hover,
.contentData a:active,
.contentData a:focus {
    color: #222 !important;
    text-decoration: none;
}


.contentData a:hover {
    color: #CC0000 !important;
    text-decoration: none;
}

.team a:hover {
    color: #CC0000 !important;
    text-decoration: none;
}

/* --- Fixture Card --- */
.fixture-card {
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  display: grid;
  gap: 10px;
  grid-template-columns: 80px 1fr;
  grid-auto-rows: auto;
  grid-template-rows: auto auto auto;
  margin-bottom: 15px;
  padding: 12px 16px;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.fixture-card.admin {
  grid-template-rows: auto auto auto auto;
}

.fixture-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* --- Admin Row --- */
.fixture-admin {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  margin-bottom: 5px;
  text-align: center;
}

/* --- Date --- */
.fixture-date {
  align-items: center;
  background: #f5f5f5;
  border-radius: 10px;
  color: #555;
  display: flex;
  flex-direction: column;
  font-family: 'Lato', sans-serif;
  grid-column: 1;
  grid-row: 1 / -1;
  justify-content: center;
  padding: 5px 5px;
  text-align: center;
}

.fixture-day {
  color: #333;
  font-size: 2.3em;
  font-weight: 400;
  margin: 2px 0;
}

.fixture-month {
  color: #777;
  font-size: 0.85em;
}

.fixture-weekday {
  color: red;
  font-weight: 600;
}

/* --- Inner Layout --- */
.fixture-main-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  grid-column: 2;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* --- Referee (Top Row) --- */
.fixture-ref {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 5px;
}

.ref-head {
  border-radius: 50%;
  height: 30px;
  object-fit: cover;
  width: 30px;
}

/* --- Teams & Score (Middle Row) --- */
.fixture-main {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 10px;
  justify-content: space-between;
  min-width: 240px;
  width: 100%;
}

.fixture-top,
.fixture-middle,
.fixture-bottom {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  text-align: center;
}

.fixture-middle {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Home, Score, Away */
    align-items: center;
    justify-items: center;
    gap: 10px;
    width: 100%;
}

.fixture-bottom: {
	grid-row: 4;
}

.fixture-top .fixture-ref,
.fixture-bottom .fixture-ground {
  justify-content: center;
}

.fixture-score {
    justify-self: center; /* always centered */
    font-weight: 700;
    font-size: 1.2em;
    white-space: nowrap;
}

.team {
  align-items: center;
  display: flex;
  gap: 6px;
}

.home-team {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
}

.team-crest {
  height: 26px;
  width: 26px;
}

.team-name {
  color: #222;
  font-size: 1.1em;
  font-weight: 500;
  flex: 1;
  word-wrap: break-word;
  white-space: normal; 
}

.away-team {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch; 
  gap: 5px;
}

.away-team .team-crest {
  align-self: stretch; 
  height: auto; 
  width: 26px;
}

.away-team .team-name {
  align-self: center; 
  white-space: normal;
  word-wrap: break-word;
}


/* --- Score --- */
.fixture-score {
  border-radius: 8px;
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
  padding: 4px 10px;
  white-space: nowrap;
}

.score-sep {
  color: #888;
  font-weight: 300;
  margin: 0 3px;
}

/* --- Venue & Triangle (Bottom Row) --- */
.fixture-bottom {
  align-items: center;
  display: flex;
  margin-top: 6px;
  width: 100%;
}

.fixture-venue {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.fixture-venue img {
  opacity: 0.8;
  width: 18px;
}

/* --- Attendance (Top right corner) --- */
.fixture-attendance {
  color: #777;
  font-size: 0.85em;
  position: absolute;
  right: 12px;
  top: 8px;
}

/* --- Triangle Button --- */
.toggle-matchStats {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    right: 10px;
    position: absolute;
}

.triangle {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #333;
  display: inline-block;
  height: 0;
  transition: transform 0.3s ease;
  width: 0;
}

.toggle-matchStats .triangle {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #333;
  display: inline-block;
  height: 0;
  transition: transform 0.3s ease;
  width: 0;
}

button.toggle-matchStats[aria-expanded="true"] .triangle {
  transform: rotate(180deg) !important;
}

/* --- Match Stats Section --- */
.matchStats {
  grid-column: 1 / span 2;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  width: 100%;
}

.matchStats-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 10px;
    transition: grid-template-columns 0.3s ease;
}

.matchStats-row {
    display: contents; /* allow each row to align correctly */
}

.matchStats-cell {
    padding: 2px 5px;
}

.matchStats-cell.home {
    text-align: right;
}

.matchStats-cell.away {
    text-align: left;
}

.event-home,
.event-away {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.event-home {
  justify-content: flex-end;
}

.event-away {
  justify-content: flex-start;
}

.event-home .player-name,
.event-away .player-name {
  font-weight: bold;
}

.event-type {
  font-style: italic;
  color: #555;
}

.event-time {
  font-size: 0.9em;
  color: #888;
}

.ref-head {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.card_icon {
	width: auto;
    height: 15px;
    vertical-align: middle;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* stays above content */
  transition: background 0.3s ease;
}

main {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}



.analTable {
 	border: 1px solid #e6e6e6;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 15px;
    display: block !important; 
    font-size: 14px;   
	height: auto;
    width: 650px;
	overflow: visible;
    padding: 8px;
    margin: 0 auto;
    margin-bottom: 0px;
  	margin-bottom: 20px;
}

.attendance {
	padding-right: 5px;
}

.venueDetails {
	font-size: 1em;
}

.rEf {
	width: 160px;
}

.refNa {
	width: 90px;
}

/* When scrolling up, visually slide under nav */
body.scroll-up main.page-content {
  transform: translateY(-20px); /* tweak as desired */
  opacity: 0.98; /* gives a subtle "slide under" illusion */
}

.page-content {
    border-radius: 0px;
    margin-left: 250px;
    margin-top: 10px;
    position: absolute;
    top: 35px;
    width: calc(97% - 250px);
    border: 0px;
    position: relative;
    z-index: 1;
    padding-bottom: 80px;
    transition: transform 0.3s ease;
    min-height: calc(100vh - 35px);     
}


.w3gt-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.w3gt-content.show {
  max-height: 5000px;
  opacity: 1;
  overflow: visible;
}

.w3gt-content.w3gt-hide {
  max-height: 0;
  opacity: 0;
}

.plusNeg {
  transition: transform 0.3s ease;
  width: 15px;
  height: 15px;
}

.plusNeg.rotate {
  transform: rotate(180deg);
}

.compLogoH {
    text-align: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.compLogoH.fade {
    opacity: 0;
}

.compLogo {
    max-height: 300px;
    transition: transform 0.4s ease;
}

.compLogoH.fade-in .compLogo {
    transform: scale(1.05);
}

.roundHead {
    font-family: Lato;
    font-size: 20px;
    font-weight: 500;
    line-height: 3;
    text-align: left;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    cursor: pointer;
}

.contentData {
    max-width: calc(95vw - 210px);
}


.analTable > .row {
	display: table;
	table-layout: fixed;
	width: 100%;
	background: white;
}

.roundToggle {
  color: #333 !important;
  background: none;
  border: none;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}


.concertina-toggle {
  align-items: center;
  background: #f3f5f9;
  border: none;
  border-left: 4px solid transparent;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  justify-content: space-between;
  padding: 10px;
  text-align: left;
  transition: background 0.3s;
  width: 100%;
}

.concertina-toggle:hover {
  background: white;
  border-left: 4px solid #63a1cc;
}

/* Chevron */
.concertina-toggle .chevron {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  display: inline-block;
  height: 1em;
  margin-left: 0.5em;
  transition: transform 0.3s ease;
  vertical-align: middle;
  width: 1em;
}

/* Optional: small icon sizing */
.size-6 {
  height: 20px;
  margin-right: 8px;
  width: 20px;
  vertical-align: middle;
}

.simple-menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.simple-menu li a {
  color: #333;
  display: block;
  padding: 8px 12px;
  text-align: left;
  text-decoration: none;
}

.simple-menu li a:hover {
  background: white;
  border-left: 4px solid var(--accent-color, #63a1cc);
  color: #333;
}

.menu-toggle-secondary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none; 
    border: none;               /* remove border */
    color: #222 !important;     /* your desired color */
    font-size: 2rem;
    cursor: pointer;
    z-index: 10001;
    padding: 0;
}

/* Also target all states */
.menu-toggle-secondary:focus,
.menu-toggle-secondary:hover,
.menu-toggle-secondary:active {
    color: #222 !important;
    background: none;
}

.fixture-card {
    position: relative; /* make this the reference for absolute positioning */
}

.fixture-link-left {
    position: absolute;
    left: 7px;
    top: 12px;
    transform: translateY(-50%);
    /* Optional styling */
    font-size: 0.9em;
    font-weight: bold;
}

.fixture-top {
    display: flex;
    align-items: center;
    gap: 10px; /* spacing between referee, attendance, etc. */
}

#mobile-menu-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  font-size: 2rem;
  background: none;
  border: none;
  z-index: 20000;
  cursor: pointer;
  display: none; /* default hidden */
}

#mobile-menu-toggle span {
  font-size: 0.5em;
}

/* --- Responsive --- */
@media (max-width: 700px) {
	
	#mobile-menu-toggle {
	    display: block; /* show on mobile */
	  }

  	.desktop-menu { 
  	  	display: none; 
  	}
  	.menu-toggle-secondary { 
        display: block;
        position: fixed;
        top: 40px;
        left: 14px;
        font-size: 2rem;
        z-index: 10001;
        background: none;
        border: none;
        cursor: pointer;
  	}
  	
  	 /* Mobile menu overlay */
    .mobile-menu-wrapper {
        display: none;  /* hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 10000;
        overflow-y: auto;
        padding: 0px !important;
    }
    
    #mobile-menu-toggle {
	    color: black;
	    background: none;
	    border: none;
	    font-size: 2rem;
	    position: fixed;
	    margin-top: 30px;
	    margin-left: 2px;
	    z-index: 20000;
	    cursor: pointer;
	}

  	
	.menu-wrapper.mobile-menu {
	    position: fixed;  /* overlay content */
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 100vh;
	    background: #fff;
	    z-index: 9999;
	    display: none; /* hidden by default, shown on hamburger click */
	}

  	
  	.menu-header {
  		gap: 0px;
  		top: 75px;
  		width: 100% !important;
  		padding: 0px !important;
  	}
  	
  	.mobile-header {
  		position: fixed;
  		width: 100vw;
  		top: 0px;
  	}
  	
  	.mobile-nav {
  		display: block !important;
  		background: #f3f5f9;
  	}
  	
  	.menu-inner {
  		padding: 0px;
  		width: 100% !important;
  		margin-top: 20px;
  	}
  	
  	.menu-wrapper {
	  	position: static;
	  	left: 0;
	  	bottom: 0;
	  	z-index: 100;
  	  	max-height: 0;
  		overflow: hidden;
  		transition: max-height 0.3s ease;
	}

	.menu-wrapper.open {
  		max-height: 1000px;;
	}

  	
    .page-content {
        position: relative !important;
        margin: 0 !important;
        margin-top: 56px !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: auto !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    .contentData {
    	max-width: 95vw !important;
    }

	.analTable {
		width: 95vw;
		border: 0px;
		box-shadow: none;
	}	

	.fixture-card {
	  	display: flex;
	    flex-direction: column;
	    text-align: center;
	    padding: 14px;
	    width: 93vw;
  	}

	.fixture-date {
        order: -1;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        font-size: 0.9em;
        margin-top: 10px;
	}
	
	.fixture-weekday, .fixture-day, .fixture-month {
		margin: 4px;
	}

    .fixture-middle {
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    
  	.fixture-main {
    	align-items: center;
    	flex-direction: column;
  	}

  	.fixture-score {
    	font-size: 1.4em;
    	margin: 8px 0;
    	order: 0;
  	}

  	.fixture-footer {
    	flex-direction: column;
    	gap: 4px;
  	}

  	.fixture-attendance {
    	top: 4px;
  	}
  
  	.fixture-top, .fixture-bottom {
		flex-direction: column;
		gap: 4px;
  	}
  	
  	.matchStats-grid {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 10px;
	    font-size: 10px
	}
	
	.matchStats-row > div:first-child {
	    display: none; /* hide buffer column */
	}
	
	.matchStats-cell.home {
	    justify-self: end;
	    text-align: right;
	}
	
	.matchStats-cell.away {
	    justify-self: start;
	    text-align: left;
	}	

	.event-home, .event-away {
    	gap: 3px;
    	line-height: 1.1;
	}
  
  	.home-team, .away-team {
		justify-content: center; /* centered in stacked layout */
  	}
  
  	.home-team {
  		text-align: right;
  	}
  
  	.away-team {
  		text-align: left;
  	}
  
	.team-name {
		white-space: normal;   /* allow wrapping */
	}
	
	.round-toggle {
        width: 24px;     /* ensures space for + / – */
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .round-toggle svg {
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}