/***********************************
  Theme (Colors, Fonts, Backgrounds)
***********************************/
/* MARINERS COLORS
Deep Sea Blue:    	    #001628; RGB: (0, 22, 40)
Ice Blue:	              #99d9d9; RGB: (153, 217, 217)
Boundless Blue:	        #355464; RGB: (53, 84, 100)
Red Alert:            	#e9072b; RGB: (233, 7, 43)
Shadow Blue             #68a2b9;  RGB: (104, 162, 185) 

 */

/* 1) Base Colors, Fonts */
body {
  background-color: #68a2b9;
  color: white;
  font-family: Arial, sans-serif;
}

/* 2) Header / Background Images */
body > header {
  /* We keep layout properties in layout.css (width, max-height, etc.) */
  background-image:
          url("img/ss_tiled_bg.png"),
          linear-gradient(180deg, #e9072b 0%, #99d9d9 100%);
  background-repeat: repeat-x, no-repeat;
  background-position: top left, center;
  background-size: auto, cover;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); /* We’ll move color references to theme.css below */
}

/* 3) Title (Color, Font, etc.) */
div#title h1 {
  text-align: center; /* could stay in layout, but commonly a style choice */
  font-variant: small-caps;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  background-color: #355464;
  margin: 0;
  padding: 0;
}

/* 4) Navigation Colors & Hover Styles */
nav{
  background-color: #444444FF;
  border-bottom: 3px solid #e9072b;
}
nav ul li a {
  color: white;
  text-decoration: none;
}
nav ul li:hover {
  color: #000;
  text-shadow: #fff 0 0 5px;
  text-decoration: underline;
  background-color: #a4acaf;
}

/* 5) Sidebar Theme */
.sidebar {
  background-color: #001628; /* Sidebar background */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sidebar h2 {
  border-bottom: 2px solid white;
}
.sidebar .team-links li a {
  text-decoration: none;
}

.sidebar .team-links li a:hover, .team-links li a:active {
  text-decoration: underline;
}

.sidebar .upcoming-games .match {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}
.sidebar .upcoming-games .game-time {
  font-size: 1rem;
  color: #f1c40f; /* Yellow */
}

.sidebar .upcoming-games .game-venue {
  font-size: 0.9rem;
  color: #aaaaaa;
}

.sidebar ul li a {
  color: lightblue;
}

/* Team-Specific Background Colors */
.sidebar .upcoming-games .hockey .match {
  background-color: #355464; /* Kraken Blue */
}

.sidebar .upcoming-games .soccer .match {
  background-color: #2ECC40; /* Sounders/Reign Green */
}

.sidebar .upcoming-games .baseball .match {
  background-color: #005C5C; /* Mariners Teal */
}

.sidebar .upcoming-games .basketball .match {
  background-color: #2E5136; /* Storm Green */
}

.sidebar .upcoming-games .football .match {
  background-color: #002A5C; /* Seahawks Blue */
}


/* 6) Main Content Theme */
main article {
  background: #001628;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

main h2 {
  font-size: 1.8rem;
  font-style: italic;
  border-top: 2px solid #001628;
  border-bottom: 2px solid #001628;
  background: linear-gradient(90deg, #001628 0%, #99d9d9 100%);
}

main h3 {
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 4px solid #ffffff; /* Default white, overridden per sport */
}

/* Team-Specific Borders for h3 */
.news .football h3,
.highlights .football h3 { border-bottom-color: #002A5C; } /* Seahawks Blue */
.news .baseball h3,
.highlights .baseball h3 { border-bottom-color: #005C5C; } /* Mariners Teal */
.news .soccer h3,
.highlights .soccer h3 { border-bottom-color: #2ECC40; } /* Sounders/Reign Green */
.news .basketball h3,
.highlights .basketball h3 { border-bottom-color: #2E5136; } /* Storm Green */
.news .hockey h3,
.highlights .hockey h3 { border-bottom-color: #001F3F; } /* Kraken Blue */

main img {
  border-radius: 5px;
}
main p {
  font-size: 1rem;
  color: #dddddd;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border effect */
  background: rgba(255, 255, 255, 0.1); /* Slightly transparent white */
}

main a{
  color: white; /* green for all links */
  text-decoration: none;
  font-weight: bold;
}

main a:hover,
main a:active {
  text-decoration: underline;
  color: red; /* Gold highlight on hover/active */
}

/* 7) Footer Colors */
footer {
  background: #0C2C56;
}