:root {
  /* Brand Colors */
  --color-primary: #1F7A5B;   /* Pickle Green */
  --color-secondary: #F4B400; /* Golden Yellow */
  --color-accent: #2563EB;    /* Optional Blue */
  --scroll-margin-top: 0px; /* Fallback value */
    
  /* Neutrals */
  --color-bg: #F5F7FA;
  --color-white: #FFFFFF;
  --color-text-dark: #1F2933;
  --color-text: #4B5563;
  --color-border: #E5E7EB;

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
}

/* ---------- Base Styles ---------- */
html {
  scroll-behavior: smooth;
	 font-size: 16px; /* Sets 1rem to equal 18px */
}

body {
  font-family: var(--font-main);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  color: var(--color-text-dark);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  /*text-decoration: underline;*/
}

a.header-item {
	text-decoration: none;
	color: #FFFFFF;
}

/* ---------- Layout Utilities ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0.2rem;
}

.section {
  padding: 4rem 0;
}

/* ---------- Header / Navigation ---------- */
header {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: var(--color-white);
  font-weight: 500;
}

.nav-links a:hover {
  opacity: 0.85;
}


.under-construction {
	display: flex;
	border-top: 2px solid red;
	border-bottom: 2px solid red;
	color: red;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.2rem;
	align-items: center;
}

.header {
	display: flex;
	background-color: #1F7A5B;
	padding-top: 0.7rem;
	padding-left: 2.0rem;
	padding-right: 2.0rem;
	padding-bottom: 0.7rem;
	align-items: center;
}

.header-left {
}

.header-center {
	color: white;
	padding-left: 1rem;
	padding-right: 1rem;
}

.header-menu-item {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ---------- Footer ---------- */
footer {
	display: flex;
	margin-top: 0.5rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: center;
  font-size: 0.8rem;
}

footer a {
  color: var(--color-white);
  opacity: 0.9;
}

footer a:hover {
  opacity: 1;
}

.image-container {
  position: relative; /* Container for the text's absolute position */
  display: inline-block; /* Helps maintain container size relative to image */
  padding-bottom: 1.0rem;
}

.container img {
  display: block; /* Removes extra space below image */
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute; /* Position the text over the image */
  top: 10%;
  left: 2%;
  transform: translate(0%, 0%); /* Centers the text perfectly */
  color: white; /* Make text readable */
  font-size: 48px;
  font-weight: 600;
  /* Add a semi-transparent background or text shadow for better readability */
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0px;
}

.overview {
	display: flex;
	flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg);
}

.region {
  border-left: 8px solid #1F7A5B;
  border-radius: 8px;
	display: flex;
	padding: 0.1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin-left: 0.2rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	align-items: center;
}

.region-name {
	font-size: 2.5Rem;
	margin-right: 0.8rem;
	color: #1F2933;
}

.countries {
	font-size: 1rem;
}

.country {	
	display: flex;	
	margin-left: 2rem;
	font-size: 1rem;
}

.country-name {
	font-size: 1.5rem;
	margin-left: 2rem;
	padding-right: 2rem;
}

.country-cities {
	padding-top: 1rem;
}

.city {
}

.code {
    font-style: italic;
}

.tbl-checks {
  border-collapse: collapse;
}

.tbl-tourney {
  border-collapse: collapse;
  width: 100%;
}

tr.tbl-header {
	border-bottom: 1px solid #969696;
}

tr.tbl-alt-color {
	background-color: #FAFAFA;
}

td {
	vertical-align: top;
	padding: 0.4rem;
}

.tbl-country-show {
	font-size: 1.5rem;
	font-weight: 500;
	padding-right: 0.5rem;
	color: #252525;
	}

.tbl-country-hide {
	font-size: 1.5rem;
	font-weight: bold;
	padding-right: 0.5rem;
	color: var(--color-bg);
}

