@charset "UTF-8";
/* CSS Document */

/* ========================================================================================== COLOR VARIABLES ================== */
:root {
    --navy: #002855;
    --lake-blue: #4DA9E9;
    --industrial-gray: #8c8c8c;
    --cream-city-brick: #F5E6C8;
    --bright-white: #FFFFFF;
	--bg-color: #F8F8F8;
}

/* ========================================================================================== GLOBAL STYLES ================== */
body {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: var(--bg-color);
}

/* ========================================================================================== TEAM LOGO BAR ================== */
.team-logo-bar {
	background-color: var(--bg-color);
	border-bottom: none;
	overflow-x: auto;
	white-space: nowrap;
	padding: 10px 0;
}

/* Scrollbar remains for desktop if content exceeds width */
.team-logo-bar::-webkit-scrollbar {
	height: 6px;
}

.team-logo-bar::-webkit-scrollbar-thumb {
	background: var(--industrial-gray);
	border-radius: 3px;
}

/* Desktop Layout */
.team-logo-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 0 10px;
}

.team-logo-container img {
	height: 50px;
	width: auto;
	transition: transform 0.3s;
}

.team-logo-container img:hover {
	transform: scale(1.1);
}

/* MOBILE RESPONSIVE FIX */
@media (max-width: 700px) {

/* Switch to grid */
.team-logo-bar {
	overflow-x: visible;
	white-space: normal;
}

.team-logo-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 team logos per row */
	gap: 15px 10px;
	padding: 10px;
	justify-items: center;
	}

.team-logo-container img {
	height: 45px;
	width: auto;
	}
}

/* ========================================================================================== MAIN NAV ================== */
.main-nav {
background-color: var(--navy);
color: var(--bright-white); /* Bullet Color */
position: sticky;
top: 0;
z-index: 9999;
}

.nav-container {
display: flex;
align-items: center;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
position: relative;
}

/* Logo */
.nav-container .logo img {
height: 60px;
width: auto;
}

/* Hamburger toggle */
.menu-toggle {
display: none;
position: absolute;
opacity: 0;
}

.hamburger {
display: none;
font-size: 28px;
cursor: pointer;
color: var(--cream-city-brick); /* Hamburger Lines Color */
z-index: 1001;
}

/* Desktop nav links */
.nav-links {
display: flex;
list-style: none;
gap: 20px;
margin: 0;
padding: 0;
align-items: center;
z-index: 999;
}

.nav-links li {
position: relative;
}

.nav-links a {
color: var(--bright-white); /* Navigation Link Color */
text-decoration: none;
padding: 10px;
display: block;
font-weight: bold;
transition: background 0.3s;
}

.nav-links a:hover {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}

/* Desktop dropdown */
.dropdown-content {
display: none;
position: absolute;
background-color: var(--lake-blue); /* Lake Blue Color */
min-width: 180px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
top: 100%;
left: 0;
z-index: 999;
}

.dropdown-content li a {
padding: 10px;
}

.dropdown:hover .dropdown-content {
display: block;
}

/* MOBILE RESPONSIVE */
@media screen and (max-width: 768px) {

/* Hamburger button */
.hamburger {
display: block !important;
position: absolute;
top: 10px;
right: 20px;
background: var(--lake-blue); /* Hamburger Background Color */
padding: 5px 10px;
font-size: 28px;
cursor: pointer;
z-index: 9999;
}

/* Mobile nav hidden by default */
.nav-links {
display: none;
flex-direction: column;
width: 100%;
background-color: var(--navy); /* Navy Blue Color */
position: absolute;
top: 60px; /* below logo */
left: 0;
border-top: 1px solid var(--cream-city-brick); /* Color for Line Above Nav on Mobile */
z-index: 9999;
}

/* Show nav when checkbox is checked */
.menu-toggle:checked + .hamburger + .nav-links {
display: flex !important;
}

.nav-links li {
width: 100%;
}

.nav-links li a {
padding: 12px 20px;
}

/* Mobile dropdowns */
.dropdown-content {
position: static;
display: none;
background-color: var(--lake-blue); /* Lake Blue Color for backgrounds of dropdowns */
box-shadow: none;
}

.dropdown .dropdown-content li a {
padding-left: 40px;
}

.dropdown > a::after {
content: " ▼";
font-size: 12px;
}

/* Toggle dropdown on click via JS */
.dropdown-content.dropdown-active {
display: block !important;
}
}

/* ========================================================================================== Text GRID ================== */
.text-container {
	max-width: 1200px;       /* controls the width so content isn't too wide */
	margin: 40px auto;       /* centers the container with 40px top/bottom margin */
	padding: 0 15px;         /* adds some space on the sides for mobile */
/*	display: flex;
	flex-direction: column; */
}