.tourney-card {
  padding-left: 0.5rem;
	padding-bottom: 0.5rem;
	border-left: 8px solid var(--color-secondary);
	color: var--(color-text);
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg);
}
       
.tourney-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0rem;
  padding-bottom: 0rem;
}

.tourney-details {
	font-size: 1rem;
	line-height: 1.2;
  text-align: left;
  margin-bottom: 0.2rem;
}

.sandbox {
  width: 100%;
  background: #FDD0A2;
  margin-bottom: 1rem;
}

.sandbox::before {
 	font-size: 1.2rem;
  content: "NOTE: This is a fictitious tournament and is used for testing purposes.";
}

.category {
  /*background: #eee;*/
  background: #E5F5E0;
  padding: 0.6rem;
  font-weight: bold;
  /*border-bottom: 3px solid #BDBDBD;*/
  color: #525252;
  font-size: 1.4rem;
  border-left: 12px solid #238B45;
}

.category-label {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--color-text);
}

.team-count {
	padding-left: 0.5rem;
	font-size: 1.0rem;
	font-weight: normal;
}

.category-group {
  background: #F5F5F5;
  padding: 0.6rem;
  font-weight: bold;
  color: #525252;
  /*border-left: 6px solid #74C476;*/
}

.category-checks-errors {
  /*background: #CB181D;*/
  background: #FCBBA1;
  padding: 0.6rem;
}

.entry {
	display: flex;
	padding-top: 1rem;
	border-bottom: 1px solid #BDBDBD;
}

/*
.entry-alt-color {
	display: flex;
	padding-top: 1rem;
	background: #fafafa;
}
*/

.sequence {
	display: flex;
	flex-direction: row;
	font-weight: bold;
	text-align: top;
	padding-right: 0.4rem;
}

.team {
	display: flex;
}

.team-name {
  font-weight: bold;
  color: #525252;
  font-size: 1rem;
  padding-bottom: 0.4rem;  	
}

.team-container {
}

.team-players {
	display: flex;
	flex-wrap: wrap;
}

.team-checks {
  background: #FEE0D2;
  padding: 0.6rem;
}

.player-card {
  display: block;
  flex: 1;
  min-width: 400px;
  border-left: 0px solid #ff5a2c;  
  border-radius: 8px;
  /*background: #fff;*/
  align-items: flex-start;
	max-width: 500px;
	text-align: top;
	padding-bottom: 0.5rem;
	padding-right: 2rem;
}

.player-card-singles {
  display: flex;
  flex: 1;
  border-left: 0px solid #ff5a2c;  
  border-radius: 8px;
  /*background: #fff;*/
  align-items: flex-start;
	text-align: top;
	padding-bottom: 0.5rem;
	padding-right: 4rem;
}

.player-details {	
  display: flex;
	flex-flow: row wrap;
 	justify-content: left;
 	text-align: top;
 }
 
 .player-photo {
 	width: 100px;
 	text-align: center;
 }

.player-photo img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 8px;
}

/* Center info */
.player-info {
	padding: 0rem 0.0rem 0.0rem 0.8rem;
  flex: 1;
  width: 100%;
}

.player-name-container {
	/*display: flex; */
}
 
 .player-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  padding-top: 0rem;
}

.player-name-male {
  font-size: 1.2rem;
  font-weight: bold;
  color: #08519C;
  padding-top: 0rem;
}

.player-name-female {
  font-size: 1.2rem;
  font-weight: bold;
  color: #CB181D;
  padding-top: 0rem;
}

.player-rating-container {
	display: flex; 
	align-items: center; 
	gap: 8px;
}

.player-meta {
  color: #555;
  margin-top: 0.0rem;
  font-size: 1.0rem;
}

.singles-match::before {
 	font-family: "FontAwesome";
 	font-size: 1.0rem;
  content: "\f2c0";
  color: #007f80;
}

.doubles-match::before {
 	font-family: "FontAwesome";
 	font-size: 1.0rem;
  content: "\f2c0\f2c0";
  color: #a20bc1;
}


.player-rating {
  font-size: 1.2Rem;
  margin-top: 0.3rem;
  color: black;
}

.rating {
  font-weight: bold;
}

.reliability {
  color: #666;
}

.player-stats-title {
	font-size: 0.8rem;
	text-align: center;
	color: var(--color-text);
}

/* Right stats */
.player-stats {
  padding-top: 0.5rem;
}

.player-stats img {
  max-width: 100%;
  height: auto;
 	padding-bottom: 1rem;
}


/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-text-dark);
}

.btn-primary:hover {
  background-color: #E0A800;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}


:target {
	scroll-margin-top: var(--scroll-margin-top);
}


/* Tablet */
@media (max-width: 768px) {
	
	html {
		 font-size: 16px; /* Sets 1rem to equal 18px */
	}

	.under-construction {
		margin-bottom: 0.2rem;
		font-size: 0.8rem;
	}

	.btn {
	  padding: 4px 10px;
	  font-size: 0.6rem;
	  font-weight: none;
	}

	.header {
		padding-top: 0.3rem;
		padding-left: 0.3rem;
		padding-right: 0.3rem;
		padding-bottom: 0.3rem;
	}

	a.header-item {
		font-size: 0.8rem;
	}

	.image-container {
		padding-bottom: 0.5rem;
	}
	
	.overlay-text {
		font-size: 1rem;
	}	

	.overview {
		display: block;
		/*padding-top: 0.5rem;*/
		padding-bottom: 0.2rem;
	}

	.region {
	  border-left: 6px solid #1F7A5B;
	  border-radius: 6px;
		padding: 0.1rem;
		padding-left: 0.5rem;
		padding-right: 0.0rem;
		margin-bottom: 0.5rem;
	}

	.region-name {
		font-size: 1.2Rem;
	}
	
	.countries {
		font-size: 0.8rem;
	}

	.tbl-country-show {
		font-size: 1.2rem;
		padding-right: 0.3rem;
		}
	
	.tbl-country-hide {
		font-size: 1.2rem;
		padding-right: 0.3rem;
	}

	td {
		padding: 0.4rem;
		font-size: 0.8rem;
	}

	.tourney-title {
	  font-size: 1.2rem;
	}

	.tourney-details {
		font-size: 0.8rem;
	}
	
	.category-label {
		font-size: 1rem;
	}
	
	.tourney-category-list {
		font-size: 0.8rem;
	}

	.sandbox::before {
		font-size: 0.8rem;
	}

	.player-card {
		min-width: 100%;
		padding-right: 0rem;
	}

	.player-card-singles {
  	display: block;
  	padding-right: 0.1rem;
  }

 	.player-name {
	  font-size: 1.0rem;
	}
	
	.player-name-male {
	  font-size: 1.0rem;
	}
	
	.player-name-female {
	  font-size: 1.0rem;
	}

	.player-rating {
	  font-size: 1.0Rem;
	  margin-top: 0.3rem;
	}

	.player-meta {
	  margin-top: 0.0rem;
	  font-size: 0.7rem;
	}

	.player-stats-title {
		font-size: 0.6rem;
	}

	.category {
	  padding: 0.6rem;
	  font-size: 1.0rem;
	  border-left: 6px solid #238B45;
	}

	.team-count {
		padding-left: 0.3rem;
		font-size: 0.8rem;
	}
}

/* Mobile */
@media (max-width: 480px) {
/*
  .team {
    flex-direction: column;
    align-items: flex-start;
  }
  .player-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .team-players {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-stats {
    text-align: left;
    width: 100%;
  }

	.overlay-text {
		font-size: 16px;
	}
*/  
}

/*
@media (max-width: 960px) { 
  .player-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .team {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .team-players {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-stats {
    text-align: left;
    width: 100%;
  }

	.overlay-text {
		font-size: 24px;
	}
}
*/